/* reference theme — extracted read-only from the public web-app CSS bundle (index-DrCHmTbJ.css, fetched 2026-10-29)
   and the shell index.html (logged-out). Source colours are OKLCH; hex here is a computed conversion
   (gamut-clipped sRGB, 8-digit hex when the source has alpha). Original value + source var in each comment.
   Source default is DARK (:root) with html[data-theme=light|dim] overrides, set before paint from
   localStorage or prefers-color-scheme. Here: light = :root, dark = [data-theme='dark'], dim kept as option.
   RTL: <html lang="he" dir="rtl">; CSS uses logical properties (inline/block) ~3650 rules vs ~120 physical;
   directional icons get .dir-flip (scaleX(-1)) only under html[dir=ltr].
   No logo, no brand name, no font files here. */

:root {
  /* ---- Typography ---- */
  --font-sans: "Assistant", "Rubik", system-ui, sans-serif; /* --font-sans; body (Hebrew UI). Assistant 400/600/700 from Google Fonts, Rubik self-hosted 300-900 */
  --font-disp: "Heebo", "Assistant", system-ui, sans-serif; /* --font-disp; most-used family (693x): titles, buttons, chips, numbers. Heebo 400-800 */
  --font-mono: "JetBrains Mono", "Fira Code", "Assistant", ui-monospace, monospace; /* --font-mono; model chip, code, logs (288x) */
  --font-latin: "Rubik", "Inter", system-ui, sans-serif; /* html[lang=en|fr|ru] override of --font-sans/--font-disp */
  --font-fun: "Assistant", sans-serif; /* onboarding/kickoff surfaces (.ob etc.) */
  --font-size-3xs: 10.5px; /* badges/meta (113x) */
  --font-size-2xs: 11.5px; /* chips, timestamps (371x) */
  --font-size-xs: 12px; /* small (475x) */
  --font-size-sm: 12.5px; /* MOST COMMON (600x): sidebar preview, tool buttons, tabs */
  --font-size-md: 13px; /* (420x) secondary text, status line */
  --font-size-md2: 13.5px; /* (302x) home-composer buttons, labels */
  --font-size-base: 15px; /* body font-size; chat bubble text 15px/1.66; composer textarea 15px/1.6 */
  --font-size-lg: 17px; /* card title (.m-card-title 17/700), onboarding body */
  --font-size-xl: 19px; /* home composer textarea 19px/1.6 (16.5 on mobile) */
  --font-size-2xl: 21px; /* home stat number (.home-status__n 21/800, tabular-nums) */
  --font-size-3xl: 34px; /* big numbers / titles (mobile hero) */
  --font-size-4xl: 50px; /* gift amount (.home-gift__amount 50/800) */
  --font-size-hero: 60px; /* home greeting "what shall we do today" (.home-invite__ask 60/400, lh 1.16; 48 <=1100px, 33 <=700px) */
  --font-weight-regular: 400; /*  */
  --font-weight-medium: 500; /* 278x */
  --font-weight-semibold: 600; /* 563x */
  --font-weight-bold: 700; /* MOST (601x) */
  --font-weight-heavy: 800; /* 304x: numbers, primary CTA */
  --font-leading-none: 1; /* 104x */
  --font-leading-tight: 1.3; /*  */
  --font-leading-snug: 1.45; /*  */
  --font-leading-normal: 1.5; /* most common (198x) */
  --font-leading-relaxed: 1.6; /* composer, 108x */
  --font-leading-chat: 1.66; /* chat bubble */
  /* ---- Spacing (most-used literal gap/padding values) ---- */
  --space-0_5: 2px;
  --space-1: 4px;
  --space-1_5: 6px; /* 332x gap */
  --space-2: 8px; /* MOST COMMON gap (526x) */
  --space-2_5: 10px; /* 383x gap */
  --space-3: 12px;
  --space-3_5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px; /* home-composer top margin */
  --space-page: 56px; /* .home .pad inline (40 <=1100, 18 <=700) */
  /* ---- Radii ---- */
  --radius-xs: 4px; /* --radius-xs (134x): small tool buttons (attach/voice), typing avatar */
  --radius-sm: 7px; /* --radius-sm MOST USED (369x): send button, engine chip, stop button, attached chip, panel bars */
  --radius: 10px; /* --radius (106x): input wrapper / composer, chat bubbles, deploy card, skeleton */
  --radius-md: 12px; /* alert-dialog, summary card */
  --radius-card: 16px; /* --r-m / .m-card (project card) */
  --radius-lg: 24px; /* --r-l, onboarding --r */
  --radius-xl: 30px; /* --r-xl */
  --radius-pill: 999px; /* pills/chips (162x + 99px 47x) */
  --radius-round: 50%; /* avatars/dots (288x) */
  --radius-bubble-tail: 3px; /* user bubble corner at end-end */
  --radius-face: 28%; /* agent avatar squircle */
  /* ---- Borders ---- */
  --border-hair: 1px solid var(--color-border);         /* "1px solid var(--border)" 242x */
  --border-soft: 1px solid var(--color-border-light);   /* --rule */
  --border-input: 1px solid var(--color-border);        /* .input-wrapper (old: 1.5px) */
  --border-fun: 3px solid var(--color-fun-plum);        /* onboarding "sticker" style (3px ink) */
  /* ---- Motion ---- */
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1); /* --ease-out */
  --motion-ease-std: cubic-bezier(.4, 0, .2, 1); /* --ease-std */
  --motion-ease-pop: cubic-bezier(.2, .9, .3, 1.3); /* rail-bubble-pop overshoot */
  --motion-dur-fast: .13s; /* --dur-fast */
  --motion-dur: .18s; /* --dur */
  --motion-dur-slow: .3s; /* --dur-slow */
  --motion-dur-page: .46s; /* .home .rise stagger */
  --motion-dur-theme: .52s; /* home composer color/theme transitions */
  --motion-stagger: 70ms; /* .home .d1..d5 delays 40/100/170/240/310ms */
  --motion-spin: .8s linear infinite; /* spinner-small */
  --motion-typing: 1.4s ease-in-out infinite; /* typing dots, delays 0/.15/.3s */
  --motion-breathe: 2.6s ease-in-out infinite; /* working/live dot */
  --motion-shimmer: 2s ease-out infinite; /* skeleton wave-lines */
  /* ---- Layout ---- */
  --layout-rail-w: 68px; /* --rail: right-edge icon rail (RTL start side) */
  --layout-rail-item-w: 56px; /* .rail-item */
  --layout-sidebar-w: 290px; /* .session-sidebar (max 70vw) */
  --layout-panel-w: 400px; /* --panel: side panel .sp-host */
  --layout-workbench-w: 560px; /* --wb-width default: code/preview workbench column */
  --layout-chat-max: 940px; /* .messages-inner/.input-stack max-inline-size */
  --layout-chat-max-focus: 760px; /* focus mode / kickoff room */
  --layout-header-h: 44px; /* .header-content block-size */
  --layout-panel-header-h: 48px; /* .panel-header min-height */
  --layout-send-size: 34px; /* .send-btn (32 mobile); home composer 42px */
  --layout-tool-btn-h: 28px; /* attach/voice (34 in home composer) */
  --layout-chip-h: 30px; /* .engine-chip (34 in home composer) */
  --layout-tab-h: 28px; /* .tab (min 132 / max 208 wide) */
  --layout-composer-min-h: 62px; /* home composer textarea min (52 mobile); chat textarea min 26px */
  --layout-bp-mobile: 700px; /* MAIN mobile breakpoint (max-width:700px, 34 rules) */ /* media queries cannot read vars: use literal */
  --layout-bp-tablet: 1000px; /* desktop layout from min-width:1001px */ /* media queries cannot read vars: use literal */
  --layout-bp-wide: 1100px; /* .home pad 56->40 */ /* media queries cannot read vars: use literal */
  --layout-bp-small: 520px; /* media queries cannot read vars: use literal */
  /* ---- Playful onboarding palette (identical in both modes) ---- */
  --color-fun-plum: #241F2B; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-plum-soft: #2E2836; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-plum-line: #3A3342; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-cream: #FDF8EE; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-cream-2: #F4ECDC; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-turq: #2DD0CC; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-turq-ink: #1A968F; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-amber: #F5A83C; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-amber-ink: #BD7B1C; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-pink: #EC5E9E; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-pink-ink: #C93C77; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-blue: #3B7DD8; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-lav: #B9B2E5; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
  --color-fun-lav-ink: #7C74B0; /* literal hex in .ob / .chat-window.is-kickoff-room / .tm.is-market */
}

