/* ============================================================================
   GreenBro 2026 — Design System
   ----------------------------------------------------------------------------
   This is the stylesheet that stats.html, status_index.html and status_detail.html
   already <link> and that did not exist: those pages build their whole palette on
   --gb-* / --bs-* custom properties, and with no definitions var() resolved to
   *unset* — so they rendered with no colors and the active filter chips were white
   on white. Defining the tokens here makes them render correctly with no markup
   change; it is also the base for the wider 2026 redesign.

   Layer order fixed up front so component rules never fight the reset.
   ============================================================================ */
@layer tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------------------
   TOKENS — light (default)
   Brand green anchored on the existing #22b268, but the primary action color is
   a darker #1a9c5a: #22b268 on white is ~2.9:1 and fails AA for the small text
   and icons it's used on. The bright #22b268 moves to dark mode where it belongs.
   --------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Brand green ramp */
    --gb-green-50:  #eef9f3;
    --gb-green-100: #d3f0e1;
    --gb-green-300: #6dd3a2;
    --gb-green-500: #1a9c5a;   /* primary action */
    --gb-green-600: #158a4e;   /* hover */
    --gb-green-700: #0f6b3c;   /* text-on-tint / small text */

    /* Neutral ramp — --gb-ink-faint clears 4.5:1, replacing the old ~3.0:1 #8a86a5 */
    --gb-canvas:      #f7f9f8;
    --gb-surface:     #ffffff;
    --gb-surface-alt: #f1f4f2;
    --gb-line:        #dfe5e2;
    --gb-line-strong: #c2cdc8;
    --gb-ink:         #131a17;
    --gb-ink-soft:    #3d4a45;
    --gb-ink-faint:   #5c6a64;

    /* Semantic state colors — always paired with text + icon, never color alone */
    --gb-success-bg: #e4f5ec; --gb-success-fg: #0f6b3c; --gb-success-border: #a9dcc2;
    --gb-info-bg:    #e6effb; --gb-info-fg:    #1d4ed8; --gb-info-border:    #b3ccf2;
    --gb-warn-bg:    #fbf0da; --gb-warn-fg:    #8a5a00; --gb-warn-border:    #edcf94;
    --gb-danger-bg:  #fbe6e6; --gb-danger-fg:  #a02121; --gb-danger-border:  #eeadad;
    --gb-neutral-bg: #eef1ef; --gb-neutral-fg: #5c6a64; --gb-neutral-border: #d5dcd8;

    /* Bootstrap-compatibility aliases: the SEO pages read these directly for the
       status badges. Kept here so those pages stay styled once Bootstrap is
       removed. This block is retired once those templates are migrated. */
    --bs-primary-bg-subtle: var(--gb-green-50);
    --bs-success-bg-subtle: var(--gb-success-bg);
    --bs-success-text-emphasis: var(--gb-success-fg);
    --bs-warning-bg-subtle: var(--gb-warn-bg);
    --bs-warning-text-emphasis: var(--gb-warn-fg);
    --bs-danger-bg-subtle: var(--gb-danger-bg);
    --bs-danger-text-emphasis: var(--gb-danger-fg);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Type scale — fluid, base 17px on mobile (audience includes older users) */
    --gb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --gb-text-xs:   0.8125rem;
    --gb-text-sm:   0.9375rem;
    --gb-text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
    --gb-text-lg:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem);
    --gb-text-xl:   clamp(1.375rem, 1.25rem + 0.7vw, 1.75rem);
    --gb-text-2xl:  clamp(1.75rem, 1.5rem + 1.4vw, 2.5rem);
    --gb-text-3xl:  clamp(2.125rem, 1.7rem + 2.2vw, 3.25rem);
    --gb-numeric: tabular-nums;

    /* Space / radius */
    --gb-space-1: .25rem; --gb-space-2: .5rem;  --gb-space-3: .75rem; --gb-space-4: 1rem;
    --gb-space-5: 1.5rem; --gb-space-6: 2rem;   --gb-space-7: 3rem;   --gb-space-8: 4rem;
    --gb-radius-sm: 6px; --gb-radius: 10px; --gb-radius-lg: 16px; --gb-radius-xl: 24px; --gb-radius-pill: 999px;

    /* Shadows — per theme (a black-alpha shadow is invisible on a dark canvas) */
    --gb-shadow-sm: 0 1px 2px rgb(19 26 23 / .06), 0 1px 3px rgb(19 26 23 / .08);
    --gb-shadow:    0 2px 4px rgb(19 26 23 / .05), 0 4px 12px rgb(19 26 23 / .08);
    --gb-shadow-lg: 0 8px 28px rgb(19 26 23 / .12);
    --gb-ring: 0 0 0 1px var(--gb-line);

    /* Focus — two-layer so it's visible on tinted and plain backgrounds */
    --gb-focus: 0 0 0 3px var(--gb-canvas), 0 0 0 5px var(--gb-green-500);

    /* Touch targets — the current 18px icon buttons are the worst a11y defect */
    --gb-tap-min: 44px;   /* WCAG 2.5.5 floor */
    --gb-tap:     48px;

    /* Brand warmth, taken straight from the landing so the chat feels like the
       same product: the hero's lilac->pink wash, its purple, and its green. */
    --gb-purple:      #7367f0;
    --gb-purple-soft: #eae8fd;
    --gb-pink-soft:   #fce5e6;
    --gb-warm-wash:   linear-gradient(138.18deg, #eae8fd 0%, #fce5e6 94.44%);
    --gb-brand-grad:  linear-gradient(72.47deg, #7367f0 0%, #28c76f 100%);
  }

  /* ---- TOKENS — dark ----
     Applied for the explicit switcher (data-theme=dark) AND for OS preference,
     guarded so the explicit light switcher still wins. */
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    /* only the OS query re-declares; the attribute selector above is unconditional */
  }
  :root[data-theme="dark"] {
    --gb-green-500: #35c47f;
    --gb-green-600: #22b268;
    --gb-green-700: #1a9c5a;
    --gb-canvas:      #0f1512;
    --gb-surface:     #171f1b;
    --gb-surface-alt: #1f2925;
    --gb-line:        #2b3833;
    --gb-line-strong: #3b4a44;
    --gb-ink:         #eef2f0;
    --gb-ink-soft:    #c3cec9;
    --gb-ink-faint:   #9aa8a2;
    --gb-success-bg: #123726; --gb-success-fg: #6fe0a6; --gb-success-border: #2e8f63;
    --gb-info-bg:    #14243f; --gb-info-fg:    #8fb6ff; --gb-info-border:    #2f4d80;
    --gb-warn-bg:    #3a2c0d; --gb-warn-fg:    #f5c257; --gb-warn-border:    #6b5320;
    --gb-danger-bg:  #3a1717; --gb-danger-fg:  #f39b9b; --gb-danger-border:  #7a3535;
    --gb-neutral-bg: #1f2925; --gb-neutral-fg: #9aa8a2; --gb-neutral-border: #3b4a44;
    --bs-primary-bg-subtle: #123726;
    --bs-success-bg-subtle: var(--gb-success-bg); --bs-success-text-emphasis: var(--gb-success-fg);
    --bs-warning-bg-subtle: var(--gb-warn-bg);    --bs-warning-text-emphasis: var(--gb-warn-fg);
    --bs-danger-bg-subtle: var(--gb-danger-bg);   --bs-danger-text-emphasis: var(--gb-danger-fg);
    --gb-shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
    --gb-shadow:    0 2px 6px rgb(0 0 0 / .35);
    --gb-shadow-lg: 0 10px 30px rgb(0 0 0 / .45);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --gb-green-500: #35c47f;
      --gb-green-600: #22b268;
      --gb-green-700: #1a9c5a;
      --gb-canvas:      #0f1512;
      --gb-surface:     #171f1b;
      --gb-surface-alt: #1f2925;
      --gb-line:        #2b3833;
      --gb-line-strong: #3b4a44;
      --gb-ink:         #eef2f0;
      --gb-ink-soft:    #c3cec9;
      --gb-ink-faint:   #9aa8a2;
      --gb-success-bg: #123726; --gb-success-fg: #6fe0a6; --gb-success-border: #2e8f63;
      --gb-info-bg:    #14243f; --gb-info-fg:    #8fb6ff; --gb-info-border:    #2f4d80;
      --gb-warn-bg:    #3a2c0d; --gb-warn-fg:    #f5c257; --gb-warn-border:    #6b5320;
      --gb-danger-bg:  #3a1717; --gb-danger-fg:  #f39b9b; --gb-danger-border:  #7a3535;
      --gb-neutral-bg: #1f2925; --gb-neutral-fg: #9aa8a2; --gb-neutral-border: #3b4a44;
      --bs-primary-bg-subtle: #123726;
      --bs-success-bg-subtle: var(--gb-success-bg); --bs-success-text-emphasis: var(--gb-success-fg);
      --bs-warning-bg-subtle: var(--gb-warn-bg);    --bs-warning-text-emphasis: var(--gb-warn-fg);
      --bs-danger-bg-subtle: var(--gb-danger-bg);   --bs-danger-text-emphasis: var(--gb-danger-fg);
      --gb-shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
      --gb-shadow:    0 2px 6px rgb(0 0 0 / .35);
      --gb-shadow-lg: 0 10px 30px rgb(0 0 0 / .45);
    }
  }
}

