/* Shared shell for the claude.ai clone — tokens, sidebar, menus, palette, page scaffold.
   Values copied from the live CSSOM (RECON/logged-in/*.json, RECON/pages/*.json). */
@import url("assets/fonts/fonts.css");
:root{
  --cds-surface-0:#f9f9f7; --cds-surface-1:#fcfcfb; --cds-surface-2:#fff; --cds-surface-popover:#fff;
  --cds-text-primary:#0b0b0b; --cds-text-secondary:#52514e; --cds-text-muted:#898781; --cds-text-accent:#184f95;
  --cds-kbd-ink:#6d6b67;
  --cds-border:hsl(from #0b0b0b h s l / 10%); --cds-border-strong:hsl(from #0b0b0b h s l / 20%);
  --cds-fill-ghost-hover:hsl(from #0b0b0b h s l / 5%); --cds-fill-ghost-selected:hsl(from #0b0b0b h s l / 10%);
  --cds-bg-neutral:hsl(from #0b0b0b h s l / 5%); --cds-bg-user-message:hsl(from #0b0b0b h s l / 5%);
  --cds-clay:#d97757; --cds-fill-brand:#c6613f; --cds-fill-brand-hover:#d97757;
  --cds-fill-accent:#2a78d6; --cds-fill-primary:#0b0b0b;
  --cds-radius:.5rem; --cds-radius-composer:.875rem; --cds-h-control:2rem;
  --cds-shadow-popover:0 8px 24px #0000001f, 0 2px 6px #00000014;
  --df-hover:#f0efec; --df-selected:#edece8; --df-row-h:32px; --df-row-px:2px; --df-row-gap:8px;
  --df-row-font:14px; --df-group-font:13px; --df-leading-slot:28px; --df-radius-pill:8px;
  --df-sidebar-width:288px; --df-new-circle-size:22px;
  --df-web-sidebar-bg:color-mix(in srgb, #f9f9f7 50%, #fcfcfb);
  --df-ease-out:cubic-bezier(.32,.72,0,1);
  --font-ui-serif:"Anthropic Serif", "Noto Serif CJK SC", "Noto Serif CJK JP", "Source Han Serif SC", "Source Han Serif JP", "Songti SC", STSong, "Yu Mincho", YuMincho, serif;
  --cds-font-sans:anthropic-sans, system-ui, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "PingFang TC", "Hiragino Sans", "Apple SD Gothic Neo", "Kohinoor Devanagari", "Kohinoor Bangla", "Kohinoor Telugu", "Tamil Sangam MN", "Kohinoor Gujarati", "Malayalam Sangam MN", "Nirmala UI", "Noto Sans Devanagari UI", "Noto Sans Devanagari", "Noto Sans Bengali UI", "Noto Sans Bengali", "Noto Sans Telugu UI", "Noto Sans Telugu", "Noto Sans Tamil UI", "Noto Sans Tamil", "Noto Sans Gujarati UI", "Noto Sans Gujarati", "Noto Sans Kannada UI", "Noto Sans Kannada", "Noto Sans Malayalam UI", "Noto Sans Malayalam", Thonburi, "Leelawadee UI", "Noto Sans Thai UI", "Noto Sans Thai", Kefa, Ebrima, "Noto Sans Ethiopic", "Abyssinica SIL", sans-serif, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "PingFang TC", "Hiragino Sans", "Apple SD Gothic Neo", sans-serif;
  --cds-font-voice:anthropic-serif, "Anthropic Serif Fallback Georgia", "Anthropic Serif Fallback Times", Georgia, serif;
  --cds-font-mono:anthropic-mono, ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--cds-surface-1);color:var(--cds-text-primary);font:400 16px/24px var(--font-ui-serif);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--cds-fill-accent),0 0 6px 0 color-mix(in srgb,var(--cds-fill-accent) 20%,transparent)}
.sans{font-family:var(--cds-font-sans)}
.ic{font-family:Anthropicons-Variable;font-style:normal;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;speak:never}
.s12{font-size:12px;font-weight:577.8}.s16{font-size:16px;font-weight:533.3}.s20{font-size:20px;font-weight:433.3}

/* ── App frame ─────────────────────────────── */
.app{display:flex;height:100vh;width:100%}
.sb{width:var(--df-sidebar-width);flex-shrink:0;height:100vh;display:flex;flex-direction:column;background:var(--df-web-sidebar-bg);border-right:.5px solid var(--cds-border);font:400 14px/21px var(--cds-font-sans);transition:margin-left .3s var(--df-ease-out);position:relative;z-index:20}
.app.sb-hidden .sb{margin-left:calc(-1 * var(--df-sidebar-width))}
.sb-head{height:44px;padding:4px 8px 0;display:flex;align-items:center;flex-shrink:0}
.ghost{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--cds-radius);color:var(--cds-text-secondary);transition:background-color .12s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.ghost:hover{background:var(--cds-fill-ghost-hover);color:var(--cds-text-primary)}
.ghost:active{transform:scale(.96)}
.sb-toggle{width:32px;height:24px;border-radius:6px}
.logo{font:500 20px/20px var(--cds-font-voice);font-variation-settings:"wght" 500;margin-left:4px;white-space:nowrap;color:var(--cds-text-primary)}
.mode{margin-left:auto;display:flex;padding:1px;border-radius:7px;background:var(--cds-bg-neutral);position:relative;height:28px}
.mode button{width:34px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--cds-text-muted);position:relative;z-index:1}
.mode button[aria-pressed=true]{color:var(--cds-text-primary)}
.mode button:hover{color:var(--cds-text-primary)}
.mode .thumb{position:absolute;top:1px;left:1px;width:34px;height:26px;border-radius:5px;background:var(--cds-surface-2);box-shadow:0 0 0 .5px var(--cds-border),0 1px 2px #0000000d;transition:transform .3s var(--df-ease-out)}
.mode[data-mode=code] .thumb{transform:translateX(34px)}

.sb-scroll{flex:1;min-height:0;overflow-y:auto;padding:8px 8px 16px;scrollbar-width:none}
.sb-scroll::-webkit-scrollbar{display:none}
.sb-scroll{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}
.search{width:100%;height:32px;display:flex;align-items:center;gap:8px;padding:0 2px;border-radius:8px;background:var(--pernix-surface-translucent);box-shadow:inset 0 0 0 .5px var(--cds-border),0 1px 2px #0000000d;color:var(--cds-text-muted);font:400 14px/21px var(--font-ui-serif);text-align:left}
.search:hover{background:var(--cds-surface-2)}
.slot{width:var(--df-leading-slot);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kbds{margin-left:auto;margin-right:6px;display:inline-flex;align-items:center;gap:4px;font:400 12px/12px var(--cds-font-mono);color:var(--cds-kbd-ink)}
kbd{font:inherit;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border:1px solid color-mix(in srgb,var(--cds-kbd-ink) 18%,transparent);border-radius:4px}
.nav{margin-top:8px;display:flex;flex-direction:column;gap:.5px}
.row{width:100%;height:var(--df-row-h);display:flex;align-items:center;gap:var(--df-row-gap);padding:0 var(--df-row-px);border-radius:var(--df-radius-pill);color:var(--cds-text-secondary);font:400 var(--df-row-font)/21px var(--cds-font-sans);text-align:left;position:relative}
.row:hover,.row.menu-open{background:var(--df-hover)}
.row[aria-current=page]{background:var(--df-selected);color:var(--cds-text-primary)}
.row[aria-current=page] .slot{color:var(--cds-text-primary)}
.row .label{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.row .label.fade{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}
.row:hover .label.fade{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
.row.iconless{padding-left:6px}
.new-circle{width:var(--df-new-circle-size);height:var(--df-new-circle-size);border-radius:999px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--cds-text-muted) 15%,transparent)}
.row[aria-current=page] .new-circle{background:none}
.new-circle .ic{font-size:16px;font-weight:700}
.badge{font:500 11px/14px var(--cds-font-sans);padding:0 6px 1px;height:18px;display:inline-flex;align-items:center;border-radius:4.5px;background:var(--cds-bg-neutral);color:var(--cds-text-secondary)}
.row-short{margin-left:auto;margin-right:var(--df-radius-pill);font:400 12px/1 var(--cds-font-mono);color:var(--cds-text-muted);opacity:0;display:inline-flex;gap:3px}
.row:hover .row-short{opacity:1}
.row .more{position:absolute;right:4px;top:4px;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--cds-text-secondary);opacity:0}
.row:hover .more,.row.menu-open .more,.row .more:focus-visible{opacity:1}
.row .more:hover{background:var(--cds-fill-ghost-selected);color:var(--cds-text-primary)}
.row-more .slot{opacity:.5}
.row-more .label{color:var(--cds-text-muted);font-family:var(--font-ui-serif)}
.gap12{height:12.5px}
.group-label{height:44px;padding:20px 6px 0;display:flex;align-items:flex-start;gap:8px;font:400 var(--df-group-font)/16px var(--font-ui-serif);color:var(--cds-text-muted)}
.group-label .gname{display:flex;align-items:center;gap:4px}
.group-label .gname:hover{color:var(--cds-text-secondary)}
.group-label .caret{opacity:0;transition:transform .12s,opacity .12s;transform:rotate(90deg)}
.group:hover .caret,.group.collapsed .caret{opacity:1}
.group.collapsed .caret{transform:none}
.group.collapsed .list{display:none}
.group-label .tools{margin-left:auto;display:flex;gap:8px;margin-top:-4px;margin-right:2px}
.group-label .tools button,.group-label .tools a{width:24px;height:24px;border-radius:6px;color:var(--cds-text-secondary);display:flex;align-items:center;justify-content:center}
.group-label .tools button:hover,.group-label .tools a:hover{background:var(--cds-fill-ghost-hover);color:var(--cds-text-primary)}
.group-label .tools .hover-only{opacity:0}
.group:hover .tools .hover-only{opacity:1}
.list{display:flex;flex-direction:column;gap:1.5px;margin-top:1px}
.group+.group{margin-top:10.5px}
.sb-foot{flex-shrink:0;height:40px;padding:0 8px 8px;display:flex;align-items:center;gap:6px;position:relative}
.user-btn{height:32px;display:flex;align-items:center;gap:8px;padding:0 8px 0 2px;border-radius:8px;max-width:100%;font:400 14px/21px var(--font-ui-serif)}
.user-btn:hover,.user-btn[aria-expanded=true]{background:var(--df-hover)}
.user-btn img{width:24px;height:24px;border-radius:999px;object-fit:cover;display:block}
.user-btn .who{display:flex;gap:4px;align-items:baseline}
.user-btn .nm{color:var(--cds-text-secondary)}
.user-btn .pl{color:var(--cds-text-muted)}
.apps-btn{margin-left:auto;width:32px;height:32px}

/* ── Main ──────────────────────────────────── */
.main{flex:1;min-width:0;height:100vh;position:relative;background:var(--cds-surface-1);display:flex;flex-direction:column;font:400 14px/21px var(--cds-font-sans)}
.float-left{position:absolute;top:8px;left:8px;display:none;gap:4px;z-index:5}
.app.sb-hidden .float-left{display:flex}
.float-left .ghost{width:32px;height:32px}
.incog{position:absolute;top:8px;right:8px;width:32px;height:32px;color:var(--cds-text-primary);z-index:5}
.incog[aria-pressed=true]{background:var(--cds-fill-primary);color:var(--pernix-on-primary)}
.view-new{flex:1;display:flex;align-items:center;justify-content:center;padding:56px 24px 40px}
.col{width:100%;max-width:40rem;transform:translateY(-4px)}
.greet{display:flex;justify-content:center;align-items:center;margin:0 0 24px;font:360 clamp(1.5rem,1.15rem + 1vw,2rem)/1.2 var(--font-ui-serif);color:var(--cds-text-primary);text-align:center;padding-right:.57em;user-select:none;text-wrap:balance}
.spark{display:inline-block;width:.72em;height:.72em;margin-right:.45em;flex-shrink:0}
@supports (height:1cap){.spark{width:1cap;height:1cap}}
.spark svg{display:block;transform:scale(1.4);transition:transform .6s var(--df-ease-out)}
.greet:hover .spark svg{transform:scale(1.4) rotate(30deg)}
.thinking .spark svg,.spark.spin svg{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:scale(1.4) rotate(360deg)}}

.composer{background:var(--cds-surface-2);border-radius:var(--cds-radius-composer);padding:8px;position:relative;cursor:text;
  box-shadow:0 .25rem 1.25rem color-mix(in srgb,#000 3.5%,transparent),0 0 0 1px var(--cds-border);transition:box-shadow .2s}
.composer:hover{box-shadow:0 .25rem 1.25rem color-mix(in srgb,#000 5%,transparent),0 0 0 1px color-mix(in srgb,var(--pernix-ink) 15%,transparent)}
.composer:focus-within{box-shadow:0 .25rem 1.25rem color-mix(in srgb,#000 7.5%,transparent),0 0 0 1px var(--cds-border-strong)}
.editor-wrap{position:relative;padding-bottom:34px}
.editor{display:block;width:100%;min-height:53px;max-height:24rem;resize:none;border:0;outline:none;background:none;padding:5.5px 0 5.5px 8px;font:400 15px/21px var(--cds-font-sans);color:var(--cds-text-primary);overflow-y:auto}
.editor::placeholder{color:var(--cds-text-muted);opacity:1}
.editor:focus-visible{box-shadow:none}
.toolbar{position:absolute;left:0;right:0;bottom:0;height:32px;display:flex;align-items:center;gap:4px}
.toolbar .ghost{width:32px;height:32px;color:var(--cds-text-primary)}
.toolbar .ghost[aria-expanded=true]{background:var(--cds-fill-ghost-selected)}
.toolbar .right{margin-left:auto;display:flex;align-items:center;gap:4px}
.voice{display:flex;align-items:center;margin-right:5px}
.voice .split{width:auto;padding:0 4px;margin-left:-6px;color:var(--cds-text-muted)}
.chat-head .title-btn+.ghost{margin-left:-8px}
.send{width:32px;height:32px;border-radius:8px;background:var(--cds-fill-brand);color:var(--pernix-on-fill);display:none;align-items:center;justify-content:center;transition:background-color .12s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.send:hover{background:var(--cds-fill-brand-hover)}
.send:active{transform:scale(.94)}
.send:disabled{opacity:.4;cursor:default;background:var(--cds-fill-brand)}
.has-text .send{display:inline-flex}
.has-text .voice,.has-text .dictate{display:none}
.chips{display:flex;gap:6px;padding:0 0 6px 6px;flex-wrap:wrap}
.chips:empty{display:none}
.chip{height:24px;display:inline-flex;align-items:center;gap:4px;padding:0 6px 0 8px;border-radius:6px;background:color-mix(in srgb,var(--cds-fill-accent) 10%,transparent);color:var(--cds-text-accent);font:400 13px/1 var(--cds-font-sans)}
.chip button{color:inherit;display:inline-flex;border-radius:4px}
.chip button:hover{background:color-mix(in srgb,var(--cds-fill-accent) 15%,transparent)}

.below{display:flex;align-items:center;height:24px;margin-top:12px;padding:0 8px;font:400 13px/19px var(--font-ui-serif)}
.pill{height:24px;padding:0 8px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;color:var(--cds-text-secondary);white-space:nowrap}
.pill:hover,.pill[aria-expanded=true]{background:var(--cds-fill-ghost-hover);color:var(--cds-text-primary)}
.pill .ic{color:var(--cds-text-muted)}
.pill.model{color:var(--cds-text-primary)}
.pill .sub{color:var(--cds-text-muted)}
.below .right{margin-left:auto;display:flex;align-items:center;gap:2px}
.pill.effort{font-size:12px;color:var(--cds-text-muted);gap:4px}
.pill.effort:hover{color:var(--cds-text-secondary)}

/* ── Chat view ─────────────────────────────── */
.view-chat{flex:1;min-height:0;display:none;flex-direction:column}
.app.chatting .view-new{display:none}
.app.chatting .view-chat{display:flex}
.app.chatting .incog{display:none}
.chat-head{height:48px;flex-shrink:0;display:flex;align-items:center;padding:0 8px 0 16px;gap:4px}
.app.sb-hidden .chat-head{padding-left:84px}
.title-btn{height:28px;padding:0 8px;border-radius:7px;font:400 14px/20px var(--font-ui-serif);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.title-btn:hover{background:var(--cds-fill-ghost-hover)}
.chat-head .ghost{width:28px;height:28px;border-radius:7px;color:var(--cds-text-primary)}
.chat-head .spacer{flex:1}
.share{height:28px;padding:0 10px;border-radius:7px;font:400 14px/20px var(--font-ui-serif);box-shadow:inset 0 0 0 1px var(--cds-border);background:var(--cds-surface-2)}
.share:hover{background:var(--cds-surface-0)}
.thread{flex:1;min-height:0;overflow-y:auto;padding:24px 24px 32px}
.thread-inner{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.msg-user{align-self:flex-end;max-width:85%;background:var(--cds-bg-user-message);border-radius:12px;padding:12px 16px;font:400 15px/20px var(--cds-font-sans);white-space:pre-wrap;word-break:break-word}
.msg-ai{display:flex;flex-direction:column;gap:8px}
.msg-ai .status{font:400 14px/20px var(--cds-font-sans);color:var(--cds-text-muted);padding-left:4px}
.msg-ai .body{font:400 15px/22px var(--font-ui-serif);padding:0 56px 0 4px}
.msg-ai .body p{margin:0 0 12px}
.msg-ai .body p:last-child{margin:0}
.msg-ai .body .spark{width:22px;height:22px;margin:4px 0 0}
.actions{display:flex;gap:0;margin-left:-2px;opacity:0;transition:opacity .2s}
.msg-ai.done .actions{opacity:1}
.actions button{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--cds-text-secondary)}
.actions button:hover{background:var(--cds-fill-ghost-hover);color:var(--cds-text-primary)}
.actions button[aria-pressed=true]{color:var(--cds-text-primary);background:var(--cds-fill-ghost-selected)}
.chat-foot{flex-shrink:0;padding:0 24px 8px}
.chat-foot .composer,.chat-foot .below{max-width:48rem;margin-left:auto;margin-right:auto}
.chat-foot .editor{min-height:32px}
.chat-foot .editor-wrap{padding-bottom:0;padding-right:40px}
.chat-foot .toolbar{left:auto;width:32px;bottom:0}
.chat-foot .send{display:inline-flex}
.chat-foot .send:disabled{background:none;color:var(--cds-text-muted);opacity:1}
.chat-foot .below{margin-top:8px;height:32px}
.disclaimer{position:absolute;left:50%;transform:translateX(-50%);font:400 13px/17px var(--cds-font-sans);color:var(--cds-text-muted);white-space:nowrap}
.chat-foot .below{position:relative}

/* ── Popovers ──────────────────────────────── */
.menu{position:fixed;z-index:100;background:var(--cds-surface-popover);border-radius:12px;padding:4px;min-width:180px;
  box-shadow:0 0 0 1px var(--cds-border),0 8px 24px #0000001f,0 2px 6px #00000014;font:400 14px/20px var(--cds-font-sans);
  opacity:0;transform:scale(.97);transform-origin:var(--origin,top left);transition:opacity .12s,transform .2s var(--df-ease-out);pointer-events:none}
.menu.open{opacity:1;transform:none;pointer-events:auto}
.mi{width:100%;min-height:32px;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;text-align:left;color:var(--cds-text-primary)}
.mi:hover,.mi:focus-visible{background:var(--cds-fill-ghost-hover);box-shadow:none}
.mi .ic{color:var(--cds-text-primary)}
.mi .trail{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--cds-text-muted)}
.mi .trail .ic{color:var(--cds-text-muted)}
.mi .check{color:var(--cds-fill-accent)!important}
.mi .two{display:flex;flex-direction:column;gap:1px}
.mi .two small{font-size:13px;line-height:18px;color:var(--cds-text-muted)}
.mi.model-item{min-height:50px}
.mi kbd{border:0;min-width:0;height:auto;font:400 11px/1 var(--cds-font-mono);color:var(--cds-text-muted)}
.sep{height:1px;background:var(--cds-border);margin:4px 10px}
.menu .head{padding:8px 10px 2px;font-size:13px;color:var(--cds-text-muted)}
.warn-chip{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 6px;border-radius:5px;background:var(--cds-bg-neutral);font-size:12px;color:var(--cds-text-secondary)}
.warn-chip .ic{color:var(--cds-text-secondary)}

/* search palette */
.scrim{position:fixed;inset:0;background:var(--pernix-scrim-soft);z-index:90;display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
.scrim.open{display:flex}
.palette{width:min(640px,calc(100vw - 32px));background:var(--cds-surface-popover);border-radius:12px;box-shadow:0 0 0 1px var(--cds-border),var(--cds-shadow-popover);overflow:hidden;font-family:var(--cds-font-sans)}
.palette-in{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border-bottom:1px solid var(--cds-border);color:var(--cds-text-muted)}
.palette-in input{flex:1;border:0;outline:none;font:400 15px/21px var(--cds-font-sans);color:var(--cds-text-primary);background:none}
.palette-in input::placeholder{color:var(--cds-text-muted)}
.palette-in input:focus-visible{box-shadow:none}
.palette-list{max-height:min(420px,56vh);overflow-y:auto;padding:4px}
.palette-list .mi{color:var(--cds-text-secondary)}
.palette-list .mi.active{background:var(--cds-fill-ghost-hover);color:var(--cds-text-primary)}
.palette-empty{padding:20px;text-align:center;color:var(--cds-text-muted);font-size:14px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,8px);background:var(--cds-fill-primary);color:var(--pernix-on-primary);font:400 13px/18px var(--cds-font-sans);padding:8px 12px;border-radius:8px;opacity:0;transition:opacity .2s,transform .2s var(--df-ease-out);pointer-events:none;z-index:200}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sb-scrim{display:none}

/* ── Small screens: sidebar becomes a drawer ─ */
@media (max-width:767px){
  .sb{position:fixed;left:0;top:0;bottom:0;margin-left:calc(-1 * var(--df-sidebar-width));box-shadow:none}
  .app.sb-open .sb{margin-left:0;box-shadow:0 0 0 .5px #0000000f,0 16px 40px #00000014}
  .app.sb-open .sb-scrim{display:block;position:fixed;inset:0;background:var(--pernix-scrim-soft);z-index:15}
  .float-left,.app.sb-hidden .float-left{display:flex}
  .chat-head{padding-left:84px}
  .view-new{padding:56px 16px 16px;align-items:stretch}
  .col{transform:none;display:flex;flex-direction:column;justify-content:flex-end}
  .greet{flex:1;padding-right:0}
  .below .model .sub,.below .effort{display:none}
  .disclaimer{display:none}
  .thread{padding:16px}
  .chat-foot{padding:0 12px 8px}
  .msg-ai .body{padding-right:0}
}

/* ── Shared page scaffold (projects / artifacts / scheduled / customize / recents …) ── */
.page{flex:1;min-height:0;overflow-y:auto;padding:48px 8px 0;font:400 14px/20px var(--font-ui-serif)}
.page-in{padding:0 32px 64px}
.page-head{display:flex;align-items:flex-start;gap:12px;padding-top:8px;min-height:88px}
.page-head .titles{flex:1;min-width:0}
.page-title{margin:0;font:500 24px/32px var(--font-ui-serif);color:var(--cds-text-primary)}
.page-sub{margin:8px 0 0;font:400 14px/20px var(--font-ui-serif);color:var(--cds-text-muted)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:4px}
.head-actions .btn{margin-left:8px}
.toolbar-row{display:flex;align-items:center;gap:4px;height:32px;margin-top:-32px;margin-bottom:28px}
.toolbar-row .right{margin-left:auto;display:flex;align-items:center;gap:4px}
.icon-btn{width:32px;height:32px;color:var(--cds-text-primary)}
.icon-btn[aria-pressed=true]{background:var(--cds-fill-ghost-selected)}
.btn{height:32px;padding:0 12px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:500 14px/20px var(--font-ui-serif);white-space:nowrap;transition:background-color .12s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--cds-fill-primary);color:var(--pernix-on-primary)}
.btn-primary:hover{background:var(--pernix-primary-hover)}
.btn-primary:disabled{opacity:.4;cursor:default;transform:none}
.btn-secondary{background:var(--pernix-surface-faint);color:var(--cds-text-primary);font-weight:400;box-shadow:inset 0 0 0 1px var(--cds-border),0 1px 2px #0000000d}
.btn-secondary:hover{background:var(--cds-fill-ghost-hover)}
.btn-sm{height:28px;border-radius:7px;padding:0 10px}
.btn .ic{font-size:16px;font-weight:533.3}
.tabs{display:flex;align-items:center}
.tab{height:32px;padding:0 12px;border-radius:8px;font:500 14px/20px var(--font-ui-serif);color:var(--cds-text-muted)}
.tab:hover{color:var(--cds-text-secondary)}
.tab[aria-selected=true]{background:var(--cds-bg-neutral);color:var(--cds-text-primary)}
.vsep{width:1px;height:20px;background:var(--cds-border);margin:0 12px}
.seg{display:inline-flex;padding:1px;border-radius:8px;background:var(--pernix-seg-bg);height:32px}
.seg button{height:30px;padding:0 12px;border-radius:7px;font:400 14px/20px var(--cds-font-sans);color:var(--cds-text-secondary)}
.seg button:hover{color:var(--cds-text-primary)}
.seg button[aria-pressed=true]{background:var(--pernix-seg-active);color:var(--cds-text-primary);box-shadow:inset 0 0 0 1px var(--cds-border),0 1px 2px #0000000d}
.field{height:32px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:8px;background:var(--pernix-surface-translucent);box-shadow:inset 0 0 0 1px var(--cds-border);color:var(--cds-text-muted)}
.field:focus-within{box-shadow:inset 0 0 0 1px var(--cds-border-strong);background:var(--cds-surface-2)}
.field input{flex:1;min-width:0;border:0;outline:none;background:none;font:400 14px/20px var(--font-ui-serif);color:var(--cds-text-primary)}
.field input::placeholder{color:var(--cds-text-muted)}
.field input:focus-visible{box-shadow:none}
.section-label{font:500 12px/17px var(--font-ui-serif);color:var(--cds-text-muted)}
.beta{display:inline-flex;align-items:center;height:16px;padding:0 4px;border-radius:4px;background:var(--cds-bg-neutral);font:500 10px/12px var(--cds-font-sans);color:var(--cds-text-secondary)}
.card{border-radius:12px;background:var(--cds-surface-1);box-shadow:inset 0 0 0 1px var(--cds-border);transition:background-color .12s,box-shadow .12s}
.card:hover{background:var(--cds-surface-2);box-shadow:inset 0 0 0 1px var(--cds-border-strong)}
.hover-reveal{opacity:0;transition:opacity .12s}
.card:hover .hover-reveal,.lrow:hover .hover-reveal,.hover-reveal[aria-expanded=true],.hover-reveal:focus-visible{opacity:1}
.empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 0;color:var(--cds-text-muted);text-align:center}

/* modal dialog */
.dlg-scrim{position:fixed;inset:0;z-index:95;background:var(--pernix-scrim);display:none;align-items:center;justify-content:center;padding:24px}
.dlg-scrim.open{display:flex;animation:fade .15s}
.dlg{width:min(520px,100%);max-height:calc(100vh - 48px);overflow-y:auto;background:var(--cds-surface-2);border-radius:16px;padding:24px;box-shadow:0 0 0 1px var(--cds-border),0 16px 40px #00000024;font:400 14px/20px var(--font-ui-serif);animation:pop .2s var(--df-ease-out)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dlg-head h2{margin:0;font:580 22px/28px var(--font-ui-serif)}
.dlg-head .ghost{width:32px;height:32px;color:var(--cds-text-primary)}
.dlg label.lbl{display:block;margin:0 0 12px;font:500 14px/14px var(--font-ui-serif);color:var(--cds-text-primary)}
.dlg label.lbl small{color:var(--cds-text-muted);font-size:13px;margin-left:4px}
.dlg .req{color:var(--pernix-danger);margin-left:2px}
.input,.textarea,.select{width:100%;border:0;outline:none;border-radius:8px;background:var(--pernix-surface-translucent);box-shadow:inset 0 0 0 1px var(--cds-border);font:400 14px/20px var(--font-ui-serif);color:var(--cds-text-primary);padding:9px 12px}
.input:focus,.textarea:focus,.focus-ring:focus-within{background:var(--cds-surface-2);box-shadow:inset 0 0 0 1px var(--cds-surface-2),0 0 0 1px var(--cds-fill-accent),0 0 6px 1px var(--pernix-info-bg)}
.input::placeholder,.textarea::placeholder{color:var(--cds-text-muted)}
.textarea{resize:vertical;min-height:80px}
.select{appearance:none;cursor:pointer;padding-right:32px;background:var(--cds-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23898781' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center}
.dlg-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.97)}}

/* switch */
.switch{position:relative;width:36px;height:20px;border-radius:999px;background:var(--cds-fill-control-hover,hsl(from var(--pernix-ink) h s l / 20%));flex-shrink:0;transition:background-color .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--pernix-on-fill);box-shadow:0 1px 2px #00000033;transition:transform .2s var(--df-ease-out)}
.switch[aria-checked=true]{background:var(--cds-fill-accent)}
.switch[aria-checked=true]::after{transform:translateX(16px)}
.dot{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cds-text-muted) 70%,transparent)}
a.logo{display:inline-block}
.sb .apps-btn{display:inline-flex}