@layer legacy {
/* Optional chat presentation layer. Remove its link to restore the previous UI. */
:root { --chat-width: 800px; --ui-speed: 160ms; }
.chat-stage { width: min(var(--chat-width), calc(100% - 48px)); margin-inline: auto; padding-top: 40px; padding-bottom: 220px; }
.chat-stage:has(.empty) { padding-top: 16px; padding-bottom: 180px; }
.composer-shell .composer-area { width: min(var(--chat-width), 100%); }
.message { margin-bottom: 36px; gap: 16px; }
.message .bubble { min-width: 0; overflow-wrap: anywhere; }
.message.assistant .bubble { font-size: 16px; line-height: 1.75; }
.message.assistant .bubble > :first-child { margin-top: 0; }
.message.assistant .bubble > :last-child { margin-bottom: 0; }
.message.user .bubble { border-radius: 16px; padding: 12px 16px; line-height: 1.65; }
html[data-theme] .message.user .bubble { border-color: color-mix(in srgb, var(--user-line) 55%, transparent); }
.message .who { margin-top: 4px; }
.message.assistant .bubble .code-block .code-head { min-height: 44px; }
.message.assistant .bubble .code-block pre { padding: 18px; }
.code-block code { font-size: 13px; line-height: 1.7; }
.code-copy svg { width: 16px; height: 16px; }
.code-copy { gap: 6px; padding: 0 8px; }
.composer { padding: 12px; border-radius: 18px; }
.composer .input-row { display: grid; grid-template-columns: 40px 40px minmax(0, 1fr) 40px; gap: 4px; align-items: end; }
.composer .prompt { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; min-height: 44px; padding: 6px 4px 12px; font-size: 16px; line-height: 1.5; }
.composer .attach { grid-column: 1; grid-row: 2; }
.composer .web-search { grid-column: 2; grid-row: 2; }
.composer .send { grid-column: 4; grid-row: 2; }
.composer .circle-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.composer-foot { font-size: 11px; line-height: 1.5; padding-top: 8px; white-space: normal; text-align: center; }
html[data-theme] .composer { box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 5%, transparent); }
html[data-theme] .composer:focus-within { box-shadow: 0 0 0 2px var(--accent-soft), 0 8px 24px color-mix(in srgb, var(--text) 5%, transparent); border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); }
.empty { min-height: calc(100dvh - 300px); padding: 24px 0; }
.empty h1 { font-size: 30px; font-weight: 650; line-height: 1.25; }
.empty p { max-width: 400px; line-height: 1.6; }
.suggestions { gap: 10px; margin-top: 28px; }
.suggestion { padding: 16px; min-height: 80px; }
.suggestion b { font-weight: 600; }
.sidebar-tool-title, .chat-title { font-size: 13px; }
.sidebar-tool { min-height: 48px; }
.chat-row { min-height: 40px; }
.search { font-size: 13px; }
.topbar .model { min-height: 40px; }
html[data-theme] .topbar .model { background: transparent; border-color: transparent; }
html[data-theme] .topbar .model:hover, html[data-theme] .model-wrap.open .model { background: var(--soft); border-color: var(--line); }
:is(.circle-btn, .icon-btn, .model, .suggestion, .sidebar-tool, .chat-row, .code-copy) { transition: background-color var(--ui-speed) ease, border-color var(--ui-speed) ease, color var(--ui-speed) ease; }
.composer { transition: border-color var(--ui-speed) ease, box-shadow var(--ui-speed) ease; }
.model-wrap.open .model-menu, .overlay.open .modal { animation: panel-arrive 160ms ease-out; }
@keyframes panel-arrive { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
html:is([data-theme="light"], [data-theme="arctic"]) .hljs { color: #253238; }
html:is([data-theme="light"], [data-theme="arctic"]) :is(.hljs-keyword, .hljs-selector-tag, .hljs-literal) { color: #a32449; }
html:is([data-theme="light"], [data-theme="arctic"]) :is(.hljs-title, .hljs-built_in, .hljs-type) { color: #7044a0; }
html:is([data-theme="light"], [data-theme="arctic"]) :is(.hljs-string, .hljs-regexp, .hljs-attr) { color: #17664b; }
html:is([data-theme="light"], [data-theme="arctic"]) :is(.hljs-number, .hljs-symbol, .hljs-variable) { color: #175d93; }
html:is([data-theme="light"], [data-theme="arctic"]) :is(.hljs-comment, .hljs-quote) { color: #626a70; }
@media (max-width: 640px) {
  .chat-stage { width: calc(100% - 32px); padding-top: 24px; padding-bottom: 200px; }
  .composer-shell .composer-area { width: 100%; }
  .message { gap: 10px; margin-bottom: 28px; }
  .message .who { width: 26px; height: 26px; flex-basis: 26px; }
  .message.assistant .bubble { font-size: 15px; line-height: 1.7; }
  .message.user .bubble { max-width: calc(100% - 36px); padding: 10px 13px; }
  .composer { padding: 10px; border-radius: 16px; }
  .composer .input-row { grid-template-columns: 44px 44px minmax(0, 1fr) 44px; }
  .composer .circle-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .empty h1 { font-size: 26px; }
  .empty p { font-size: 13px; }
  .empty { min-height: calc(100dvh - 270px); padding: 16px 0; }
  .suggestions { gap: 8px; margin-top: 22px; }
  .suggestion { min-height: 76px; padding: 12px; }
  .composer-foot { font-size: 10px; }
}
.settings-legal-links{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;padding:8px 20px;margin:0;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted);background:var(--panel)}
#settingsOverlay .settings-legal-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);text-decoration:none;border-radius:4px}
#settingsOverlay .settings-legal-links a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
#settingsOverlay .account-delete-link{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;color:var(--muted);font-size:13px;line-height:1.5;text-decoration:underline;text-underline-offset:3px}
#settingsOverlay .account-delete-link:hover{color:var(--text)}
#settingsOverlay :is(.settings-legal-links a,.account-delete-link):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (prefers-reduced-motion: reduce) {
  :is(.circle-btn, .icon-btn, .model, .suggestion, .sidebar-tool, .chat-row, .code-copy, .composer) { transition: none; }
  .model-wrap.open .model-menu, .overlay.open .modal { animation: none; }
}

}