:root {
  --sidebar: #171717;
  --sidebar-hover: #262626;
  --canvas: #f7f7f5;
  --surface: #ffffff;
  --surface-muted: #eeeeeb;
  --text: #202123;
  --muted: #6f706d;
  --line: #deded9;
  --accent: #0f8f6f;
  --accent-hover: #0b755b;
  --danger: #c24b4b;
  --warning: #d58a22;
  --shadow: 0 16px 55px rgb(15 15 15 / 12%);
  --header-bg: rgb(247 247 245 / 88%);
  --user-bubble: #e7e7e2;
  --inline-code: #e9e9e4;
  --reasoning-border: #d7ddd9;
  --reasoning-bg: #f2f5f3;
  --reasoning-title: #426056;
  --reasoning-text: #61736c;
  --composer-border: #d5d5d0;
  --soft-hover: #efefeb;
  --progress-track: #d9ddd9;
  --model-pill-bg: #dfeee8;
  --model-pill-text: #176b55;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { width: 100%; height: 100%; background: var(--canvas); color: var(--text); overflow: hidden; overscroll-behavior: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; }

.login-shell {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 15% 15%, rgb(21 149 111 / 18%), transparent 34%),
    radial-gradient(circle at 85% 80%, rgb(76 86 200 / 12%), transparent 32%),
    #111210;
}
.login-card { width: min(100%, 390px); padding: 38px; border: 1px solid #353631; border-radius: 24px; background: #1b1c19; color: #f5f5ef; box-shadow: 0 30px 90px #0008; }
.login-card h1 { margin: 4px 0 8px; font-size: 30px; letter-spacing: -.035em; }
.login-card label { display: grid; gap: 7px; margin: 20px 0; color: #c9cac4; font-size: 13px; }
.login-card input { width: 100%; padding: 13px 14px; border: 1px solid #40413c; border-radius: 12px; outline: none; background: #121310; color: white; transition: border-color .2s, box-shadow .2s; }
.login-card input:focus { border-color: #36b992; box-shadow: 0 0 0 3px #1698702b; }
.form-error { min-height: 20px; margin: 0 0 12px; color: #ff8e8e; font-size: 13px; }
.brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #18a87f, #0a765b); color: white; font-size: 25px; box-shadow: 0 10px 26px #0f8f6f42; }
.brand-mark.small { width: 31px; height: 31px; border-radius: 10px; font-size: 17px; }

.primary-button { padding: 11px 18px; border: 0; border-radius: 12px; background: var(--accent); color: white; font-weight: 700; transition: transform .15s, background .15s; }
.primary-button:hover { background: var(--accent-hover); transform: translateY(-1px); }
.primary-button.full { width: 100%; }

.app-shell { display: grid; width: 100%; height: 100vh; height: var(--app-height, 100dvh); min-height: 0; grid-template-columns: 278px minmax(0, 1fr); overflow: hidden; }
.sidebar { display: flex; min-height: 0; flex-direction: column; background: var(--sidebar); color: #f4f4ef; overscroll-behavior: contain; }
.sidebar-scrim { display: none; }
.sidebar-top { padding: 14px 13px 8px; }
.brand-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.brand-row strong { font-size: 14px; letter-spacing: -.01em; }
.new-chat-button { display: flex; width: 100%; min-height: 44px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #3a3a38; border-radius: 11px; background: transparent; color: #fafafa; text-align: left; }
.new-chat-button:hover { background: var(--sidebar-hover); }
.new-chat-button span { font-size: 20px; line-height: 1; }
.conversation-search { display: flex; min-height: 38px; align-items: center; gap: 8px; margin-top: 9px; padding: 0 11px; border: 1px solid transparent; border-radius: 10px; background: #222320; color: #8d8e88; transition: border-color .15s, background .15s; }
.conversation-search:focus-within { border-color: #3d5e53; background: #262824; }
.conversation-search input { width: 100%; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: transparent; color: #f2f2ed; font-size: 12px; }
.conversation-search input::placeholder { color: #858680; }
.conversation-search input::-webkit-search-cancel-button { filter: invert(.7); }
.conversation-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.conversation-group-label { padding: 12px 10px 6px; color: #8d8e88; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.conversation-empty { margin: 20px 12px; color: #8d8e88; font-size: 12px; line-height: 1.45; text-align: center; }
.conversation-item { display: flex; width: 100%; min-height: 48px; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: #d9d9d5; text-align: left; }
.conversation-item:hover, .conversation-item.active { background: var(--sidebar-hover); color: white; }
.conversation-item .model-mini { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: #343431; color: #b8e6d7; font-size: 11px; font-weight: 800; }
.conversation-item.running .model-mini { background: var(--accent); color: white; animation: activeConversation 1.6s ease-in-out infinite; }
@keyframes activeConversation { 0%, 100% { box-shadow: 0 0 0 0 rgb(41 197 142 / 0%); } 50% { box-shadow: 0 0 0 4px rgb(41 197 142 / 15%); } }
.conversation-item .conversation-copy { min-width: 0; flex: 1; }
.conversation-item strong { display: block; overflow: hidden; font-size: 13px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item small { color: #8d8e88; font-size: 11px; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-top: 1px solid #2e2f2c; }
.account-copy { display: flex; align-items: center; gap: 8px; color: #b6b7b1; font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #29c58e; box-shadow: 0 0 0 3px #29c58e24; }
.status-dot.pending { background: var(--warning); box-shadow: 0 0 0 3px rgb(213 138 34 / 16%); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 0 3px rgb(194 75 75 / 16%); }
.sidebar-footer-actions { display: flex; align-items: center; gap: 2px; }

.chat-shell { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; background: var(--canvas); }
.chat-header { display: flex; min-height: 70px; flex: 0 0 auto; align-items: center; gap: 12px; padding: 8px 22px; border-bottom: 1px solid var(--line); background: var(--header-bg); backdrop-filter: blur(14px); }
.chat-title-block { min-width: 0; flex: 1; }
.title-button { max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.chat-meta { display: flex; min-width: 0; align-items: center; gap: 8px; margin-top: 3px; color: var(--muted); font-size: 11px; }
.model-pill { padding: 2px 7px; border-radius: 999px; background: var(--model-pill-bg); color: var(--model-pill-text); font-weight: 750; }
.context-usage { min-width: 0; margin-left: auto; overflow: hidden; font-variant-numeric: tabular-nums; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.context-progress { height: 3px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: var(--progress-track); }
.context-progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s ease, background .2s ease; }
.context-progress.warning .context-progress-fill { background: var(--warning); }
.context-progress.danger .context-progress-fill { background: var(--danger); }
.icon-button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 9px; background: transparent; color: inherit; font-size: 17px; }
.icon-button:hover { background: rgb(128 128 128 / 13%); }
.icon-button.danger:hover { color: var(--danger); background: #c24b4b14; }

.empty-state { display: grid; flex: 1; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.empty-state h2 { margin: 22px 0 6px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.045em; }
.empty-state p { max-width: 430px; margin: 0 0 24px; color: var(--muted); }
.empty-orbit { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid #cad8d2; border-radius: 50%; background: var(--surface); color: var(--accent); font-size: 34px; box-shadow: 0 14px 40px #17251f12; }

.conversation-view { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
.messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 34px 20px 24px; scroll-behavior: smooth; scrollbar-gutter: stable; }
.message { width: min(100%, 780px); margin: 0 auto 30px; }
.message.user { display: flex; flex-direction: column; align-items: flex-end; }
.message.user .message-content { max-width: 78%; padding: 12px 16px; border-radius: 19px 19px 4px 19px; background: var(--user-bubble); white-space: pre-wrap; }
.message-files { display: flex; max-width: 78%; flex-wrap: wrap; justify-content: flex-end; }
.message.assistant { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 13px; }
.assistant-avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: var(--accent); color: white; font-size: 16px; }
.message-body { min-width: 0; }
.message-content { font-size: 15px; line-height: 1.68; overflow-wrap: anywhere; }
.message-content p { margin: 0 0 13px; }
.message-content > :first-child { margin-top: 0; }
.message-content > :last-child { margin-bottom: 0; }
.message-content h1, .message-content h2, .message-content h3, .message-content h4 { margin: 1.35em 0 .55em; line-height: 1.25; letter-spacing: -.025em; }
.message-content h1 { font-size: 1.65em; }
.message-content h2 { font-size: 1.4em; }
.message-content h3 { font-size: 1.18em; }
.message-content ul, .message-content ol { margin: 0 0 14px; padding-left: 24px; }
.message-content li { margin: 4px 0; }
.message-content li > p { margin: 0; }
.message-content blockquote { margin: 14px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); color: var(--muted); }
.message-content blockquote > :last-child { margin-bottom: 0; }
.message-content hr { margin: 22px 0; border: 0; border-top: 1px solid var(--line); }
.message-content table { display: block; width: max-content; max-width: 100%; margin: 14px 0; overflow-x: auto; border-spacing: 0; border-collapse: collapse; }
.message-content th, .message-content td { padding: 8px 11px; border: 1px solid var(--line); text-align: left; }
.message-content th { background: var(--surface-muted); font-weight: 700; }
.message-content img { max-width: 100%; height: auto; border-radius: 12px; }
.message-content input[type="checkbox"] { margin: 0 7px 0 0; accent-color: var(--accent); }
.message-content pre { overflow-x: auto; padding: 14px; border: 1px solid #31322f; border-radius: 12px; background: #1f201d; color: #ecece7; font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.message-content code { padding: 2px 5px; border-radius: 5px; background: var(--inline-code); font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; }
.message-content pre code { padding: 0; background: none; }
.message-content a { color: var(--accent); }
.reasoning { margin: 0 0 15px; border: 1px solid var(--reasoning-border); border-radius: 12px; background: var(--reasoning-bg); }
.reasoning summary { display: flex; cursor: pointer; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; color: var(--reasoning-title); font-size: 13px; font-weight: 700; }
.reasoning-count { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 600; }
.reasoning-list { max-height: 300px; margin: 0; padding: 2px 12px 12px; overflow-y: auto; color: var(--reasoning-text); font-size: 13px; line-height: 1.52; list-style: none; counter-reset: reasoning-step; }
.reasoning-list li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; padding: 7px 0; counter-increment: reasoning-step; }
.reasoning-list li + li { border-top: 1px solid color-mix(in srgb, var(--reasoning-border) 70%, transparent); }
.reasoning-list li::before { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--reasoning-title); content: counter(reasoning-step); font-size: 9px; font-weight: 800; }
.reasoning-list li > div { min-width: 0; white-space: pre-wrap; }
.reasoning.streaming .reasoning-list li.current::before { background: var(--accent); color: transparent; animation: reasoningPulse 1.2s ease-in-out infinite; }
.reasoning.streaming .reasoning-list li.current::after { position: absolute; top: 13px; left: 7px; width: 5px; height: 5px; border-radius: 50%; background: white; content: ""; }
@keyframes reasoningPulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(15 143 111 / 0%); } 50% { box-shadow: 0 0 0 5px rgb(15 143 111 / 16%); } }
.thinking-row { display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--muted); font-size: 13px; }
.thinking-dots { display: inline-flex; gap: 3px; }
.thinking-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .15s; }
.thinking-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
.file-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 260px; margin: 7px 7px 0 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 12px; text-decoration: none; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-files-slot:empty { display: none; }
.message.assistant .message-files { max-width: 100%; justify-content: flex-start; }
.message-meta { display: flex; min-height: 28px; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: 10px; opacity: .58; transition: opacity .15s; }
.message:hover .message-meta, .message:focus-within .message-meta { opacity: 1; }
.message.user .message-meta { justify-content: flex-end; }
.message-action { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; padding: 4px 7px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 11px; }
.message-action:hover { background: var(--surface-muted); color: var(--text); }
.code-block { position: relative; margin: 14px 0; }
.code-block pre { margin: 0; padding-top: 38px; }
.code-block-toolbar { position: absolute; top: 7px; right: 8px; left: 12px; z-index: 1; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.code-language { overflow: hidden; color: #9b9d97; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.code-copy { min-height: 27px; padding: 4px 8px; border: 1px solid #444640; border-radius: 7px; background: #292a27; color: #d8d9d3; font-size: 10px; pointer-events: auto; }
.code-copy:hover { background: #353631; color: white; }

.composer-dock { position: relative; z-index: 5; flex: 0 0 auto; padding: 24px max(20px, calc((100% - 780px) / 2)) 18px; background: linear-gradient(transparent, var(--canvas) 24px); }
.composer { display: flex; min-height: 56px; align-items: flex-end; gap: 9px; padding: 9px; border: 1px solid var(--composer-border); border-radius: 20px; background: var(--surface); box-shadow: 0 10px 38px #1b1b1b15; }
.composer:focus-within { border-color: #a7bdb5; box-shadow: 0 10px 38px #1b1b1b15, 0 0 0 3px #0f8f6f12; }
.composer textarea { min-height: 36px; max-height: 180px; flex: 1; resize: none; padding: 8px 4px; border: 0; outline: 0; background: transparent; color: var(--text); line-height: 1.45; }
.attach-button, .send-button { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; }
.attach-button { background: transparent; color: #5f615d; font-size: 22px; }
.attach-button:hover { background: var(--soft-hover); }
.attach-button.disabled { cursor: default; opacity: .38; pointer-events: none; }
.send-button { background: #22231f; color: white; font-size: 18px; font-weight: 800; }
.send-button:hover { background: var(--accent); }
.send-button:disabled { background: #a8aaa4; color: #eeeeea; opacity: .7; }
.send-button.stop { background: #bb4949; }
.composer-note { margin: 7px 0 0; color: #858680; font-size: 10px; text-align: center; }
.upload-list { display: flex; width: min(100%, 780px); max-height: 104px; flex-wrap: wrap; margin: 0 auto 8px; overflow-y: auto; }
.upload-list .file-chip button { border: 0; background: none; color: var(--muted); }
.scroll-bottom-button { position: absolute; right: 50%; bottom: 102px; z-index: 8; translate: 50% 0; min-height: 36px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 14%); font-size: 12px; font-weight: 700; }
.scroll-bottom-button:hover { border-color: #8db9aa; }
.drop-overlay { position: absolute; inset: 14px; z-index: 15; display: grid; place-content: center; justify-items: center; gap: 10px; border: 2px dashed #4eb695; border-radius: 20px; background: rgb(20 37 31 / 88%); color: white; backdrop-filter: blur(8px); pointer-events: none; }
.drop-overlay span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--accent); font-size: 27px; }

.model-dialog { width: min(92vw, 640px); padding: 0; border: 0; border-radius: 22px; background: transparent; box-shadow: var(--shadow); }
.model-dialog::backdrop { background: rgb(10 11 9 / 55%); backdrop-filter: blur(4px); }
.dialog-card { position: relative; max-height: min(88dvh, 760px); padding: 30px; overflow-y: auto; border-radius: 22px; background: var(--surface); }
.dialog-card h2 { margin: 4px 0 8px; font-size: 28px; letter-spacing: -.035em; }
.dialog-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--soft-hover); color: var(--text); font-size: 20px; }
.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.model-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; transition: border .15s, transform .15s, box-shadow .15s; }
.model-card:hover { border-color: #8db9aa; transform: translateY(-2px); box-shadow: 0 12px 28px #1b4f3e13; }
.model-card strong, .model-card small { display: block; }
.model-card small { margin-top: 3px; color: var(--muted); }
.model-symbol { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: white; font-weight: 850; }
.model-symbol.sol { background: linear-gradient(145deg, #146c55, #1ab083); }
.model-symbol.terra { background: linear-gradient(145deg, #5d5a9e, #8480cf); }
.arrow { color: var(--muted); font-size: 20px; }
.request-fields { display: grid; gap: 18px; margin-top: 22px; }
.request-field { display: grid; gap: 9px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.request-field strong { font-size: 13px; }
.request-field p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.request-field label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.request-field input[type="text"], .request-field input[type="password"] { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); }
.option-description { display: block; color: var(--muted); font-size: 11px; }
.dialog-actions { display: flex; justify-content: flex-end; margin-top: 22px; }
.toast { position: fixed; right: 24px; bottom: 24px; max-width: 360px; padding: 12px 16px; border-radius: 11px; background: #22231f; color: white; box-shadow: var(--shadow); font-size: 13px; z-index: 50; }
.mobile-only { display: none; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(88vw, 340px); z-index: 20; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 18px 0 55px #0005; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 19; display: block; padding: 0; border: 0; background: rgb(0 0 0 / 48%); backdrop-filter: blur(2px); }
  .mobile-only { display: grid; }
  .chat-header { min-height: 72px; gap: 8px; padding: max(7px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 7px max(10px, env(safe-area-inset-left)); }
  .chat-header .icon-button { width: 42px; height: 42px; flex: 0 0 auto; }
  .title-button { font-size: 14px; }
  .chat-meta { gap: 6px; font-size: 10px; }
  .effort-label { display: none; }
  .context-usage { font-size: 10px; }
  .context-progress { margin-top: 4px; }
  .messages { padding: 20px max(12px, env(safe-area-inset-right)) 14px max(12px, env(safe-area-inset-left)); }
  .message { margin-bottom: 24px; }
  .message.assistant { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .message.user .message-content, .message-files { max-width: 94%; }
  .message-content { font-size: 15px; line-height: 1.6; }
  .message-content pre { margin-right: 0; margin-left: 0; padding: 12px; font-size: 12px; }
  .reasoning-list { max-height: 230px; }
  .message-meta { opacity: .9; }
  .message-action { min-height: 32px; }
  .composer-dock { padding: 12px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: var(--canvas); border-top: 1px solid var(--line); }
  .composer { min-height: 52px; padding: 7px; border-radius: 18px; }
  .composer textarea { max-height: min(132px, 28dvh); padding: 8px 3px; font-size: 16px; }
  .attach-button, .send-button { width: 38px; height: 38px; }
  .composer-note { display: none; }
  .scroll-bottom-button { bottom: 78px; }
  .drop-overlay { inset: 8px; }
  .model-grid { grid-template-columns: 1fr; }
  .model-dialog { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .dialog-card { max-height: 92dvh; padding: 26px 18px max(22px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .dialog-card h2 { font-size: 25px; }
  .model-card { min-height: 68px; padding: 14px; }
  .toast { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; max-width: none; text-align: center; }
}

@media (max-width: 380px) {
  .chat-header { padding-right: 6px; padding-left: 6px; }
  .chat-header .icon-button { width: 38px; height: 38px; }
  .context-usage { font-size: 9px; }
  .model-pill { padding-right: 6px; padding-left: 6px; }
  .assistant-avatar { width: 28px; height: 28px; }
  .message.assistant { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #21221f;
  --surface: #292a27;
  --surface-muted: #333430;
  --text: #ecece8;
  --muted: #a0a19b;
  --line: #3b3c38;
  --header-bg: rgb(33 34 31 / 88%);
  --user-bubble: #343531;
  --inline-code: #353631;
  --reasoning-border: #3d4944;
  --reasoning-bg: #29322e;
  --reasoning-title: #9bcab9;
  --reasoning-text: #a8b8b1;
  --composer-border: #474843;
  --soft-hover: #393a36;
  --progress-track: #454842;
  --model-pill-bg: #174b3c;
  --model-pill-text: #a8e3d0;
}

:root[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #21221f;
    --surface: #292a27;
    --surface-muted: #333430;
    --text: #ecece8;
    --muted: #a0a19b;
    --line: #3b3c38;
    --header-bg: rgb(33 34 31 / 88%);
    --user-bubble: #343531;
    --inline-code: #353631;
    --reasoning-border: #3d4944;
    --reasoning-bg: #29322e;
    --reasoning-title: #9bcab9;
    --reasoning-text: #a8b8b1;
    --composer-border: #474843;
    --soft-hover: #393a36;
    --progress-track: #454842;
    --model-pill-bg: #174b3c;
    --model-pill-text: #a8e3d0;
  }
}