/* MUSUO CN — legacy MUSUO_CN_V1_STAGE2 stylesheet reproduced on design tokens, then extended for the new pages.
   Rule (VISUAL_PRESERVATION_CONTRACT): white main, #f7f8fa 270px sidebar, navy brand & buttons, 74px topbar, centered welcome with
   2-column task cards, 840px rounded composer, 760px mobile breakpoint with drawer sidebar. */
/* MUSUO CN design tokens — derived 1:1 from the legacy MUSUO_CN_V1_STAGE2 stylesheet (04_DESIGN/VISUAL_PRESERVATION_CONTRACT.md).
   The light theme IS the baseline; dark is the same family (navy brand, cool greys) and is opt-in. */
:root {
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --bg: #fff; --fg: #192334; --muted: #8a94a4; --muted-2: #9aa4b3; --muted-3: #a1a9b4; --sub: #4d596d; --sub-2: #526077; --sub-3: #566277;
  --sidebar-bg: #f7f8fa; --sidebar-border: #e9edf2; --sidebar-w: 270px; --sidebar-bottom-border: #e5e9ef;
  --brand: #1f2a44; --brand-fg: #fff; --primary: #25334e; --primary-hover: #40577e; --focus: #667eea;
  --card-border: #e8ebf0; --card-border-hover: #c8d4e6; --card-bg-hover: #fafcff; --line: #f1f2f4; --line-2: #eef0f3;
  --input-border: #dae1eb; --composer-border: #e2e6ed; --composer-shadow: 0 5px 24px #152c5010; --composer-radius: 17px; --composer-max: 840px;
  --newchat-border: #e1e5eb; --hover-bg: #eef1f6; --active-bg: #e7ebf2; --active-fg: #172b47;
  --user-bubble: #f0f3f8; --tag-bg: #edf1fa; --tag-fg: #6878a2; --pill-fg: #7e8897; --avatar-bg: #dbe6fb; --avatar-fg: #4269a6;
  --status-bg: #f8faff; --status-fg: #526b99; --error: #b93838; --error-bg: #fdf2f2; --warn: #9a6b00; --warn-bg: #fff8e5; --ok: #1f7a4d; --ok-bg: #edf9f1;
  --balance-border: #e4e8ef; --topbar-h: 74px; --topbar-h-mobile: 62px; --radius-card: 13px; --radius-input: 9px; --radius-btn: 10px;
  --shadow-dialog: 0 24px 70px #1b2d5040; --backdrop: #18233a70; --filechip-bg: #f0f4fb; --filechip-fg: #526683;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f1522; --fg: #e6eaf2; --muted: #8e98a8; --muted-2: #7f8a9b; --muted-3: #7a8494; --sub: #c3cad6; --sub-2: #b7c0ce; --sub-3: #b2bccb;
  --sidebar-bg: #141b2b; --sidebar-border: #243049; --sidebar-bottom-border: #243049; --brand: #2d3d63; --primary: #3b4f78; --primary-hover: #51699a; --focus: #8ea2ff;
  --card-border: #263351; --card-border-hover: #3b4f78; --card-bg-hover: #182138; --line: #1e2840; --line-2: #1e2840; --input-border: #2b3853; --composer-border: #2b3853; --composer-shadow: 0 5px 24px #00000040;
  --newchat-border: #2b3853; --hover-bg: #1b2538; --active-bg: #243049; --active-fg: #e6eaf2; --user-bubble: #1b2538; --tag-bg: #1f2b45; --tag-fg: #9fb0d8; --pill-fg: #8e98a8; --avatar-bg: #2a3a5c; --avatar-fg: #bcd0ff;
  --status-bg: #141b2b; --status-fg: #a9b8dc; --error: #ff8a8a; --error-bg: #3a1f22; --warn: #ffd37a; --warn-bg: #3a2f14; --ok: #7fd3a4; --ok-bg: #16301f; --balance-border: #2b3853; --shadow-dialog: 0 24px 70px #00000080; --backdrop: #00000090; --filechip-bg: #1f2b45; --filechip-fg: #bcd0ff;
  color-scheme: dark;
}

