/* WhiteSpace Universal Design System (WDS v1.1) — Complete CSS Bundle (.ws-* & .fg-*) */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;1,6..12,400&family=Urbanist:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Roboto+Mono:wght@400;500;600&display=swap");

/* WhiteSpace — tokens */
:root,[data-theme="light"]{--surface-page:#ffffff;--surface-well:var(--tint-2);--surface-chrome:#ffffff;--surface-panel:#ffffff;--surface-overlay:#ffffff;--surface-sunken:var(--tint-3);--surface-page-frost:rgb(255 255 255 / 0.92);--surface-chrome-frost:rgb(255 255 255 / 0.78);--surface-panel-frost:rgb(255 255 255 / 0.72);--surface-line:var(--tint-4);--surface-line-strong:oklch(89% 0.012 258);--surface-hairline:var(--tint-3);--ink-on-light:#0a0a0a;--ink-on-dark:#f4f4f5;--ink-muted-on-light:#52525b;--ink-muted-on-dark:#a1a1aa;--white-pure:#ffffff;--white-well:#f4f4f5;--white-frost:rgb(255 255 255 / 0.72);--white-mist:#fafafa;--white-cloud:var(--white-pure);--white-chalk:var(--white-well);--white-paper:var(--white-pure);--white-snow:var(--white-pure);--surface-0:var(--surface-page);--surface-1:var(--surface-well);--surface-2:var(--surface-chrome);--surface-3:var(--surface-panel);--surface-4:var(--surface-overlay);--surface-5:var(--surface-overlay);--canvas-soft:var(--surface-page);--panel-solid:var(--surface-panel);--line-solid:var(--surface-hairline);--tint-0:#ffffff;--tint-1:oklch(98.4% 0.004 258);--tint-2:oklch(97.1% 0.006 258);--tint-3:oklch(95.2% 0.008 258);--tint-4:oklch(92.5% 0.01 258);--tint-line:oklch(90% 0.01 258);--ring-tint:oklch(62% 0.16 258);--glass-fill-acrylic:rgb(255 255 255 / 0.06);--glass-border-white:rgb(255 255 255 / 0.95);--glass-border-white-soft:rgb(255 255 255 / 0.72);--fg-neutral-0:hsl(0 0% 100%);--fg-neutral-50:hsl(240 4.8% 95.9%);--fg-neutral-100:hsl(240 5.9% 90%);--fg-neutral-400:hsl(240 3.8% 46.1%);--fg-neutral-900:hsl(240 10% 3.9%);--fg-neutral-950:hsl(240 5.9% 10%);--fg-warm-dark:hsl(50 2% 9%);--fg-warm-darker:hsl(50 2% 7%);--fg-success:hsl(152 60% 40%);--fg-warning:hsl(32 90% 48%);--fg-danger:hsl(0 84.2% 60.2%);--fg-info:hsl(217 91% 60%);--fg-light-edge:rgb(255 255 255 / 0.55);--fg-light-edge-strong:rgb(255 255 255 / 0.78);--fg-light-edge-dark:rgb(255 255 255 / 0.18);--sx-void:#000000;--sx-ink:#0a0a0a;--sx-ink-2:#3a3a3a;--sx-ink-3:#6b6b6b;--sx-hair:#d4d4d4;--sx-surface:#f4f4f4;--sx-paper:#ffffff;--sx-rule:#111111;--background:var(--surface-page);--foreground:var(--ink-on-light);--card:var(--surface-panel);--card-foreground:var(--ink-on-light);--popover:var(--surface-overlay);--popover-foreground:var(--ink-on-light);--primary:hsl(240 5.9% 10%);--primary-foreground:#ffffff;--secondary:var(--surface-well);--secondary-foreground:var(--ink-on-light);--muted:var(--surface-well);--muted-foreground:var(--ink-muted-on-light);--accent:var(--surface-well);--accent-foreground:var(--ink-on-light);--destructive:hsl(0 72% 46%);--destructive-foreground:#ffffff;--destructive-hover:hsl(0 72% 40%);--border:var(--surface-line);--input:var(--surface-line-strong);--hairline:var(--surface-hairline);--rule:#111111;--sidebar:var(--surface-chrome);--sidebar-foreground:var(--ink-on-light);--sidebar-primary:var(--primary);--sidebar-primary-foreground:var(--primary-foreground);--sidebar-accent:var(--surface-well);--sidebar-accent-foreground:var(--ink-on-light);--sidebar-border:var(--surface-hairline);--sidebar-ring:hsl(217.2 91.2% 59.8%);--primary-graphite:#383838;--primary-graphite-hover:#1f1f1f;--ink-petrol:var(--ink-on-light);--muted-solid:var(--ink-muted-on-light);--glass-fill:rgb(255 255 255 / 0.22);--glass-fill-selected:var(--glass-fill-acrylic);--glass-fill-bar:rgb(255 255 255 / 0.55);--glass-fill-drop:rgb(255 255 255 / 0.48);--glass-border:rgb(255 255 255 / 0.72);--glass-border-strong:var(--glass-border-white);--glass-border-drop:rgb(255 255 255 / 0.7);--glass-highlight:rgb(255 255 255 / 0.75);--glass-highlight-soft:rgb(255 255 255 / 0.3);--auth-bg:var(--surface-page);--auth-ink:var(--ink-on-light);--auth-muted:var(--ink-muted-on-light);--auth-edge:var(--glass-border-white-soft);--auth-neo-ink:#0c0c0e;--auth-neo-card-bg:#ffffff;--shadow-panel:1px 1px 3px -1px rgba(0, 0, 0, 0.95);--shadow-panel-hover:1px 1px 3px -1px rgba(0, 0, 0, 0.95), 1px 2px 6px -1px rgba(0, 0, 0, 0.42);--shadow-panel-selected:1px 1px 3px -1px rgba(0, 0, 0, 0.95), 2px 3px 8px -1px rgba(0, 0, 0, 0.55);--shadow-recessed:0 1px 2px -1px rgba(0, 0, 0, 0.35);--shadow-glass:0 6px 16px rgba(0, 0, 0, 0.1);--shadow-glass-sm:0 3px 8px rgba(0, 0, 0, 0.08);--shadow-glass-bar:0 4px 10px rgba(0, 0, 0, 0.08);--shadow-overlay:0 12px 32px rgba(0, 0, 0, 0.14);--shadow-xs:1px 1px 1px rgba(0, 0, 0, 0.1);--shadow-sm:1px 1px 1px rgba(0, 0, 0, 0.12);--shadow-md:1px 2px 1px rgba(0, 0, 0, 0.15);--shadow-lg:2px 2px 2px rgba(0, 0, 0, 0.2);--shadow-xl:2px 3px 2px rgba(0, 0, 0, 0.25);--shadow-neo-dual:1px 1px 2px rgba(0, 0, 0, 0.06), -1px -1px 2px rgba(255, 255, 255, 0.85);--shadow-iris:0 1px 2px rgb(17 17 27 / 0.04), 0 4px 12px oklch(72% 0.06 258 / 0.06);--shadow-iris-hover:0 1px 2px rgb(17 17 27 / 0.05), 0 6px 16px oklch(70% 0.07 258 / 0.08);--shadow-iris-focus:0 1px 2px rgb(17 17 27 / 0.05), 0 8px 20px oklch(70% 0.07 258 / 0.1);--shadow-selected-glass:inset 0 1px 0 rgb(255 255 255 / 0.92), inset 0 -1px 0 rgb(255 255 255 / 0.22), 0 0 0 1px rgb(255 255 255 / 0.55), 1px 1px 3px -1px rgba(0, 0, 0, 0.95), 2px 3px 8px -1px rgba(0, 0, 0, 0.55);--fg-col-shadow:3px 3px 7px rgba(0, 0, 0, 0.14), 1px 1px 2px rgba(0, 0, 0, 0.1), -3px -3px 7px rgba(255, 255, 255, 0.55), -1px -1px 2px rgba(255, 255, 255, 0.7), inset 1px 1px 0 rgba(255, 255, 255, 0.55), inset -1px -1px 0 rgba(0, 0, 0, 0.04);--auth-neo-card:5px 5px 12px rgba(0, 0, 0, 0.16), 2px 2px 4px rgba(0, 0, 0, 0.1), -4px -4px 10px rgba(255, 255, 255, 0.55), -1px -1px 2px rgba(255, 255, 255, 0.7), inset 1px 1px 0 rgba(255, 255, 255, 0.55), inset -1px -1px 0 rgba(0, 0, 0, 0.04);--auth-neo-cta:5px 5px 12px rgba(0, 0, 0, 0.55), 2px 2px 4px rgba(0, 0, 0, 0.4), -3px -3px 8px rgba(255, 255, 255, 0.45), -1px -1px 2px rgba(255, 255, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.03);}
[data-theme="dark"]{--surface-page:#1a1a1e;--surface-well:rgb(255 255 255 / 0.045);--surface-chrome:rgb(255 255 255 / 0.055);--surface-panel:rgb(255 255 255 / 0.08);--surface-overlay:rgb(255 255 255 / 0.11);--surface-page-frost:rgb(26 26 30 / 0.82);--surface-chrome-frost:rgb(255 255 255 / 0.06);--surface-panel-frost:rgb(255 255 255 / 0.09);--surface-line:rgb(255 255 255 / 0.1);--surface-line-strong:rgb(255 255 255 / 0.14);--surface-hairline:rgb(255 255 255 / 0.07);--tint-0:#1a1a1e;--tint-1:oklch(24% 0.01 258);--tint-2:oklch(27% 0.012 258);--tint-3:oklch(31% 0.014 258);--tint-4:oklch(36% 0.016 258);--tint-line:oklch(40% 0.02 258);--ring-tint:oklch(72% 0.16 258);--glass-fill-acrylic:rgb(255 255 255 / 0.04);--glass-border-white:rgb(255 255 255 / 0.78);--glass-border-white-soft:rgb(255 255 255 / 0.42);--foreground:var(--ink-on-dark);--card-foreground:var(--ink-on-dark);--popover-foreground:var(--ink-on-dark);--primary:var(--ink-on-dark);--primary-foreground:#141416;--secondary-foreground:var(--ink-on-dark);--muted-foreground:var(--ink-muted-on-dark);--accent-foreground:var(--ink-on-dark);--destructive:hsl(0 62% 48%);--destructive-hover:hsl(0 62% 55%);--rule:var(--ink-on-dark);--sidebar-foreground:var(--ink-on-dark);--sidebar-primary:hsl(224.3 76.3% 58%);--sidebar-primary-foreground:#ffffff;--sidebar-accent-foreground:var(--ink-on-dark);--primary-graphite:#e4e4e7;--primary-graphite-hover:#fafafa;--ink-petrol:var(--ink-on-dark);--muted-solid:var(--ink-muted-on-dark);--glass-fill:rgb(255 255 255 / 0.05);--glass-fill-bar:rgb(255 255 255 / 0.045);--glass-fill-drop:rgb(255 255 255 / 0.1);--glass-border:rgb(255 255 255 / 0.22);--glass-border-drop:rgb(255 255 255 / 0.2);--glass-highlight:rgb(255 255 255 / 0.2);--glass-highlight-soft:rgb(255 255 255 / 0.06);--auth-ink:var(--ink-on-dark);--auth-muted:var(--ink-muted-on-dark);--auth-neo-ink:#f4f4f5;--auth-neo-card-bg:#1a1a1e;--shadow-panel:0 1px 0 rgb(255 255 255 / 0.06), 0 8px 24px rgb(0 0 0 / 0.35);--shadow-panel-hover:0 1px 0 rgb(255 255 255 / 0.09), 0 12px 32px rgb(0 0 0 / 0.48);--shadow-panel-selected:0 1px 0 rgb(255 255 255 / 0.11), 0 14px 36px rgb(0 0 0 / 0.58);--shadow-recessed:inset 0 1px 2px rgb(0 0 0 / 0.35);--shadow-glass:0 8px 28px rgb(0 0 0 / 0.35);--shadow-neo-dual:1px 1px 2px rgba(0, 0, 0, 0.45), -1px -1px 1px rgba(255, 255, 255, 0.04);--shadow-iris:0 1px 2px rgb(0 0 0 / 0.4), 0 6px 18px oklch(48% 0.08 258 / 0.22);--shadow-iris-hover:0 1px 2px rgb(0 0 0 / 0.45), 0 8px 22px oklch(50% 0.09 258 / 0.28);--shadow-iris-focus:0 1px 2px rgb(0 0 0 / 0.45), 0 10px 26px oklch(52% 0.1 258 / 0.32);--shadow-selected-glass:inset 0 1px 0 rgb(255 255 255 / 0.32), inset 0 -1px 0 rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.2), 0 1px 0 rgb(255 255 255 / 0.11), 0 14px 36px rgb(0 0 0 / 0.58);--fg-col-shadow:3px 3px 9px rgba(0, 0, 0, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.4), -2px -2px 6px rgba(255, 255, 255, 0.05), inset 1px 1px 0 rgba(255, 255, 255, 0.06), inset -1px -1px 0 rgba(0, 0, 0, 0.3);--auth-neo-card:5px 5px 14px rgba(0, 0, 0, 0.55), 2px 2px 4px rgba(0, 0, 0, 0.4), -3px -3px 8px rgba(255, 255, 255, 0.06), -1px -1px 2px rgba(255, 255, 255, 0.04), inset 1px 1px 0 rgba(255, 255, 255, 0.06), inset -1px -1px 0 rgba(0, 0, 0, 0.35);--auth-neo-cta:5px 5px 12px rgba(0, 0, 0, 0.7), 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04);}
:root{--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--control-h-sm:2rem;--control-h:2.5rem;--control-h-lg:3rem;--space-header-h:2.75rem;--space-composer-max-empty:36rem;--space-composer-max-chat:48rem;--content-measure:48.75rem;--density-app-gap:0.625rem;--density-rail-pad:0.85rem;--density-rail-gap:0.4rem;--fg-dock-width:17.5rem;--fg-dock-width-collapsed:2.75rem;--fg-dock-width-min:12rem;--fg-dock-width-max:22rem;--fg-rail-width:19rem;--fg-rail-width-collapsed:2.75rem;--fg-rail-width-min:14rem;--fg-rail-width-max:26rem;--fg-stage-bar-h:2.75rem;--fg-shell-gap:0.5rem;--radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-3xl:28px;--radius-pill:9999px;--radius:0.6rem;--z-base:0;--z-sticky:10;--z-dropdown:30;--z-drawer:40;--z-modal:50;--z-toast:70;--z-max:100;--glass-blur:14px;--glass-blur-bar:12px;--glass-blur-drop:12px;--glass-saturate:1.3;--tint-hue:258;--tint-warm-hue:28;--font-display:"DM Serif Display", Georgia, "Times New Roman", serif;--font-emphasis:"Urbanist", "Nunito Sans", ui-sans-serif, system-ui, sans-serif;--font-body:"Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"Roboto Mono", "Space Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;}

/* WhiteSpace — componentes (.fg-*) */
/* WhiteSpace — folha de componentes (Fellow Glass, repo myselfgus/fellow).
   Os valores literais vivem em tokens.json (tokens.css gerado). Aqui fica o resto:
   aliases, valores com color-mix/clamp/gradiente, tipografia em variáveis, movimento,
   e todas as classes .fg-*. Tema escuro: classe :is(.dark, [data-theme="dark"]) OU [data-theme="dark"]. */

/* ===== tokens/aurora.css ===== */
/**
 * Fellow Glass — cool tint + authorial aurora (PAGE BACKGROUND ONLY).
 *
 * Hierarchy rule:
 *   - Animated colored aurora-veiled mesh lives ONLY on the full-page background
 *     (.fg-app, .fg-page, body ambient). Never on component selection chrome.
 *   - Component elevation is soft-neo (neutral). Liquid-glass selection uses
 *     white pearl rim + soft-neo — no tinted/colored shadows on chrome.
 */

:root {

  /* Soft monochrome depth cues (optional, not used on selected chrome) */

  /* Acrylic empty fill + pure white rim (selection chrome — monochrome) */

  /**
   * Elevation hierarchy (components — soft-neo privileged):
   *   page → well → panel (soft-neo) → liquid-glass (pearl + soft-neo)
   * Selected chrome = pearl + soft-neo only. No colored shadow stacks.
   */

  /* Authorial meshes — PAGE ONLY */
  --aurora-cool:
    radial-gradient(
      42% 46% at 22% 24%,
      oklch(88% 0.09 260 / 0.55),
      transparent 70%
    ),
    radial-gradient(
      38% 42% at 78% 34%,
      oklch(90% 0.08 205 / 0.45),
      transparent 70%
    ),
    radial-gradient(
      46% 50% at 62% 82%,
      oklch(92% 0.07 300 / 0.4),
      transparent 72%
    ); /* @kind other */
  --aurora-warm:
    radial-gradient(
      40% 44% at 26% 30%,
      oklch(92% 0.08 40 / 0.42),
      transparent 70%
    ),
    radial-gradient(
      40% 42% at 74% 68%,
      oklch(90% 0.08 330 / 0.38),
      transparent 70%
    ),
    radial-gradient(
      44% 46% at 55% 20%,
      oklch(93% 0.06 90 / 0.34),
      transparent 72%
    ); /* @kind other */
  --aurora-mono:
    radial-gradient(
      50% 55% at 30% 20%,
      oklch(96% 0.01 258 / 0.9),
      transparent 72%
    ),
    radial-gradient(
      48% 52% at 80% 60%,
      oklch(94% 0.014 258 / 0.7),
      transparent 72%
    ); /* @kind other */
  --mesh-veil: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.42),
    rgb(255 255 255 / 0.78)
  ); /* @kind other */

  /* Full-page aurora-veiled ambient (the only place color animates) */
  --aurora-veiled-bg: var(--mesh-veil), var(--aurora-cool); /* @kind other */
}