/* LIGHT (source: html[data-theme=light]) */
:root {
  --color-bg-deepest: #eef0f4; /* oklch(.955 .006 262) | --bg-deepest; body + messages-area background */
  --color-bg: #eef0f4; /* oklch(.955 .006 262) | --bg; .home page background */
  --color-bg-chat: #f2f3f7; /* oklch(.965 .005 262) | --bg-chat */
  --color-surface: #f9fafd; /* oklch(.985 .004 262) | --surface; sidebar, rail, header, composer area, home composer */
  --color-elevated: #fefeff; /* oklch(.998 .002 262) | --bg-elevated; cards (.m-card, .deploy-card), dialogs, input-wrapper */
  --color-raised: #e3e6ec; /* oklch(.925 .008 262) | --bg-raised; active rail item, attached-file chip */
  --color-hover: #d9dce3; /* oklch(.895 .01 262) | --bg-hover; hover on buttons */
  --color-sidebar: #f9fafd; /* oklch(.985 .004 262) | .session-sidebar / .rail background = var(--surface) */
  --color-primary: #007c79; /* oklch(.52 .11 192) | --primary (= --accent); send button, active states, links */
  --color-primary-dark: #005b59; /* oklch(.42 .085 192) | --primary-dark */
  --color-primary-light: #007c7959; /* oklch(.52 .11 192 / .35) | --primary-light */
  --color-primary-glow: #007c791f; /* oklch(.52 .11 192 / .12) | --primary-glow; focus ring 0 0 0 3px */
  --color-primary-wash: #007c791a; /* oklch(.52 .11 192 / .1) | --primary-wash; selected/"on" button bg */
  --color-primary-ink: #fdfdfd; /* oklch(.995 0 0) | --primary-ink; text/icon on primary */
  --color-accent-2: #6d5398; /* oklch(.5 .11 300) | --accent-2 (violet, secondary accent) */
  --color-selection: #007c7933; /* oklch(.52 .11 192 / .2) | --selection; ::selection */
  --color-text: #171b21; /* oklch(.22 .014 262) | --text */
  --color-text-secondary: #4c5058; /* oklch(.43 .014 262) | --text-secondary */
  --color-text-muted: #70757d; /* oklch(.56 .014 262) | --text-muted */
  --color-text-faint: #82868f; /* oklch(.62 .014 262) | --text-faint (dark: = --text-muted via later :root) */
  --color-border: #353b4533; /* oklch(.35 .02 262 / .2) | --border; "1px solid var(--border)" used 242x */
  --color-border-light: #353b451c; /* oklch(.35 .02 262 / .11) | --border-light; used 200x */
  --color-border-strong: #353b4552; /* oklch(.35 .02 262 / .32) | --border-strong; home composer border */
  --color-border-active: #007c7973; /* oklch(.52 .11 192 / .45) | --border-active; focused inputs */
  --color-success: #008c45; /* oklch(.56 .15 152) | --success; "up"/live/done */
  --color-success-light: #008c451c; /* oklch(.56 .15 152 / .11) | --success-light; up-badge bg */
  --color-danger: #cc3336; /* oklch(.56 .19 25) | --danger; "down", stop button, errors */
  --color-danger-light: #cc33361a; /* oklch(.56 .19 25 / .1) | --danger-light; down-badge bg */
  --color-danger-text: #a92227; /* oklch(.48 .17 25) | --danger-text */
  --color-warning: #ba7f00; /* oklch(.64 .14 78) | --warning */
  --color-warning-light: #ba7f0021; /* oklch(.64 .14 78 / .13) | --warning-light */
  --color-info: #1762b6; /* oklch(.5 .15 255) | --info */
  --color-info-light: #1762b61a; /* oklch(.5 .15 255 / .1) | --info-light */
  --color-paused: #0d5c91; /* oklch(.46 .11 245) | --paused */
  --color-mine: #c5e6e4; /* oklch(.9 .035 192) | --mine (own-row highlight) */
  --color-scrim: #282e3873; /* oklch(.3 .02 262 / .45) | --scrim; modal backdrop */
  --color-code-bg: #f1f3f8; /* oklch(.965 .006 262) | --code-bg */
  --color-scroll-thumb: #353b4547; /* oklch(.35 .02 262 / .28) | --scroll-thumb */
  --color-line: #13161d1f; /* oklch(.2 .014 262 / .12) | --line (hairline rules) */
  --color-chart-1: #0f6b5c; /* pixel sample, generated dashboard series 1 (teal) [estimate] */
  --color-chart-2: #3e6db5; /* pixel sample, generated dashboard series 2 (blue) [estimate] */
  --color-chart-3: #c2842a; /* pixel sample, generated dashboard series 3 (ochre) [estimate] */
  --color-chart-bar-a: #525b6c; /* .dk --bar-usage oklch(.47 .03 262) (studio billing chart) */
  --color-chart-bar-b: #313845; /* .dk --bar-api oklch(.34 .025 262) (studio billing chart) */
  --color-chart-grid: #e3e8ed; /* pixel sample, generated dashboard card border/grid [estimate] */
  /* user chat bubble: bg = primary at 10%, border = primary at 45% (.message-bubble.user .bubble-content) */
  --color-bubble-user-bg: color-mix(in oklab, var(--color-primary) 10%, transparent);
  --color-bubble-user-border: color-mix(in oklab, var(--color-primary) 45%, transparent);
  --shadow-sm: 0 1px 2px oklch(.25 .02 262 / .1); /* --shadow */
  --shadow-md: 0 4px 14px oklch(.25 .02 262 / .12); /* --shadow-md */
  --shadow-lg: 0 1px 0 oklch(1 0 0 / .6) inset, 0 8px 24px oklch(.25 .02 262 / .16); /* --shadow-lg (48x): home composer, dialogs */
  --shadow-focus: 0 0 0 3px var(--color-primary-glow); /* focus ring (27x) */
  --shadow-panel: 0 0 40px #00000073; /* .sp-host side panel */
  --shadow-fun: 0 4px 0 0 var(--color-fun-turq-ink); /* onboarding offset "sticker" shadow; also 0 5px #241f2b47 */
  color-scheme: light;
}

