._.goldie._.@._.goldie._. · 3 works · 0 followers

A unique and luxurious golden hour inspired theme. if you like the color gold (like i do) you'll love this theme! (ITS ALSO GOOD FOR THE EYES, as it's a dark mode!)

Published October 17, 2026

view: 1
download

Golden Hour

ThemeNo adult content

Download

Lumiverse theme bundle · works in Lumiverse

Versions · 2

Version 2 · October 17, 2026 · Latest

fixed some formatting issues

Gallery

2 images

homepage
background

Palette

9 colors · 7 settings

dark

Primary#dcb445
Secondary#b8965a
Background#0c0906
Text#f1e6c8
Danger#e5674f
Success#93c47d
Warning#f2b84b
Speech#ffe3a3
Thoughts#b8a27a

Theme controls7 settings

Accent color
43° · 68% · 55%
Preferred mode
dark
Corner scale
0.6
Glass surfaces
Yes
Type scale
1
Interface scale
1

Stylesheets

2 stylesheets

Main stylesheet

/* ═══════════════════════════════════════════════════════════
   GOLDEN HOUR
   Onyx-black dark mode, Art-Deco gold. Slow sunburst rays, rising gold dust,
   a drifting fan-scale floor, a periodic light sheen, gilded portrait frames,
   and a "gallery hall" home page where every character gets an arched,
   gold-foil frame with a spinning glint.
   FONT: "GN Lora" (Lora, open licence) - names/headings are set in tracked capitals.
   Every control lives in :root below. Change a value, save, done.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── TEXT ─────────────────────────────────────────────── */
  --gn-font-color: #f1e6c8;                 /* main ivory text */
  /* ★ CHAT TEXT COLOUR: change this ONE value and every message recolours.
       Spoken dialogue, *actions* and **bold** are tinted from it automatically.
       Presets: #f1e6c8 warm ivory (default) · #ffffff white · #ffe9a8 pale gold · #f5d0c5 rose gold · #cfe8ff moonlit blue */
  --gn-message-color: #f1e6c8;
  --gn-heading-color: #f4d98e;
  --gn-dialogue-color: color-mix(in srgb, var(--gn-message-color) 62%, #ffd978);   /* "spoken words" */
  --gn-action-color: color-mix(in srgb, var(--gn-message-color) 72%, #b39a62);     /* *italic actions* */
  --gn-bold-color: color-mix(in srgb, var(--gn-message-color) 40%, #fff6dc);   /* **bold** - or set any colour */
  --gn-name-color: #e9c46a;
  --gn-date-color: color-mix(in srgb, var(--gn-message-color) 55%, var(--gn-gold));   /* the #0 · Aug · 1:11 PM stamp */
  --gn-link-color: #ffdf9a;
  --gn-font-color-soft: color-mix(in srgb, var(--gn-font-color) 70%, #0d0a07);
  --gn-font-color-dim: color-mix(in srgb, var(--gn-font-color) 46%, #0d0a07);

  --gn-font: "GN Lora Star", "Lora", Georgia, "Times New Roman", serif;               /* body: Lora with star-dotted i / j */
  --gn-font-display: "GN Dunhill", "GN Lora Star", "Lora", Georgia, serif;           /* names + titles: Art-Deco capitals */
  --gn-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gn-chat-font-scale: 1;
  --gn-meta-font-scale: 0.8;
  --gn-letter-spacing: 0.005em;
  --gn-text-glow: 0 0 10px rgba(212, 175, 55, 0.10);   /* none = crisp text */
  --gn-caps-tracking: 0.16em;                          /* tracking of NAMES / TITLES */

  /* ── MOTION & DECOR (0 = hide, bigger duration = slower) ── */
  --gn-rays-opacity: 0.55;     /* rotating sunburst from the top */
  --gn-dust-opacity: 0.85;     /* rising gold dust */
  --gn-floor-opacity: 0.42;    /* drifting fan-scale floor */
  --gn-sheen-opacity: 1;       /* light sheen sweeping across */
  --gn-rays-speed: 300s;       /* one full turn of the sunburst */
  --gn-dust-speed: 40s;        /* time for dust to rise one 420px tile */
  --gn-floor-speed: 50s;       /* time to drift 400px */
  --gn-sheen-speed: 20s;       /* one sweep (it pauses between) */
  --gn-floor-height: 130px;
  --gn-radius: 8px;
  --gn-blur: 4px;
  --gn-msg-decor: 1;           /* corner brackets + crest on messages */

  /* ── PORTRAITS ────────────────────────────────────────── */
  --gn-avatar-width-char: var(--ui-portrait-w);
  --gn-avatar-height-char: var(--ui-portrait-h);
  --gn-avatar-width-user: var(--ui-portrait-w);
  --gn-avatar-height-user: var(--ui-portrait-h);
  --gn-avatar-sticky-top: 72px;
  --gn-portrait-arch: 84px;     /* roundness of the arch top (10px = plain frame) */
  --gn-portrait-backing: #0c0906;
  --gn-img-scale: 1;
  --gn-img-x: center;
  --gn-img-y: top;

  /* ── GLASS ────────────────────────────────────────────── */
  --gn-content-radius: 10px;
  --gn-content-blur: 5px;
  --gn-content-glass: rgba(14, 10, 6, 0.64);
  --gn-content-glass-user: rgba(30, 21, 9, 0.62);

  /* ── GOLD PALETTE ─────────────────────────────────────── */
  --gn-gold: #d4af37;
  --gn-gold-bright: #f4d57a;
  --gn-gold-pale: #fff0c2;
  --gn-gold-deep: #9a7420;
  --gn-accent: #dcb445;
  --gn-accent-hot: #efc95e;
  --gn-accent-soft: #f3dd9b;
  --gn-ink: #0c0906;
  --gn-ink-2: #15100a;
  --gn-ink-3: #1d160c;
  --gn-foil-text: linear-gradient(115deg, #b8892a 0%, #e9c458 20%, #fff3cf 34%, #e9c458 48%, #b8892a 64%, #f4d57a 82%, #b8892a 100%);
  --gn-foil: linear-gradient(115deg, #8a6414 0%, #d4af37 18%, #fff0c2 32%, #d4af37 46%, #9a7420 62%, #f4d57a 80%, #8a6414 100%);

  --gn-glass: rgba(18, 13, 7, 0.62);
  --gn-glass-hover: rgba(30, 22, 11, 0.70);
  --gn-glass-border: rgba(212, 175, 55, 0.32);
  --gn-glass-border-hover: rgba(244, 213, 122, 0.62);
  --gn-drawer-panel: rgba(13, 10, 6, 0.80);
  --gn-drawer-icon-strip: rgba(8, 6, 4, 0.84);
  --gn-drawer-toggle: rgba(10, 8, 5, 0.70);
  --gn-tab-active: rgba(212, 175, 55, 0.20);
  --gn-tab-hover: rgba(212, 175, 55, 0.11);
  --gn-nav-hover: rgba(212, 175, 55, 0.13);
  --gn-nav-active: rgba(212, 175, 55, 0.24);
  --gn-modal: rgba(14, 10, 6, 0.92);
  --gn-modal-backdrop: rgba(0, 0, 0, 0.55);
  --gn-card-border: rgba(212, 175, 55, 0.36);
  --gn-card-glow: rgba(212, 175, 55, 0.14);
  --gn-quote-bg: rgba(212, 175, 55, 0.07);
  --gn-code-bg: rgba(6, 5, 3, 0.72);
  --gn-input-bg: rgba(12, 9, 5, 0.78);
  --gn-input-border: rgba(212, 175, 55, 0.44);
  --gn-scrollbar: rgba(212, 175, 55, 0.40);
  --gn-scrollbar-hover: rgba(244, 213, 122, 0.70);
  --gn-selection: rgba(212, 175, 55, 0.38);

  /* ── CATHEDRAL PILLARS ────────────────────────────────── */
  /* Big gold fluted columns, floor to ceiling, either side of the hall. To switch them off, put this in the
     personal tweaks at the bottom:   :root { --gn-pillar-layers: linear-gradient(transparent, transparent); } */
  --gn-pillar-layers:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='100' viewBox='0 0 128 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%233d2c0a'/%3E%3Cstop offset='.2' stop-color='%23a8801f'/%3E%3Cstop offset='.45' stop-color='%23e3c25a'/%3E%3Cstop offset='.62' stop-color='%23f1d98a'/%3E%3Cstop offset='.84' stop-color='%23b58a25'/%3E%3Cstop offset='1' stop-color='%233a2909'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23140c02' stop-opacity='.5'/%3E%3Cstop offset='.4' stop-color='%23140c02' stop-opacity='0'/%3E%3Cstop offset='.75' stop-color='%23fff0c2' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%23140c02' stop-opacity='.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='.6'%3E%3Crect width='128' height='100' fill='url(%23c)'/%3E%3Crect x='9.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='25.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='41.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='57.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='73.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='89.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='105.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='0' width='8' height='100' fill='%232a1c06' fill-opacity='.35'/%3E%3Crect x='120' width='8' height='100' fill='%232a1c06' fill-opacity='.35'/%3E%3Crect x='7.5' width='1.2' height='100' fill='%23f4d57a' fill-opacity='.8'/%3E%3Crect x='119.3' width='1.2' height='100' fill='%23f4d57a' fill-opacity='.6'/%3E%3C/g%3E%3C/svg%3E") left 0 top 0 / 128px 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='100' viewBox='0 0 128 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%233d2c0a'/%3E%3Cstop offset='.2' stop-color='%23a8801f'/%3E%3Cstop offset='.45' stop-color='%23e3c25a'/%3E%3Cstop offset='.62' stop-color='%23f1d98a'/%3E%3Cstop offset='.84' stop-color='%23b58a25'/%3E%3Cstop offset='1' stop-color='%233a2909'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23140c02' stop-opacity='.5'/%3E%3Cstop offset='.4' stop-color='%23140c02' stop-opacity='0'/%3E%3Cstop offset='.75' stop-color='%23fff0c2' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%23140c02' stop-opacity='.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='.6'%3E%3Cg transform='translate(128 0) scale(-1 1)'%3E%3Crect width='128' height='100' fill='url(%23c)'/%3E%3Crect x='9.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='25.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='41.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='57.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='73.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='89.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='105.5' y='0' width='13.0' height='100' fill='url(%23f)'/%3E%3Crect x='0' width='8' height='100' fill='%232a1c06' fill-opacity='.35'/%3E%3Crect x='120' width='8' height='100' fill='%232a1c06' fill-opacity='.35'/%3E%3Crect x='7.5' width='1.2' height='100' fill='%23f4d57a' fill-opacity='.8'/%3E%3Crect x='119.3' width='1.2' height='100' fill='%23f4d57a' fill-opacity='.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right 0 top 0 / 128px 100% no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent) left 128px top 0 / 54px 100% no-repeat,
    linear-gradient(270deg, rgba(0, 0, 0, 0.5), transparent) right 128px top 0 / 54px 100% no-repeat;
}
@media (max-width: 900px) { :root { --gn-pillar-layers: linear-gradient(transparent, transparent); } }

/* ─── FONT ─────────────────────────────────────────────── */
@font-face { font-family: "GN Lora Star"; font-style: normal; font-weight: 100 599; font-display: swap; src: url("assets/fonts/gn-lora-star-regular.woff") format("woff"); }
@font-face { font-family: "GN Lora Star"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("assets/fonts/gn-lora-star-bold.woff") format("woff"); }
@font-face { font-family: "GN Lora Star"; font-style: italic; font-weight: 100 599; font-display: swap; src: url("assets/fonts/gn-lora-star-italic.woff") format("woff"); }
@font-face { font-family: "GN Lora Star"; font-style: italic; font-weight: 600 900; font-display: swap; src: url("assets/fonts/gn-lora-star-bolditalic.woff") format("woff"); }
/* Display face: capitals, digits and punctuation ONLY. Lowercase always falls through to the star-dotted Lora above. */
@font-face {
  font-family: "GN Dunhill"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/gn-dunhill.woff") format("woff");
  unicode-range: U+0020-0040, U+0041-005A, U+005B-0060, U+007B-007E, U+00A0-00BF, U+00C0-00DE, U+2010-2027, U+2030-203A, U+2212;
}

/* ─── LUMIVERSE TOKENS ─────────────────────────────────── */
:root,
html,
html[data-theme-mode="dark"],
body {
  --lumiverse-primary: var(--gn-accent) !important;
  --lumiverse-primary-hover: var(--gn-accent-hot) !important;
  --lumiverse-primary-light: rgba(220, 180, 69, 0.18) !important;
  --lumiverse-primary-soft: rgba(220, 180, 69, 0.14) !important;
  --lumiverse-primary-muted: rgba(220, 180, 69, 0.55) !important;
  --lumiverse-primary-text: var(--gn-accent-soft) !important;
  --lumiverse-primary-010: rgba(220, 180, 69, 0.08) !important;
  --lumiverse-primary-015: rgba(220, 180, 69, 0.12) !important;
  --lumiverse-primary-020: rgba(220, 180, 69, 0.18) !important;
  --lumiverse-primary-050: rgba(220, 180, 69, 0.45) !important;
  --lumiverse-primary-contrast: #1a1204 !important;
  --lumiverse-primary-deep: #9a7420 !important;
  --lumiverse-primary-deep-hover: #7f5f18 !important;
  --lumiverse-primary-deep-contrast: #fff7e0 !important;

  --lumiverse-bg: #0d0a07 !important;
  --lumiverse-bg-elevated: #1a140b !important;
  --lumiverse-bg-hover: #251c0e !important;
  --lumiverse-bg-dark: rgba(0, 0, 0, 0.38) !important;
  --lumiverse-bg-darker: rgba(0, 0, 0, 0.55) !important;
  --lumiverse-bg-deep: #070605 !important;
  --lumiverse-bg-deep-080: rgba(7, 6, 5, 0.82) !important;
  --lumiverse-surface: rgba(34, 26, 13, 0.62) !important;
  --lumiverse-surface-raised: rgba(46, 35, 17, 0.72) !important;
  --lumiverse-surface-hover: rgba(60, 46, 22, 0.72) !important;
  --lumiverse-surface-muted: rgba(212, 175, 55, 0.06) !important;
  --lumiverse-input-bg: rgba(10, 8, 5, 0.62) !important;

  --lumiverse-text: var(--gn-font-color) !important;
  --lumiverse-text-primary: var(--gn-font-color) !important;
  --lumiverse-text-secondary: var(--gn-font-color-soft) !important;
  --lumiverse-text-muted: var(--gn-font-color-soft) !important;
  --lumiverse-text-dim: var(--gn-font-color-dim) !important;
  --lumiverse-text-hint: var(--gn-font-color-dim) !important;
  --lumiverse-icon: var(--gn-accent-soft) !important;
  --lumiverse-icon-muted: color-mix(in srgb, var(--gn-accent-soft) 70%, #0d0a07) !important;
  --lumiverse-icon-dim: color-mix(in srgb, var(--gn-accent-soft) 45%, #0d0a07) !important;

  --lumiverse-border: rgba(212, 175, 55, 0.30) !important;
  --lumiverse-border-hover: rgba(244, 213, 122, 0.58) !important;
  --lumiverse-border-light: rgba(212, 175, 55, 0.15) !important;
  --lumiverse-border-subtle: rgba(212, 175, 55, 0.10) !important;
  --lumiverse-border-neutral: rgba(255, 240, 205, 0.14) !important;
  --lumiverse-border-neutral-hover: rgba(255, 240, 205, 0.30) !important;
  --lumiverse-secondary: rgba(184, 150, 90, 0.14) !important;
  --lumiverse-secondary-hover: rgba(184, 150, 90, 0.24) !important;
  --lumiverse-secondary-border: rgba(184, 150, 90, 0.34) !important;

  --lumiverse-danger: #e5674f !important;
  --lumiverse-danger-hover: #cf4f39 !important;
  --lumiverse-success: #93c47d !important;
  --lumiverse-warning: #f2b84b !important;
  --lumiverse-error: #e5674f !important;
  --lumiverse-danger-015: rgba(229, 103, 79, 0.16) !important;
  --lumiverse-success-015: rgba(147, 196, 125, 0.16) !important;
  --lumiverse-warning-015: rgba(242, 184, 75, 0.16) !important;

  --lumiverse-radius-sm: 4px !important;
  --lumiverse-radius: 6px !important;
  --lumiverse-radius-md: 8px !important;
  --lumiverse-radius-lg: 12px !important;
  --lumiverse-radius-xl: 16px !important;
  --lcs-radius: 10px !important;
  --lcs-radius-sm: 6px !important;
  --lcs-radius-xs: 4px !important;
  --lumiverse-shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.40) !important;
  --lumiverse-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
  --lumiverse-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.65) !important;
  --lumiverse-modal-backdrop: var(--gn-modal-backdrop) !important;

  --lumiverse-fill-subtle: rgba(255, 230, 170, 0.03) !important;
  --lumiverse-fill: rgba(255, 230, 170, 0.06) !important;
  --lumiverse-fill-hover: rgba(255, 230, 170, 0.10) !important;
  --lumiverse-fill-medium: rgba(255, 230, 170, 0.15) !important;
  --lumiverse-fill-strong: rgba(255, 230, 170, 0.22) !important;
  --lumiverse-fill-heavy: rgba(8, 6, 3, 0.58) !important;
  --lumiverse-fill-deepest: rgba(4, 3, 2, 0.80) !important;

  --lumiverse-font-family: var(--gn-font) !important;
  --lumiverse-font-mono: var(--gn-font-mono) !important;
  --lumiverse-prose-dialogue: var(--gn-dialogue-color) !important;
  --lumiverse-prose-italic: var(--gn-action-color) !important;
  --lumiverse-prose-bold: var(--gn-bold-color) !important;
  --lumiverse-prose-blockquote: var(--gn-font-color-soft) !important;
  --lumiverse-prose-link: var(--gn-link-color) !important;

  --lcs-glass-bg: var(--gn-glass) !important;
  --lcs-glass-bg-hover: var(--gn-glass-hover) !important;
  --lcs-glass-border: var(--gn-glass-border) !important;
  --lcs-glass-border-hover: var(--gn-glass-border-hover) !important;
  --lcs-glass-blur: var(--gn-blur) !important;
}

/* ─── TYPOGRAPHY ───────────────────────────────────────── */
html, body, #root, [data-theme],
[class*="_app_"], [class*="_shell_"], [class*="_layout_"], [class*="_modal_"],
[class*="_drawer_"], [class*="_panel_"], [class*="_menu_"], [class*="_popover_"],
[class*="_tooltip_"], button, input, select, textarea, label {
  font-family: var(--gn-font) !important;
}
html, body, #root { color: var(--gn-font-color); letter-spacing: var(--gn-letter-spacing); font-variant-ligatures: none; }

h1, h2, h3, h4, h5, h6,
[class*="_title_"], [class*="_heading_"], [class*="_headerTitle_"], [class*="_panelTitle_"],
[class*="_modalTitle_"], [class*="_sectionTitle_"], [class*="_panelHeader_"] {
  font-family: var(--gn-font) !important;
  font-weight: 600 !important;
  color: var(--gn-heading-color);
}
[class*="_panelTitle_"], [class*="_modalTitle_"], [class*="_sectionTitle_"] {
  font-family: var(--gn-font-display) !important;
  font-weight: 400 !important;
  font-size: 1.12em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
strong, b { font-weight: 700 !important; }
code, pre, kbd, samp, [class*="_highlightPre_"], [class*="_textareaHighlighted_"],
[class*="_token_"], [class*="_counter_"] { font-family: var(--gn-font-mono) !important; }

/* ═══════════════════════════════════════════════════════════
   THE HALL: backgrounds + animated layers
   ═══════════════════════════════════════════════════════════ */

html, body {
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(212, 175, 55, 0.20), transparent 62%),
    radial-gradient(520px 420px at 100% 100%, rgba(212, 175, 55, 0.10), transparent 70%),
    radial-gradient(520px 420px at 0% 100%, rgba(212, 175, 55, 0.08), transparent 70%),
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.035) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.035) 0 1px, transparent 1px 38px),
    radial-gradient(140% 120% at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.68) 100%),
    var(--gn-pillar-layers),
    linear-gradient(180deg, #16110a 0%, #0c0906 55%, #060504 100%) !important;
  background-attachment: fixed !important;
}

/* HOME PAGE = grand gallery hall: bright stage spotlight, golden pillars either side, stronger rays */
html:has([data-component="LandingPageChats"]),
body:has([data-component="LandingPageChats"]) {
  --gn-rays-opacity: 0.95;
  --gn-dust-opacity: 1;
  --gn-floor-opacity: 0.55;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(255, 226, 150, 0.30), transparent 70%),
    radial-gradient(ellipse 90% 30% at 50% 100%, rgba(212, 175, 55, 0.20), transparent 75%),
    linear-gradient(90deg, rgba(212, 175, 55, 0.10), transparent 6%, transparent 94%, rgba(212, 175, 55, 0.10)),
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.04) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.04) 0 1px, transparent 1px 38px),
    radial-gradient(140% 120% at 50% 45%, transparent 48%, rgba(0, 0, 0, 0.74) 100%),
    var(--gn-pillar-layers),
    linear-gradient(180deg, #1c150b 0%, #0d0a06 55%, #050403 100%) !important;
  background-attachment: fixed !important;
}

