/* ============================================================================
   Claims EDW Explorer — the DexCare.ai app shell
   ----------------------------------------------------------------------------
   Vanilla CSS, self-hosted font, no build step, no CDN.

   The token block below is a faithful port of dexhive-prod-frontend's
   `src/styles/globals.css` (branch chris/feat/nav-ux-redesign-v2) — same HSL
   triplet contract, same names, same light/dark values — so this app renders in
   the same design language as Optimize without pulling in Tailwind. Where
   Tailwind utilities were used in the shell components (Header.tsx, Sidebar.tsx,
   WaffleMenu.tsx) the equivalent values are written out longhand and the source
   component is named in a comment.

   Anything token-shaped should come from here, not a literal. If a value drifts
   from the React shell, fix it here rather than adding a one-off.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;            /* variable */
  font-display: swap;
  src: url("/fonts/geist.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens (mirrors globals.css :root) ----------------------------------- */
:root {
  --background: 214 100% 98%;
  --foreground: 222 47% 11%;

  --muted: 213 27% 93%;
  --muted-foreground: 215 16% 47%;

  --card: 0 0% 100%;
  --card-foreground: var(--foreground);

  --popover: var(--card);
  --popover-foreground: var(--foreground);

  --border: 214 32% 91%;
  --input: var(--border);

  --primary: 221 83% 53%;
  --primary-foreground: 210 40% 98%;

  --secondary: 210 40% 96.1%;
  --secondary-foreground: var(--foreground);

  --accent: 221 70% 95%;
  --accent-foreground: var(--foreground);

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: var(--primary-foreground);

  --ring: var(--primary);

  --radius: 0.75rem;

  --chart-1: var(--primary);
  --chart-2: 262 83% 58%;
  --chart-3: 316 70% 50%;
  --chart-4: 190 90% 50%;
  --chart-5: 48 96% 53%;

  --overlay: rgba(0, 0, 0, 0.5);

  /* House additions — the shell's token set has no success/warning ramp, but a
     data tool needs connection health and the trust-tier labelling the Claims
     connector spec (r2) requires. Same HSL-triplet convention. */
  --success: 142 71% 36%;
  --warning: 38 92% 45%;

  /* Derived geometry (Tailwind: rounded-lg / -md / -sm off --radius) */
  --r-lg: var(--radius);                    /* 12px */
  --r: calc(var(--radius) - 2px);           /* 10px */
  --r-sm: calc(var(--radius) - 4px);        /*  8px */
  --pill: 999px;

  --shadow-sm: 0 1px 2px hsl(222 47% 11% / 0.06);
  --shadow: 0 1px 3px hsl(222 47% 11% / 0.08), 0 8px 24px hsl(222 47% 11% / 0.06);
  --shadow-lg: 0 10px 38px hsl(222 47% 11% / 0.16), 0 3px 10px hsl(222 47% 11% / 0.10);

  --topbar-h: 48px;                         /* Header.tsx: h-12 */
  --rail-w: 58px;                           /* Header.tsx: w-[58px] waffle cell */
  --sidebar-w: 256px;                       /* Sidebar.tsx: SIDEBAR_DEFAULT */
}

:root[data-theme="dark"] {
  --background: 222 47% 11%;
  --foreground: 0 0% 98%;

  --muted-foreground: 215 20% 65%;

  --card: 215 28% 17%;
  --card-foreground: var(--foreground);

  --popover: var(--card);
  --popover-foreground: var(--foreground);

  --muted: var(--card);

  --border: 215 20% 27%;
  --input: var(--border);

  --secondary: var(--card);
  --secondary-foreground: var(--foreground);

  --accent: var(--card);
  --accent-foreground: var(--foreground);

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: var(--foreground);

  --overlay: rgba(0, 0, 0, 0.8);

  --success: 142 61% 52%;
  --warning: 38 92% 58%;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 38px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.55 "Geist", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv01', 'ss01';
}

:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* ============================================================================
   SHELL — top bar + sidebar + content
   ========================================================================== */

.shell { display: flex; flex-direction: column; height: 100vh; }
.shell-body { flex: 1; display: flex; min-height: 0; position: relative; }

/* ---- Top bar (Header.tsx) -------------------------------------------------
   One full-width grey strip. Waffle pinned to the start in a fixed cell the
   width of the collapsed rail, so it sits directly above the rail as one
   column. Then: active-app chip · divider · breadcrumb ····· right cluster. */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
}
.topbar-waffle {
  width: var(--rail-w);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid hsl(var(--border) / 0.7);
  flex-shrink: 0;
}
.topbar-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  min-width: 0;
}
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.topbar-div { width: 1px; height: 20px; background: hsl(var(--border) / 0.7); flex-shrink: 0; }

/* ---- The platform bar sits where our own top bar used to -------------------
   <dex-app-shell> renders the bar in its shadow root and slots our content
   below it. It is a custom element, so without this it is `display: inline`
   and `.shell-body` — now its child rather than `.shell`'s — inherits no
   height at all. That is what broke the sidebar and its collapse.

   The rules below `.shell` still work because this element takes over as the
   column: the bar is its first child and `.shell-body` its second. */
dex-app-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Icon button — the shell's ghost button (Button variant="ghost" size="icon") */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; width: 32px; padding: 0;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.icon-btn:hover { background: hsl(var(--background) / 0.6); color: hsl(var(--foreground)); }
.icon-btn svg { height: 18px; width: 18px; }

/* Waffle trigger — a 3×3 dot grid, dots inherit currentColor (WaffleMenu.tsx) */
.waffle-btn { height: 36px; width: 36px; }
.waffle-glyph { display: grid; grid-template-columns: repeat(3, 3px); gap: 3px; }
.waffle-glyph i { height: 3px; width: 3px; border-radius: 1px; background: currentColor; }