/* ---------------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------------- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--gb-canvas);
    color: var(--gb-ink);
    font-family: var(--gb-font);
    font-size: var(--gb-text-base);
    line-height: 1.6;
  }

  a { color: var(--gb-green-700); }
  :root[data-theme="dark"] a { color: var(--gb-green-500); }

  img { max-width: 100%; height: auto; }

  /* Focus keystone — never remove an outline without this replacement */
  :focus-visible {
    outline: none;
    box-shadow: var(--gb-focus);
    border-radius: var(--gb-radius-sm);
  }

  @media (prefers-reduced-motion: no-preference) {
    a, button, .gb-btn, .gb-chip { transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s; }
  }
}

/* ---------------------------------------------------------------------------
   COMPONENTS — the shared primitives the redesign builds on. The SEO pages
   still carry their own scoped CSS for now; these are additive.
   --------------------------------------------------------------------------- */
@layer components {
  .gb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--gb-space-2);
    min-height: var(--gb-tap); padding: 0 var(--gb-space-5);
    border: 1px solid transparent; border-radius: var(--gb-radius-pill);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    background: var(--gb-surface-alt); color: var(--gb-ink);
  }
  .gb-btn--primary { background: var(--gb-green-500); color: #fff; }
  .gb-btn--primary:hover { background: var(--gb-green-600); }
  .gb-btn--ghost {
    background: transparent; border-color: var(--gb-line-strong); color: var(--gb-ink);
  }
  .gb-btn--ghost:hover { border-color: var(--gb-green-500); color: var(--gb-green-700); }

  .gb-card {
    background: var(--gb-surface); border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius); padding: var(--gb-space-4);
    box-shadow: var(--gb-shadow-sm);
  }

  .gb-chip {
    display: inline-flex; align-items: center; gap: var(--gb-space-2);
    min-height: 32px; padding: 0 var(--gb-space-3);
    border: 1px solid var(--gb-line); border-radius: var(--gb-radius-pill);
    background: var(--gb-surface); color: var(--gb-ink-faint);
    text-decoration: none; font-size: var(--gb-text-sm);
  }
  .gb-chip[aria-pressed="true"], .gb-chip.on {
    background: var(--gb-green-500); border-color: var(--gb-green-500); color: #fff;
  }

  /* Status badge: color + text; callers add an icon. Never hue alone. */
  .gb-badge {
    display: inline-flex; align-items: center; gap: var(--gb-space-1);
    padding: .15rem .6rem; border-radius: var(--gb-radius-pill);
    font-size: var(--gb-text-xs); font-weight: 700;
    border: 1px solid transparent;
  }
  .gb-badge--success { background: var(--gb-success-bg); color: var(--gb-success-fg); border-color: var(--gb-success-border); }
  .gb-badge--info    { background: var(--gb-info-bg);    color: var(--gb-info-fg);    border-color: var(--gb-info-border); }
  .gb-badge--warn    { background: var(--gb-warn-bg);    color: var(--gb-warn-fg);    border-color: var(--gb-warn-border); }
  .gb-badge--danger  { background: var(--gb-danger-bg);  color: var(--gb-danger-fg);  border-color: var(--gb-danger-border); }
  .gb-badge--neutral { background: var(--gb-neutral-bg); color: var(--gb-neutral-fg); border-color: var(--gb-neutral-border); }
}

/* ---------------------------------------------------------------------------
   UTILITIES — a deliberately small set, not a Tailwind clone
   --------------------------------------------------------------------------- */
@layer utilities {
  .gb-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .gb-tabular { font-variant-numeric: var(--gb-numeric); }
  .gb-scroll-x { overflow-x: auto; }

  /* Skip link — first focusable element, hidden until focused */
  .gb-skip-link {
    position: absolute; left: var(--gb-space-2); top: -3rem;
    z-index: 1000; padding: var(--gb-space-2) var(--gb-space-4);
    background: var(--gb-green-500); color: #fff; border-radius: var(--gb-radius);
    text-decoration: none; font-weight: 600;
    transition: top .15s;
  }
  .gb-skip-link:focus-visible { top: var(--gb-space-2); box-shadow: var(--gb-shadow-lg); }
}



/* ============================================================================
   CHAT — Elphael-style: light, airy, three columns. Left tools/nav sidebar,
   central conversation, right panel for the user's cases. Soft grey canvas,
   white cards, purple accent (matches the brand's own #7367f0), bot bubbles in
   light grey and user bubbles in charcoal, exactly like the reference.
   ============================================================================ */
:root {
  --el-canvas:  #f4f5f7;   /* app background */
  --el-card:    #ffffff;   /* panels */
  --el-line:    #ececf1;   /* hairline borders */
  --el-line-strong: #d4d4df; /* borders that must read: chips, data boxes */
  --el-ink:     #33333f;   /* main text: gris muy oscuro, no negro */
  --el-ink-soft:#6a6a7b;   /* secondary text */
  --el-accent:  #5e50dc;   /* purple accent (brand #7367f0 family), dark enough for 4.5:1 on white and on its soft tint */
  --el-accent-soft: #eeecfb;
  /* Bot bubble: a flat neutral grey reads as a system notice. A faint warm
     green tint from the brand keeps it friendly while staying quiet enough
     to read long answers on. */
  --el-bot:      #f1f7f3;
  --el-bot-line: #e2ede7;
  --el-user:     #33333f;   /* user bubble (charcoal) */
  --el-radius:  16px;
}
:root[data-theme="dark"] {
  --el-canvas: #14141b; --el-card: #1c1c26; --el-line: #2a2a36; --el-line-strong: #3d3d4f;
  --el-ink: #ececf2; --el-ink-soft: #a0a0b0; --el-accent: #8b7dff;
  --el-accent-soft: #241f3a; --el-user: #3a3a48;
  --el-bot: #1e2a24; --el-bot-line: #2b3b33;
}

.gb-chat-body { overflow: hidden; background: var(--el-canvas); }

.gb-chat {
  display: grid;
  grid-template-columns: 268px minmax(0,1fr);
  height: 100dvh;
  gap: var(--gb-space-4);
  padding: var(--gb-space-4);
  background: var(--el-canvas);
}
@media (max-width: 860px)  { .gb-chat { grid-template-columns: 1fr; gap: 0; padding: 0; } }

/* The mobile backdrop is a direct grid child; keep it OUT of the grid flow at
   all sizes (fixed-position), or it eats the center column on desktop. */
.gb-side-backdrop { position: fixed; inset: 0; display: none; }