#root, #root > * { background: transparent !important; }
body { isolation: isolate; }

/* Every moving layer slides with transform (GPU compositor): no repaint, no re-blur of glass panels. */

/* 1) SUNBURST: huge conic fan of rays turning slowly around the top-centre */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 50%;
  width: 2200px;
  height: 2200px;
  margin: -1100px 0 0 -1100px;
  z-index: -5;
  pointer-events: none;
  opacity: var(--gn-rays-opacity);
  background: repeating-conic-gradient(from 0deg,
    rgba(244, 213, 122, 0.13) 0deg 2.4deg, transparent 2.4deg 7deg,
    rgba(244, 213, 122, 0.07) 7deg 8.4deg, transparent 8.4deg 14deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, 0.55) 30%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, 0.55) 30%, transparent 100%);
  backface-visibility: hidden;
  will-change: transform;
  animation: gnRays var(--gn-rays-speed) linear infinite;
}

/* 2) GOLD DUST: two tiles (420 + 280 both divide 840) rising and gently breathing */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: -840px;
  z-index: -4;
  pointer-events: none;
  opacity: var(--gn-dust-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23f4d57a' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23f4d57a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='191.3' cy='233.4' r='0.70' fill='%23d4af37' fill-opacity='0.39'/%3E%3Ccircle cx='376.3' cy='196.5' r='7.0' fill='url(%23g)' fill-opacity='0.34'/%3E%3Ccircle cx='376.3' cy='196.5' r='1.40' fill='%23fff0c2' fill-opacity='0.58'/%3E%3Ccircle cx='86.4' cy='214.7' r='10.1' fill='url(%23g)' fill-opacity='0.47'/%3E%3Cpath d='M86.4 209.1 Q87.632 213.468 92.0 214.7 Q87.632 215.932 86.4 220.29999999999998 Q85.168 215.932 80.80000000000001 214.7 Q85.168 213.468 86.4 209.1Z' fill='%23d4af37' fill-opacity='0.94'/%3E%3Ccircle cx='260.9' cy='324.8' r='6.1' fill='url(%23g)' fill-opacity='0.34'/%3E%3Cpath d='M260.9 321.40000000000003 Q261.64799999999997 324.052 264.29999999999995 324.8 Q261.64799999999997 325.548 260.9 328.2 Q260.152 325.548 257.5 324.8 Q260.152 324.052 260.9 321.40000000000003Z' fill='%23fff0c2' fill-opacity='0.69'/%3E%3Ccircle cx='50.9' cy='132.9' r='9.0' fill='url(%23g)' fill-opacity='0.39'/%3E%3Ccircle cx='50.9' cy='132.9' r='1.80' fill='%23fff0c2' fill-opacity='0.65'/%3E%3Ccircle cx='49.5' cy='331.4' r='0.70' fill='%23fff0c2' fill-opacity='0.93'/%3E%3Ccircle cx='285.8' cy='30.4' r='0.70' fill='%23f4d57a' fill-opacity='0.77'/%3E%3Ccircle cx='399.0' cy='392.2' r='1.00' fill='%23d4af37' fill-opacity='0.83'/%3E%3Ccircle cx='270.3' cy='255.3' r='7.0' fill='url(%23g)' fill-opacity='0.43'/%3E%3Ccircle cx='270.3' cy='255.3' r='1.40' fill='%23fff0c2' fill-opacity='0.72'/%3E%3Ccircle cx='75.7' cy='19.9' r='9.0' fill='url(%23g)' fill-opacity='0.42'/%3E%3Ccircle cx='75.7' cy='19.9' r='1.80' fill='%23fff0c2' fill-opacity='0.70'/%3E%3Ccircle cx='221.1' cy='37.3' r='1.00' fill='%23d4af37' fill-opacity='0.6'/%3E%3Ccircle cx='25.8' cy='195.9' r='1.30' fill='%23f4d57a' fill-opacity='0.87'/%3E%3Ccircle cx='186.7' cy='344.2' r='0.70' fill='%23f4d57a' fill-opacity='0.46'/%3E%3Ccircle cx='193.3' cy='123.0' r='1.30' fill='%23f4d57a' fill-opacity='0.48'/%3E%3Ccircle cx='343.4' cy='291.5' r='1.70' fill='%23f4d57a' fill-opacity='0.85'/%3E%3Ccircle cx='137.6' cy='104.0' r='1.00' fill='%23fff0c2' fill-opacity='0.4'/%3E%3Ccircle cx='127.3' cy='41.5' r='1.70' fill='%23f4d57a' fill-opacity='0.57'/%3E%3Ccircle cx='314.4' cy='171.0' r='1.00' fill='%23d4af37' fill-opacity='0.85'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23f4d57a' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23f4d57a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='152.1' cy='101.1' r='1.27' fill='%23f4d57a' fill-opacity='0.62'/%3E%3Ccircle cx='226.9' cy='86.7' r='1.27' fill='%23d4af37' fill-opacity='0.54'/%3E%3Ccircle cx='118.7' cy='259.4' r='4.6' fill='url(%23g)' fill-opacity='0.34'/%3E%3Cpath d='M118.7 256.84999999999997 Q119.261 258.839 121.25 259.4 Q119.261 259.96099999999996 118.7 261.95 Q118.13900000000001 259.96099999999996 116.15 259.4 Q118.13900000000001 258.839 118.7 256.84999999999997Z' fill='%23f4d57a' fill-opacity='0.68'/%3E%3Ccircle cx='40.1' cy='126.1' r='0.52' fill='%23f4d57a' fill-opacity='0.56'/%3E%3Ccircle cx='70.7' cy='102.1' r='0.75' fill='%23d4af37' fill-opacity='0.68'/%3E%3Ccircle cx='265.7' cy='97.0' r='3.5' fill='url(%23g)' fill-opacity='0.20'/%3E%3Cpath d='M265.7 95.05 Q266.12899999999996 96.571 267.65 97.0 Q266.12899999999996 97.429 265.7 98.95 Q265.271 97.429 263.75 97.0 Q265.271 96.571 265.7 95.05Z' fill='%23f4d57a' fill-opacity='0.39'/%3E%3Ccircle cx='198.1' cy='126.7' r='0.98' fill='%23fff0c2' fill-opacity='0.6'/%3E%3Ccircle cx='116.8' cy='213.8' r='0.52' fill='%23fff0c2' fill-opacity='0.69'/%3E%3Ccircle cx='155.8' cy='63.5' r='1.27' fill='%23fff0c2' fill-opacity='0.33'/%3E%3Ccircle cx='169.7' cy='209.9' r='0.75' fill='%23f4d57a' fill-opacity='0.29'/%3E%3Ccircle cx='39.0' cy='250.3' r='0.75' fill='%23d4af37' fill-opacity='0.27'/%3E%3Ccircle cx='106.5' cy='49.1' r='1.27' fill='%23f4d57a' fill-opacity='0.64'/%3E%3C/svg%3E");
  background-size: 420px 420px, 280px 280px;
  background-repeat: repeat, repeat;
  backface-visibility: hidden;
  contain: layout paint style;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: gnRise calc(var(--gn-dust-speed) * 2) linear infinite;
}