/* Active-app chip — "which app am I in", like AWS's service mark */
.app-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 8px;
  background: transparent; border: none; border-radius: var(--r-sm);
  font: inherit; font-size: 14px; font-weight: 600;
  color: hsl(var(--foreground));
  cursor: pointer; flex-shrink: 0;
}
.app-chip:hover { background: hsl(var(--background) / 0.6); }
.app-chip svg { height: 16px; width: 16px; color: hsl(var(--primary)); }

/* Breadcrumb — in-app path only. Org/tenant are never crumbs (they live in the
   waffle + the sidebar mark). App Shell spec §6. */
.breadcrumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.breadcrumbs .crumb-item {
  color: hsl(var(--muted-foreground));
  background: none; border: none; padding: 0; font: inherit;
  cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.breadcrumbs .crumb-item:hover { color: hsl(var(--foreground)); text-decoration: underline; }
.breadcrumbs .crumb-item.current { color: hsl(var(--foreground)); font-weight: 500; cursor: default; }
.breadcrumbs .crumb-item.current:hover { text-decoration: none; }
.breadcrumbs .sep { color: hsl(var(--muted-foreground) / 0.6); flex-shrink: 0; }

/* Connection health pill */
.health {
  font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: var(--pill);
  background: hsl(var(--background) / 0.6);
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  white-space: nowrap;
}
.health.ok { color: hsl(var(--success)); background: hsl(var(--success) / 0.1); border-color: hsl(var(--success) / 0.25); }
.health.bad { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.1); border-color: hsl(var(--destructive) / 0.28); }

/* User avatar button */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; width: 28px; border-radius: var(--pill);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; flex-shrink: 0;
}
.user-btn { height: 36px; width: 36px; }

/* ---- Sidebar (Sidebar.tsx) ------------------------------------------------
   One left nav for this app. Collapses to an icon rail that expands as a
   floating overlay on hover/focus, matching the React shell's rail behavior. */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex; flex-direction: column;
  background: hsl(var(--card));
  border-right: 1px solid hsl(var(--border));
  transition: width 0.16s ease;
}
.shell.rail .sidebar {
  width: var(--rail-w);
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 30;
}
.shell.rail .sidebar:hover,
.shell.rail .sidebar:focus-within {
  width: var(--sidebar-w);
  box-shadow: var(--shadow-lg);
}
.shell.rail .shell-main { margin-left: var(--rail-w); }

/* Labels fade out in the collapsed rail; icons never move. */
.sidebar .lbl { transition: opacity 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell.rail .sidebar .lbl { opacity: 0; pointer-events: none; }
.shell.rail .sidebar:hover .lbl,
.shell.rail .sidebar:focus-within .lbl { opacity: 1; pointer-events: auto; }

/* Just the collapse control now that the org lives in the platform bar, so it
   hugs the edge instead of floating in the space the org mark used to fill. */
.sidebar-head {
  height: 44px; padding: 0 8px;
  display: flex; align-items: center; justify-content: flex-end;
  flex-shrink: 0;
}
/* Org mark + name. The org is display + audit scope only — the Definitive
   dataset is DexCare-licensed and is not partitioned by tenant. */
.org {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 4px 8px 4px 12px; border-radius: var(--r);
  background: none; border: none; font: inherit; color: hsl(var(--foreground));
  cursor: pointer; text-align: left;
}
.org:hover { background: hsl(var(--muted)); }
.org-mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; width: 18px; border-radius: 5px; flex-shrink: 0;
  background: hsl(var(--primary) / 0.14); color: hsl(var(--primary));
  font-size: 10px; font-weight: 600; text-transform: uppercase;
}
.org-name { font-size: 13px; font-weight: 500; }

/* In the collapsed rail there's only room for the org mark — the collapse
   control reappears when the rail expands on hover/focus (where it acts as the
   "keep open" pin, as in Sidebar.tsx). */
.shell.rail .sidebar-head { padding: 0; justify-content: center; }
.shell.rail #sidebar-collapse { display: none; }
.shell.rail .sidebar:hover .sidebar-head,
.shell.rail .sidebar:focus-within .sidebar-head { padding: 0 8px; justify-content: space-between; }
.shell.rail .sidebar:hover #sidebar-collapse,
.shell.rail .sidebar:focus-within #sidebar-collapse { display: inline-flex; }

.sidebar-search { padding: 0 8px 8px; }
.search-btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--r);
  background: none; border: none; font: inherit; font-size: 13px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.search-btn:hover { background: hsl(var(--muted) / 0.6); color: hsl(var(--foreground)); }
.search-btn svg { height: 18px; width: 18px; flex-shrink: 0; }
.search-btn kbd {
  margin-left: auto; font: inherit; font-size: 11px;
  border: 1px solid hsl(var(--border)); border-radius: 4px;
  padding: 1px 6px; color: hsl(var(--muted-foreground));
}

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px; display: flex; flex-direction: column; gap: 24px; }
.nav-section { display: flex; flex-direction: column; gap: 4px; }
.nav-title {
  margin: 0 0 2px; padding: 0 12px;
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 8px 12px;
  background: none; border: none; border-radius: var(--r);
  font: inherit; font-size: 13px; text-align: left;
  color: hsl(var(--foreground) / 0.85);
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.nav-item svg { height: 18px; width: 18px; flex-shrink: 0; stroke-width: 1.75; }
.nav-item:hover { background: hsl(var(--muted) / 0.7); color: hsl(var(--foreground)); }
.nav-item.active { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); font-weight: 600; }

/* ---- App-specific controls, in our nav rather than the platform bar --------
   Account, theme and the Fabric connection state. These used to be slotted
   into the shared top bar, which put product features inside chrome the
   platform owns — and left them unstyled, so they spilled out of it. */
