/* ==========================================================================
   Aside desktop UI reconstruction — shared structural CSS
   Tokens mirror the reference stylesheet (globals-*.css, Tailwind v4 + shadcn).
   Design languages override the variables in theme-*.css.
   ========================================================================== */
@font-face { font-family: "Geist Variable"; font-weight: 100 900; font-display: swap; src: url(fonts/geist-latin.woff2) format("woff2-variations"); }
@font-face { font-family: "Geist Mono Variable"; font-weight: 100 900; font-display: swap; src: url(fonts/geist-mono.ttf) format("truetype"); }
@font-face { font-family: "Aside Display"; font-weight: 100 900; font-display: swap; src: url(fonts/aside-display.woff2) format("woff2-variations"); }

:root {
  --font-sans: "Geist Variable", "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Aside Display", var(--font-sans);
  --sky-400: oklch(74.6% .16 232.661); --sky-500: oklch(68.5% .169 237.323); --sky-600: oklch(58.8% .158 241.966);
  --emerald-400: oklch(76.5% .177 163.223); --emerald-500: oklch(69.6% .17 162.48);
  --red-400: oklch(70.4% .191 22.216); --red-600: oklch(57.7% .245 27.325); --red-50: oklch(97.1% .013 17.38);
  --green-500: oklch(72.3% .219 149.579); --rose-500: oklch(64.5% .246 16.439); --amber-400: oklch(82.8% .189 84.429); --amber-500: oklch(76.9% .188 70.08);
  --neutral-100: oklch(97% 0 0); --neutral-800: oklch(26.9% 0 0); --neutral-900: oklch(20.5% 0 0); --neutral-950: oklch(14.5% 0 0);
  /* light theme (reference :root) */
  --background: #fff; --foreground: var(--neutral-950);
  --popover: var(--background); --popover-foreground: var(--foreground);
  --primary: oklch(14.5% 0 0/.95); --primary-foreground: oklch(98.5% 0 0/.95);
  --secondary: oklch(14.5% 0 0/.08); --secondary-foreground: oklch(14.5% 0 0/.55);
  --muted: oklch(14.5% 0 0/.05); --muted-foreground: oklch(14.5% 0 0/.55);
  --accent: oklch(14.5% 0 0/.1); --accent-foreground: oklch(14.5% 0 0/.85);
  --destructive: var(--red-600); --destructive-foreground: var(--red-50);
  --brand: var(--sky-500); --brand-content: var(--sky-600); --success: var(--emerald-500);
  --border: oklch(14.5% 0 0/.1); --border-surface: oklch(14.5% 0 0/.1); --border-surface-strong: oklch(14.5% 0 0/.15);
  --input: oklch(14.5% 0 0/.1); --ring: oklch(14.5% 0 0/.08); --hairline: .5px;
  --surface-primary: oklch(100% 0 0); --surface-secondary: oklch(100% 0 0/.85); --surface-tertiary: oklch(100% 0 0/.55);
  --surface-primary-foreground: oklch(14.5% 0 0/.85); --surface-secondary-foreground: oklch(14.5% 0 0/.55); --surface-tertiary-foreground: oklch(14.5% 0 0/.25);
  --sidebar: oklch(98.5% 0 0);
  --radius: .625rem; --squircle: 1;
  --r-sm: .375rem; --r-md: .5rem; --r-lg: .75rem; --r-xl: 1rem; --r-2xl: 1.25rem; --r-3xl: 2.1rem; --r-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);
  --ring-surface: 0 0 0 .5px var(--border-surface-strong);
  --overlay-bg: var(--popover); --overlay-blur: 0px; --overlay-ring: inset 0 0 0 1px rgba(255,255,255,.8), 0 0 0 .5px oklch(14.5% 0 0/.2);
  --menu-item-radius: var(--r-md); --menu-radius: var(--r-xl);
  --composer-radius: 20px; --composer-bg: var(--surface-primary); --composer-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.05);
  --bubble-bg: var(--secondary); --bubble-fg: var(--foreground); --bubble-radius: var(--r-lg);
  --card-bg: var(--surface-secondary); --card-radius: var(--r-lg); --card-shadow: var(--shadow-md);
  --send-bg: var(--primary); --send-fg: var(--primary-foreground);
  --ease-out: cubic-bezier(0,0,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 100ms; --dur: 150ms; --dur-slow: 200ms;
  --header-h: 40px; --backdrop: oklch(0 0 0/.15); --backdrop-blur: 4px;
  --focus-ring: 0 0 0 3px var(--ring);
  color-scheme: light;
}
.dark {
  --background: var(--neutral-900); --foreground: oklch(98.5% 0 0);
  --popover: var(--neutral-800); --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0/.85); --primary-foreground: oklch(14.5% 0 0/.85);
  --secondary: oklch(98.5% 0 0/.08); --secondary-foreground: oklch(98.5% 0 0/.55);
  --muted: oklch(98.5% 0 0/.15); --muted-foreground: oklch(98.5% 0 0/.55);
  --accent: oklch(98.5% 0 0/.1); --accent-foreground: oklch(98.5% 0 0/.85);
  --destructive: var(--red-400); --brand: var(--sky-400); --brand-content: var(--sky-400); --success: var(--emerald-400);
  --border: oklch(98.5% 0 0/.1); --border-surface: oklch(98.5% 0 0/.15); --border-surface-strong: oklch(98.5% 0 0/.2);
  --input: oklch(98.5% 0 0/.1); --ring: oklch(98.5% 0 0/.08);
  --surface-primary: oklch(98.5% 0 0/.08); --surface-secondary: oklch(98.5% 0 0/.06); --surface-tertiary: oklch(98.5% 0 0/.04);
  --surface-primary-foreground: oklch(98.5% 0 0/.85); --surface-secondary-foreground: oklch(98.5% 0 0/.55); --surface-tertiary-foreground: oklch(98.5% 0 0/.25);
  --sidebar: oklch(22% 0 0);
  --overlay-ring: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 .5px oklch(0 0 0/.5);
  --backdrop: oklch(0 0 0/.4);
  color-scheme: dark;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font-sans); font-size: 14px; line-height: 1.4286; color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; background: none; }