/* DARK (source: :root default) */
[data-theme='dark'] {
  --color-bg-deepest: #0d1117; /* oklch(.176 .014 262) | --bg-deepest; body + messages-area background */
  --color-bg: #0d1117; /* oklch(.176 .014 262) | --bg; .home page background */
  --color-bg-chat: #0d1117; /* oklch(.176 .014 262) | --bg-chat */
  --color-surface: #151920; /* oklch(.212 .016 262) | --surface; sidebar, rail, header, composer area, home composer */
  --color-elevated: #1a1f27; /* oklch(.238 .017 262) | --bg-elevated; cards (.m-card, .deploy-card), dialogs, input-wrapper */
  --color-raised: #242931; /* oklch(.278 .018 262) | --bg-raised; active rail item, attached-file chip */
  --color-hover: #2d333d; /* oklch(.318 .02 262) | --bg-hover; hover on buttons */
  --color-sidebar: #151920; /* oklch(.212 .016 262) | .session-sidebar / .rail background = var(--surface) */
  --color-primary: #2dd0cc; /* oklch(.78 .126 192) | --primary (= --accent); send button, active states, links */
  --color-primary-dark: #1a8582; /* oklch(.56 .09 192) | --primary-dark */
  --color-primary-light: #2dd0cc66; /* oklch(.78 .126 192 / .4) | --primary-light */
  --color-primary-glow: #2dd0cc21; /* oklch(.78 .126 192 / .13) | --primary-glow; focus ring 0 0 0 3px */
  --color-primary-wash: #2dd0cc21; /* oklch(.78 .126 192 / .13) | --primary-wash; selected/"on" button bg */
  --color-primary-ink: #0b0d12; /* oklch(.16 .01 262) | --primary-ink; text/icon on primary */
  --color-accent-2: #c1b1e3; /* oklch(.79 .072 300) | --accent-2 (violet, secondary accent) */
  --color-selection: #2dd0cc47; /* oklch(.78 .126 192 / .28) | --selection; ::selection */
  --color-text: #eeede8; /* oklch(.945 .006 95) | --text */
  --color-text-secondary: #adb1ba; /* oklch(.76 .013 262) | --text-secondary */
  --color-text-muted: #787d87; /* oklch(.59 .016 262) | --text-muted */
  --color-text-faint: #787d87; /* oklch(.59 .016 262) | --text-faint (dark: = --text-muted via later :root) */
  --color-border: #4248536b; /* oklch(.4 .02 262 / .42) | --border; "1px solid var(--border)" used 242x */
  --color-border-light: #42485338; /* oklch(.4 .02 262 / .22) | --border-light; used 200x */
  --color-border-strong: #575e6a8c; /* oklch(.48 .022 262 / .55) | --border-strong; home composer border */
  --color-border-active: #2dd0cc66; /* oklch(.78 .126 192 / .4) | --border-active; focused inputs */
  --color-success: #63ca84; /* oklch(.76 .14 152) | --success; "up"/live/done */
  --color-success-light: #63ca841c; /* oklch(.76 .14 152 / .11) | --success-light; up-badge bg */
  --color-danger: #ed6863; /* oklch(.68 .165 25) | --danger; "down", stop button, errors */
  --color-danger-light: #ed68631c; /* oklch(.68 .165 25 / .11) | --danger-light; down-badge bg */
  --color-danger-text: #f4928a; /* oklch(.76 .12 25) | --danger-text */
  --color-warning: #f0b85a; /* oklch(.815 .128 78) | --warning */
  --color-warning-light: #f0b85a1c; /* oklch(.815 .128 78 / .11) | --warning-light */
  --color-info: #6db0f4; /* oklch(.74 .12 250) | --info */
  --color-info-light: #6db0f41c; /* oklch(.74 .12 250 / .11) | --info-light */
  --color-paused: #71b3e1; /* oklch(.74 .095 240) | --paused */
  --color-mine: #242931; /* oklch(.278 .018 262) | --mine (own-row highlight) */
  --color-scrim: #0203069e; /* oklch(.1 .01 262 / .62) | --scrim; modal backdrop */
  --color-code-bg: #090b0f; /* oklch(.15 .01 262) | --code-bg */
  --color-scroll-thumb: #42485380; /* oklch(.4 .02 262 / .5) | --scroll-thumb */
  --color-line: #f0eeea1a; /* oklch(.95 .006 95 / .1) | --line (hairline rules) */
  --color-chart-1: #0f6b5c; /* pixel sample, generated dashboard series 1 (teal) [estimate] */
  --color-chart-2: #3e6db5; /* pixel sample, generated dashboard series 2 (blue) [estimate] */
  --color-chart-3: #c2842a; /* pixel sample, generated dashboard series 3 (ochre) [estimate] */
  --color-chart-bar-a: #525b6c; /* .dk --bar-usage oklch(.47 .03 262) (studio billing chart) */
  --color-chart-bar-b: #313845; /* .dk --bar-api oklch(.34 .025 262) (studio billing chart) */
  --color-chart-grid: #e3e8ed; /* pixel sample, generated dashboard card border/grid [estimate] */
  /* user chat bubble: bg = primary at 10%, border = primary at 45% (.message-bubble.user .bubble-content) */
  --color-bubble-user-bg: color-mix(in oklab, var(--color-primary) 10%, transparent);
  --color-bubble-user-border: color-mix(in oklab, var(--color-primary) 45%, transparent);
  --shadow-sm: 0 1px 2px oklch(.12 .01 262 / .35); /* --shadow */
  --shadow-md: 0 4px 14px oklch(.12 .01 262 / .4); /* --shadow-md */
  --shadow-lg: 0 1px 0 oklch(.98 0 0 / .03) inset, 0 8px 24px oklch(.12 .01 262 / .5); /* --shadow-lg (48x): home composer, dialogs */
  --shadow-focus: 0 0 0 3px var(--color-primary-glow); /* focus ring (27x) */
  --shadow-panel: 0 0 40px #00000073; /* .sp-host side panel */
  --shadow-fun: 0 4px 0 0 var(--color-fun-turq-ink); /* onboarding offset "sticker" shadow; also 0 5px #241f2b47 */
  color-scheme: dark;
}