:root { font-family: var(--font); color: var(--fg); background: var(--bg); font-synthesis: none; }
* { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); } button, textarea, select, input { font: inherit; } button { cursor: pointer; }
button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; } .skip-link { position: absolute; left: -9999px; top: 8px; background: var(--primary); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 50; } .skip-link:focus { left: 8px; }
.shell { display: flex; height: 100dvh; min-height: 480px; }
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; padding: 24px 14px max(16px, env(safe-area-inset-bottom)); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 9px 27px; } .logo, .welcome-mark { display: grid; place-items: center; background: var(--brand); color: var(--brand-fg); font-weight: 700; }
.logo { height: 38px; width: 38px; border-radius: 12px; font-size: 22px; } .brand strong { display: block; font-size: 17px; letter-spacing: 2px; } .brand small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.new-chat { width: 100%; background: var(--bg); border: 1px solid var(--newchat-border); border-radius: 11px; padding: 12px 14px; text-align: left; font-weight: 600; color: #27354b; box-shadow: 0 2px 6px #14223a05; color: var(--fg); }
.new-chat:hover, .history button:hover, .side-link:hover { background: var(--hover-bg); }
.side-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; } .side-link { display: block; padding: 9px 13px; border-radius: 9px; color: var(--sub); text-decoration: none; font-size: 13px; } .side-link.active { background: var(--active-bg); color: var(--active-fg); font-weight: 600; }
.section-label { font-size: 12px; color: var(--muted-2); padding: 20px 12px 8px; display: flex; align-items: center; justify-content: space-between; } .history-search { padding: 0 6px 8px; } .history-search input { width: 100%; border: 1px solid var(--input-border); border-radius: 8px; padding: 7px 9px; font-size: 12px; background: var(--bg); color: var(--fg); }
.history { overflow: auto; flex: 1; } .history-row { display: flex; align-items: center; gap: 2px; } .history-row > button:first-child { flex: 1; min-width: 0; }
.history button { display: block; width: 100%; padding: 12px 13px; text-align: left; border: 0; border-radius: 9px; background: transparent; color: var(--sub); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 13px; margin-bottom: 3px; }
.history button.active { background: var(--active-bg); color: var(--active-fg); font-weight: 600; } .history .row-action { flex: 0 0 auto; width: auto; padding: 9px 6px; font-size: 12px; } .history-empty { padding: 12px; color: var(--muted); font-size: 12px; } .history .folder-head { font-size: 11px; color: var(--muted-2); padding: 10px 12px 4px; text-transform: none; }
.sidebar-bottom { border-top: 1px solid var(--sidebar-bottom-border); padding-top: 13px; } .demo-pill { font-size: 11px; color: var(--pill-fg); padding: 10px 8px; min-height: 14px; }
.profile { width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; text-align: left; padding: 10px 7px; border-radius: 10px; color: var(--sub); } .profile > span:nth-child(2) { flex: 1; min-width: 0; } .profile b, .profile small { display: block; overflow-wrap: anywhere; } .profile b { font-size: 13px; } .profile small { font-size: 11px; color: var(--muted); margin-top: 4px; }
.avatar, .account-icon { display: grid; place-items: center; background: var(--avatar-bg); color: var(--avatar-fg); border-radius: 50%; width: 35px; height: 35px; font-weight: 700; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .outlet { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 36px; flex-shrink: 0; gap: 12px; }
.top-left, .top-actions { display: flex; align-items: center; gap: 17px; min-width: 0; } .product-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-name span:last-child { font-size: 13px; color: var(--muted-3); font-weight: 400; }
.top-left { flex: 1 1 auto; } .top-actions { flex: 0 0 auto; } .top-left > * { min-width: 0; } #pageName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) { .mode-tag { display: none; } .top-left, .top-actions { gap: 10px; } .lang { padding: 3px 6px 3px 8px; } }
.mode-tag { font-size: 10px; letter-spacing: 1px; color: var(--tag-fg); background: var(--tag-bg); border-radius: 5px; padding: 5px 7px; font-weight: 700; } .mode-tag:empty { display: none; }
.balance { border: 1px solid var(--balance-border); background: var(--bg); border-radius: 20px; padding: 9px 14px; font-size: 12px; color: var(--sub-2); white-space: nowrap; } .balance.low { border-color: var(--warn); color: var(--warn); } .balance.stale { opacity: .7; font-style: italic; }
.lang { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--balance-border); border-radius: 20px; padding: 4px 8px 4px 10px; background: var(--bg); } .lang select { border: 0; background: transparent; color: var(--sub-2); font-size: 12px; max-width: 110px; } .globe { font-size: 14px; }
.status { padding: 8px 24px; font-size: 12px; color: var(--status-fg); min-height: 30px; background: var(--status-bg); } .status:empty { min-height: 0; padding: 0; } .status.error { color: var(--error) !important; background: var(--error-bg); } .status.ok { color: var(--ok); background: var(--ok-bg); }
.notice { margin: 8px 24px 0; padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .notice .text-button { color: inherit; }
.conversation { flex: 1; overflow-y: auto; padding: 28px 28px 16px; } .welcome { max-width: 760px; margin: min(15vh, 130px) auto 0; text-align: center; } .welcome-mark { height: 65px; width: 65px; margin: 0 auto 24px; border-radius: 20px; font-size: 35px; box-shadow: 0 12px 25px #23345a22; }
.welcome h1 { font-size: 31px; letter-spacing: -.7px; margin: 0 0 13px; } .welcome p { color: var(--muted); font-size: 14px; margin: 0; }
.suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 48px auto 0; max-width: 540px; } .suggestions button { border: 1px solid var(--card-border); background: var(--bg); border-radius: var(--radius-card); text-align: left; padding: 19px 18px; color: var(--sub-3); display: flex; gap: 13px; align-items: center; box-shadow: 0 4px 18px #101d3005; } .suggestions button:hover { border-color: var(--card-border-hover); background: var(--card-bg-hover); } .suggestions span { font-size: 13px; }
.messages { max-width: 820px; margin: 0 auto; } .message { margin: 22px 0; display: flex; gap: 13px; line-height: 1.85; font-size: 14px; } .message.user { justify-content: flex-end; } .bubble { padding: 13px 18px; overflow-wrap: anywhere; max-width: 83%; } .user .bubble { background: var(--user-bubble); border-radius: 16px 16px 4px 16px; white-space: pre-wrap; } .assistant .bubble { padding-left: 4px; max-width: 92%; min-width: 0; }
.assistant-icon { height: 30px; width: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--brand); color: #fff; flex-shrink: 0; } .msg-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .msg-tools .text-button { padding: 4px 7px; font-size: 12px; } .msg-meta { font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.partial { border-left: 3px solid var(--warn); padding-left: 10px; color: var(--sub); } .partial-label, .pending-label { font-size: 12px; color: var(--warn); } .op-box { border: 1px dashed var(--card-border); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--sub); margin: 12px 0; }
.composer-wrap { padding: 10px 30px max(12px, env(safe-area-inset-bottom)); } .composer { max-width: var(--composer-max); margin: auto; border: 1px solid var(--composer-border); border-radius: var(--composer-radius); box-shadow: var(--composer-shadow); padding: 14px 16px 11px; background: var(--bg); }
.composer textarea { width: 100%; border: 0; resize: none; outline: none; min-height: 54px; max-height: 180px; color: var(--fg); background: transparent; font-size: 14px; line-height: 1.6; } .composer textarea::placeholder { color: var(--muted-3); }
.composer-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .left-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .attach { cursor: pointer; border: 1px solid var(--card-border); border-radius: 50%; height: 30px; width: 30px; display: grid; place-items: center; font-size: 21px; color: #6d788a; background: transparent; }
.model-btn { border: 0; color: #687589; font-size: 12px; background: transparent; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 6px; border-radius: 6px; } .model-btn:hover { background: var(--hover-bg); }
.send { border: 0; background: var(--primary); color: #fff; border-radius: var(--radius-btn); width: 33px; height: 33px; font-size: 23px; line-height: 1; } .send:hover { background: var(--primary-hover); } .send.stop { font-size: 14px; } .footnote { text-align: center; font-size: 11px; color: var(--muted-3); margin: 11px 0 0; }
.filechip { background: var(--filechip-bg); border-radius: 7px; padding: 6px 9px; font-size: 12px; color: var(--filechip-fg); } .attachments { display: flex; flex-wrap: wrap; gap: 7px; }
.hamburger, .mobile-close { display: none; border: 0; background: transparent; font-size: 21px; color: var(--fg); } .mobile-close { margin-left: auto; }
dialog.dlg { border: 1px solid var(--card-border); border-radius: 18px; padding: 26px; width: min(460px, calc(100vw - 32px)); box-shadow: var(--shadow-dialog); background: var(--bg); color: var(--fg); max-height: calc(100dvh - 32px); overflow: auto; } dialog::backdrop { background: var(--backdrop); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; } .dialog-head h2 { font-size: 19px; margin: 0; } .dialog-head button { border: 0; background: transparent; font-size: 25px; color: var(--fg); }
.dialog-done { width: 100%; border: 0; background: var(--primary); color: #fff; padding: 12px; border-radius: var(--radius-input); margin-top: 18px; } .dialog-done:hover { background: var(--primary-hover); } button:disabled { opacity: .5; cursor: wait; }
.text-button { background: none; border: 0; color: var(--status-fg); font-size: 12px; padding: 7px; border-radius: 6px; } .text-button:hover { background: var(--hover-bg); } .error { color: var(--error) !important; } .ok { color: var(--ok); } .muted { color: var(--muted); font-size: 13px; } .hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.field { margin: 14px 0 0; } .field label, form label { display: block; font-size: 13px; margin: 0 0 8px; color: var(--sub-2); } .field input, .field select, .field textarea, form input, form select, form textarea { width: 100%; border: 1px solid var(--input-border); border-radius: var(--radius-input); padding: 12px; color: var(--fg); background: var(--bg); } .field textarea { min-height: 90px; }
.auth-wrap { max-width: 460px; margin: min(10vh, 80px) auto 40px; padding: 0 16px; } .auth-card { border: 1px solid var(--card-border); border-radius: 18px; padding: 26px; box-shadow: var(--shadow-dialog); background: var(--bg); } .auth-card h2 { font-size: 19px; margin: 0 0 8px; } .auth-error { min-height: 20px; margin-top: 10px; } .resend { margin-top: 18px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.error-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--error); background: var(--error-bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; } .error-box .trace { font-size: 11px; color: var(--muted); } .err-action { color: var(--primary); border: 1px solid var(--card-border); background: var(--bg); }
.page { padding: 20px 28px 40px; overflow-y: auto; flex: 1; } .page h1 { font-size: 22px; margin: 0 0 6px; } .page h2 { font-size: 16px; margin: 22px 0 10px; } .page-intro { color: var(--muted); font-size: 13px; margin: 0 0 16px; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 16px 18px; background: var(--bg); box-shadow: 0 4px 18px #101d3005; } .card h3 { margin: 0 0 6px; font-size: 15px; } .card .kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line-2); } .card .kv:last-child { border-bottom: 0; } .card .kv span:first-child { color: var(--muted); } .card.selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.badge { display: inline-block; font-size: 11px; border-radius: 5px; padding: 3px 7px; background: var(--tag-bg); color: var(--tag-fg); font-weight: 600; } .badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.err { background: var(--error-bg); color: var(--error); }
.btn { border: 1px solid var(--card-border); background: var(--bg); color: var(--fg); border-radius: var(--radius-btn); padding: 9px 14px; font-size: 13px; } .btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); } .btn.primary:hover { background: var(--primary-hover); } .btn.danger { color: var(--error); border-color: var(--error); } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th, .table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; } .table th { color: var(--muted); font-weight: 600; font-size: 12px; } .table-wrap { overflow-x: auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); margin-bottom: 14px; flex-wrap: wrap; } .tabs button { border: 0; background: transparent; padding: 10px 12px; color: var(--sub); border-bottom: 2px solid transparent; font-size: 13px; } .tabs button[aria-selected="true"] { color: var(--active-fg); border-bottom-color: var(--primary); font-weight: 600; }
.switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); } .switch label { font-size: 14px; } .switch .hint { margin: 4px 0 0; } .switch input[type="checkbox"] { width: 20px; height: 20px; }
.tier { display: flex; gap: 8px; flex-wrap: wrap; } .tier button { border: 1px solid var(--card-border); background: var(--bg); border-radius: 20px; padding: 7px 14px; font-size: 13px; color: var(--sub); } .tier button[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.model-panel { max-width: var(--composer-max); margin: 0 auto 8px; border: 1px solid var(--composer-border); border-radius: var(--composer-radius); box-shadow: var(--composer-shadow); padding: 14px 16px; background: var(--bg); } .model-panel h3 { margin: 0 0 8px; font-size: 14px; } .model-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; } .model-item { border: 1px solid var(--card-border); border-radius: 10px; padding: 9px 11px; background: var(--bg); text-align: left; font-size: 12px; color: var(--sub); display: flex; flex-direction: column; gap: 3px; } .model-item[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); color: var(--fg); } .model-item b { font-size: 13px; color: var(--fg); }
.md { line-height: 1.75; } .md p { margin: 0 0 10px; } .md ul, .md ol { padding-left: 22px; margin: 6px 0 10px; } .md-h { margin: 14px 0 6px; font-size: 15px; } .md blockquote { border-left: 3px solid var(--card-border-hover); margin: 8px 0; padding: 2px 12px; color: var(--sub); } .md hr { border: 0; border-top: 1px solid var(--line-2); margin: 12px 0; }
.md-code-wrap { position: relative; margin: 8px 0 12px; } .md-code { background: var(--user-bubble); border-radius: 10px; padding: 36px 14px 14px; overflow-x: auto; font-size: 13px; line-height: 1.55; } .md-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; } .md-lang { position: absolute; left: 12px; top: 8px; font-size: 11px; color: var(--muted); } .md-copy { position: absolute; right: 8px; top: 6px; font-size: 11px; border: 1px solid var(--card-border); background: var(--bg); color: var(--sub); border-radius: 6px; padding: 3px 8px; }
.md-inline { background: var(--user-bubble); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .md-math code { font-family: "Cambria Math", "STIX Two Math", serif; background: var(--tag-bg); border-radius: 5px; padding: 1px 5px; } .md-math-block { padding: 10px 12px; margin: 8px 0; background: var(--tag-bg); border-radius: 10px; overflow-x: auto; } .md-table-wrap { overflow-x: auto; margin: 8px 0; } .md-table { border-collapse: collapse; font-size: 13px; } .md-table th, .md-table td { border: 1px solid var(--line-2); padding: 6px 10px; }
.sources { font-size: 12px; color: var(--sub); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 12px; margin-top: 8px; } .sources ul { margin: 6px 0 0; padding-left: 18px; }
.onboard-steps { counter-reset: s; list-style: none; padding: 0; } .onboard-steps li { counter-increment: s; padding: 10px 0 10px 36px; position: relative; font-size: 14px; } .onboard-steps li::before { content: counter(s); position: absolute; left: 0; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 13px; }
.topup-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .topup-tiers button { border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 18px 10px; font-size: 18px; font-weight: 700; background: var(--bg); color: var(--fg); } .topup-tiers button[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .topup-tiers small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 4px; }
.sidebar-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 4; } .drop { border: 2px dashed var(--card-border-hover); border-radius: var(--radius-card); padding: 24px; text-align: center; color: var(--muted); } .share-box { word-break: break-all; font-family: ui-monospace, monospace; font-size: 12px; background: var(--user-bubble); border-radius: 8px; padding: 10px; }
.restricted { max-width: 640px; margin: 40px auto; padding: 0 16px; } .kbd { font-family: ui-monospace, monospace; font-size: 12px; border: 1px solid var(--card-border); border-radius: 5px; padding: 1px 5px; }
@media (max-width: 760px) {
  .sidebar { position: fixed; z-index: 5; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .2s; box-shadow: 10px 0 30px #18243a10; width: min(var(--sidebar-w), 86vw); } .sidebar.open { transform: translateX(0); } .hamburger, .mobile-close { display: block; }
  .topbar { height: var(--topbar-h-mobile); padding: 0 17px; } .mode-tag { display: none; } .balance { padding: 8px 10px; } .conversation { padding: 16px; } .welcome { margin: 11vh auto 0; } .welcome h1 { font-size: 25px; } .suggestions { gap: 9px; margin-top: 32px; } .suggestions button { padding: 15px 10px; font-size: 12px; gap: 7px; }
  .composer-wrap { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); } .footnote { font-size: 10px; } .bubble { max-width: 88%; } .page { padding: 14px 16px 32px; } .lang select { max-width: 72px; }
}
@media (min-width: 761px) { .sidebar-backdrop { display: none !important; } }
@media (max-width: 400px) { .topbar { padding: 0 10px; } .top-actions, .top-left { gap: 6px; } .product-name span:last-child { display: none; } .welcome h1 { font-size: 23px; } .suggestions { grid-template-columns: 1fr; margin-top: 22px; } .welcome { margin: 5vh auto 0; } .shell { min-height: 0; } .conversation { padding: 12px; } .balance { font-size: 11px; padding: 7px 8px; } .suggestions button { padding: 12px; } .status { padding: 8px 12px; } .lang { padding: 3px 6px; } .globe { display: none; } }
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

.noscript-note { padding: 24px; font-family: sans-serif; }
.share-root { max-width: 820px; margin: 0 auto; }