:is(.dark, [data-theme="dark"]) {

  --aurora-cool:
    radial-gradient(
      46% 50% at 24% 26%,
      oklch(52% 0.14 262 / 0.55),
      transparent 72%
    ),
    radial-gradient(
      40% 44% at 78% 36%,
      oklch(50% 0.12 210 / 0.42),
      transparent 72%
    ),
    radial-gradient(
      48% 52% at 60% 82%,
      oklch(48% 0.13 300 / 0.38),
      transparent 74%
    ); /* @kind other */
  --aurora-warm:
    radial-gradient(
      42% 46% at 28% 32%,
      oklch(56% 0.12 40 / 0.36),
      transparent 72%
    ),
    radial-gradient(
      42% 44% at 74% 66%,
      oklch(52% 0.12 330 / 0.32),
      transparent 72%
    ); /* @kind other */
  --aurora-mono:
    radial-gradient(
      52% 56% at 30% 22%,
      oklch(34% 0.018 258 / 0.9),
      transparent 74%
    ),
    radial-gradient(
      48% 52% at 80% 62%,
      oklch(30% 0.016 258 / 0.7),
      transparent 74%
    ); /* @kind other */
  --mesh-veil: linear-gradient(
    180deg,
    rgb(26 26 30 / 0.35),
    rgb(26 26 30 / 0.72)
  ); /* @kind other */
  --aurora-veiled-bg: var(--mesh-veil), var(--aurora-cool); /* @kind other */
}

/* ——— PAGE background utilities (only place aurora color lives) ——— */

.fg-aurora,
.fg-aurora-cool,
.ws-aurora,
.ws-aurora-cool {
  background-color: var(--surface-page);
  background-image: var(--aurora-cool);
}
.fg-aurora-warm,
.ws-aurora-warm {
  background-color: var(--surface-page);
  background-image: var(--aurora-warm);
}
.fg-aurora-mono,
.ws-aurora-mono {
  background-color: var(--surface-page);
  background-image: var(--aurora-mono);
}
.fg-aurora-veiled,
.ws-aurora-veiled {
  background-color: var(--surface-page);
  background-image: var(--aurora-veiled-bg);
}

/* Animated aurora-veiled — page / app shell only */

.fg-app,
.fg-page.fg-aurora-live,
.fg-aurora-veiled.fg-aurora-live,
body.fg-aurora-page,
.ws-app,
.ws-page.ws-aurora-live,
.ws-aurora-veiled.ws-aurora-live,
body.ws-aurora-page {
  background-color: var(--surface-page);
  background-image: var(--aurora-veiled-bg, var(--surface-ambient, none));
  background-attachment: fixed;
}
@media (prefers-reduced-motion: no-preference) {
  .fg-app,
  .fg-aurora-live,
  body.fg-aurora-page {
    background-size: 160% 160%;
    animation: fg-aurora-drift 34s ease-in-out infinite alternate;
  }
}
@keyframes fg-aurora-drift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fg-app,
  .fg-aurora-live,
  body.fg-aurora-page {
    animation: none;
    background-size: cover;
    background-position: 50% 40%;
  }
}

/* ===== tokens/auth-surface.css ===== */
/**
 * Fellow Glass — auth / login surface
 *
 * Full-page aurora-veiled with animated expand/contract + pixel grain that
 * breathes (pixel size grows/shrinks). Card stays liquid-glass on top.
 */

/* :root: valores movidos para tokens.json */

/* :is(.dark, [data-theme="dark"]): valores movidos para tokens.json */


.fg-auth-page,
.ws-auth-page {
  background-color: var(--auth-bg);
  color: var(--auth-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  min-height: 100%;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  padding: 2rem;
  box-sizing: border-box;
}

/* Layer 0 — base aurora fill (static underlay) */

.fg-auth-page,
.ws-auth-page {
  background-image: var(--aurora-veiled-bg, var(--surface-ambient, none));
  background-attachment: fixed;
  background-size: cover;
}

/* Layer 1 — aurora-veiled mesh: expands, contracts, drifts */

.fg-auth-page::before,
.ws-auth-page::before {
  content: "";
  position: fixed;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background-image: var(--aurora-veiled-bg, var(--aurora-cool));
  background-size: 140% 140%;
  background-position: 30% 40%;
  background-repeat: no-repeat;
  filter: saturate(1.25) contrast(1.05);
  opacity: 1;
  will-change: transform, background-position, background-size, filter;
}

/* Layer 2 — granular / pixelated film (size breathes = pixelização expande/reduz) */

.fg-auth-page::after,
.ws-auth-page::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTI4IDEyOCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjxmZUNvbXBvbmVudFRyYW5zZmVyPjxmZUZ1bmNBIHR5cGU9J2Rpc2NyZXRlJyB0YWJsZVZhbHVlcz0nMCAwLjE1IDAuMzUgMC41NSAwLjc1IDEnLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-repeat: repeat;
  background-size: 96px 96px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  will-change: background-size, background-position, opacity, transform;
}
:is(.dark, [data-theme="dark"]) .fg-auth-page::after,
:is(.dark, [data-theme="dark"]) .ws-auth-page::after {
  mix-blend-mode: soft-light;
  opacity: 0.4;
}

@media (prefers-reduced-motion: no-preference) {
  .fg-auth-page::before {
    animation:
      fg-auth-aurora-breathe 18s ease-in-out infinite alternate,
      fg-auth-aurora-pan 32s ease-in-out infinite alternate;
  }
.fg-auth-page::after,
.ws-auth-page::after {
    animation:
      fg-auth-grain-pixel 7s steps(8) infinite,
      fg-auth-grain-breathe 11s ease-in-out infinite alternate;
  }
}

/* Aurora expands / contracts + slight rotate (veiled bloom) */
@keyframes fg-auth-aurora-breathe {
  0% {
    transform: scale(1) rotate(-1deg);
    background-size: 130% 130%;
    filter: saturate(1.1) contrast(1) blur(0px);
    opacity: 0.88;
  }
  40% {
    transform: scale(1.12) rotate(0.6deg);
    background-size: 175% 175%;
    filter: saturate(1.35) contrast(1.08) blur(0.5px);
    opacity: 1;
  }
  100% {
    transform: scale(1.22) rotate(1.4deg);
    background-size: 210% 210%;
    filter: saturate(1.2) contrast(1.04) blur(1px);
    opacity: 0.92;
  }
}

@keyframes fg-auth-aurora-pan {
  0% {
    background-position: 18% 22%;
  }
  35% {
    background-position: 72% 38%;
  }
  70% {
    background-position: 48% 78%;
  }
  100% {
    background-position: 28% 48%;
  }
}

/* Pixel tile jumps (grain “live”) */
@keyframes fg-auth-grain-pixel {
  0% {
    background-position: 0 0;
  }
  12% {
    background-position: -24px 16px;
  }
  25% {
    background-position: 18px -20px;
  }
  37% {
    background-position: -12px -28px;
  }
  50% {
    background-position: 28px 8px;
  }
  62% {
    background-position: -32px -4px;
  }
  75% {
    background-position: 8px 24px;
  }
  87% {
    background-position: -16px 12px;
  }
  100% {
    background-position: 0 0;
  }
}