/* 3) FAN FLOOR: art-deco scales drifting sideways, fading upward */
#root::before {
  content: "";
  position: fixed;
  left: 0;
  right: -400px;
  bottom: 0;
  height: var(--gn-floor-height);
  z-index: -3;
  pointer-events: none;
  opacity: var(--gn-floor-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50' viewBox='0 0 100 50'%3E%3Ccircle cx='50' cy='-25' r='50' fill='%230c0906' stroke='%23d4af37' stroke-width='1.3' stroke-opacity='.95'/%3E%3Ccircle cx='50' cy='-25' r='40' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.7'/%3E%3Ccircle cx='50' cy='-25' r='30' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.55'/%3E%3Ccircle cx='50' cy='-25' r='20' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.45'/%3E%3Ccircle cx='50' cy='-25' r='10' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.35'/%3E%3Ccircle cx='50' cy='-25' r='3' fill='%23f4d57a' fill-opacity='.55'/%3E%3Ccircle cx='0' cy='0' r='50' fill='%230c0906' stroke='%23d4af37' stroke-width='1.3' stroke-opacity='.95'/%3E%3Ccircle cx='0' cy='0' r='40' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.7'/%3E%3Ccircle cx='0' cy='0' r='30' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.55'/%3E%3Ccircle cx='0' cy='0' r='20' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.45'/%3E%3Ccircle cx='0' cy='0' r='10' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.35'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23f4d57a' fill-opacity='.55'/%3E%3Ccircle cx='100' cy='0' r='50' fill='%230c0906' stroke='%23d4af37' stroke-width='1.3' stroke-opacity='.95'/%3E%3Ccircle cx='100' cy='0' r='40' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.7'/%3E%3Ccircle cx='100' cy='0' r='30' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.55'/%3E%3Ccircle cx='100' cy='0' r='20' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.45'/%3E%3Ccircle cx='100' cy='0' r='10' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.35'/%3E%3Ccircle cx='100' cy='0' r='3' fill='%23f4d57a' fill-opacity='.55'/%3E%3Ccircle cx='50' cy='25' r='50' fill='%230c0906' stroke='%23d4af37' stroke-width='1.3' stroke-opacity='.95'/%3E%3Ccircle cx='50' cy='25' r='40' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.7'/%3E%3Ccircle cx='50' cy='25' r='30' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.55'/%3E%3Ccircle cx='50' cy='25' r='20' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.45'/%3E%3Ccircle cx='50' cy='25' r='10' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.35'/%3E%3Ccircle cx='50' cy='25' r='3' fill='%23f4d57a' fill-opacity='.55'/%3E%3Ccircle cx='0' cy='50' r='50' fill='%230c0906' stroke='%23d4af37' stroke-width='1.3' stroke-opacity='.95'/%3E%3Ccircle cx='0' cy='50' r='40' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.7'/%3E%3Ccircle cx='0' cy='50' r='30' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.55'/%3E%3Ccircle cx='0' cy='50' r='20' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.45'/%3E%3Ccircle cx='0' cy='50' r='10' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.35'/%3E%3Ccircle cx='0' cy='50' r='3' fill='%23f4d57a' fill-opacity='.55'/%3E%3Ccircle cx='100' cy='50' r='50' fill='%230c0906' stroke='%23d4af37' stroke-width='1.3' stroke-opacity='.95'/%3E%3Ccircle cx='100' cy='50' r='40' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.7'/%3E%3Ccircle cx='100' cy='50' r='30' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.55'/%3E%3Ccircle cx='100' cy='50' r='20' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.45'/%3E%3Ccircle cx='100' cy='50' r='10' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.35'/%3E%3Ccircle cx='100' cy='50' r='3' fill='%23f4d57a' fill-opacity='.55'/%3E%3Ccircle cx='50' cy='75' r='50' fill='%230c0906' stroke='%23d4af37' stroke-width='1.3' stroke-opacity='.95'/%3E%3Ccircle cx='50' cy='75' r='40' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.7'/%3E%3Ccircle cx='50' cy='75' r='30' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.55'/%3E%3Ccircle cx='50' cy='75' r='20' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.45'/%3E%3Ccircle cx='50' cy='75' r='10' fill='none' stroke='%23f4d57a' stroke-width='.9' stroke-opacity='0.35'/%3E%3Ccircle cx='50' cy='75' r='3' fill='%23f4d57a' fill-opacity='.55'/%3E%3C/svg%3E");
  background-size: 100px 50px;
  background-position: 0 100%;
  background-repeat: repeat-x repeat-y;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
  backface-visibility: hidden;
  contain: layout paint style;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: gnFloor var(--gn-floor-speed) linear infinite;
}

/* 4) SHEEN: a slanted band of light that sweeps across now and then */
#root::after {
  content: "";
  position: fixed;
  top: -10vh;
  bottom: -10vh;
  left: 0;
  width: 36vw;
  z-index: -2;
  pointer-events: none;
  opacity: var(--gn-sheen-opacity);
  background: linear-gradient(100deg, transparent 0%, rgba(255, 226, 150, 0.06) 38%,
    rgba(255, 240, 200, 0.13) 50%, rgba(255, 226, 150, 0.06) 62%, transparent 100%);
  transform: translate3d(-60vw, 0, 0) skewX(-14deg);
  will-change: transform;
  animation: gnSheen var(--gn-sheen-speed) ease-in-out infinite;
}

/* keep it working when a wallpaper sets [data-chat-bg] on <html> */
[data-chat-bg] {
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(212, 175, 55, 0.20), transparent 62%),
    radial-gradient(520px 420px at 0% 100%, rgba(212, 175, 55, 0.10), transparent 70%),
    linear-gradient(180deg, #16110a 0%, #0c0906 55%, #060504 100%) !important;
}