/* ---- generic panel look ---- */
.gb-panel {
  background: var(--el-card); border: 1px solid var(--el-line);
  border-radius: var(--el-radius); display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}

/* ---- LEFT sidebar ---- */
.gb-side { }
.gb-side-brand {
  display: flex; align-items: center; gap: var(--gb-space-3);
  padding: var(--gb-space-4); font-weight: 700; font-size: var(--gb-text-lg);
  color: var(--el-ink); text-decoration: none;
}
.gb-side-brand .logo {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--el-accent-soft); display: flex; align-items: center; justify-content: center;
}
.gb-side-brand .logo img { width: 88%; height: 88%; object-fit: contain; }
/* Brand heart in the sidebar (mascot removed here to avoid repetition) */
.gb-side-brand .logo--heart { background: var(--el-accent-soft); }
.gb-side-brand .logo--heart i { color: var(--el-accent); font-size: 1.25rem; }
.gb-side-scroll { overflow-y: auto; padding: 0 var(--gb-space-3) var(--gb-space-3); flex: 1; }

/* "How to get started" — a prominent card at the top of the sidebar, not a
   tiny info icon. Purple gradient so it stands out and invites a first click. */
.gb-side-getstarted {
  display: flex; align-items: center; gap: var(--gb-space-3);
  margin: var(--gb-space-3) 0 var(--gb-space-2);
  padding: var(--gb-space-3) var(--gb-space-4); border-radius: 14px;
  text-decoration: none; color: #fff;
  background: linear-gradient(120deg, #7367f0 0%, #6c5ce7 100%);
  box-shadow: 0 4px 14px rgb(108 92 231 / .3);
}
.gb-side-getstarted:hover { filter: brightness(1.05); }
.gb-side-getstarted i { font-size: 1.4rem; flex-shrink: 0; }
.gb-side-getstarted strong { display: block; font-size: var(--gb-text-sm); font-weight: 700; }
.gb-side-getstarted small { display: block; font-size: var(--gb-text-xs); opacity: .9; margin-top: 1px; }
.gb-side-section {
  font-size: var(--gb-text-xs); color: var(--el-ink-soft);
  padding: var(--gb-space-4) var(--gb-space-2) var(--gb-space-2); font-weight: 500;
}
.gb-side-link {
  display: flex; align-items: center; gap: var(--gb-space-3);
  padding: .7rem var(--gb-space-3); border-radius: 12px; min-height: 44px;
  color: var(--el-ink-soft); text-decoration: none; font-weight: 500; font-size: var(--gb-text-sm);
}
.gb-side-link .ico { font-size: 1.1rem; width: 1.35rem; text-align: center; }
.gb-side-link:hover { background: var(--el-canvas); color: var(--el-ink); }
.gb-side-link.is-active {
  background: var(--el-accent-soft); color: var(--el-accent); font-weight: 600;
}
.gb-side-link .badge-new {
  margin-left: auto; font-size: var(--gb-text-xs); color: var(--el-accent);
  background: var(--el-accent-soft); padding: .1rem .5rem; border-radius: 999px; font-weight: 600;
}
/* support + language footer, pinned to the bottom-left like the original */
.gb-side-foot { border-top: 1px solid var(--el-line); padding: var(--gb-space-3); }
.gb-support {
  display: flex; align-items: center; gap: var(--gb-space-3);
  padding: var(--gb-space-3); border-radius: 12px; text-decoration: none;
  background: var(--el-accent-soft); margin-bottom: var(--gb-space-2);
}
.gb-support i { color: #e0245e; font-size: 1.2rem; }
.gb-support strong { display: block; font-size: var(--gb-text-sm); color: var(--el-ink); }
.gb-support small { display: block; font-size: var(--gb-text-xs); color: var(--el-ink-soft); }
.gb-lang { display: flex; gap: var(--gb-space-2); }
.gb-lang-btn {
  flex: 1; text-align: center; padding: .5rem; border-radius: 10px;
  border: 1px solid var(--el-line); background: var(--el-card);
  color: var(--el-ink-soft); text-decoration: none; font-size: var(--gb-text-sm); font-weight: 500;
}
.gb-lang-btn.is-active, .gb-lang-btn.active { background: var(--el-accent-soft); color: var(--el-accent); border-color: var(--el-accent); font-weight: 600; }
.gb-lang-btn:hover { border-color: var(--el-accent); }
.gb-lang-btn { cursor: pointer; }

/* ---- CENTER chat ---- */
.gb-chat-main { display: flex; flex-direction: column; min-width: 0; }
.gb-chat-head {
  display: flex; align-items: center; gap: var(--gb-space-3);
  padding: var(--gb-space-3) var(--gb-space-4); border-bottom: 1px solid var(--el-line);
}
.gb-chat-head .head-avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--el-accent-soft); display: flex; align-items: center; justify-content: center;
}
/* anchor the mascot to the bottom of the circle so it sits snug, not floating */
.gb-chat-head .head-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.gb-chat-head .head-who { display: flex; flex-direction: column; line-height: 1.25; }
.gb-chat-head .title { font-weight: 700; font-size: var(--gb-text-lg); color: var(--el-ink); }
.gb-chat-head .sub { font-size: var(--gb-text-sm); color: var(--el-ink-soft); display: flex; align-items: center; gap: .4rem; }
.gb-chat-head .status-dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--gb-green-500);
  box-shadow: 0 0 0 3px rgb(40 199 111 / .2); display: inline-block;
}
.gb-chat-head .spacer { flex: 1; }
.gb-official-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--gb-text-xs); font-weight: 600;
  color: var(--el-accent); background: var(--el-accent-soft);
  padding: .35rem .7rem; border-radius: 999px; white-space: nowrap;
}
.gb-official-badge i { font-size: 1rem; }
@media (max-width: 560px) { .gb-official-badge span { display: none; } }
.gb-side-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--el-line);
  background: var(--el-card); border-radius: 10px; cursor: pointer; font-size: 1.2rem; color: var(--el-ink); }

.gb-chat-log {
  flex: 1; overflow-y: auto; list-style: none; margin: 0;
  padding: var(--gb-space-5) var(--gb-space-5);
  display: flex; flex-direction: column; gap: var(--gb-space-4);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .gb-chat-log { scroll-behavior: auto; } }
.gb-chat-log > li { list-style: none; }

@keyframes gb-rise { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none;} }
.gb-msg { display: flex; gap: var(--gb-space-3); max-width: 720px; animation: gb-rise .26s ease both; }
@media (prefers-reduced-motion: reduce) { .gb-msg { animation: none; } }
.gb-msg--bot  { align-self: flex-start; }
.gb-msg--user { align-self: flex-end; flex-direction: row-reverse; }

.gb-msg-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--el-accent-soft); display: flex; align-items: center; justify-content: center;
}
.gb-msg-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.gb-bubble-wrap { min-width: 0; display: flex; flex-direction: column; }
.gb-msg--user .gb-bubble-wrap { align-items: flex-end; }

.gb-bubble {
  padding: .8rem 1rem; border-radius: 14px; line-height: 1.55;
  word-wrap: break-word; overflow-wrap: break-word; font-size: var(--gb-text-base);
}
.gb-msg--bot .gb-bubble {
  background: var(--el-bot); color: var(--el-ink);
  border: 1px solid var(--el-bot-line);
  border-radius: 18px 18px 18px 6px;
}
.gb-msg--user .gb-bubble {
  background: var(--el-user); color: #fff;
  border: 1px solid transparent;
  border-radius: 18px 18px 6px 18px;
}
.gb-bubble-text { margin: 0; }
.gb-bubble-text p { margin: 0 0 .5rem; } .gb-bubble-text p:last-child { margin: 0; }
.gb-pii-note { display: flex; gap: .35rem; align-items: flex-start; margin: .45rem 0 0; padding-top: .4rem;
  border-top: 1px solid rgb(255 255 255 / .25); font-size: .875rem; line-height: 1.4; opacity: .9; }
