/* GroupChatRobot app looks. Generated from one look table and contrast-checked (see docs/redo/DESIGN.md).
   Apply with <html data-look="<id>" data-scheme="light|dark">; theme-boot.js sets both before first paint.
   No attributes: Paper, light, or dark when the OS is dark.
   theme.js reads --theme-color into <meta name="theme-color">.
   Robot colours are a brand constant: the same cream card with a gold outline on every light side, the same warm
   charcoal with a gold outline on every dark side. Private colours (incog-*) are the same slate-violet card everywhere.
   Display names are neutral. Never put third-party product names in user-facing text. */

/* ---------- Theme-independent tokens ---------- */
:root {
  /* type: system stack so the app feels native. 1rem = platform body size. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --fs-caption: 0.75rem;    /* timestamps, ticks, badges */
  --fs-footnote: 0.8125rem; /* sender names, system lines, day divider */
  --fs-subhead: 0.9375rem;  /* secondary rows, file meta, quote text */
  --fs-body: 1rem;          /* messages, inputs, rows */
  --fs-title3: 1.25rem;     /* sheet titles */
  --fs-title2: 1.375rem;    /* join room name */
  --fs-title1: 1.75rem;     /* screen titles: Explore, New room */
  --fs-large: 2.125rem;     /* empty state art caption on desktop only */
  --lh-tight: 1.2; --lh-body: 1.35; --lh-read: 1.5;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* spacing: every step at least 25% from its neighbour */
  --space-0: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --gutter: 16px;

  /* radius */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px;

  /* sizes */
  --header-h: 56px; --composer-min-h: 56px; --hit: 44px; --icon-sm: 20px; --icon-md: 24px; --icon-stroke: 1.5;
  --avatar: 32px; --rail-w: 300px; --chat-max: 720px; --bubble-max: min(78%, 560px); --sheet-max: 480px;

  /* motion */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms; --dur-4: 400ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  /* springs from public/app/springs.js: use each easing with its own duration */
  --spring-snap: linear(0, 0.05, 0.163, 0.298, 0.432, 0.554, 0.658, 0.743, 0.811, 0.864, 0.904, 0.933, 0.955, 0.97, 0.981, 0.988, 0.993, 0.996, 0.998, 0.999, 1);
  --spring-snap-dur: 300ms;
  --spring-bubble: linear(0, 0.023, 0.08, 0.159, 0.248, 0.34, 0.431, 0.516, 0.595, 0.666, 0.728, 0.781, 0.827, 0.865, 0.896, 0.922, 0.943, 0.959, 0.972, 0.982, 0.99, 0.995, 0.999, 1.002, 1.003, 1.004, 1.005, 1.005, 1.005, 1.005, 1.004, 1.004, 1);
  --spring-bubble-dur: 470ms;
  --spring-sheet: linear(0, 0.017, 0.06, 0.12, 0.189, 0.263, 0.338, 0.411, 0.48, 0.545, 0.604, 0.658, 0.706, 0.748, 0.786, 0.819, 0.847, 0.872, 0.893, 0.911, 0.926, 0.939, 0.95, 0.959, 0.967, 0.973, 0.979, 0.983, 0.986, 0.989, 0.992, 0.994, 0.995, 0.996, 0.997, 0.998, 1);
  --spring-sheet-dur: 540ms;
  --spring-pop: linear(0, 0.027, 0.099, 0.199, 0.317, 0.441, 0.563, 0.678, 0.781, 0.87, 0.944, 1.002, 1.046, 1.077, 1.096, 1.105, 1.107, 1.102, 1.093, 1.082, 1.069, 1.056, 1.043, 1.031, 1.02, 1.011, 1.004, 0.998, 0.994, 0.991, 0.989, 0.989, 0.989, 0.989, 0.99, 0.992, 0.993, 0.994, 0.996, 0.997, 0.998, 1);
  --spring-pop-dur: 610ms;

  /* elevation: shadows tinted by each pack's --shadow-color (H S L triplet) */
  --elev-1: 0 1px 2px hsl(var(--shadow-color) / 0.14), 0 1px 1px hsl(var(--shadow-color) / 0.08);
  --elev-2: 0 8px 24px hsl(var(--shadow-color) / 0.18), 0 2px 6px hsl(var(--shadow-color) / 0.10);
  --elev-3: 0 16px 40px hsl(var(--shadow-color) / 0.24), 0 4px 10px hsl(var(--shadow-color) / 0.12);
  --blur: saturate(180%) blur(20px);

  --z-list: 1; --z-header: 10; --z-banner: 20; --z-scrim: 40; --z-sheet: 41; --z-toast: 60;
}
@media (min-width: 1024px) and (pointer: fine) {
  :root { --bubble-max: min(70%, 520px); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-2: 0.01ms; --dur-3: 0.01ms; --dur-4: 0.01ms; --spring-snap-dur: 0.01ms; --spring-bubble-dur: 0.01ms; --spring-sheet-dur: 0.01ms; --spring-pop-dur: 0.01ms; }
}

