/* Page-local aliases onto the shared Liquid Gold tokens (--void/--gold/--amber/--ember
       from design-system/tokens.css) so the existing chat chrome rules below keep working
       without a full rewrite of every selector. */
    :root {
      --bg: var(--void);
      --panel: rgba(5, 5, 5, .82);
      --panel-2: var(--glass);
      --accent: var(--gold);
      --accent-2: var(--amber);
      --text: var(--ink);
      --bot: linear-gradient(155deg, var(--glass-strong), var(--glass)), linear-gradient(150deg, rgba(20, 18, 16, .94), rgba(9, 8, 7, .92));
      --user: linear-gradient(150deg, rgba(255, 138, 61, .30), rgba(232, 168, 74, .16)), rgba(9, 8, 7, .58);
      --danger: #ff9a88;
      --card: linear-gradient(160deg, var(--glass-strong), var(--glass)), linear-gradient(160deg, rgba(18, 16, 14, .94), rgba(8, 7, 6, .92));
      --card-border: var(--glass-edge);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      font-family: "Manrope", sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex; align-items: stretch; justify-content: center;
    }
    .app {
      width: 100%;
      height: 100vh;
      display: flex; flex-direction: column;
      position: relative;
      z-index: 1;
    }
    .workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 2fr);
                 overflow: hidden; }
    .workspace.debug-open { grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); }
    .chat-pane { position: relative; min-width: 0; min-height: 0; overflow: hidden;
                 display: flex; flex: 1; flex-direction: column; }
    header {
      padding: 16px 20px; display: flex; align-items: center; gap: 12px;
      border-bottom: 1px solid var(--card-border); background: var(--panel); backdrop-filter: blur(14px);
    }
    header .logo {
      width: 36px; height: 36px; object-fit: contain;
      display: block;
      flex: 0 0 auto;
    }
    header .meta { flex: 1; min-width: 0; }
    header h1 { font-size: 16px; margin: 0; font-weight: 600; letter-spacing: 0.2px; }
    header .sub { font-size: 12px; color: var(--muted); }
    #languageToggle {
      flex: 0 0 auto;
      min-height: 34px;
    }
    #languageToggle button { font-size: 12px; padding: 6px 12px; }
    #debugToggle, #restartButton, #shareButton, #authButton {
      background: var(--panel-2); color: var(--text); border: 1px solid var(--card-border);
      border-radius: 999px; padding: 6px 10px; font-size: 12px; cursor: pointer;
    }
    #debugToggle:hover, #restartButton:hover, #shareButton:hover, #authButton:hover { border-color: var(--accent); }
    #restartButton:disabled { opacity: .5; cursor: not-allowed; }
    .messages {
      flex: 1 1 0; min-height: 0; overflow-y: scroll; overscroll-behavior: contain;
      padding: 20px; display: flex; flex-direction: column; gap: 10px;
    }
    .msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; line-height: 1.45;
           font-size: 14.5px; overflow-wrap: anywhere; word-break: break-word; }
    .msg pre, .pick, .pick * { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
    .msg.bot  { background: var(--bot); align-self: flex-start; border-top-left-radius: 4px; }
    .msg.user { background: var(--user); align-self: flex-end;  border-top-right-radius: 4px; }
    .msg.error { background: #3a1f1f; color: var(--danger); align-self: stretch; }
    .msg a { color: var(--accent); }
    .options { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px 0; align-self: flex-start; }
    .options button {
      background: var(--panel-2); color: var(--text);
      border: 1px solid var(--card-border); padding: 6px 12px; border-radius: 999px;
      font-size: 13px; cursor: pointer;
    }
    .options button:hover { border-color: var(--accent); }
    .options .option-chip {
      background: var(--panel-2); color: var(--muted);
      border: 1px solid var(--card-border); padding: 6px 12px; border-radius: 999px; font-size: 13px;
    }
    .readonly-banner {
      margin: 12px 16px 0; padding: 10px 14px; border-radius: 14px;
      border: 1px solid var(--card-border); background: var(--panel-2); color: var(--text);
      font-size: 13px; line-height: 1.45;
    }
    .readonly-banner a { color: var(--accent); }
    .picks { display: grid; gap: 10px; margin: 8px 0; align-self: stretch;
             grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .pick {
      background: var(--card); border: 1px solid var(--card-border);
      border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px;
    }
    .pick h3 { margin: 0; font-size: 14px; font-weight: 600; }
    .pick .brand { font-size: 12px; color: var(--muted); }
    .pick .reason { font-size: 13.5px; line-height: 1.4; flex: 1; }
    .pick .rating { font-size: 12px; color: var(--accent); font-weight: 600; }
    .pick .components { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
    .pick .components li { font-size: 13px; color: var(--text); }
    .pick .components .pct { color: var(--accent); font-weight: 600; }
    .pick .components a { color: var(--muted); font-size: 12px; margin-left: 4px; }
    .section-label { margin: 6px 0 2px; color: var(--accent); font-size: 12px; font-weight: 800;
                     letter-spacing: .12em; text-transform: uppercase; }
    .mix-bowl { width: 100%; height: 210px; margin: 0 auto 6px; overflow: visible; }
    .bowl-caption { display: flex; justify-content: space-between; gap: 8px; color: var(--muted);
                    font-size: 11px; margin-top: -12px; }
    .component-visuals { display: grid; gap: 10px; }
    .component-visual {
      position: relative; isolation: isolate; overflow: hidden;
      display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center;
      min-height: 108px; padding: 10px; border-radius: 16px;
      background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
      border: 1px solid rgba(255,235,211,.09);
      box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 24px rgba(0,0,0,.14);
    }
    .component-visual::before { content:""; position:absolute; z-index:-1; width:130px; height:130px;
      left:-35px; top:-45px; border-radius:50%; background:rgba(255,138,61,.16); filter:blur(22px); }
    .component-visual img { width: 112px; height: 88px; object-fit: contain; border-radius: 12px;
      padding: 4px; background: radial-gradient(circle at 50% 42%, rgba(255,197,125,.18), rgba(8,9,13,.28) 72%);
      filter: drop-shadow(0 9px 12px rgba(0,0,0,.32)); transition: transform .3s ease; }
    .component-visual:hover img { transform: translateY(-2px) scale(1.035); }
    .component-visual .meta { display: grid; gap: 4px; font-size: 12px; line-height: 1.35; }
    .component-name { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
      font-size: 14px; font-weight: 760; color: var(--text); }
    .component-name .pct { color: #1b1208; background: linear-gradient(135deg, var(--gold), var(--amber));
      padding: 3px 8px; border-radius: 999px; font-size: 12px; box-shadow:0 5px 14px rgba(255,138,61,.2); }
    .component-fact { color: var(--muted); }
    .component-fact strong { color: var(--text); font-weight: 600; }
    .pick-actions { margin-top: 6px; }
    .pick-choose {
      background: var(--panel-2); color: var(--text);
      border: 1px solid var(--card-border); padding: 6px 12px; border-radius: 999px;
      font-size: 13px; cursor: pointer; align-self: flex-start;
    }
    .pick-choose:hover { border-color: var(--accent); }
    .composer {
      position: relative; z-index: 4; flex: 0 0 auto;
      display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #222a35;
      background: var(--panel);
    }
    .composer input {
      flex: 1; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--card-border);
      background: var(--panel-2); color: var(--text); font-size: 14px; outline: none;
    }
    .composer input:focus { border-color: var(--accent); }
    .composer button {
      background: linear-gradient(115deg, var(--gold), var(--amber) 55%, var(--ember));
      color: #1b1208; border: 0;
      border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer;
      box-shadow: 0 0 0 1px rgba(255, 214, 150, .35), 0 10px 26px rgba(255, 90, 42, .28);
    }
    .composer button:disabled { opacity: 0.5; cursor: not-allowed; }
    .typing { color: var(--muted); font-style: italic; align-self: flex-start; }
    footer { flex: 0 0 auto; font-size: 11px; color: var(--muted); padding: 6px 16px 10px; text-align: center; }
    .scroll-bottom {
      position: absolute; z-index: 5; right: 22px; bottom: 84px;
      width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--card-border);
      background: linear-gradient(155deg, var(--glass-strong), var(--glass)), rgba(6, 5, 5, .9); color: var(--text); cursor: pointer;
      box-shadow: 0 12px 30px rgba(0,0,0,.32); opacity: 0; pointer-events: none;
      transform: translateY(10px) scale(.9);
      transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
    }
    .scroll-bottom.visible { opacity: 1; pointer-events: auto; transform: none; }
    .scroll-bottom:hover { border-color: var(--accent); transform: translateY(-2px); }
    .debug-panel {
      min-width: 0; border-right: 1px solid var(--card-border);
      background: linear-gradient(155deg, var(--glass-strong), var(--glass)), rgba(6, 6, 6, .94);
      backdrop-filter: blur(var(--blur)) saturate(1.3);
      -webkit-backdrop-filter: blur(var(--blur)) saturate(1.3);
      min-height: 0; overflow: hidden; display: none; flex-direction: column;
    }
    .debug-panel.enabled { display: flex; }
    .debug-panel h2 { margin: 0; padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--card-border); }
    .debug-log { flex: 1; min-height: 0; margin: 0; padding: 12px; overflow-x: hidden;
                 overflow-y: scroll; color: #c9d6c4;
                 font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
                 white-space: pre-wrap; overflow-wrap: anywhere; }
    header .logo, header h1, .pick h3, .section-label, button { font-family:"Unbounded",sans-serif; }
    header { padding:18px clamp(16px,4vw,42px); }
    header .logo { width:44px;height:44px;border-radius:15px;font-size:.78rem;box-shadow:0 12px 30px rgba(255,90,42,.2); }
    header h1 { font-size:15px;letter-spacing:-.03em; }
    .messages { width:min(920px,100%);margin:0 auto;padding:28px clamp(16px,4vw,38px);gap:14px; }
    .msg { padding:13px 16px;border:1px solid rgba(255,255,255,.055);box-shadow:0 10px 28px rgba(0,0,0,.12); }
    .composer { width:min(920px,calc(100% - 24px));margin:0 auto 8px;border:1px solid var(--card-border);border-radius:22px;background:linear-gradient(155deg, var(--glass-strong), var(--glass)), rgba(6,5,5,.86);box-shadow:0 22px 55px rgba(0,0,0,.32);backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4); }
    .composer textarea { font-family:"Manrope",sans-serif; }
    .composer button { min-width:112px;border-radius:16px; }
    .pick { border-radius:20px;padding:18px; }
    @media (max-width: 900px) {
      .workspace, .workspace.debug-open { display: flex; flex-direction: column; }
      .debug-panel { max-height: 32vh; border-right: 0; border-bottom: 1px solid var(--card-border); }
    }

    /* Polished glass interface and motion layer, recolored onto Liquid Gold tokens. */
    :root {
      --panel-strong: rgba(5, 5, 5, .92);
      --accent-soft: rgba(255, 138, 61, .18);
      --focus: rgba(232, 168, 74, .38);
    }
    body {
      min-height: 100dvh;
      padding: 0;
      overflow: hidden;
      background: linear-gradient(145deg, var(--void) 0%, #0c0906 58%, #090807 100%);
    }
    .app {
      height: 100dvh;
      max-height: none;
      position: relative;
      z-index: 1;
      background: rgba(5, 5, 5, .58);
      border: 0;
      border-radius: 0;
      box-shadow: 0 30px 100px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .04);
      overflow: hidden;
      backdrop-filter: blur(28px) saturate(125%);
    }
    header {
      min-height: 78px;
      padding: 14px clamp(16px, 2vw, 28px);
      background: linear-gradient(180deg, var(--glass-strong), var(--glass)), linear-gradient(180deg, rgba(9, 8, 7, .92), rgba(6, 5, 5, .78));
      border-bottom: 1px solid var(--glass-edge);
      box-shadow: 0 12px 40px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 243, 221, .1);
      backdrop-filter: blur(var(--blur)) saturate(1.4);
      -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
      z-index: 3;
      flex-wrap: wrap;
    }
    header .meta { flex: 1 1 160px; min-width: 0; }
    header h1 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    header .header-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin-left: auto;
      max-width: 100%;
    }
    #authButton {
      max-width: min(220px, 42vw);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    header .logo {
      position: relative;
      width: 44px; height: 44px;
      filter: drop-shadow(0 8px 14px rgba(255, 90, 42, .25));
      animation: logoFloat 5s ease-in-out infinite;
    }
    header h1 { font-size: 16px; font-weight: 700; }
    header .sub { margin-top: 2px; line-height: 1.35; }
    .status {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 5px; color: #9fbaa9; font-size: 11px;
    }
    .status-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--mint); box-shadow: 0 0 0 4px rgba(120, 219, 189, .1);
      animation: statusPulse 2.4s ease-out infinite;
    }
    #languageToggle, #debugToggle, #restartButton, #shareButton {
      min-height: 34px;
      transition: border-color .2s ease, background .2s ease, transform .2s ease;
    }
    #languageToggle:hover, #debugToggle:hover, #restartButton:hover, #shareButton:hover {
      background: rgba(255, 255, 255, .1);
    }
    #debugToggle:active, #restartButton:active { transform: scale(.96); }
    .messages {
      gap: 12px;
      padding: clamp(16px, 2.6vw, 34px);
      scroll-behavior: smooth;
      scrollbar-width: thin;
      scrollbar-color: rgba(232, 168, 74, .28) transparent;
      contain: layout paint;
    }
    .messages::-webkit-scrollbar { width: 8px; }
    .messages::-webkit-scrollbar-thumb {
      background: rgba(232, 168, 74, .22); border-radius: 999px;
      border: 2px solid transparent; background-clip: padding-box;
    }
    .msg {
      position: relative;
      max-width: min(76%, 820px);
      padding: 12px 16px;
      border: 1px solid rgba(255, 255, 255, .055);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
      line-height: 1.55;
      animation: messageIn .38s cubic-bezier(.2, .75, .25, 1) both;
      transform-origin: bottom left;
    }
    .msg.user {
      transform-origin: bottom right;
      box-shadow: 0 10px 28px rgba(13, 24, 39, .28);
      animation-name: messageInUser;
    }
    .msg.bot::before {
      content: "";
      position: absolute; left: -5px; top: 12px;
      width: 3px; height: 18px; border-radius: 4px;
      background: linear-gradient(var(--accent), var(--accent-2));
      opacity: .8;
    }
    .msg.error {
      border-color: rgba(255, 126, 105, .22);
      background: linear-gradient(145deg, rgba(77, 35, 35, .9), rgba(50, 25, 29, .9));
    }
    .msg.bot i {
      display: block; margin-bottom: 8px; padding-left: 9px;
      border-left: 2px solid var(--accent);
      color: var(--muted); font-size: 12px; line-height: 1.45;
    }
    .msg pre {
      margin: 8px 0 0; padding: 11px 12px;
      border: 1px solid rgba(255,255,255,.07); border-radius: 10px;
      background: rgba(0,0,0,.22); font-size: 12.5px; line-height: 1.5;
    }
    .options {
      gap: 8px; margin-top: 2px;
      animation: fadeUp .35s ease both;
    }
    .options button, .pick-choose {
      min-height: 36px;
      padding: 8px 14px;
      background: rgba(255, 255, 255, .055);
      transition: transform .18s ease, border-color .18s ease, background .18s ease,
                  box-shadow .18s ease;
    }
    .options button:hover, .pick-choose:hover {
      transform: translateY(-2px);
      background: var(--accent-soft);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    }
    .options button:active, .pick-choose:active { transform: translateY(0) scale(.97); }
    .picks { gap: 14px; animation: fadeUp .45s ease both; }
    .picks .pick:nth-child(2) { animation-delay: .06s; }
    .picks .pick:nth-child(3) { animation-delay: .12s; }
    .pick {
      position: relative;
      border-radius: 18px;
      padding: 15px;
      box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
      transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
      overflow: hidden;
      animation: fadeUp .4s ease both;
    }
    .pick::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.045), transparent 70%);
      transform: translateX(-110%);
      transition: transform .65s ease;
      pointer-events: none;
    }
    .pick:hover {
      transform: translateY(-5px);
      border-color: rgba(232, 168, 74, .32);
      box-shadow: 0 24px 50px rgba(0, 0, 0, .3);
    }
    .pick:hover::after { transform: translateX(110%); }
    .pick .image { border-radius: 13px; transition: transform .5s ease; }
    .pick:hover .image { transform: scale(1.025); }
    .pick h3 { font-size: 15px; }
    .composer {
      align-items: flex-end;
      gap: 10px;
      padding: 12px clamp(14px, 2vw, 24px);
      background: linear-gradient(0deg, var(--glass-strong), var(--glass)), linear-gradient(0deg, rgba(6, 5, 5, .96), rgba(8, 7, 7, .82));
      border-top: 1px solid var(--glass-edge);
      box-shadow: 0 -14px 42px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 243, 221, .08);
      backdrop-filter: blur(var(--blur)) saturate(1.4);
      -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
      transition: box-shadow .3s ease, border-color .3s ease;
    }
    .composer[aria-busy="true"] {
      box-shadow: 0 -10px 40px rgba(255, 90, 42, .13);
      animation: composerBreathe 1.8s ease-in-out infinite;
    }
    .composer textarea {
      flex: 1;
      min-height: 44px; max-height: 132px;
      resize: none; overflow-y: auto;
      padding: 11px 16px;
      border-radius: 20px;
      border: 1px solid var(--card-border);
      background: rgba(255, 255, 255, .055);
      color: var(--text);
      font: inherit; font-size: 14px; line-height: 1.5;
      outline: none;
      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .composer textarea::placeholder { color: #7f7c7b; }
    .composer textarea:focus {
      border-color: rgba(232, 168, 74, .68);
      background: rgba(255, 255, 255, .075);
      box-shadow: 0 0 0 4px var(--focus), 0 10px 28px rgba(0, 0, 0, .18);
    }
    .composer button {
      min-width: 116px; min-height: 44px;
      padding: 0 18px;
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .composer button::after { content: " \2197"; font-size: 14px; }
    .composer button:hover:not(:disabled) {
      filter: brightness(1.06);
    }
    .composer button:active:not(:disabled) { transform: scale(.97); }
    .typing {
      min-width: 82px; min-height: 42px;
      display: inline-flex; align-items: flex-end; justify-content: center; gap: 5px;
      font-style: normal; color: var(--muted);
      overflow: visible;
    }
    .typing-dots {
      height: 31px;
      display: inline-flex; align-items: flex-end; gap: 1px;
      filter: drop-shadow(0 0 10px rgba(232, 168, 74, .2));
    }
    .typing-dot {
      width: 18px; height: 18px; border-radius: 50%;
      background: radial-gradient(circle at 38% 40%, rgba(255,255,255,.54), rgba(205,190,184,.22) 48%, rgba(232,168,74,.05) 72%);
      animation: smokeRise 2.4s ease-in-out infinite;
      transform-origin: 50% 100%;
    }
    .typing-dot:nth-child(2) { width: 14px; height: 14px; animation-delay: -.8s; }
    .typing-dot:nth-child(3) { width: 20px; height: 20px; animation-delay: -1.6s; }
    footer {
      padding: 8px 18px 11px;
      background: rgba(5, 5, 5, .82);
      border-top: 1px solid rgba(255,255,255,.035);
    }
    .debug-panel.enabled { animation: debugReveal .3s ease both; }
    .debug-panel h2 { color: var(--accent); letter-spacing: .04em; }
    .debug-log { scrollbar-width: thin; scrollbar-color: rgba(232,168,74,.42) transparent; }
    .debug-log::-webkit-scrollbar { width: 9px; }
    .debug-log::-webkit-scrollbar-track { background: rgba(255,255,255,.025); }
    .debug-log::-webkit-scrollbar-thumb {
      background: rgba(232,168,74,.38); border-radius: 999px;
      border: 2px solid transparent; background-clip: padding-box;
    }
    button:focus-visible, textarea:focus-visible, a:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .auth-dialog{width:min(520px,calc(100% - 28px));padding:0;border:1px solid var(--glass-edge);border-radius:22px;color:var(--text);background:linear-gradient(155deg,var(--glass-strong),var(--glass)),#090807;box-shadow:0 30px 100px rgba(0,0,0,.7)}.auth-dialog::backdrop{background:rgba(4,4,7,.8);backdrop-filter:blur(10px)}.auth-body{padding:24px}.auth-body h2{margin:0 0 8px;font-family:"Unbounded",sans-serif}.auth-body p{color:var(--muted);line-height:1.5}.auth-actions,.auth-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.auth-body button{background:var(--panel-2);color:var(--text);border:1px solid var(--card-border);border-radius:999px;padding:9px 13px;cursor:pointer}.auth-body input{min-width:150px;flex:1;background:rgba(255,255,255,.055);color:var(--text);border:1px solid var(--card-border);border-radius:12px;padding:10px 12px}.auth-status{min-height:22px;color:var(--muted);font-size:12px;margin-top:10px}.hidden{display:none!important}
    @keyframes logoFloat {
      0%, 100% { transform: translateY(0) rotate(0); }
      50% { transform: translateY(-2px) rotate(2deg); }
    }
    @keyframes statusPulse {
      0% { box-shadow: 0 0 0 0 rgba(120,219,189,.32); }
      70%, 100% { box-shadow: 0 0 0 7px rgba(120,219,189,0); }
    }
    @keyframes messageIn {
      from { opacity: 0; transform: translate3d(-10px, 10px, 0) scale(.97); }
      to { opacity: 1; transform: none; }
    }
    @keyframes messageInUser {
      from { opacity: 0; transform: translate3d(10px, 10px, 0) scale(.97); }
      to { opacity: 1; transform: none; }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: none; }
    }
    @keyframes smokeRise {
      0% { transform: translate3d(2px, 8px, 0) scale(.45); opacity: 0; }
      28% { opacity: .72; }
      65% { transform: translate3d(-3px, -5px, 0) scale(1); opacity: .42; }
      100% { transform: translate3d(4px, -16px, 0) scale(1.35); opacity: 0; }
    }
    @keyframes debugReveal {
      from { opacity: 0; transform: translateX(-8px); }
      to { opacity: 1; transform: none; }
    }
    @keyframes composerBreathe {
      0%, 100% { border-top-color: rgba(255,255,255,.06); }
      50% { border-top-color: rgba(232,168,74,.42); }
    }
    @media (max-width: 900px) {
      body { padding: 0; }
      .app { height: 100dvh; max-height: none; border: 0; border-radius: 0; }
      .debug-panel.enabled { min-height: 180px; }
    }
    @media (max-width: 620px) {
      header { min-height: 0; gap: 9px; align-items: center; }
      header .logo { width: 38px; height: 38px; }
      header h1 { font-size: 13px; line-height: 1.25; white-space: normal; }
      header .sub { display: none; }
      header .header-actions { flex: 1 1 100%; justify-content: flex-end; }
      #authButton { max-width: min(160px, 48vw); font-size: 11px; }
      #restartButton { width: 38px; padding: 0; font-size: 0; }
      #restartButton::after { content: "\21BA"; font-size: 18px; }
      #shareButton { width: 38px; padding: 0; font-size: 0; }
      #shareButton::after { content: "\2398"; font-size: 18px; }
      #debugToggle { width: 38px; padding: 0; font-size: 0; }
      #debugToggle::after { content: "\2699"; font-size: 17px; }
      #languageToggle button { padding: 6px 9px; font-size: 11px; }
      .status { margin-top: 2px; }
      .messages { padding: 14px 12px; }
      .msg { max-width: 88%; padding: 11px 13px; font-size: 14px; }
      .composer { padding: 10px; }
      .scroll-bottom { right: 12px; bottom: 72px; }
      .composer button { min-width: 48px; width: 48px; padding: 0; font-size: 0; }
      .composer button::after { content: "\2197"; font-size: 18px; }
      footer { font-size: 10px; }
      .picks { grid-template-columns: 1fr; }
      .component-visual { grid-template-columns: 96px minmax(0,1fr); gap: 10px; }
      .component-visual img { width: 96px; height: 82px; }
    }
    html.is-embed header {
      min-height: 68px;
      gap: 8px;
      padding: 10px 12px;
    }
    html.is-embed header .logo { width: 38px; height: 38px; }
    html.is-embed header h1 {
      overflow: hidden;
      font-size: 12px;
      line-height: 1.2;
      text-overflow: ellipsis;
    }
    html.is-embed header .sub { display: none; }
    html.is-embed #authButton,
    html.is-embed #shareButton,
    html.is-embed #restartButton { display: none; }
    html.is-embed #languageToggle button { padding: 6px 9px; font-size: 11px; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }