/* =============================================================
   Nerds.ai — Design Tokens
   Single source of truth for colors, typography, spacing,
   radii, shadows. Import in any HTML you generate.

   Aligned with the official Nerds Design Language:
   - Primary family: Purple Nerd
   - Secondary family: Ember
   - Primary type: Vastago Grotesk
   - Display type: Behind The Nineties (italic) — accent words only
   ============================================================= */

/* ---------- Real brand fonts (self-hosted) ---------------------
   The kit ships the licensed font files in /assets/fonts/. Inter
   is loaded from Google Fonts for tables and numeric grids only. */

@font-face {
  font-family: 'Vastago Grotesk';
  src: url('assets/fonts/VastagoGrotesk-Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vastago Grotesk';
  src: url('assets/fonts/VastagoGrotesk-ExtraLight.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vastago Grotesk';
  src: url('assets/fonts/VastagoGrotesk-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vastago Grotesk';
  src: url('assets/fonts/VastagoGrotesk-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vastago Grotesk';
  src: url('assets/fonts/VastagoGrotesk-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vastago Grotesk';
  src: url('assets/fonts/VastagoGrotesk-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vastago Grotesk';
  src: url('assets/fonts/VastagoGrotesk-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vastago Grotesk';
  src: url('assets/fonts/VastagoGrotesk-Black.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vastago Grotesk';
  src: url('assets/fonts/VastagoGrotesk-Heavy.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Behind The Nineties is italic-only by design. Use it only for
   accent words inside larger Vastago headlines. */
@font-face {
  font-family: 'Behind The Nineties';
  src: url('assets/fonts/BehindTheNineties-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('assets/fonts/BehindTheNineties-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('assets/fonts/BehindTheNineties-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('assets/fonts/BehindTheNineties-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('assets/fonts/BehindTheNineties-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Behind The Nineties';
  src: url('assets/fonts/BehindTheNineties-BlackItalic.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* Inter (numbers/data only) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {

  /* =============================================================
     PURPLE NERD — primary brand family
     Ramps mirror the official Design Language: a light ramp
     stepping toward white, and a deep ramp stepping toward black.
     ============================================================= */

  /* Light ramp (anchor → near-white) */
  --purple-100: #E6E4FF;
  --purple-200: #CDC9FF;
  --purple-300: #B4AFFF;
  --purple-400: #9B94FF;
  --purple-500: #8279FF;   /* light anchor */

  /* Deep ramp (anchor → near-black) */
  --purple-600: #695EFF;   /* deep anchor — the brand's "hero" purple */
  --purple-700: #574ED4;
  --purple-800: #463FAA;
  --purple-900: #352F80;
  --purple-950: #231F55;
  --purple-1000: #12102B;

  /* =============================================================
     EMBER — secondary, warm family. Pairs with Purple Nerd in
     gradients (the "AI sphere"), photo halos, feature-card fills,
     and warm accents. NEVER use ember as the sole brand color.
     ============================================================= */

  --ember-100: #FFEEE4;
  --ember-200: #FFDEC9;
  --ember-300: #FFCDAF;
  --ember-400: #FFBC94;
  --ember-500: #FFAC79;   /* light anchor */
  --ember-600: #FF9B5E;   /* deep anchor */
  --ember-700: #D4814E;
  --ember-800: #AA673F;
  --ember-900: #804E2F;
  --ember-950: #55341F;
  --ember-1000: #2B1A10;

  /* =============================================================
     Neutrals — brand-canonical names
     ============================================================= */

  --blackout:   #000000;
  --midnight:   #121212;   /* primary dark surface */
  --graphite:   #211F23;   /* hover / interactive dark */
  --shadowline: #5E5A62;   /* body text on light */
  --slate:      #777581;
  --powercoat:  #B6B2C7;   /* body text on dark */
  --plume:      #EDECF4;
  --frost:      #F6F5FA;   /* light surface bg */
  --off-white:  #F2F2F2;
  --white:      #FFFFFF;

  /* =============================================================
     Visual accents — neutral family extras
     ============================================================= */

  --zest:     #D1FF8B;   /* lime — energetic accent */
  --breeze:   #8DDEB7;   /* mint — softer accent */
  --highland: #306255;   /* forest green — deep accent */

  /* =============================================================
     Semantic aliases — what you'll reach for most often
     ============================================================= */

  --nerds-primary:        var(--purple-600);   /* #695EFF — the hero purple */
  --nerds-primary-hover:  var(--purple-700);
  --nerds-on-primary:     var(--white);

  --nerds-secondary:      var(--ember-500);    /* warm accent */
  --nerds-secondary-deep: var(--ember-600);

  --nerds-ink:            var(--midnight);     /* text on light */
  --nerds-ink-soft:       var(--shadowline);
  --nerds-ink-muted:      var(--slate);

  --nerds-paper:          var(--white);        /* light surface */
  --nerds-paper-soft:     var(--frost);
  --nerds-paper-cool:     var(--plume);

  --nerds-stage:          var(--midnight);     /* dark surface */
  --nerds-stage-deep:     var(--blackout);
  --nerds-stage-card:     var(--graphite);

  --nerds-on-dark:        var(--white);
  --nerds-on-dark-soft:   var(--powercoat);

  --nerds-border:         #2A2832;             /* subtle border on dark */
  --nerds-border-light:   #EAEAF0;             /* subtle border on light */
  --nerds-border-onDark:  #FFFFFF1F;           /* 12% white */

  --nerds-success:        var(--breeze);
  --nerds-danger:         #FA4D56;
  --nerds-warning:        var(--ember-600);

  /* =============================================================
     Gradients — the AI sphere palette
     The signature look: ember → purple, with peach starting the
     gradient and deep purple ending it. Used in:
     - AI sphere illustrations
     - Photo halos / floating spheres
     - Accent words in headlines
     - Soft feature-card fills (lighter version)
     ============================================================= */

  --grad-ai-sphere:
    radial-gradient(circle at 30% 30%,
      var(--ember-300) 0%,
      var(--ember-500) 25%,
      var(--purple-500) 60%,
      var(--purple-800) 90%);

  --grad-accent-word:
    linear-gradient(95deg, var(--ember-500) 0%, var(--purple-500) 55%, var(--purple-600) 100%);

  --grad-card-warm:
    linear-gradient(135deg, var(--purple-100) 0%, var(--ember-200) 100%);

  --grad-hero-glow:
    radial-gradient(circle, rgba(105,94,255,0.55) 0%, rgba(105,94,255,0) 65%); /* @kind color */

  --grad-ember-glow:
    radial-gradient(circle, rgba(255,172,121,0.45) 0%, rgba(255,172,121,0) 65%); /* @kind color */

  /* =============================================================
     Typography
     ============================================================= */

  --nerds-font-sans:    'Vastago Grotesk', 'Inter', system-ui, sans-serif;
  --nerds-font-display: 'Behind The Nineties', 'Vastago Grotesk', Georgia, serif;
  --nerds-font-mono:    'Inter', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Aliases kept for legacy templates */
  --nerds-font-heading: var(--nerds-font-sans);
  --nerds-font-body:    var(--nerds-font-sans);
  --nerds-font-data:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --nerds-font-ui:      var(--nerds-font-sans);

  /* Scale */
  --nerds-fs-hero:      96px;
  --nerds-fs-display:   64px;
  --nerds-fs-h1:        48px;
  --nerds-fs-h2:        36px;
  --nerds-fs-h3:        24px;
  --nerds-fs-h4:        18px;
  --nerds-fs-body-lg:   18px;
  --nerds-fs-body:      16px;
  --nerds-fs-body-sm:   14px;
  --nerds-fs-caption:   12px;
  --nerds-fs-label:     12px;

  /* =============================================================
     Spacing scale
     ============================================================= */

  --nerds-space-1:  4px;
  --nerds-space-2:  8px;
  --nerds-space-3:  12px;
  --nerds-space-4:  16px;
  --nerds-space-5:  24px;
  --nerds-space-6:  32px;
  --nerds-space-7:  48px;
  --nerds-space-8:  64px;
  --nerds-space-9:  96px;
  --nerds-space-10: 128px;

  /* =============================================================
     Radii — Nerds.ai trends soft. Cards 16–24px, pills for chips
     and segmented controls, true pill only on icon discs and tabs.
     ============================================================= */

  --nerds-radius-xs:   6px;
  --nerds-radius-sm:   10px;
  --nerds-radius-md:   16px;   /* default — buttons, inputs */
  --nerds-radius-lg:   24px;   /* feature cards, dark cards */
  --nerds-radius-xl:   32px;   /* hero image masks */
  --nerds-radius-pill: 999px;

  /* =============================================================
     Shadows
     ============================================================= */

  --nerds-shadow-card:     0 6px 24px rgba(18, 16, 43, 0.06),
                            0 1px 2px rgba(18, 16, 43, 0.04);
  --nerds-shadow-elevated: 0 16px 48px rgba(18, 16, 43, 0.16);
  --nerds-shadow-sphere:   0 24px 60px rgba(105, 94, 255, 0.35),
                            inset -8px -12px 32px rgba(35, 31, 85, 0.4),
                            inset 6px 8px 16px rgba(255, 222, 201, 0.4);
  --nerds-shadow-glow:     0 0 80px rgba(105, 94, 255, 0.45);

  /* The sphere trail — a soft horizontal sweep of warm-to-cool
     light that sits BEHIND the AI sphere. The sphere never floats
     in isolation; it always rides this trail. */
  --grad-sphere-trail:
    linear-gradient(90deg,
      rgba(255, 172, 121, 0)   0%,
      rgba(255, 172, 121, 0.32) 22%,
      rgba(130, 121, 255, 0.55) 55%,
      rgba(105,  94, 255, 0.32) 78%,
      rgba(105,  94, 255, 0)   100%); /* @kind color */

  /* The vertical sphere bar — a thin gradient column extending
     downward from a sphere. Anchors a composition, often partially
     hidden behind a photo mask. ONE per composition maximum. */
  --grad-sphere-bar:
    linear-gradient(180deg,
      rgba(255, 172, 121, 0)    0%,
      rgba(255, 172, 121, 0.55) 8%,
      rgba(130, 121, 255, 0.55) 35%,
      rgba(105,  94, 255, 0.32) 75%,
      rgba(105,  94, 255, 0)   100%); /* @kind color */

  /* =============================================================
     LEGACY ALIASES — keep older preview cards rendering until they
     are regenerated against the canonical names above. Do not use
     these in new work.
     ============================================================= */
  --nerds-near-white:     var(--off-white);
  --nerds-module-bg:      var(--frost);
  --nerds-roof:           var(--frost);
  --nerds-interactive-bg: var(--purple-100);
  --nerds-text-heading:   var(--midnight);
  --nerds-text-body:      var(--shadowline);
  --nerds-text-muted:     var(--slate);
  --nerds-text-mid:       var(--shadowline);
  --nerds-text-darkmode:  var(--powercoat);
  --nerds-border-subtle:  #E7E7EA;
  --nerds-white-border:   var(--nerds-border-onDark);
  --nerds-glass:          #33333359;
  --nerds-electric:       var(--purple-600);
  --nerds-interactive:    var(--purple-700);
  --nerds-bright:         var(--purple-500);
  --nerds-purblue:        var(--purple-400);
  --nerds-lavender:       var(--purple-300);
  --nerds-soft-purple:    var(--purple-200);
  --nerds-light-purple:   var(--purple-100);
  --nerds-purple-tint:    #F4EBFF;
  --nerds-ultra-dark:     var(--blackout);
  --nerds-dark-bg:        var(--midnight);
  --nerds-card-dark:      var(--graphite);
  --nerds-black:          var(--midnight);
  --nerds-hover-dark:     var(--graphite);
  --nerds-deep-indigo:    var(--purple-900);
  --nerds-green:          var(--breeze);
  --nerds-peach:          var(--ember-200);
  --nerds-peach-dark:     var(--ember-300);
  --nerds-indian-red:     #FA4D56;
}

/* =============================================================
   Base type helpers — non-mandatory but useful starting point.
   ============================================================= */

.nerds-display {
  font-family: var(--nerds-font-sans);
  font-weight: 500;                       /* Medium — see Headline Rule */
  font-size: var(--nerds-fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--nerds-ink);
}

/* ============= HEADLINE RULE ============================
   All Vastago Grotesk headlines must use Medium (500) maximum.
   No SemiBold, Bold, ExtraBold, Black, or Heavy in titles.
   The brand voice is premium, clean, elegant, easy to read.
   ======================================================== */
.nerds-h1 { font-family: var(--nerds-font-sans); font-weight: 500; font-size: var(--nerds-fs-h1); line-height: 1.1;  color: var(--nerds-ink); letter-spacing: -0.015em; }
.nerds-h2 { font-family: var(--nerds-font-sans); font-weight: 500; font-size: var(--nerds-fs-h2); line-height: 1.15; color: var(--nerds-ink); letter-spacing: -0.01em; }
.nerds-h3 { font-family: var(--nerds-font-sans); font-weight: 500; font-size: var(--nerds-fs-h3); line-height: 1.25; color: var(--nerds-ink); }

/* The signature: ONE accent word in a headline, set in italic
   Behind The Nineties. Apply to a <span> inside an h1/h2/h3.

   COLOR RULE — always solid purple, never a gradient (unless the
   asset explicitly requests it):
     · Light background → --purple-600  (#695EFF)
     · Dark background  → --purple-500  (#8279FF)

   Use --nerds-accent-word on light. Use --nerds-accent-word--on-dark
   on dark. */
.nerds-accent-word {
  font-family: var(--nerds-font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--purple-600);
  letter-spacing: -0.01em;
}
.nerds-accent-word--on-dark { color: var(--purple-500); }

/* Optional, opt-in only: gradient accent word. Use ONLY when the
   brief specifically asks for warmth. Default is solid purple. */
.nerds-accent-word--gradient {
  background: var(--grad-accent-word);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nerds-body { font-family: var(--nerds-font-sans); font-weight: 400; font-size: var(--nerds-fs-body); line-height: 1.55; color: var(--nerds-ink-soft); }
.nerds-caption { font-family: var(--nerds-font-sans); font-size: var(--nerds-fs-caption); color: var(--nerds-ink-muted); }

/* Section label — the small dot + uppercase wide-tracked label
   that appears above every section title in real applications. */
.nerds-section-label {
  font-family: var(--nerds-font-sans);
  font-weight: 500;
  font-size: var(--nerds-fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nerds-ink-soft);
  display: inline-flex; align-items: center; gap: 10px;
}
.nerds-section-label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--purple-600);
}
.nerds-section-label--on-dark { color: var(--powercoat); }
.nerds-section-label--on-dark::before { background: var(--purple-400); }

/* =============================================================
   Component primitives
   ============================================================= */

/* Buttons — rectangular with 12–16px radius, NOT pills.
   See real screenshots: "Agendar reunión" is rounded-rect. */
.nerds-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--nerds-font-sans);
  font-weight: 500; font-size: 15px;
  padding: 14px 22px;
  border-radius: var(--nerds-radius-md);
  border: none; cursor: pointer;
  transition: background .15s ease, color .15s ease;
  letter-spacing: 0.005em;
}
.nerds-btn--primary {
  background: var(--purple-600); color: var(--white);
}
.nerds-btn--primary:hover { background: var(--purple-700); }
.nerds-btn--ghost-light {
  background: transparent; color: var(--nerds-ink);
  border: 1px solid var(--nerds-border-light);
}
.nerds-btn--ghost-dark {
  background: transparent; color: var(--white);
  border: 1px solid var(--nerds-border-onDark);
}
.nerds-btn--ghost-dark:hover { background: var(--graphite); }

/* The floating pill nav button used on dark hero (e.g. "Iniciar sesión") */
.nerds-btn--nav-ghost {
  background: transparent; color: var(--white);
  border: 1px solid var(--nerds-border-onDark);
  border-radius: var(--nerds-radius-pill);
  padding: 10px 18px; font-size: 14px;
}

/* Cards — soft, rounded, with subtle shadow */
.nerds-card {
  background: var(--white);
  border-radius: var(--nerds-radius-lg);
  padding: 28px;
  box-shadow: var(--nerds-shadow-card);
}
.nerds-card--dark {
  background: var(--graphite);
  color: var(--nerds-on-dark-soft);
  box-shadow: none;
}
.nerds-card--warm {
  /* The peach→lavender "ember card" used in real feature grids */
  background: var(--grad-card-warm);
  color: var(--nerds-ink);
  box-shadow: none;
}

/* Section label dot/badge — see slide-4 reference: "04" purple disc */
.nerds-step-badge {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--purple-600);
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--nerds-font-sans); font-weight: 600; font-size: 14px;
}

/* =============================================================
   AI SPHERE — proprietary rendered assets (DO NOT reconstruct)

   The Nerds.ai sphere is a proprietary 3D-rendered object. It is
   NOT reproducible with CSS gradients and must NEVER be hand-built
   as a gradient circle. Always reference the official PNG assets
   in assets/sphere/. They carry the correct proportions, the
   volumetric glow, the warm-to-purple finish, and the baked-in
   light trail / transparency.

   Three official assets:
     assets/sphere/sphere.png             — orb alone (935×921, α)
     assets/sphere/sphere-trail-long.png  — orb + long narrow
                                            vertical trail (442×2128)
     assets/sphere/sphere-trail-wide.png  — orb + wide vertical
                                            trail (869×2160)

   These are <img>-backed via background-image so the aspect ratio
   is locked with aspect-ratio. Size by setting `width` only.

   ---- ORB ALONE ----
     <span class="nerds-ai-sphere"></span>
     <span class="nerds-ai-sphere nerds-ai-sphere--lg"></span>
   ============================================================= */
.nerds-ai-sphere {
  display: inline-block;
  width: 80px;
  aspect-ratio: 935 / 921;
  background: url('assets/sphere/sphere.png') center / contain no-repeat;
  /* the asset already carries its own glow + transparency */
}
.nerds-ai-sphere--sm { width: 40px; }
.nerds-ai-sphere--md { width: 72px; }
.nerds-ai-sphere--lg { width: 140px; }
.nerds-ai-sphere--xl { width: 240px; }

/* =============================================================
   SPHERE + TRAIL — the official "estela" assets. The orb sits at
   the TOP of the image; the trail descends below it and fades to
   transparent. The trail length/width is baked into the asset —
   never rebuild it with a gradient div.

     <span class="nerds-sphere-trail nerds-sphere-trail--long"></span>
     <span class="nerds-sphere-trail nerds-sphere-trail--wide"></span>

   Size by setting `width`. The orb diameter ≈ the image width, so
   width controls orb size and the trail extends downward
   proportionally. Position with the orb's intended location in
   mind — the trail flows DOWN from there.
   ============================================================= */
.nerds-sphere-trail {
  display: inline-block;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}
.nerds-sphere-trail--long {
  width: 110px;
  aspect-ratio: 442 / 2128;
  background-image: url('assets/sphere/sphere-trail-long.png');
}
.nerds-sphere-trail--wide {
  width: 220px;
  aspect-ratio: 869 / 2160;
  background-image: url('assets/sphere/sphere-trail-wide.png');
}

/* The orb diameter as a fraction of each trail asset's width, for
   when you need to align the orb center precisely:
     long  → orb ≈ 88% of width, centered horizontally, top ~9%
     wide  → orb ≈ 72% of width, centered horizontally, top ~4% */

/* =============================================================
   Photo mask with notches — the brand's signature image
   treatment. A photo is masked to a rounded rectangle, and
   supporting elements (spheres, notifications, icon discs) sit
   in carved-out notches at the edge so the photo wraps around
   them rather than them floating on top.

   Usage:
     <div class="nerds-photo-mask">
       <div class="bg" style="background-image: IMAGE_URL_HERE"></div>
       <div class="nerds-photo-notch" style="top:-22px;right:32px">
         <span class="nerds-ai-sphere"></span>
       </div>
       <div class="nerds-photo-notch nerds-photo-notch--card"
            style="bottom:48px;left:-32px">
         <div class="nerds-notification">…</div>
       </div>
     </div>

   The notch's background MUST match the page background, since
   it's literally a chunk of bg-colored shape that overlays the
   photo to subtract from it visually. Pass `--notch-bg:` as an
   inline custom property when the bg isn't `--midnight`.
   ============================================================= */

.nerds-photo-mask {
  position: relative;
  border-radius: var(--nerds-radius-xl);    /* 32px */
  overflow: visible;                         /* notches extend out */
  isolation: isolate;
}
.nerds-photo-mask > .bg {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
}

/* A notch — a background-colored shape that overlays the photo
   edge to create the illusion of a cut. Place the actual sphere
   or card as a child of the notch. */
.nerds-photo-notch {
  --notch-bg: var(--midnight);
  position: absolute;
  z-index: 2;
  padding: 10px;
  border-radius: 999px;
  background: var(--notch-bg);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Card notches are rounded-rect, not pill */
.nerds-photo-notch--card {
  border-radius: 22px;
  padding: 12px;
}
/* Soft notch (lighter feathering) for when the notch sits over
   the lighter side of the photo. */
.nerds-photo-notch--soft {
  box-shadow: 0 0 24px 4px var(--notch-bg);
}

/* Notification card — the floating "Pago exitoso $1,250 MXN" card.
   White rounded rectangle with icon, title, subtitle, timestamp. */
.nerds-notification {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--white);
  border-radius: 14px;
  padding: 10px 16px 10px 10px;
  box-shadow: 0 12px 32px rgba(18, 16, 43, 0.16);
  font-family: var(--nerds-font-sans);
}
.nerds-notification .icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--purple-200);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--purple-700);
}
.nerds-notification .title {
  font-weight: 600; font-size: 14px; color: var(--nerds-ink);
}
.nerds-notification .subtitle {
  font-size: 12px; color: var(--nerds-ink-muted); margin-top: 1px;
}
.nerds-notification .time {
  margin-left: 8px; font-size: 11px; color: var(--nerds-ink-muted);
}

/* Chat bubbles */
.nerds-bubble {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
  max-width: 80%;
}
.nerds-bubble--user {
  background: var(--purple-600); color: var(--white);
  border-bottom-right-radius: 4px;
  margin-left: auto;
}
.nerds-bubble--bot {
  background: var(--frost); color: var(--nerds-ink);
  border-bottom-left-radius: 4px;
}

/* Floating pill nav (real-world pattern: rounded pill bar at top) */
.nerds-pillnav {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(18, 16, 43, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--nerds-border-onDark);
  border-radius: var(--nerds-radius-pill);
  padding: 8px 8px 8px 20px;
}
.nerds-pillnav a {
  font-family: var(--nerds-font-sans);
  font-weight: 400; font-size: 14px;
  color: var(--white); text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
}

/* Segmented tab control — "Workflows | Agents | Voice" */
.nerds-segments {
  display: inline-flex; gap: 4px;
  background: var(--plume);
  border-radius: var(--nerds-radius-pill);
  padding: 6px;
}
.nerds-segments button {
  font-family: var(--nerds-font-sans);
  font-weight: 500; font-size: 15px;
  background: transparent; border: none;
  padding: 10px 24px; border-radius: 999px;
  color: var(--nerds-ink); cursor: pointer;
}
.nerds-segments button[aria-selected="true"],
.nerds-segments button.is-active {
  background: var(--purple-600); color: var(--white);
}

* { box-sizing: border-box; }