/* ---------- Theme packs ---------- */
/* Paper, light, is also the no-attribute default */
:root {
  color-scheme: light;
  --page-bg: #F4F5F7;
  --wallpaper-base: #EEF0F3;
  --wallpaper: radial-gradient(#D3D8E0 1px, transparent 1.2px) 0 0 / 24px 24px, #EEF0F3;
  --surface: rgba(250,251,252,0.82);
  --surface-solid: #FAFBFC;
  --sheet-bg: #FFFFFF;
  --scrim: rgba(13,16,21,0.36);
  --text: #14171C;
  --text-muted: #5B6270;
  --border: #D9DDE3;
  --hairline: rgba(20,23,28,0.10);
  --accent: #2448E0;
  --accent-text: #FFFFFF;
  --accent-soft: #E6EBFD;
  --link: #1F40C8;
  --danger: #C4262E;
  --danger-text: #FFFFFF;
  --success: #1E7A3C;
  --bubble-in-bg: #FFFFFF;
  --bubble-in-text: #14171C;
  --bubble-in-meta: #646B78;
  --bubble-in-link: #1F40C8;
  --bubble-out-bg: #2448E0;
  --bubble-out-text: #FFFFFF;
  --bubble-out-meta: rgba(255,255,255,0.82);
  --bubble-out-link: #FFFFFF;
  --tick: rgba(255,255,255,0.82);
  --tick-read: #9FF0FF;
  --system-bg: rgba(255,255,255,0.86);
  --system-text: #4C5361;
  --unread-bg: #E6EBFD;
  --unread-text: #1F3AB5;
  --reaction-bg: #FFFFFF;
  --reaction-mine-bg: #E6EBFD;
  --reaction-text: #14171C;
  --reaction-mine-border: #2448E0;
  --quote-in-bg: #F1F3F6;
  --quote-out-bg: rgba(0,0,0,0.18);
  --quote-bar: #2448E0;
  --quote-out-bar: #FFFFFF;
  --field-bg: #FFFFFF;
  --field-text: #14171C;
  --field-placeholder: #666D7A;
  --send-bg: #2448E0;
  --send-icon: #FFFFFF;
  --selection-bg: rgba(36,72,224,0.22);
  --focus-ring: #2448E0;
  --shadow-color: 220 30% 20%;
  --skeleton-base: #E4E7EC;
  --skeleton-shine: #F2F4F7;
  --theme-color: #FAFBFC;
  --bubble-radius: 16px;
  --bubble-radius-tail: 4px;
  --bubble-pad: 6px 10px 5px;
  --run-gap: 2px;
  --group-gap: 8px;
  --bubble-shadow: var(--elev-1);
  --tail: none;
  --robot-bg: #FBF4E4;
  --robot-text: #1F1A10;
  --robot-meta: #6B5B35;
  --robot-border: #D9B957;
  --robot-fold: #E3C77E;
  --robot-name: #7A5608;
  --robot-link: #1F3FBF;
  --robot-avatar-bg: #E3C77E;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #F2EFFB;
  --incog-raised: #E3DDF6;
  --incog-border: #C7BDEA;
  --incog-text: #1F1A38;
  --incog-muted: #5A5280;
  --incog-link: #4A36C4;
  --incog-accent: #5B46D0;
  --incog-fill: #5B46D0;
  --incog-on-fill: #FFFFFF;
  --name-1: #B42318;
  --name-2: #9A4D00;
  --name-3: #1E7530;
  --name-4: #0B6E8A;
  --name-5: #3B4BC4;
  --name-6: #8E2F9E;
}

/* Paper, dark, is the default when the OS is dark and theme-boot.js has not run */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme]) {
    color-scheme: dark;
    --page-bg: #0D1015;
    --wallpaper-base: #0D1015;
    --wallpaper: radial-gradient(#1C222B 1px, transparent 1.2px) 0 0 / 24px 24px, #0D1015;
    --surface: rgba(18,22,28,0.80);
    --surface-solid: #12161C;
    --sheet-bg: #171B22;
    --scrim: rgba(0,0,0,0.55);
    --text: #E8EBF0;
    --text-muted: #9098A6;
    --border: #262C36;
    --hairline: rgba(232,235,240,0.10);
    --accent: #3D5DF5;
    --accent-text: #FFFFFF;
    --accent-soft: #1C2447;
    --link: #8FA6FF;
    --danger: #FF6B6B;
    --danger-text: #1A0A0A;
    --success: #5FD68A;
    --bubble-in-bg: #1C2129;
    --bubble-in-text: #E8EBF0;
    --bubble-in-meta: #98A0AE;
    --bubble-in-link: #9DB1FF;
    --bubble-out-bg: #3452E8;
    --bubble-out-text: #FFFFFF;
    --bubble-out-meta: rgba(255,255,255,0.82);
    --bubble-out-link: #FFFFFF;
    --tick: rgba(255,255,255,0.82);
    --tick-read: #9FF0FF;
    --system-bg: rgba(28,33,41,0.92);
    --system-text: #A7AEBB;
    --unread-bg: #1C2447;
    --unread-text: #B4C3FF;
    --reaction-bg: #1C2129;
    --reaction-mine-bg: #1C2447;
    --reaction-text: #E8EBF0;
    --reaction-mine-border: #6F88FF;
    --quote-in-bg: #242A34;
    --quote-out-bg: rgba(0,0,0,0.20);
    --quote-bar: #8FA6FF;
    --quote-out-bar: #FFFFFF;
    --field-bg: #1C2129;
    --field-text: #E8EBF0;
    --field-placeholder: #8A92A0;
    --send-bg: #3D5DF5;
    --send-icon: #FFFFFF;
    --selection-bg: rgba(143,166,255,0.30);
    --focus-ring: #8FA6FF;
    --shadow-color: 220 40% 2%;
    --skeleton-base: #1C2129;
    --skeleton-shine: #252B35;
    --theme-color: #12161C;
    --bubble-radius: 16px;
    --bubble-radius-tail: 4px;
    --bubble-pad: 6px 10px 5px;
    --run-gap: 2px;
    --group-gap: 8px;
    --bubble-shadow: var(--elev-1);
    --tail: none;
    --robot-bg: #262219;
    --robot-text: #EFE9DC;
    --robot-meta: #B9AD90;
    --robot-border: #9C7F3A;
    --robot-fold: #8A7338;
    --robot-name: #EDC45F;
    --robot-link: #A9BBFF;
    --robot-avatar-bg: #EDC45F;
    --robot-avatar-fg: #2A2110;
    --incog-bg: #24203A;
    --incog-raised: #363058;
    --incog-border: #4A4374;
    --incog-text: #ECE8FA;
    --incog-muted: #B3ABD6;
    --incog-link: #C3B8FF;
    --incog-accent: #9D8FFF;
    --incog-fill: #6C5AE0;
    --incog-on-fill: #FFFFFF;
    --name-1: #FF8A7A;
    --name-2: #F2B25C;
    --name-3: #6FD68A;
    --name-4: #5CCFE6;
    --name-5: #9AAAFF;
    --name-6: #E39AF0;
  }
}