.gb-pii-note .ti { flex: none; margin-top: .1rem; }
.gb-bubble-text a { color: var(--el-accent); font-weight: 600; }
.gb-msg--user .gb-bubble-text a { color: #d9d4ff; }

.gb-msg-meta { font-size: var(--gb-text-xs); color: var(--el-ink-soft); margin-top: .3rem; }
.gb-msg-actions { display: flex; gap: var(--gb-space-2); margin-top: .3rem; }
.gb-icon-btn {
  border: none; background: transparent; cursor: pointer; width: 30px; height: 30px;
  border-radius: 8px; color: var(--el-ink-soft); font-size: .95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.gb-icon-btn:hover { background: var(--el-canvas); color: var(--el-accent); }
.gb-icon-btn.is-done { color: var(--gb-green-600); }
.gb-msg-image img { max-width: 280px; border-radius: 12px; cursor: pointer; border: 1px solid var(--el-line); }
.gb-ref { margin-top: var(--gb-space-2); display: inline-block; }

.gb-table { width: 100%; border-collapse: collapse; margin: var(--gb-space-2) 0; }
.gb-table th, .gb-table td { border: 1px solid var(--el-line); padding: .5rem .7rem; text-align: left; font-size: var(--gb-text-sm); }
.gb-table thead th { background: var(--el-accent-soft); font-weight: 600; }

/* typing */
.gb-typing { display: inline-flex; align-items: center; gap: 4px; }
.gb-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--el-accent); animation: gb-bounce 1.2s infinite ease-in-out; }
.gb-typing span:nth-child(2){animation-delay:.15s} .gb-typing span:nth-child(3){animation-delay:.3s}
@keyframes gb-bounce { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-5px);opacity:1} }
@media (prefers-reduced-motion: reduce) { .gb-typing span { animation: none; } }

/* welcome */
.gb-welcome { text-align: center; padding: var(--gb-space-7) var(--gb-space-4); max-width: 560px; margin: auto; animation: gb-rise .4s ease both; }
.gb-welcome .mascot { width: 84px; height: 84px; border-radius: 22px; background: var(--el-accent-soft);
  margin: 0 auto var(--gb-space-4); display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* welcome mascot: fill the box and sit snug against the bottom edge */
.gb-welcome .mascot { align-items: flex-end !important; }
.gb-welcome .mascot img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.gb-welcome h1 { font-size: var(--gb-text-2xl); margin: 0 0 var(--gb-space-2); color: var(--el-ink); }
.gb-welcome p { color: var(--el-ink-soft); margin: 0 auto var(--gb-space-5); max-width: 32rem; }
.gb-suggestions { display: flex; flex-wrap: wrap; gap: var(--gb-space-2); justify-content: center; }
.gb-suggestion {
  border: 1px solid var(--el-line); background: var(--el-card); color: var(--el-ink);
  border-radius: 999px; padding: .6rem 1.1rem; min-height: 44px; font: inherit; font-size: var(--gb-text-sm);
  cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
}
.gb-suggestion:hover { border-color: var(--el-accent); background: var(--el-accent-soft); transform: translateY(-1px); }

/* reply buttons under an answer (offer_choices) */
.gb-choices { display: flex; flex-wrap: wrap; gap: var(--gb-space-2); margin-top: var(--gb-space-3); }
.gb-choice {
  border: 1px solid var(--el-accent); background: var(--el-card); color: var(--el-accent);
  border-radius: 999px; padding: .5rem 1rem; min-height: 40px; font: inherit; font-size: var(--gb-text-sm);
  font-weight: 600; text-align: left; cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.gb-choice:hover:not(:disabled) { background: var(--el-accent-soft); transform: translateY(-1px); }
.gb-choice:focus-visible { outline: 2px solid var(--el-accent); outline-offset: 2px; }
.gb-choices.is-used .gb-choice { border-color: var(--el-line); color: var(--el-ink-soft); cursor: default; }
.gb-choices.is-used .gb-choice.is-picked { border-color: var(--el-accent); background: var(--el-accent-soft); color: var(--el-accent); }

/* composer — pill, like the reference */
.gb-chat-composer { padding: var(--gb-space-3) var(--gb-space-4) var(--gb-space-4); }
.gb-chat-disclaimer {
  text-align: center; font-size: var(--gb-text-xs); color: var(--el-ink-soft);
  margin: var(--gb-space-2) auto 0; max-width: 720px; line-height: 1.4;
}
.gb-chat-form {
  display: flex; align-items: flex-end; gap: var(--gb-space-2);
  background: var(--el-canvas); border: 1px solid var(--el-line);
  border-radius: 999px; padding: .35rem .35rem .35rem 1.1rem;
  transition: border-color .15s, box-shadow .15s;
}
:root[data-theme="dark"] .gb-chat-form { background: var(--el-card); }
.gb-chat-form:focus-within { border-color: var(--el-accent); box-shadow: 0 0 0 3px rgb(108 92 231 / .12); }
.gb-chat-input {
  flex: 1; border: none; background: transparent; resize: none; font: inherit;
  font-size: var(--gb-text-base); color: var(--el-ink); padding: .55rem 0; max-height: 160px; line-height: 1.4;
  overflow-y: auto;
}
.gb-chat-form.is-multiline { border-radius: 18px; }
.gb-chat-input:focus-visible { outline: none; box-shadow: none; }
.gb-chat-send {
  flex-shrink: 0; width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--el-accent); color: #fff; cursor: pointer; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .12s, opacity .15s;
}
.gb-chat-send:hover:not(:disabled) { transform: scale(1.06); }
.gb-chat-send:disabled { opacity: .5; cursor: default; }
/* typing/status ABOVE the input; empty by default so it takes no space */
.gb-chat-status { min-height: 0; padding: 0 var(--gb-space-3);
  font-size: var(--gb-text-sm); color: var(--el-ink-soft); display: flex; align-items: center; gap: var(--gb-space-2); }
.gb-chat-status:not(:empty) { min-height: 1.5rem; margin-bottom: var(--gb-space-2); }

/* ---- RIGHT panel: user's cases / quick help ---- */
.gb-aside-right { }
.gb-aside-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--gb-space-4); border-bottom: 1px solid var(--el-line);
}
.gb-aside-head .title { font-weight: 700; color: var(--el-ink); }
.gb-aside-head a { font-size: var(--gb-text-sm); color: var(--el-accent); text-decoration: none; font-weight: 600; }
.gb-aside-scroll { overflow-y: auto; padding: var(--gb-space-4); flex: 1; }
.gb-aside-card {
  border: 1px solid var(--el-line); border-radius: 12px; padding: var(--gb-space-4);
  margin-bottom: var(--gb-space-3);
}
.gb-aside-card h3 { font-size: var(--gb-text-sm); margin: 0 0 var(--gb-space-2); color: var(--el-ink); }
.gb-aside-card p { font-size: var(--gb-text-sm); color: var(--el-ink-soft); margin: 0 0 var(--gb-space-3); }
.gb-aside-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gb-space-2);
  background: var(--el-accent); color: #fff; text-decoration: none; font-weight: 600;
  border-radius: 999px; padding: .55rem 1.1rem; min-height: 42px; width: 100%;
}
.gb-aside-cta:hover { filter: brightness(1.05); }

/* mobile slide-over for left sidebar */
@media (max-width: 860px) {
  .gb-side {
    position: fixed; inset: 0 auto 0 0; width: 84vw; max-width: 320px; z-index: 60;
    border-radius: 0; transform: translateX(-100%); transition: transform .25s ease;
  }
  .gb-chat.side-open .gb-side { transform: translateX(0); box-shadow: var(--gb-shadow-lg); }
  .gb-side-backdrop { display: none; position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / .4); }
  .gb-chat.side-open .gb-side-backdrop { display: block; }
  .gb-side-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .gb-chat-main { border-radius: 0; border: none; }
}
@media (prefers-reduced-motion: reduce) { .gb-side { transition: none; } }