@keyframes gnRays  { to { transform: rotate(360deg); } }
@keyframes gnRise  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -840px, 0); } }
@keyframes gnFloor { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-400px, 0, 0); } }
@keyframes gnSheen {
  0%, 52% { transform: translate3d(-60vw, 0, 0) skewX(-14deg); }
  100%    { transform: translate3d(130vw, 0, 0) skewX(-14deg); }
}
@keyframes gnGlow  { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes gnBob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes gnFoil  { from { background-position: 0% 0; } to { background-position: 220% 0; } }
@keyframes gnPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 240, 200, 0.18), 0 4px 16px rgba(212, 175, 55, 0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 240, 200, 0.10), 0 4px 26px rgba(244, 213, 122, 0.60); }
}
@keyframes gnGlint {
  0%, 60% { translate: -170% 0; }
  100%    { translate: 480% 0; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, #root::before, #root::after,
  [data-component="MessageContent"]::after,
  [data-component="BubbleMessage"]::after,
  [data-component="InputArea"]::before,
  [data-component="InputArea"] [class*="_sendBtn_"] { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   DRAWER: smoked glass with gold hairlines
   ═══════════════════════════════════════════════════════════ */
[class*="_wrapper_"]:has([data-spindle-mount="sidebar"]) {
  background: transparent;
  --lcs-glass-bg: var(--gn-glass);
  --lcs-glass-bg-hover: var(--gn-glass-hover);
}
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) { background: transparent; }
[class*="_drawerTab_"] {
  background: var(--gn-drawer-toggle);
  backdrop-filter: blur(var(--gn-blur));
  -webkit-backdrop-filter: blur(var(--gn-blur));
  border-color: var(--gn-glass-border);
}
[data-spindle-mount="sidebar"] {
  background: var(--gn-drawer-icon-strip);
  backdrop-filter: blur(var(--gn-blur));
  -webkit-backdrop-filter: blur(var(--gn-blur));
}
[data-spindle-mount="sidebar"] [class*="_tabBtnActive_"][class*="_tabBtnActive_"] { background: var(--gn-tab-active); }
[data-spindle-mount="sidebar"] [class*="_tabBtn_"]:hover { background: var(--gn-tab-hover); }
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) > [class*="_panel_"] {
  background: var(--gn-drawer-panel);
  backdrop-filter: blur(var(--gn-blur));
  -webkit-backdrop-filter: blur(var(--gn-blur));
  border-color: var(--gn-glass-border);
}
[class*="_panelContent_"], [class*="_panelContentFull_"] { background: transparent; }
[class*="_panelContent_"] > div, [class*="_panelContentFull_"] > div,
[class*="_panelContent_"] [class*="_layout_"], [class*="_panelContentFull_"] [class*="_layout_"],
[class*="_panelContent_"] [class*="_scrollArea_"], [class*="_panelContentFull_"] [class*="_scrollArea_"],
[class*="_panelContent_"] [class*="_section_"], [class*="_panelContent_"] [class*="_group_"],
[class*="_panelContent_"] [class*="_card_"], [class*="_panelContent_"] [class*="_emptyState_"],
[class*="_panelContentFull_"] [class*="_section_"], [class*="_panelContentFull_"] [class*="_group_"],
[class*="_panelContentFull_"] [class*="_card_"], [class*="_panelContentFull_"] [class*="_emptyState_"],
[class*="_accordionSection_"], [class*="_accordionBody_"], [class*="_accordionBodyGen_"] { background: transparent; }

/* panel header: gold wash + diamond lattice */
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.24), rgba(60, 42, 12, 0.18));
  border-bottom: 1px solid var(--gn-glass-border);
}
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20 L20 0 L40 20 L20 40Z' fill='none' stroke='%23d4af37' stroke-opacity='.30' stroke-width='1'/%3E%3Cpath d='M10 20 L20 10 L30 20 L20 30Z' fill='none' stroke='%23f4d57a' stroke-opacity='.18' stroke-width='.8'/%3E%3Cpolygon points='20,18.4 21.6,20 20,21.6 18.4,20' fill='%23f4d57a' fill-opacity='0.55'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelTitle_"],
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"] button,
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"] svg { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════ */
[class*="_modal_"] {
  background: var(--gn-modal);
  border: 1px solid var(--gn-glass-border);
  border-radius: calc(var(--gn-radius) + 2px);
  box-shadow: inset 0 0 0 4px rgba(7, 6, 4, 0.7), inset 0 0 0 5px rgba(212, 175, 55, 0.20),
    0 18px 60px rgba(0, 0, 0, 0.70), 0 0 40px rgba(212, 175, 55, 0.10);
}
[class*="_overlay_"], [class*="_backdrop_"] {
  background: var(--gn-modal-backdrop);
  backdrop-filter: blur(var(--gn-blur));
  -webkit-backdrop-filter: blur(var(--gn-blur));
}
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_header_"],
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) nav[class*="_sidebar_"],
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) > [class*="_body_"] > [class*="_content_"] { background: transparent; }
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_navBtn_"]:hover { background: var(--gn-nav-hover); }
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_navBtnActive_"][class*="_navBtnActive_"],
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_navBtnActive_"][class*="_navBtnActive_"]:hover { background: var(--gn-nav-active); }

/* ═══════════════════════════════════════════════════════════
   CHAT AREA & HEADER
   ═══════════════════════════════════════════════════════════ */
[data-chatroom-region="header"] {
  background: linear-gradient(180deg, rgba(26, 19, 9, 0.84), rgba(12, 9, 5, 0.62));
  backdrop-filter: blur(var(--gn-blur));
  -webkit-backdrop-filter: blur(var(--gn-blur));
  border-bottom: 1px solid var(--gn-glass-border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 2px 0 rgba(212, 175, 55, 0.16);
}
[data-chatroom-region="body"], [data-lumiverse-surface="chat-body"] { background: transparent !important; }

/* base layout / knobs (same grid as the stock portrait-rail layout) */
html body [data-component="MinimalMessage"]:is([data-part="user"], [data-part="character"], [data-part="streaming"][class*="_character_"]) {
  --me-avatar-width: var(--gn-avatar-width-char);
  --me-avatar-height: var(--gn-avatar-height-char);
  --me-avatar-sticky-top: var(--gn-avatar-sticky-top);
  --me-rail-gap: clamp(12px, 1.4vw, 24px);
  --me-card-pad-x: 0px;
  --me-card-pad-y: 0px;
  --me-content-pad: clamp(16px, 1.4vw, 24px);
  --me-img-scale: var(--gn-img-scale);
  --me-img-x: var(--gn-img-x);
  --me-img-y: var(--gn-img-y);
  --me-content-glass-bg: var(--gn-content-glass);
  --me-content-glass-border: var(--gn-glass-border);
  --me-content-glass-blur: var(--gn-content-blur);
  --me-content-glass-radius: var(--gn-content-radius);
  --me-content-glass-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 30px var(--gn-card-glow);
  --me-grid-template: var(--me-avatar-width) minmax(0, 1fr);
  --me-message-padding: 0 clamp(16px, 1.5vw, 24px) clamp(20px, 2vw, 32px) 0;
  --me-avatar-column: 1;
  --me-bubble-column: 2;
  --me-avatar-justify: start;

  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--me-grid-template) !important;
  column-gap: var(--me-rail-gap) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: var(--me-message-padding) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
  font-family: var(--gn-font) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body [data-component="MinimalMessage"][data-part="user"][data-part="user"][data-part="user"] {
  --me-avatar-width: var(--gn-avatar-width-user);
  --me-avatar-height: var(--gn-avatar-height-user);
  --me-grid-template: minmax(0, 1fr) var(--me-avatar-width);
  --me-message-padding: 0 0 clamp(20px, 2vw, 32px) clamp(16px, 1.5vw, 24px);
  --me-avatar-column: 2;
  --me-bubble-column: 1;
  --me-avatar-justify: end;
  --me-content-glass-bg: var(--gn-content-glass-user);
}
html body [data-component="MinimalMessage"]::before,
html body [data-component="MinimalMessage"]::after,
html body [data-component="MinimalMessage"][class*="_card_"]::before,
html body [data-component="MinimalMessage"][class*="_card_"]::after,
html body [data-component="MinimalMessage"][class*="_user_"]::before,
html body [data-component="MinimalMessage"][class*="_user_"]::after,
html body [data-component="MinimalMessage"][class*="_character_"]::before,
html body [data-component="MinimalMessage"][class*="_character_"]::after { content: none !important; display: none !important; }
html body [data-component="MinimalMessage"]:hover { background: transparent !important; box-shadow: none !important; }
[data-chat-scroll="true"] [data-virtual-index],
[data-chat-scroll="true"] [data-item-type="message"],
html body [data-component="MinimalMessage"] { overflow: visible !important; }

/* ── GILDED PORTRAIT RAIL: arched top, foil frame, light glint ── */
html body [data-component="MinimalMessage"]:is([data-part="user"], [data-part="character"], [data-part="streaming"][class*="_character_"]) > [class*="_avatar_"] {
  grid-column: var(--me-avatar-column) !important;
  grid-row: 1 / span 2 !important;
  justify-self: var(--me-avatar-justify) !important;
  position: sticky !important;
  top: var(--me-avatar-sticky-top, 72px) !important;
  align-self: start !important;
  width: var(--me-avatar-width) !important;
  min-width: var(--me-avatar-width) !important;
  max-width: var(--me-avatar-width) !important;
  height: var(--me-avatar-height) !important;
  min-height: var(--me-avatar-height) !important;
  max-height: var(--me-avatar-height) !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  z-index: 12 !important;
  overflow: hidden !important;
  contain: paint !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  border: 3px solid transparent !important;
  border-radius: var(--gn-portrait-arch) var(--gn-portrait-arch) 8px 8px / calc(var(--gn-portrait-arch) * 0.7) calc(var(--gn-portrait-arch) * 0.7) 8px 8px !important;
  background: linear-gradient(var(--gn-portrait-backing), var(--gn-portrait-backing)) padding-box, var(--gn-foil) border-box !important;
  box-shadow: 0 0 0 2px #070504, 0 0 0 3px rgba(212, 175, 55, 0.45), 0 12px 34px rgba(0, 0, 0, 0.6), 0 0 34px rgba(212, 175, 55, 0.16) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body [data-component="MinimalMessage"] > [class*="_avatar_"],
html body [data-component="MinimalMessage"] > [class*="_avatar_"] > *,
html body [data-component="MinimalMessage"] > [class*="_avatar_"] div,
html body [data-component="MinimalMessage"] > [class*="_avatar_"] picture {
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  box-sizing: border-box !important;
}
html body [data-component="MinimalMessage"] > [class*="_avatar_"] img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--me-img-x) var(--me-img-y) !important;
  transform: scale(var(--me-img-scale)) !important;
  transform-origin: var(--me-img-x) var(--me-img-y) !important;
  opacity: 1 !important;
  filter: saturate(1.04) contrast(1.05) brightness(0.97) !important;
  border-radius: inherit !important;
  box-sizing: border-box !important;
}
/* foot of the portrait melts into shadow with a warm gold rim light */
html body [data-component="MinimalMessage"] > [class*="_avatar_"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(to top, rgba(7, 5, 3, 0.80) 0%, rgba(7, 5, 3, 0) 30%),
    linear-gradient(to top, rgba(212, 175, 55, 0.20) 0%, rgba(212, 175, 55, 0) 18%),
    linear-gradient(180deg, rgba(255, 236, 180, 0.12), transparent 22%) !important;
  box-shadow: inset 0 0 26px rgba(212, 175, 55, 0.16) !important;
  border-radius: inherit !important;
}
/* a slanted glint crossing the portrait every few seconds (transform only = cheap) */
html body [data-component="MinimalMessage"] > [class*="_avatar_"]::before {
  content: "" !important;
  position: absolute !important;
  top: -20% !important;
  bottom: -20% !important;
  left: 0 !important;
  width: 34% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: linear-gradient(100deg, transparent, rgba(255, 238, 190, 0.22) 50%, transparent) !important;
  transform: skewX(-18deg);
  translate: -170% 0;
  animation: gnGlint 11s ease-in-out infinite;
}
html body [data-component="MinimalMessage"][data-part="user"] > [class*="_avatar_"]::before { animation-delay: -5s; }