button { cursor: default; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: oklch(50% 0 0/.25); border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.icon.sm { width: 14px; height: 14px; } .icon.xs { width: 12px; height: 12px; } .icon.lg { width: 18px; height: 18px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--muted-foreground); }
.mono { font-family: var(--font-mono); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- app shell: full viewport, masthead, docked side panel, overlays --------- */
#app { position: absolute; inset: 0; overflow: hidden; display: flex; }
#app .page { flex: 1; min-width: 0; position: relative; background: var(--background); overflow: hidden; }
#app .sp-col { flex: 0 0 var(--sp-width, 420px); width: var(--sp-width, 420px); min-width: 0; border-left: 1px solid var(--border); background: var(--background); display: flex; flex-direction: column; animation: sp-in 200ms var(--ease-out); }
@keyframes sp-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.masthead { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; flex-shrink: 0; }
.masthead .brand { display: inline-flex; align-items: center; color: var(--muted-foreground); }
.masthead .brand .icon { width: 24px; height: 24px; }
.masthead .grow { flex: 1; }
.topnav { display: inline-flex; align-items: center; gap: 2px; }
.topnav a { height: 32px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--r-md); font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.topnav a:hover { background: var(--secondary); color: var(--foreground); }
.topnav a[aria-current="page"] { color: var(--foreground); background: var(--secondary); }
.profile { display: inline-flex; align-items: center; }
.avatar-btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 4px 0 0; border-radius: 22px; color: var(--muted-foreground); }
.avatar-btn:hover, .avatar-btn[aria-expanded="true"] { background: var(--secondary); }
.avatar-btn .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #7dd3fc, #0369a1 60%, #dbeafe); box-shadow: var(--ring-surface); display: block; }
.newtab .masthead { position: absolute; top: 0; right: 0; left: 0; z-index: 2; justify-content: flex-end; height: 76px; padding: 0 24px; }
.newtab .masthead .avatar-btn .av { width: 44px; height: 44px; }
.newtab .masthead .avatar-btn { height: 52px; border-radius: 28px; }
.chat-head .profile { margin-left: 4px; }
.chat-head .avatar-btn { height: 32px; } .chat-head .avatar-btn .av { width: 26px; height: 26px; }
.settings .snav-top { display: flex; align-items: center; gap: 8px; height: 48px; margin: 0 0 8px; }
.settings .snav-top .topnav a { font-size: 13px; height: 28px; padding: 0 8px; }
.settings .snav-top .avatar-btn { height: 32px; } .settings .snav-top .avatar-btn .av { width: 26px; height: 26px; }
.overlay-box { position: fixed; z-index: 4200; left: 50%; transform: translateX(-50%); background: var(--overlay-bg); box-shadow: var(--overlay-ring), var(--shadow-2xl); animation: dialog-in var(--dur-fast) var(--ease-out); }
.overlay-box.tabsearch-box { top: 80px; width: min(640px, calc(100% - 32px)); max-height: 70vh; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transform: translateX(-50%); animation: menu-in var(--dur-fast) var(--ease-out); }
.overlay-box.mini-box { top: 120px; width: min(640px, calc(100% - 32px)); border-radius: 16px; overflow: visible; animation: menu-in var(--dur-fast) var(--ease-out); }
#app .backdrop { z-index: 4100; }
.crumb-link { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px; border-radius: var(--r-md); color: var(--muted-foreground); font-weight: 500; }
.crumb-link:hover { background: var(--secondary); color: var(--foreground); }
.chat-head .crumb .icon.sm { color: var(--muted-foreground); }
/* projects */
.projects-page { height: 100%; overflow-y: auto; display: flex; flex-direction: column; }
.projects-page .pbody { width: min(820px, calc(100% - 48px)); margin: 0 auto; padding: 40px 0 96px; }
.projects-page .pbody > header h1 { margin: 0 0 40px; font-family: var(--font-display); font-size: 34px; font-weight: 500; }
.projects-page .sec-h { margin: 32px 0 12px; font-size: 18px; font-weight: 500; color: var(--muted-foreground); }
.plist { border-radius: var(--r-xl); background: var(--surface-primary); box-shadow: var(--ring-surface); overflow: hidden; }
.prow { display: flex; align-items: center; gap: 12px; padding: 14px 20px; min-height: 60px; }
.prow + .prow { border-top: 1px solid var(--border); }
.prow .pl { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.prow h4 { margin: 0; font-size: 17px; font-weight: 500; }
.prow.create { width: 100%; text-align: left; color: var(--foreground); }
.prow.create:hover, .prow:hover { background: var(--secondary); }
.prow .l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pchat { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--r-md); }
.pchat + .pchat { border-top: 1px solid var(--border); }
.pchat:hover { background: var(--secondary); }
.pchat .l { display: flex; align-items: baseline; gap: 12px; }
.pchat .t { flex: 1; min-width: 0; font-weight: 500; color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchat .d { font-size: 12px; color: var(--muted-foreground); flex-shrink: 0; }
.pchat .p { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pempty { text-align: center; padding: 64px 24px; }
.pempty h2 { margin: 0 0 8px; font-size: 22px; font-weight: 500; }
.pempty p { margin: 0 0 20px; color: var(--muted-foreground); font-size: 15px; max-width: 420px; margin-left: auto; margin-right: auto; }
.pempty.small { padding: 96px 24px; color: var(--muted-foreground); font-size: 15px; }
.pempty.small .icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--secondary); color: var(--foreground); margin: 0 auto 12px; }
.pempty.small b { display: block; color: var(--foreground); font-weight: 600; margin-bottom: 4px; }
.pcrumb { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--muted-foreground); }
.pcrumb a:hover { color: var(--foreground); }
.pcrumb .crumb-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; border-radius: var(--r-md); color: var(--foreground); font-weight: 500; }
.pcrumb .crumb-btn:hover, .pcrumb .crumb-btn[aria-expanded="true"] { background: var(--secondary); }
.ptitle { display: flex; align-items: center; gap: 12px; margin: 24px 0 24px; }
.ptitle .ipick-trigger { width: 44px; height: 44px; }
.pname { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--font-display); font-size: 30px; font-weight: 500; }
.projects-page .big-composer { margin-bottom: 24px; }
.projects-page .big-composer .composer { margin: 0; }
.projects-page .seg { margin: 24px 0 24px; }
.projects-page .seg button { height: 32px; font-size: 16px; }
.archived-note { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: var(--r-xl); background: var(--secondary); font-size: 15px; margin-bottom: 24px; }
.pcard { padding: 16px 20px; margin-bottom: 16px; }
.pcard header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pcard h2 { margin: 0; font-size: 17px; font-weight: 600; }
.pcard .grow { flex: 1; }
.pcard .dirbtn { font-size: 14px; color: var(--muted-foreground); display: inline-flex; gap: 6px; align-items: center; border-radius: var(--r-sm); padding: 2px 6px; }
.pcard .dirbtn:hover { background: var(--secondary); }
.pcard .files { display: flex; flex-wrap: wrap; gap: 16px; }
.pcard .file { width: 88px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; text-align: center; }
.pcard .file .th { width: 52px; height: 64px; border-radius: 6px; background: #fff; box-shadow: var(--ring-surface), var(--shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.pform { display: grid; gap: 20px; padding: 8px 0; }
.pform .fld { display: grid; gap: 8px; }
.pform label { font-size: 14px; font-weight: 500; }
.pform .row-in { display: flex; align-items: center; gap: 8px; }
.pform .ipick-trigger { width: 32px; height: 32px; border-radius: var(--r-lg); box-shadow: var(--ring-surface); background: var(--surface-primary); }
.pform .dir-group { display: flex; align-items: stretch; }
.pform .dir { flex: 1; min-width: 0; display: flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--input); border-right: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); font-size: 13px; color: var(--muted-foreground); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pform .dir-group .icon-btn { width: 36px; height: 32px; border: 1px solid var(--input); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.menu.picker { width: 330px; padding: 8px; }
.ipick .colors { display: flex; gap: 6px; overflow-x: auto; padding: 4px 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.ipick .dot { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px transparent; transition: box-shadow var(--dur); }
.ipick .dot.sel { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--c); }
.ipick .icons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.ipick .ib { height: 36px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; }
.ipick .ib .icon { width: 20px; height: 20px; color: #5c5c5c; }
.dark .ipick .ib .icon { color: #bdbdbd; }
.ipick .ib:hover { background: var(--secondary); }
.ipick .ib.sel { background: var(--accent); }
.editor.agents { min-height: 160px; max-height: 360px; overflow-y: auto; outline: none; white-space: pre-wrap; font-size: 15px; line-height: 1.5; }
.editor.agents:empty::before { content: attr(data-placeholder); color: var(--muted-foreground); }

/* --- buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: var(--r-md); font-weight: 500; font-size: 14px; white-space: nowrap; transition: background-color var(--dur), color var(--dur), opacity var(--dur), transform var(--dur), box-shadow var(--dur); user-select: none; will-change: transform; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn.ghost { color: var(--muted-foreground); }
.btn.ghost:hover { background: var(--secondary); color: var(--foreground); }
.btn.icon-btn { width: 28px; height: 28px; border-radius: var(--r-md); color: var(--muted-foreground); }
.btn.icon-btn:hover { background: var(--secondary); color: var(--foreground); }
.btn.icon-btn.sm { width: 24px; height: 24px; }
.btn.primary { background: var(--primary); color: var(--primary-foreground); height: 32px; padding: 0 12px; border-radius: var(--r-lg); }
.btn.primary:hover { opacity: .9; }
.btn.secondary { background: var(--secondary); color: var(--accent-foreground); height: 32px; padding: 0 12px; border-radius: var(--r-lg); }
.btn.secondary:hover { background: var(--accent); }
.btn.outline { background: var(--surface-primary); box-shadow: var(--ring-surface), var(--shadow-xs); height: 32px; padding: 0 12px; border-radius: var(--r-lg); }
.btn.outline:hover { background: var(--surface-tertiary); }
.btn.pill { height: 28px; padding: 0 10px; font-size: 12.8px; border-radius: 11.2px; }
.btn.pill.secondary { background: var(--secondary); color: oklch(14.5% 0 0/.85); }
.dark .btn.pill.secondary { color: var(--accent-foreground); }
.btn.pill.primary { background: var(--primary); color: var(--primary-foreground); }
.btn.link { color: var(--muted-foreground); font-weight: 500; }
.btn.link:hover { color: var(--foreground); }
.btn.destructive { background: var(--destructive); color: var(--destructive-foreground); height: 32px; padding: 0 12px; border-radius: var(--r-lg); }

/* --- badges & switches ------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 2px 6px; border-radius: var(--r-full); background: var(--secondary); color: var(--foreground); font-size: 11px; font-weight: 500; white-space: nowrap; line-height: 1; }
.badge.ghost { background: transparent; color: var(--muted-foreground); height: 20px; padding: 2px 8px; font-size: 12px; }
.badge.running { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.badge.waiting { background: color-mix(in oklab, var(--amber-400) 10%, transparent); color: var(--amber-500); }
.badge.error { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }
.switch { position: relative; display: inline-flex; width: 40px; height: 20px; border-radius: var(--r-full); background: color-mix(in oklab, var(--muted) 55%, transparent); box-shadow: inset 0 0 0 1px var(--border); transition: background-color var(--dur-slow); cursor: pointer; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-slow) var(--ease-out); }
.switch[aria-checked="true"] { background: var(--emerald-500); box-shadow: none; }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.dot-unread { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-left: 6px; }

/* --- overlays: menu / dialog / tooltip / toast ---------------------------------- */
#overlays { position: fixed; inset: 0; pointer-events: none; z-index: 4000; }
#overlays > * { pointer-events: auto; }
.menu { position: fixed; z-index: 50; min-width: 96px; background: color-mix(in oklab, var(--overlay-bg) 80%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: var(--menu-radius); padding: 6px; box-shadow: var(--overlay-ring), var(--shadow-lg); animation: menu-in var(--dur-fast) var(--ease-out); transform-origin: var(--origin, top left); outline: none; }
.menu.closing { animation: menu-out var(--dur-fast) var(--ease-out) forwards; }
@keyframes menu-in { from { opacity: 0; transform: scale(.95) translateY(var(--slide, -8px)); } to { opacity: 1; transform: none; } }
@keyframes menu-out { to { opacity: 0; transform: scale(.95); } }
.menu .m-label { padding: 4px 10px; font-size: 12px; font-weight: 500; letter-spacing: .025em; color: var(--muted-foreground); user-select: none; }
.menu .m-sep { height: var(--hairline); background: var(--border); margin: 4px -4px; }
.menu .m-item { position: relative; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px; border-radius: var(--menu-item-radius); font-size: 14px; color: var(--accent-foreground); user-select: none; cursor: default; outline: none; }
.menu .m-item.sm { min-height: 28px; }
.menu .m-item .icon { color: var(--muted-foreground); }
.menu .m-item:hover, .menu .m-item.hl, .menu .m-item:focus-visible { background: var(--accent); color: var(--accent-foreground); box-shadow: none; }
.menu .m-item:hover .icon, .menu .m-item.hl .icon { color: var(--accent-foreground); }
.menu .m-item[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.menu .m-item.destructive { color: var(--destructive); }
.menu .m-item.destructive .icon { color: var(--destructive); }
.menu .m-item.destructive:hover { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }
.menu .m-item .grow { flex: 1; min-width: 0; }
.menu .m-item .ind { position: absolute; right: 8px; display: flex; align-items: center; color: var(--foreground); }
.menu .m-item.radio, .menu .m-item.check { padding-right: 28px; }
.menu .m-item .sub-arrow { margin-left: auto; margin-right: -4px; color: var(--muted-foreground); }
.menu .m-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; color: var(--muted-foreground); }
.menu .m-search input { flex: 1; min-width: 0; height: 32px; border: 0; outline: none; background: transparent; color: var(--foreground); }
.menu .m-search input::placeholder { color: var(--muted-foreground); }
.menu .m-scroll { max-height: 288px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.menu .m-empty { padding: 8px 10px; font-size: 14px; color: var(--muted-foreground); }
.menu.task-list { width: 288px; }
.menu .task-row { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border-radius: var(--r-lg); font-size: 14px; font-weight: 500; }
.menu .task-row:hover, .menu .task-row.hl { background: var(--secondary); }
.menu .task-row .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primary); }
.menu .task-row .title.untitled { color: var(--muted-foreground); }
.menu .task-row .badge.ghost { color: var(--muted-foreground); padding: 0 2px; }
.backdrop { position: fixed; inset: 0; background: var(--backdrop); backdrop-filter: blur(var(--backdrop-blur)); -webkit-backdrop-filter: blur(var(--backdrop-blur)); animation: fade-in var(--dur-fast) var(--ease-out); }
.backdrop.closing { animation: fade-out var(--dur-fast) forwards; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
.dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 448px; background: var(--overlay-bg); border-radius: var(--r-3xl); padding: 20px 24px; box-shadow: var(--overlay-ring), var(--shadow-2xl); animation: dialog-in var(--dur-fast) var(--ease-out); display: grid; gap: 16px; font-size: 14px; outline: none; }
.dialog.alert { max-width: 384px; padding: 16px 20px; gap: 12px; }
.dialog.closing { animation: dialog-out var(--dur-fast) forwards; }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dialog-out { to { opacity: 0; transform: translate(-50%, -50%) scale(.95); } }
.dialog h2 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.375; font-weight: 500; }
.dialog .desc { color: var(--muted-foreground); font-size: 14px; margin: 2px 0 0; }
.dialog .d-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.dialog .d-close:hover { color: var(--foreground); }
.dialog .d-footer { display: flex; justify-content: flex-end; gap: 4px; margin: 0 -20px -20px; padding: 16px; border-radius: 0 0 var(--r-3xl) var(--r-3xl); }
.dialog.alert .d-footer { margin: 0 -20px -16px; }
.dialog .d-footer .btn { min-width: 64px; }
.dialog.fullscreen { max-width: none; inset: 0; transform: none; width: auto; border-radius: 0; padding: 0; animation: fade-in var(--dur-fast); display: flex; flex-direction: column; background: var(--background); }
.input { height: 32px; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--input); border-radius: var(--r-lg); background: transparent; outline: none; transition: border-color var(--dur), box-shadow var(--dur); }
.input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring); }
.input::placeholder { color: var(--muted-foreground); }
textarea.input { min-height: 64px; height: auto; padding: 8px 10px; resize: vertical; field-sizing: content; }
.tooltip { position: fixed; z-index: 60; background: var(--overlay-bg); color: var(--accent-foreground); font-size: 12px; padding: 4px 10px; border-radius: 8.4px; box-shadow: var(--overlay-ring), var(--shadow-md); max-width: 260px; animation: menu-in var(--dur-fast) var(--ease-out); pointer-events: none; white-space: normal; }
.tooltip.closing { animation: menu-out var(--dur-fast) forwards; }
#toaster { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 4500; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 8px 20px; border-radius: 24px; background: var(--surface-primary); color: var(--foreground); font-family: var(--font-display); font-size: 14px; box-shadow: var(--ring-surface), var(--shadow-xl); backdrop-filter: blur(16px); animation: toast-in 250ms var(--ease-out); pointer-events: auto; }
.toast .icon { color: var(--success); }
.toast.leaving { animation: toast-out 200ms var(--ease-out) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }
.lightbox-bd { position: fixed; inset: 0; z-index: 1000; background: color-mix(in oklab, var(--background) 50%, transparent); cursor: zoom-out; animation: fade-in var(--dur); }
.lightbox { position: fixed; z-index: 1001; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: zoom-out; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: dialog-in 200ms var(--ease-out); }
.lightbox img { max-width: calc(100vw - 96px); max-height: calc(100vh - 140px); background: var(--background); box-shadow: var(--shadow-2xl); object-fit: contain; border-radius: 4px; }

