/* Opt-in adapter for the REAL v2 DOM. Loaded only by ?phase2=1.
   The design assets remain layered and unchanged; the existing unlayered v2
   stylesheet wins over layers, so this last, scoped bridge maps its legacy
   names and styles only controls that already exist. No gallery or new pager. */
@import url('./tokens.css');
@import url('./base.css');
@import url('./components.css');
@import url('./motion.css');

/* Legacy --bg/--surface/--accent are unlayered and cannot be read back from
   layered tokens of the same name. Map these three collision-prone surfaces
   explicitly; the other new tokens (--ink, --surface-2, etc.) come from tokens. */
html.phase2[data-theme="kapur-refined"] { --bg: #F5EFE6; --surface: #FAF6F0; --accent: #B45309; --danger: #B42318; --ok: #2E6F40; --warn: #8A5A00; --line: rgb(60 48 36 / .12); }
html.phase2[data-theme="kapur-night"] { --bg: #1A1815; --surface: #221F1B; --accent: #E0913A; --danger: #F08A7E; --ok: #7FBF8E; --warn: #D9A43A; --line: rgb(237 230 218 / .10); }
html.phase2[data-theme="kapur"] { --bg: #E4E6E8; --surface: #F0F2F4; }
html.phase2[data-theme="shibuya"] { --bg: #070B16; --surface: #0E1528; }
html.phase2[data-theme="priok"] { --bg: #0C1420; --surface: #142033; }
html.phase2[data-theme="tokyo"] { --bg: #1B2128; --surface: #242C36; }
html.phase2[data-theme="matcha"] { --bg: #E7EFE4; --surface: #F1F7EE; }
html.phase2[data-theme="monolith"] { --bg: #000000; --surface: #121212; }
html.phase2[data-theme="porcelain"] { --bg: #F8FAFC; --surface: #FFFFFF; }
html.phase2[data-theme="dusk"] { --bg: #2C323B; --surface: #363D47; }
html.phase2[data-theme="petrol"] { --bg: #0A1013; --surface: #111A1F; }
html.phase2[data-theme="automatic"] { --bg: #F5EFE6; --surface: #FAF6F0; --accent: #B45309; --danger: #B42318; --ok: #2E6F40; --warn: #8A5A00; --line: rgb(60 48 36 / .12); }
@media (prefers-color-scheme: dark) {
  html.phase2[data-theme="automatic"] { --bg: #1A1815; --surface: #221F1B; --accent: #E0913A; --danger: #F08A7E; --ok: #7FBF8E; --warn: #D9A43A; --line: rgb(237 230 218 / .10); }
}
html.phase2 {
  --text: var(--ink);
  --muted: var(--ink-2);
  --surface2: var(--surface-2);
  --line2: var(--line-strong);
  --accentInk: var(--on-accent);
  --code: var(--code-bg);
  --bubbleA: var(--surface);
  --bubbleU: var(--bubble-user);
  --radius: var(--radius-sm);
  --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
html.phase2 body { font-size: 16px; line-height: 24px; }
html.phase2 #hdr { background: var(--surface); }
html.phase2 #sess-title { font-size: 17px; line-height: 22px; font-weight: 600; }
html.phase2 .sess-sub-cwd, html.phase2 #status, html.phase2 #band,
html.phase2 .s-meta, html.phase2 .ghead, html.phase2 .turn-meta {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
html.phase2 #status { color: var(--ink-2); }
html.phase2 #st-model { border-radius: var(--radius-xs); }
html.phase2 #transcript { padding-inline: var(--space-4); }
html.phase2 #feed { gap: var(--space-3); }
html.phase2 .assistant { background: var(--surface); color: var(--ink); font-size: 16px; line-height: 24px; border-radius: var(--radius-md); padding: var(--space-3); }
html.phase2 .msg-user { background: var(--bubble-user); color: var(--on-bubble-user); font-size: 16px; line-height: 24px; padding: var(--space-3); }
html.phase2 .md a, html.phase2 .md a code { color: var(--accent-ink); }
html.phase2 .md code:not(pre code) { background: var(--code-inline-bg); color: var(--code-inline-fg); border-radius: var(--radius-xs); font-size: .9em; }
html.phase2 .md pre { background: var(--code-bg); color: var(--code-fg); font: 13px/20px var(--mono); border-radius: var(--radius-md); border-color: var(--line); padding: var(--space-3) var(--space-4); }
html.phase2 .md pre code { color: inherit; }
html.phase2 .syn-kw { color: var(--syn-kw); }
html.phase2 .syn-str { color: var(--syn-str); }
html.phase2 .syn-num { color: var(--syn-num); }
html.phase2 .syn-com { color: var(--syn-com); }
html.phase2 #composer { background: var(--surface); border-color: var(--line); }
html.phase2 #input { color: var(--ink); font-size: 16px; line-height: 24px; }
html.phase2 #btn-send:not(.empty) { color: var(--accent); }
html.phase2 #btn-plus, html.phase2 #btn-send, html.phase2 #btn-stop,
html.phase2 .hbtns button { border-radius: var(--radius-sm); transition: transform var(--spring-snappy-ms) var(--spring-snappy), background-color var(--dur-fast) ease; }
html.phase2 #btn-plus:active, html.phase2 #btn-send:active, html.phase2 #btn-stop:active,
html.phase2 .hbtns button:active { transform: scale(.96); transition-duration: 0ms; }
html.phase2 .modal { background: var(--scrim); }
html.phase2 .modal .sheet { background: var(--surface); border-color: var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-sheet); }
html.phase2 .m-title { font-size: 17px; line-height: 22px; font-weight: 600; }
html.phase2 .mbtn, html.phase2 .theme-sheet-btn, html.phase2 .sess-item {
  background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: var(--radius-md);
}
html.phase2 .mbtn:active, html.phase2 .theme-sheet-btn:active, html.phase2 .sess-item:active { background: var(--surface-2); }
html.phase2 .sess-item.active, html.phase2 .theme-sheet-btn.on { background: var(--accent-soft); border-color: var(--accent); }
html.phase2 .newbtn.primary, html.phase2 .mbtn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); border-radius: var(--radius-sm); }
html.phase2 .newbtn:not(.primary) { color: var(--accent-ink); background: var(--surface); border-radius: var(--radius-sm); }
html.phase2 .s-title { font-size: 16px; line-height: 22px; }
html.phase2 .s-meta { font-size: 12px; line-height: 16px; }
/* Existing fixed v2 overrides use !important for the bubble corner. Match
   their specificity rather than changing legacy CSS or affecting default. */
html.phase2 .msg-user { border-radius: var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-md) !important; }
@media (prefers-reduced-motion: reduce) {
  html.phase2 #btn-plus, html.phase2 #btn-send, html.phase2 #btn-stop,
  html.phase2 .hbtns button { transition: none; }
}