/* ── bubble lane ── */
html body [data-component="MinimalMessage"]:is([data-part="user"], [data-part="character"], [data-part="streaming"][class*="_character_"]) > [class*="_bubble_"] {
  grid-column: var(--me-bubble-column) !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* header: tracked-capital gold name with a deco rule under it */
html body [data-component="MinimalMessage"] [class*="_header_"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  margin: 0 !important;
  padding: 10px var(--me-content-pad) 28px var(--me-content-pad) !important;
  min-height: 0 !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
html body [data-component="MinimalMessage"] [class*="_name_"] {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-family: var(--gn-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.25rem, 1.75vw, 1.85rem) !important;
  line-height: 1.15 !important;
  text-transform: uppercase;
  letter-spacing: var(--gn-caps-tracking);
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background: var(--gn-foil-text) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.30));
  animation: gnFoil 7s linear infinite;
}
html body [data-component="MinimalMessage"] [class*="_nameUser_"] {
  background: linear-gradient(115deg, #cfc2a0, #fff6dc 40%, #cfc2a0 80%) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}
html body [data-component="MinimalMessage"] [class*="_name_"]::after {
  content: "";
  display: block;
  width: 100%;
  height: 16px;
  margin-top: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='10' y='7.4' width='84' height='1.2' fill='url(%23a)'/%3E%3Crect x='126' y='7.4' width='84' height='1.2' fill='url(%23b)'/%3E%3Cpolygon points='110,2.8 115.2,8 110,13.2 104.8,8' fill='%23f4d57a' fill-opacity='1' stroke='%23fff0c2' stroke-width='0.8'/%3E%3Cpolygon points='110,6 112,8 110,10 108,8' fill='%230c0906' fill-opacity='1.0'/%3E%3Cpolygon points='98,6 100,8 98,10 96,8' fill='%23d4af37' fill-opacity='1.0'/%3E%3Cpolygon points='122,6 124,8 122,10 120,8' fill='%23d4af37' fill-opacity='1.0'/%3E%3Ccircle cx='90' cy='8' r='1' fill='%23f4d57a'/%3E%3Ccircle cx='130' cy='8' r='1' fill='%23f4d57a'/%3E%3C/svg%3E") center / auto 16px no-repeat;
  -webkit-text-fill-color: initial;
}
html body [data-component="MinimalMessage"] [class*="_metaPill_"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.12rem 0.7rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--gn-font-mono) !important;
  font-size: calc(0.9rem * var(--gn-meta-font-scale)) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--gn-date-color) !important;
  opacity: 0.95 !important;
  gap: 9px !important;
  white-space: nowrap !important;
  text-shadow: 0 0 8px rgba(8, 6, 3, 0.9);
}
/* little gold rules either side of the date */
html body [data-component="MinimalMessage"] [class*="_metaPill_"]::before,
html body [data-component="MinimalMessage"] [class*="_metaPill_"]::after {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gn-gold));
}
html body [data-component="MinimalMessage"] [class*="_metaPill_"]::after { transform: scaleX(-1); }
@media (max-width: 720px) {
  html body [data-component="MinimalMessage"] [class*="_metaPill_"]::before,
  html body [data-component="MinimalMessage"] [class*="_metaPill_"]::after { display: none; }
}

/* ── message panel: smoked glass, double gold rule, corner brackets, crest ── */
html body [data-component="MinimalMessage"] [data-component="MessageContent"] {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 9px var(--me-content-pad) var(--me-content-pad) var(--me-content-pad) !important;
  border-radius: var(--me-content-glass-radius) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  color: var(--gn-message-color) !important;
  font-family: var(--gn-font) !important;
  text-shadow: var(--gn-text-glow);
  text-align: left !important;
}
html body [data-component="MinimalMessage"] [data-component="MessageContent"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border: 1px solid var(--me-content-glass-border) !important;
  border-radius: inherit !important;
  background: var(--me-content-glass-bg) !important;
  box-shadow:
    inset 0 0 0 5px rgba(7, 5, 3, 0.55),
    inset 0 0 0 6px rgba(212, 175, 55, 0.20),
    inset 0 1px 0 rgba(255, 236, 180, 0.10),
    var(--me-content-glass-shadow) !important;
  backdrop-filter: blur(var(--me-content-glass-blur)) saturate(110%) !important;
  -webkit-backdrop-filter: blur(var(--me-content-glass-blur)) saturate(110%) !important;
  pointer-events: none !important;
}
html body [data-component="MinimalMessage"] [data-component="MessageContent"]::after {
  content: "";
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='28' viewBox='0 0 96 28'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0c2'/%3E%3Cstop offset='.5' stop-color='%23d4af37'/%3E%3Cstop offset='1' stop-color='%239a7420'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='19' width='32' height='1.4' fill='url(%23f)'/%3E%3Crect x='62' y='19' width='32' height='1.4' fill='url(%23r)'/%3E%3Cpath d='M34 19.7 Q40 19.7 42 14' fill='none' stroke='%23d4af37' stroke-width='1.2'/%3E%3Cpath d='M62 19.7 Q56 19.7 54 14' fill='none' stroke='%23d4af37' stroke-width='1.2'/%3E%3Cpolygon points='48,2 60,14 48,26 36,14' fill='url(%23d)' stroke='%23fff0c2' stroke-opacity='.7' stroke-width='.8'/%3E%3Cpolygon points='48,8 54,14 48,20 42,14' fill='%230c0906' fill-opacity='.85'/%3E%3Cpolygon points='48,11 51,14 48,17 45,14' fill='%23f4d57a'/%3E%3Cpolygon points='27,17.7 29,19.7 27,21.7 25,19.7' fill='%23f4d57a' fill-opacity='1.0'/%3E%3Cpolygon points='69,17.7 71,19.7 69,21.7 67,19.7' fill='%23f4d57a' fill-opacity='1.0'/%3E%3Ccircle cx='19' cy='19.7' r='1.1' fill='%23f4d57a'/%3E%3Ccircle cx='77' cy='19.7' r='1.1' fill='%23f4d57a'/%3E%3C/svg%3E") center top 7px / 96px 28px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='' fill='none' stroke-linecap='square'%3E%3Cpath d='M1 27 V5 Q1 1 5 1 H27' stroke='%23d4af37' stroke-width='1.6'/%3E%3Cpath d='M6 27 V10 Q6 6 10 6 H27' stroke='%23f4d57a' stroke-width='.8' stroke-opacity='.55'/%3E%3Cpolygon points='1,-1.6 3.6,1 1,3.6 -1.6,1' fill='%23fff0c2' fill-opacity='1.0'/%3E%3Cpolygon points='12,10.5 13.5,12 12,13.5 10.5,12' fill='%23f4d57a' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E") left 8px top 34px / 28px 28px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='translate(28 0) scale(-1 1)' fill='none' stroke-linecap='square'%3E%3Cpath d='M1 27 V5 Q1 1 5 1 H27' stroke='%23d4af37' stroke-width='1.6'/%3E%3Cpath d='M6 27 V10 Q6 6 10 6 H27' stroke='%23f4d57a' stroke-width='.8' stroke-opacity='.55'/%3E%3Cpolygon points='1,-1.6 3.6,1 1,3.6 -1.6,1' fill='%23fff0c2' fill-opacity='1.0'/%3E%3Cpolygon points='12,10.5 13.5,12 12,13.5 10.5,12' fill='%23f4d57a' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E") right 8px top 34px / 28px 28px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='translate(0 28) scale(1 -1)' fill='none' stroke-linecap='square'%3E%3Cpath d='M1 27 V5 Q1 1 5 1 H27' stroke='%23d4af37' stroke-width='1.6'/%3E%3Cpath d='M6 27 V10 Q6 6 10 6 H27' stroke='%23f4d57a' stroke-width='.8' stroke-opacity='.55'/%3E%3Cpolygon points='1,-1.6 3.6,1 1,3.6 -1.6,1' fill='%23fff0c2' fill-opacity='1.0'/%3E%3Cpolygon points='12,10.5 13.5,12 12,13.5 10.5,12' fill='%23f4d57a' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E") left 8px bottom 8px / 28px 28px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='translate(28 28) scale(-1 -1)' fill='none' stroke-linecap='square'%3E%3Cpath d='M1 27 V5 Q1 1 5 1 H27' stroke='%23d4af37' stroke-width='1.6'/%3E%3Cpath d='M6 27 V10 Q6 6 10 6 H27' stroke='%23f4d57a' stroke-width='.8' stroke-opacity='.55'/%3E%3Cpolygon points='1,-1.6 3.6,1 1,3.6 -1.6,1' fill='%23fff0c2' fill-opacity='1.0'/%3E%3Cpolygon points='12,10.5 13.5,12 12,13.5 10.5,12' fill='%23f4d57a' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E") right 8px bottom 8px / 28px 28px no-repeat;
  pointer-events: none;
  opacity: calc(0.95 * var(--gn-msg-decor));
  animation: gnBob 5s ease-in-out infinite;
}
html body [data-component="MinimalMessage"] [data-component="MessageContent"] > [class*="_prose_"] {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding: 6px 4px 0 !important;
  color: var(--gn-message-color) !important;
  font-family: var(--gn-font) !important;
  font-size: calc(1rem * var(--gn-chat-font-scale)) !important;
  line-height: 1.72 !important;
  text-wrap: pretty;
}
html body [data-component="MinimalMessage"] [data-component="MessageContent"] :is(img, video, canvas, svg):not([class*="lucide"]) {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  border: 1px solid var(--gn-card-border);
}

/* prose */
[data-component="MessageContent"] [class*="_prose_"] :is(h1, h2, h3, h4) {
  font-family: var(--gn-font-display) !important;
  color: var(--gn-heading-color) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 400 !important;
}
[data-component="MessageContent"] [class*="_prose_"] :is(p, ul, ol, blockquote, pre) { margin-block: 0.7em; }
[data-component="MessageContent"] [class*="_prose_"] :is(em, [class*="_proseItalic_"]) { color: var(--gn-action-color) !important; }
[data-component="MessageContent"] [class*="_prose_"] :is(strong, [class*="_proseBold_"]) { color: var(--gn-bold-color) !important; }
[data-component="MessageContent"] [class*="_prose_"] [class*="_proseDialogue_"] { color: var(--gn-dialogue-color) !important; }
[data-component="MessageContent"] [class*="_prose_"] :is(a, a:visited) {
  color: var(--gn-link-color) !important;
  text-decoration-color: rgba(255, 223, 154, 0.5);
  text-underline-offset: 0.2em;
}
[data-component="MessageContent"] [class*="_prose_"] ul > li::marker { content: "\25C6   "; color: var(--gn-gold); font-size: 0.7em; }
[data-component="MessageContent"] [class*="_prose_"] ol > li::marker { color: var(--gn-gold); font-weight: 700; }
[data-component="MessageContent"] [class*="_prose_"] blockquote {
  position: relative;
  margin-left: 0;
  padding: 10px 14px 10px 40px;
  border: 0;
  border-left: 2px solid var(--gn-gold);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.03));
}
[data-component="MessageContent"] [class*="_prose_"] blockquote::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpolygon points='7,1.5 12.5,7 7,12.5 1.5,7' fill='%23d4af37' fill-opacity='1' stroke='%23fff0c2' stroke-width='0.8'/%3E%3Cpolygon points='7,4.8 9.2,7 7,9.2 4.8,7' fill='%230c0906' fill-opacity='0.85'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-component="MessageContent"] [class*="_prose_"] hr {
  border: 0;
  height: 16px;
  margin: 1.1em 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='10' y='7.4' width='84' height='1.2' fill='url(%23a)'/%3E%3Crect x='126' y='7.4' width='84' height='1.2' fill='url(%23b)'/%3E%3Cpolygon points='110,2.8 115.2,8 110,13.2 104.8,8' fill='%23f4d57a' fill-opacity='1' stroke='%23fff0c2' stroke-width='0.8'/%3E%3Cpolygon points='110,6 112,8 110,10 108,8' fill='%230c0906' fill-opacity='1.0'/%3E%3Cpolygon points='98,6 100,8 98,10 96,8' fill='%23d4af37' fill-opacity='1.0'/%3E%3Cpolygon points='122,6 124,8 122,10 120,8' fill='%23d4af37' fill-opacity='1.0'/%3E%3Ccircle cx='90' cy='8' r='1' fill='%23f4d57a'/%3E%3Ccircle cx='130' cy='8' r='1' fill='%23f4d57a'/%3E%3C/svg%3E") center / auto 16px no-repeat;
}
[data-component="MessageContent"] code:not(pre code) {
  font-family: var(--gn-font-mono) !important;
  background: var(--gn-code-bg);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 4px;
  padding: 0.08em 0.4em;
  color: var(--gn-accent-soft);
}
[data-component="MessageContent"] [class*="_codeBlock_"],
[data-component="MessageContent"] pre {
  background: var(--gn-code-bg) !important;
  border: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: 6px;
}
[data-component="MessageContent"] [class*="_codeHeader_"] {
  background: rgba(212, 175, 55, 0.10);
  border-bottom: 1px solid rgba(212, 175, 55, 0.20);
}
[data-component="MessageContent"] [class*="_codeLang_"] { color: var(--gn-gold-bright); }
[data-component="MessageContent"] [class*="_codeCopy_"] { color: var(--gn-accent-soft); }
[data-component="MessageContent"] [class*="_codeCopy_"]:hover { color: var(--gn-gold-pale); background: var(--gn-tab-active); }
[data-component="MessageEditArea"] textarea {
  font-family: var(--gn-font) !important;
  color: var(--gn-message-color) !important;
  caret-color: var(--gn-gold) !important;
}