/* --- side panel / chat surface ---------------------------------------------- */
.sp { display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; position: relative; }
.sp-header { display: flex; align-items: center; gap: 8px; height: var(--header-h); padding: 2px 8px 0 8px; flex-shrink: 0; }
.sp-header .title-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: var(--r-md); max-width: 240px; min-width: 0; font-size: 14px; font-weight: 500; }
.sp-header .title-btn:hover, .sp-header .title-btn[aria-expanded="true"] { background: var(--secondary); }
.sp-header .title-btn .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); }
.sp-header .title-btn .t.muted { color: var(--muted-foreground); }
.sp-header .title-btn .icon { color: var(--muted-foreground); width: 14px; height: 14px; }
.sp-header .grow { flex: 1; min-width: 0; }
.sp-header .icon-btn .icon { width: 14px; height: 14px; }
.sp-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.empty-state { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; }
.empty-state .logo { width: 64px; height: 64px; }
.empty-state .logo svg { width: 64px; height: 64px; }
.scroller { flex: 1; min-height: 0; overflow-y: auto; margin-right: 4px; mask-image: linear-gradient(to top, rgba(0,0,0,0), #000 16px, #000 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 16px, #000 100%); mask-composite: intersect; -webkit-mask-composite: source-in; }
.transcript { padding: 16px; min-width: 0; }
.fab-wrap { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 20; display: flex; justify-content: center; pointer-events: none; }
.fab { pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-primary); color: var(--surface-primary-foreground); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--ring-surface), var(--shadow-lg); backdrop-filter: blur(12px); animation: menu-in var(--dur); }
.date-sep { display: flex; justify-content: center; padding: 16px 0; font-size: 12px; color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); letter-spacing: .01em; user-select: none; }
.date-sep b { font-weight: 500; margin-right: 4px; }
.msg { position: relative; width: 100%; padding-bottom: 8px; }
.msg.user { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; max-width: calc(100% - 40px); }
.msg.user .attachments { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: -4px; }
.att-card { display: flex; align-items: center; gap: 8px; height: 44px; width: 180px; padding: 6px; border-radius: var(--r-lg); background: var(--surface-primary); box-shadow: var(--ring-surface), var(--shadow-md); backdrop-filter: blur(12px); user-select: none; transition: background-color var(--dur-slow); }
.att-card:hover { background: var(--surface-tertiary); }
.att-card .av { width: 32px; height: 32px; border-radius: var(--r-sm); background: color-mix(in oklab, var(--background) 40%, transparent); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.att-card .av .icon { width: 20px; height: 20px; }
.att-card .meta { min-width: 0; flex: 1; padding-right: 12px; font-size: 12px; line-height: 1; font-weight: 500; display: flex; flex-direction: column; gap: 4px; }
.att-card .meta p { margin: 0; }
.att-card .meta .n { color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-card .meta .k { color: var(--muted-foreground); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble { display: flex; flex-direction: column; gap: 8px; width: fit-content; max-width: 100%; min-width: 0; padding: 6px 12px; border-radius: var(--bubble-radius); background: var(--bubble-bg); color: var(--bubble-fg); font-size: 14px; overflow: hidden; }
.bubble .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .txt.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 20; overflow: hidden; }
.bubble .showmore { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; margin-left: -6px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.bubble .showmore:hover { background: var(--accent); color: var(--foreground); }
.bubble .showmore .icon { transition: transform var(--dur-slow); }
.bubble .showmore[aria-expanded="true"] .icon { transform: rotate(180deg); }
.msg-actions { display: flex; align-items: center; gap: 0; min-height: 24px; opacity: 0; transition: opacity var(--dur); }
.msg.user .msg-actions { justify-content: flex-end; margin-right: -2px; }
.msg.assistant .msg-actions { margin-left: -2px; gap: 6px; }
.msg:hover .msg-actions, .msg-actions.visible, .msg-actions:focus-within { opacity: 1; }
.msg-actions .ts { font-size: 13px; font-weight: 500; color: var(--muted-foreground); user-select: none; }
.msg.user .msg-actions .ts { margin-right: 4px; }
.msg-actions .icon-btn { width: 24px; height: 24px; }
.msg-actions .icon-btn .icon { width: 16px; height: 16px; }
.msg.assistant { display: flex; flex-direction: column; gap: 8px; }
.edit-box { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.edit-box .editor { min-height: 80px; max-height: 320px; overflow-y: auto; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-primary); outline: none; white-space: pre-wrap; font-size: 14px; }
.edit-box .row { display: flex; justify-content: flex-end; gap: 4px; }

/* markdown */
.md { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; min-width: 0; }
.md > * + * { margin-top: 16px; }
.md p { margin: 0; }
.md h1, .md h2, .md h3 { margin: 0; font-weight: 600; line-height: 1.25; }
.md h1 { font-size: 28px; } .md h2 { font-size: 24px; } .md h3 { font-size: 18px; }
.md strong { font-weight: 600; }
.md code.inline { font-family: var(--font-mono); font-size: 13px; background: var(--muted); padding: 2px 6px; border-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.md ul, .md ol { margin: 0; padding-left: 24px; }
.md li { padding: 4px 0; }
.md ul { list-style: disc; } .md ol { list-style: decimal; }
.md a { color: var(--brand-content); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--brand) 20%, transparent); text-underline-offset: 2px; }
.md .imgs { display: flex; flex-wrap: wrap; gap: 8px; }
.md img.thumb, .step-img { display: block; max-height: 384px; max-width: 100%; border-radius: var(--r-lg); box-shadow: var(--ring-surface), var(--shadow-sm); cursor: zoom-in; object-fit: contain; background: var(--background); transition: box-shadow var(--dur-slow); }
.md img.thumb { width: 300px; margin: 8px 0; }
.md img.thumb:hover, .step-img:hover { box-shadow: var(--ring-surface), var(--shadow-lg); }
.step-img { width: 160px; height: 160px; object-fit: cover; margin: 8px 0; }
.tbl-wrap { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--sidebar); margin: 16px 0; }
.tbl-wrap .tbl-tools { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.tbl-wrap .tbl-tools .relative { position: relative; }
.tbl-tools button, .code-actions button { padding: 4px; color: var(--muted-foreground); border-radius: 4px; cursor: pointer; transition: color var(--dur), background-color var(--dur); display: inline-flex; }
.tbl-tools button:hover, .code-actions button:hover { color: var(--foreground); }
.tbl-tools button .icon { width: 14px; height: 14px; }
.mini-menu { position: absolute; top: 100%; right: 0; z-index: 20; margin-top: 4px; min-width: 120px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--background); box-shadow: var(--shadow-lg); }
.mini-menu button { display: block; width: 100%; padding: 8px 12px; text-align: left; font-size: 14px; color: var(--foreground); border-radius: 0; }
.mini-menu button:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.tbl-scroll { overflow: auto; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--background); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; padding: 8px 16px; font-weight: 600; white-space: nowrap; background: color-mix(in oklab, var(--muted) 80%, transparent); }
table.tbl td { padding: 8px 16px; border-top: 1px solid var(--border); vertical-align: top; overflow-wrap: normal; }
table.tbl.plain { border: 1px solid var(--border); }
.code-block { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--sidebar); margin: 16px 0; }
.code-block .code-head { display: flex; align-items: center; height: 32px; font-size: 12px; color: var(--muted-foreground); font-family: var(--font-mono); text-transform: lowercase; padding-left: 4px; }
.code-block .code-actions-wrap { position: sticky; top: 8px; z-index: 10; margin-top: -40px; height: 32px; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.code-block .code-actions { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--sidebar); border-radius: var(--r-sm); background: color-mix(in oklab, var(--sidebar) 70%, transparent); backdrop-filter: blur(8px); }
.code-block .code-body { max-height: 400px; overflow: auto; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--background); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; }
.code-block .code-body .ln { display: block; white-space: pre; counter-increment: line; }
.code-block .code-body .ln::before { content: counter(line); display: inline-block; width: 24px; margin-right: 16px; text-align: right; color: color-mix(in oklab, var(--muted-foreground) 50%, transparent); font-size: 13px; }
.code-block .code-body code { counter-reset: line; display: block; }