/* Pixel size expands / reduces — the grain “pixelização” breathing */
@keyframes fg-auth-grain-breathe {
  0% {
    background-size: 64px 64px;
    opacity: 0.32;
    transform: scale(1);
  }
  35% {
    background-size: 110px 110px;
    opacity: 0.48;
    transform: scale(1.03);
  }
  70% {
    background-size: 160px 160px;
    opacity: 0.38;
    transform: scale(1.06);
  }
  100% {
    background-size: 220px 220px;
    opacity: 0.5;
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fg-auth-page::before,
  .fg-auth-page::after {
    animation: none;
  }
.fg-auth-page::before,
.ws-auth-page::before {
    background-position: 40% 35%;
    background-size: 160% 160%;
    transform: none;
  }
.fg-auth-page::after,
.ws-auth-page::after {
    background-size: 120px 120px;
    opacity: 0.35;
  }
}
.fg-auth-page > *,
.ws-auth-page > * {
  position: relative;
  z-index: 2;
}

/*
 * Login — neumorphism system (static, rest = hover).
 *
 * Card (extruded light plate on aurora):
 *   dark BR cast + light TL lift + tight edge
 * CTA (extruded black on white card):
 *   strong dark cast + white lift + deep inset dual (convex black)
 */

.fg-auth-card,
.ws-auth-card {
  position: relative;
  z-index: 3;
  width: min(360px, 90vw);
  padding: 44px 36px;
  border-radius: var(--radius-3xl, 24px);
  text-align: center;
  background: var(--auth-neo-card-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #ffffff;
  box-shadow: var(--auth-neo-card);
  cursor: default;
}
.fg-auth-card:hover,
.fg-auth-card:focus-within,
.ws-auth-card:hover,
.ws-auth-card:focus-within {
  background: var(--auth-neo-card-bg);
  border-color: #ffffff;
  box-shadow: var(--auth-neo-card);
}
:is(.dark, [data-theme="dark"]) .fg-auth-card,
:is(.dark, [data-theme="dark"]) .fg-auth-card:hover,
:is(.dark, [data-theme="dark"]) .fg-auth-card:focus-within,
:is(.dark, [data-theme="dark"]) .ws-auth-card,
:is(.dark, [data-theme="dark"]) .ws-auth-card:hover,
:is(.dark, [data-theme="dark"]) .ws-auth-card:focus-within {
  background: var(--auth-neo-card-bg);
  border-color: var(--auth-neo-card-bg);
  box-shadow: var(--auth-neo-card);
}
.fg-auth-title,
.ws-auth-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: var(--tracking-display, -0.02em);
  margin: 0;
  color: var(--auth-ink);
}
.fg-auth-sub,
.ws-auth-sub {
  color: var(--auth-muted);
  font-size: 0.82rem;
  margin: 8px 0 28px;
}

/*
 * Entrar — black convex neumorphic.
 * No animation. No hover change (static high-contrast dual neo).
 */

.fg-auth-cta.fg-btn,
.fg-auth-cta,
.ws-auth-cta.ws-btn,
.ws-auth-cta {
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: var(--weight-medium, 500);
  letter-spacing: 0.04em;
  font-family: var(--font-emphasis, inherit);
  cursor: pointer;
  color: #fafafa !important;
  border: 1px solid var(--auth-neo-ink, #0c0c0e) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--auth-neo-cta) !important;
  transition: none;
  filter: none;
  /* Solid ink only — volume comes from dual neo shadows, not uneven fill gloss */
  background: var(--auth-neo-ink, #0c0c0e) !important;
}
.fg-auth-cta.fg-btn::before,
.fg-auth-cta::before,
.fg-auth-cta.fg-btn::after,
.fg-auth-cta::after,
.ws-auth-cta.ws-btn::before,
.ws-auth-cta::before,
.ws-auth-cta.ws-btn::after,
.ws-auth-cta::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Static — same look on hover/active */

.fg-auth-cta.fg-btn:hover,
.fg-auth-cta:hover,
.fg-auth-cta.fg-btn:active,
.fg-auth-cta:active,
.ws-auth-cta.ws-btn:hover,
.ws-auth-cta:hover,
.ws-auth-cta.ws-btn:active,
.ws-auth-cta:active {
  filter: none !important;
  color: #fafafa !important;
  background: var(--auth-neo-ink, #0c0c0e) !important;
  border-color: var(--auth-neo-ink, #0c0c0e) !important;
  box-shadow: var(--auth-neo-cta) !important;
  transform: none !important;
}
.fg-auth-cta.fg-btn:focus-visible,
.fg-auth-cta:focus-visible,
.ws-auth-cta.ws-btn:focus-visible,
.ws-auth-cta:focus-visible {
  outline: none;
  box-shadow:
    var(--auth-neo-cta),
    0 0 0 2px #ffffff,
    0 0 0 4px rgba(0, 0, 0, 0.35) !important;
}
:is(.dark, [data-theme="dark"]) .fg-auth-cta.fg-btn:focus-visible,
:is(.dark, [data-theme="dark"]) .fg-auth-cta:focus-visible,
:is(.dark, [data-theme="dark"]) .ws-auth-cta.ws-btn:focus-visible,
:is(.dark, [data-theme="dark"]) .ws-auth-cta:focus-visible {
  box-shadow:
    var(--auth-neo-cta),
    0 0 0 2px #1a1a1e,
    0 0 0 4px rgba(255, 255, 255, 0.25) !important;
}
.fg-auth-footer,
.ws-auth-footer {
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  color: var(--auth-muted);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-widest, 0.12em);
  text-transform: uppercase;
  pointer-events: none;
}

/* ===== tokens/colors.css ===== */
/**
 * Fellow Glass — color ramps (reference)
 * Semantic roles live in theme.css. These ramps document the HSL families
 * used in production so designers/devs can extend without inventing hues.
 */

/* :root: valores movidos para tokens.json */

/* ===== tokens/elevation.css ===== */
/**
 * Fellow Glass — elevation / depth
 *
 * Technical component names (use these in code & docs):
 *
 * | Name                 | Class                         | Surface token        | Shadow            |
 * |----------------------|-------------------------------|----------------------|-------------------|
 * | page                 | .fg-page                      | --surface-page       | none              |
 * | well (recessed)      | .fg-well / .fg-panel-recessed | --surface-well       | --shadow-recessed |
 * | panel (elevated)     | .fg-panel / .fg-panel-elevated| --surface-panel      | --shadow-panel (soft-neo) |
 * | liquid-glass         | .fg-liquid-glass              | frost + blur         | --shadow-glass    |
 *
 * Do not invent extra elevation steps in product UI.
 * Legacy: .fg-elev-1 → well · .fg-elev-2 → panel · .fg-card--neo → panel
 */

:root {
  /*
   * Soft-neo panel elevation — tight, crisp (Apple-adjacent). No soft blur bloom.
   * Interaction ladder (must stay perceptible): rest < hover < selected.
   * Hover is never stronger than selected.
   */

  /* Aliases (older names) */
  --shadow-neo: var(--shadow-panel);
  --shadow-neo-hover: var(--shadow-panel-hover);
  --shadow-neo-soft: var(--shadow-recessed);
  --shadow-card: var(--shadow-panel);
  --shadow-card-hover: var(--shadow-panel-hover);
  --shadow-float: var(--shadow-glass);

  --radius-panel-lg: 1.5rem; /* @kind other */ /* @kind other */ /* @kind other */ /* @kind other */ /* @kind other */ /* @kind other */ /* @kind other */
}

:is(.dark, [data-theme="dark"]) {
  --shadow-neo: var(--shadow-panel);
  --shadow-neo-hover: var(--shadow-panel-hover);
  --shadow-neo-soft: var(--shadow-recessed);
}

/* ——— well (recessed) ——— */

.fg-well,
.fg-panel-recessed,
.fg-card--neo-muted,
.fg-elev-1,
.ws-well,
.ws-panel-recessed,
.ws-card--neo-muted,
.ws-elev-1 {
  background: var(--surface-well);
  border: 1px solid var(--line-solid, var(--surface-hairline));
  border-radius: var(--radius-panel-lg);
  box-shadow: var(--shadow-recessed);
  color: var(--foreground);
}
.fg-well:hover,
.fg-panel-recessed:hover,
.fg-card--neo-muted:hover,
.fg-elev-1:hover,
.ws-well:hover,
.ws-panel-recessed:hover,
.ws-card--neo-muted:hover,
.ws-elev-1:hover {
  border-color: color-mix(
    in oklab,
    var(--foreground) 10%,
    var(--line-solid, var(--border))
  );
  background: color-mix(
    in oklab,
    var(--surface-well) 85%,
    var(--surface-panel) 15%
  );
}

/* ——— panel (elevated soft-neo) ——— */

.fg-panel,
.fg-panel-elevated,
.fg-card--neo,
.fg-card--lift,
.fg-elev-2,
.ws-panel,
.ws-panel-elevated,
.ws-card--neo,
.ws-card--lift,
.ws-elev-2 {
  background: var(--surface-panel);
  border: 1px solid var(--surface-panel);
  border-radius: var(--radius-panel-lg);
  box-shadow: var(--shadow-panel);
  color: var(--foreground);
}
:is(.dark, [data-theme="dark"]) .fg-panel,
:is(.dark, [data-theme="dark"]) .fg-panel-elevated,
:is(.dark, [data-theme="dark"]) .fg-card--neo,
:is(.dark, [data-theme="dark"]) .fg-card--lift,
:is(.dark, [data-theme="dark"]) .fg-elev-2,
:is(.dark, [data-theme="dark"]) .ws-panel,
:is(.dark, [data-theme="dark"]) .ws-panel-elevated,
:is(.dark, [data-theme="dark"]) .ws-card--neo,
:is(.dark, [data-theme="dark"]) .ws-card--lift,
:is(.dark, [data-theme="dark"]) .ws-elev-2 {
  border: 1px solid var(--surface-line);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.fg-panel:hover,
.fg-panel-elevated:hover,
.fg-card--neo:hover,
.fg-card--lift:hover,
.fg-elev-2:hover,
.ws-panel:hover,
.ws-panel-elevated:hover,
.ws-card--neo:hover,
.ws-card--lift:hover,
.ws-elev-2:hover {
  box-shadow: var(--shadow-panel-hover);
}

/* Popover / menu default = elevated panel (or use liquid-glass) */

.fg-elev-float,
.fg-panel-float,
.ws-elev-float,
.ws-panel-float {
  background: var(--surface-panel);
  border: 1px solid var(--surface-line, var(--border));
  border-radius: var(--radius-panel-lg);
  box-shadow: var(--shadow-panel);
}
:is(.dark, [data-theme="dark"]) .fg-elev-float,
:is(.dark, [data-theme="dark"]) .fg-panel-float,
:is(.dark, [data-theme="dark"]) .ws-elev-float,
:is(.dark, [data-theme="dark"]) .ws-panel-float {
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.fg-elev-overlay,
.fg-panel-modal,
.ws-elev-overlay,
.ws-panel-modal {
  background: var(--surface-overlay);
  border-radius: var(--radius-panel-lg);
  box-shadow: var(--shadow-overlay);
  z-index: var(--z-modal);
  border: 1px solid var(--surface-line, transparent);
}
:is(.dark, [data-theme="dark"]) .fg-elev-overlay,
:is(.dark, [data-theme="dark"]) .fg-panel-modal,
:is(.dark, [data-theme="dark"]) .ws-elev-overlay,
:is(.dark, [data-theme="dark"]) .ws-panel-modal {
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}

/* ===== tokens/motion.css ===== */
/**
 * Fellow Glass — motion tokens & keyframes used by the product
 */

:root {
  --ease-standard: ease; /* @kind other */
  --ease-in-out: ease-in-out; /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-normal: 300ms; /* @kind other */
  --duration-slow: 500ms; /* @kind other */
  --duration-chat-spin: 9s; /* @kind other */
  --duration-smog: 3.4s; /* @kind other */
  --duration-ticker: 7s; /* @kind other */
}

@keyframes fg-smog-breathe {
  0%,
  100% {
    box-shadow: 0 3px 8px rgb(0 0 0 / 0.18);
  }
  50% {
    box-shadow: 0 7px 14px rgb(0 0 0 / 0.28);
  }
}

@keyframes fg-ticker-cross {
  0% {
    left: -45%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    left: 102%;
    opacity: 0;
  }
}

@keyframes fg-typing {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-2px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-chat-spin: 0.01ms; /* @kind other */
    --duration-smog: 0.01ms; /* @kind other */
    --duration-ticker: 0.01ms; /* @kind other */
  }
}

/* ===== tokens/spacing.css ===== */
/**
 * Fellow Glass — radius, spacing & density (refactored).
 *
 * Two intentional densities, switched with [data-density] on any container:
 *   [data-density="app"]     compact product chrome (default)
 *   [data-density="canvas"]  airy canvas / marketing / reading
 * Surfaces read --surface-pad / --surface-gap so they adapt automatically.
 */

:root {
  /* ——— Radius scale (clean, even steps) ——— */ /* controls, inputs, chips */ /* buttons-pill aside; small cards */ /* app panels */ /* canvas cards, wells */ /* chat frame, modals, sheets */

  /* Back-compat aliases */
  --radius-panel-lg: var(--radius-2xl);

  /* ——— Spacing scale (4-based) ——— */ /* 4 */ /* 8 */ /* 12 */ /* 16 */ /* 24 */ /* 32 */ /* 48 */

  /* ——— Density tokens (default = app) ——— */
  --surface-pad: var(--space-4); /* 16 */
  --surface-gap: var(--space-2); /* 8 */
  --stack-gap: var(--space-3);
  /* Control heights — sm 32 / md 40 / lg 48 (product + a11y ladder) */ /* 40 */ /* 32 */ /* 48 */

  /* Layout chrome */ /* 820 */

  /* Legacy density names kept as pointers */
  --density-app-pad: var(--space-4);
  --density-marketing-pad: var(--space-6);
  --density-marketing-gap: var(--space-5);
}

[data-density="app"] {
  --surface-pad: var(--space-4); /* 16 */
  --surface-gap: var(--space-2); /* 8 */
  --stack-gap: var(--space-3);
}

[data-density="canvas"] {
  --surface-pad: var(--space-5); /* 24 */
  --surface-gap: var(--space-4); /* 16 */
  --stack-gap: var(--space-5);
}

/* ===== tokens/surfaces.css ===== */
/**
 * Fellow Glass — surface roles (technical names)
 *
 * Named for machines and humans — not lab shorthand.
 *
 * | Token              | Role                         | Light              | Dark (soft)                    |
 * |--------------------|------------------------------|--------------------|--------------------------------|
 * | --surface-page     | App / viewport background    | #FFFFFF solid      | soft charcoal + ambient glow   |
 * | --surface-well     | Recessed nest (inputs wells) | #F4F4F5            | translucent white 4–6%         |
 * | --surface-chrome   | Dock / stage structural fill | #FFFFFF / frost    | translucent white ~6%          |
 * | --surface-panel    | Elevated solid card plate    | #FFFFFF            | translucent white ~8–10%       |
 * | --surface-overlay  | Modal / popover solid base   | #FFFFFF            | translucent white ~12%         |
 *
 * Numeric aliases --surface-0…5 remain for older snippets only.
 */

:root {

  /* Semantic surface roles (cool-tinted neutrals for monochrome hierarchy) */

  /* Optional frost fills (liquid / sticky chrome) */

  /* Legacy numeric map → roles */

  /* Ambient = aurora-veiled page mesh (color lives only here, not on chrome) */
  --surface-ambient: var(
    --aurora-veiled-bg,
    radial-gradient(
      ellipse 70% 50% at 15% -10%,
      oklch(90% 0.05 258 / 0.1),
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 45% at 90% 8%,
      oklch(92% 0.045 205 / 0.08),
      transparent 60%
    )
  );
}

:is(.dark, [data-theme="dark"]) {
  /**
   * Soft dark — not pure black.
   * Page is charcoal; wells/panels are translucent lifts + blur.
   */

  --surface-ambient:
    radial-gradient(
      ellipse 100% 70% at 50% -25%,
      oklch(0.42 0.05 270 / 0.28),
      transparent 58%
    ),
    radial-gradient(
      ellipse 60% 40% at 100% 100%,
      oklch(0.35 0.03 220 / 0.12),
      transparent 50%
    );
}

/* ——— Component surface utilities (prefer these names) ——— */


.fg-page,
.fg-surface-page,
.fg-canvas-soft,
.fg-surface-0,
.ws-page,
.ws-surface-page,
.ws-canvas-soft,
.ws-surface-0 {
  background-color: var(--surface-page);
  background-image: var(--surface-ambient);
  background-attachment: fixed;
  color: var(--foreground);
}
.fg-well,
.fg-surface-well,
.fg-surface-1,
.ws-well,
.ws-surface-well,
.ws-surface-1 {
  background: var(--surface-well);
  color: var(--foreground);
}
.fg-chrome,
.fg-surface-chrome,
.fg-surface-2,
.ws-chrome,
.ws-surface-chrome,
.ws-surface-2 {
  background: var(--surface-chrome);
  color: var(--foreground);
}
.fg-surface-panel,
.fg-surface-3,
.ws-surface-panel,
.ws-surface-3 {
  background: var(--surface-panel);
  color: var(--foreground);
}

/* Frosted chrome (dock / stage-bar) — translucent UI */

.fg-chrome-frost,
.ws-chrome-frost {
  background: var(--surface-chrome-frost);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  color: var(--foreground);
}
:is(.dark, [data-theme="dark"]) .fg-well,
:is(.dark, [data-theme="dark"]) .fg-surface-well,
:is(.dark, [data-theme="dark"]) .ws-well,
:is(.dark, [data-theme="dark"]) .ws-surface-well {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: var(--surface-line);
}
:is(.dark, [data-theme="dark"]) .fg-chrome,
:is(.dark, [data-theme="dark"]) .fg-surface-chrome,
:is(.dark, [data-theme="dark"]) .ws-chrome,
:is(.dark, [data-theme="dark"]) .ws-surface-chrome {
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* ===== tokens/theme.css ===== */
/**
 * Fellow Glass — semantic theme
 * Binds roles: page / well / chrome / panel → shadcn-like tokens.
 */

:root {
  color-scheme: light;
  --primary-hover: hsl(240 6% 18%);
  --secondary-hover: color-mix(
    in oklab,
    var(--surface-well) 70%,
    var(--ink-on-light) 8%
  );
  --accent-hover: color-mix(
    in oklab,
    var(--surface-well) 65%,
    var(--ink-on-light) 10%
  );
  --ring: var(--ink-on-light); /* @kind other */
  /* Discreet resting fill; selected = nearly transparent acrylic */
  /* White pearl rim — Apple liquid-glass white, never tinted on select */
  --glass-border-outer: color-mix(
    in oklab,
    var(--ink-on-light) 7%,
    transparent
  );
  /* Component elevation: soft-neo only (colored aurora is page-bg exclusive) */
  --glass-shadow: var(--shadow-panel);
  --glass-shadow-hover: var(--shadow-panel-hover);
  --glass-shadow-focus: var(--shadow-selected-glass, var(--shadow-panel));

  --hover-motion: none; /* @kind other */
  --hover-well: var(--accent-hover);
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--ring);
}

:is(.dark, [data-theme="dark"]) {
  color-scheme: dark;
  --primary-hover: color-mix(in oklab, var(--ink-on-dark) 90%, white);
  --secondary-hover: rgb(255 255 255 / 0.1);
  --accent-hover: rgb(255 255 255 / 0.1);
  --ring: color-mix(in oklab, var(--ink-on-dark) 75%, transparent);
  --glass-border-outer: rgb(0 0 0 / 0.35);
  /* Component elevation: soft-neo only (colored aurora is page-bg exclusive) */
  --glass-shadow: var(--shadow-panel);
  --glass-shadow-hover: var(--shadow-panel-hover);
  --glass-shadow-focus: var(--shadow-selected-glass, var(--shadow-panel));

  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--ring);
}

/* ===== tokens/typography.css ===== */
/**
 * Fellow Glass — type (canonical from fellow-glass-decisions.json)
 * T0 DM Serif Display · T1 Urbanist · T2 Nunito Sans · Mono Roboto Mono
 * Scale: Compact (approved)
 */

:root {
  --font-serif: var(--font-display);

  --font-sans: var(--font-body);
  --font-ui: var(--font-emphasis);
  --font-chat: var(--font-body);
  --font-brand: var(--font-emphasis);

  /* Compact scale (approved) */
  --text-display: 2rem; /* 32 */
  --text-display-sm: 1.625rem; /* 26 */
  --text-title: 1.125rem; /* 18 */
  --text-subtitle: 0.9375rem; /* 15 */
  --text-body: 0.875rem; /* 14 */
  --text-body-sm: 0.8125rem; /* 13 */
  --text-label: 0.75rem; /* 12 */
  --text-meta: 0.6875rem; /* 11 */
  --text-eyebrow: 0.625rem; /* 10 */
  --text-mono: 0.75rem; /* 12 */

  --leading-display: 1.12;
  --leading-title: 1.28;
  --leading-body: 1.55;
  --leading-chat: 1.6;
  --leading-meta: 1.4;
  --leading-mono: 1.5;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-display: -0.02em;
  --tracking-title: -0.015em;
  --tracking-body: -0.01em;
  --tracking-label: 0.02em;
  --tracking-eyebrow: 0.08em;
  --tracking-brand: 0.04em;
  --tracking-mono: -0.02em;
}

/* ===== primitives/glass.css ===== */
/**
 * Fellow Glass — liquid glass (Apple-adjacent).
 *
 * Hierarchy:
 *   page (aurora-veiled bg) → well → panel soft-neo → liquid-glass (pearl + soft-neo)
 *
 * Selected chrome = white pearl rim + soft-neo. NO colored/animated shadows on components.
 * Colored aurora lives only on the full-page background.
 */

:root {
  --glass-radius: var(--radius-2xl);
}

/* Chat composer owns its elevation in composer.css — never treat as liquid-glass */

.fg-liquid-glass:not(.fg-composer-box),
.fg-glass-panel,
.glass-panel,
.ws-liquid-glass:not(.ws-composer-box),
.ws-glass-panel {
  position: relative;
  isolation: isolate;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-highlight-soft),
    0 0 0 1px var(--glass-border-outer),
    var(--shadow-panel);
  transition:
    background var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
}

/* Contained specular sheen (monochrome, not a color show) */

.fg-liquid-glass:not(.fg-composer-box)::before,
.fg-glass-panel::before,
.ws-liquid-glass:not(.ws-composer-box)::before,
.ws-glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    125deg,
    transparent 34%,
    rgb(255 255 255 / 0.1) 47%,
    rgb(255 255 255 / 0.02) 55%,
    transparent 66%
  );
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .fg-liquid-glass:not(.fg-composer-box)::before,
  .fg-glass-panel::before {
    background-size: 240% 240%;
    animation: fg-glass-drift 18s ease-in-out infinite alternate;
  }
}
@keyframes fg-glass-drift {
  0% {
    background-position: 0% 50%;
    opacity: 0.65;
  }
  100% {
    background-position: 100% 50%;
    opacity: 0.95;
  }
}

/* Hover — pearl brightens + soft-neo lift */

.fg-liquid-glass:not(.fg-composer-box):hover,
.fg-glass-panel:hover,
.glass-panel:is(button, a):hover,
.ws-liquid-glass:not(.ws-composer-box):hover,
.ws-glass-panel:hover {
  border-color: var(--glass-border-white, var(--glass-border-strong));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    inset 0 -1px 0 var(--glass-highlight-soft),
    0 0 0 1px rgb(255 255 255 / 0.35),
    var(--shadow-panel-hover);
}

/* Selected — liquid glass + soft-neo selected (above hover; white pearl, no tint) */

.fg-liquid-glass:not(.fg-composer-box).is-selected,
.fg-liquid-glass:not(.fg-composer-box)[aria-selected="true"],
.fg-glass-panel.is-selected,
.fg-glass-panel[aria-selected="true"],
.ws-liquid-glass:not(.ws-composer-box).is-selected,
.ws-liquid-glass:not(.ws-composer-box)[aria-selected="true"],
.ws-glass-panel.is-selected,
.ws-glass-panel[aria-selected="true"] {
  background: var(--glass-fill);
  border-color: var(--glass-border-white, #fff);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate));
  box-shadow: var(
    --shadow-selected-glass,
    var(--shadow-panel-selected, var(--shadow-panel))
  );
}
.fg-liquid-glass:not(.fg-composer-box):focus-within,
.fg-glass-panel:focus-within,
.ws-liquid-glass:not(.ws-composer-box):focus-within,
.ws-glass-panel:focus-within {
  border-color: var(--glass-border-white, #fff);
  box-shadow: var(
    --shadow-selected-glass,
    var(--shadow-panel-selected, var(--shadow-panel))
  );
}

/* ——— rim-first (default product glass) ——— */

[data-selection="rim-first"] .fg-liquid-glass,
[data-selection="rim-first"] .fg-glass-panel,
[data-selection="rim-first"] .ws-liquid-glass,
[data-selection="rim-first"] .ws-glass-panel {
  border-color: var(--glass-border);
  background: var(--glass-fill);
}

/* ——— flat-first: rest is flat; select = pearl rim (rim effect) ——— */

[data-selection="flat-first"] .fg-liquid-glass,
[data-selection="flat-first"] .fg-glass-panel,
[data-selection="flat-first"] .ws-liquid-glass,
[data-selection="flat-first"] .ws-glass-panel {
  background: transparent;
  border-color: var(--hairline, var(--border));
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-selection="flat-first"] .fg-liquid-glass::before,
[data-selection="flat-first"] .fg-glass-panel::before,
[data-selection="flat-first"] .ws-liquid-glass::before,
[data-selection="flat-first"] .ws-glass-panel::before {
  opacity: 0;
}
[data-selection="flat-first"] .fg-liquid-glass:hover,
[data-selection="flat-first"] .fg-glass-panel:hover,
[data-selection="flat-first"] .ws-liquid-glass:hover,
[data-selection="flat-first"] .ws-glass-panel:hover {
  border-color: var(--glass-border-white-soft, var(--glass-border));
  box-shadow: var(--shadow-panel);
}
[data-selection="flat-first"] .fg-liquid-glass.is-selected,
[data-selection="flat-first"] .fg-liquid-glass[aria-selected="true"],
[data-selection="flat-first"] .fg-glass-panel.is-selected,
[data-selection="flat-first"] .fg-glass-panel[aria-selected="true"],
[data-selection="flat-first"] .fg-liquid-glass:focus-within,
[data-selection="flat-first"] .fg-glass-panel:focus-within,
[data-selection="flat-first"] .ws-liquid-glass.is-selected,
[data-selection="flat-first"] .ws-liquid-glass[aria-selected="true"],
[data-selection="flat-first"] .ws-glass-panel.is-selected,
[data-selection="flat-first"] .ws-glass-panel[aria-selected="true"],
[data-selection="flat-first"] .ws-liquid-glass:focus-within,
[data-selection="flat-first"] .ws-glass-panel:focus-within {
  background: var(--glass-fill);
  border-color: var(--glass-border-white, #fff);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate));
  box-shadow: var(--shadow-selected-glass, var(--shadow-panel));
}
[data-selection="flat-first"] .fg-liquid-glass.is-selected::before,
[data-selection="flat-first"] .fg-liquid-glass[aria-selected="true"]::before,
[data-selection="flat-first"] .fg-liquid-glass:focus-within::before,
[data-selection="flat-first"] .ws-liquid-glass.is-selected::before,
[data-selection="flat-first"] .ws-liquid-glass[aria-selected="true"]::before,
[data-selection="flat-first"] .ws-liquid-glass:focus-within::before {
  opacity: 0.85;
}

/* Frosted chrome bar */

.fg-glass-bar,
.glass-bar,
.ws-glass-bar {
  background: var(--glass-fill-bar);
  backdrop-filter: blur(var(--glass-blur-bar)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-bar))
    saturate(var(--glass-saturate));
}

/* Model / selector pill */

.fg-glass-drop,
.glass-drop,
.ws-glass-drop {
  background: var(--glass-fill-drop);
  backdrop-filter: blur(var(--glass-blur-drop)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-drop))
    saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-drop);
  border-radius: var(--radius-pill);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 1px var(--glass-border-outer),
    var(--shadow-panel);
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.fg-glass-drop:hover,
.glass-drop:hover,
.ws-glass-drop:hover {
  border-color: var(--glass-border-white, var(--glass-border-strong));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 0 0 1px rgb(255 255 255 / 0.4),
    var(--shadow-panel-hover);
}
.fg-glass-drop.is-selected,
.fg-glass-drop[aria-selected="true"],
.fg-glass-drop[aria-pressed="true"],
.ws-glass-drop.is-selected,
.ws-glass-drop[aria-selected="true"],
.ws-glass-drop[aria-pressed="true"] {
  background: var(--glass-fill);
  border-color: var(--glass-border-white, #fff);
  box-shadow: var(--shadow-selected-glass, var(--shadow-panel));
}

/* Pearl border utility — white rim, soft-neo, optional frost when selected */

.fg-pearl-border,
.pearl-border,
.ws-pearl-border {
  border: 1px solid var(--glass-border-white-soft, var(--glass-border));
  background: transparent;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-highlight-soft),
    0 0 0 1px var(--glass-border-outer),
    var(--shadow-panel);
}
.fg-pearl-border.is-selected,
.fg-pearl-border[aria-selected="true"],
.fg-pearl-border.is-active,
.fg-pearl-border:focus-within,
.ws-pearl-border.is-selected,
.ws-pearl-border[aria-selected="true"],
.ws-pearl-border.is-active,
.ws-pearl-border:focus-within {
  border-color: var(--glass-border-white, #fff);
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate));
  box-shadow: var(--shadow-selected-glass, var(--shadow-panel));
}
.fg-glass-sheen,
.glass-sheen,
.ws-glass-sheen {
  position: relative;
  overflow: hidden;
}
.fg-glass-sheen::after,
.glass-sheen::after,
.ws-glass-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    transparent 38%,
    rgb(255 255 255 / 0.09) 48%,
    rgb(255 255 255 / 0.03) 54%,
    transparent 64%
  );
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .fg-liquid-glass,
  .fg-glass-panel,
  .glass-panel {
    transition: none;
  }
}

/* ===== primitives/edges.css ===== */
/**
 * Fellow Glass — structural edges, pearl rims & edge affordances (all four sides).
 *
 * Historically only left/right had function. Now every edge can carry a
 * hairline + glow, and collapsible docks get a draggable handle affordance.
 */

/* Glass edges — one per side */

.fg-glass-edge-t,
.glass-edge-t,
.ws-glass-edge-t {
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 10px rgb(0 0 0 / 0.06);
}
.fg-glass-edge-b,
.glass-edge-b,
.ws-glass-edge-b {
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.08);
}
.fg-glass-edge-l,
.glass-edge-l,
.ws-glass-edge-l {
  border-left: 1px solid var(--glass-border);
  box-shadow: -4px 0 10px rgb(0 0 0 / 0.06);
}
.fg-glass-edge-r,
.glass-edge-r,
.ws-glass-edge-r {
  border-right: 1px solid var(--glass-border);
  box-shadow: 4px 0 10px rgb(0 0 0 / 0.08);
}

/* Soft hairline separators with a faint iridescent glow — any side */

.fg-soft-edge-r,
.soft-edge-r,
.fg-soft-edge-l,
.soft-edge-l,
.ws-soft-edge-r,
.ws-soft-edge-l {
  position: relative;
}
.fg-soft-edge-r::after,
.soft-edge-r::after,
.fg-soft-edge-l::after,
.soft-edge-l::after,
.ws-soft-edge-r::after,
.ws-soft-edge-l::after {
  content: "";
  position: absolute;
  top: 8%;
  height: 84%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    oklch(70% 0.08 258 / 0.25),
    transparent
  );
}
.fg-soft-edge-r::after,
.soft-edge-r::after,
.ws-soft-edge-r::after {
  right: 0;
}
.fg-soft-edge-l::after,
.soft-edge-l::after,
.ws-soft-edge-l::after {
  left: 0;
}
:is(.dark, [data-theme="dark"]) .fg-soft-edge-r::after,
:is(.dark, [data-theme="dark"]) .soft-edge-r::after,
:is(.dark, [data-theme="dark"]) .fg-soft-edge-l::after,
:is(.dark, [data-theme="dark"]) .soft-edge-l::after,
:is(.dark, [data-theme="dark"]) .ws-soft-edge-r::after,
:is(.dark, [data-theme="dark"]) .ws-soft-edge-l::after {
  background: linear-gradient(
    180deg,
    transparent,
    rgb(255 255 255 / 0.14),
    transparent
  );
}

/* Pearl = white rim, no solid fill (Apple liquid-glass edge) */

.fg-pearl-border,
.pearl-border,
.ws-pearl-border {
  border: 1px solid var(--glass-border-white-soft, var(--glass-border));
  background: transparent;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-highlight-soft),
    0 0 0 1px var(--glass-border-outer),
    var(--shadow-panel);
}
.fg-pearl-border.is-selected,
.fg-pearl-border[aria-selected="true"],
.ws-pearl-border.is-selected,
.ws-pearl-border[aria-selected="true"] {
  border-color: var(--glass-border-white, #fff);
  background: var(--glass-fill-acrylic, rgb(255 255 255 / 0.04));
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: var(--shadow-selected-glass, var(--shadow-panel));
}
:is(.dark, [data-theme="dark"]) .fg-pearl-border,
:is(.dark, [data-theme="dark"]) .pearl-border,
:is(.dark, [data-theme="dark"]) .ws-pearl-border {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    inset 0 -1px 0 rgb(255 255 255 / 0.06),
    0 0 0 1px rgb(0 0 0 / 0.4),
    var(--shadow-panel);
}

/* ——— Edge affordance: draggable / collapsible handle on a dock border ——— */

.fg-edge-handle,
.ws-edge-handle {
  position: absolute;
  z-index: var(--z-sticky, 10);
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--muted-foreground);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}
.fg-edge-handle:hover,
.ws-edge-handle:hover {
  color: var(--foreground);
}
.fg-edge-handle::before,
.ws-edge-handle::before {
  content: "";
  width: 3px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--foreground) 18%, transparent);
  transition:
    background var(--duration-fast) var(--ease-standard),
    height var(--duration-fast) var(--ease-standard);
}
.fg-edge-handle:hover::before,
.ws-edge-handle:hover::before {
  background: var(--ring-tint);
  height: 46px;
}
.fg-edge-handle:focus-visible,
.ws-edge-handle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-md);
}

/* Side placement helpers (host sets top/height) */

.fg-edge-handle--r,
.ws-edge-handle--r {
  right: -7px;
}
.fg-edge-handle--l,
.ws-edge-handle--l {
  left: -7px;
}
.fg-edge-handle--r,
.fg-edge-handle--l,
.ws-edge-handle--r,
.ws-edge-handle--l {
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 64px;
}

/* Top / bottom edge handles — all four sides functional */

.fg-edge-handle--t,
.fg-edge-handle--b,
.ws-edge-handle--t,
.ws-edge-handle--b {
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 14px;
}
.fg-edge-handle--t,
.ws-edge-handle--t {
  top: -7px;
}
.fg-edge-handle--b,
.ws-edge-handle--b {
  bottom: -7px;
}
.fg-edge-handle--t::before,
.fg-edge-handle--b::before,
.ws-edge-handle--t::before,
.ws-edge-handle--b::before {
  width: 34px;
  height: 3px;
}
.fg-edge-handle--t:hover::before,
.fg-edge-handle--b:hover::before,
.ws-edge-handle--t:hover::before,
.ws-edge-handle--b:hover::before {
  width: 46px;
  height: 3px;
}

/* Soft edge top/bottom with iridescent glow */

.fg-soft-edge-t,
.soft-edge-t,
.fg-soft-edge-b,
.soft-edge-b,
.ws-soft-edge-t,
.ws-soft-edge-b {
  position: relative;
}
.fg-soft-edge-t::after,
.soft-edge-t::after,
.fg-soft-edge-b::after,
.soft-edge-b::after,
.ws-soft-edge-t::after,
.ws-soft-edge-b::after {
  content: "";
  position: absolute;
  left: 8%;
  width: 84%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    oklch(70% 0.08 258 / 0.25),
    oklch(78% 0.08 28 / 0.18),
    transparent
  );
}
.fg-soft-edge-t::after,
.soft-edge-t::after,
.ws-soft-edge-t::after {
  top: 0;
}
.fg-soft-edge-b::after,
.soft-edge-b::after,
.ws-soft-edge-b::after {
  bottom: 0;
}

/* ===== primitives/type-roles.css ===== */
/**
 * Type roles — apply hierarchy without guessing fonts
 */

/* T0 · Apex — Playfair only */

.fg-display,
.fg-font-display,
.font-display,
.ws-display,
.ws-font-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}
.fg-display--sm,
.ws-display--sm {
  font-size: var(--text-display-sm);
}
.fg-empty-prompt,
.ws-empty-prompt {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-regular);
  color: var(--muted-foreground);
  text-align: center;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

/* T1 · Emphasis — Outfit */

.fg-title,
.fg-font-ui,
.fg-font-brand,
.font-brand,
.ws-title,
.ws-font-ui,
.ws-font-brand {
  font-family: var(--font-emphasis);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-title);
}
.fg-title,
.ws-title {
  font-size: var(--text-title);
}
.fg-subtitle,
.ws-subtitle {
  font-family: var(--font-emphasis);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-title);
}
.fg-label,
.ws-label {
  font-family: var(--font-emphasis);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-meta);
}
.fg-eyebrow,
.fg-nav-section,
.ws-eyebrow,
.ws-nav-section {
  font-family: var(--font-emphasis);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted-foreground);
  line-height: var(--leading-meta);
}

/* T2 · Body — Manrope */

.fg-body,
.fg-font-chat,
.font-chat,
body,
.ws-body,
.ws-font-chat {
  font-family: var(--font-body);
}
.fg-body,
.ws-body {
  font-size: var(--text-body);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
}
.fg-body-sm,
.fg-font-chat,
.font-chat,
.fg-font-chat :where(p, li, ul, ol, td, th),
.font-chat :where(p, li, ul, ol, td, th),
.ws-body-sm,
.ws-font-chat,
.ws-font-chat :where(p, li, ul, ol, td, th) {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-light);
  line-height: var(--leading-chat);
}

/* Emphasis inside body prose: Outfit word, not Playfair */

.fg-body em,
.fg-font-chat em,
.font-chat em,
.ws-body em,
.ws-font-chat em {
  font-family: var(--font-emphasis);
  font-style: normal;
  font-weight: var(--weight-medium);
}

/* Rare: true citation may use Playfair italic */

.fg-quote,
.ws-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: 1.05em;
  line-height: var(--leading-body);
}
.fg-meta,
.ws-meta {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: var(--weight-regular);
  color: var(--muted-foreground);
  line-height: var(--leading-meta);
}
.fg-font-mono,
.font-mono,
.ws-font-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono, var(--text-meta));
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-mono, 0);
  line-height: var(--leading-mono, 1.5);
}

/* Terminal / code block surface */

.fg-terminal,
.ws-terminal {
  font-family: var(--font-mono);
  font-size: var(--text-mono, 0.8125rem);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-mono, 0);
  line-height: var(--leading-mono, 1.5);
  background: hsl(240 6% 10%);
  color: hsl(60 5% 92%);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  overflow: auto;
  white-space: pre-wrap;
  tab-size: 2;
}
:is(.dark, [data-theme="dark"]) .fg-terminal,
:is(.dark, [data-theme="dark"]) .ws-terminal {
  background: hsl(240 6% 6%);
  color: hsl(60 5% 90%);
  border: 1px solid hsl(240 4% 16%);
}

/* Nav items (fluxo pattern) — hover with real contrast */

.fg-nav-item,
.ws-nav-item {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-light);
  border-radius: 9px;
  padding: 0.45rem 0.65rem;
  color: var(--foreground);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  box-sizing: border-box;
  transition:
    background var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease,
    font-weight var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease;
}

/* Hover = soft-neo */

.fg-nav-item:hover:not(.fg-nav-item--active),
.ws-nav-item:hover:not(.ws-nav-item--active) {
  background: var(--surface-panel);
  border-color: var(--surface-panel);
  color: var(--foreground);
  box-shadow: var(--shadow-panel);
}

/* Active = Notas · well recessed */

.fg-nav-item--active,
.ws-nav-item--active {
  font-family: var(--font-emphasis);
  font-weight: var(--weight-medium);
  color: var(--foreground);
  background: var(--surface-well);
  border: 1px solid var(--surface-well);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-recessed);
}
.fg-nav-item--active:hover,
.ws-nav-item--active:hover {
  background: var(--surface-well);
  border-color: var(--surface-well);
  box-shadow: var(--shadow-recessed);
}

/* ===== primitives/composer.css ===== */
/**
 * Fellow Glass — chat composer
 *
 * Source of truth = Config screen cards (visual reference):
 *   REST           = Densidade · .fg-panel rest        → soft-neo padrão
 *   HOVER/SELECTED = Seleção · .fg-card--glass selected → soft-neo selected
 *
 * Shadow ladder from the two reference cards:
 *   rest  = --shadow-panel
 *   hover = --shadow-panel-selected  (same step as selected — never stronger)
 *   selected / focus = --shadow-panel-selected
 *
 * IMPORTANT: only focus-within / .is-selected / busy = selected.
 * Do NOT treat .is-active (has messages) as selected.
 */


.fg-chat-frame,
.chat-frame,
.ws-chat-frame {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-3xl, 1.5rem);
  max-width: var(--space-composer-max-chat, 48rem);
  width: 100%;
  margin-inline: auto;
}
.fg-chat-frame.is-empty,
.chat-frame.is-empty,
.ws-chat-frame.is-empty {
  max-width: var(--space-composer-max-empty, 36rem);
}
.fg-chat-frame::after,
.chat-frame::after,
.ws-chat-frame::after {
  content: none !important;
  display: none !important;
}
.fg-composer-box,
.composer-box,
.ws-composer-box {
  position: relative;
  z-index: 10;
  isolation: isolate;
  border-radius: var(--radius-3xl, 1.5rem);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

/* ========== REST = Densidade (.fg-panel) ==========
   Solid soft-neo plate — exact same elevation as Config “Densidade”. */

.fg-composer-box,
.fg-composer-box.fg-liquid-glass,
.fg-composer-box.fg-panel,
.fg-chat-frame .fg-composer-box,
.chat-frame .composer-box,
.ws-composer-box,
.ws-composer-box.ws-liquid-glass,
.ws-composer-box.ws-panel,
.ws-chat-frame .ws-composer-box {
  background: var(--surface-panel) !important;
  color: var(--foreground);
  /* same-color border — panel identity (no gray hairline) */
  border: 1px solid var(--surface-panel) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-panel) !important;
}

/* Kill any glass sheen inherited from .fg-liquid-glass */

.fg-composer-box::before,
.fg-composer-box.fg-liquid-glass::before,
.ws-composer-box::before,
.ws-composer-box.ws-liquid-glass::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
}

/* ========== HOVER (not focused) = Seleção selected soft-neo ==========
   Same step as selected — never exceeds selection. */

.fg-chat-frame:not(:focus-within):not(.is-selected):not(
    .fg-chat-frame-busy
  ):hover
  .fg-composer-box,
.fg-composer-box:not(.is-selected):not(:focus-within):hover,
.fg-composer-box.fg-liquid-glass:not(.is-selected):not(:focus-within):hover,
.ws-chat-frame:not(:focus-within):not(.is-selected):not(
    .ws-chat-frame-busy
  ):hover
  .ws-composer-box,