.sidebar-tools {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; margin-top: auto; flex-shrink: 0;
  border-top: 1px solid hsl(var(--border));
}
.sidebar-user {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 4px; border: 0; border-radius: var(--radius);
  background: transparent; cursor: pointer; text-align: left;
  color: hsl(var(--foreground)); font: inherit; font-size: 13px;
}
.sidebar-user:hover { background: hsl(var(--accent)); }
.sidebar-user .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .health {
  margin: 0 12px 10px; text-align: center;
  overflow: hidden; text-overflow: ellipsis;
}

/* Collapsed rail: only the avatar and the connection dot survive, and they
   centre. The labels come back on hover like every other item here. */
.shell.rail .sidebar-tools { padding: 8px 0; justify-content: center; }
.shell.rail .sidebar-user { flex: 0 0 auto; justify-content: center; gap: 0; }
.shell.rail #theme-toggle { display: none; }
.shell.rail .sidebar .health {
  margin: 0 8px 10px; font-size: 0; padding: 6px; border-radius: 999px;
}
.shell.rail .sidebar:hover .sidebar-tools,
.shell.rail .sidebar:focus-within .sidebar-tools { padding: 8px 12px; justify-content: flex-start; }
.shell.rail .sidebar:hover .sidebar-user,
.shell.rail .sidebar:focus-within .sidebar-user { flex: 1; justify-content: flex-start; gap: 10px; }
.shell.rail .sidebar:hover #theme-toggle,
.shell.rail .sidebar:focus-within #theme-toggle { display: inline-flex; }
.shell.rail .sidebar:hover .health,
.shell.rail .sidebar:focus-within .health {
  margin: 0 12px 10px; font-size: 12px; padding: 4px 10px; border-radius: var(--pill);
}

.sidebar-foot {
  padding: 12px; border-top: 1px solid hsl(var(--border)); flex-shrink: 0;
  display: flex; align-items: center;
}
.shell.rail .sidebar-foot { padding: 12px 0; justify-content: center; }
.sidebar-foot img { height: 24px; width: auto; display: block; }
.sidebar-foot .mark-x { display: none; height: 24px; width: 24px; }
.shell.rail .sidebar-foot .mark-full { display: none; }
.shell.rail .sidebar-foot .mark-x { display: block; }
.shell.rail .sidebar:hover .sidebar-foot .mark-full,
.shell.rail .sidebar:focus-within .sidebar-foot .mark-full { display: block; }
.shell.rail .sidebar:hover .sidebar-foot .mark-x,
.shell.rail .sidebar:focus-within .sidebar-foot .mark-x { display: none; }
.shell.rail .sidebar:hover .sidebar-foot,
.shell.rail .sidebar:focus-within .sidebar-foot { padding: 12px; justify-content: flex-start; }
:root[data-theme="dark"] .sidebar-foot img { filter: brightness(0) invert(1); }

/* ---- Content -------------------------------------------------------------- */
.shell-main { flex: 1; min-width: 0; overflow-y: auto; }
.main-inner { max-width: 1440px; margin: 0 auto; padding: 24px; }
body.chat-view .shell-main { overflow: hidden; }
body.chat-view .main-inner { height: 100%; display: flex; flex-direction: column; }

.tab { display: none; }
.tab.active { display: block; animation: fade 0.18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.page-h { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.page-sub { color: hsl(var(--muted-foreground)); font-size: 13px; margin: 0 0 18px; }

/* ============================================================================
   POPOVERS — waffle launcher, user menu, org menu (Radix Popover equivalent)
   ========================================================================== */
.popover {
  position: fixed; z-index: 60;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: pop 0.12s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Waffle launcher (WaffleMenu.tsx) — two groups: Apps · Manage */
.waffle-panel { width: 340px; }
.waffle-groups { padding: 8px; }
.waffle-group { margin-bottom: 4px; }
.waffle-group:last-child { margin-bottom: 0; }
.waffle-group-title {
  padding: 4px 4px 6px;
  font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground));
}
.waffle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.waffle-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px; border-radius: var(--r);
  background: none; border: none; font: inherit; text-align: center;
  color: hsl(var(--foreground)); cursor: pointer;
  transition: background-color 0.12s;
}
.waffle-tile:hover { background: hsl(var(--muted)); }
.waffle-tile[aria-current="page"] { background: hsl(var(--muted)); box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.4); }
.waffle-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 44px; width: 44px; border-radius: var(--r-lg);
}
.waffle-icon svg { height: 20px; width: 20px; }
.waffle-tile .lbl { font-size: 11px; font-weight: 500; line-height: 1.2; }
.waffle-badge {
  position: absolute; top: -4px; right: -4px;
  height: 14px; width: 14px; border-radius: var(--pill);
  background: hsl(var(--popover));
  display: flex; align-items: center; justify-content: center;
}
.waffle-badge svg { height: 14px; width: 14px; }
.waffle-badge.active { color: hsl(var(--primary)); }
.waffle-badge.external { color: hsl(var(--muted-foreground)); }
.waffle-foot { border-top: 1px solid hsl(var(--border)); padding: 4px; }

/* Tile colors — the Tailwind pairs from PRODUCTS in AppLayout.config.ts,
   written out longhand (bg-<c>-100 text-<c>-600 / dark:bg-<c>-950 text-<c>-300). */