/* worked-for / process items */
.run-fold { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding-bottom: 8px; font-size: 14px; color: var(--muted-foreground); transition: color var(--dur); user-select: none; }
.run-fold:hover { color: var(--foreground); }
.run-fold .icon { transition: transform var(--dur-slow); }
.run-fold[aria-expanded="true"] .icon { transform: rotate(90deg); }
.collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.collapsible[data-open="true"] { grid-template-rows: 1fr; }
.collapsible > .cc { min-height: 0; overflow: hidden; }
.collapsible > .cc > .cc-in { padding: 0 0 8px; margin: 0; opacity: 0; transition: opacity var(--dur-slow), padding-top var(--dur-slow); }
.collapsible[data-open="true"] > .cc > .cc-in { opacity: 1; }
.run-body > * + * { margin-top: 8px; }
.run-body .md + .pi-group { margin-top: 8px; }
.pi { position: relative; display: flex; align-items: flex-start; gap: 6px; padding-bottom: 8px; font-size: 14px; margin: 0; }
.pi .rail { position: relative; display: flex; align-items: flex-start; justify-content: center; width: 24px; min-height: 24px; flex-shrink: 0; align-self: stretch; }
.pi .rail .line { position: absolute; top: 24px; left: 50%; width: 1px; height: calc(100% - 16px); min-height: 8px; transform: translateX(-50%); background: var(--border); display: none; }
.pi.nested .rail .line { display: block; }
.pi .rail .ico { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--muted-foreground); }
.pi .rail .ico .icon { opacity: .55; }
.pi .rail .ico img { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; }
.pi .pi-main { flex: 1; min-width: 0; }
.pi-trigger { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 24px; text-align: left; color: var(--muted-foreground); transition: color var(--dur); overflow: hidden; }
.pi-trigger:hover, .pi-trigger[aria-expanded="true"] { color: var(--foreground); }
.pi-trigger .lbl { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; max-width: 100%; }
.pi-trigger .lbl .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-trigger .lbl .link { color: color-mix(in oklab, var(--brand-content) 80%, transparent); text-decoration: underline dotted; text-decoration-color: color-mix(in oklab, var(--brand) 20%, transparent); text-underline-offset: 2px; }
.pi-trigger:hover .lbl .link { color: var(--brand-content); }
.pi-trigger .chev { opacity: 0; transition: opacity var(--dur), transform var(--dur); flex-shrink: 0; }
.pi-trigger:hover .chev, .pi-trigger[aria-expanded="true"] .chev { opacity: 1; }
.pi-trigger[aria-expanded="true"] .chev { transform: rotate(90deg); }
.pi-trigger[aria-expanded="true"] .diffnums, .pi-trigger[aria-expanded="true"] .filename { display: none; }
.diffnums { display: inline-flex; gap: 8px; flex-shrink: 0; margin-left: 8px; }
.diffnums .add { color: var(--green-500); } .diffnums .del { color: var(--rose-500); }
.pi-content { padding: 12px 4px 8px; }
.tool-card { background: var(--surface-primary); border-radius: var(--r-md); box-shadow: var(--ring-surface), var(--shadow-xs); font-family: var(--font-mono); font-size: 12px; position: relative; overflow: hidden; }
.tool-card .cmd { padding: 8px 8px 0; color: var(--accent-foreground); white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-card .out { color: var(--muted-foreground); max-height: 80px; overflow: auto; padding: 8px; white-space: pre-wrap; mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); }
.tool-card .out.err { color: var(--muted-foreground); }
.tool-card.repl .code { display: flex; gap: 8px; padding: 8px; max-height: 160px; overflow: auto; }
.tool-card.repl .code .gt { color: var(--muted-foreground); user-select: none; }
.tool-card.repl .code pre { margin: 0; white-space: pre-wrap; color: var(--primary); flex: 1; min-width: 0; font: inherit; }
.tool-card.repl .out { padding-top: 0; max-height: 384px; mask-image: none; }
.tool-card .meta { position: absolute; top: 8px; right: 8px; font-size: 12px; color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); opacity: 0; transition: opacity var(--dur); }
.tool-card:hover .meta { opacity: 1; }
.diff-card { background: var(--surface-primary); border-radius: var(--r-md); box-shadow: var(--ring-surface), var(--shadow-xs); overflow: hidden; }
.diff-card .dh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }
.diff-card .dh .fn { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-card .dbody { max-height: 240px; overflow: auto; font-family: var(--font-mono); font-size: 12px; }
.diff-card .dl { display: flex; min-height: 20px; }
.diff-card .dl .n { width: 40px; flex-shrink: 0; text-align: right; padding-right: 10px; color: var(--muted-foreground); user-select: none; }
.diff-card .dl .c { flex: 1; white-space: pre-wrap; padding-right: 8px; }
.diff-card .dl.add { background: color-mix(in oklab, var(--green-500) 10%, transparent); box-shadow: inset 3px 0 0 var(--green-500); }
.diff-card .dl.del { background: color-mix(in oklab, var(--rose-500) 10%, transparent); box-shadow: inset 3px 0 0 var(--rose-500); }
.shimmer { position: relative; display: inline-block; background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(90deg, transparent calc(50% - 100px), var(--foreground), transparent calc(50% + 100px)), linear-gradient(var(--muted-foreground), var(--muted-foreground)); background-size: 250% 100%, auto; background-repeat: no-repeat, padding-box; animation: shimmer 2s linear infinite; }
@keyframes shimmer { from { background-position: 100% center; } to { background-position: 0% center; } }
.interject { display: flex; justify-content: flex-end; padding: 4px 0 12px; }

/* composer */
.composer-wrap { position: relative; z-index: 10; flex-shrink: 0; margin-bottom: 2px; display: flex; flex-direction: column; gap: 16px; }
.composer { position: relative; margin: 0 12px 4px; display: flex; flex-direction: column; gap: 2px; border-radius: var(--composer-radius); background: var(--composer-bg); box-shadow: 0 0 0 1px var(--border-surface), var(--composer-shadow); transition: box-shadow var(--dur-slow); overflow: hidden; }
.composer:focus-within { box-shadow: 0 0 0 1px var(--border-surface), var(--shadow-lg); }
.composer .ed-wrap { position: relative; transition: padding var(--dur-slow); padding: 0 32px; }
.composer .ed-wrap.multi { padding: 0 0 32px; }
.composer .editor { min-height: 20px; max-height: calc(15 * 1.4286em + 16px); overflow-y: auto; padding: 8px 10px; font-size: 14px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.composer .editor:empty::before { content: attr(data-placeholder); color: var(--muted-foreground); pointer-events: none; }
.composer .ed-left { position: absolute; bottom: 5px; left: 5px; }
.composer .ed-right { position: absolute; bottom: 5px; right: 5px; display: flex; align-items: center; gap: 4px; }
.composer .round { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.composer .round.plus { background: var(--secondary); color: var(--muted-foreground); }
.composer .round.plus:hover, .composer .round.plus[aria-expanded="true"] { background: var(--accent); color: var(--foreground); }
.composer .round.mic { color: var(--muted-foreground); }
.composer .round.mic:hover { background: var(--secondary); color: var(--foreground); }
.composer .round.send { background: var(--send-bg); color: var(--send-fg); transition: opacity var(--dur), transform var(--dur); }
.composer .round.send:disabled { opacity: .5; }
.composer .round.send .icon { width: 18px; height: 18px; transform: scaleX(-1); }
.composer .round.stop .icon { width: 16px; height: 16px; }
.mention-chip { display: inline-flex; align-items: center; gap: .4em; padding: 0 .4em; margin-bottom: .1em; border-radius: var(--r-sm); background: color-mix(in oklab, var(--brand) 20%, transparent); color: var(--brand-content); font-size: .9em; line-height: 1.4em; font-weight: 500; vertical-align: middle; white-space: nowrap; user-select: all; }
.mention-chip img, .mention-chip .fav { width: 12px; height: 12px; border-radius: 2px; }
.footer-row { display: flex; align-items: center; padding: 4px 8px 4px 12px; }
.footer-row .left { flex: 1; display: flex; align-items: center; min-width: 0; }
.footer-row .right { display: flex; align-items: center; }
.pick { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; border-radius: var(--r-md); font-size: 12px; color: var(--muted-foreground); font-weight: 500; }
.pick:hover, .pick[aria-expanded="true"] { background: var(--secondary); color: var(--foreground); }
.pick .icon { width: 16px; height: 16px; color: var(--muted-foreground); }
.pick .chev { width: 14px; height: 14px; opacity: .5; }
.pick.model { color: var(--surface-primary-foreground); font-size: 14px; }
.pick.model .icon { width: 14px; height: 14px; color: var(--foreground); margin-left: -2px; }
.pick.model .t { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick.effort { font-size: 12px; padding-left: 2px; }
.mention-pop { position: fixed; z-index: 50; width: 360px; max-height: 240px; overflow-y: auto; padding: 6px 4px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-lg); animation: menu-in var(--dur-fast) var(--ease-out); --slide: 8px; }
.mention-pop .g-label { padding: 4px 8px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.mention-pop .g + .g { padding-top: 8px; }
.mention-pop .mi { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; text-align: left; }
.mention-pop .mi.hl { background: var(--accent); }
.mention-pop .mi .ico { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.mention-pop .mi .ico img, .mention-pop .mi .ico .fav { width: 16px; height: 16px; border-radius: 2px; }
.mention-pop .mi .n { flex-shrink: 0; }
.mention-pop .mi .n.grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-pop .mi .d { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); font-weight: 400; }
.mention-pop .mi .h { max-width: 45%; flex-shrink: 0; text-align: right; color: var(--muted-foreground); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav { display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; background: #d97757; color: #fff; font-size: 9px; font-weight: 700; }
.fav.g { background: #94a3b8; }

/* --- main app --------------------------------------------------------------- */
.main { display: flex; height: 100%; min-width: 0; }
.main .chat-pane { position: relative; display: flex; flex-direction: column; min-width: 0; flex: 0 0 var(--chat-pct, 70.6%); }
.main.no-side .chat-pane { flex: 1; }
.main .resize { position: relative; flex: 0 0 6px; cursor: col-resize; z-index: 5; }
.main .resize::after { content: ""; position: absolute; inset: 0 auto 0 50%; width: 4px; transform: translateX(-50%); border-radius: 2px; background: transparent; transition: background-color var(--dur-slow); }
.main .resize:hover::after, .main .resize.dragging::after { background: var(--accent); }
.main .resize:focus-visible { box-shadow: none; } .main .resize:focus-visible::after { background: var(--ring); }
.main .side-pane { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.main.expanded .chat-pane { display: none; } .main.expanded .resize { display: none; }
.chat-head { display: flex; align-items: center; gap: 8px; height: var(--header-h); padding: 2px 8px 0; flex-shrink: 0; }
.chat-head .crumb { display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: 28px; padding: 0 4px; font-size: 14px; font-weight: 500; }
.chat-head .crumb .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.chat-head .grow { flex: 1; min-width: 0; }
.chat-head .btn.icon-btn[aria-pressed="true"] { background: var(--secondary); color: var(--foreground); }
.chat-head .share { height: 28px; padding: 0 8px; gap: 6px; font-size: 14px; color: var(--muted-foreground); }
.chat-head .share:hover { background: var(--secondary); color: var(--foreground); }
.chat-head .head-scroll { display: flex; align-items: center; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; }
.outputs { margin: 8px 12px; padding: 12px 16px; border-radius: var(--r-xl); background: var(--surface-primary); box-shadow: var(--ring-surface), var(--shadow-sm); }
.outputs .oh { display: flex; align-items: center; justify-content: space-between; height: 24px; margin-bottom: 8px; }
.outputs .oh .t { font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.outputs .grid { display: flex; flex-wrap: wrap; gap: 16px; }
.art-card { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; border-radius: var(--r-md); padding: 8px 4px; text-align: center; font-size: 14px; }
.art-card:hover { background: var(--secondary); }
.art-card .th { width: 64px; height: 80px; border-radius: 6px; background: #fff; box-shadow: var(--ring-surface), var(--shadow-md); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.art-card .th img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.art-card .n { overflow-wrap: anywhere; line-height: 1.3; }
.side-head { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px; flex-shrink: 0; }
.side-head .tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; }
.side-head .tab { display: flex; align-items: center; height: 28px; width: 160px; flex-shrink: 0; padding: 0 2px 0 8px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.side-head .tab[aria-selected="true"] { background: var(--surface-secondary); color: var(--foreground); box-shadow: var(--ring-surface), 0 1px 2px rgba(0,0,0,.05); }
.side-head .tab .icon { color: var(--muted-foreground); margin-right: 6px; }
.side-head .tab .t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(to right, #000 calc(100% - 8px), transparent); }
.side-head .tab .close { width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; opacity: 0; color: var(--muted-foreground); }
.side-head .tab:hover .close, .side-head .tab .close:focus-visible { opacity: 1; }
.side-head .tab .close:hover { background: var(--accent); color: var(--foreground); }
.side-head .tab .close .icon { width: 12px; height: 12px; }
.side-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--muted-foreground); font-size: 14px; }
.side-empty .or { display: flex; align-items: center; gap: 12px; }
.side-empty .or hr { width: 80px; height: 1px; background: var(--border); margin: 0; }
.preview-frame { flex: 1; min-height: 0; position: relative; }
.preview-frame iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.preview-frame .preview-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--muted); color: var(--muted-foreground); font-size: 13px; padding: 24px; text-align: center; }
.open-with { position: absolute; top: 12px; right: 12px; display: inline-flex; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: var(--surface-primary); overflow: hidden; }
.open-with button { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.open-with button:hover { background: var(--secondary); }
.open-with button + button { border-left: 1px solid var(--border); padding: 0 8px; }
.open-with .edge { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(#2ec3a6, #0b7dd6, #2ec3a6); }
.preview-name { position: absolute; left: 12px; bottom: 12px; font-size: 12px; color: var(--muted-foreground); background: var(--surface-primary); padding: 4px 8px; border-radius: 6px; box-shadow: var(--ring-surface); }

/* chats list */
.tasks { height: 100%; overflow-y: auto; padding: 16px 32px 32px; }
.tasks .big-composer { margin-bottom: 8px; }
.tasks .big-composer .composer { margin: 0; }
.tasks .big-composer .ed-wrap, .projects-page .big-composer .ed-wrap { padding: 0 0 52px !important; }
.tasks .big-composer .editor { padding: 12px 16px; font-size: 16px; }
.tasks .big-composer .ed-left { display: flex; align-items: center; gap: 8px; bottom: 8px; left: 12px; }
.tasks .big-composer .ed-right { bottom: 8px; right: 12px; gap: 6px; }
.tasks .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0; }
.seg { position: relative; display: inline-flex; align-items: center; padding: 3px; border-radius: var(--r-md); background: var(--secondary); isolation: isolate; }
.seg .ind { position: absolute; top: 3.5px; bottom: 3.5px; z-index: 0; border-radius: var(--r-sm); background: var(--surface-primary); box-shadow: var(--ring-surface), var(--shadow-md); transition: left var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out); }
.seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 10px; border-radius: var(--r-sm); font-size: 15px; font-weight: 500; color: var(--muted-foreground); transition: color var(--dur); }
.seg button:hover, .seg button[aria-selected="true"] { color: var(--foreground); }
.seg button .icon { color: var(--muted-foreground); }
.tasks .tools { display: flex; align-items: center; gap: 8px; }
.tasks .search { display: inline-flex; align-items: center; gap: 8px; height: 40px; border-radius: var(--r-md); transition: background-color var(--dur-slow), width var(--dur-slow) var(--ease-out); width: 40px; justify-content: center; }
.tasks .search.open { width: 280px; justify-content: flex-start; padding: 0 12px; background: var(--secondary); }
.tasks .search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 16px; }
.tasks .search .icon { width: 20px; height: 20px; color: var(--foreground); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.tcard { position: relative; aspect-ratio: 1 / 1; width: 100%; overflow: hidden; border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--ring-surface), var(--card-shadow); transition: background-color var(--dur), box-shadow var(--dur); user-select: none; }
.tcard:hover { background: var(--surface-primary); box-shadow: var(--ring-surface), var(--shadow-lg); }
.tcard > a { position: absolute; inset: 0; z-index: 20; border-radius: inherit; }
.tcard > a:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.tcard .in { display: flex; flex-direction: column; height: 100%; padding: 8px 12px 0; }
.tcard .meta { display: flex; align-items: center; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); opacity: .8; }
.tcard .meta .icon { width: 12px; height: 12px; margin-left: 6px; color: var(--muted-foreground); }
.tcard .meta .badge { margin-left: 6px; }
.tcard h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard .prev { margin-top: 4px; flex: 1; min-height: 0; overflow: hidden; font-size: 12px; font-weight: 500; color: var(--muted-foreground); opacity: .8; mask-image: linear-gradient(to bottom, #000 calc(100% - 12px), transparent); }
.tcard .prev .md { font-size: 12px; line-height: 1.5; }
.tcard .prev .md > * + * { margin-top: 8px; }
.tcard .prev .md h2 { font-size: 15px; } .tcard .prev .md code.inline { font-size: 11px; }
.tcard .prev .md .tbl-wrap, .tcard .prev .md .code-block { margin: 8px 0; pointer-events: none; }
.tcard .live { margin-top: 4px; }
.tcard .live .step { display: flex; align-items: center; gap: 8px; height: 24px; font-size: 13px; color: var(--foreground); font-weight: 500; }
.tcard .live .step .icon { color: var(--muted-foreground); width: 14px; height: 14px; }
.tcard .live .step .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard .live .shot { margin-top: 8px; border-radius: 10px 10px 0 0; overflow: hidden; box-shadow: var(--ring-surface), var(--shadow-md); background: #fff; }
.tcard .live .shot img { width: 100%; display: block; }
.trow { display: flex; align-items: center; gap: 16px; width: 100%; height: 40px; padding: 8px 12px; border-radius: var(--r-md); font-size: 14px; user-select: none; }
.trow:hover { background: var(--secondary); }
.trow .lbl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.trow .lbl .t { font-weight: 500; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.trow .lbl .p { flex: 1; min-width: 0; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.trow .time { font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.trow .icon.pin { width: 12px; height: 12px; color: var(--muted-foreground); }
.empty-list { padding: 48px 0; text-align: center; color: var(--muted-foreground); font-size: 14px; }

/* --- settings ------------------------------------------------------------- */
.settings { display: flex; height: 100%; min-width: 0; }
.settings .snav { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px; }
.settings .snav .sbox { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-primary); color: var(--muted-foreground); margin-bottom: 8px; position: relative; }
.settings .snav .sbox input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 16px; color: var(--foreground); }
.settings .snav .sbox input::placeholder { color: var(--muted-foreground); }
.settings .snav .sbox .icon { width: 20px; height: 20px; }
.settings .snav .sscroll { flex: 1; overflow-y: auto; padding-bottom: 16px; }
.settings .snav h5 { margin: 12px 8px 4px; font-size: 14px; font-weight: 400; color: var(--muted-foreground); }
.settings .snav .nitem { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 12px; border-radius: var(--r-lg); font-size: 17px; color: var(--muted-foreground); text-align: left; }
.settings .snav .nitem .icon { width: 20px; height: 20px; }
.settings .snav .nitem:hover { background: var(--secondary); color: var(--foreground); }
.settings .snav .nitem[aria-current="page"] { background: var(--secondary); color: var(--foreground); font-weight: 500; }
.settings .snav .nsep { height: 1px; background: var(--border); margin: 12px 8px; }
.settings .sresults { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 6px; background: var(--popover); border-radius: var(--r-lg); box-shadow: var(--overlay-ring), var(--shadow-lg); padding: 6px; }
.settings .sresults button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 10px; border-radius: var(--r-md); text-align: left; font-size: 14px; }
.settings .sresults button:hover, .settings .sresults button.hl { background: var(--accent); }
.settings .sresults button small { color: var(--muted-foreground); font-size: 12px; }
.settings .sresults .none { padding: 8px 10px; font-size: 14px; color: var(--muted-foreground); }
.settings .scontent { flex: 1; min-width: 0; position: relative; display: flex; }
.settings .scard { flex: 1; margin: 0 8px 8px 0; border-radius: var(--r-xl); background: var(--surface-primary); box-shadow: var(--ring-surface), var(--shadow-sm); overflow-y: auto; position: relative; }
.settings .rail { position: sticky; top: 0; width: 28px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; align-self: stretch; }
.settings .rail button { width: 16px; height: 2px; border-radius: 1px; background: var(--border); transition: background-color var(--dur), width var(--dur); cursor: pointer; }
.settings .rail button[aria-current="true"] { background: var(--foreground); width: 18px; }
.settings .page { max-width: 960px; margin: 0 auto; padding: 88px 32px 96px; }
.settings .page h1 { margin: 0 0 40px; font-family: var(--font-display); font-size: 34px; font-weight: 500; line-height: 1.2; }
.settings .page .lead { font-size: 15px; color: var(--muted-foreground); margin: -28px 0 32px; }
.settings .sec { margin-bottom: 40px; }
.settings .sec > h2 { margin: 0 0 12px; font-size: 18px; font-weight: 500; color: var(--muted-foreground); display: flex; align-items: center; justify-content: space-between; }
.settings .sec > h2 .icon-btn { width: 28px; height: 28px; }
.settings .group { border-radius: var(--r-xl); background: var(--background); box-shadow: var(--ring-surface); overflow: hidden; margin-bottom: 16px; }
.settings .row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; min-height: 64px; }
.settings .row + .row { border-top: 1px solid var(--border); }
.settings .row .txt { flex: 1; min-width: 0; }
.settings .row h4 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.35; display: flex; align-items: center; gap: 8px; }
.settings .row p { margin: 2px 0 0; font-size: 15px; color: var(--muted-foreground); }
.settings .row .ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.settings .row.link:hover { background: var(--secondary); cursor: default; }
.settings .row.link .icon.ext { color: var(--muted-foreground); }
.settings .banner { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; border-radius: var(--r-xl); background: var(--brand); color: #fff; font-size: 17px; margin-bottom: 40px; }
.settings .banner .icon { width: 24px; height: 24px; }
.settings .banner .grow { flex: 1; }
.settings .banner .btn { background: #fff; color: var(--brand); height: 40px; padding: 0 14px; font-size: 17px; border-radius: var(--r-lg); }
.settings .avatar { width: 60px; height: 60px; border-radius: 8px; background: linear-gradient(135deg, #7dd3fc, #0369a1 60%, #dbeafe); }
.settings .sel { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border-radius: var(--r-lg); background: var(--surface-primary); box-shadow: var(--ring-surface), var(--shadow-xs); font-size: 17px; font-weight: 500; }
.settings .sel:hover { background: var(--surface-tertiary); }
.settings .sel .icon { width: 16px; height: 16px; color: var(--muted-foreground); }
.settings .btn.outline { height: 40px; font-size: 17px; padding: 0 14px; }
.settings .btn.secondary, .settings .btn.primary { height: 40px; font-size: 17px; padding: 0 14px; }
.settings .seg2 { display: inline-flex; gap: 4px; }
.settings .seg2 button { height: 36px; padding: 0 14px; border-radius: var(--r-lg); font-size: 15px; font-weight: 500; color: var(--muted-foreground); background: var(--secondary); }
.settings .seg2 button[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
.settings .kbd { font-family: var(--font-sans); font-size: 14px; padding: 2px 6px; border-radius: 6px; background: var(--muted); color: var(--muted-foreground); margin-left: 6px; }
.settings .plain-list { padding: 8px 20px 16px; font-size: 15px; color: var(--muted-foreground); }
.settings .skill { display: flex; align-items: center; gap: 12px; padding: 12px 20px; }
.settings .skill + .skill { border-top: 1px solid var(--border); }
.settings .skill .sk-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--muted); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); flex-shrink: 0; }
.settings .skill .n { font-size: 16px; font-weight: 500; }
.settings .skill .d { font-size: 14px; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.settings .skill:hover { background: var(--secondary); }
.settings .hero { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.settings .hero h4 { margin: 0; font-size: 20px; font-weight: 500; }
.settings .hero p { margin: 0; font-size: 15px; color: var(--muted-foreground); }
.settings .hero-img { width: 100%; height: 220px; border-radius: var(--r-xl); background: linear-gradient(135deg, #e0f2fe, #f8fafc 60%, #e5e7eb); box-shadow: var(--ring-surface); margin: 16px 0 24px; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.settings .faq { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 500; }
.settings .faq + .faq, .settings .faq-a + .faq { border-top: 1px solid var(--border); }
.settings .faq .icon { color: var(--muted-foreground); transition: transform var(--dur-slow); }
.settings .faq[aria-expanded="true"] .icon { transform: rotate(180deg); }
.settings .faq-a { padding: 0 20px 16px; font-size: 15px; color: var(--muted-foreground); }
.settings .memory { display: flex; height: 100%; }
.settings .memory .tree { width: 260px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 12px 8px; overflow-y: auto; }
.settings .memory .tree .ti { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: var(--r-md); font-size: 14px; color: var(--foreground); }
.settings .memory .tree .ti:hover { background: var(--secondary); }
.settings .memory .tree .ti[aria-selected="true"] { background: var(--secondary); font-weight: 500; }
.settings .memory .tree .ti .icon { color: var(--muted-foreground); }
.settings .memory .tree .ti.child { padding-left: 28px; }
.settings .memory .tree .ti .chev { margin-left: auto; transition: transform var(--dur); width: 14px; height: 14px; }
.settings .memory .tree .ti[aria-expanded="true"] .chev { transform: rotate(90deg); }
.settings .memory .view { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.settings .memory .vh { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted-foreground); }
.settings .memory .vb { flex: 1; overflow-y: auto; padding: 24px 32px; }
.settings .memory .vb textarea { width: 100%; height: 100%; min-height: 320px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; font-family: var(--font-mono); font-size: 13px; outline: none; }
.settings .memory .tabs { display: inline-flex; gap: 2px; margin: 12px 8px; padding: 2px; border-radius: var(--r-md); background: var(--secondary); }
.settings .memory .tabs button { height: 28px; padding: 0 10px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.settings .memory .tabs button[aria-selected="true"] { background: var(--surface-primary); color: var(--foreground); box-shadow: var(--ring-surface), var(--shadow-sm); }
.settings .arch-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; }
.settings .arch-row + .arch-row { border-top: 1px solid var(--border); }
.settings .arch-row .t { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings .arch-row .time { font-size: 13px; color: var(--muted-foreground); }
.settings .pager { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.settings .sug-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.settings .sug-row + .sug-row { border-top: 1px solid var(--border); }
.settings .sug-row h4 { margin: 0; font-size: 17px; font-weight: 500; }
.settings .sug-row p { margin: 2px 0 0; font-size: 15px; color: var(--muted-foreground); }
.settings .plan-note { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; background: var(--secondary); font-size: 15px; color: var(--muted-foreground); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.settings .plan-note .grow { flex: 1; }
.settings .plan-note .btn { height: 32px; font-size: 15px; background: var(--accent); color: var(--foreground); }
.settings .routine-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.settings .routine-row + .routine-row { border-top: 1px solid var(--border); }
.settings .routine-row .t { flex: 1; min-width: 0; }
.settings .routine-row h4 { margin: 0; font-size: 17px; font-weight: 500; }
.settings .routine-row p { margin: 2px 0 0; font-size: 14px; color: var(--muted-foreground); }

/* routine dialog */
.rt-form { display: grid; gap: 16px; }
.rt-form .reason { background: var(--secondary); border-radius: var(--r-md); padding: 12px 16px; font-size: 16px; color: var(--muted-foreground); }
.rt-form input.name { border: 0; padding: 0; height: auto; font-size: 22px; font-weight: 500; outline: none; background: transparent; width: 100%; }
.rt-form input.name::placeholder { color: var(--muted-foreground); }
.rt-form .frow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rt-form .frow .lab { width: 48px; font-size: 16px; color: var(--muted-foreground); }
.rt-form .frow .lab.sub { color: var(--muted-foreground); display: flex; justify-content: center; }
.rt-form .sel { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 16px; border-radius: var(--r-lg); background: var(--surface-primary); box-shadow: var(--ring-surface); font-size: 17px; font-weight: 500; }
.rt-form .sel .icon { width: 16px; height: 16px; color: var(--muted-foreground); }
.rt-form .sel[aria-disabled="true"] { opacity: .5; }
.rt-form .timebox { display: inline-flex; align-items: center; height: 44px; border-radius: var(--r-lg); background: var(--surface-primary); box-shadow: var(--ring-surface); overflow: hidden; }
.rt-form .timebox input { height: 44px; width: 150px; border: 0; outline: none; padding: 0 16px; font-size: 17px; font-family: var(--font-mono); background: transparent; }
.rt-form .timebox button { height: 44px; width: 52px; display: inline-flex; align-items: center; justify-content: center; border-left: 1px solid var(--border); color: var(--muted-foreground); }
.rt-form .timebox button:hover { background: var(--secondary); color: var(--foreground); }
.rt-form textarea.prompt { border: 0; outline: none; resize: vertical; min-height: 200px; max-height: 360px; font-size: 16px; line-height: 1.5; padding: 0; background: transparent; font-family: var(--font-sans); width: 100%; }
.rt-form .plabel { font-size: 16px; color: var(--muted-foreground); }
.rt-form .fbar { display: flex; align-items: center; gap: 4px; }
.rt-form .fbar .grow { flex: 1; }
.rt-form .fbar .pick { font-size: 16px; height: 32px; }
.rt-form .fbar .pick.model { color: var(--foreground); }
.rt-form input.rrule { font-family: var(--font-mono); }
.timelist { max-height: 240px; overflow-y: auto; width: 140px; }
.timelist button { display: block; width: 100%; height: 30px; padding: 0 10px; border-radius: var(--r-sm); text-align: left; font-size: 14px; }
.timelist button:hover, .timelist button[aria-selected="true"] { background: var(--accent); }

/* --- newtab ----------------------------------------------------------------- */
.newtab { height: 100%; overflow-y: auto; position: relative; }
.newtab .profile { position: absolute; top: 16px; right: 24px; display: inline-flex; align-items: center; gap: 6px; }
.newtab .profile .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #7dd3fc, #0369a1 60%, #dbeafe); box-shadow: var(--ring-surface); }
.newtab .profile .icon { color: var(--muted-foreground); }
.newtab .hero { display: flex; flex-direction: column; align-items: center; padding-top: 200px; }
.newtab .hero .logo svg { width: 88px; height: 88px; }
.newtab .omni { width: min(1160px, calc(100% - 64px)); margin: 72px auto 0; }
.newtab .omni .box { display: flex; align-items: center; gap: 12px; height: 80px; padding: 0 16px 0 28px; border-radius: 24px; background: var(--surface-primary); box-shadow: var(--ring-surface), var(--shadow-xl); }
.newtab .omni input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 20px; }
.newtab .omni input::placeholder { color: var(--muted-foreground); }
.newtab .omni .hint { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--muted-foreground); }
.newtab .omni .hint kbd { background: var(--secondary); border-radius: 6px; padding: 2px 8px; font-size: 14px; font-weight: 600; color: var(--foreground); font-family: var(--font-sans); }
.newtab .omni .seg button { height: 40px; font-size: 18px; padding: 0 16px; }
.newtab .omni .seg { padding: 4px; border-radius: 14px; }
.newtab .omni .seg .ind { top: 4px; bottom: 4px; border-radius: 12px; }
.newtab .omni .composer { margin: 0; border-radius: 24px; }
.newtab .omni .composer .editor { padding: 20px 28px; font-size: 20px; min-height: 80px; }
.newtab .omni .ed-wrap { padding: 0 0 48px; }
.newtab .omni .ed-left { left: 16px; bottom: 12px; display: flex; gap: 8px; align-items: center; }
.newtab .omni .ed-right { right: 16px; bottom: 12px; }
.newtab .lists { width: min(1240px, calc(100% - 64px)); margin: 140px auto 40px; }
.newtab .lists .lh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.newtab .lists .seg { border-radius: 24px; padding: 4px; }
.newtab .lists .seg .ind { border-radius: 20px; top: 4px; bottom: 4px; }
.newtab .lists .seg button { height: 36px; padding: 0 16px; font-size: 18px; }
.newtab .lists .all { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; color: var(--muted-foreground); }
.newtab .lists .all:hover { color: var(--foreground); }
.newtab .lists .card-grid { grid-template-columns: repeat(3, 1fr); }
.newtab .lists .tcard { aspect-ratio: auto; height: 380px; }
.newtab .lists .tcard .in { padding: 12px 16px 0; }
.newtab .lists .tcard .meta { font-size: 15px; }
.newtab .lists .tcard h3 { font-size: 20px; }
.newtab .lists .tcard .prev { font-size: 15px; }
.newtab .lists .tcard .prev .md { font-size: 15px; }
.newtab .sugg { width: min(1240px, calc(100% - 64px)); margin: 0 auto 60px; }
.newtab .sugg h2 { font-size: 18px; font-weight: 500; color: var(--muted-foreground); margin: 0 0 16px; }
.newtab .sugg .sg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.newtab .sugg .sc { padding: 20px; border-radius: var(--r-xl); background: var(--surface-primary); box-shadow: var(--ring-surface), var(--shadow-md); display: flex; flex-direction: column; gap: 8px; }
.newtab .sugg .sc h3 { margin: 0; font-size: 17px; font-weight: 600; }
.newtab .sugg .sc p { margin: 0; font-size: 14px; color: var(--muted-foreground); flex: 1; }
.newtab .sugg .head { display: flex; align-items: center; justify-content: space-between; }
.newtab .bottombar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px; font-size: 14px; color: var(--muted-foreground); background: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
.newtab .bottombar .btn.link { color: var(--foreground); }
.newtab .toggle-sugg { display: block; margin: -100px auto 60px; height: 36px; padding: 0 16px; border-radius: 18px; background: var(--secondary); color: var(--muted-foreground); font-size: 15px; font-weight: 500; }
.newtab .toggle-sugg:hover { color: var(--foreground); }
.newtab .empty-routines { padding: 60px 0; text-align: center; color: var(--muted-foreground); font-size: 16px; }
.newtab .empty-routines b { display: block; color: var(--foreground); font-weight: 500; font-size: 18px; margin-bottom: 6px; }

/* --- minipopup / tabsearch --------------------------------------------------- */
.minipopup { padding: 8px; }
.minipopup .composer { margin: 0; box-shadow: none; }
.minipopup .ed-wrap { padding: 0 0 36px; }
.minipopup .editor { padding: 10px 12px; font-size: 16px; min-height: 40px; }
.minipopup .ed-left { display: flex; gap: 6px; align-items: center; left: 8px; bottom: 6px; }
.minipopup .ed-right { right: 8px; bottom: 6px; gap: 6px; }
.tabsearch .tsh { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.tabsearch .tsh input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 17px; }
.tabsearch .tsh kbd { font-family: var(--font-sans); font-size: 13px; color: var(--muted-foreground); background: var(--secondary); padding: 2px 8px; border-radius: 6px; }
.tabsearch .tsb { overflow-y: auto; padding: 8px; }
.tabsearch h2 { margin: 12px 12px 4px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); letter-spacing: .02em; }
.tabsearch .tsr { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-md); font-size: 14px; text-align: left; }
.tabsearch .tsr:hover, .tabsearch .tsr.hl { background: var(--secondary); }
.tabsearch .tsr .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabsearch .tsr .h { color: var(--muted-foreground); font-size: 12px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabsearch .tsr .a { font-size: 12px; color: var(--muted-foreground); opacity: 0; }
.tabsearch .tsr:hover .a, .tabsearch .tsr.hl .a { opacity: 1; }
.tabsearch .tsr .icon { color: var(--muted-foreground); }
.tabsearch .none { padding: 24px; text-align: center; color: var(--muted-foreground); font-size: 14px; }

/* transitions on route change */
.route-in { animation: fade-in var(--dur); }