:root {
  color-scheme: light;
  --page: #fff; --surface: #fff; --side: #f1f6f8; --hover: #e6eff3; --line: #cfdee5;
  --ink: #102a3a; --muted: #536b7a; --dim: #536b7a; --brand: #0b65ce; --brand-soft: #e6eff3;
  --send: #0b65ce; --button-ink: #fff; --danger: #a62e29; --ring: #0b65ce;
  --elevation: 0 7px 25px #102a3a0a, 0 1px 3px #102a3a09;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #081c2b; --surface: #0e2635; --side: #0e2635; --hover: #193949; --line: #365360;
    --ink: #f4fafc; --muted: #a3b6c2; --dim: #a3b6c2; --brand: #55bcff; --brand-soft: #123040;
    --send: #0b65ce; --button-ink: #fff; --danger: #ff958a; --ring: #55bcff; --elevation: 0 5px 22px #0002;
  }
}
* { box-sizing: border-box; }
[hidden], body.checking .sidebar, body.checking .main, body.locked .sidebar, body.locked .main { display: none !important; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
.icon { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border-radius: 9px; color: var(--muted); }
.icon-button:hover, .icon-button:focus-visible { background: var(--hover); color: var(--ink); }
.symbols { width: 0; height: 0; position: absolute; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; }
.sidebar { width: 254px; flex: none; display: flex; flex-direction: column; background: var(--side); padding: 20px 14px 12px; border-right: 1px solid var(--line); min-height: 0; }
body.side-collapsed .sidebar { display: none; }
.brand-row { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 5px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 680; letter-spacing: -.045em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand-type { display: grid; gap: 2px; line-height: 1.08; white-space: nowrap; }
.brand-type strong { font: inherit; }
.brand-type small { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .015em; }
.new-chat { display: flex; gap: 10px; align-items: center; border-radius: 10px; padding: 10px 12px; margin: 27px 0 31px; background: var(--surface); border: 1px solid var(--line); font-weight: 560; font-size: 14px; text-align: left; }
.new-chat:hover { border-color: var(--dim); }
.history-label { color: var(--muted); font-weight: 550; font-size: 12px; margin: 0 10px 8px; }
.history { flex: 1; min-height: 0; overflow: auto; }
.history-empty { font-size: 13px; line-height: 1.5; color: var(--dim); margin: 6px 10px; }
.hist-row { position: relative; display: flex; border-radius: 9px; align-items: center; margin-bottom: 2px; }
.hist-row.active, .hist-row:hover, .hist-row:focus-within { background: var(--hover); }
.hist-link { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 14px; }
.hist-remove { visibility: hidden; width: 30px; height: 30px; margin-right: 3px; }
.hist-remove .icon { width: 15px; height: 15px; }
.hist-row:hover .hist-remove, .hist-row:focus-within .hist-remove, .hist-row.active .hist-remove { visibility: visible; }
.sidebar-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 16px 1px 0; margin-top: 14px; }
.user-avatar { width: 33px; height: 33px; flex: none; display: grid; place-items: center; font-size: 14px; border-radius: 50%; font-weight: 650; background: var(--brand-soft); color: var(--brand); }
.user-info { display: grid; flex: 1; min-width: 0; }
.user-info strong { font-size: 13px; font-weight: 570; }
.user-info span { font-size: 12px; color: var(--dim); }
.user-info > * { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { height: 64px; padding: 0 clamp(13px, 2.4vw, 36px); display: flex; gap: 10px; align-items: center; flex: none; }
.panel-open { display: none; }
body.side-collapsed .panel-open { display: grid; }
.picker { position: relative; min-width: 0; }
.model-button { max-width: min(56vw, 440px); display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; color: var(--ink); font-size: 16px; font-weight: 620; letter-spacing: -.025em; }
.model-button span, .chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-button:hover, .model-button[aria-expanded="true"] { background: var(--hover); }
.chevron { width: 14px; height: 14px; color: var(--muted); }
.chat-title { margin-left: auto; color: var(--dim); font-size: 13px; }
.menu { z-index: 8; position: absolute; min-width: 212px; max-width: min(400px, 89vw); max-height: min(440px, 48vh); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--elevation); border-radius: 13px; padding: 6px; }
.model-menu { top: calc(100% + 5px); left: 0; }
.effort-menu { bottom: calc(100% + 8px); left: 0; }
.menu-label { margin: 7px 8px 4px; color: var(--dim); font-size: 12px; font-weight: 580; }
.menu-item { width: 100%; display: flex; align-items: center; gap: 15px; justify-content: space-between; text-align: left; padding: 8px; border-radius: 7px; font-size: 14px; overflow-wrap: anywhere; }
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); }
.menu-item .icon { width: 15px; height: 15px; color: var(--brand); }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat.empty { justify-content: center; padding-bottom: clamp(42px, 12vh, 135px); }
.welcome { text-align: center; margin: 0 0 24px; }
.hero-mark { display: grid; margin: 0 auto 12px; width: 58px; height: 58px; place-items: center; color: var(--brand); }
.hero-mark img { width: 58px; height: 58px; }
.welcome h1, .gate h1 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; font-weight: 650; letter-spacing: -.045em; line-height: 1.16; margin: 0; }
.welcome h1 { font-size: clamp(34px, 4vw, 48px); }
.input-region { width: min(100%, 820px); margin: 0 auto; padding: 12px clamp(14px, 3vw, 36px) max(17px, env(safe-area-inset-bottom)); flex: none; }
.empty .input-region { padding-top: 0; }
.composer { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--elevation); border-radius: 22px; padding: 15px 12px 10px; }
.composer:focus-within { border-color: color-mix(in srgb, var(--dim) 58%, var(--line)); }
.composer textarea { display: block; background: transparent; width: 100%; outline: 0; border: 0; resize: none; padding: 0 5px; min-height: 37px; max-height: min(26vh, 210px); font-size: 16px; line-height: 1.55; }
.composer textarea::placeholder { color: var(--dim); opacity: 1; }
.composer-tools { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.attach { border-radius: 50%; border: 1px solid var(--line); height: 34px; width: 34px; color: var(--ink); }
.effort-button, .image-mode { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border-radius: 9px; padding: 4px 8px; font-size: 12.5px; color: var(--muted); }
.effort-button .icon, .image-mode .icon { width: 16px; height: 16px; }
.effort-button .chevron { width: 12px; }
.effort-button:hover, .image-mode:hover, .effort-button[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.image-mode[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); }
.send { display: grid; place-items: center; flex: none; margin-left: auto; border-radius: 50%; width: 35px; height: 35px; padding: 0; background: var(--send); color: var(--button-ink); }
.send:disabled { opacity: .42; }
.send:not(:disabled):hover { filter: brightness(1.18); }
.suggestions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.suggestions button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--muted); }
.suggestions button:hover { background: var(--surface); border-color: var(--dim); color: var(--ink); }
.suggestions .icon { width: 15px; height: 15px; }
.timeline { flex: 1; min-height: 0; overflow: auto; }
.message-list { max-width: 820px; margin: 0 auto; padding: 20px clamp(14px, 3vw, 36px) 12px; }
.message { margin: 0 0 28px; overflow-wrap: anywhere; }
.message.user { max-width: 85%; width: fit-content; margin-left: auto; border-radius: 19px; padding: 10px 16px; background: var(--hover); }
.message.assistant { display: grid; grid-template-columns: 29px minmax(0,1fr); column-gap: 12px; }
.mini-mark { color: var(--brand); width: 29px; height: 29px; border-radius: 9px; background: var(--brand-soft); display: grid; place-items: center; }
.mini-mark img { width: 27px; height: 27px; }
.prose { font-size: 15.5px; line-height: 1.63; min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.plain { white-space: pre-wrap; }
.prose p, .prose ul, .prose ol { margin: 0 0 .85em; }
.prose ul, .prose ol { padding-left: 1.55em; }
.prose :is(h2,h3,h4,h5,h6) { font-weight: 650; line-height: 1.35; font-size: 1.16em; margin: .95em 0 .45em; }
.prose a, .attachment-link { color: var(--brand); }
.prose blockquote { color: var(--muted); border-left: 3px solid var(--line); padding-left: 12px; margin: .6em 0; }
.prose code { background: var(--hover); font: .87em/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; border-radius: 4px; padding: .1em .3em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.prose .table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 1em 0; }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: .95em; line-height: 1.5; }
.prose :is(th,td) { min-width: 6.5em; padding: .6em .8em; vertical-align: top; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prose th { background: var(--side); font-weight: 650; }
.prose tr > :last-child { border-right: 0; }
.prose tbody tr:last-child > td { border-bottom: 0; }
.prose li > :last-child { margin-bottom: 0; }
.code-box { border: 1px solid var(--line); border-radius: 11px; background: var(--side); margin: 12px 0; overflow: hidden; }
.code-head { padding: 5px 10px; display: flex; align-items: center; background: var(--hover); color: var(--muted); font-size: 12px; gap: 8px; }
.code-head span { flex: 1; overflow-wrap: anywhere; }
.code-head button { padding: 3px 4px; border-radius: 5px; }
.code-box pre { margin: 0; padding: 12px; overflow: auto; }
.code-box code { padding: 0; background: transparent; white-space: pre; }
.attachment-group, .uploads { display: flex; flex-wrap: wrap; gap: 7px; }
.attachment-group { margin: 6px 0; }
.uploads { margin: 0 4px 10px; max-height: min(24vh, 190px); overflow: auto; padding: 2px; }
.file-card, .upload { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 8px; min-width: 0; max-width: 100%; }
.file-card { text-decoration: none; color: var(--ink); overflow: hidden; }
.file-card:hover { border-color: var(--dim); }
.file-card .icon, .upload > .icon { color: var(--muted); }
.file-label { min-width: 0; }
.file-label strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 550; max-width: min(34vw, 255px); }
.file-label small { display: block; font-size: 11px; color: var(--muted); }
.upload { position: relative; overflow: hidden; }
.upload .icon-button { width: 26px; height: 26px; }
.upload .icon-button .icon { width: 14px; height: 14px; }
.upload img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; }
.upload progress { position: absolute; inset: auto 0 0; height: 2px; width: 100%; accent-color: var(--brand); }
.upload.failed { border-color: var(--danger); }
.image-file { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 100%; }
.image-preview { display: block; padding: 0; cursor: zoom-in; }
.image-preview img { display: block; max-width: min(340px, 100%); max-height: 310px; border-radius: 12px; object-fit: contain; }
.image-file .file-card { border: 0; background: transparent; padding-left: 0; }
.pending-text { color: var(--muted); animation: breathe 1.5s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .45; } }
.error-copy { color: var(--danger); }
.toast { position: fixed; z-index: 15; left: 50%; bottom: 22px; transform: translateX(-50%); border-radius: 10px; background: var(--send); color: var(--button-ink); padding: 10px 16px; box-shadow: var(--elevation); max-width: min(90vw,550px); width: max-content; font-size: 14px; }
.drop-hint { pointer-events: none; position: fixed; inset: 12px; z-index: 12; display: grid; place-items: center; border: 2px dashed var(--brand); border-radius: 24px; background: color-mix(in srgb, var(--surface) 94%, transparent); }
.drop-hint div { display: flex; align-items: center; gap: 10px; font-size: 19px; }
dialog { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); padding: 22px; max-width: min(420px, 90vw); box-shadow: var(--elevation); }
dialog::backdrop { background: #081c2b70; }
dialog h2 { margin: 0; font-size: 20px; }
dialog p { overflow-wrap: anywhere; color: var(--muted); }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.dialog-actions button { background: var(--hover); border-radius: 8px; padding: 7px 12px; }
.dialog-actions .danger { color: white; background: #a43d32; }
.preview-dialog { padding: 6px; min-width: 100px; min-height: 94px; max-width: 95vw; max-height: 95dvh; }
.preview-dialog img { display: block; margin: auto; max-width: 90vw; max-height: 84dvh; border-radius: 10px; }
.preview-dialog .icon-button { position: absolute; right: 10px; top: 10px; background: var(--surface); }
.gate { width: 100%; height: 100%; padding: 28px; display: grid; place-items: center; overflow: auto; }
.gate-card { width: min(100%, 396px); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--elevation); padding: clamp(24px, 4vw, 35px); }
.gate .brand { font-size: 16px; }
.gate .brand-mark { width: 30px; height: 30px; }
.gate h1 { font-size: 35px; margin: 29px 0 22px; }
.gate form { display: grid; }
.gate label { font-size: 13px; font-weight: 540; margin-bottom: 6px; }
.gate input { background: var(--page); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin: 0 0 15px; min-width: 0; }
.gate form button { color: var(--button-ink); background: var(--send); border-radius: 9px; padding: 10px; font-weight: 570; margin: 5px 0 0; }
.gate form button:disabled { opacity: .65; }
.gate-message { font-size: 13px; color: var(--danger); margin: 12px 0 0; }
.gate-message:empty { display: none; }
#scrim { display: none; }
@media (max-width: 760px) {
  .sidebar, body.side-collapsed .sidebar { display: none; position: fixed; inset: 0 auto 0 0; width: min(290px, 86vw); z-index: 11; }
  body.side-open .sidebar { display: flex; }
  body.side-open #scrim { display: block; position: fixed; inset: 0; background: #081c2b62; z-index: 10; }
  .panel-open { display: grid; }
  .topbar { height: 54px; gap: 3px; }
  .model-button { font-size: 15px; }
  .chat.empty { padding-bottom: 7vh; }
  .chat-title { font-size: 12px; }
  .effort-menu { left: -35px; right: auto; }
  .hist-row .hist-remove { visibility: visible; }
  .message.assistant { grid-template-columns: 25px minmax(0,1fr); column-gap: 9px; }
  .mini-mark, .mini-mark img { width: 25px; height: 25px; }
  .suggestions { gap: 6px; }
  .image-preview img { max-width: min(66vw, 340px); }
}
@media (max-width: 430px) {
  .suggestions { gap: 5px; }
  .suggestions button { font-size: 11.5px; padding: 5px 8px; }
  .suggestions .icon { width: 13px; }
  .image-mode, .effort-button { padding: 4px 5px; gap: 4px; }
  .chat-title { display: none; }
  .prose { font-size: 15px; }
}
@media (max-height: 540px) {
  .chat.empty { padding-bottom: 0; overflow: auto; justify-content: flex-start; }
  .hero-mark { width: 36px; height: 36px; margin-bottom: 3px; }
  .hero-mark img { width: 36px; height: 36px; }
  .welcome { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }
.summary { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.summary summary { cursor: pointer; width: fit-content; }
.summary > div { margin: 7px 0 0; border-left: 2px solid var(--line); padding-left: 10px; }
.image-caption { font-size: 12px; color: var(--muted); }

.model-button { border: 1px solid var(--line); background: var(--surface); gap: 8px; min-height: 38px; max-width: min(66vw, 550px); padding: 6px 11px; font-size: 15px; }
.model-tag { flex: none; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; padding-right: 9px; border-right: 1px solid var(--line); }
.model-menu { width: min(335px, calc(100vw - 76px)); overflow: hidden; max-height: none; }
.family-choices { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; margin: 2px 2px 6px; background: var(--side); border-radius: 9px; }
.family-choice { padding: 6px 9px; font-size: 13px; font-weight: 570; color: var(--muted); border-radius: 6px; }
.family-choice[aria-checked="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px #0002; }
.version-list { overflow-y: auto; max-height: min(42dvh, 340px); }
.thinking-switch { display: flex; align-items: center; gap: 6px; border: 1px solid transparent; min-height: 34px; font-size: 13px; padding: 4px 9px; color: var(--muted); border-radius: 9px; }
.thinking-switch .icon { width: 16px; height: 16px; }
.thinking-switch:hover { background: var(--hover); }
.thinking-switch[aria-pressed="true"] { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 24%, transparent); }
@media (max-width: 760px) { .model-button { max-width: calc(100vw - 78px); font-size: 14px; } }

.account-actions { display: grid; gap: 1px; margin-top: 8px; }
.account-actions button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; color: var(--muted); border-radius: 8px; padding: 7px 9px; font-size: 13px; }
.account-actions button:hover { background: var(--hover); color: var(--ink); }
.account-actions .icon { width: 16px; height: 16px; }
.account-actions + .sidebar-foot { margin-top: 6px; }
.text-action { color: var(--brand); padding: 8px 0 0; font-weight: 550; font-size: 13px; }
.gate input:read-only { color: var(--muted); background: var(--side); }
.manage-dialog { width: min(410px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); padding: 22px; }
.admin-dialog { width: min(790px, calc(100vw - 24px)); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.dialog-head h2 { font-size: 22px; letter-spacing: -.035em; }
.dialog-head .icon-button { width: 30px; height: 30px; }
.manage-form { display: grid; }
.manage-dialog label { color: var(--muted); font-size: 13px; margin-bottom: 5px; }
.manage-dialog input, .manage-dialog select { background: var(--page); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; min-width: 0; }
.manage-form input { margin-bottom: 12px; }
.primary-action { padding: 9px 14px; font-size: 14px; font-weight: 570; border-radius: 9px; background: var(--send); color: var(--button-ink); }
.primary-action:disabled, fieldset:disabled .primary-action { opacity: .55; }
.form-note, .manage-list .empty-note { font-size: 13px; margin: 0 0 14px; color: var(--muted); }
.feedback { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.feedback:not(:empty) { margin: 10px 0; }
.feedback.error { color: var(--danger); }
.admin-dialog fieldset { padding: 0; border: 0; min-width: 0; margin: 0; }
.admin-dialog section + section { margin-top: 22px; }
.admin-dialog h3 { margin: 0 0 8px; font-size: 15px; }
.invite-form { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-form input { flex: 1 1 190px; }
.manage-list { display: grid; gap: 0; }
.manage-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.manage-info { display: grid; min-width: 0; flex: 1 1 150px; }
.manage-info strong { font-size: 14px; font-weight: 580; overflow-wrap: anywhere; }
.manage-info small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.manage-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.manage-controls button, .manage-controls select { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; background: var(--page); font-size: 12px; }
.manage-controls button:hover { border-color: var(--dim); }
@media (max-width: 510px) { .manage-dialog { padding: 16px; } .manage-row { align-items: flex-start; } .manage-controls { width: 100%; } .invite-form button { flex: 1 1 auto; } }