/* DIM - optional third mode (source: html[data-theme=dim]) */
[data-theme='dim'] {
  --color-bg-deepest: #393d45; /* oklch(.36 .014 262) | --bg-deepest; body + messages-area background */
  --color-bg: #393d45; /* oklch(.36 .014 262) | --bg; .home page background */
  --color-bg-chat: #393d45; /* oklch(.36 .014 262) | --bg-chat */
  --color-surface: #42474f; /* oklch(.395 .015 262) | --surface; sidebar, rail, header, composer area, home composer */
  --color-elevated: #4b5059; /* oklch(.43 .016 262) | --bg-elevated; cards (.m-card, .deploy-card), dialogs, input-wrapper */
  --color-raised: #565b65; /* oklch(.47 .017 262) | --bg-raised; active rail item, attached-file chip */
  --color-hover: #606671; /* oklch(.51 .018 262) | --bg-hover; hover on buttons */
  --color-sidebar: #42474f; /* oklch(.395 .015 262) | .session-sidebar / .rail background = var(--surface) */
  --color-primary: #46d6d1; /* oklch(.8 .12 192) | --primary (= --accent); send button, active states, links */
  --color-primary-dark: #2d918e; /* oklch(.6 .09 192) | --primary-dark */
  --color-primary-light: #46d6d166; /* oklch(.8 .12 192 / .4) | --primary-light */
  --color-primary-glow: #46d6d124; /* oklch(.8 .12 192 / .14) | --primary-glow; focus ring 0 0 0 3px */
  --color-primary-wash: #46d6d124; /* oklch(.8 .12 192 / .14) | --primary-wash; selected/"on" button bg */
  --color-primary-ink: #14161b; /* oklch(.2 .01 262) | --primary-ink; text/icon on primary */
  --color-accent-2: #cdbeec; /* oklch(.83 .065 300) | --accent-2 (violet, secondary accent) */
  --color-selection: #46d6d14c; /* oklch(.8 .12 192 / .3) | --selection; ::selection */
  --color-text: #f8f7f3; /* oklch(.975 .005 95) | --text */
  --color-text-secondary: #caced4; /* oklch(.85 .01 262) | --text-secondary */
  --color-text-muted: #9da2ab; /* oklch(.71 .014 262) | --text-muted */
  --color-text-faint: #a0a5ae; /* oklch(.72 .014 262) | --text-faint (dark: = --text-muted via later :root) */
  --color-border: #ebeff529; /* oklch(.95 .01 262 / .16) | --border; "1px solid var(--border)" used 242x */
  --color-border-light: #ebeff517; /* oklch(.95 .01 262 / .09) | --border-light; used 200x */
  --color-border-strong: #ebeff542; /* oklch(.95 .01 262 / .26) | --border-strong; home composer border */
  --color-border-active: #46d6d173; /* oklch(.8 .12 192 / .45) | --border-active; focused inputs */
  --color-success: #78d694; /* oklch(.8 .13 152) | --success; "up"/live/done */
  --color-success-light: #78d69424; /* oklch(.8 .13 152 / .14) | --success-light; up-badge bg */
  --color-danger: #ff7e76; /* oklch(.74 .16 25) | --danger; "down", stop button, errors */
  --color-danger-light: #ff7e7629; /* oklch(.74 .16 25 / .16) | --danger-light; down-badge bg */
  --color-danger-text: #ffa8a0; /* oklch(.82 .11 25) | --danger-text */
  --color-warning: #f9c46e; /* oklch(.85 .12 78) | --warning */
  --color-warning-light: #f9c46e24; /* oklch(.85 .12 78 / .14) | --warning-light */
  --color-info: #8cc3fc; /* oklch(.8 .1 250) | --info */
  --color-info-light: #8cc3fc24; /* oklch(.8 .1 250 / .14) | --info-light */
  --color-paused: #81bfeb; /* oklch(.78 .09 240) | --paused */
  --color-mine: #30363f; /* oklch(.33 .018 262) | --mine (own-row highlight) */
  --color-scrim: #04060999; /* oklch(.12 .01 262 / .6) | --scrim; modal backdrop */
  --color-code-bg: #2f3339; /* oklch(.32 .012 262) | --code-bg */
  --color-scroll-thumb: #ebeff538; /* oklch(.95 .01 262 / .22) | --scroll-thumb */
  --color-line: #f9f8f524; /* oklch(.98 .005 95 / .14) | --line (hairline rules) */
  /* user chat bubble: bg = primary at 10%, border = primary at 45% (.message-bubble.user .bubble-content) */
  --color-bubble-user-bg: color-mix(in oklab, var(--color-primary) 10%, transparent);
  --color-bubble-user-border: color-mix(in oklab, var(--color-primary) 45%, transparent);
  --shadow-sm: 0 1px 2px oklch(.12 .01 262 / .35); /* --shadow */
  --shadow-md: 0 4px 14px oklch(.12 .01 262 / .4); /* --shadow-md */
  --shadow-lg: 0 1px 0 oklch(.98 0 0 / .03) inset, 0 8px 24px oklch(.12 .01 262 / .5); /* --shadow-lg (48x): home composer, dialogs */
  --shadow-focus: 0 0 0 3px var(--color-primary-glow); /* focus ring (27x) */
  --shadow-panel: 0 0 40px #00000073; /* .sp-host side panel */
  --shadow-fun: 0 4px 0 0 var(--color-fun-turq-ink); /* onboarding offset "sticker" shadow; also 0 5px #241f2b47 */
  color-scheme: dark;
}