/* ★ COLOURED TEXT: <font color="#5E8DE3">…</font> (or an inline colour style) wins over the theme's
   dialogue / *italic* / bold / link colours. Without this, quoted speech, italics or bold inside the
   colour tag get repainted by the theme and the custom colour is lost. (Same method as Pink Jellyfish.) */
[data-component="MessageContent"] [class*="_prose_"] :is(font[color], [style*="color"]) :is(em, strong, b, i, a, [class*="_proseItalic_"], [class*="_proseBold_"], [class*="_proseDialogue_"]):not(font[color]):not([style*="color"]),
[data-component="BubbleMessage"] :is(font[color], [style*="color"]) :is(em, strong, b, i, a):not(font[color]):not([style*="color"]) {
  color: inherit !important;
}
[data-component="MessageContent"] [class*="_prose_"] :is(font[color], [style*="color"]) {
  text-shadow: 0 0 12px color-mix(in srgb, currentColor 26%, transparent);
}

/* reasoning / thinking blocks + message actions */
html body [data-component="MinimalMessage"] [class*="_container_"] {
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  border-radius: 6px !important;
  background: rgba(8, 6, 3, 0.45) !important;
}
html body [data-component="MinimalMessage"] [class*="_container_"] > button[type="button"]:has(svg.lucide-brain) { color: var(--gn-gold-bright) !important; }
html body [data-component="MinimalMessage"] > [class*="_actionsWrap_"] { opacity: 0.55; transition: opacity 0.2s ease; }
html body [data-component="MinimalMessage"]:hover > [class*="_actionsWrap_"] { opacity: 1; }
[data-component="SwipeControls"] button, [data-component="MinimalMessage"] button[data-hone-btn] { border-radius: 6px; color: var(--gn-accent-soft); }
[data-component="SwipeControls"] button:hover, [data-component="MinimalMessage"] button[data-hone-btn]:hover { background: var(--gn-tab-active); color: var(--gn-gold-pale); }

@media (max-width: 720px) {
  html body [data-component="MinimalMessage"]:is([data-part="user"], [data-part="character"], [data-part="streaming"][class*="_character_"]) {
    --me-avatar-width: clamp(96px, 28vw, 150px);
    --me-avatar-height: clamp(220px, 40vh, 340px);
    --gn-portrait-arch: 44px;
    --me-content-pad: 14px;
  }
  html body [data-component="MinimalMessage"] [data-component="MessageContent"]::after { opacity: calc(0.7 * var(--gn-msg-decor)); }
}

/* ═══════════════════════════════════════════════════════════
   INPUT: smoked glass, double gold rule, a crest perched on top
   ═══════════════════════════════════════════════════════════ */
[data-component="InputArea"] {
  position: relative;
  --lcs-glass-bg: var(--gn-input-bg);
  background: var(--gn-input-bg);
  border: 1px solid var(--gn-input-border) !important;
  border-radius: calc(var(--gn-radius) + 2px) !important;
  box-shadow: inset 0 0 0 4px rgba(7, 5, 3, 0.55), inset 0 0 0 5px rgba(212, 175, 55, 0.18),
    0 8px 28px rgba(0, 0, 0, 0.55), 0 0 30px rgba(212, 175, 55, 0.12);
  backdrop-filter: blur(var(--gn-blur));
  -webkit-backdrop-filter: blur(var(--gn-blur));
}
[data-component="InputArea"]::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 22px;
  width: 130px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='34' viewBox='0 0 130 34'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d4af37'/%3E%3Cstop offset='1' stop-color='%23d4af37' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0c2'/%3E%3Cstop offset='.55' stop-color='%23d4af37'/%3E%3Cstop offset='1' stop-color='%239a7420'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='24' y='26' width='104' height='1.3' fill='url(%23a)'/%3E%3Cpolygon points='13,8 25,20 13,32 1,20' fill='url(%23d)' stroke='%23fff0c2' stroke-opacity='.7' stroke-width='.8'/%3E%3Cpolygon points='13,14 19,20 13,26 7,20' fill='%230c0906' fill-opacity='.85'/%3E%3Cpolygon points='13,17 16,20 13,23 10,20' fill='%23f4d57a'/%3E%3Cpath d='M25 20 Q36 20 40 26' fill='none' stroke='%23d4af37' stroke-width='1.2'/%3E%3Cpolygon points='52,24.6 54,26.6 52,28.6 50,26.6' fill='%23f4d57a' fill-opacity='1.0'/%3E%3Cpolygon points='70,25.1 71.5,26.6 70,28.1 68.5,26.6' fill='%23d4af37' fill-opacity='1.0'/%3E%3Cpolygon points='86,25.5 87.1,26.6 86,27.700000000000003 84.9,26.6' fill='%23d4af37' fill-opacity='1.0'/%3E%3C/svg%3E") left center / contain no-repeat;
  pointer-events: none;
  animation: gnBob 5s ease-in-out infinite;
}
[data-component="InputArea"] textarea, [data-component="InputArea"] input {
  font-family: var(--gn-font) !important;
  font-size: calc(1em * var(--gn-chat-font-scale));
  color: var(--gn-font-color) !important;
  caret-color: var(--gn-gold) !important;
}
[data-component="InputArea"] textarea::placeholder { color: var(--gn-font-color-dim) !important; opacity: 1; font-style: italic; }
[data-component="InputArea"] [class*="_inputWrapper_"] {
  border-radius: 6px !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  background: rgba(5, 4, 2, 0.50) !important;
}
[data-component="InputArea"] [class*="_actionBtn_"], [data-component="InputArea"] [class*="_attachBtn_"] { border-radius: 6px !important; color: var(--gn-accent-soft); }
[data-component="InputArea"] [class*="_actionBtn_"]:hover, [data-component="InputArea"] [class*="_attachBtn_"]:hover,
[data-component="InputArea"] [class*="_actionBtnHasSelection_"], [data-component="InputArea"] [aria-pressed="true"] {
  background: var(--gn-tab-active) !important;
  color: var(--gn-gold-pale);
}
/* send button: gold foil coin with a breathing glow */
[data-component="InputArea"] [class*="_sendBtn_"] {
  border: 1px solid #fff0c2 !important;
  border-radius: 50% !important;
  color: #1a1204 !important;
  background: radial-gradient(circle at 32% 28%, #fff6d6 0%, #f4d57a 34%, #d4af37 62%, #8a6414 100%) !important;
  animation: gnPulse 3.2s ease-in-out infinite;
}
[data-component="InputArea"] [class*="_sendBtn_"]:hover:not(:disabled) {
  background: radial-gradient(circle at 32% 28%, #fffbe8 0%, #ffe494 34%, #e6bf48 62%, #9a7420 100%) !important;
  transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS, TOGGLES, TOASTS
   ═══════════════════════════════════════════════════════════ */
[data-variant="primary"] {
  background: linear-gradient(115deg, #a67c1f 0%, #e9c458 30%, #fff0c2 50%, #e9c458 70%, #a67c1f 100%) 0% 0 / 220% 100% !important;
  color: #1a1204 !important;
  border: 1px solid #fff0c2 !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.30);
  transition: background-position 0.6s ease, transform 0.15s ease, box-shadow 0.3s ease;
}
[data-variant="primary"]:hover {
  background-position: 100% 0 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(244, 213, 122, 0.45);
}
[data-state="checked"] { background-color: var(--gn-gold) !important; }
[data-sonner-toast] {
  font-family: var(--gn-font) !important;
  background: var(--gn-modal) !important;
  color: var(--gn-font-color) !important;
  border: 1px solid var(--gn-glass-border) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 3px rgba(7, 5, 3, 0.6), inset 0 0 0 4px rgba(212, 175, 55, 0.18), 0 10px 34px rgba(0, 0, 0, 0.65) !important;
}
[data-reasoning-toggle="true"] { border-radius: 6px; color: var(--gn-gold-bright); }
[data-component="DesktopPwaTitlebar"] {
  background: linear-gradient(90deg, rgba(26, 19, 9, 0.96), rgba(12, 9, 5, 0.96)) !important;
  color: var(--gn-font-color) !important;
  border-bottom: 1px solid var(--gn-glass-border);
}

/* ═══════════════════════════════════════════════════════════
   HOME PAGE: THE GALLERY
   Every character card is a gilded display niche: an arched frame with a
   slowly turning sunburst halo, a portrait window rimmed in spinning gold
   foil, gold dust drifting up, a keystone on the arch, an engraved nameplate
   and a glint of light that crosses the frame now and then.
   Hover = the room "brightens": everything turns faster, the portrait rises.
   The card keeps the host's 3:4 footprint (its list virtualizer relies on it).
   ═══════════════════════════════════════════════════════════ */
@property --gn-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

[data-component="LandingPageChats"] {
  --gv-ink: var(--gn-font-color);
  --gv-muted: var(--gn-font-color-soft);
  --gv-glow: var(--gn-gold);          /* frame + halo glow colour */
  --gv-label: var(--gn-gold-bright);  /* tiny "presenting" label */
  --gv-spin-speed: 9s;                /* foil glint orbiting the portrait */
  --gv-burst-speed: 80s;              /* sunburst turn */
  --gv-float-speed: 7s;               /* portrait hover-float */
  --gv-rise-speed: 18s;               /* gold dust drifting up the card */
  --gv-glint-speed: 9s;               /* light sweeping across the card */
  --gv-rise-opacity: 0.9;             /* 0 hides the dust */
  --lcs-glass-bg: var(--gn-glass);
  --lcs-glass-bg-hover: var(--gn-glass-hover);
  --lcs-glass-border: var(--gn-glass-border);
  --lcs-glass-border-hover: var(--gn-glass-border-hover);
  font-family: var(--gn-font) !important;
}
[data-component="LandingPageChats"] [class*="_cardTilt_"] { min-width: 0 !important; }

/* hovered card: faster, brighter */
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]):hover {
  --gv-spin-speed: 3.2s;
  --gv-burst-speed: 24s;
  --gv-float-speed: 3.4s;
  --gv-rise-speed: 8s;
  --gv-glint-speed: 3.6s;
}

/* ── the niche ── */
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]) {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 175, 55, 0.60) !important;
  border-radius: 46% 46% 12px 12px / 26% 26% 12px 12px !important;
  background:
    radial-gradient(ellipse 70% 38% at 50% 0%, rgba(255, 232, 170, 0.22), transparent 72%),
    radial-gradient(ellipse 80% 26% at 50% 100%, rgba(212, 175, 55, 0.16), transparent 75%),
    linear-gradient(180deg, #1e160b 0%, #100b06 55%, #070504 100%) !important;
  box-shadow:
    inset 0 0 0 5px rgba(7, 5, 3, 0.75),
    inset 0 0 0 6px rgba(212, 175, 55, 0.30),
    0 10px 26px rgba(0, 0, 0, 0.60),
    0 0 22px rgba(212, 175, 55, 0.14) !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]):hover {
  border-color: rgba(255, 232, 160, 0.95) !important;
  box-shadow:
    inset 0 0 0 5px rgba(7, 5, 3, 0.75),
    inset 0 0 0 6px rgba(244, 213, 122, 0.55),
    inset 0 0 40px rgba(212, 175, 55, 0.18),
    0 14px 34px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(244, 213, 122, 0.38) !important;
}