.ws-composer-box:not(.is-selected):not(:focus-within):hover,
.ws-composer-box.ws-liquid-glass:not(.is-selected):not(:focus-within):hover {
  background: var(--surface-panel) !important;
  border-color: var(--surface-panel) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-panel-selected) !important;
}

/* ========== SELECTED / focus = Seleção selected soft-neo ========== */

.fg-chat-frame:focus-within .fg-composer-box,
.fg-chat-frame.is-selected .fg-composer-box,
.chat-frame:focus-within .composer-box,
.chat-frame.is-selected .composer-box,
.fg-composer-box.is-selected,
.fg-composer-box:focus-within,
.fg-composer-box.fg-liquid-glass.is-selected,
.fg-composer-box.fg-liquid-glass:focus-within,
.fg-chat-frame-busy .fg-composer-box,
.chat-frame-busy .composer-box,
.ws-chat-frame:focus-within .ws-composer-box,
.ws-chat-frame.is-selected .ws-composer-box,
.ws-composer-box.is-selected,
.ws-composer-box:focus-within,
.ws-composer-box.ws-liquid-glass.is-selected,
.ws-composer-box.ws-liquid-glass:focus-within,
.ws-chat-frame-busy .ws-composer-box {
  background: var(--surface-panel) !important;
  border: 1px solid var(--surface-panel) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-panel-selected) !important;
}

/* selected + hover stays at selected (never drop) */

.fg-chat-frame:focus-within .fg-composer-box:hover,
.fg-chat-frame:focus-within:hover .fg-composer-box,
.fg-chat-frame.is-selected:hover .fg-composer-box,
.fg-composer-box.is-selected:hover,
.fg-composer-box:focus-within:hover,
.fg-composer-box.fg-liquid-glass:focus-within:hover,
.fg-chat-frame-busy:hover .fg-composer-box,
.ws-chat-frame:focus-within .ws-composer-box:hover,
.ws-chat-frame:focus-within:hover .ws-composer-box,
.ws-chat-frame.is-selected:hover .ws-composer-box,
.ws-composer-box.is-selected:hover,
.ws-composer-box:focus-within:hover,
.ws-composer-box.ws-liquid-glass:focus-within:hover,
.ws-chat-frame-busy:hover .ws-composer-box {
  background: var(--surface-panel) !important;
  border-color: var(--surface-panel) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-panel-selected) !important;
}
.fg-composer-box .fg-input,
.fg-composer-box textarea.fg-input,
.ws-composer-box .ws-input,
.ws-composer-box textarea.ws-input {
  position: relative;
  z-index: 2;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  min-height: var(--control-h, 2.5rem);
  font-size: var(--text-body);
  line-height: var(--leading-chat, 1.6);
  padding: 0.35rem 0.2rem !important;
}
.fg-composer-box > *,
.ws-composer-box > * {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .fg-composer-box {
    transition: none;
  }
}

/* ===== primitives/card.css ===== */
/**
 * Fellow Glass — surface materials (same pattern as Config screen)
 *
 *   panel  → soft-neo elevated   (Sessão / Densidade / Aparência)
 *   well   → recessed nest       (Modelo)
 *   glass  → liquid-glass live   (Seleção / Live view)
 *
 * No gray hairline language. Panel border matches fill (invisible);
 * identity is the soft-neo shadow. Glass identity is frost + pearl edge.
 */


.fg-card,
.ws-card {
  background: var(--surface-panel, var(--card));
  color: var(--card-foreground);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  padding: var(--surface-pad);
  transition:
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    background var(--duration-normal) var(--ease-standard);
}

/* ——— panel · soft-neo ——— */

.fg-panel,
.fg-panel-elevated,
.fg-card--neo,
.fg-card--lift,
.fg-elev-2,
.ws-panel,
.ws-panel-elevated,
.ws-card--neo,
.ws-card--lift,
.ws-elev-2 {
  background: var(--surface-panel);
  /* same-color border — no hairline gray */
  border: 1px solid var(--surface-panel);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-panel);
  color: var(--foreground);
  transition:
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    background var(--duration-normal) var(--ease-standard);
}
:is(.dark, [data-theme="dark"]) .fg-panel,
:is(.dark, [data-theme="dark"]) .fg-panel-elevated,
:is(.dark, [data-theme="dark"]) .fg-card--neo,
:is(.dark, [data-theme="dark"]) .fg-card--lift,
:is(.dark, [data-theme="dark"]) .fg-elev-2,
:is(.dark, [data-theme="dark"]) .ws-panel,
:is(.dark, [data-theme="dark"]) .ws-panel-elevated,
:is(.dark, [data-theme="dark"]) .ws-card--neo,
:is(.dark, [data-theme="dark"]) .ws-card--lift,
:is(.dark, [data-theme="dark"]) .ws-elev-2 {
  border-color: var(--surface-panel);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.fg-panel:hover,
.fg-panel-elevated:hover,
.fg-card--neo:hover,
.fg-card--lift:hover,
.fg-elev-2:hover,
.ws-panel:hover,
.ws-panel-elevated:hover,
.ws-card--neo:hover,
.ws-card--lift:hover,
.ws-elev-2:hover {
  box-shadow: var(--shadow-panel-hover);
}

/* Selected panel = still soft-neo, strongest step (above hover) */

.fg-panel.is-selected,
.fg-panel[aria-selected="true"],
.fg-panel-elevated.is-selected,
.fg-card--neo.is-selected,
.fg-card--neo[aria-selected="true"],
.ws-panel.is-selected,
.ws-panel[aria-selected="true"],
.ws-panel-elevated.is-selected,
.ws-card--neo.is-selected,
.ws-card--neo[aria-selected="true"] {
  background: var(--surface-panel);
  border-color: var(--surface-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-panel-selected);
}

/* ——— well · recessed (Notas) ——— */

.fg-well,
.fg-panel-recessed,
.fg-card--neo-muted,
.fg-elev-1,
.ws-well,
.ws-panel-recessed,
.ws-card--neo-muted,
.ws-elev-1 {
  background: var(--surface-well);
  border: 1px solid var(--surface-well);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-recessed);
  color: var(--foreground);
  transition:
    background var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}
.fg-well:hover,
.fg-panel-recessed:hover,
.fg-card--neo-muted:hover,
.fg-elev-1:hover,
.ws-well:hover,
.ws-panel-recessed:hover,
.ws-card--neo-muted:hover,
.ws-elev-1:hover {
  background: color-mix(
    in oklab,
    var(--surface-well) 82%,
    var(--surface-panel) 18%
  );
  box-shadow: var(--shadow-recessed);
}
.fg-well.is-selected,
.fg-well[aria-selected="true"],
.ws-well.is-selected,
.ws-well[aria-selected="true"] {
  background: var(--surface-well);
  border-color: var(--surface-well);
  box-shadow:
    var(--shadow-recessed),
    inset 0 0 0 1px color-mix(in oklab, var(--foreground) 8%, transparent);
}

/* ——— glass · liquid-glass (Config “Seleção” / Live view) — frost legível, não fantasma ——— */

.fg-card--glass,
.ws-card--glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-fill-bar, rgb(255 255 255 / 0.72));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate, 1.3));
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate, 1.3));
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 1px var(--glass-border-outer);
  border-radius: var(--radius-2xl);
  transition:
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    background var(--duration-normal) var(--ease-standard);
}
.fg-card--glass:hover,
.ws-card--glass:hover {
  background: var(--glass-fill-drop, rgb(255 255 255 / 0.78));
  border-color: var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 0 0 1px var(--glass-border-outer),
    var(--shadow-panel-hover);
}
/* glass selected — still glass; pearl + selected soft-neo (stronger than hover) */

.fg-card--glass.is-selected,
.fg-card--glass[aria-selected="true"],
.fg-card--glass:focus-within,
.ws-card--glass.is-selected,
.ws-card--glass[aria-selected="true"],
.ws-card--glass:focus-within {
  background: var(--glass-fill-drop, rgb(255 255 255 / 0.82));
  border-color: var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    0 0 0 1px var(--glass-border-outer),
    var(--shadow-panel-selected);
}
.fg-page,
.fg-canvas-soft,
.ws-page,
.ws-canvas-soft {
  background-color: var(--surface-page);
  background-image: var(--surface-ambient, none);
  background-attachment: fixed;
  color: var(--foreground);
}
.fg-callout,
.ws-callout {
  background: var(--surface-well);
  border: 1px solid transparent;
  border-left: 2.5px solid var(--rule, #111);
  padding: 0.7rem 0.9rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--foreground);
  box-shadow: var(--shadow-recessed);
}
.fg-hairline,
.ws-hairline {
  border: 0;
  border-top: 1px solid var(--hairline, var(--border));
  margin: 1rem 0;
}

/* ===== primitives/structure.css ===== */
/**
 * Structural hierarchy (from fluxo modular patterns, neutral colors)
 */


.fg-measure,
.ws-measure {
  max-width: var(--content-measure);
  margin-inline: auto;
  width: 100%;
}
.fg-stack,
.ws-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fg-stack--tight,
.ws-stack--tight {
  gap: 0.35rem;
}
.fg-stack--loose,
.ws-stack--loose {
  gap: 1.25rem;
}

/* Section block in a workspace */

.fg-section-head,
.ws-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.fg-status,
.ws-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-emphasis);
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
}
.fg-status__dot,
.ws-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-success, #24a148);
  flex: 0 0 auto;
}
.fg-status__dot--warn,
.ws-status__dot--warn {
  background: var(--fg-warning, #c78545);
}
.fg-status__dot--danger,
.ws-status__dot--danger {
  background: var(--destructive);
}

/* Activity timeline (not the app right-rail — that lives in shell.css as .fg-rail) */

.fg-timeline,
.ws-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fg-timeline__item,
.ws-timeline__item {
  display: grid;
  grid-template-columns: 2rem 1.25rem 1fr;
  gap: 0.45rem;
  position: relative;
  padding-bottom: 1.1rem;
}
.fg-timeline__item:not(:last-child)::after,
.ws-timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(2rem + 0.55rem);
  top: 1.4rem;
  bottom: 0.15rem;
  width: 1px;
  background: var(--border);
}
.fg-sticky,
.ws-sticky {
  position: sticky;
  z-index: var(--z-sticky);
}
.fg-dropdown-layer,
.ws-dropdown-layer {
  z-index: var(--z-dropdown);
}
.fg-composer-layer,
.ws-composer-layer {
  position: relative;
  z-index: var(--z-sticky);
}

/* ===== primitives/shell.css ===== */
/**
 * Fellow Glass — App shell.
 *
 * Hierarchy:
 *   L0 page   .fg-app          aurora-veiled animated mesh (ONLY place color animates)
 *   L1 chrome .fg-dock/.fg-rail  Fluxo STT · panel soft-neo; collapse → 3.5rem strip
 *   L2 stage  .fg-stage          transparent over page aurora
 *   L3 panel  soft-neo cards / chat selected
 *   L4 glass  live-view liquid-glass (chat rest)
 *   Menu select = Notas · well recessed
 *
 * One collapse toggle per side column. Mobile <860px: tabbar + sheet.
 */

:root { /* 280 */ /* just the floating reveal icon */ /* 304 */ /* just the floating reveal icon */
  --fg-shell-ease: cubic-bezier(0.32, 0.72, 0, 1); /* breathing room so dock/rail read as floating neo panels */
  --fg-panel-radius: var(--radius-xl); /* matched corner on both columns */
  --fg-shell-pad-x: clamp(0.75rem, 2.5vw, 2rem);
  --fg-shell-pad-y: clamp(0.75rem, 2vw, 1.5rem);
  /* Dual-neo shadow for the side columns — login card look, tighter blur */
}

:is(.dark, [data-theme="dark"]) {
  --fg-shell-pad-x: clamp(0.75rem, 2.5vw, 2rem);
  --fg-shell-pad-y: clamp(0.75rem, 2vw, 1.5rem);
}

/* ——— Root app ——— */

.fg-app,
.ws-app {
  position: relative;
  display: grid;
  box-sizing: border-box;
  padding: var(--fg-shell-gap);
  gap: var(--fg-shell-gap);
  grid-template-columns: var(--fg-dock-width) minmax(0, 1fr) var(
      --fg-rail-width
    );
  height: 100vh;
  height: 100dvh;
  width: 100%;
  /* Page hierarchy L0: aurora-veiled animated mesh ONLY here */
  background-color: var(--surface-page, #fff);
  background-image: var(--aurora-veiled-bg, var(--surface-ambient, none));
  background-attachment: fixed;
  color: var(--foreground);
  overflow: hidden;
  transition: grid-template-columns var(--duration-normal) var(--fg-shell-ease);
}
.fg-app--collapsed,
.ws-app--collapsed {
  grid-template-columns: var(--fg-dock-width-collapsed) minmax(0, 1fr) var(
      --fg-rail-width
    );
}
.fg-app--rail-collapsed,
.ws-app--rail-collapsed {
  grid-template-columns: var(--fg-dock-width) minmax(0, 1fr) var(
      --fg-rail-width-collapsed
    );
}
.fg-app--collapsed.fg-app--rail-collapsed,
.ws-app--collapsed.ws-app--rail-collapsed {
  grid-template-columns: var(--fg-dock-width-collapsed) minmax(0, 1fr) var(
      --fg-rail-width-collapsed
    );
}

/* While dragging a column edge, kill the transition so resize feels direct */

.fg-app.is-resizing,
.ws-app.is-resizing {
  transition: none;
  user-select: none;
  cursor: col-resize;
}
.fg-app.is-resizing-row,
.ws-app.is-resizing-row {
  transition: none;
  user-select: none;
  cursor: row-resize;
}

/* ——— Dock (left) — floating neomorphic panel (mirrors the rail) ——— */

.fg-dock,
.ws-dock {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-panel);
  border: 0;
  border-radius: var(--fg-panel-radius);
  box-shadow: var(--fg-col-shadow);
  z-index: var(--z-sticky, 10);
  transition:
    box-shadow var(--duration-normal) var(--fg-shell-ease),
    border-color var(--duration-normal) var(--ease-standard);
}
:is(.dark, [data-theme="dark"]) .fg-dock,
:is(.dark, [data-theme="dark"]) .ws-dock {
  background: var(--surface-panel);
  border-color: transparent;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.fg-dock__top,
.ws-dock__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.7rem 0.6rem;
  border-bottom: 1px solid var(--hairline, var(--border));
  min-height: var(--fg-stage-bar-h);
}
.fg-dock__brand,
.ws-dock__brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: var(--weight-regular, 400);
  line-height: 1.1;
  min-width: 0;
  white-space: nowrap;
}
.fg-dock__brand-sub,
.ws-dock__brand-sub {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-meta);
  color: var(--muted-foreground);
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
}
.fg-dock__actions,
.ws-dock__actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.fg-dock__search,
.ws-dock__search {
  flex: 0 0 auto;
  padding: 0.6rem 0.7rem 0.5rem;
  border-bottom: 1px solid var(--hairline, var(--border));
}
.fg-dock__scroll,
.ws-dock__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0.5rem 1rem;
  scrollbar-width: thin;
}
.fg-dock__scroll::-webkit-scrollbar,
.ws-dock__scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.fg-dock__scroll::-webkit-scrollbar-thumb,
.ws-dock__scroll::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--foreground) 16%, transparent);
  border-radius: 99px;
}
.fg-dock__search,
.fg-dock__scroll,
.fg-dock__foot,
.fg-dock__brand-sub,
.ws-dock__search,
.ws-dock__scroll,
.ws-dock__foot,
.ws-dock__brand-sub {
  transition: opacity var(--duration-normal) var(--fg-shell-ease);
}
.fg-dock__sec,
.fg-nav-section,
.ws-dock__sec,
.ws-nav-section {
  font-family: var(--font-emphasis);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: var(--tracking-eyebrow, 0.08em);
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 0.85rem 0.5rem 0.35rem;
}
.fg-dock__link,
.ws-dock__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-light, 300);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
/* Hover = soft-neo panel (not well fill) */

.fg-dock__link:hover:not(.is-active):not([aria-current="true"]):not(
    [aria-current="page"]
  ),
.ws-dock__link:hover:not(.is-active):not([aria-current="true"]):not(
    [aria-current="page"]
  ) {
  background: var(--surface-panel);
  border-color: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}
.fg-dock__link:focus-visible,
.ws-dock__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Selected = Notas · well recessed (correct — keep) */

.fg-dock__link.is-active,
.fg-dock__link[aria-current="true"],
.fg-dock__link[aria-current="page"],
.ws-dock__link.is-active,
.ws-dock__link[aria-current="true"],
.ws-dock__link[aria-current="page"] {
  background: var(--surface-well);
  border-color: var(--surface-well);
  font-family: var(--font-emphasis);
  font-weight: var(--weight-medium, 500);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-recessed);
}
.fg-dock__foot,
.ws-dock__foot {
  flex: 0 0 auto;
  padding: 0.6rem 0.7rem;
  border-top: 1px solid var(--hairline, var(--border));
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.fg-dock__foot a,
.ws-dock__foot a {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--muted-foreground);
  text-decoration: none;
}
.fg-dock__foot a:hover,
.ws-dock__foot a:hover {
  color: var(--foreground);
}

/* Collapsed dock = icon strip; collapse/expand control always stays in __top */

