:root {
  --bg1: #0d1322;
  --bg2: #111a2e;
  --bg3: #1a2237;
  --glass: rgba(23, 31, 52, 0.56);
  --glass-soft: rgba(31, 40, 66, 0.44);
  --line: rgba(255, 255, 255, 0.1);
  --text: #ebf0ff;
  --muted: #a5b2d5;
  --bubble-assistant: rgba(27, 36, 58, 0.76);
  --shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.24);
  --choice-text: #edf3ff;
  --choice-bg: rgba(33, 42, 68, 0.68);
  --choice-border: rgba(255, 255, 255, 0.12);
  --font-scale: 1;
  --fs-top: calc(12px * var(--font-scale));
  --fs-bubble: calc(16px * var(--font-scale));
  --fs-meta: calc(11px * var(--font-scale));
  --fs-choice: calc(14px * var(--font-scale));
  --fs-input: calc(16px * var(--font-scale));
  --fs-note: calc(11px * var(--font-scale));
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
  --safe-top: max(8px, env(safe-area-inset-top));
  --composer-height: 120px;
  --viewport-bottom-gap: 0px;
}
body[data-theme='light'] { --bg1:#dfe9ff; --bg2:#eef3ff; --bg3:#f9fbff; --glass:rgba(255,255,255,.48); --glass-soft:rgba(255,255,255,.34); --line:rgba(255,255,255,.38); --text:#13203a; --muted:#62708e; --bubble-assistant:rgba(255,255,255,.50); --shadow:0 10px 35px rgba(17,35,79,.12); --shadow-soft:0 4px 18px rgba(17,35,79,.08); --choice-text:#21314f; --choice-bg:rgba(255,255,255,.62); --choice-border:rgba(255,255,255,.54); }
body[data-theme='glass'] { --bg1:#111111; --bg2:#111111; --bg3:#111111; --glass:rgba(28,28,30,.60); --glass-soft:rgba(33,33,35,.54); --line:rgba(255,255,255,.20); --text:#f4f6ff; --muted:#c8ccd9; --bubble-assistant:rgba(32,32,35,.58); --shadow:0 6px 16px rgba(0,0,0,.24); --shadow-soft:0 2px 9px rgba(0,0,0,.20); --choice-text:#f4f6ff; --choice-bg:rgba(35,35,38,.56); --choice-border:rgba(255,255,255,.22); --glass-frost:rgba(255,255,255,.11); --glass-frost-soft:rgba(255,255,255,.05); --glass-edge:rgba(230,235,255,.10); }
body[data-theme='dark'] { --bg1:#1f1f1f; --bg2:#1f1f1f; --bg3:#1f1f1f; --glass:#252525; --glass-soft:#2f2f2f; --line:#3a3a3a; --text:#ffffff; --muted:#b5b5b5; --bubble-assistant:#252525; --shadow:0 0 0 rgba(0,0,0,0); --shadow-soft:0 0 0 rgba(0,0,0,0); --choice-text:#ffffff; --choice-bg:#2f2f2f; --choice-border:#3a3a3a; }
body[data-theme='desert'] { --bg1:#ffcfba; --bg2:#ffb9d4; --bg3:#9f7bff; --glass:rgba(255,255,255,.28); --glass-soft:rgba(255,255,255,.20); --line:rgba(255,255,255,.24); --text:#37173f; --muted:#6e4770; --bubble-assistant:rgba(255,255,255,.34); --shadow:0 10px 35px rgba(94,34,86,.20); --shadow-soft:0 4px 18px rgba(94,34,86,.14); --choice-text:#431f4b; --choice-bg:rgba(255,255,255,.54); --choice-border:rgba(255,255,255,.34); }
body[data-theme='retrowave'] { --bg1:#130022; --bg2:#1f0037; --bg3:#2a0051; --glass:rgba(28,0,52,.72); --glass-soft:rgba(43,0,72,.62); --line:rgba(255,70,185,.52); --text:#f8f6ff; --muted:#b7b4d9; --bubble-assistant:rgba(32,0,58,.82); --shadow:0 12px 36px rgba(0,0,0,.50); --shadow-soft:0 5px 20px rgba(0,0,0,.36); --choice-text:#fbf8ff; --choice-bg:rgba(42,0,74,.84); --choice-border:rgba(255,76,193,.56); }
body[data-theme='clouds'] { --bg1:#e9f5ff; --bg2:#f5fbff; --bg3:#dcecff; --glass:rgba(255,255,255,.50); --glass-soft:rgba(255,255,255,.34); --line:rgba(255,255,255,.42); --text:#18304c; --muted:#6983a0; --bubble-assistant:rgba(255,255,255,.56); --shadow:0 10px 35px rgba(38,88,146,.12); --shadow-soft:0 4px 18px rgba(38,88,146,.08); --choice-text:#1f3a59; --choice-bg:rgba(255,255,255,.72); --choice-border:rgba(255,255,255,.58); }
body[data-theme='matrix'] { --bg1:#000000; --bg2:#020202; --bg3:#050505; --glass:rgba(10,20,10,0.65); --glass-soft:rgba(10,20,10,0.55); --line:rgba(0,255,120,0.22); --text:#d8ffe7; --muted:#6ecf9f; --bubble-assistant:rgba(8,18,10,.82); --shadow:0 10px 35px rgba(0,0,0,.55); --shadow-soft:0 4px 18px rgba(0,0,0,.35); --choice-text:#d8ffe7; --choice-bg:rgba(10,30,15,0.70); --choice-border:rgba(0,255,120,0.30); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--text); }
body {
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.92), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(184,215,255,.50), transparent 28%),
    radial-gradient(circle at 50% 90%, rgba(214,225,255,.55), transparent 32%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 48%, var(--bg3));
  overflow: hidden;
}
body[data-theme='matrix'] { background: linear-gradient(180deg, var(--bg1), var(--bg2), var(--bg3)); }
body[data-theme='glass'] { background: #111111; }
body[data-theme='retrowave'] {
  background:
    radial-gradient(circle at 50% 62%, rgba(34,240,255,.30), rgba(34,240,255,0) 32%),
    radial-gradient(circle at 50% 38%, rgba(255,246,117,.44) 0%, rgba(255,166,63,.34) 20%, rgba(255,62,154,.28) 42%, rgba(255,62,154,0) 70%),
    radial-gradient(circle at 50% 30%, rgba(255,39,170,.26), rgba(255,39,170,0) 58%),
    linear-gradient(180deg, #18002c 0%, #23003e 46%, #350061 63%, #2a004f 100%),
    linear-gradient(to bottom, rgba(255,62,166,.16) 0, rgba(255,62,166,.16) 1px, transparent 1px, transparent 26px),
    linear-gradient(to right, rgba(0,234,255,.14) 0, rgba(0,234,255,.14) 1px, transparent 1px, transparent 34px);
  background-size: auto, auto, auto, auto, 100% 34px, 34px 100%;
  background-position: center, center, center, center, center bottom, center bottom;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
}
a { color: #4ea2ff; text-decoration: underline; }
body[data-theme='matrix'] a { color: #00ff6a; }
body[data-theme='retrowave'] a { color: #22f0ff; }
body[data-theme='dark'] {
  background: #1f1f1f;
}
body[data-theme='dark'] .title-pill,
body[data-theme='dark'] .menu-pill,
body[data-theme='dark'] .menu-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--choice-bg);
  border-color: var(--line);
}
body[data-theme='dark'] .message-row.assistant .bubble,
body[data-theme='dark'] .choice,
body[data-theme='dark'] .composer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-theme='dark'] .composer {
  background: var(--glass);
}
body[data-theme='dark'] #chatInput {
  background: #2f2f2f;
}
body[data-theme='dark'] .debug-footer-btn,
body[data-theme='dark'] .debug-modal-close {
  background: var(--choice-bg);
  border: 1px solid var(--choice-border);
}
body[data-theme='dark'] .choice:hover,
body[data-theme='dark'] .debug-pill:hover,
body[data-theme='dark'] .debug-footer-btn:hover,
body[data-theme='dark'] .debug-modal-close:hover {
  background: #3a3a3a;
  filter: none;
}
body[data-theme='dark'] .choice:active,
body[data-theme='dark'] .debug-footer-btn:active,
body[data-theme='dark'] .debug-modal-close:active {
  background: #2a2a2a;
}
body[data-theme='dark'] .debug-pill {
  background: var(--choice-bg);
  color: var(--text);
}
body[data-theme='dark'] dialog {
  background: #252525;
}
body[data-theme='glass'] .title-pill,
body[data-theme='glass'] .menu-pill,
body[data-theme='glass'] .menu-panel,
body[data-theme='glass'] .message-row.assistant .bubble,
body[data-theme='glass'] .choice,
body[data-theme='glass'] .composer,
body[data-theme='glass'] .debug-section,
body[data-theme='glass'] dialog,
body[data-theme='glass'] .debug-footer-btn,
body[data-theme='glass'] .debug-modal-close,
body[data-theme='glass'] .debug-pill,
body[data-theme='glass'] #chatInput {
  border-color: var(--line);
  background:
    linear-gradient(165deg, var(--glass-frost) 0%, var(--glass-frost-soft) 36%, rgba(255,255,255,.02) 100%),
    rgba(31,31,34,.54);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 0 0 var(--glass-edge) inset,
    0 0 13px rgba(214,220,241,.08),
    0 3px 10px rgba(0,0,0,.22);
}
body[data-theme='glass'] .title-pill,
body[data-theme='glass'] .menu-pill,
body[data-theme='glass'] .menu-panel,
body[data-theme='glass'] .message-row.assistant .bubble,
body[data-theme='glass'] .choice,
body[data-theme='glass'] .composer,
body[data-theme='glass'] .debug-section,
body[data-theme='glass'] dialog,
body[data-theme='glass'] .debug-footer-btn,
body[data-theme='glass'] .debug-modal-close,
body[data-theme='glass'] .debug-pill {
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}
body[data-theme='glass'] .choice:hover,
body[data-theme='glass'] .choice:focus-visible,
body[data-theme='glass'] .debug-footer-btn:hover,
body[data-theme='glass'] .debug-modal-close:hover,
body[data-theme='glass'] .debug-pill:hover {
  border-color: rgba(255,255,255,.28);
  background:
    linear-gradient(165deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.06) 35%, rgba(255,255,255,.03) 100%),
    rgba(39,39,42,.58);
}
body[data-theme='glass'] .choice:active,
body[data-theme='glass'] .debug-footer-btn:active,
body[data-theme='glass'] .debug-modal-close:active,
body[data-theme='glass'] .debug-pill:active {
  background:
    linear-gradient(165deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 34%, rgba(255,255,255,.01) 100%),
    rgba(30,30,33,.66);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 8px rgba(210,220,255,.06),
    0 2px 7px rgba(0,0,0,.20);
}
body[data-theme='glass'] #chatInput {
  background:
    linear-gradient(165deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.02) 100%),
    rgba(39,39,42,.58);
}
body[data-theme='glass'] .message-row.user .bubble {
  background: linear-gradient(180deg, #3e9dff, #2c7ef8);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 6px 16px rgba(33,110,255,.30);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  body[data-theme='glass'] .title-pill,
  body[data-theme='glass'] .menu-pill,
  body[data-theme='glass'] .menu-panel,
  body[data-theme='glass'] .message-row.assistant .bubble,
  body[data-theme='glass'] .choice,
  body[data-theme='glass'] .composer,
  body[data-theme='glass'] .debug-section,
  body[data-theme='glass'] dialog,
  body[data-theme='glass'] .debug-footer-btn,
  body[data-theme='glass'] .debug-modal-close,
  body[data-theme='glass'] .debug-pill,
  body[data-theme='glass'] #chatInput {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background:
      linear-gradient(165deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 100%),
      rgba(35,35,37,.90);
  }
}
#matrixCanvas { position: fixed; inset: 0; z-index: 0; display: none; opacity: .28; pointer-events: none; }
.clouds { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; display: none; opacity: .72; }
.cloud {
  position: absolute;
  top: var(--cloud-top, 30%);
  left: var(--cloud-start, -20%);
  width: 112px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  filter: blur(2px);
  box-shadow:
    40px 8px 0 8px rgba(255,255,255,.72),
    90px 0 0 0 rgba(255,255,255,.82),
    60px -12px 0 10px rgba(255,255,255,.82);
  transform: scale(var(--cloud-scale, 1));
  opacity: .9;
  animation: cloudDrift var(--cloud-duration, 52s) linear infinite;
  animation-delay: var(--cloud-delay, -6s);
}
@keyframes cloudDrift {
  from { transform: translateX(0) scale(var(--cloud-scale, 1)); }
  to { transform: translateX(155vw) scale(var(--cloud-scale, 1)); }
}
.app { height: 100%; display: flex; flex-direction: column; max-width: 980px; margin: 0 auto; position: relative; z-index: 2; }
.topbar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: calc(var(--safe-top) + 6px) 10px 6px; z-index: 12; background: transparent; isolation: isolate; }
.topbar::before { content: none; }
.title-pill, .menu-pill { backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); background: var(--glass-soft); border: 1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: 999px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-top); color: var(--muted); white-space: nowrap; min-height: 42px; padding: 8px 12px; }
.title-pill { flex: 0 1 auto; max-width: 34%; }
.topbar-right { display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 0; flex: 1 1 auto; }
.brand-glyph { display: inline-flex; align-items: center; justify-content: center; color: var(--text); font-size: 1.08em; line-height: 1; }
.brand-word { font-family: 'Rubik', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 700; color: var(--text); font-size: 1.08em; line-height: 1; }
.header-meta { font-size: 0.92em; color: var(--muted); }
.status-text { color: color-mix(in oklab, var(--text) 52%, var(--glass-soft)); }
.header-menu { position: relative; }
.menu-pill {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-soft);
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: calc(var(--fs-top) * 1.1);
  line-height: 1;
  touch-action: manipulation;
}
.menu-pill span { transform: translateY(-1px); }
.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 25;
  min-width: 188px;
  border-radius: 20px;
  padding: 9px 14px;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  background: var(--glass-soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  color: var(--muted);
}
.menu-panel[hidden] { display: none; }
.menu-section { display: flex; align-items: center; gap: 10px; }
.theme-label { color: var(--muted); font-size: 0.92em; }
.theme-wrap { position: relative; display: flex; align-items: center; min-width: 0; width: 108px; margin-left: auto; justify-content: flex-end; }
.theme-wrap::after { content: '▾'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: .92em; opacity: .8; pointer-events: none; color: var(--muted); }
.theme-select { border: none; outline: none; background: transparent; color: var(--muted); font: inherit; width: 100%; text-align: right; text-align-last: right; cursor: pointer; appearance: none; padding-right: 16px; font-size: 0.92em; }
.theme-select option { color: #111; }
@media (hover: hover) {
  .menu-pill:hover { filter: brightness(1.03); }
}
.menu-pill:focus-visible,
.theme-select:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--text) 70%, transparent);
  outline-offset: 2px;
}
.chat-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.messages { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; padding: 6px 12px calc(var(--composer-height) + max(var(--safe-bottom), var(--viewport-bottom-gap)) + 28px); scroll-behavior: smooth; }
.messages::-webkit-scrollbar { width: 0; height: 0; }
.message-row { display: flex; margin: 9px 0; width: 100%; }
.message-row.assistant { justify-content: flex-start; }
.message-row.user { justify-content: flex-end; }
.message-row.user + .message-row.assistant { margin-top: 11px; }
.message-row.assistant + .message-row.user { margin-top: 8px; }
.bubble-block { max-width: min(84%, 700px); display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.message-row.user .bubble-block { align-items: flex-end; max-width: min(76%, 620px); }
.bubble { border-radius: 24px; padding: 13px 15px; line-height: 1.38; font-size: var(--fs-bubble); box-shadow: var(--shadow-soft); white-space: pre-wrap; word-wrap: break-word; }
.message-row.assistant .bubble { background: var(--bubble-assistant); backdrop-filter: blur(18px) saturate(180%); border: 1px solid var(--line); border-bottom-left-radius: 10px; }
.message-row.user .bubble { background: linear-gradient(180deg, #2c88ff, #1e78ff); color: white; border: 1px solid rgba(255,255,255,.16); border-bottom-right-radius: 10px; }
.bubble-loading { min-width: 56px; display: inline-flex; align-items: center; gap: 2px; }
.loading-dot { opacity: .24; animation: loadingDots 1s ease-in-out infinite; animation-delay: calc(var(--dot-index) * .16s); }
@keyframes loadingDots {
  0%, 80%, 100% { opacity: .24; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-1px); }
}
.image-lane { display: grid; gap: 8px; width: 100%; }
.image-thumb { max-width: 100%; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-soft); display: block; cursor: zoom-in; padding: 0; background: transparent; overflow: hidden; }
.image-thumb img { width: 100%; display: block; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.choice { border: none; outline: none; appearance: none; border-radius: 16px; min-height: 44px; padding: 11px 12px; text-align: left; font-size: var(--fs-choice); font-weight: 600; color: var(--choice-text); background: var(--choice-bg); border: 1px solid var(--choice-border); backdrop-filter: blur(18px) saturate(170%); box-shadow: var(--shadow-soft); cursor: pointer; }
.choice:hover { filter: brightness(1.03); }
body[data-theme='retrowave'] .title-pill,
body[data-theme='retrowave'] .menu-pill,
body[data-theme='retrowave'] .menu-panel,
body[data-theme='retrowave'] .message-row.assistant .bubble,
body[data-theme='retrowave'] .composer,
body[data-theme='retrowave'] .debug-section,
body[data-theme='retrowave'] dialog {
  border-color: rgba(255,76,193,.56);
  box-shadow: 0 0 0 1px rgba(0,234,255,.12), 0 0 10px rgba(255,30,173,.14);
}
body[data-theme='retrowave'] .debug-pill,
body[data-theme='retrowave'] .debug-footer-btn,
body[data-theme='retrowave'] .debug-modal-close {
  background: rgba(45,0,77,.90);
  border: 1px solid rgba(255,76,193,.60);
  box-shadow: 0 0 0 1px rgba(0,234,255,.10), 0 0 8px rgba(255,30,173,.14);
}
body[data-theme='retrowave'] .choice,
body[data-theme='retrowave'] .send {
  background: rgba(45,0,77,.92);
  border-color: rgba(255,76,193,.62);
  box-shadow: 0 0 0 1px rgba(0,234,255,.14), 0 0 10px rgba(255,39,170,.16);
}
body[data-theme='retrowave'] .choice:hover,
body[data-theme='retrowave'] .choice:focus-visible,
body[data-theme='retrowave'] .send:hover,
body[data-theme='retrowave'] .debug-footer-btn:hover,
body[data-theme='retrowave'] .debug-modal-close:hover,
body[data-theme='retrowave'] .debug-pill:hover {
  filter: brightness(1.04);
  border-color: rgba(255,132,214,.74);
  box-shadow: 0 0 0 1px rgba(34,240,255,.20), 0 0 12px rgba(255,72,183,.18);
}
body[data-theme='retrowave'] .choice:active,
body[data-theme='retrowave'] .send:active,
body[data-theme='retrowave'] .debug-footer-btn:active,
body[data-theme='retrowave'] .debug-modal-close:active,
body[data-theme='retrowave'] .debug-pill:active {
  filter: brightness(.96);
  box-shadow: 0 0 0 1px rgba(34,240,255,.16), 0 0 8px rgba(255,72,183,.14);
}
body[data-theme='retrowave'] #chatInput {
  background: rgba(20,0,39,.88);
  border: 1px solid rgba(255,73,189,.56);
}
body[data-theme='retrowave'] #chatInput:focus {
  box-shadow: 0 0 0 2px rgba(34,240,255,.30), 0 0 10px rgba(34,240,255,.16);
}
body[data-theme='retrowave'] .send {
  color: #fff;
  border: 1px solid rgba(255,76,193,.62);
}
.debug-pill { border: 1px solid var(--choice-border); background: color-mix(in oklab, var(--choice-bg) 58%, white 42%); color: var(--muted); cursor: pointer; padding: 5px 12px; font-size: calc(var(--fs-meta) * 0.95); font-weight: 400; border-radius: 999px; align-self: flex-start; text-transform: lowercase; }
.debug-pill:hover { filter: brightness(1.03); }
.composer-shell { position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 10px calc(max(var(--safe-bottom), var(--viewport-bottom-gap)) + 8px); pointer-events: none; z-index: 30; }
.composer-inner { max-width: 980px; margin: 0 auto; }
.composer { pointer-events: auto; display: flex; align-items: flex-end; gap: 10px; margin: 0 auto; width: min(100%, 760px); border-radius: 24px; padding: 10px; border: 1px solid var(--line); background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(20px) saturate(170%); }
.input-wrap { flex: 1 1 auto; display: flex; min-width: 0; }
#chatInput { width: 100%; border: none; outline: none; border-radius: 14px; background: rgba(255,255,255,.20); color: var(--text); font-size: var(--fs-input); line-height: 1.35; padding: 12px 14px; }
#chatInput::placeholder { color: var(--muted); }
.send { border: none; outline: none; width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(180deg,#2c88ff,#1e78ff); color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(30,120,255,.4); cursor: pointer; }
.small-note { text-align: center; font-size: var(--fs-note); color: color-mix(in oklab, var(--muted) 90%, transparent); margin: 2px 10px 0; user-select: none; pointer-events: auto; align-self: center; width: min(100%, 760px); }
.small-note strong { color: var(--text); font-weight: 600; }
dialog { border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg1), var(--bg2)); color: var(--text); border-radius: 14px; max-width: min(94vw, 820px); }
#viewerImg { max-width: min(88vw, 900px); max-height: 80vh; display: block; margin-bottom: 8px; }
.debug-footer { display: grid; gap: 8px; text-align: center; margin-bottom: 6px; }
.debug-footer-meta { font-size: var(--fs-note); color: var(--muted); }
.debug-footer-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.debug-footer-btn { border: 1px solid var(--choice-border); background: var(--choice-bg); color: var(--choice-text); border-radius: 999px; padding: 6px 12px; font-size: var(--fs-meta); font-weight: 500; cursor: pointer; }
.debug-modal { width: min(94vw, 920px); }
.debug-modal::backdrop { background: rgba(0, 0, 0, 0.42); }
.debug-modal-frame { display: grid; gap: 10px; min-width: min(88vw, 760px); max-height: min(86vh, 900px); }
.debug-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.debug-modal-title { margin: 0; font-size: calc(var(--fs-bubble) * 0.95); }
.debug-modal-close { border: 1px solid var(--choice-border); background: var(--choice-bg); color: var(--choice-text); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.debug-modal-body { overflow: auto; display: grid; gap: 10px; padding-right: 4px; }
.debug-section { border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--glass-soft); }
.debug-section-title { margin: 0 0 4px; font-size: var(--fs-choice); }
.debug-section-subtitle { margin: 0 0 8px; font-size: var(--fs-meta); color: var(--muted); }
.debug-json { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: var(--fs-meta); }
@media (max-width: 640px) {
  .topbar { padding-inline: 8px; gap: 6px; }
  .title-pill { padding: 7px 10px; gap: 6px; min-height: 42px; }
  .menu-panel { min-width: 176px; padding: 8px 12px; }
  .theme-wrap { width: 92px; }
  .bubble-block { max-width: 88%; }
  .choices { grid-template-columns: 1fr; }
  .composer-shell { padding-inline: 8px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.turn-retry-wrap { margin-top: 8px; }
.turn-retry { border: 1px solid var(--choice-border); background: var(--choice-bg); color: var(--choice-text); border-radius: 999px; padding: 8px 14px; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; }
.turn-retry:hover { filter: brightness(1.03); }