/* Paper, light */
[data-look="paper"][data-scheme="light"] {
  color-scheme: light;
  --page-bg: #F4F5F7;
  --wallpaper-base: #EEF0F3;
  --wallpaper: radial-gradient(#D3D8E0 1px, transparent 1.2px) 0 0 / 24px 24px, #EEF0F3;
  --surface: rgba(250,251,252,0.82);
  --surface-solid: #FAFBFC;
  --sheet-bg: #FFFFFF;
  --scrim: rgba(13,16,21,0.36);
  --text: #14171C;
  --text-muted: #5B6270;
  --border: #D9DDE3;
  --hairline: rgba(20,23,28,0.10);
  --accent: #2448E0;
  --accent-text: #FFFFFF;
  --accent-soft: #E6EBFD;
  --link: #1F40C8;
  --danger: #C4262E;
  --danger-text: #FFFFFF;
  --success: #1E7A3C;
  --bubble-in-bg: #FFFFFF;
  --bubble-in-text: #14171C;
  --bubble-in-meta: #646B78;
  --bubble-in-link: #1F40C8;
  --bubble-out-bg: #2448E0;
  --bubble-out-text: #FFFFFF;
  --bubble-out-meta: rgba(255,255,255,0.82);
  --bubble-out-link: #FFFFFF;
  --tick: rgba(255,255,255,0.82);
  --tick-read: #9FF0FF;
  --system-bg: rgba(255,255,255,0.86);
  --system-text: #4C5361;
  --unread-bg: #E6EBFD;
  --unread-text: #1F3AB5;
  --reaction-bg: #FFFFFF;
  --reaction-mine-bg: #E6EBFD;
  --reaction-text: #14171C;
  --reaction-mine-border: #2448E0;
  --quote-in-bg: #F1F3F6;
  --quote-out-bg: rgba(0,0,0,0.18);
  --quote-bar: #2448E0;
  --quote-out-bar: #FFFFFF;
  --field-bg: #FFFFFF;
  --field-text: #14171C;
  --field-placeholder: #666D7A;
  --send-bg: #2448E0;
  --send-icon: #FFFFFF;
  --selection-bg: rgba(36,72,224,0.22);
  --focus-ring: #2448E0;
  --shadow-color: 220 30% 20%;
  --skeleton-base: #E4E7EC;
  --skeleton-shine: #F2F4F7;
  --theme-color: #FAFBFC;
  --bubble-radius: 16px;
  --bubble-radius-tail: 4px;
  --bubble-pad: 6px 10px 5px;
  --run-gap: 2px;
  --group-gap: 8px;
  --bubble-shadow: var(--elev-1);
  --tail: none;
  --robot-bg: #FBF4E4;
  --robot-text: #1F1A10;
  --robot-meta: #6B5B35;
  --robot-border: #D9B957;
  --robot-fold: #E3C77E;
  --robot-name: #7A5608;
  --robot-link: #1F3FBF;
  --robot-avatar-bg: #E3C77E;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #F2EFFB;
  --incog-raised: #E3DDF6;
  --incog-border: #C7BDEA;
  --incog-text: #1F1A38;
  --incog-muted: #5A5280;
  --incog-link: #4A36C4;
  --incog-accent: #5B46D0;
  --incog-fill: #5B46D0;
  --incog-on-fill: #FFFFFF;
  --name-1: #B42318;
  --name-2: #9A4D00;
  --name-3: #1E7530;
  --name-4: #0B6E8A;
  --name-5: #3B4BC4;
  --name-6: #8E2F9E;
}

/* Paper, dark */
[data-look="paper"][data-scheme="dark"] {
  color-scheme: dark;
  --page-bg: #0D1015;
  --wallpaper-base: #0D1015;
  --wallpaper: radial-gradient(#1C222B 1px, transparent 1.2px) 0 0 / 24px 24px, #0D1015;
  --surface: rgba(18,22,28,0.80);
  --surface-solid: #12161C;
  --sheet-bg: #171B22;
  --scrim: rgba(0,0,0,0.55);
  --text: #E8EBF0;
  --text-muted: #9098A6;
  --border: #262C36;
  --hairline: rgba(232,235,240,0.10);
  --accent: #3D5DF5;
  --accent-text: #FFFFFF;
  --accent-soft: #1C2447;
  --link: #8FA6FF;
  --danger: #FF6B6B;
  --danger-text: #1A0A0A;
  --success: #5FD68A;
  --bubble-in-bg: #1C2129;
  --bubble-in-text: #E8EBF0;
  --bubble-in-meta: #98A0AE;
  --bubble-in-link: #9DB1FF;
  --bubble-out-bg: #3452E8;
  --bubble-out-text: #FFFFFF;
  --bubble-out-meta: rgba(255,255,255,0.82);
  --bubble-out-link: #FFFFFF;
  --tick: rgba(255,255,255,0.82);
  --tick-read: #9FF0FF;
  --system-bg: rgba(28,33,41,0.92);
  --system-text: #A7AEBB;
  --unread-bg: #1C2447;
  --unread-text: #B4C3FF;
  --reaction-bg: #1C2129;
  --reaction-mine-bg: #1C2447;
  --reaction-text: #E8EBF0;
  --reaction-mine-border: #6F88FF;
  --quote-in-bg: #242A34;
  --quote-out-bg: rgba(0,0,0,0.20);
  --quote-bar: #8FA6FF;
  --quote-out-bar: #FFFFFF;
  --field-bg: #1C2129;
  --field-text: #E8EBF0;
  --field-placeholder: #8A92A0;
  --send-bg: #3D5DF5;
  --send-icon: #FFFFFF;
  --selection-bg: rgba(143,166,255,0.30);
  --focus-ring: #8FA6FF;
  --shadow-color: 220 40% 2%;
  --skeleton-base: #1C2129;
  --skeleton-shine: #252B35;
  --theme-color: #12161C;
  --bubble-radius: 16px;
  --bubble-radius-tail: 4px;
  --bubble-pad: 6px 10px 5px;
  --run-gap: 2px;
  --group-gap: 8px;
  --bubble-shadow: var(--elev-1);
  --tail: none;
  --robot-bg: #262219;
  --robot-text: #EFE9DC;
  --robot-meta: #B9AD90;
  --robot-border: #9C7F3A;
  --robot-fold: #8A7338;
  --robot-name: #EDC45F;
  --robot-link: #A9BBFF;
  --robot-avatar-bg: #EDC45F;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #24203A;
  --incog-raised: #363058;
  --incog-border: #4A4374;
  --incog-text: #ECE8FA;
  --incog-muted: #B3ABD6;
  --incog-link: #C3B8FF;
  --incog-accent: #9D8FFF;
  --incog-fill: #6C5AE0;
  --incog-on-fill: #FFFFFF;
  --name-1: #FF8A7A;
  --name-2: #F2B25C;
  --name-3: #6FD68A;
  --name-4: #5CCFE6;
  --name-5: #9AAAFF;
  --name-6: #E39AF0;
}

/* Blue Bubbles, light */
[data-look="blue"][data-scheme="light"] {
  color-scheme: light;
  --page-bg: #FFFFFF;
  --wallpaper-base: #FFFFFF;
  --wallpaper: #FFFFFF;
  --surface: rgba(249,249,249,0.82);
  --surface-solid: #F9F9F9;
  --sheet-bg: #FFFFFF;
  --scrim: rgba(0,0,0,0.40);
  --text: #000000;
  --text-muted: #6C6C70;
  --border: #D1D1D6;
  --hairline: rgba(0,0,0,0.12);
  --accent: #0A66D6;
  --accent-text: #FFFFFF;
  --accent-soft: #E5F0FD;
  --link: #0A5FC8;
  --danger: #D70015;
  --danger-text: #FFFFFF;
  --success: #248A3D;
  --bubble-in-bg: #E9E9EB;
  --bubble-in-text: #000000;
  --bubble-in-meta: #636366;
  --bubble-in-link: #0A5FC8;
  --bubble-out-bg: #0A66D6;
  --bubble-out-text: #FFFFFF;
  --bubble-out-meta: rgba(255,255,255,0.92);
  --bubble-out-link: #FFFFFF;
  --tick: rgba(255,255,255,0.92);
  --tick-read: #BFE8FF;
  --system-bg: rgba(233,233,235,0.92);
  --system-text: #5C5C60;
  --unread-bg: #E5F0FD;
  --unread-text: #0A5FC8;
  --reaction-bg: #E9E9EB;
  --reaction-mine-bg: #E5F0FD;
  --reaction-text: #000000;
  --reaction-mine-border: #0A66D6;
  --quote-in-bg: #DCDCDF;
  --quote-out-bg: rgba(0,0,0,0.18);
  --quote-bar: #0A66D6;
  --quote-out-bar: #FFFFFF;
  --field-bg: #FFFFFF;
  --field-text: #000000;
  --field-placeholder: #6C6C70;
  --send-bg: #0A66D6;
  --send-icon: #FFFFFF;
  --selection-bg: rgba(10,102,214,0.22);
  --focus-ring: #0A66D6;
  --shadow-color: 0 0% 20%;
  --skeleton-base: #E9E9EB;
  --skeleton-shine: #F4F4F5;
  --theme-color: #F9F9F9;
  --bubble-radius: 18px;
  --bubble-radius-tail: 18px;
  --bubble-pad: 7px 12px 6px;
  --run-gap: 2px;
  --group-gap: 10px;
  --bubble-shadow: none;
  --tail: block;
  --robot-bg: #FBF4E4;
  --robot-text: #1F1A10;
  --robot-meta: #6B5B35;
  --robot-border: #D9B957;
  --robot-fold: #E3C77E;
  --robot-name: #7A5608;
  --robot-link: #1F3FBF;
  --robot-avatar-bg: #E3C77E;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #F2EFFB;
  --incog-raised: #E3DDF6;
  --incog-border: #C7BDEA;
  --incog-text: #1F1A38;
  --incog-muted: #5A5280;
  --incog-link: #4A36C4;
  --incog-accent: #5B46D0;
  --incog-fill: #5B46D0;
  --incog-on-fill: #FFFFFF;
  --name-1: #B42318;
  --name-2: #9A4D00;
  --name-3: #1E7530;
  --name-4: #0B6E8A;
  --name-5: #3B4BC4;
  --name-6: #8E2F9E;
}

/* Blue Bubbles, dark */
[data-look="blue"][data-scheme="dark"] {
  color-scheme: dark;
  --page-bg: #000000;
  --wallpaper-base: #000000;
  --wallpaper: #000000;
  --surface: rgba(22,22,24,0.78);
  --surface-solid: #161618;
  --sheet-bg: #1C1C1E;
  --scrim: rgba(0,0,0,0.6);
  --text: #FFFFFF;
  --text-muted: #98989F;
  --border: #2C2C2E;
  --hairline: rgba(255,255,255,0.12);
  --accent: #0062D1;
  --accent-text: #FFFFFF;
  --accent-soft: #0B2545;
  --link: #4FA3FF;
  --danger: #FF453A;
  --danger-text: #1A0505;
  --success: #30D158;
  --bubble-in-bg: #26252A;
  --bubble-in-text: #FFFFFF;
  --bubble-in-meta: #A1A1A8;
  --bubble-in-link: #5AAEFF;
  --bubble-out-bg: #0E6BD8;
  --bubble-out-text: #FFFFFF;
  --bubble-out-meta: rgba(255,255,255,0.94);
  --bubble-out-link: #FFFFFF;
  --tick: rgba(255,255,255,0.94);
  --tick-read: #BFE8FF;
  --system-bg: rgba(38,37,42,0.9);
  --system-text: #A1A1A8;
  --unread-bg: #26252A;
  --unread-text: #8CC4FF;
  --reaction-bg: #26252A;
  --reaction-mine-bg: #0B2545;
  --reaction-text: #FFFFFF;
  --reaction-mine-border: #4FA3FF;
  --quote-in-bg: #333238;
  --quote-out-bg: rgba(0,0,0,0.22);
  --quote-bar: #4FA3FF;
  --quote-out-bar: #FFFFFF;
  --field-bg: #1C1C1E;
  --field-text: #FFFFFF;
  --field-placeholder: #8E8E95;
  --send-bg: #0062D1;
  --send-icon: #FFFFFF;
  --selection-bg: rgba(79,163,255,0.32);
  --focus-ring: #4FA3FF;
  --shadow-color: 0 0% 0%;
  --skeleton-base: #1C1C1E;
  --skeleton-shine: #2A2A2D;
  --theme-color: #161618;
  --bubble-radius: 18px;
  --bubble-radius-tail: 18px;
  --bubble-pad: 7px 12px 6px;
  --run-gap: 2px;
  --group-gap: 10px;
  --bubble-shadow: none;
  --tail: block;
  --robot-bg: #262219;
  --robot-text: #EFE9DC;
  --robot-meta: #B9AD90;
  --robot-border: #9C7F3A;
  --robot-fold: #8A7338;
  --robot-name: #EDC45F;
  --robot-link: #A9BBFF;
  --robot-avatar-bg: #EDC45F;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #24203A;
  --incog-raised: #363058;
  --incog-border: #4A4374;
  --incog-text: #ECE8FA;
  --incog-muted: #B3ABD6;
  --incog-link: #C3B8FF;
  --incog-accent: #9D8FFF;
  --incog-fill: #6C5AE0;
  --incog-on-fill: #FFFFFF;
  --name-1: #FF8A7A;
  --name-2: #F2B25C;
  --name-3: #6FD68A;
  --name-4: #5CCFE6;
  --name-5: #9AAAFF;
  --name-6: #E39AF0;
}

/* Green Chat, light */
[data-look="green"][data-scheme="light"] {
  color-scheme: light;
  --page-bg: #F0F2F5;
  --wallpaper-base: #EFEAE2;
  --wallpaper: radial-gradient(#DDD5C8 1px, transparent 1.2px) 0 0 / 18px 18px, #EFEAE2;
  --surface: rgba(240,242,245,0.88);
  --surface-solid: #F0F2F5;
  --sheet-bg: #FFFFFF;
  --scrim: rgba(11,20,26,0.35);
  --text: #111B21;
  --text-muted: #54656F;
  --border: #D1D7DB;
  --hairline: rgba(17,27,33,0.10);
  --accent: #008069;
  --accent-text: #FFFFFF;
  --accent-soft: #D9FDD3;
  --link: #026E9E;
  --danger: #C62828;
  --danger-text: #FFFFFF;
  --success: #008069;
  --bubble-in-bg: #FFFFFF;
  --bubble-in-text: #111B21;
  --bubble-in-meta: #5F6E77;
  --bubble-in-link: #026E9E;
  --bubble-out-bg: #D9FDD3;
  --bubble-out-text: #111B21;
  --bubble-out-meta: #4E6358;
  --bubble-out-link: #026A94;
  --tick: #4E6358;
  --tick-read: #0279B0;
  --system-bg: rgba(255,255,255,0.92);
  --system-text: #54656F;
  --unread-bg: rgba(255,255,255,0.92);
  --unread-text: #00705B;
  --reaction-bg: #FFFFFF;
  --reaction-mine-bg: #D9FDD3;
  --reaction-text: #111B21;
  --reaction-mine-border: #008069;
  --quote-in-bg: #F5F6F6;
  --quote-out-bg: #D1F4CC;
  --quote-bar: #008069;
  --quote-out-bar: #06A77D;
  --field-bg: #FFFFFF;
  --field-text: #111B21;
  --field-placeholder: #5F6E77;
  --send-bg: #008069;
  --send-icon: #FFFFFF;
  --selection-bg: rgba(0,128,105,0.22);
  --focus-ring: #008069;
  --shadow-color: 200 25% 20%;
  --skeleton-base: #E4E6E8;
  --skeleton-shine: #F3F4F5;
  --theme-color: #F0F2F5;
  --bubble-radius: 8px;
  --bubble-radius-tail: 0px;
  --bubble-pad: 5px 9px 4px;
  --run-gap: 2px;
  --group-gap: 8px;
  --bubble-shadow: var(--elev-1);
  --tail: none;
  --header-bg: #0A6B5F;
  --header-text: #FFFFFF;
  --header-muted: #D6EBE7;
  --header-link: #FFFFFF;
  --robot-bg: #FBF4E4;
  --robot-text: #1F1A10;
  --robot-meta: #6B5B35;
  --robot-border: #D9B957;
  --robot-fold: #E3C77E;
  --robot-name: #7A5608;
  --robot-link: #1F3FBF;
  --robot-avatar-bg: #E3C77E;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #F2EFFB;
  --incog-raised: #E3DDF6;
  --incog-border: #C7BDEA;
  --incog-text: #1F1A38;
  --incog-muted: #5A5280;
  --incog-link: #4A36C4;
  --incog-accent: #5B46D0;
  --incog-fill: #5B46D0;
  --incog-on-fill: #FFFFFF;
  --name-1: #B42318;
  --name-2: #9A4D00;
  --name-3: #1E7530;
  --name-4: #0B6E8A;
  --name-5: #3B4BC4;
  --name-6: #8E2F9E;
}

/* Green Chat, dark */
[data-look="green"][data-scheme="dark"] {
  color-scheme: dark;
  --page-bg: #111B21;
  --wallpaper-base: #0B141A;
  --wallpaper: radial-gradient(#16232B 1px, transparent 1.2px) 0 0 / 18px 18px, #0B141A;
  --surface: rgba(32,44,51,0.88);
  --surface-solid: #202C33;
  --sheet-bg: #233138;
  --scrim: rgba(0,0,0,0.55);
  --text: #E9EDEF;
  --text-muted: #90A0AA;
  --border: #2A3942;
  --hairline: rgba(233,237,239,0.10);
  --accent: #00A884;
  --accent-text: #0B141A;
  --accent-soft: #0A332C;
  --link: #53BDEB;
  --danger: #F7808C;
  --danger-text: #1A0508;
  --success: #00A884;
  --bubble-in-bg: #202C33;
  --bubble-in-text: #E9EDEF;
  --bubble-in-meta: #99A8B1;
  --bubble-in-link: #53BDEB;
  --bubble-out-bg: #005C4B;
  --bubble-out-text: #E9EDEF;
  --bubble-out-meta: #B3D3CA;
  --bubble-out-link: #8FE0FF;
  --tick: #B3D3CA;
  --tick-read: #53BDEB;
  --system-bg: rgba(24,34,41,0.94);
  --system-text: #9AA9B2;
  --unread-bg: rgba(24,34,41,0.94);
  --unread-text: #3FD1AA;
  --reaction-bg: #202C33;
  --reaction-mine-bg: #0A332C;
  --reaction-text: #E9EDEF;
  --reaction-mine-border: #00A884;
  --quote-in-bg: #1A2328;
  --quote-out-bg: #025144;
  --quote-bar: #00A884;
  --quote-out-bar: #06CF9C;
  --field-bg: #2A3942;
  --field-text: #E9EDEF;
  --field-placeholder: #9AA9B2;
  --send-bg: #00A884;
  --send-icon: #0B141A;
  --selection-bg: rgba(0,168,132,0.30);
  --focus-ring: #00A884;
  --shadow-color: 200 40% 2%;
  --skeleton-base: #1F2A30;
  --skeleton-shine: #2A3942;
  --theme-color: #202C33;
  --bubble-radius: 8px;
  --bubble-radius-tail: 0px;
  --bubble-pad: 5px 9px 4px;
  --run-gap: 2px;
  --group-gap: 8px;
  --bubble-shadow: var(--elev-1);
  --tail: none;
  --robot-bg: #262219;
  --robot-text: #EFE9DC;
  --robot-meta: #B9AD90;
  --robot-border: #9C7F3A;
  --robot-fold: #8A7338;
  --robot-name: #EDC45F;
  --robot-link: #A9BBFF;
  --robot-avatar-bg: #EDC45F;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #24203A;
  --incog-raised: #363058;
  --incog-border: #4A4374;
  --incog-text: #ECE8FA;
  --incog-muted: #B3ABD6;
  --incog-link: #C3B8FF;
  --incog-accent: #9D8FFF;
  --incog-fill: #6C5AE0;
  --incog-on-fill: #FFFFFF;
  --name-1: #FF8A7A;
  --name-2: #F2B25C;
  --name-3: #6FD68A;
  --name-4: #5CCFE6;
  --name-5: #9AAAFF;
  --name-6: #E39AF0;
}

/* Sky, light */
[data-look="sky"][data-scheme="light"] {
  color-scheme: light;
  --page-bg: #F1F3F5;
  --wallpaper-base: #D3E0EA;
  --wallpaper: radial-gradient(ellipse 70% 50% at 18% 12%, rgba(255,255,255,0.55), transparent 70%), radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1.2px) 0 0 / 22px 22px, linear-gradient(165deg, #DEE9F1 0%, #CDDCE8 55%, #D6E3E0 100%);
  --surface: rgba(255,255,255,0.86);
  --surface-solid: #FFFFFF;
  --sheet-bg: #FFFFFF;
  --scrim: rgba(0,0,0,0.3);
  --text: #000000;
  --text-muted: #6A7075;
  --border: #DADCE0;
  --hairline: rgba(0,0,0,0.08);
  --accent: #2375C8;
  --accent-text: #FFFFFF;
  --accent-soft: #E3F0FC;
  --link: #1768B8;
  --danger: #D32F2F;
  --danger-text: #FFFFFF;
  --success: #3A8A36;
  --bubble-in-bg: #FFFFFF;
  --bubble-in-text: #000000;
  --bubble-in-meta: #6A7075;
  --bubble-in-link: #1768B8;
  --bubble-out-bg: #EEFFDE;
  --bubble-out-text: #000000;
  --bubble-out-meta: #2F7A35;
  --bubble-out-link: #1768B8;
  --tick: #2F7A35;
  --tick-read: #2F7A35;
  --system-bg: rgba(28,52,38,0.62);
  --system-text: #FFFFFF;
  --unread-bg: rgba(255,255,255,0.9);
  --unread-text: #1768B8;
  --reaction-bg: #FFFFFF;
  --reaction-mine-bg: #E3F0FC;
  --reaction-text: #000000;
  --reaction-mine-border: #2375C8;
  --quote-in-bg: #EAF3FB;
  --quote-out-bg: #DDF5C8;
  --quote-bar: #2375C8;
  --quote-out-bar: #4FAE4E;
  --field-bg: #FFFFFF;
  --field-text: #000000;
  --field-placeholder: #6A7075;
  --send-bg: #2375C8;
  --send-icon: #FFFFFF;
  --selection-bg: rgba(35,117,200,0.22);
  --focus-ring: #2375C8;
  --shadow-color: 150 20% 20%;
  --skeleton-base: #E6E9EC;
  --skeleton-shine: #F4F6F8;
  --theme-color: #FFFFFF;
  --bubble-radius: 16px;
  --bubble-radius-tail: 16px;
  --bubble-pad: 6px 10px 5px;
  --run-gap: 2px;
  --group-gap: 8px;
  --bubble-shadow: var(--elev-1);
  --tail: block;
  --robot-bg: #FBF4E4;
  --robot-text: #1F1A10;
  --robot-meta: #6B5B35;
  --robot-border: #D9B957;
  --robot-fold: #E3C77E;
  --robot-name: #7A5608;
  --robot-link: #1F3FBF;
  --robot-avatar-bg: #E3C77E;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #F2EFFB;
  --incog-raised: #E3DDF6;
  --incog-border: #C7BDEA;
  --incog-text: #1F1A38;
  --incog-muted: #5A5280;
  --incog-link: #4A36C4;
  --incog-accent: #5B46D0;
  --incog-fill: #5B46D0;
  --incog-on-fill: #FFFFFF;
  --name-1: #B42318;
  --name-2: #9A4D00;
  --name-3: #1E7530;
  --name-4: #0B6E8A;
  --name-5: #3B4BC4;
  --name-6: #8E2F9E;
}

/* Sky, dark */
[data-look="sky"][data-scheme="dark"] {
  color-scheme: dark;
  --page-bg: #0E1621;
  --wallpaper-base: #0E1621;
  --wallpaper: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.2px) 0 0 / 22px 22px, linear-gradient(165deg, #1A2A3B 0%, #0E1621 55%, #14202B 100%);
  --surface: rgba(23,33,43,0.88);
  --surface-solid: #17212B;
  --sheet-bg: #17212B;
  --scrim: rgba(0,0,0,0.55);
  --text: #F5F5F5;
  --text-muted: #8B9BAA;
  --border: #243140;
  --hairline: rgba(245,245,245,0.08);
  --accent: #3872B6;
  --accent-text: #FFFFFF;
  --accent-soft: #1D3450;
  --link: #71BAFA;
  --danger: #EF5B5B;
  --danger-text: #1A0505;
  --success: #6FD68A;
  --bubble-in-bg: #182533;
  --bubble-in-text: #F5F5F5;
  --bubble-in-meta: #8FA0B0;
  --bubble-in-link: #71BAFA;
  --bubble-out-bg: #2B5278;
  --bubble-out-text: #FFFFFF;
  --bubble-out-meta: #A9CBEE;
  --bubble-out-link: #C3E3FF;
  --tick: #A9CBEE;
  --tick-read: #8FD0FF;
  --system-bg: rgba(24,37,51,0.92);
  --system-text: #A3B3C2;
  --unread-bg: rgba(24,37,51,0.92);
  --unread-text: #71BAFA;
  --reaction-bg: #182533;
  --reaction-mine-bg: #1D3450;
  --reaction-text: #F5F5F5;
  --reaction-mine-border: #71BAFA;
  --quote-in-bg: #1E2F40;
  --quote-out-bg: #34608A;
  --quote-bar: #71BAFA;
  --quote-out-bar: #C3E3FF;
  --field-bg: #17212B;
  --field-text: #F5F5F5;
  --field-placeholder: #8B9BAA;
  --send-bg: #3872B6;
  --send-icon: #FFFFFF;
  --selection-bg: rgba(113,186,250,0.30);
  --focus-ring: #71BAFA;
  --shadow-color: 215 40% 3%;
  --skeleton-base: #182533;
  --skeleton-shine: #223347;
  --theme-color: #17212B;
  --bubble-radius: 16px;
  --bubble-radius-tail: 16px;
  --bubble-pad: 6px 10px 5px;
  --run-gap: 2px;
  --group-gap: 8px;
  --bubble-shadow: var(--elev-1);
  --tail: block;
  --robot-bg: #262219;
  --robot-text: #EFE9DC;
  --robot-meta: #B9AD90;
  --robot-border: #9C7F3A;
  --robot-fold: #8A7338;
  --robot-name: #EDC45F;
  --robot-link: #A9BBFF;
  --robot-avatar-bg: #EDC45F;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #24203A;
  --incog-raised: #363058;
  --incog-border: #4A4374;
  --incog-text: #ECE8FA;
  --incog-muted: #B3ABD6;
  --incog-link: #C3B8FF;
  --incog-accent: #9D8FFF;
  --incog-fill: #6C5AE0;
  --incog-on-fill: #FFFFFF;
  --name-1: #FF8A7A;
  --name-2: #F2B25C;
  --name-3: #6FD68A;
  --name-4: #5CCFE6;
  --name-5: #9AAAFF;
  --name-6: #E39AF0;
}

/* Quiet Blue, light */
[data-look="quiet"][data-scheme="light"] {
  color-scheme: light;
  --page-bg: #FFFFFF;
  --wallpaper-base: #FFFFFF;
  --wallpaper: #FFFFFF;
  --surface: rgba(255,255,255,0.86);
  --surface-solid: #FFFFFF;
  --sheet-bg: #FFFFFF;
  --scrim: rgba(0,0,0,0.40);
  --text: #1B1B1D;
  --text-muted: #5E5E5E;
  --border: #DADADA;
  --hairline: rgba(0,0,0,0.10);
  --accent: #2660E0;
  --accent-text: #FFFFFF;
  --accent-soft: #E8EFFD;
  --link: #2558CC;
  --danger: #C62828;
  --danger-text: #FFFFFF;
  --success: #2E7D32;
  --bubble-in-bg: #E9E9E9;
  --bubble-in-text: #1B1B1D;
  --bubble-in-meta: #5E5E5E;
  --bubble-in-link: #2558CC;
  --bubble-out-bg: #2660E0;
  --bubble-out-text: #FFFFFF;
  --bubble-out-meta: rgba(255,255,255,0.92);
  --bubble-out-link: #FFFFFF;
  --tick: rgba(255,255,255,0.92);
  --tick-read: #C9DBFF;
  --system-bg: rgba(233,233,233,0.92);
  --system-text: #5E5E5E;
  --unread-bg: #E8EFFD;
  --unread-text: #2558CC;
  --reaction-bg: #E9E9E9;
  --reaction-mine-bg: #E8EFFD;
  --reaction-text: #1B1B1D;
  --reaction-mine-border: #2660E0;
  --quote-in-bg: #DADADA;
  --quote-out-bg: rgba(0,0,0,0.18);
  --quote-bar: #2660E0;
  --quote-out-bar: #FFFFFF;
  --field-bg: #F0F0F0;
  --field-text: #1B1B1D;
  --field-placeholder: #5E5E5E;
  --send-bg: #2660E0;
  --send-icon: #FFFFFF;
  --selection-bg: rgba(38,96,224,0.22);
  --focus-ring: #2660E0;
  --shadow-color: 0 0% 20%;
  --skeleton-base: #EBEBEB;
  --skeleton-shine: #F5F5F5;
  --theme-color: #FFFFFF;
  --bubble-radius: 18px;
  --bubble-radius-tail: 4px;
  --bubble-pad: 7px 12px 6px;
  --run-gap: 3px;
  --group-gap: 12px;
  --bubble-shadow: none;
  --tail: none;
  --robot-bg: #FBF4E4;
  --robot-text: #1F1A10;
  --robot-meta: #6B5B35;
  --robot-border: #D9B957;
  --robot-fold: #E3C77E;
  --robot-name: #7A5608;
  --robot-link: #1F3FBF;
  --robot-avatar-bg: #E3C77E;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #F2EFFB;
  --incog-raised: #E3DDF6;
  --incog-border: #C7BDEA;
  --incog-text: #1F1A38;
  --incog-muted: #5A5280;
  --incog-link: #4A36C4;
  --incog-accent: #5B46D0;
  --incog-fill: #5B46D0;
  --incog-on-fill: #FFFFFF;
  --name-1: #B42318;
  --name-2: #9A4D00;
  --name-3: #1E7530;
  --name-4: #0B6E8A;
  --name-5: #3B4BC4;
  --name-6: #8E2F9E;
}

/* Quiet Blue, dark */
[data-look="quiet"][data-scheme="dark"] {
  color-scheme: dark;
  --page-bg: #121212;
  --wallpaper-base: #121212;
  --wallpaper: #121212;
  --surface: rgba(27,27,27,0.86);
  --surface-solid: #1B1B1B;
  --sheet-bg: #1E1E1E;
  --scrim: rgba(0,0,0,0.60);
  --text: #E8E8E8;
  --text-muted: #A0A0A0;
  --border: #333333;
  --hairline: rgba(255,255,255,0.10);
  --accent: #2F63D9;
  --accent-text: #FFFFFF;
  --accent-soft: #1A2A4D;
  --link: #8FB0FF;
  --danger: #FF6B6B;
  --danger-text: #1A0A0A;
  --success: #5FD68A;
  --bubble-in-bg: #2E2E2E;
  --bubble-in-text: #E8E8E8;
  --bubble-in-meta: #A0A0A0;
  --bubble-in-link: #8FB0FF;
  --bubble-out-bg: #2F63D9;
  --bubble-out-text: #FFFFFF;
  --bubble-out-meta: rgba(255,255,255,0.92);
  --bubble-out-link: #FFFFFF;
  --tick: rgba(255,255,255,0.92);
  --tick-read: #C9DBFF;
  --system-bg: rgba(46,46,46,0.92);
  --system-text: #A8A8A8;
  --unread-bg: #1A2A4D;
  --unread-text: #B4C8FF;
  --reaction-bg: #2E2E2E;
  --reaction-mine-bg: #1A2A4D;
  --reaction-text: #E8E8E8;
  --reaction-mine-border: #8FB0FF;
  --quote-in-bg: #3A3A3A;
  --quote-out-bg: rgba(0,0,0,0.20);
  --quote-bar: #8FB0FF;
  --quote-out-bar: #FFFFFF;
  --field-bg: #2A2A2A;
  --field-text: #E8E8E8;
  --field-placeholder: #A0A0A0;
  --send-bg: #2F63D9;
  --send-icon: #FFFFFF;
  --selection-bg: rgba(143,176,255,0.30);
  --focus-ring: #8FB0FF;
  --shadow-color: 0 0% 0%;
  --skeleton-base: #2A2A2A;
  --skeleton-shine: #363636;
  --theme-color: #1B1B1B;
  --bubble-radius: 18px;
  --bubble-radius-tail: 4px;
  --bubble-pad: 7px 12px 6px;
  --run-gap: 3px;
  --group-gap: 12px;
  --bubble-shadow: none;
  --tail: none;
  --robot-bg: #262219;
  --robot-text: #EFE9DC;
  --robot-meta: #B9AD90;
  --robot-border: #9C7F3A;
  --robot-fold: #8A7338;
  --robot-name: #EDC45F;
  --robot-link: #A9BBFF;
  --robot-avatar-bg: #EDC45F;
  --robot-avatar-fg: #2A2110;
  --incog-bg: #24203A;
  --incog-raised: #363058;
  --incog-border: #4A4374;
  --incog-text: #ECE8FA;
  --incog-muted: #B3ABD6;
  --incog-link: #C3B8FF;
  --incog-accent: #9D8FFF;
  --incog-fill: #6C5AE0;
  --incog-on-fill: #FFFFFF;
  --name-1: #FF8A7A;
  --name-2: #F2B25C;
  --name-3: #6FD68A;
  --name-4: #5CCFE6;
  --name-5: #9AAAFF;
  --name-6: #E39AF0;
}

/* Solid chrome when blur is unavailable or the person asked for less transparency */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --surface: var(--surface-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  :root, [data-look][data-scheme] { --surface: var(--surface-solid); --blur: none; }
}
/* More contrast: meta text and hairlines take the full text colour */
@media (prefers-contrast: more) {
  :root, [data-look][data-scheme] {
    --text-muted: var(--text); --bubble-in-meta: var(--bubble-in-text); --bubble-out-meta: var(--bubble-out-text);
    --robot-meta: var(--robot-text); --incog-muted: var(--incog-text); --hairline: var(--border); --field-placeholder: var(--text-muted);
  }
}
::selection { background: var(--selection-bg); }