.fg-app--collapsed .fg-dock__search,
.fg-app--collapsed .fg-dock__scroll,
.fg-app--collapsed .fg-dock__foot,
.fg-app--collapsed .fg-dock__brand-sub,
.ws-app--collapsed .ws-dock__search,
.ws-app--collapsed .ws-dock__scroll,
.ws-app--collapsed .ws-dock__foot,
.ws-app--collapsed .ws-dock__brand-sub {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
  overflow: hidden;
  margin: 0;
  border: 0;
}
.fg-app--collapsed .fg-dock__brand,
.ws-app--collapsed .ws-dock__brand {
  font-size: 0.95rem;
  text-align: center;
}
.fg-app--collapsed .fg-dock__top,
.ws-app--collapsed .ws-dock__top {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.35rem;
  border-bottom: 0;
}
.fg-app--collapsed .fg-dock__actions,
.ws-app--collapsed .ws-dock__actions {
  flex-direction: column;
  width: 100%;
  align-items: center;
}
/* Fixed collapse control — always painted, both states; quiet by default */

.fg-col-toggle,
.ws-col-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0.7;
  transition:
    background var(--duration-normal) var(--fg-shell-ease),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-normal) var(--fg-shell-ease);
}
.fg-col-toggle:hover,
.ws-col-toggle:hover {
  color: var(--foreground);
  background: color-mix(in oklab, var(--foreground) 6%, transparent);
  opacity: 1;
}
.fg-col-toggle:active,
.ws-col-toggle:active {
  transform: scale(0.92);
}
.fg-col-toggle:focus-visible,
.ws-col-toggle:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: var(--focus-ring);
}
.fg-col-toggle[aria-pressed="true"],
.fg-col-toggle.is-on,
.ws-col-toggle[aria-pressed="true"],
.ws-col-toggle.is-on {
  background: var(--surface-well);
  border-color: var(--surface-hairline, var(--border));
  color: var(--foreground);
  box-shadow: var(--shadow-recessed);
}

/* ——— Stage (center) ——— */

.fg-stage,
.ws-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: transparent;
}
.fg-stage-bar,
.ws-stage-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 10);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--fg-stage-bar-h);
  padding: 0.5rem var(--fg-shell-pad-x);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.fg-stage-bar.is-stuck,
.ws-stage-bar.is-stuck {
  border-bottom-color: transparent;
}
.fg-stage-bar__crumb,
.ws-stage-bar__crumb {
  font-family: var(--font-emphasis);
  font-size: var(--text-label);
  font-weight: var(--weight-medium, 500);
  color: var(--muted-foreground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fg-stage-bar__crumb strong,
.ws-stage-bar__crumb strong {
  color: var(--foreground);
  font-weight: var(--weight-medium, 500);
}
.fg-stage-bar__actions,
.ws-stage-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.fg-stage__scroll,
.ws-stage__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.fg-stage__scroll::-webkit-scrollbar,
.ws-stage__scroll::-webkit-scrollbar {
  width: 8px;
}
.fg-stage__scroll::-webkit-scrollbar-thumb,
.ws-stage__scroll::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--foreground) 14%, transparent);
  border-radius: 99px;
}

/* Contained content — never stretch without limit */

.fg-stage__inner,
.fg-container,
.ws-stage__inner,
.ws-container {
  max-width: var(--content-measure);
  margin: 0 auto;
  padding: var(--fg-shell-pad-y) var(--fg-shell-pad-x);
  width: 100%;
  box-sizing: border-box;
}
.fg-container--narrow,
.ws-container--narrow {
  max-width: 36rem;
}
.fg-container--wide,
.ws-container--wide {
  max-width: 68rem;
}
.fg-container--full,
.ws-container--full {
  max-width: none;
}

/* Bottom edge of the stage — composer / primary actions */

.fg-stage-foot,
.ws-stage-foot {
  flex: 0 0 auto;
  /* Room for soft-neo bloom when chat is selected */
  padding: 1.1rem var(--fg-shell-pad-x)
    calc(1.35rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid transparent;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in oklab, var(--surface-page) 88%, transparent) 40%
  );
  overflow: visible;
  position: relative;
  z-index: 5;
}
.fg-stage-foot__inner,
.ws-stage-foot__inner {
  max-width: var(--content-measure);
  margin: 0 auto;
  width: 100%;
  overflow: visible;
}

/* ——— Right rail — mirror of the left dock: floating neomorphic panel ——— */

.fg-rail,
.ws-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-panel);
  border: 0;
  border-radius: var(--fg-panel-radius);
  box-shadow: var(--fg-col-shadow);
  z-index: var(--z-sticky, 10);
  transition:
    box-shadow var(--duration-normal) var(--fg-shell-ease),
    opacity var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
}
:is(.dark, [data-theme="dark"]) .fg-rail,
:is(.dark, [data-theme="dark"]) .ws-rail {
  background: var(--surface-panel);
  border-color: transparent;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.fg-rail__head,
.ws-rail__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  min-height: var(--fg-stage-bar-h);
  border-bottom: 1px solid var(--hairline, var(--border));
}
.fg-rail__title,
.ws-rail__title {
  font-family: var(--font-emphasis);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: opacity var(--duration-normal) var(--fg-shell-ease);
}
.fg-rail__scroll,
.ws-rail__scroll {
  transition: opacity var(--duration-normal) var(--fg-shell-ease);
}
.fg-rail__scroll,
.ws-rail__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--density-rail-pad, 0.85rem);
  display: flex;
  flex-direction: column;
  gap: var(--density-rail-gap, 0.4rem);
  scrollbar-width: thin;
}
.fg-rail__actions,
.ws-rail__actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  align-items: center;
}
/* Collapsed rail = same icon-strip pattern as left dock — NEVER width 0 / opacity 0 */

.fg-app--rail-collapsed .fg-rail,
.ws-app--rail-collapsed .ws-rail {
  opacity: 1;
  pointer-events: auto;
  border-left-color: var(--border);
}
.fg-app--rail-collapsed .fg-rail__scroll,
.fg-app--rail-collapsed .fg-rail__title,
.ws-app--rail-collapsed .ws-rail__scroll,
.ws-app--rail-collapsed .ws-rail__title {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
}
.fg-app--rail-collapsed .fg-rail__head,
.ws-app--rail-collapsed .ws-rail__head {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.35rem;
  border-bottom: 0;
  min-height: auto;
}
.fg-app--rail-collapsed .fg-rail__actions,
.ws-app--rail-collapsed .ws-rail__actions {
  flex-direction: column;
  width: 100%;
  align-items: center;
}

/* Inspector block inside the rail */

.fg-inspector,
.ws-inspector {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, 0.75rem);
  min-width: 0;
}
.fg-inspector__sec,
.ws-inspector__sec {
  font-family: var(--font-emphasis);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: var(--tracking-eyebrow, 0.08em);
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0.25rem 0 0;
}
.fg-inspector__row,
.ws-inspector__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--hairline, var(--border));
}
.fg-inspector__row dt,
.ws-inspector__row dt {
  color: var(--muted-foreground);
  margin: 0;
  font-weight: var(--weight-light, 300);
}
.fg-inspector__row dd,
.ws-inspector__row dd {
  margin: 0;
  text-align: right;
  font-family: var(--font-emphasis);
  font-weight: var(--weight-medium, 500);
  color: var(--foreground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fg-inspector__empty,
.ws-inspector__empty {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--muted-foreground);
  padding: 1rem 0.25rem;
  text-align: center;
}

/* ——— Resize handles (all four sides of the stage / column seams) ——— */

.fg-resize,
.ws-resize {
  position: absolute;
  z-index: calc(var(--z-sticky, 10) + 2);
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  touch-action: none;
}
.fg-resize::after,
.ws-resize::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: var(--radius-pill);
  background: transparent;
  transition:
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.fg-resize:hover::after,
.fg-resize:focus-visible::after,
.fg-app.is-resizing .fg-resize.is-active::after,
.ws-resize:hover::after,
.ws-resize:focus-visible::after,
.ws-app.is-resizing .ws-resize.is-active::after {
  background: var(--ring-tint);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring-tint) 22%, transparent);
}
.fg-resize:focus-visible,
.ws-resize:focus-visible {
  outline: none;
}

/* Vertical seams (column resize) */

.fg-resize--col,
.ws-resize--col {
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
}
.fg-resize--col::after,
.ws-resize--col::after {
  width: 2px;
  height: 40px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.fg-resize--dock-e,
.ws-resize--dock-e {
  right: 0;
} /* dock's east edge (inside the rounded panel) */

.fg-resize--rail-w,
.ws-resize--rail-w {
  left: 0;
} /* rail's west edge */

/* Horizontal seams (stage bar / foot) */

.fg-resize--row,
.ws-resize--row {
  left: 0;
  right: 0;
  height: 10px;
  cursor: row-resize;
}
.fg-resize--row::after,
.ws-resize--row::after {
  height: 2px;
  width: 40px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.fg-resize--stage-n,
.ws-resize--stage-n {
  top: 0;
} /* top of stage */

.fg-resize--stage-s,
.ws-resize--stage-s {
  bottom: 0;
} /* bottom of stage */

/* Edge glow affordances on stage perimeter (mobile-first responsive borders) */

.fg-stage::before,
.ws-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border: 1px solid transparent;
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
@media (max-width: 860px) {
  .fg-stage::before {
    border-color: color-mix(in oklab, var(--border) 55%, transparent);
    border-left: 0;
    border-right: 0;
  }
}

/* ——— Optional legacy 3-col workspace inside stage ——— */

.fg-workspace,
.ws-workspace {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr) 13.75rem;
  min-height: 0;
  max-width: var(--content-measure);
  margin-inline: auto;
  width: 100%;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}
.fg-workspace__side,
.ws-workspace__side {
  padding: 0.75rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-right: 1px solid var(--hairline);
  overflow: auto;
}
.fg-workspace__main,
.ws-workspace__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.fg-workspace__rail,
.ws-workspace__rail {
  padding: 0.85rem 0.75rem;
  border-left: 1px solid var(--hairline);
  overflow: auto;
}

/* ——— Mobile bottom tab bar (replaces dock) ——— */

.fg-tabbar,
.ws-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer, 40);
  display: none;
  align-items: stretch;
  gap: 0.15rem;
  padding: 0.4rem 0.6rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface-chrome-frost);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--glass-border);
  box-shadow:
    0 -6px 20px rgb(17 17 27 / 0.08),
    var(--shadow-panel);
}
.fg-tabbar__item,
.ws-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-family: var(--font-emphasis);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.fg-tabbar__item .fg-tabbar__glyph,
.ws-tabbar__item .ws-tabbar__glyph {
  font-size: 16px;
  line-height: 1;
}
.fg-tabbar__item:hover:not(.is-active),
.ws-tabbar__item:hover:not(.is-active) {
  background: var(--surface-panel);
  border-color: var(--surface-hairline, var(--border));
  box-shadow: var(--shadow-panel);
  color: var(--foreground);
}
.fg-tabbar__item.is-active,
.ws-tabbar__item.is-active {
  color: var(--foreground);
  background: var(--surface-well);
  border-color: var(--surface-hairline, var(--border));
  box-shadow: var(--shadow-recessed);
}
.fg-tabbar__item:focus-visible,
.ws-tabbar__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ——— Bottom sheet (mobile rail) ——— */

.fg-sheet,
.ws-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal, 50);
  max-height: 78dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-overlay);
  border-top-left-radius: var(--radius-3xl);
  border-top-right-radius: var(--radius-3xl);
  border-top: 1px solid var(--glass-border);
  box-shadow:
    0 -12px 40px rgb(17 17 27 / 0.24),
    var(--shadow-panel);
  transform: translateY(101%);
  transition: transform var(--duration-normal) var(--fg-shell-ease);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.fg-sheet.is-open,
.ws-sheet.is-open {
  transform: translateY(0);
}
.fg-sheet__grip,
.ws-sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: color-mix(in oklab, var(--foreground) 22%, transparent);
  margin: 0.6rem auto 0.2rem;
  flex: 0 0 auto;
}
.fg-sheet__head,
.ws-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 1rem 0.5rem;
  flex: 0 0 auto;
}
.fg-sheet__title,
.ws-sheet__title {
  font-family: var(--font-emphasis);
  font-size: var(--text-label);
  font-weight: 600;
}
.fg-sheet__scroll,
.ws-sheet__scroll {
  overflow-y: auto;
  padding: 0.6rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}
.fg-sheet__backdrop,
.ws-sheet__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer, 40);
  background: rgb(17 17 27 / 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-standard);
}
.fg-sheet__backdrop.is-open,
.ws-sheet__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ——— Density / selection toggles (chrome chips) ——— */

.fg-toggle-group,
.ws-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface-well);
  border: 1px solid var(--hairline, var(--border));
}
.fg-toggle-group button,
.ws-toggle-group button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-family: var(--font-emphasis);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.fg-toggle-group button.is-on,
.fg-toggle-group button[aria-pressed="true"],
.ws-toggle-group button.is-on,
.ws-toggle-group button[aria-pressed="true"] {
  background: var(--surface-well);
  color: var(--foreground);
  border: 1px solid var(--surface-hairline, var(--border));
  box-shadow: var(--shadow-recessed);
}

/* ——— Collapsed = column disappears; only a floating reveal icon remains ——— */

.fg-app--collapsed .fg-dock,
.fg-app--rail-collapsed .fg-rail,
.ws-app--collapsed .ws-dock,
.ws-app--rail-collapsed .ws-rail {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.fg-app--collapsed .fg-dock__top,
.fg-app--rail-collapsed .fg-rail__head,
.ws-app--collapsed .ws-dock__top,
.ws-app--rail-collapsed .ws-rail__head {
  border: 0;
  background: transparent;
  padding: 0.4rem 0;
}
.fg-app--collapsed .fg-dock__brand,
.fg-app--collapsed .fg-dock__top button[aria-label="Tema"],
.ws-app--collapsed .ws-dock__brand,
.ws-app--collapsed .ws-dock__top button[aria-label="Tema"] {
  display: none;
}
/* the lone reveal icon reads as a small floating neo chip */

.fg-app--collapsed .fg-dock .fg-col-toggle,
.fg-app--rail-collapsed .fg-rail .fg-col-toggle,
.ws-app--collapsed .ws-dock .ws-col-toggle,
.ws-app--rail-collapsed .ws-rail .ws-col-toggle {
  opacity: 1;
  background: var(--surface-panel);
  box-shadow: var(--fg-col-shadow);
  border-color: transparent;
}
.fg-app--collapsed .fg-dock .fg-col-toggle:hover,
.fg-app--rail-collapsed .fg-rail .fg-col-toggle:hover,
.ws-app--collapsed .ws-dock .ws-col-toggle:hover,
.ws-app--rail-collapsed .ws-rail .ws-col-toggle:hover {
  background: var(--surface-panel);
  color: var(--foreground);
}

/* ——— Responsive ——— */
@media (max-width: 860px) {
  .fg-app,
  .fg-app--collapsed,
  .fg-app--rail-collapsed {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
  }
.fg-dock,
.ws-dock {
    display: none;
  }
.fg-rail,
.ws-rail {
    display: none;
  }
.fg-stage,
.ws-stage {
    height: 100dvh;
    padding-bottom: 4.25rem;
  }
.fg-stage__inner,
.fg-container,
.ws-stage__inner,
.ws-container {
    padding: 1.15rem 1rem 1.5rem;
  }
.fg-stage-bar,
.ws-stage-bar {
    padding: 0.5rem 1rem;
  }
.fg-stage-foot,
.ws-stage-foot {
    padding: 0.65rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
.fg-tabbar,
.ws-tabbar {
    display: flex;
  }
.fg-resize,
.ws-resize {
    display: none;
  }
}

@media (min-width: 861px) {
  .fg-tabbar,
  .fg-sheet,
  .fg-sheet__backdrop {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fg-app,
  .fg-sheet,
  .fg-rail,
  .fg-stage__scroll {
    transition: none;
    scroll-behavior: auto;
  }
}

/* ===== primitives/ux.css ===== */
/**
 * Fellow Glass — product UX primitives
 * These are final product behaviors, not documentation ornaments.
 */

/* Skip to content — first focusable in app */

.fg-skip,
.ws-skip {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: var(--z-max, 100);
  padding: 0.5rem 0.75rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 8px;
  font-family: var(--font-emphasis);
  font-size: var(--text-label);
  font-weight: var(--weight-medium, 500);
  text-decoration: none;
  transition: top 0.15s ease;
}
.fg-skip:focus,
.ws-skip:focus {
  top: 0.75rem;
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Global focus-visible baseline for interactive DS controls */

.fg-btn:focus-visible,
.fg-input:focus-visible,
.fg-dock__link:focus-visible,
.fg-nav-item:focus-visible,
.fg-chat-frame:focus-visible,
.ws-btn:focus-visible,
.ws-input:focus-visible,
.ws-dock__link:focus-visible,
.ws-nav-item:focus-visible,
.ws-chat-frame:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/**
 * Toast / transient status (bottom center) — refined.
 * Frosted glass pill, white pearl rim, iridescent shadow, leading status dot,
 * with a soft slide-up + fade. Not the old flat ink slab.
 */

.fg-toast,
.ws-toast {
  position: fixed;
  z-index: var(--z-toast, 70);
  left: 50%;
  bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem 0.6rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--surface-panel-frost, rgb(255 255 255 / 0.72));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-border-white, #fff);
  color: var(--foreground);
  font-family: var(--font-emphasis);
  font-size: var(--text-label);
  font-weight: var(--weight-medium, 500);
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-selected-glass, var(--shadow-panel));
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px) scale(0.97);
  transition:
    opacity var(--duration-normal) var(--fg-shell-ease, ease),
    transform var(--duration-normal) var(--fg-shell-ease, ease);
}
.fg-toast::before,
.ws-toast::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--fg-success, #24a148);
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--fg-success, #24a148) 22%, transparent);
}
.fg-toast[data-tone="ok"]::before,
.ws-toast[data-tone="ok"]::before {
  background: var(--fg-success, #24a148);
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--fg-success, #24a148) 22%, transparent);
}
.fg-toast[data-tone="warn"]::before,
.ws-toast[data-tone="warn"]::before {
  background: var(--fg-warning);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--fg-warning) 22%, transparent);
}
.fg-toast[data-tone="danger"]::before,
.ws-toast[data-tone="danger"]::before {
  background: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 22%, transparent);
}
.fg-toast.is-on,
.fg-toast[data-open="true"],
.ws-toast.is-on,
.ws-toast[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
:is(.dark, [data-theme="dark"]) .fg-toast,
:is(.dark, [data-theme="dark"]) .ws-toast {
  background: rgb(255 255 255 / 0.09);
  color: var(--ink-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .fg-toast {
    transition: opacity var(--duration-fast) ease;
    transform: translateX(-50%);
  }
.fg-toast.is-on,
.fg-toast[data-open="true"],
.ws-toast.is-on,
.ws-toast[data-open="true"] {
    transform: translateX(-50%);
  }
}

/* Inline copy control for tokens / keys */

.fg-copy,
.ws-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  border: 1px solid var(--border);
  background: var(--surface-0, #fff);
  color: var(--muted-foreground);
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  transition:
    color var(--duration-fast, 150ms) ease,
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease;
}
.fg-copy:hover,
.ws-copy:hover {
  color: var(--foreground);
  background: var(--surface-1);
  border-color: color-mix(in oklab, var(--foreground) 16%, var(--border));
}
.fg-copy:focus-visible,
.ws-copy:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.fg-copy.is-ok,
.ws-copy.is-ok {
  color: var(--foreground);
  border-color: var(--foreground);
}

/* Filter hide helper (dock search) */

.fg-filter-hide,
.ws-filter-hide {
  display: none !important;
}

/* Badge / chip meta */

.fg-badge,
.ws-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-emphasis);
  font-size: var(--text-meta);
  font-weight: var(--weight-medium, 500);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--foreground);
}