.tile-indigo  { background: #e0e7ff; color: #4f46e5; }
.tile-violet  { background: #ede9fe; color: #7c3aed; }
.tile-teal    { background: #ccfbf1; color: #0d9488; }
.tile-rose    { background: #ffe4e6; color: #e11d48; }
.tile-orange  { background: #ffedd5; color: #ea580c; }
.tile-slate   { background: #e2e8f0; color: #475569; }
.tile-cyan    { background: #cffafe; color: #0891b2; }
.tile-green   { background: #dcfce7; color: #16a34a; }
.tile-amber   { background: #fef3c7; color: #d97706; }
.tile-sky     { background: #e0f2fe; color: #0284c7; }   /* omni — bg-sky-100 / text-sky-600 */
:root[data-theme="dark"] .tile-indigo { background: #1e1b4b; color: #a5b4fc; }
:root[data-theme="dark"] .tile-violet { background: #2e1065; color: #c4b5fd; }
:root[data-theme="dark"] .tile-teal   { background: #042f2e; color: #5eead4; }
:root[data-theme="dark"] .tile-rose   { background: #4c0519; color: #fda4af; }
:root[data-theme="dark"] .tile-orange { background: #431407; color: #fdba74; }
:root[data-theme="dark"] .tile-slate  { background: #1e293b; color: #cbd5e1; }
:root[data-theme="dark"] .tile-cyan   { background: #083344; color: #67e8f9; }
:root[data-theme="dark"] .tile-green  { background: #052e16; color: #86efac; }
:root[data-theme="dark"] .tile-amber  { background: #451a03; color: #fcd34d; }
:root[data-theme="dark"] .tile-sky    { background: #082f49; color: #7dd3fc; }  /* dark:bg-sky-950 / dark:text-sky-300 */

/* Menu rows — waffle footer, user menu, org menu */
.menu { padding: 4px; min-width: 240px; }
.menu-row {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: none; border: none; font: inherit; font-size: 13px; text-align: left;
  color: hsl(var(--foreground)); cursor: pointer;
}
.menu-row:hover { background: hsl(var(--muted)); }
.menu-row svg { height: 16px; width: 16px; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.menu-row .ext { margin-left: auto; opacity: 0.6; }
.menu-sep { height: 1px; background: hsl(var(--border)); margin: 4px 0; }
.menu-head { padding: 10px 12px 8px; }
.menu-head .nm { font-size: 13px; font-weight: 600; }
.menu-head .em { font-size: 12px; color: hsl(var(--muted-foreground)); word-break: break-all; }
.menu-note { padding: 6px 12px 10px; font-size: 11.5px; color: hsl(var(--muted-foreground)); line-height: 1.45; }

/* ============================================================================
   COMMAND PALETTE (⌘K) — CommandPalette.tsx equivalent
   ========================================================================== */
.palette-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: var(--overlay);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.palette {
  width: min(640px, calc(100vw - 32px));
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop 0.12s ease-out;
}
.palette-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid hsl(var(--border));
}
.palette-input-row svg { height: 18px; width: 18px; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.palette-input-row input {
  flex: 1; border: none; background: transparent; padding: 0;
  font: inherit; font-size: 15px; color: hsl(var(--foreground)); min-width: 0;
}
.palette-input-row input:focus { outline: none; box-shadow: none; }
.palette-input-row kbd {
  font: inherit; font-size: 11px; color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border)); border-radius: 4px; padding: 1px 6px;
}
.palette-results { max-height: 52vh; overflow-y: auto; padding: 6px; }
.palette-group-title {
  padding: 8px 10px 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}
.palette-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm);
  background: none; border: none; font: inherit; font-size: 13px; text-align: left;
  color: hsl(var(--foreground)); cursor: pointer;
}
.palette-item svg { height: 16px; width: 16px; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.palette-item .sub { margin-left: auto; font-size: 11.5px; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.palette-item.sel, .palette-item:hover { background: hsl(var(--muted)); }
.palette-item.sel svg { color: hsl(var(--primary)); }
.palette-empty { padding: 24px 16px; text-align: center; color: hsl(var(--muted-foreground)); font-size: 13px; }

/* ============================================================================
   AUTH GATE — the sign-in screen shown before an Auth0 session exists
   ========================================================================== */
.auth-gate {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, hsl(var(--primary) / 0.10), transparent 70%),
    hsl(var(--background));
}
.auth-card {
  width: min(420px, 100%); text-align: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border)); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}
.auth-card img { height: 30px; width: auto; margin-bottom: 22px; }
:root[data-theme="dark"] .auth-card img { filter: brightness(0) invert(1); }
.auth-card h1 { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.auth-card p { margin: 0 0 24px; font-size: 13.5px; color: hsl(var(--muted-foreground)); line-height: 1.55; }
.auth-card button { width: 100%; justify-content: center; }
.auth-error {
  margin-top: 18px; padding: 10px 14px; border-radius: var(--r);
  background: hsl(var(--destructive) / 0.08); color: hsl(var(--destructive));
  border: 1px solid hsl(var(--destructive) / 0.3);
  font-size: 12.5px; text-align: left;
}
.auth-boot { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: hsl(var(--muted-foreground)); font-size: 13px; }

/* ============================================================================
   FORMS / BUTTONS
   ========================================================================== */
.bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

input, textarea, select, button { font: inherit; }
input, textarea, select {
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--input));
  border-radius: var(--r);
  padding: 9px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input { min-width: 180px; }
input.narrow { min-width: 70px; width: 92px; }
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground) / 0.8); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}
textarea { width: 100%; resize: vertical; }

button {
  display: inline-flex; align-items: center; gap: 6px;
  background: hsl(var(--primary));
  border: 1px solid hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: var(--r);
  padding: 9px 16px;
  cursor: pointer; font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
button:hover { background: hsl(var(--primary) / 0.9); border-color: hsl(var(--primary) / 0.9); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.mini {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  padding: 5px 11px; font-size: 12px; font-weight: 500;
  border-radius: var(--r-sm);
}
button.mini:hover { background: hsl(var(--muted)); border-color: hsl(var(--border)); color: hsl(var(--primary)); }

/* Chrome buttons opt out of the primary-button styling above. */
.icon-btn, .waffle-tile, .nav-item, .menu-row, .palette-item, .search-btn,
.org, .app-chip, .crumb-item, .chip {
  background: none; border-color: transparent; color: inherit; font-weight: inherit;
}

.hint { color: hsl(var(--muted-foreground)); font-size: 13px; margin: -2px 0 12px; }
.muted { color: hsl(var(--muted-foreground)); }
code {
  background: hsl(var(--muted)); padding: 1px 6px; border-radius: 4px;
  font-size: 12px; color: hsl(var(--primary));
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.result { margin-top: 8px; }

/* ---- Recent-query chips --------------------------------------------------- */
.recents { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 14px; }
.recents:empty { display: none; }
.recents-label { color: hsl(var(--muted-foreground)); font-size: 12px; margin-right: 2px; }

.chip {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  padding: 6px 12px; border-radius: var(--pill);
  font-size: 12.5px; cursor: pointer; text-align: left;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.chip:hover { background: hsl(var(--primary) / 0.08); border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.chip.sm { padding: 3px 11px; font-size: 12px; }

/* ---- Result grid ---------------------------------------------------------- */
table.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
table.grid th, table.grid td {
  border: 1px solid hsl(var(--border));
  padding: 7px 10px; text-align: left; white-space: nowrap;
  max-width: 360px; overflow: hidden; text-overflow: ellipsis;
}
table.grid th {
  background: hsl(var(--muted)); position: sticky; top: 0;
  color: hsl(var(--foreground)); font-weight: 600;
}
table.grid tbody tr:nth-child(even) td { background: hsl(var(--muted) / 0.35); }
table.grid tbody tr:hover td { background: hsl(var(--primary) / 0.07); }
.grid-wrap {
  overflow: auto; max-height: 65vh;
  border: 1px solid hsl(var(--border)); border-radius: var(--r);
  background: hsl(var(--card));
}

tr.clickable { cursor: pointer; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: hsl(var(--muted)); filter: brightness(0.97); }
.sort-ind { color: hsl(var(--primary)); font-size: 11px; }

.cell-link {
  color: hsl(var(--primary)); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px; font-weight: 500;
}
.cell-link:hover { text-decoration-style: solid; }

.grid-toolbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }

/* ---- Notices -------------------------------------------------------------- */
.notice {
  padding: 10px 14px; border-radius: var(--r); margin-bottom: 10px;
  font-size: 13px; border: 1px solid transparent;
}
.notice.error { background: hsl(var(--destructive) / 0.08); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.3); }
.notice.warn  { background: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.3); }
.notice.info  { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }

/* ---- Trust tiering --------------------------------------------------------
   The Claims Data Connector spec (r2) makes this a hard product rule: clinical
   CPT/ICD-derived facts are high-trust; operational facts (affiliations,
   employment, location, contacts) are frequently stale and must be labelled
   third-party everywhere they are rendered. */
.trust {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  padding: 1px 9px; border-radius: var(--pill);
  border: 1px solid transparent; white-space: nowrap;
}
.trust.clinical { color: hsl(var(--success)); background: hsl(var(--success) / 0.1); border-color: hsl(var(--success) / 0.25); }
.trust.operational { color: hsl(var(--warning)); background: hsl(var(--warning) / 0.12); border-color: hsl(var(--warning) / 0.3); }
.trust-note {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 12px; padding: 9px 13px;
  border-radius: var(--r);
  background: hsl(var(--warning) / 0.1);
  border: 1px solid hsl(var(--warning) / 0.28);
  color: hsl(var(--warning));
  font-size: 12px; line-height: 1.5;
}
.trust-note svg { height: 15px; width: 15px; flex-shrink: 0; margin-top: 1px; }
.card .trust { margin-left: 4px; }

/* ---- Provider dashboard --------------------------------------------------- */
.section-h {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
  margin: 28px 0 14px; border-bottom: 1px solid hsl(var(--border)); padding-bottom: 7px;
}

.id-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.id-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.id-npi { color: hsl(var(--muted-foreground)); font-size: 13px; margin-top: 2px; }
.id-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 4px; }
.id-fact {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--r); padding: 8px 13px; box-shadow: var(--shadow-sm);
}
.id-fact .k {
  color: hsl(var(--muted-foreground)); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em; display: block;
}
.id-fact .v { font-size: 13px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 16px 0 4px; }
.kpi {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.kpi-val { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi-lbl { color: hsl(var(--muted-foreground)); font-size: 12px; margin-top: 4px; }

.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm);
}
.card h4 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-sub { color: hsl(var(--muted-foreground)); font-size: 12px; margin: 2px 0 14px; }
.card.span2 { grid-column: 1 / -1; }

.yr-badge {
  font-size: 11px; font-weight: 500;
  color: hsl(var(--chart-2)); background: hsl(var(--chart-2) / 0.1);
  border: 1px solid hsl(var(--chart-2) / 0.22);
  border-radius: var(--pill); padding: 1px 9px;
}

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: hsl(var(--muted-foreground)); }
.bar-track { background: hsl(var(--muted)); border-radius: var(--r-sm); height: 16px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-sm); min-width: 2px; transition: width 0.3s ease; }
.bar-val { font-variant-numeric: tabular-nums; white-space: nowrap; }

.donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut { width: 160px; height: 160px; flex: 0 0 auto; }
.donut-total { fill: hsl(var(--foreground)); font-size: 18px; font-weight: 600; }
.donut-cap { fill: hsl(var(--muted-foreground)); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.legend { display: flex; flex-direction: column; gap: 5px; font-size: 12px; flex: 1; min-width: 140px; }
.legend-item { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; }
.legend-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: hsl(var(--muted-foreground)); }
.legend-val { font-variant-numeric: tabular-nums; }
.swatch { width: 12px; height: 12px; border-radius: 3px; }

.line-chart { width: 100%; height: auto; }
.line-chart .grid-line { stroke: hsl(var(--border)); stroke-width: 1; }
.line-chart .axis-lbl { fill: hsl(var(--muted-foreground)); font-size: 10px; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.legend-item-inline { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Collapsible collections ---------------------------------------------- */
details.collection {
  margin-bottom: 10px; border: 1px solid hsl(var(--border));
  border-radius: var(--r); padding: 6px 14px; background: hsl(var(--card));
}
details.collection summary {
  cursor: pointer; font-size: 13px; font-weight: 600;
  padding: 7px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
details.collection summary .count { color: hsl(var(--muted-foreground)); font-weight: normal; font-size: 12px; }
details.collection summary .coll-id { margin-left: auto; font-size: 11px; }
details.collection[open] summary { border-bottom: 1px solid hsl(var(--border)); margin-bottom: 8px; }

/* ---- Tables view (split) --------------------------------------------------- */
.split { display: grid; grid-template-columns: 320px 1fr; gap: 18px; }
.table-list {
  max-height: 72vh; overflow: auto;
  border: 1px solid hsl(var(--border)); border-radius: var(--r);
  background: hsl(var(--card));
}
.table-list .row { padding: 9px 12px; border-bottom: 1px solid hsl(var(--border)); cursor: pointer; }
.table-list .row:hover { background: hsl(var(--muted) / 0.6); }
.table-list .row.active { background: hsl(var(--primary) / 0.08); box-shadow: inset 3px 0 0 hsl(var(--primary)); }
.table-list .row .nm { font-size: 12.5px; word-break: break-word; }
.table-list .row .meta { font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 2px; }

.columns { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; font-size: 12px; }
.columns label { display: inline-flex; align-items: center; gap: 4px; color: hsl(var(--muted-foreground)); cursor: pointer; }
.columns label .ty { opacity: 0.6; }

/* ---- Spinner / loader ----------------------------------------------------- */
.spinner { color: hsl(var(--muted-foreground)); padding: 12px 0; }

.loader { max-width: 440px; margin: 56px auto; text-align: center; }
.loader-spin {
  width: 40px; height: 40px; margin: 0 auto 18px;
  border: 3px solid hsl(var(--border)); border-top-color: hsl(var(--primary));
  border-radius: 50%; animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-title { font-size: 15px; font-weight: 600; }
.loader-sub { color: hsl(var(--muted-foreground)); font-size: 13px; margin-top: 5px; min-height: 18px; }
.loader-bar { height: 8px; background: hsl(var(--muted)); border-radius: 5px; overflow: hidden; margin: 18px 0 8px; }
.loader-fill {
  height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--chart-2)));
  transition: width 0.3s ease; background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.loader-meta { display: flex; justify-content: space-between; font-size: 12px; color: hsl(var(--muted-foreground)); }
.loader-elapsed { font-variant-numeric: tabular-nums; }

/* ---- All Data pivot trail -------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 14px; font-size: 13px; }
.breadcrumb:empty { display: none; }
.crumb {
  padding: 4px 11px; border-radius: var(--pill);
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground)); cursor: pointer; font: inherit; font-size: 13px;
}
.crumb:hover { background: hsl(var(--muted)); }
.crumb.current { background: hsl(var(--primary) / 0.08); border-color: hsl(var(--primary)); color: hsl(var(--primary)); cursor: default; font-weight: 500; }
.crumb-sep { color: hsl(var(--muted-foreground)); }

/* ---- History -------------------------------------------------------------- */
.hist-list {
  display: flex; flex-direction: column;
  border: 1px solid hsl(var(--border)); border-radius: var(--r);
  overflow: hidden; background: hsl(var(--card));
}
.hist-row {
  display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); cursor: pointer;
}
.hist-row:last-child { border-bottom: none; }
.hist-row:hover { background: hsl(var(--muted) / 0.6); }
.hist-type {
  font-size: 11px; font-weight: 600; text-align: center;
  padding: 2px 8px; border-radius: var(--pill);
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
}
.hist-type.profile { color: hsl(var(--primary)); }
.hist-type.comparison { color: hsl(var(--chart-2)); }
.hist-type.alldata { color: hsl(var(--success)); }
.hist-type.search { color: hsl(var(--warning)); }
.hist-type.sql { color: hsl(var(--chart-4)); }
.hist-type.assistant { color: hsl(var(--chart-3)); }
.hist-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-time { color: hsl(var(--muted-foreground)); font-size: 12px; white-space: nowrap; }

/* ---- Timeframe selector --------------------------------------------------- */
.timeframe { display: flex; gap: 6px; margin-bottom: 10px; }
button.tf {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  padding: 4px 12px; font-size: 12px; font-weight: 500; border-radius: var(--r-sm);
}
button.tf:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
button.tf.active { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* ============================================================================
   ASK AI (chat)
   ========================================================================== */
.ai-chatbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}
.ai-chatbar .recents { margin: 0; }
.ai-chatbar .recents-label { display: none; }

/* Fills the content area so the composer pins to the bottom and the transcript
   scrolls (body.chat-view stops the outer main from scrolling). */
#tab-assistant.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ai-transcript { flex: 1; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 4px 2px 12px; }

.ai-empty { margin: auto; max-width: 660px; width: 100%; text-align: center; padding: 24px 16px; }
.ai-empty-icon { display: flex; justify-content: center; color: hsl(var(--primary)); }
.ai-empty-icon svg { height: 30px; width: 30px; }
.ai-empty-title { font-size: 22px; font-weight: 600; margin: 12px 0 6px; letter-spacing: -0.02em; }
.ai-empty-sub { color: hsl(var(--muted-foreground)); font-size: 14px; margin: 0 auto; max-width: 520px; }
.ai-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; text-align: left; }
.ai-example {
  padding: 13px 15px; border: 1px solid hsl(var(--border)); border-radius: var(--r-lg);
  background: hsl(var(--card)); cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.4; font-weight: 400;
  color: hsl(var(--foreground)); box-shadow: var(--shadow-sm);
  transition: border-color 0.12s, background-color 0.12s;
}
.ai-example:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.06); }

.ai-msg.user {
  align-self: flex-end;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  padding: 9px 14px; border-radius: 14px 14px 2px 14px;
  max-width: 80%; white-space: pre-wrap; box-shadow: var(--shadow-sm);
}
.ai-msg.assistant {
  align-self: flex-start;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 14px 14px 14px 2px; padding: 14px 18px; width: 100%;
  box-shadow: var(--shadow-sm);
}
.ai-typing { color: hsl(var(--muted-foreground)); font-size: 13px; }
.ai-typing::after { content: ""; animation: dots 1.2s steps(4, end) infinite; }

/* ---- Ask AI progress -----------------------------------------------------
   An answer can sit inside a single tool call for a minute or more. With no
   progress surface, that window looked identical whether the turn was working,
   wedged, or already dead on a dropped connection — which is how people ended
   up firing a second question into a live turn and killing the chat. Every
   state below is therefore explicit and always visible while a turn is open:
   what it is doing, for how long, what it has finished, and whether the stream
   is still connected. */
.ai-progress {
  border: 1px solid hsl(var(--border)); border-radius: var(--r);
  background: hsl(var(--muted) / 0.4); padding: 9px 11px; margin: 2px 0 10px;
  font-size: 13px;
}
.ai-progress-head { display: flex; align-items: center; gap: 9px; }
.ai-progress-dot {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary));
  animation: spin 0.85s linear infinite;
}
.ai-progress-label { flex: 1; min-width: 0; color: hsl(var(--foreground)); }
.ai-progress-time {
  font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground));
  font-size: 12px; flex: none;
}
.ai-progress-conn { margin-top: 7px; font-size: 12px; color: hsl(var(--warning)); }
.ai-progress-conn:empty { display: none; }
.ai-progress-conn button {
  height: 22px; padding: 0 8px; margin-left: 8px; font-size: 11.5px;
  border-radius: 5px; border: 1px solid currentColor; background: transparent; color: inherit;
}

/* Stalled: the stream stopped arriving. The work is very probably still running
   server-side, so this reads as a connection problem, not a failure. */
.ai-progress[data-state="stalled"] {
  border-color: hsl(var(--warning) / 0.45); background: hsl(var(--warning) / 0.08);
}
.ai-progress[data-state="stalled"] .ai-progress-dot { border-top-color: hsl(var(--warning)); }
.ai-progress[data-state="failed"] {
  border-color: hsl(var(--destructive) / 0.35); background: hsl(var(--destructive) / 0.06);
}
.ai-progress[data-state="failed"] .ai-progress-dot,
.ai-progress[data-state="done"] .ai-progress-dot,
.ai-progress[data-state="stopped"] .ai-progress-dot { animation: none; border-top-color: hsl(var(--border)); }
.ai-progress[data-state="failed"] .ai-progress-dot { border-color: hsl(var(--destructive) / 0.6); }
.ai-progress[data-state="done"] { background: none; border-color: transparent; padding: 0; margin-bottom: 8px; }
.ai-progress[data-state="done"] .ai-progress-dot { display: none; }
.ai-progress[data-state="done"] .ai-progress-label,
.ai-progress[data-state="done"] .ai-progress-time { color: hsl(var(--muted-foreground)); font-size: 12px; }

/* The step log: what actually ran, and how long each part took. It is the
   answer to "did it do anything?" after the fact, not only during. */
.ai-steps { margin-top: 8px; }
.ai-steps > summary {
  cursor: pointer; color: hsl(var(--muted-foreground)); font-size: 12px; list-style: none;
}
.ai-steps > summary::before { content: "▸ "; }
.ai-steps[open] > summary::before { content: "▾ "; }
.ai-steps ol { margin: 7px 0 0; padding: 0 0 0 4px; list-style: none; }
.ai-steps li {
  display: flex; gap: 8px; align-items: baseline; font-size: 12px;
  padding: 2px 0; color: hsl(var(--muted-foreground));
}
.ai-step-mark { flex: none; width: 13px; text-align: center; }
.ai-step-mark.ok { color: hsl(var(--chart-6, 160 84% 39%)); }
.ai-step-mark.bad { color: hsl(var(--destructive)); }
.ai-step-name { flex: 1; min-width: 0; color: hsl(var(--foreground)); }
.ai-step-ms { font-variant-numeric: tabular-nums; flex: none; }

/* Streamed reasoning. Collapsed by default — the point is that *something* is
   arriving during a long think, not that anyone must read it. */
details.ai-think { margin: 6px 0 8px; }
details.ai-think > summary { cursor: pointer; color: hsl(var(--muted-foreground)); font-size: 12px; list-style: none; }
details.ai-think > summary::before { content: "▸ "; }
details.ai-think[open] > summary::before { content: "▾ "; }
.ai-think-body {
  margin-top: 6px; padding-left: 10px; border-left: 2px solid hsl(var(--border));
  color: hsl(var(--muted-foreground)); font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; max-height: 220px; overflow-y: auto;
}
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ai-text { font-size: 14px; line-height: 1.6; }
.ai-text p { margin: 0 0 8px; }
.ai-text ul { margin: 4px 0 10px; padding-left: 20px; }
.ai-text li { margin: 2px 0; }
.ai-text .ai-h { font-weight: 600; font-size: 14px; margin: 12px 0 6px; }
.ai-text code { background: hsl(var(--muted)); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.ai-code {
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
  border-radius: var(--r); padding: 10px 12px; overflow: auto;
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
}
.ai-msg .grid-wrap, .ai-msg .card, .ai-msg details.collection { margin: 10px 0; }
details.ai-sql { margin: 8px 0; }
details.ai-sql summary { cursor: pointer; color: hsl(var(--muted-foreground)); font-size: 12px; }
details.ai-sql pre {
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
  border-radius: var(--r); padding: 10px 12px; overflow: auto; font-size: 12px; margin-top: 6px;
}
.ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.ai-composer-wrap { padding-top: 10px; border-top: 1px solid hsl(var(--border)); flex-shrink: 0; }
.ai-composer {
  display: flex; align-items: flex-end; gap: 6px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--input));
  border-radius: var(--r-lg); padding: 7px 8px; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-composer:focus-within { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18); }
.ai-composer textarea { flex: 1; border: none; background: transparent; padding: 8px 6px; min-height: 26px; max-height: 168px; resize: none; }
.ai-composer textarea:focus { outline: none; box-shadow: none; }
.ai-composer .ai-attach {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; width: 36px; border: none; background: transparent;
  border-radius: var(--r); cursor: pointer; color: hsl(var(--muted-foreground));
}
.ai-composer .ai-attach svg { height: 18px; width: 18px; }
.ai-composer .ai-attach:hover { background: hsl(var(--muted)); color: hsl(var(--primary)); }
.ai-composer button#ai-send { height: 36px; border-radius: var(--r); padding: 0 18px; }
.ai-composer button#ai-stop {
  height: 36px; border-radius: var(--r); padding: 0 18px;
  background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive));
  border: 1px solid hsl(var(--destructive) / 0.35);
}
.ai-composer button#ai-stop:hover { background: hsl(var(--destructive) / 0.18); }
.ai-composer.busy textarea { color: hsl(var(--muted-foreground)); }

/* Model is a session choice, so it lives with the chat controls rather than in
   the platform top bar. */
.ai-model { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.ai-model span { font-size: 12px; }
.ai-model select {
  height: 28px; padding: 0 6px; font-size: 12px; border-radius: 6px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: inherit;
}
.ai-hint { font-size: 12px; color: hsl(var(--warning)); margin: 6px 0 0; text-align: center; }
.ai-hint:empty { display: none; }
.ai-disclaimer { text-align: center; color: hsl(var(--muted-foreground)); font-size: 11.5px; margin: 8px 0 0; }

.ai-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-attachments:empty { display: none; }
.att-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
  border-radius: var(--pill); padding: 4px 6px 4px 11px; font-size: 12px;
}
.att-x { background: none; border: none; color: hsl(var(--muted-foreground)); cursor: pointer; padding: 0 4px; font-size: 12px; }
.att-x:hover { color: hsl(var(--destructive)); background: none; }
.att-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.att-chip.mini { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.35); color: #fff; padding: 3px 10px; font-size: 11.5px; }

.ai-file {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 10px 8px 0 0; padding: 8px 14px;
  background: hsl(var(--primary) / 0.08); border: 1px solid hsl(var(--primary));
  border-radius: var(--r); color: hsl(var(--primary));
  font-weight: 600; font-size: 13px; text-decoration: none;
}
.ai-file:hover { background: hsl(var(--primary) / 0.14); }

/* ---- Scrollbars ----------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.45); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .sidebar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 40; transform: translateX(-100%); transition: transform 0.16s ease; box-shadow: var(--shadow-lg); }
  .shell.nav-open .sidebar { transform: none; }
  .shell.rail .sidebar { position: absolute; width: var(--sidebar-w); transform: translateX(-100%); }
  .shell.rail.nav-open .sidebar { transform: none; }
  .shell.rail .shell-main { margin-left: 0; }
  .main-inner { padding: 16px; }
  .split { grid-template-columns: 1fr; }
  .table-list { max-height: 240px; }
  .id-card { flex-direction: column; }
  .bar-row { grid-template-columns: 96px 1fr auto; }
  .ai-msg.user { max-width: 92%; }
  .ai-examples { grid-template-columns: 1fr; }
  .waffle-panel { width: min(340px, calc(100vw - 24px)); }
}
@media (min-width: 901px) { .nav-toggle { display: none; } }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- MCP server page ------------------------------------------------------ */
.mcp-h { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 6px; }
.mcp-lede { color: hsl(var(--muted-foreground)); font-size: 14px; margin: 0 0 16px; max-width: 70ch; }
.mcp-facts { display: grid; grid-template-columns: 128px 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 13px; }
.mcp-facts dt { color: hsl(var(--muted-foreground)); }
.mcp-facts dd { margin: 0; overflow-wrap: anywhere; }
.mcp-facts code, .mcp-tool-name code {
  background: hsl(var(--muted)); padding: 2px 6px; border-radius: 4px; font-size: 12px;
}
.mcp-note { color: hsl(var(--muted-foreground)); font-size: 13px; margin: 0 0 8px; }
.mcp-tools { display: flex; flex-direction: column; gap: 12px; }
.mcp-tool { border-left: 2px solid hsl(var(--border)); padding-left: 12px; }
.mcp-tool-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mcp-tool-title { color: hsl(var(--muted-foreground)); font-size: 12.5px; }
.mcp-tool-desc { font-size: 13px; line-height: 1.55; margin: 5px 0 0; max-width: 78ch; }
.mcp-list { font-size: 13px; line-height: 1.6; margin: 0; padding-left: 20px; }
.mcp-list li { margin: 4px 0; }