/* ---- Keyframes (names normalised; originals carry Vue scope suffixes) ---- */
@keyframes ref-spin { to { transform: rotate(360deg); } }                      /* spin / *-spin: spinner-small 16px, 2px ring, top color = text, .8s linear */
@keyframes ref-typing-dot {                                                     /* typingDot: 3 dots 6px (5px muted in final cascade), 1.4s, delays 0/.15/.3s */
  0%, 60%, 100% { opacity: .2; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-5px); }
}
@keyframes ref-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }      /* breathe 2.6s / 1.6s: "working" status dot */
@keyframes ref-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }     /* pulse-dot 1.5s */
@keyframes ref-rise { 0% { opacity: 0; transform: translateY(9px); } }         /* rise: content entering, var(--dur) var(--ease-out) both */
@keyframes ref-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }             /* pv-in / overlayIn / pa-fade */
@keyframes ref-dialog-in {                                                      /* dialogIn */
  0% { opacity: 0; transform: scale(.95) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ref-scale-in { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* alert-scale-in .2s ease-out */
@keyframes ref-shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }       /* wave-lines/wave-squares 2s ease-out infinite (skeleton) */
@keyframes ref-sweep { to { transform: translate(100%); } }                     /* sk-sweep / ps-sweep: highlight bar sweeping a skeleton */
@keyframes ref-ping { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(1.9); opacity: 0; } } /* home-ping / rt-ping: live ring */
@keyframes ref-pop { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: none; } }        /* tn-pop / bb-pop .22s */
@keyframes ref-bar-rise { 0% { transform: scaleY(.25); } 100% { transform: none; } }                         /* barRise: chart bars grow */
@keyframes ref-avatar-pulse {                                                   /* avatarPulse / ho-pulse: ring that grows out of the avatar */
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-primary) 35%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-primary) 0%, transparent); }
}
@keyframes ref-act-strip { 0% { inset-inline-start: -40%; } 100% { inset-inline-start: 100%; } }            /* wz-act-strip: indeterminate progress strip */
@keyframes ref-bubble-pop {                                                     /* rail-bubble-pop .32s ease-pop */
  0% { opacity: 0; transform: scale(.84); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {                                       /* same global rule as the source */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============ AIOS swap (commented out). Uncomment to replace the reference colours. ============
   Mapping: dark bg #080D17, light text/surface #F5F7FF, primary #2962EC, light-primary #6B95FF.
[data-theme='dark'] {
  --color-bg-deepest: #080D17;  --color-bg: #080D17;  --color-bg-chat: #080D17;
  --color-surface: #0F1624;     --color-elevated: #141C2D;  --color-raised: #1B2438;  --color-hover: #232E45; --color-sidebar: #0F1624;
  --color-primary: #6B95FF;     --color-primary-dark: #2962EC;  --color-primary-ink: #080D17;
  --color-primary-glow: #6B95FF21; --color-primary-wash: #6B95FF21; --color-primary-light: #6B95FF66;
  --color-border-active: #6B95FF66; --color-selection: #6B95FF47;
  --color-text: #F5F7FF;        --color-text-secondary: #B9C1D6;  --color-text-muted: #7F89A3;
  --color-chart-1: #6B95FF;     --color-chart-2: #2962EC;  --color-chart-3: #F5F7FF;
}
:root {
  --color-bg-deepest: #F5F7FF;  --color-bg: #F5F7FF;  --color-bg-chat: #F5F7FF;
  --color-surface: #FFFFFF;     --color-elevated: #FFFFFF;  --color-sidebar: #FFFFFF;
  --color-primary: #2962EC;     --color-primary-dark: #1E4FC4;  --color-primary-ink: #FFFFFF;
  --color-primary-glow: #2962EC1F; --color-primary-wash: #2962EC1A; --color-primary-light: #2962EC59;
  --color-border-active: #2962EC73; --color-selection: #2962EC33;
  --color-text: #080D17;
  --color-chart-1: #2962EC;     --color-chart-2: #6B95FF;  --color-chart-3: #080D17;
}
============================================================================================== */
@font-face {
  font-family: "Heebo";
  src: url("/t/test-new1/static/fonts/heebo/Heebo-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("/t/test-new1/static/fonts/assistant/Assistant-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Assistant", system-ui, sans-serif;
  --font-disp: "Heebo", "Assistant", system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --radius-dash: 8px;
  --font-size-dash-title: 22px;
  --font-size-dash-number: 26px;
  --layout-send-mobile: 32px;
  --color-chart-4: color-mix(in oklab, var(--color-primary) 55%, var(--color-text));
  --color-chart-5: color-mix(in oklab, var(--color-primary) 35%, var(--color-warning));
  --color-chart-6: color-mix(in oklab, var(--color-info) 70%, var(--color-primary));
  --color-avatar-ceo: #2962EC;
  --color-avatar-marketing: #7C5CBF;
  --color-avatar-sales: #1F9D55;
  --color-card: var(--color-elevated);
  --color-success-bg: var(--color-success-light);
  --color-danger-bg: var(--color-danger-light);
  --color-dash-good: var(--color-success);
  --color-dash-bad: var(--color-danger);
  --color-dash-flat: var(--color-text-muted);
}

.studio-body, .studio-body * { box-sizing: border-box; }
.studio-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  background: var(--color-bg);
  color: var(--color-text);
  height: 100dvh;
}
.studio {
  display: flex;
  flex-direction: row;
  block-size: 100dvh;
  background: var(--color-bg);
}
.studio-talks {
  inline-size: var(--layout-sidebar-w);
  flex: 0 0 var(--layout-sidebar-w);
  background: var(--color-surface);
  border-inline-end: var(--border-hair);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  min-inline-size: 0;
}
.studio-thread {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-chat);
}
.thread-scroll {
  flex: 1 1 auto;
  overflow: auto;
  max-inline-size: var(--layout-chat-max);
  inline-size: 100%;
  margin-inline: auto;
  padding: var(--space-4);
}
.studio-now {
  inline-size: var(--layout-panel-w);
  flex: 0 0 var(--layout-panel-w);
  background: var(--color-surface);
  border-inline-start: var(--border-hair);
  padding: var(--space-3);
  box-shadow: var(--shadow-panel);
}
.studio-rail {
  inline-size: var(--layout-rail-w);
  flex: 0 0 var(--layout-rail-w);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-3);
  background: var(--color-bg-deepest);
}
.rail-btn, .tool, .send, .stop, .btn {
  font-family: var(--font-disp);
  min-block-size: var(--space-page);
  min-inline-size: var(--space-page);
  border-radius: var(--radius-sm);
  border: var(--border-hair);
  background: var(--color-surface);
  color: var(--color-text);
}
.btn.primary, .send {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
}
.send { inline-size: var(--layout-send-size); block-size: var(--layout-send-size); }
.stop {
  background: var(--color-danger);
  inline-size: var(--layout-send-size);
  block-size: var(--layout-send-size);
}
.hero h1 {
  font-family: var(--font-disp);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-tight);
}
.composer {
  border: var(--border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  margin: var(--space-3);
  padding: var(--space-3);
}
.composer textarea {
  inline-size: 100%;
  min-block-size: var(--layout-composer-min-h);
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}
.file-input {
  position: absolute;
  inline-size: var(--space-1);
  block-size: var(--space-1);
  opacity: 0;
}
.tool { position: relative; }
.user-bubble {
  background: var(--color-bubble-user-bg);
  border: var(--border-hair);
  border-color: var(--color-bubble-user-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.summary {
  background: var(--color-card);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  border-inline-end: var(--space-2) solid var(--color-success);
  padding: var(--space-3);
}
.sheet {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--layout-chat-max);
  margin-inline: auto;
  padding: var(--space-5);
}
.sheet-title {
  font-family: var(--font-disp);
  font-size: var(--font-size-dash-title);
  font-weight: var(--font-weight-bold);
}
.sheet-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sheet-tab {
  font-family: var(--font-disp);
  border-radius: var(--radius-pill);
  border: var(--border-hair);
  background: var(--color-card);
  padding: var(--space-2) var(--space-4);
}
.sheet-tab[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
.cards-view {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.cards-view[hidden], .chart-view[hidden], .table-view[hidden] { display: none; }
.sheet-card {
  background: var(--color-card);
  border: var(--border-hair);
  border-radius: var(--radius-dash);
  padding: var(--space-4);
}
.sheet-value {
  font-family: var(--font-disp);
  font-size: var(--font-size-dash-number);
  font-weight: var(--font-weight-bold);
}
.delta-good { color: var(--color-dash-good); background: var(--color-success-bg); }
.delta-bad { color: var(--color-dash-bad); background: var(--color-danger-bg); }
.delta-flat, .delta-none { color: var(--color-dash-flat); }
.chart { inline-size: 100%; block-size: auto; direction: ltr; }
.chart-label { font-size: var(--font-size-2xs); fill: var(--color-text-muted); }
.chart-line { fill: none; stroke: var(--color-chart-1); stroke-width: 2; }
.chart-area { fill: var(--color-chart-1); opacity: .2; }
.chart-point { fill: var(--color-card); stroke: var(--color-chart-1); }
.chart-series-4 { stroke: var(--color-chart-4); }
.chart-series-5 { stroke: var(--color-chart-5); }
.chart-series-6 { stroke: var(--color-chart-6); }
.mono, .timer, .log-line { font-family: var(--font-mono); }
.timer { color: var(--color-primary-light); }
.thread-head { min-block-size: var(--layout-header-h); display: flex; align-items: center; gap: var(--space-2); }
.mark-run { outline: var(--border-hair); }
.preview-frame { inline-size: 100%; min-block-size: var(--layout-workbench-w); border: 0; background: var(--color-card); }
.brand-word::before { content: "המוח"; }
.brand-logo { display: inline-block; inline-size: var(--layout-rail-item-w); block-size: var(--space-6); }
.rows-notice { font-size: var(--font-size-sm); }
.gift-amount { font-family: var(--font-disp); font-size: var(--font-size-4xl); font-weight: var(--font-weight-heavy); color: var(--color-primary-ink); }
.gift { background: var(--color-primary); color: var(--color-primary-ink); padding: var(--space-4); border-radius: var(--radius); }
.project-dialog { border: var(--border-hair); border-radius: var(--radius-md); background: var(--color-card); color: var(--color-text); }
.chip-file { font-family: var(--font-mono); }
@media (max-width: 700px) {
  .studio-body { overflow-x: clip; }
  .studio-talks, .studio-now { display: none; }
  .studio { flex-direction: column; max-inline-size: 100%; min-inline-size: 0; }
  .studio-thread, .thread-scroll, .composer { max-inline-size: 100%; min-inline-size: 0; }
  .studio-rail {
    flex-direction: row;
    flex-wrap: wrap;
    inline-size: 100%;
    flex-basis: auto;
    order: 2;
  }
  .rail-btn, .tool { min-inline-size: 0; max-inline-size: 100%; }
  .composer { order: 3; }
  .studio-thread { order: 1; }
  .send, .stop { inline-size: var(--layout-send-mobile); block-size: var(--layout-send-mobile); }
  .cards-view { grid-template-columns: 1fr; }
  .sheet-tabs { flex-wrap: wrap; overflow: visible; }
  .hero h1 { font-size: var(--font-size-3xl); }
}

:root {
  --color-bg-deepest: #F5F7FF;  --color-bg: #F5F7FF;  --color-bg-chat: #F5F7FF;
  --color-surface: #FFFFFF;     --color-elevated: #FFFFFF;  --color-sidebar: #FFFFFF;
  --color-primary: #2962EC;     --color-primary-dark: #1E4FC4;  --color-primary-ink: #FFFFFF;
  --color-primary-glow: #2962EC1F; --color-primary-wash: #2962EC1A; --color-primary-light: #2962EC59;
  --color-border-active: #2962EC73; --color-selection: #2962EC33;
  --color-text: #080D17;
  --color-chart-1: #2962EC;     --color-chart-2: #6B95FF;  --color-chart-3: #080D17;
  --color-chart-4: #6B95FF;     --color-chart-5: #1E4FC4;  --color-chart-6: #080D17;
  --color-avatar-ceo: #2962EC;  --color-avatar-marketing: #6B95FF; --color-avatar-sales: #080D17;
}
.brand-word::before { content: "המוח"; }
.brand-logo { background: none; }