/* Breadcrumb / context line */

.fg-crumb,
.ws-crumb {
  font-family: var(--font-emphasis);
  font-size: var(--text-label);
  font-weight: var(--weight-medium, 500);
  color: var(--muted-foreground);
}
.fg-crumb strong,
.ws-crumb strong {
  color: var(--foreground);
  font-weight: var(--weight-medium, 500);
}

/* Reduced motion — opt-in utility on animated regions */
@media (prefers-reduced-motion: reduce) {
  .fg-motion-safe {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== primitives/button.css ===== */
/**
 * Fellow Glass — buttons
 *
 * Sizing (best practice / dense product UI):
 *   sm  32px  — compact chrome, chips-adjacent
 *   md  40px  — default control (WCAG dense ok; ≥24px text hit with padding)
 *   lg  48px  — primary CTAs / touch-first
 *   icon = square of the same height ladder
 *
 * Hover outside typing area:
 *   outline / ghost / glass → same as side-menu hover (soft-neo plate)
 *   default / destructive / graphite → fill shift (solid CTAs)
 */


.fg-btn,
.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  font-size: var(--text-label, 0.75rem);
  font-weight: var(--weight-medium);
  font-family: var(--font-emphasis);
  letter-spacing: var(--tracking-label, 0.02em);
  line-height: 1;
  border: 1px solid transparent;
  position: relative;
  isolation: isolate;
  cursor: pointer;
  transform: none;
  /* Default = md */
  height: var(--control-h, 2.5rem);
  min-height: var(--control-h, 2.5rem);
  padding: 0 1rem;
  transition:
    color var(--duration-fast, 150ms) var(--ease-standard, ease),
    background var(--duration-fast, 150ms) var(--ease-standard, ease),
    border-color var(--duration-fast, 150ms) var(--ease-standard, ease),
    box-shadow var(--duration-fast, 150ms) var(--ease-standard, ease),
    opacity var(--duration-fast, 150ms) var(--ease-standard, ease);
}
.fg-btn:disabled,
.ws-btn:disabled {
  pointer-events: none;
  opacity: 0.45;
}
.fg-btn:focus-visible,
.ws-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ——— Sizes ——— */

.fg-btn--sm,
.fg-btn[data-size="sm"],
.ws-btn--sm,
.ws-btn[data-size="sm"] {
  height: var(--control-h-sm, 2rem);
  min-height: var(--control-h-sm, 2rem);
  padding: 0 0.75rem;
  font-size: 0.6875rem; /* 11 — meta-adjacent */
  letter-spacing: 0.03em;
  border-radius: var(--radius-sm);
}
.fg-btn--md,
.fg-btn[data-size="md"],
.ws-btn--md,
.ws-btn[data-size="md"] {
  height: var(--control-h, 2.5rem);
  min-height: var(--control-h, 2.5rem);
  padding: 0 1rem;
  font-size: var(--text-label, 0.75rem);
}
.fg-btn--lg,
.fg-btn[data-size="lg"],
.ws-btn--lg,
.ws-btn[data-size="lg"] {
  height: var(--control-h-lg, 3rem);
  min-height: var(--control-h-lg, 3rem);
  padding: 0 1.25rem;
  font-size: var(--text-body-sm, 0.8125rem);
  border-radius: var(--radius-lg);
}

/* ——— Variants ——— */

.fg-btn--default,
.ws-btn--default {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--btn-default-shadow, 0 1px 2px rgb(0 0 0 / 0.1));
}
.fg-btn--default:hover,
.ws-btn--default:hover {
  background: var(--primary-hover);
  /* Neumorphic lift on ink plate — soft white rim + deeper cast */
  box-shadow:
    3px 3px 8px rgba(0, 0, 0, 0.35),
    -1px -1px 3px rgba(255, 255, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.fg-btn--default:active,
.ws-btn--default:active {
  background: color-mix(in oklab, var(--primary-hover) 85%, black);
  box-shadow:
    1px 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.fg-btn--outline,
.ws-btn--outline {
  background: var(--surface-panel, var(--background));
  color: var(--foreground);
  border-color: var(--surface-panel, var(--background));
  box-shadow: var(--shadow-panel);
}

/* Soft-neo hover = raised dual step (above rest, clear feedback) */

.fg-btn--outline:hover,
.ws-btn--outline:hover {
  background: var(--surface-panel);
  border-color: var(--surface-panel);
  box-shadow:
    var(--shadow-panel-selected),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.fg-btn--ghost,
.ws-btn--ghost {
  background: transparent;
  color: var(--foreground);
}
.fg-btn--ghost:hover,
.ws-btn--ghost:hover {
  background: var(--surface-panel);
  border-color: var(--surface-panel);
  box-shadow:
    var(--shadow-panel-selected),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--foreground);
}
.fg-btn--destructive,
.ws-btn--destructive {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.fg-btn--destructive:hover,
.ws-btn--destructive:hover {
  background: var(--destructive-hover);
}
.fg-btn--icon,
.ws-btn--icon {
  width: var(--control-h, 2.5rem);
  min-width: var(--control-h, 2.5rem);
  height: var(--control-h, 2.5rem);
  min-height: var(--control-h, 2.5rem);
  padding: 0;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
}
.fg-btn--icon.fg-btn--sm,
.fg-btn--sm.fg-btn--icon,
.ws-btn--icon.ws-btn--sm,
.ws-btn--sm.ws-btn--icon {
  width: var(--control-h-sm, 2rem);
  min-width: var(--control-h-sm, 2rem);
  height: var(--control-h-sm, 2rem);
  min-height: var(--control-h-sm, 2rem);
  font-size: 0.75rem;
}
.fg-btn--icon.fg-btn--lg,
.fg-btn--lg.fg-btn--icon,
.ws-btn--icon.ws-btn--lg,
.ws-btn--lg.ws-btn--icon {
  width: var(--control-h-lg, 3rem);
  min-width: var(--control-h-lg, 3rem);
  height: var(--control-h-lg, 3rem);
  min-height: var(--control-h-lg, 3rem);
  font-size: 1rem;
}
.fg-btn--pill,
.ws-btn--pill {
  border-radius: var(--radius-pill);
  padding: 0 1.1rem;
  font-weight: var(--weight-medium);
}
.fg-btn--graphite,
.ws-btn--graphite {
  background: var(--primary-graphite, #383838);
  color: #fafafa;
  border-radius: var(--radius-pill);
  border-color: transparent;
}
.fg-btn--graphite:hover,
.ws-btn--graphite:hover {
  background: var(--primary-graphite-hover, #1f1f1f);
}

/* ——— Hover policy variants (set on <html data-hover="…">) ——— */


html[data-hover="fill-border"] .fg-btn--outline:hover,
html[data-hover="fill-border"] .ws-btn--outline:hover {
  border-color: var(--surface-hairline, var(--border));
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}
html[data-hover="fill-border"] .fg-btn--default:hover,
html[data-hover="fill-border"] .ws-btn--default:hover {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
html[data-hover="fill-border"] .fg-btn--ghost:hover,
html[data-hover="fill-border"] .ws-btn--ghost:hover {
  background: var(--surface-panel);
  border-color: var(--surface-hairline, var(--border));
  box-shadow: var(--shadow-panel);
}
html[data-hover="shadow"] .fg-btn--default:hover,
html[data-hover="shadow"] .ws-btn--default:hover {
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
}
html[data-hover="shadow"] .fg-btn--outline:hover,
html[data-hover="shadow"] .ws-btn--outline:hover {
  box-shadow: var(--shadow-panel-hover);
  background: var(--surface-panel);
  border-color: var(--surface-hairline, var(--border));
}
html[data-hover="shadow"] .fg-btn--graphite:hover,
html[data-hover="shadow"] .ws-btn--graphite:hover {
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.22);
}
html[data-hover="ink"] .fg-btn--ghost:hover,
html[data-hover="ink"] .ws-btn--ghost:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  opacity: 0.72;
}
html[data-hover="ink"] .fg-btn--outline:hover,
html[data-hover="ink"] .ws-btn--outline:hover {
  background: transparent;
  border-color: var(--foreground);
  box-shadow: none;
}
html[data-hover="soft"] .fg-btn--default:hover,
html[data-hover="soft"] .ws-btn--default:hover {
  background: color-mix(in oklab, var(--primary) 92%, white);
}
html[data-hover="soft"] .fg-btn--outline:hover,
html[data-hover="soft"] .fg-btn--ghost:hover,
html[data-hover="soft"] .ws-btn--outline:hover,
html[data-hover="soft"] .ws-btn--ghost:hover {
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}
html[data-hover="lift"] .fg-btn,
html[data-hover="lift"] .ws-btn {
  transition:
    color var(--duration-fast, 150ms) ease,
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease,
    transform var(--duration-fast, 150ms) ease;
}
html[data-hover="lift"] .fg-btn--default:hover,
html[data-hover="lift"] .fg-btn--destructive:hover,
html[data-hover="lift"] .fg-btn--graphite:hover,
html[data-hover="lift"] .ws-btn--default:hover,
html[data-hover="lift"] .ws-btn--destructive:hover,
html[data-hover="lift"] .ws-btn--graphite:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.16);
}

/* ——— Glass button ——— */

.fg-btn--glass,
.ws-btn--glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-fill);
  color: var(--foreground);
  border-color: var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 1px var(--glass-border-outer),
    var(--shadow-panel);
}
.fg-btn--glass:hover,
.ws-btn--glass:hover {
  /* Soft-neo raised plate — clear lift, not flat glass */
  background: var(--surface-panel);
  border-color: var(--surface-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    var(--shadow-panel-selected),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.fg-btn--glass:focus-visible,
.ws-btn--glass:focus-visible {
  outline: none;
  border-color: var(--glass-border-white, #fff);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 2px var(--surface-page),
    0 0 0 3px rgb(255 255 255 / 0.75),
    var(--shadow-panel);
}

/*
 * Chat page buttons — stronger neumorphic hover feedback.
 * Targets stage chrome + controls inside the composer footer row.
 * Does NOT change .fg-composer-box (typing plate) elevation.
 */

.fg-stage .fg-btn--outline,
.fg-stage .fg-btn--ghost,
.fg-stage .fg-btn--glass,
.fg-composer-box .fg-btn--outline,
.fg-composer-box .fg-btn--ghost,
.fg-composer-box .fg-btn--glass,
.ws-stage .ws-btn--outline,
.ws-stage .ws-btn--ghost,
.ws-stage .ws-btn--glass,
.ws-composer-box .ws-btn--outline,
.ws-composer-box .ws-btn--ghost,
.ws-composer-box .ws-btn--glass {
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.1),
    -1px -1px 3px rgba(255, 255, 255, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.fg-stage .fg-btn--outline:hover,
.fg-stage .fg-btn--ghost:hover,
.fg-stage .fg-btn--glass:hover,
.fg-composer-box .fg-btn--outline:hover,
.fg-composer-box .fg-btn--ghost:hover,
.fg-composer-box .fg-btn--glass:hover,
.ws-stage .ws-btn--outline:hover,
.ws-stage .ws-btn--ghost:hover,
.ws-stage .ws-btn--glass:hover,
.ws-composer-box .ws-btn--outline:hover,
.ws-composer-box .ws-btn--ghost:hover,
.ws-composer-box .ws-btn--glass:hover {
  background: var(--surface-panel) !important;
  border-color: var(--surface-panel) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.14),
    1px 2px 4px rgba(0, 0, 0, 0.08),
    -2px -2px 6px rgba(255, 255, 255, 1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
.fg-stage .fg-btn--default,
.fg-composer-box .fg-btn--default,
.ws-stage .ws-btn--default,
.ws-composer-box .ws-btn--default {
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.35),
    -1px -1px 2px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.fg-stage .fg-btn--default:hover,
.fg-composer-box .fg-btn--default:hover,
.ws-stage .ws-btn--default:hover,
.ws-composer-box .ws-btn--default:hover {
  background: var(--primary-hover) !important;
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.4),
    -2px -2px 5px rgba(255, 255, 255, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
}
:is(.dark, [data-theme="dark"]) .fg-stage .fg-btn--outline,
:is(.dark, [data-theme="dark"]) .fg-stage .fg-btn--ghost,
:is(.dark, [data-theme="dark"]) .fg-stage .fg-btn--glass,
:is(.dark, [data-theme="dark"]) .fg-composer-box .fg-btn--outline,
:is(.dark, [data-theme="dark"]) .fg-composer-box .fg-btn--ghost,
:is(.dark, [data-theme="dark"]) .fg-composer-box .fg-btn--glass,
:is(.dark, [data-theme="dark"]) .ws-stage .ws-btn--outline,
:is(.dark, [data-theme="dark"]) .ws-stage .ws-btn--ghost,
:is(.dark, [data-theme="dark"]) .ws-stage .ws-btn--glass,
:is(.dark, [data-theme="dark"]) .ws-composer-box .ws-btn--outline,
:is(.dark, [data-theme="dark"]) .ws-composer-box .ws-btn--ghost,
:is(.dark, [data-theme="dark"]) .ws-composer-box .ws-btn--glass {
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.45),
    -1px -1px 2px rgba(255, 255, 255, 0.05);
}
:is(.dark, [data-theme="dark"]) .fg-stage .fg-btn--outline:hover,
:is(.dark, [data-theme="dark"]) .fg-stage .fg-btn--ghost:hover,
:is(.dark, [data-theme="dark"]) .fg-stage .fg-btn--glass:hover,
:is(.dark, [data-theme="dark"]) .fg-composer-box .fg-btn--outline:hover,
:is(.dark, [data-theme="dark"]) .fg-composer-box .fg-btn--ghost:hover,
:is(.dark, [data-theme="dark"]) .fg-composer-box .fg-btn--glass:hover,
:is(.dark, [data-theme="dark"]) .ws-stage .ws-btn--outline:hover,
:is(.dark, [data-theme="dark"]) .ws-stage .ws-btn--ghost:hover,
:is(.dark, [data-theme="dark"]) .ws-stage .ws-btn--glass:hover,
:is(.dark, [data-theme="dark"]) .ws-composer-box .ws-btn--outline:hover,
:is(.dark, [data-theme="dark"]) .ws-composer-box .ws-btn--ghost:hover,
:is(.dark, [data-theme="dark"]) .ws-composer-box .ws-btn--glass:hover {
  box-shadow:
    4px 4px 12px rgba(0, 0, 0, 0.55),
    -1px -1px 3px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Selected — well recessed (same as menu selection) */

.fg-btn.is-selected,
.fg-btn[aria-pressed="true"],
.fg-btn[aria-selected="true"],
.fg-btn[aria-current="true"],
.fg-btn[aria-current="page"],
.ws-btn.is-selected,
.ws-btn[aria-pressed="true"],
.ws-btn[aria-selected="true"],
.ws-btn[aria-current="true"],
.ws-btn[aria-current="page"] {
  color: var(--foreground) !important;
  background: var(--surface-well) !important;
  border-color: var(--surface-well) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-recessed) !important;
}
.fg-btn.is-selected:hover,
.fg-btn[aria-pressed="true"]:hover,
.fg-btn[aria-selected="true"]:hover,
.ws-btn.is-selected:hover,
.ws-btn[aria-pressed="true"]:hover,
.ws-btn[aria-selected="true"]:hover {
  background: var(--surface-well) !important;
  border-color: var(--surface-well) !important;
  box-shadow: var(--shadow-recessed) !important;
}

/* ——— Inputs ——— */

.fg-input,
.ws-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: var(--control-h, 2.5rem);
  min-height: var(--control-h, 2.5rem);
  padding: 0 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--input, var(--border));
  background: var(--surface-panel, #fff);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-light, 300);
  line-height: 1.4;
  box-shadow: inset 0 1px 2px rgb(17 17 27 / 0.03);
  transition:
    border-color var(--duration-fast, 150ms) var(--ease-standard, ease),
    box-shadow var(--duration-fast, 150ms) var(--ease-standard, ease),
    background var(--duration-fast, 150ms) var(--ease-standard, ease);
}
textarea.fg-input,
.fg-input[rows],
textarea.ws-input,
.ws-input[rows] {
  height: auto;
  min-height: 2.75rem;
  resize: vertical;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  line-height: var(--leading-body, 1.55);
}
.fg-input::placeholder,
.ws-input::placeholder {
  color: var(--muted-foreground);
  opacity: 0.85;
}
.fg-input:hover,
.ws-input:hover {
  border-color: var(--glass-border-white-soft, rgb(255 255 255 / 0.65));
}
.fg-input:focus,
.fg-input:focus-visible,
.ws-input:focus,
.ws-input:focus-visible {
  outline: none;
  border-color: var(--glass-border-white, #fff);
  background: var(--surface-panel);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    0 0 0 2px var(--surface-page),
    0 0 0 3px rgb(255 255 255 / 0.7),
    var(--shadow-panel-hover);
}
.fg-input:disabled,
.ws-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fg-field-label,
.ws-field-label {
  display: block;
  font-family: var(--font-emphasis);
  font-size: var(--text-label);
  font-weight: var(--weight-medium, 500);
  letter-spacing: var(--tracking-label, 0.02em);
  color: var(--muted-foreground);
  margin-bottom: 0.35rem;
}
.fg-control-row,
.ws-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: var(--content-measure);
  width: 100%;
}

/* ===== primitives/chat.css ===== */
/**
 * Fellow Glass — chat / tool / chip utilities
 */


.fg-chip,
.ws-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.65rem;
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  font-family: var(--font-emphasis);
  background: var(--surface-well, var(--muted));
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}
.fg-msg-user,
.ws-msg-user {
  max-width: 80%;
  margin-left: auto;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-light);
  font-family: var(--font-body);
  /* solid ink plate — soft-neo rest so user turns read above the stream */
  box-shadow: var(--shadow-panel);
}
.fg-msg-assistant,
.ws-msg-assistant {
  max-width: 90%;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-light);
  line-height: var(--leading-chat);
  color: var(--foreground);
}
.fg-tool-card,
.ws-tool-card {
  border-radius: 0.75rem;
  /* panel soft-neo — recessed from user bubble, above plain assistant text */
  border: 1px solid var(--surface-panel, var(--border));
  background: var(--surface-panel, var(--card));
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}
.fg-tool-card__head,
.ws-tool-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--fg-warning, hsl(32 90% 48%));
  font-size: var(--text-meta);
}
.fg-tool-card__body,
.ws-tool-card__body {
  border-top: 1px solid var(--border);
  padding: 0.75rem;
  color: var(--muted-foreground);
  max-height: 10rem;
  overflow: auto;
  white-space: pre-wrap;
}
.fg-sidebar-label,
.ws-sidebar-label {
  font-family: var(--font-emphasis);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 0.25rem 0.5rem;
  font-weight: var(--weight-semibold);
}