/* lightbox */
.gb-lightbox { position: fixed; inset: 0; z-index: 2000; cursor: zoom-out; background: rgb(0 0 0 / .8);
  display: flex; align-items: center; justify-content: center; padding: var(--gb-space-5); }
.gb-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--gb-radius); }

/* Case cards inside a bot message.
   Status is carried by a coloured dot plus its label, never by a filled
   background: tinted blocks read as system warnings, and this is somebody's
   immigration case, not an error state. The card stays a calm white surface. */
.gb-casecards {
  display: flex; flex-direction: column; gap: var(--gb-space-2);
  margin-top: var(--gb-space-3);
  width: 100%; max-width: 560px;
}
.gb-casecard {
  border: 1px solid var(--el-line);
  border-radius: 16px;
  padding: var(--gb-space-4);
  background: var(--el-card);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media (prefers-reduced-motion: reduce) { .gb-casecard { transition: none; } }
.gb-casecard:hover {
  border-color: var(--el-line-strong, #dcdce6);
  box-shadow: 0 6px 20px rgba(24, 22, 43, .07);
  transform: translateY(-1px);
}

.gb-casecard-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gb-space-3); flex-wrap: wrap;
}
.gb-casecard-form {
  font-weight: 650; color: var(--el-ink); font-size: var(--gb-text-base);
  letter-spacing: -.01em;
}
.gb-casecard-receipt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--gb-text-xs); color: var(--el-ink-soft);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* status line: dot + text, colour-coded but low-key */
.gb-casecard-status {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: var(--gb-space-3);
  font-size: var(--gb-text-sm); font-weight: 550; line-height: 1.45;
  color: var(--gb-casecard-tone, var(--el-ink));
}
.gb-casecard-dot {
  width: .5rem; height: .5rem; border-radius: 50%; flex: none;
  margin-top: .45em;
  background: var(--gb-casecard-tone, var(--el-accent));
  box-shadow: 0 0 0 3px var(--gb-casecard-halo, transparent);
}
.gb-casecard--success { --gb-casecard-tone: #0f7a45; --gb-casecard-halo: rgba(34, 178, 104, .14); }
.gb-casecard--danger  { --gb-casecard-tone: #b3253f; --gb-casecard-halo: rgba(224, 36, 94, .13); }
.gb-casecard--warn    { --gb-casecard-tone: #9a6510; --gb-casecard-halo: rgba(224, 160, 32, .16); }
.gb-casecard--info    { --gb-casecard-tone: #4b46b8; --gb-casecard-halo: rgba(115, 103, 240, .14); }

.gb-casecard-foot {
  font-size: var(--gb-text-xs); color: var(--el-ink-faint, var(--el-ink-soft));
  margin-top: var(--gb-space-2); opacity: .85;
}

:root[data-theme="dark"] .gb-casecard:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .gb-casecard--success { --gb-casecard-tone: #5fd497; --gb-casecard-halo: rgba(34, 178, 104, .22); }
:root[data-theme="dark"] .gb-casecard--danger  { --gb-casecard-tone: #f08a9e; --gb-casecard-halo: rgba(224, 36, 94, .22); }
:root[data-theme="dark"] .gb-casecard--warn    { --gb-casecard-tone: #f0bc5c; --gb-casecard-halo: rgba(224, 160, 32, .22); }
:root[data-theme="dark"] .gb-casecard--info    { --gb-casecard-tone: #9d94ff; --gb-casecard-halo: rgba(115, 103, 240, .22); }

/* magic-link dialog */
.gb-dialog { border: none; border-radius: 20px; padding: 0; max-width: 26rem; width: 92vw;
  box-shadow: var(--gb-shadow-lg); background: var(--el-card); color: var(--el-ink); }
.gb-dialog::backdrop { background: rgb(20 20 27 / .5); backdrop-filter: blur(2px); }
.gb-dialog-inner { padding: var(--gb-space-6); text-align: center; position: relative;
  display: flex; flex-direction: column; align-items: center; }
.gb-dialog-close { position: absolute; top: var(--gb-space-3); right: var(--gb-space-3);
  border: none; background: transparent; color: var(--el-ink-soft); cursor: pointer; font-size: 1.2rem;
  width: 36px; height: 36px; border-radius: 10px; }
.gb-dialog-close:hover { background: var(--el-canvas); color: var(--el-ink); }
.gb-dialog-icon { width: 60px; height: 60px; border-radius: 18px; background: var(--el-accent-soft);
  color: var(--el-accent); display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin-bottom: var(--gb-space-4); }
.gb-dialog h2 { font-size: var(--gb-text-xl); margin: 0 0 var(--gb-space-1); color: var(--el-ink); }
.gb-dialog-lead { color: var(--el-accent) !important; font-weight: 600; margin: 0 0 var(--gb-space-3) !important; }
.gb-dialog p { color: var(--el-ink-soft); margin: 0 0 var(--gb-space-4); font-size: var(--gb-text-sm); line-height: 1.55; }
.gb-dialog input { width: 100%; min-height: 48px; padding: 0 var(--gb-space-4);
  border: 1.5px solid var(--el-line); border-radius: 12px; font: inherit; font-size: var(--gb-text-base);
  background: var(--el-canvas); color: var(--el-ink); margin-bottom: var(--gb-space-3); }
:root[data-theme="dark"] .gb-dialog input { background: var(--el-card); }
.gb-dialog input:focus-visible { outline: none; border-color: var(--el-accent); box-shadow: 0 0 0 3px rgb(108 92 231 / .12); }
.gb-dialog-msg { min-height: 1.2rem; font-size: var(--gb-text-sm); margin-bottom: var(--gb-space-2); }
.gb-dialog-msg .ok { color: var(--gb-green-600); font-weight: 600; }
.gb-dialog-msg .err { color: var(--gb-danger-fg); font-weight: 600; }
.gb-dialog-submit { width: 100%; min-height: 48px; border: none; border-radius: 999px;
  background: var(--el-accent); color: #fff; font: inherit; font-weight: 600; font-size: var(--gb-text-base);
  cursor: pointer; }
.gb-dialog-submit:hover:not(:disabled) { filter: brightness(1.06); }
.gb-dialog-submit:disabled { opacity: .6; cursor: default; }

/* Divider marking where a restored conversation resumes. */
.gb-resume-mark {
  display: flex; align-items: center; gap: var(--gb-space-3);
  margin: var(--gb-space-2) 0 var(--gb-space-1);
  color: var(--el-ink-soft); font-size: var(--gb-text-xs);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.gb-resume-mark::before, .gb-resume-mark::after {
  content: ""; flex: 1; height: 1px; background: var(--el-line);
}

/* "New" badge on a sidebar item. The packet builder is the newest tool and the
   least discoverable -- nobody is looking for something they do not know
   exists -- so it gets a tint and a label until it stops being new. */
.gb-side-link.is-new {
  background: linear-gradient(90deg, rgba(34,178,104,.10), rgba(115,103,240,.10));
  border: 1px solid rgba(115,103,240,.22);
  border-radius: 10px;
}
.gb-side-link.is-new:hover { border-color: rgba(115,103,240,.4); }

.gb-new-badge {
  margin-left: auto;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .12rem .4rem;
  border-radius: 999px;
  background: var(--el-accent, #7367f0);
  color: #fff;
  flex: none;
}

/* `hidden` is an attribute, and any explicit `display` overrides it: the menu
   links declare `display: flex`, so hiding one from the HTML did nothing --
   the log-out button showed up with no session. */
[hidden] { display: none !important; }

/* ---- App menu, 2026-10 ----------------------------------------------------
   One menu on every page (templates/_app_sidebar.html). */

/* A little air between items: the bordered "new" item sat flush against the
   highlighted one below it. */
.gb-side-link + .gb-side-link,
.gb-side-link + .gb-side-group-toggle { margin-top: 3px; }
.gb-side-link.is-new { margin: 6px 0; }

/* "USCIS resources" folds away: these links leave GreenBro, so they only show
   when someone opens them. */
.gb-side-group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  margin-top: var(--gb-space-3); padding: .55rem var(--gb-space-3);
  border: none; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--gb-text-xs); font-weight: 600; letter-spacing: .02em;
  color: var(--el-ink-soft);
}
.gb-side-group-toggle:hover { background: var(--el-canvas); color: var(--el-ink); }
.gb-side-group-toggle i { transition: transform .2s ease; font-size: 1rem; }
.gb-side-group-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.gb-side-group { padding-left: var(--gb-space-2); }
.gb-side-link .ext { margin-left: auto; font-size: .85rem; opacity: .55; }
/* One level under a menu item ("Fill out forms" > "N-400"). */
.gb-side-sub { margin: 2px 0 0 1.35rem; padding-left: .35rem; border-left: 1px solid var(--el-line); }
.gb-side-sub[hidden] { display: none; }
.gb-side-split { display: flex; align-items: center; gap: 2px; }
.gb-side-split .gb-side-link { flex: 1 1 auto; min-width: 0; }
.gb-side-sub-toggle { flex: none; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none; color: var(--el-ink-soft); cursor: pointer; }
.gb-side-sub-toggle:hover { background: var(--el-canvas); color: var(--el-ink); }
.gb-side-sub-toggle i { transition: transform .2s ease; font-size: 1rem; }
.gb-side-sub-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.gb-side-sub .gb-side-link { font-size: .8125rem; padding-top: .35rem; padding-bottom: .35rem; }
.gb-side-sub .gb-side-link .ico { font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .gb-side-group-toggle i, .gb-side-sub-toggle i { transition: none; } }

/* "Track my case" while this browser holds a session: a green note under the
   label, so a signed-in person sees at a glance that their cases are there. */
.gb-side-label { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.gb-session-note {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: 2px;
  font-size: .72rem; font-weight: 600; color: #15803d;
}
.gb-session-note .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 3px rgb(34 197 94 / .18); }
:root[data-theme="dark"] .gb-session-note { color: #6ee7a0; }
.gb-side-link.has-session:not(.is-active) { color: var(--el-ink); }

/* Account row in the menu's foot (signed in only): who you are on the left,
   log out on the right -- away from the links so it is not hit by mistake. */
.gb-account {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gb-space-2);
  margin-bottom: var(--gb-space-3); padding: .5rem .6rem .5rem .75rem;
  border: 1px solid var(--el-line); border-radius: 12px; background: var(--el-canvas);
}
.gb-account[hidden] { display: none; }
.gb-account-who { display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--gb-text-xs); font-weight: 600; color: #15803d; }
.gb-account-who .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 3px rgb(34 197 94 / .18); }
:root[data-theme="dark"] .gb-account-who { color: #6ee7a0; }
.gb-account-out {
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem;
  border: 1px solid var(--el-line); border-radius: 8px; background: var(--el-card);
  font: inherit; font-size: var(--gb-text-xs); font-weight: 600; color: var(--el-ink-soft); cursor: pointer;
}
.gb-account-out:hover, .gb-account-out:focus-visible { color: #b42318; border-color: #f4a4a0; background: #fef3f2; }
:root[data-theme="dark"] .gb-account-out:hover { color: #fda29b; background: rgb(180 35 24 / .15); border-color: rgb(253 162 155 / .4); }

/* ---- App menu, compact (2026-10) -----------------------------------------
   The menu was sized like a touch keypad (44px rows, 15px text, 268px wide,
   two-line labels, a boxed "new" item) and read as zoomed in. Denser, calmer
   navigation, as in most app sidebars: 36px rows, 14px text, 18px icons,
   one line per item, small uppercase section titles, an accent bar on the
   active item and a compact footer. */
@media (min-width: 861px) { .gb-chat { grid-template-columns: 264px minmax(0,1fr); } }  /* desktop only: on phones the menu is a drawer */
.gb-side-brand { padding: .85rem 1rem .5rem; font-size: 1.0625rem; gap: .6rem; }
.gb-side-brand .logo { width: 30px; height: 30px; }
.gb-side-brand .logo--heart i { font-size: 1rem; }
.gb-side-scroll { padding: 0 .6rem .6rem; }
.gb-side-section {
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--el-ink-soft); opacity: .8; padding: .9rem .6rem .35rem;
}
.gb-side-link {
  position: relative; min-height: 36px; padding: .4rem .6rem; gap: .55rem;
  border-radius: 8px; font-size: .875rem; font-weight: 500; color: #4b4b5a;
}
:root[data-theme="dark"] .gb-side-link { color: var(--el-ink-soft); }
.gb-side-link > span:not(.gb-new-badge):not(.gb-side-label),
.gb-side-label > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-side-link .ico { font-size: 1.125rem; width: 1.25rem; flex: none; opacity: .85; }
.gb-side-link.is-active { font-weight: 600; }
.gb-side-link.is-active .ico { opacity: 1; }
.gb-side-link.is-active::before {
  content: ""; position: absolute; left: -.6rem; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--el-accent);
}
.gb-side-link + .gb-side-link, .gb-side-link + .gb-side-group-toggle { margin-top: 2px; }
/* "New" is now just the badge: the tinted box made the item the heaviest
   thing in the menu. */
.gb-side-link.is-new { background: none; border: 0; margin: 2px 0 0; }
.gb-side-link.is-new.is-active { background: var(--el-accent-soft); }
.gb-new-badge { font-size: .5rem; padding: .08rem .32rem; letter-spacing: .04em; }
.gb-session-note { font-size: .6875rem; }
.gb-side-group-toggle { margin-top: .6rem; padding: .45rem .6rem; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .07em; }
/* Footer: one-line support link and a small segmented language switch. */
.gb-side-foot { padding: .6rem; }
.gb-support { padding: .5rem .6rem; gap: .55rem; border-radius: 10px; margin-bottom: .5rem; }
.gb-support i { font-size: 1rem; }
.gb-support strong { font-size: .8125rem; }
.gb-support small { font-size: .6875rem; }
.gb-account { margin-bottom: .5rem; padding: .35rem .45rem .35rem .6rem; border-radius: 10px; }
.gb-lang { gap: 2px; padding: 3px; border: 1px solid var(--el-line-strong); border-radius: 10px; background: var(--el-canvas); }
.gb-lang-btn { padding: .3rem .4rem; border: 0; border-radius: 7px; font-size: .8125rem; background: transparent; }
.gb-lang-btn.is-active, .gb-lang-btn.active { background: var(--el-card); color: var(--el-accent);
  box-shadow: 0 1px 2px rgb(20 20 40 / .12); border: 0; }
.gb-lang-btn:hover { color: var(--el-ink); }
.gb-account-who, .gb-account-out { white-space: nowrap; }
.gb-account-who { font-size: .75rem; }
.gb-account-out { font-size: .75rem; padding: .25rem .5rem; }

/* ---- App menu: the landing page's pastel gradient (2026-10) ---------------
   White on white read as pale and flat; a dark purple block competed with the
   content. The menu takes the colours of the landing hero instead (lavender
   to blush, a touch of mint), with dark text, purple icons and the active
   item as a white card. A night version of the same gradient in dark mode. */
.gb-side.gb-panel {
  border-color: #e3dcf6;
  background:
    radial-gradient(90% 45% at 0% 100%, rgb(40 199 111 / .13) 0%, transparent 70%),
    radial-gradient(100% 50% at 100% 0%, rgb(255 255 255 / .75) 0%, transparent 60%),
    linear-gradient(165deg, #ebe6fc 0%, #f2e9f9 50%, #fbe6eb 100%);
  --side-ink: #3d3856; --side-strong: #2f2b45; --side-soft: #6a6585; --side-label: #7d72c4;
  --side-icon: #6c5fe0; --side-line: #e3dcf6; --side-hover: rgb(255 255 255 / .6);
  --side-card: #ffffff; --side-glass: rgb(255 255 255 / .7); --side-active-ink: #4b3fb0;
  --side-ok: #15803d;
}
:root[data-theme="dark"] .gb-side.gb-panel {
  border-color: #3a3150;
  background:
    radial-gradient(90% 45% at 0% 100%, rgb(40 199 111 / .10) 0%, transparent 70%),
    radial-gradient(100% 50% at 100% 0%, rgb(167 139 250 / .14) 0%, transparent 60%),
    linear-gradient(165deg, #231d3b 0%, #2a2142 50%, #321f35 100%);
  --side-ink: #ddd8ef; --side-strong: #f1eefa; --side-soft: #a9a2c4; --side-label: #a99ff0;
  --side-icon: #b4a9ff; --side-line: #3a3150; --side-hover: rgb(255 255 255 / .07);
  --side-card: rgb(255 255 255 / .10); --side-glass: rgb(255 255 255 / .06); --side-active-ink: #ffffff;
  --side-ok: #86efac;
}
.gb-side .gb-side-brand { color: var(--side-strong); }
.gb-side .gb-side-brand .logo--heart { background: var(--side-card); }
.gb-side .gb-side-brand .logo--heart i { color: #e0245e; }
.gb-side .gb-side-section, .gb-side .gb-side-group-toggle { color: var(--side-label); opacity: 1; }
.gb-side .gb-side-group-toggle:hover { background: var(--side-hover); color: var(--side-active-ink); }
.gb-side .gb-side-link,
.gb-side .gb-side-link.has-session:not(.is-active),
:root[data-theme="dark"] .gb-side .gb-side-link { color: var(--side-ink); }
.gb-side .gb-side-link .ico { color: var(--side-icon); opacity: 1; }
.gb-side .gb-side-link:hover,
:root[data-theme="dark"] .gb-side .gb-side-link:hover { background: var(--side-hover); color: var(--side-strong); }
.gb-side .gb-side-link.is-active,
:root[data-theme="dark"] .gb-side .gb-side-link.is-active {
  background: var(--side-card); color: var(--side-active-ink);
  box-shadow: 0 2px 8px -2px rgb(80 60 180 / .25);
}
.gb-side .gb-side-link.is-active::before { background: #7367f0; }
.gb-side .gb-side-link .ext { color: var(--side-label); opacity: .8; }
.gb-side .gb-session-note, .gb-side .gb-account-who { color: var(--side-ok); }
.gb-side .gb-side-foot { border-top-color: var(--side-line); }
.gb-side .gb-account { background: var(--side-glass); border-color: var(--side-line); }
.gb-side .gb-account-out { background: var(--side-card); border-color: var(--side-line); color: var(--side-soft); }
.gb-side .gb-account-out:hover, .gb-side .gb-account-out:focus-visible { color: #b42318; border-color: #f4a4a0; background: #fef3f2; }
.gb-side .gb-support { background: var(--side-glass); }
.gb-side .gb-support:hover { background: var(--side-card); }
.gb-side .gb-support strong { color: var(--side-strong); }
.gb-side .gb-support small { color: var(--side-soft); }
.gb-side .gb-lang { background: var(--side-glass); border-color: var(--side-line); }
.gb-side .gb-lang-btn { color: var(--side-soft); }
.gb-side .gb-lang-btn:hover { color: var(--side-strong); }
.gb-side .gb-lang-btn.is-active, .gb-side .gb-lang-btn.active { background: var(--el-accent); color: #fff; }

/* The main panel floats a little above the canvas. */
.gb-chat-main.gb-panel {
  border-color: #e4e1f2;
  box-shadow: 0 18px 40px -18px rgb(45 35 110 / .28), 0 4px 12px -4px rgb(45 35 110 / .10);
}
:root[data-theme="dark"] .gb-chat-main.gb-panel {
  border-color: var(--el-line);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .6), 0 4px 12px -4px rgb(0 0 0 / .4);
}

/* ---- Chat on phones (2026-10) ---------------------------------------------
   The time sat to the left of the user's bubble, wrapped onto two lines and
   took width from the message; the placeholder wrapped and was cut in half;
   the composer sat on the iPhone's home bar. */
@media (max-width: 860px) {
  .gb-msg--user { flex-direction: column; align-items: flex-end; gap: 0; }
  .gb-msg--user .gb-msg-meta { margin-right: .35rem; }
  .gb-msg { max-width: 100%; }
  .gb-msg--user .gb-bubble { max-width: 86vw; }
  #gb-chat-log { padding-left: 1rem; padding-right: 1rem; }
  .gb-chat-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gb-chat-composer { padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }
  .gb-chat-disclaimer { font-size: .72rem; margin-top: .35rem; }
}

/* ---- Line charts (charts.js + templates/_charts.html) ---- */
.gb-chart { margin: .75rem 0 1rem; background: var(--el-card); border: 1px solid var(--el-line-strong);
            border-radius: var(--el-radius); padding: .9rem 1rem .6rem; box-shadow: 0 1px 3px rgb(20 20 40 / .05); }
.gb-chart-title { margin: 0 0 .15rem; font-size: .98rem; font-weight: 700; color: var(--el-ink); }
.gb-chart-sub { margin: 0 0 .5rem; font-size: .84rem; color: var(--el-ink-soft); }
.gb-chart-box { position: relative; height: 250px; }
.gb-chart.tall .gb-chart-box { height: 300px; }
@media (max-width: 560px) { .gb-chart-box { height: 210px; } .gb-chart.tall .gb-chart-box { height: 240px; } }
.gb-chart-data { margin-top: .4rem; font-size: .82rem; }
.gb-chart-data summary { cursor: pointer; color: var(--el-ink-soft); width: max-content; }
.gb-chart-data summary:hover { color: var(--el-accent); }
.gb-chart-data .gb-chart-table { overflow-x: auto; margin-top: .4rem; }
.gb-chart-data table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gb-chart-data th, .gb-chart-data td { padding: .3rem .5rem; border-bottom: 1px solid var(--el-line); text-align: right; white-space: nowrap; }
.gb-chart-data th:first-child, .gb-chart-data td:first-child { text-align: left; }
.gb-charts-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 1rem; }

/* ---- USCIS's official quarterly report: set apart from GreenBro's own data ---- */
.gb-official { --off: #2f6fdf; --off-soft: #edf3ff; margin: 1.5rem 0; padding: 1.1rem 1.15rem .4rem;
               border: 1px solid #c9dafb; border-left: 4px solid var(--off); border-radius: var(--el-radius);
               background: linear-gradient(180deg, var(--off-soft) 0%, var(--el-card) 140px); }
:root[data-theme="dark"] .gb-official { --off: #6d9bf2; --off-soft: #18223a; border-color: #2c3e66; }
.gb-official > h2 { margin-top: .2rem; }
.gb-source-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700;
                 letter-spacing: .02em; text-transform: uppercase; color: var(--off, var(--el-accent));
                 background: var(--el-card); border: 1px solid currentColor; border-radius: 999px; padding: .15rem .6rem; }
.gb-source-tag.ours { color: var(--el-accent); }
.gb-official-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .84rem; color: var(--el-ink-soft); margin: .2rem 0 .8rem; }
.gb-official-meta b { color: var(--el-ink); font-weight: 600; }
.gb-facts { list-style: none; padding: 0; margin: .4rem 0 .9rem; display: grid; gap: .45rem; }
.gb-facts li { display: flex; gap: .55rem; align-items: baseline; font-size: .95rem; }
.gb-facts li i { color: var(--off, var(--el-accent)); flex: none; }
.gb-official .gb-chart { border-color: #d6e2fa; }
:root[data-theme="dark"] .gb-official .gb-chart { border-color: #2c3e66; }

.gb-offices { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed #c9dafb; }
:root[data-theme="dark"] .gb-offices { border-color: #2c3e66; }
.gb-offices-title { font-size: 1rem; margin: 0 0 .25rem; }
.gb-office-pick { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 .8rem; }
.gb-office-pick label { font-weight: 600; font-size: .9rem; }
.gb-office-pick select { min-width: 0; max-width: 100%; flex: 1 1 220px; padding: .45rem .6rem; border-radius: 10px;
                         border: 1.5px solid var(--el-line-strong); background: var(--el-card); color: var(--el-ink); font-size: .92rem; }
.gb-office-pick .gb-chip { cursor: pointer; }

/* ---- "I'll tell you when it changes" (savecase.js) ---- */
.gb-save-card { margin: .8rem 0 .2rem; padding: .85rem 1rem; border-radius: 14px;
                border: 1px solid #a9dcc0; background: linear-gradient(160deg, #effaf4 0%, var(--el-card) 80%); }
:root[data-theme="dark"] .gb-save-card { border-color: #2f6b4a; background: linear-gradient(160deg, #173426 0%, var(--el-card) 80%); }
.gb-save-head { margin: 0 0 .2rem; font-weight: 700; color: var(--el-ink); display: flex; gap: .45rem; align-items: center; }
.gb-save-head i { color: #17a05d; font-size: 1.15rem; }
.gb-save-sub { margin: 0 0 .6rem; font-size: .88rem; color: var(--el-ink-soft); }
.gb-save-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 0; }
.gb-consent-check { flex: 1 1 100%; display: flex; gap: .55rem; align-items: flex-start; margin: .15rem 0 .25rem;
  font-size: .86rem; line-height: 1.45; color: var(--el-ink-soft); cursor: pointer; }
.gb-consent-check input, .gb-save-row .gb-consent-check input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; min-width: 0;
  margin: .15rem 0 0; padding: 0; border: 0; border-radius: 3px; accent-color: var(--el-accent); }
.gb-consent-card .gb-save-sub { color: var(--el-ink); }
.gb-policy-notice { position: fixed; z-index: 60; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  max-width: 420px; padding: 1rem 1.1rem; border-radius: 14px; background: var(--el-card); color: var(--el-ink);
  border: 1px solid var(--el-line-strong); box-shadow: 0 12px 32px rgba(20, 20, 40, .18); font-size: .9375rem; line-height: 1.5; }
.gb-policy-notice[hidden] { display: none; }
.gb-policy-title { display: flex; gap: .5rem; align-items: center; margin: 0 0 .4rem; font-weight: 700; }
.gb-policy-title .ti { color: var(--el-accent); font-size: 1.15rem; }
.gb-policy-notice ul { margin: 0 0 .75rem; padding-left: 1.1rem; }
.gb-policy-notice li { margin: .2rem 0; }
.gb-policy-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.gb-policy-actions a { color: var(--el-accent); font-weight: 600; }
@media (max-width: 640px) { .gb-policy-notice { left: .75rem; right: .75rem; max-width: none; } }
.gb-save-row input, .gb-save-field input { flex: 1 1 200px; min-width: 0; padding: .5rem .7rem; border-radius: 10px;
                     border: 1.5px solid var(--el-line-strong); background: var(--el-card); color: var(--el-ink); font-size: .92rem; }
.gb-save-go { border: 0; border-radius: 10px; padding: .52rem 1rem; font-weight: 600; background: #17a05d; color: #fff; cursor: pointer; }
.gb-save-go:hover { background: #128a4f; }
.gb-save-go:disabled { opacity: .6; cursor: default; }
.gb-save-no { border: 0; background: none; color: var(--el-ink-soft); font-size: .85rem; cursor: pointer; padding: .4rem .3rem; }
.gb-save-no:hover { color: var(--el-ink); text-decoration: underline; }
.gb-save-msg { margin: .4rem 0 0; font-size: .85rem; color: var(--el-ink-soft); min-height: 0; }
.gb-save-msg:empty { display: none; }
.gb-save-done { margin: 0; font-weight: 600; color: #13804a; }
:root[data-theme="dark"] .gb-save-done { color: #6ee7a0; }
.gb-save-done a { color: inherit; }
.gb-save-fields { display: flex; flex-wrap: wrap; gap: .45rem; }
.gb-save-field { display: flex; flex: 1 1 200px; min-width: 0; }
.gb-save-note { margin: .5rem 0 0; font-size: .78rem; color: var(--el-ink-soft); }

/* ---- Long pasted text in a user message (chat.js longBlock) ---- */
.gb-msg--user .gb-bubble.has-long { width: min(560px, 100%); padding: .6rem .7rem .5rem; }
.gb-long-head { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; opacity: .85; margin-bottom: .4rem; }
.gb-long-body { margin: 0; max-height: 7.5em; overflow: hidden; position: relative; white-space: pre-wrap; word-break: break-word;
                font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                background: rgb(255 255 255 / .08); border-radius: 10px; padding: .55rem .65rem;
                -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.gb-long.is-open .gb-long-body { max-height: 22rem; overflow: auto; -webkit-mask-image: none; mask-image: none; }
.gb-long-toggle { margin-top: .35rem; border: 0; background: none; color: #d9d4ff; font-size: .82rem; font-weight: 600; cursor: pointer; padding: .1rem 0; }
.gb-long-toggle:hover { text-decoration: underline; }

/* ---- Charts and the case card inside chat answers (chat.js) ---- */
.gb-chat-chart { margin: .75rem 0 .25rem; max-width: 640px; }
.gb-chat-chart .gb-chart-box { height: 230px; }
.gb-chart-source { margin: .35rem 0 0; font-size: .75rem; color: var(--el-ink-soft); }
.gb-chat-chart.is-official { border-color: #c9dafb; border-left: 4px solid #2f6fdf; }
:root[data-theme="dark"] .gb-chat-chart.is-official { border-color: #2c3e66; border-left-color: #6d9bf2; }

.gb-case-card { --tone: #6c5ce7; margin: .2rem 0 .9rem; max-width: 720px; padding: .85rem 1rem .7rem;
                background: var(--el-card); border: 1px solid var(--el-line-strong); border-left: 4px solid var(--tone);
                border-radius: 14px; box-shadow: 0 1px 3px rgb(20 20 40 / .05); }
.gb-case-card.tone-success { --tone: #17a05d; }
.gb-case-card.tone-danger  { --tone: #d64545; }
.gb-case-card.tone-warn    { --tone: #e08a0b; }
.gb-case-top { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .35rem; }
.gb-case-form, .gb-case-receipt { font-size: .8125rem; font-weight: 700; letter-spacing: .02em; padding: .12rem .5rem;
                                  border-radius: 999px; background: var(--el-canvas); color: var(--el-ink-soft); }
.gb-case-form { background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); }
.gb-case-status { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 700; color: var(--el-ink); line-height: 1.35; }
.gb-case-desc { font-size: 1rem; color: var(--el-ink); line-height: 1.6; }
.gb-case-desc a { color: var(--el-accent); }
.gb-case-history { margin-top: .6rem; border-top: 1px dashed var(--el-line-strong); padding-top: .45rem; }
.gb-case-history summary { cursor: pointer; font-size: .9375rem; color: var(--el-ink-soft); font-weight: 600; }
.gb-case-steps { list-style: none; margin: .5rem 0 0; padding: 0 0 0 .2rem; }
.gb-case-steps li { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; padding: 0 0 .6rem 1.1rem; font-size: .9375rem; line-height: 1.5; }
.gb-case-steps li::before { content: ""; position: absolute; left: 0; top: .35rem; width: .55rem; height: .55rem; border-radius: 50%;
                            background: var(--el-line-strong); }
.gb-case-steps li::after { content: ""; position: absolute; left: .24rem; top: .95rem; bottom: 0; width: 2px; background: var(--el-line); }
.gb-case-steps li:last-child::after { display: none; }
.gb-case-steps li.is-current::before { background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }
.gb-case-steps li.is-current .gb-step-name { font-weight: 700; color: var(--el-ink); }
.gb-step-date { color: var(--el-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gb-step-name { color: var(--el-ink); }
@media (max-width: 560px) { .gb-case-steps li { grid-template-columns: 1fr; gap: 0; } }

/* Chat: when another receipt can be checked (rate_limits.py, chat.js) */
.gb-limit-note {
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--bs-secondary-color, #6c757d);
}