/* sunburst halo turning behind the portrait */
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"])::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 32%;
  width: 330%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(244, 213, 122, 0.20) 0deg 3deg, transparent 3deg 12deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, 0.5) 24%, transparent 52%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, 0.5) 24%, transparent 52%);
  pointer-events: none;
  will-change: rotate;
  animation: gvBurst var(--gv-burst-speed) linear infinite;
}
@keyframes gvBurst { to { rotate: 360deg; } }

/* light glint crossing the whole card */
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"])::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 36%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 238, 190, 0.26) 50%, transparent 100%);
  transform: skewX(-18deg);
  translate: -170% 0;
  pointer-events: none;
  will-change: translate;
  animation: gnGlint var(--gv-glint-speed) ease-in-out infinite;
}
/* stagger neighbours so the whole row doesn't flash at once */
[data-component="LandingPageChats"] [class*="_cardTilt_"]:nth-child(3n+2) [class*="_card_"]::after { animation-delay: -3s; }
[data-component="LandingPageChats"] [class*="_cardTilt_"]:nth-child(3n+3) [class*="_card_"]::after { animation-delay: -6s; }
[data-component="LandingPageChats"] [class*="_cardTilt_"]:nth-child(2n) [class*="_card_"]::before { animation-delay: -30s; }

/* ── whole-card button keeps the 3:4 footprint ── */
[data-component="LandingPageChats"] [class*="_cardBtn_"] {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  padding: 0 !important;
  color: var(--gv-ink) !important;
  background: transparent !important;
}
/* gold dust drifting up the niche (behind the portrait) */
[data-component="LandingPageChats"] [class*="_cardBtn_"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--gv-rise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='170' viewBox='0 0 16 170'%3E%3Cpath d='M8.0 133.5 Q9.43 138.57 14.5 140 Q9.43 141.43 8.0 146.5 Q6.57 141.43 1.5 140 Q6.57 138.57 8.0 133.5Z' fill='%23f4d57a' fill-opacity='1.0'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='230' viewBox='0 0 10 230'%3E%3Ccircle cx='5.0' cy='120' r='1.7' fill='%23fff0c2' fill-opacity='0.9'/%3E%3Ccircle cx='5.0' cy='120' r='5.1' fill='%23fff0c2' fill-opacity='.14'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='130' viewBox='0 0 10 130'%3E%3Cpolygon points='5.0,56.6 8.4,60 5.0,63.4 1.6,60' fill='%23d4af37' fill-opacity='0.95'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='290' viewBox='0 0 12 290'%3E%3Cpath d='M6.0 195.5 Q6.99 199.01 10.5 200 Q6.99 200.99 6.0 204.5 Q5.01 200.99 1.5 200 Q5.01 199.01 6.0 195.5Z' fill='%23fff0c2' fill-opacity='1.0'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='210' viewBox='0 0 12 210'%3E%3Ccircle cx='6.0' cy='100' r='2.4' fill='%23f4d57a' fill-opacity='0.9'/%3E%3Ccircle cx='6.0' cy='100' r='7.199999999999999' fill='%23f4d57a' fill-opacity='.14'/%3E%3C/svg%3E");
  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y;
  background-size: 16px 170px, 10px 230px, 10px 130px, 12px 290px, 12px 210px;
  background-position: 6% 0, 94% 0, 88% 0, 12% 0, 3% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 60%, transparent 80%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 60%, transparent 80%);
  pointer-events: none;
  animation: gvDust var(--gv-rise-speed) linear infinite;
}
@keyframes gvDust {
  from { background-position: 6% 0,      94% 0,      88% 0,      12% 0,      3% 0; }
  to   { background-position: 6% -170px, 94% -230px, 88% -130px, 12% -290px, 3% -210px; }
}
/* keystone at the apex of the arch */
[data-component="LandingPageChats"] [class*="_cardBtn_"]::after {
  content: "";
  position: absolute;
  z-index: 6;
  top: 1.2%;
  left: 50%;
  width: 24%;
  aspect-ratio: 54 / 34;
  margin-left: -12%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='34' viewBox='0 0 54 34'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0c2'/%3E%3Cstop offset='.5' stop-color='%23d4af37'/%3E%3Cstop offset='1' stop-color='%239a7420'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='18.2' y1='20.3' x2='5.8' y2='13.7' stroke='%23f4d57a' stroke-width='1.3' stroke-linecap='round' stroke-opacity='.85'/%3E%3Cline x1='20.8' y1='17.1' x2='12.2' y2='6.1' stroke='%23f4d57a' stroke-width='1.3' stroke-linecap='round' stroke-opacity='.85'/%3E%3Cline x1='24.6' y1='15.3' x2='21.2' y2='1.7' stroke='%23f4d57a' stroke-width='1.3' stroke-linecap='round' stroke-opacity='.85'/%3E%3Cline x1='29.4' y1='15.3' x2='32.8' y2='1.7' stroke='%23f4d57a' stroke-width='1.3' stroke-linecap='round' stroke-opacity='.85'/%3E%3Cline x1='33.2' y1='17.1' x2='41.8' y2='6.1' stroke='%23f4d57a' stroke-width='1.3' stroke-linecap='round' stroke-opacity='.85'/%3E%3Cline x1='35.8' y1='20.3' x2='48.2' y2='13.7' stroke='%23f4d57a' stroke-width='1.3' stroke-linecap='round' stroke-opacity='.85'/%3E%3Cpolygon points='27,14 38,25 27,36 16,25' fill='url(%23d)' stroke='%23fff0c2' stroke-opacity='.8' stroke-width='.9'/%3E%3Cpolygon points='27,20 32,25 27,30 22,25' fill='%230c0906' fill-opacity='.85'/%3E%3Cpolygon points='27,22.5 29.5,25 27,27.5 24.5,25' fill='%23f4d57a'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(244, 213, 122, 0.7));
  transition: scale 0.3s cubic-bezier(0.34, 1.8, 0.5, 1);
  pointer-events: none;
  animation: gnGlow 3.4s ease-in-out infinite;
}
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]):hover [class*="_cardBtn_"]::after { scale: 1.25; }

/* ── the portrait window: arched, rimmed in spinning gold foil ── */
[data-component="LandingPageChats"] [class*="_cardImage_"] {
  position: absolute !important;
  top: 11% !important;
  left: 15% !important;
  z-index: 3 !important;
  width: 70% !important;
  height: auto !important;
  aspect-ratio: 1 / 1.08 !important;
  box-sizing: border-box !important;
  border: 3px solid transparent !important;
  border-radius: 50% 50% 8px 8px / 38% 38% 8px 8px !important;
  background:
    linear-gradient(var(--gn-ink), var(--gn-ink)) padding-box,
    conic-gradient(from var(--gn-ang), #8a6414, #f4d57a 10%, #fff6d6 15%, #d4af37 24%, #8a6414 42%, #5c4413 52%, #d4af37 68%, #fff0c2 78%, #8a6414 100%) border-box !important;
  box-shadow:
    0 0 0 2px #070504,
    0 0 0 3px rgba(212, 175, 55, 0.50),
    0 0 28px rgba(212, 175, 55, 0.40),
    0 10px 22px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  animation: gvFloat var(--gv-float-speed) ease-in-out infinite, gvSpin var(--gv-spin-speed) linear infinite;
}
@keyframes gvFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes gvSpin  { to { --gn-ang: 360deg; } }
[data-component="LandingPageChats"] [class*="_cardImage_"] :is(img, picture img) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(1.05) contrast(1.05) brightness(0.97) !important;
  transition: scale 0.6s ease;
}
[data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"]):hover [class*="_cardImage_"] :is(img, picture img) { scale: 1.06; }
[data-component="LandingPageChats"] [class*="_cardImageOverlay_"] { display: none !important; }
/* top light + shadowed foot */
[data-component="LandingPageChats"] [class*="_cardImage_"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 55% 22% at 50% 6%, rgba(255, 240, 200, 0.40), transparent 72%),
    linear-gradient(180deg, transparent 58%, rgba(7, 5, 3, 0.58) 100%);
  pointer-events: none;
}
[data-component="LandingPageChats"] [class*="_cardImage_"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.30), inset 0 0 22px rgba(212, 175, 55, 0.28);
  pointer-events: none;
}

/* ── engraved nameplate ── */
[data-component="LandingPageChats"] [class*="_cardContent_"] {
  position: absolute !important;
  top: auto !important;
  right: 10px !important;
  bottom: 10px !important;
  left: 10px !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 2px !important;
  height: 28% !important;
  padding: 4px 4px 0 !important;
  border: 0 !important;
  color: var(--gv-ink) !important;
  background: transparent !important;
}
[data-component="LandingPageChats"] [class*="_cardName_"] {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  font: 400 14px/1.2 var(--gn-font-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.14em !important;
  text-align: center !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background: var(--gn-foil-text) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
  animation: gnFoil 7s linear infinite;
}
[data-component="LandingPageChats"] [class*="_cardName_"] svg {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 9px !important;
  height: 9px !important;
  color: var(--gn-accent-soft) !important;
  -webkit-text-fill-color: initial;
}
[data-component="LandingPageChats"] [class*="_cardName_"]::before {
  content: "\25C6  presenting  \25C6";
  display: block;
  margin-bottom: 3px;
  color: var(--gv-label);
  -webkit-text-fill-color: var(--gv-label);
  font: 500 7.5px/1 var(--gn-font);
  font-style: italic;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  opacity: 0.95;
}
[data-component="LandingPageChats"] [class*="_cardName_"] span {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px 6px !important;
  min-height: 29px !important;
  padding: 3px 10px !important;
  border: 1px solid rgba(212, 175, 55, 0.50) !important;
  border-radius: 3px !important;
  color: var(--gv-muted) !important;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(6, 4, 2, 0.70)) !important;
  box-shadow: inset 0 0 0 2px rgba(6, 4, 2, 0.6), inset 0 0 0 3px rgba(212, 175, 55, 0.16) !important;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"]::before {
  content: "last encore";
  flex-basis: 100%;
  color: var(--gn-gold-bright);
  font: italic 500 7px/1 var(--gn-font);
  letter-spacing: 0.14em;
  text-align: center;
  opacity: 0.9;
}
[data-component="LandingPageChats"] [class*="_cardMeta_"] :is([class*="_cardTime_"], [class*="_chatCountBadge_"], [class*="_groupBadge_"]) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--gv-muted) !important;
  background: transparent !important;
  font: 600 8px/1.1 var(--gn-font) !important;
  letter-spacing: 0.06em !important;
}
/* ornamental rule under the plate, breathing */
[data-component="LandingPageChats"] [class*="_cardContent_"]::after {
  content: "";
  display: block;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='10' y='7.4' width='84' height='1.2' fill='url(%23a)'/%3E%3Crect x='126' y='7.4' width='84' height='1.2' fill='url(%23b)'/%3E%3Cpolygon points='110,2.8 115.2,8 110,13.2 104.8,8' fill='%23f4d57a' fill-opacity='1' stroke='%23fff0c2' stroke-width='0.8'/%3E%3Cpolygon points='110,6 112,8 110,10 108,8' fill='%230c0906' fill-opacity='1.0'/%3E%3Cpolygon points='98,6 100,8 98,10 96,8' fill='%23d4af37' fill-opacity='1.0'/%3E%3Cpolygon points='122,6 124,8 122,10 120,8' fill='%23d4af37' fill-opacity='1.0'/%3E%3Ccircle cx='90' cy='8' r='1' fill='%23f4d57a'/%3E%3Ccircle cx='130' cy='8' r='1' fill='%23f4d57a'/%3E%3C/svg%3E") center / auto 10px no-repeat;
  opacity: 0.75;
  pointer-events: none;
  animation: gnGlow 3.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"])::before,
  [data-component="LandingPageChats"] [class*="_card_"]:not([class*="_cardContent_"])::after,
  [data-component="LandingPageChats"] [class*="_cardBtn_"]::before,
  [data-component="LandingPageChats"] [class*="_cardBtn_"]::after,
  [data-component="LandingPageChats"] [class*="_cardContent_"]::after,
  [data-component="LandingPageChats"] [class*="_cardName_"],
  [data-component="LandingPageChats"] [class*="_cardImage_"] { animation: none; }
}
@media (max-width: 600px) {
  [data-component="LandingPageChats"] [class*="_cardImage_"] { top: 10% !important; left: 17% !important; width: 66% !important; border-width: 2px !important; }
  [data-component="LandingPageChats"] [class*="_cardContent_"] { right: 6px !important; bottom: 6px !important; left: 6px !important; height: 33% !important; }
  [data-component="LandingPageChats"] [class*="_cardName_"] { font-size: 11.5px !important; letter-spacing: 0.08em !important; }
  [data-component="LandingPageChats"] [class*="_cardMeta_"] { min-height: 23px !important; padding: 2px 7px !important; }
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR & SELECTION
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gn-scrollbar); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gn-scrollbar-hover); }
::selection { background: var(--gn-selection) !important; color: inherit !important; }