/* ===== styles.css base rules & utilities ===== */
/**
 * Fellow Glass — global entry point.
 * Consumers link ONLY this file. It is an @import manifest; no rules live here.
 * Everything it reaches (tokens + primitives) ships to consumers, and every
 * @font-face / font @import in the closure declares the webfonts.
 */

/* Fonts */

/* Tokens */

/* Primitives (foundation classes) */

/* Base reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--surface-page, #fff);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  -webkit-font-smoothing: antialiased;
}

/* Utilities used across surfaces */

.fg-bg,
.ws-bg {
  background: var(--surface-page, var(--background));
  color: var(--foreground);
}
.fg-text-muted,
.ws-text-muted {
  color: var(--muted-foreground);
}
.fg-border,
.ws-border {
  border: 1px solid var(--border);
}

/* Default link styling (from primary ink) */
a {
  color: var(--foreground);
  text-decoration-color: color-mix(
    in oklab,
    var(--foreground) 35%,
    transparent
  );
  text-underline-offset: 2px;
}
a:hover {
  color: color-mix(in oklab, var(--foreground) 70%, var(--muted-foreground));
}

/* ===== cola do app (src/styles.css do repo) ===== */
:root {
  /* aliases do @theme do app */
  --font-chat: var(--font-sans);
}
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
}
code, pre, kbd {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
}
/* Títulos no rosto de ênfase (Urbanist); o serif é reservado ao papel display. */
h1, h2, h3, h4 {
  font-family: var(--font-emphasis);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-title);
}
/* Fundo do app: aurora velada — cor animada só existe aqui. */
.app-ground {
  background-color: var(--surface-page);
  background-image: var(--surface-ambient);
  background-attachment: fixed;
  color: var(--foreground);
}
.glass-panel.absolute { position: absolute; }
.glass-panel.fixed { position: fixed; }
.glass-panel.sticky { position: sticky; }
/* Assinatura: DM Serif Display itálico minúsculo, nunca encaixotada. */
.fellow-mark, .ws-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  text-transform: lowercase;
  letter-spacing: var(--tracking-display);
}
/* Letreiro do composer: cruza da esquerda para a direita, sem tinta iridescente. */
.ticker-run {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--muted-foreground);
  animation: fg-ticker-cross var(--duration-ticker) linear forwards;
}

/* ===== WDS v1.1 — Calibrated Hover, Soft-Neo Shadow & Optical Liquid-Glass ===== */
:root,
[data-theme="light"] {
  --shadow-recessed:
    inset 0 1px 2px oklch(15% 0.012 258 / 0.06),
    inset 0 0 0 1px oklch(15% 0.012 258 / 0.04);
  --shadow-panel:
    0 0 0 1px oklch(15% 0.012 258 / 0.05),
    0 1px 2px -0.5px oklch(15% 0.015 258 / 0.05),
    0 4px 12px -2px oklch(15% 0.015 258 / 0.045),
    inset 0 1px 0 rgb(255 255 255 / 0.92);
  --shadow-panel-hover:
    0 0 0 1px oklch(15% 0.018 258 / 0.1),
    0 2px 5px -1px oklch(15% 0.018 258 / 0.07),
    0 10px 24px -4px oklch(15% 0.02 258 / 0.075),
    inset 0 1px 0 #ffffff;
  --shadow-panel-selected:
    0 0 0 1px oklch(15% 0.024 258 / 0.15),
    0 4px 10px -2px oklch(15% 0.022 258 / 0.095),
    0 16px 32px -6px oklch(15% 0.025 258 / 0.11),
    inset 0 1px 0 #ffffff;
  --shadow-selected-glass:
    inset 0 1px 0 rgb(255 255 255 / 0.96),
    inset 0 -1px 0 rgb(255 255 255 / 0.38),
    0 0 0 1px oklch(15% 0.02 258 / 0.09),
    0 8px 24px -4px oklch(15% 0.025 258 / 0.1);

  --glass-blur-sm: 10px;
  --glass-blur: 16px;
  --glass-blur-bar: 14px;
  --glass-blur-drop: 10px;
  --glass-blur-lg: 24px;
  --glass-saturate: 1.35;

  --glass-fill: rgb(255 255 255 / 0.56);
  --glass-fill-hover: rgb(255 255 255 / 0.72);
  --glass-fill-active: rgb(255 255 255 / 0.82);
  --glass-fill-bar: rgb(255 255 255 / 0.72);
  --glass-fill-drop: rgb(255 255 255 / 0.62);
  --glass-border: rgb(255 255 255 / 0.78);
  --glass-border-strong: rgb(255 255 255 / 0.96);
  --glass-border-outer: oklch(15% 0.015 258 / 0.07);
}

:is(.dark, [data-theme="dark"]) {
  --shadow-recessed:
    inset 0 1px 3px rgb(0 0 0 / 0.48),
    inset 0 0 0 1px rgb(255 255 255 / 0.05);
  --shadow-panel:
    0 0 0 1px rgb(255 255 255 / 0.075),
    0 1px 0 rgb(255 255 255 / 0.07),
    0 8px 24px -4px rgb(0 0 0 / 0.4),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
  --shadow-panel-hover:
    0 0 0 1px rgb(255 255 255 / 0.13),
    0 1px 0 rgb(255 255 255 / 0.1),
    0 12px 28px -4px rgb(0 0 0 / 0.5),
    inset 0 1px 0 rgb(255 255 255 / 0.1);
  --shadow-panel-selected:
    0 0 0 1px rgb(255 255 255 / 0.2),
    0 1px 0 rgb(255 255 255 / 0.14),
    0 16px 36px -4px rgb(0 0 0 / 0.6),
    inset 0 1px 0 rgb(255 255 255 / 0.14);
  --shadow-selected-glass:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    inset 0 -1px 0 rgb(255 255 255 / 0.08),
    0 0 0 1px rgb(255 255 255 / 0.22),
    0 14px 34px -4px rgb(0 0 0 / 0.58);

  --glass-saturate: 1.22;
  --glass-fill: rgb(255 255 255 / 0.065);
  --glass-fill-hover: rgb(255 255 255 / 0.105);
  --glass-fill-active: rgb(255 255 255 / 0.14);
  --glass-fill-bar: rgb(26 26 30 / 0.76);
  --glass-fill-drop: rgb(255 255 255 / 0.09);
  --glass-border: rgb(255 255 255 / 0.16);
  --glass-border-strong: rgb(255 255 255 / 0.34);
  --glass-border-outer: rgb(0 0 0 / 0.45);
}

.fg-liquid-glass:not(.fg-composer-box)::before,
.ws-liquid-glass:not(.ws-composer-box)::before,
.fg-glass-panel::before,
.ws-glass-panel::before {
  animation: none !important;
  background-size: 200% 200%;
  background-position: 20% 50%;
  opacity: 0.65;
  transition:
    opacity var(--duration-normal, 240ms) var(--ease-standard, ease),
    background-position 420ms var(--ease-standard, ease);
}

.fg-liquid-glass:not(.fg-composer-box):hover::before,
.ws-liquid-glass:not(.ws-composer-box):hover::before,
.fg-glass-panel:hover::before,
.ws-glass-panel:hover::before {
  background-position: 85% 50%;
  opacity: 0.95;
}

.fg-liquid-glass:not(.fg-composer-box):hover,
.ws-liquid-glass:not(.ws-composer-box):hover,
.fg-glass-panel:hover,
.ws-glass-panel:hover {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-highlight-soft),
    0 0 0 1px var(--glass-border-outer),
    var(--shadow-panel-hover);
}

:is(.dark, [data-theme="dark"]) .fg-panel.is-selected,
:is(.dark, [data-theme="dark"]) .ws-panel.is-selected,
:is(.dark, [data-theme="dark"]) .fg-panel[aria-selected="true"],
:is(.dark, [data-theme="dark"]) .ws-panel[aria-selected="true"] {
  backdrop-filter: blur(16px) saturate(1.22);
  -webkit-backdrop-filter: blur(16px) saturate(1.22);
}

div.fg-panel:not(:is(button, a, [role="button"], .is-interactive)):hover,
div.ws-panel:not(:is(button, a, [role="button"], .is-interactive)):hover,
section.fg-panel:hover,
section.ws-panel:hover {
  box-shadow: var(--shadow-panel);
}

:is(button, a, [role="button"], .is-interactive).fg-panel:hover,
:is(button, a, [role="button"], .is-interactive).ws-panel:hover,
.fg-panel.is-interactive:hover,
.ws-panel.is-interactive:hover {
  background: color-mix(in oklab, var(--surface-panel) 95%, var(--tint-2));
  border-color: var(--surface-line-strong);
  box-shadow: var(--shadow-panel-hover);
}

html[data-hover="fill-border"] .fg-btn--default:hover,
html[data-hover="fill-border"] .ws-btn--default:hover,
.fg-stage .fg-btn--default:hover,
.ws-stage .ws-btn--default:hover,
.fg-composer-box .fg-btn--default:hover,
.ws-composer-box .ws-btn--default:hover {
  background: var(--primary-hover) !important;
  box-shadow:
    0 2px 6px oklch(15% 0.015 258 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.2) !important;
}

html[data-hover="fill-border"] .fg-btn--outline:hover,
html[data-hover="fill-border"] .ws-btn--outline:hover,
.fg-stage .fg-btn--outline:hover,
.ws-stage .ws-btn--outline:hover,
.fg-composer-box .fg-btn--outline:hover,
.ws-composer-box .ws-btn--outline:hover {
  background: color-mix(in oklab, var(--surface-panel) 92%, var(--tint-3)) !important;
  border-color: var(--surface-line-strong) !important;
  box-shadow: var(--shadow-panel-hover) !important;
}

html[data-hover="fill-border"] .fg-btn--ghost:hover,
html[data-hover="fill-border"] .ws-btn--ghost:hover,
.fg-stage .fg-btn--ghost:hover,
.ws-stage .ws-btn--ghost:hover,
.fg-composer-box .fg-btn--ghost:hover,
.ws-composer-box .ws-btn--ghost:hover {
  background: var(--surface-well) !important;
  border-color: var(--surface-line) !important;
  box-shadow: 0 1px 2px oklch(15% 0.01 258 / 0.04) !important;
}

.fg-btn--glass,
.ws-btn--glass {
  background: var(--glass-fill) !important;
  border-color: var(--glass-border) !important;
  backdrop-filter: blur(var(--glass-blur-sm, 10px)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm, 10px)) saturate(var(--glass-saturate)) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 1px var(--glass-border-outer),
    var(--shadow-panel) !important;
}

.fg-btn--glass:hover,
.ws-btn--glass:hover,
.fg-stage .fg-btn--glass:hover,
.ws-stage .ws-btn--glass:hover,
.fg-composer-box .fg-btn--glass:hover,
.ws-composer-box .ws-btn--glass:hover {
  background: var(--glass-fill-hover) !important;
  border-color: var(--glass-border-strong) !important;
  backdrop-filter: blur(var(--glass-blur-sm, 10px)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm, 10px)) saturate(var(--glass-saturate)) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 1px var(--glass-border-outer),
    var(--shadow-panel-hover) !important;
}

.fg-btn--graphite:hover,
.ws-btn--graphite:hover {
  background: var(--primary-graphite-hover) !important;
  box-shadow: var(--shadow-panel-hover) !important;
}

.fg-input:hover:not(:disabled):not(:focus),
.ws-input:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in oklab, var(--foreground) 24%, var(--border));
  background: var(--surface-panel);
}

.fg-input:focus,
.fg-input:focus-visible,
.ws-input:focus,
.ws-input:focus-visible {
  outline: none;
  border-color: var(--ring-tint);
  background: var(--surface-panel);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--ring-tint) 18%, transparent),
    inset 0 1px 2px rgb(17 17 27 / 0.03);
}

.fg-composer-box,
.ws-composer-box,
.fg-chat-frame .fg-composer-box,
.ws-chat-frame .ws-composer-box {
  background: var(--surface-panel-frost) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  box-shadow: var(--shadow-panel) !important;
}

.fg-chat-frame:hover:not(:focus-within) .fg-composer-box,
.ws-chat-frame:hover:not(:focus-within) .ws-composer-box,
.fg-composer-box:hover:not(:focus-within),
.ws-composer-box:hover:not(:focus-within) {
  background: var(--glass-fill-hover) !important;
  border-color: var(--glass-border-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  box-shadow: var(--shadow-panel-hover) !important;
}

.fg-chat-frame:focus-within .fg-composer-box,
.ws-chat-frame:focus-within .ws-composer-box,
.fg-composer-box:focus-within,
.ws-composer-box:focus-within {
  background: var(--glass-fill-active) !important;
  border-color: color-mix(in oklab, var(--ring-tint) 42%, var(--glass-border-strong)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--ring-tint) 14%, transparent),
    var(--shadow-panel-selected) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fg-liquid-glass,
  .ws-liquid-glass,
  .glass-panel,
  .fg-btn--glass,
  .ws-btn--glass,
  .fg-toast,
  .ws-toast {
    background: var(--surface-panel) !important;
  }
}


.fg-composer-box .fg-input,
.ws-composer-box .ws-input,
.fg-composer-box .fg-input:hover,
.ws-composer-box .ws-input:hover,
.fg-composer-box .fg-input:focus,
.ws-composer-box .ws-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}