/* ============================================================================
   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(1.0625rem, 1rem + 0.3vw, 1.125rem);
    --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-ink:     #1c1c28;   /* main text */
  --el-ink-soft:#6a6a7b;   /* secondary text */
  --el-accent:  #6c5ce7;   /* purple accent (brand #7367f0 family) */
  --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-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-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); }

/* 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: 140px; line-height: 1.4;
}
.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);
}