/* ═══════════════════════════════════════════════════════════
   OPTIONAL PERSONAL TWEAKS
   Place custom CSS below
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ UI SIZE — matched to Pinned Butterflies ═══════════
   Measured off Pinned Butterflies (1166×924 window):
     portrait frame 270×370 · text panel ≈620 wide · input + top bar ≈830 wide · whole message row ≈930 wide.
   Everything sits centred in the chat area. The portrait scales gently with window height (40vh → 370px at 924px tall).
   To resize, change these five numbers — nothing else needs touching. */
:root {
  --ui-portrait-h: clamp(300px, 40vh, 430px);
  --ui-portrait-w: calc(var(--ui-portrait-h) * 0.73);
  --ui-msg-w: 930px;     /* portrait + text panel */
  --ui-bar-w: 830px;     /* top bar + input bar */
  --ui-rail-gap: 16px;   /* space between portrait and text panel */
}

/* message rows: centred column instead of edge-to-edge */
html body [data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] {
  max-width: min(var(--ui-msg-w), 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 721px) {
  html body [data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"][data-component="MinimalMessage"] {
    --me-rail-gap: var(--ui-rail-gap);
  }
}

/* top bar: same strip width as the input bar, floating like the Butterflies bar */
html body [data-chatroom-region="header"][data-chatroom-region="header"] {
  box-sizing: border-box !important;
  position: relative;
  left: 0; right: 0;
  width: min(var(--ui-bar-w), calc(100% - 24px)) !important;
  margin: 12px auto 0 !important;
}
html body [class*="_chatToolbar_"][class*="_chatToolbar_"],
html body [data-spindle-mount="chat_top_dock"][data-spindle-mount="chat_top_dock"] {
  width: min(var(--ui-bar-w), 100%) !important;
  align-self: center !important;
  box-sizing: border-box !important;
}

/* input bar (the toolbar icons + text box live inside it) */
html body [data-component="InputArea"][data-component="InputArea"] {
  box-sizing: border-box !important;
  left: 0 !important; right: 0 !important;
  margin-left: auto !important; margin-right: auto !important;
  width: min(var(--ui-bar-w), calc(100% - 24px)) !important;
  max-width: 100% !important;
}

html body [data-chatroom-region="header"][data-chatroom-region="header"] {
  border: 1px solid var(--gn-glass-border) !important;
  border-radius: calc(var(--gn-radius) + 2px) !important;
}

/* bubble-style chat (if you switch the message style) uses the same centred column */
html body [data-component="BubbleMessage"][data-component="BubbleMessage"] {
  box-sizing: border-box !important;
  width: min(var(--ui-msg-w), 100%) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

BubbleMessage

/* ═══════════════════════════════════════════════════════════
   GOLDEN HOUR - BUBBLEMESSAGE CSS
   Smoked-glass bubbles with a gold double rule and a crest on the corner.
   Colours / fonts / glow come from the Global CSS (--gn-*).
   ═══════════════════════════════════════════════════════════ */
[data-component="BubbleMessage"] { position: relative; font-family: var(--gn-font) !important; color: var(--gn-font-color); }
[data-component="BubbleMessage"] [class*="_content_"],
[data-component="BubbleMessage"] [class*="_text_"],
[data-component="BubbleMessage"] [class*="_markdown_"] {
  font-family: var(--gn-font) !important;
  font-size: calc(1em * var(--gn-chat-font-scale));
  color: var(--gn-message-color);
  text-shadow: var(--gn-text-glow);
  line-height: 1.7;
}
[data-component="BubbleMessage"] em, [data-component="BubbleMessage"] i:not([class]) { color: var(--gn-action-color); }
[data-component="BubbleMessage"] strong, [data-component="BubbleMessage"] b { color: var(--gn-bold-color); }
[data-component="BubbleMessage"] h1, [data-component="BubbleMessage"] h2,
[data-component="BubbleMessage"] h3, [data-component="BubbleMessage"] h4 {
  font-family: var(--gn-font-display) !important;
  font-weight: 400 !important;
  color: var(--gn-heading-color);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
[data-component="BubbleMessage"] [class*="_name_"] {
  font-family: var(--gn-font-display) !important;
  font-weight: 400 !important;
  font-size: 1.15em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gn-name-color) !important;
}
[data-component="BubbleMessage"] [class*="_metaPill_"],
[data-component="BubbleMessage"] [class*="_metaSegment_"],
[data-component="BubbleMessage"] [class*="_meta_"],
[data-component="BubbleMessage"] [class*="_counter_"],
[data-component="BubbleMessage"] [class*="_token_"] {
  font-family: var(--gn-font-mono) !important;
  font-size: calc(1em * var(--gn-meta-font-scale));
  color: var(--gn-font-color-soft);
  opacity: 0.8;
}
[data-component="BubbleMessage"] [class*="_card_"] {
  position: relative;
  background: linear-gradient(150deg, rgba(30, 22, 11, 0.78), rgba(10, 7, 4, 0.74)) !important;
  border: 1px solid var(--gn-card-border) !important;
  border-radius: var(--gn-radius) !important;
  box-shadow:
    inset 0 0 0 4px rgba(7, 5, 3, 0.55),
    inset 0 0 0 5px rgba(212, 175, 55, 0.18),
    0 6px 22px rgba(0, 0, 0, 0.5),
    0 0 26px var(--gn-card-glow);
  backdrop-filter: blur(var(--gn-blur));
  -webkit-backdrop-filter: blur(var(--gn-blur));
}
[data-component="BubbleMessage"][class*="_user_"] [class*="_card_"],
[data-component="BubbleMessage"] [class*="_user_"] [class*="_card_"] {
  background: linear-gradient(150deg, rgba(48, 34, 14, 0.78), rgba(16, 11, 5, 0.74)) !important;
}
[data-component="BubbleMessage"] [class*="_card_"]::after {
  content: "";
  position: absolute;
  top: -22px;
  right: 18px;
  width: 80px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='28' viewBox='0 0 96 28'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0c2'/%3E%3Cstop offset='.5' stop-color='%23d4af37'/%3E%3Cstop offset='1' stop-color='%239a7420'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='19' width='32' height='1.4' fill='url(%23f)'/%3E%3Crect x='62' y='19' width='32' height='1.4' fill='url(%23r)'/%3E%3Cpath d='M34 19.7 Q40 19.7 42 14' fill='none' stroke='%23d4af37' stroke-width='1.2'/%3E%3Cpath d='M62 19.7 Q56 19.7 54 14' fill='none' stroke='%23d4af37' stroke-width='1.2'/%3E%3Cpolygon points='48,2 60,14 48,26 36,14' fill='url(%23d)' stroke='%23fff0c2' stroke-opacity='.7' stroke-width='.8'/%3E%3Cpolygon points='48,8 54,14 48,20 42,14' fill='%230c0906' fill-opacity='.85'/%3E%3Cpolygon points='48,11 51,14 48,17 45,14' fill='%23f4d57a'/%3E%3Cpolygon points='27,17.7 29,19.7 27,21.7 25,19.7' fill='%23f4d57a' fill-opacity='1.0'/%3E%3Cpolygon points='69,17.7 71,19.7 69,21.7 67,19.7' fill='%23f4d57a' fill-opacity='1.0'/%3E%3Ccircle cx='19' cy='19.7' r='1.1' fill='%23f4d57a'/%3E%3Ccircle cx='77' cy='19.7' r='1.1' fill='%23f4d57a'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  animation: gnBob 4.5s ease-in-out infinite;
}
[data-component="BubbleMessage"] blockquote {
  position: relative;
  margin-left: 0;
  padding: 10px 14px 10px 40px;
  border: 0;
  border-left: 2px solid var(--gn-gold);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.03));
}
[data-component="BubbleMessage"] blockquote::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpolygon points='7,1.5 12.5,7 7,12.5 1.5,7' fill='%23d4af37' fill-opacity='1' stroke='%23fff0c2' stroke-width='0.8'/%3E%3Cpolygon points='7,4.8 9.2,7 7,9.2 4.8,7' fill='%230c0906' fill-opacity='0.85'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-component="BubbleMessage"] ul > li::marker { content: "\25C6   "; color: var(--gn-gold); font-size: 0.7em; }
[data-component="BubbleMessage"] ol > li::marker { color: var(--gn-gold); font-weight: 700; }
[data-component="BubbleMessage"] hr { border: 0; height: 16px; margin: 1.1em 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d4af37'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='10' y='7.4' width='84' height='1.2' fill='url(%23a)'/%3E%3Crect x='126' y='7.4' width='84' height='1.2' fill='url(%23b)'/%3E%3Cpolygon points='110,2.8 115.2,8 110,13.2 104.8,8' fill='%23f4d57a' fill-opacity='1' stroke='%23fff0c2' stroke-width='0.8'/%3E%3Cpolygon points='110,6 112,8 110,10 108,8' fill='%230c0906' fill-opacity='1.0'/%3E%3Cpolygon points='98,6 100,8 98,10 96,8' fill='%23d4af37' fill-opacity='1.0'/%3E%3Cpolygon points='122,6 124,8 122,10 120,8' fill='%23d4af37' fill-opacity='1.0'/%3E%3Ccircle cx='90' cy='8' r='1' fill='%23f4d57a'/%3E%3Ccircle cx='130' cy='8' r='1' fill='%23f4d57a'/%3E%3C/svg%3E") center / auto 16px no-repeat; }
[data-component="BubbleMessage"] code:not(pre code) {
  font-family: var(--gn-font-mono) !important;
  background: var(--gn-code-bg);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 4px;
  padding: 0.08em 0.4em;
  color: var(--gn-accent-soft);
}
[data-component="BubbleMessage"] pre, [data-component="BubbleMessage"] pre code { font-family: var(--gn-font-mono) !important; }
[data-component="BubbleMessage"] pre { background: var(--gn-code-bg) !important; border: 1px solid rgba(212, 175, 55, 0.26); border-radius: 6px; }
[data-component="BubbleMessage"] a { color: var(--gn-link-color); text-decoration-color: rgba(255, 223, 154, 0.5); text-underline-offset: 0.2em; }
[data-component="BubbleMessage"] img { border-radius: 6px; border: 1px solid var(--gn-card-border); }

/* ═══════════════════════════════════════════════════════════
   OPTIONAL PERSONAL TWEAKS
   Place custom CSS below
   ═══════════════════════════════════════════════════════════ */

5 attached files: assets/001-gn-lora-star-regular.woff, assets/002-gn-lora-star-bold.woff, assets/003-gn-lora-star-italic.woff, assets/004-gn-lora-star-bolditalic.woff, assets/005-gn-dunhill.woff