/* Logic8 Command Centre - design system + polish layer.
   Brand palette per Logic8 style guide. Sam hates em/en dashes - we use plain hyphens. */

/* ==========================================================================
   DESIGN TOKENS - DARK MODE (default)
   ========================================================================== */
:root {
  /* Core brand palette */
  --brand-teal: #00C0A5;
  --brand-cyan: #0190D5;
  --brand-blue: #055EB8;
  --brand-gradient: linear-gradient(135deg, #00C0A5 0%, #0190D5 50%, #055EB8 100%);
  --brand-gradient-reverse: linear-gradient(135deg, #055EB8 0%, #0190D5 50%, #00C0A5 100%);
  --brand-accent-gradient: linear-gradient(135deg, #00C0A5 0%, #0190D5 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(0,192,165,0.16), rgba(1,144,213,0.18) 50%, rgba(5,94,184,0.16));

  /* Brand glows */
  --teal-glow: rgba(0, 192, 165, 0.12);
  --teal-glow-strong: rgba(0, 192, 165, 0.25);
  --blue-glow: rgba(1, 144, 213, 0.12);
  --blue-glow-strong: rgba(1, 144, 213, 0.25);

  /* Accent aliases (existing CSS/JS uses --accent broadly) */
  --accent: #00C0A5;
  --accent-strong: #0190D5;
  --accent-deep: #055EB8;
  --accent-soft: rgba(0, 192, 165, 0.12);
  --accent-glow: rgba(0, 192, 165, 0.30);

  /* Warm accent - Gold */
  --gold: #F5B041;
  --gold-deep: #E89B2C;
  --gold-gradient: linear-gradient(135deg, #F5B041, #E89B2C);
  --gold-soft: rgba(245, 176, 65, 0.12);
  --gold-glow: rgba(245, 176, 65, 0.30);

  /* Special-purpose accents (use 1-3 per page max) */
  --amber: #F59E0B;
  --amber-soft: rgba(245, 158, 11, 0.13);
  --orange: #F97316;
  --orange-soft: rgba(249, 115, 22, 0.13);
  --purple: #8B5CF6;
  --purple-light: #A78BFA;
  --purple-soft: rgba(139, 92, 246, 0.14);

  /* Status */
  --green: #10B981;
  --green-soft: rgba(16, 185, 129, 0.13);
  --red: #EF4444;
  --red-soft: rgba(239, 68, 68, 0.12);

  /* Surfaces */
  --bg-base: #070B16;
  --bg-elevated: #0C1424;
  --bg-card: #11192C;
  --bg-card-hover: #182040;
  --bg-input: #0A1124;
  --bg-overlay: rgba(7, 11, 22, 0.82);
  --bg-subtle: #0E1626;

  --border: #1C2440;
  --border-strong: #2A3354;
  --border-focus: var(--brand-teal);

  /* Text */
  --text-primary: #FFFFFF;
  --text-body: #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-inverse: #0F172A;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 0 1px rgba(0, 192, 165, 0.20), 0 12px 36px rgba(0, 192, 165, 0.18);
  --shadow-brand: 0 10px 28px rgba(1, 144, 213, 0.30);
  --shadow-card-glow: 0 0 0 1px rgba(0, 192, 165, 0.10), 0 16px 40px rgba(1, 144, 213, 0.10);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Transitions */
  --t-fast: 130ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 360ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Fonts */
  --font-sans: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ==========================================================================
   DESIGN TOKENS - LIGHT MODE
   ========================================================================== */
[data-theme='light'] {
  --bg-base: #F8FAFC;
  --bg-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;
  --bg-input: #FFFFFF;
  --bg-overlay: rgba(248, 250, 252, 0.85);
  --bg-subtle: #EEF2F7;

  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --text-primary: #0F172A;
  --text-body: #1E293B;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-inverse: #FFFFFF;

  --teal-glow: rgba(0, 192, 165, 0.10);
  --teal-glow-strong: rgba(0, 192, 165, 0.20);
  --blue-glow: rgba(1, 144, 213, 0.10);

  --accent-soft: rgba(0, 192, 165, 0.10);
  --gold-soft: rgba(245, 176, 65, 0.14);
  --amber-soft: rgba(245, 158, 11, 0.14);
  --orange-soft: rgba(249, 115, 22, 0.13);
  --green-soft: rgba(16, 185, 129, 0.13);
  --red-soft: rgba(239, 68, 68, 0.10);
  --purple-soft: rgba(139, 92, 246, 0.13);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.14), 0 6px 12px rgba(15, 23, 42, 0.05);
  --shadow-glow: 0 0 0 1px rgba(0, 192, 165, 0.22), 0 12px 32px rgba(0, 192, 165, 0.12);
  --shadow-brand: 0 8px 24px rgba(1, 144, 213, 0.18);
  --shadow-card-glow: 0 0 0 1px rgba(0, 192, 165, 0.10), 0 12px 32px rgba(1, 144, 213, 0.06);
}

/* Warm accents darken on light surfaces — #F5B041/#F97316 on white sit under
   2:1 contrast and read as invisible (priority badges, due-soon dates,
   "worth logging" hints). html[data-theme] outranks the :root palette the
   brand-settings stylesheet injects after this file. */
html[data-theme='light'] {
  --gold: #B45309;
  --gold-deep: #92400E;
  --orange: #C2410C;
  --amber: #B45309;
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Atmospheric mesh - subtle, brand-aligned glows */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(880px 660px at 12% 8%, rgba(0, 192, 165, 0.10), transparent 65%),
    radial-gradient(780px 600px at 88% 92%, rgba(1, 144, 213, 0.09), transparent 65%),
    radial-gradient(640px 520px at 50% 55%, rgba(5, 94, 184, 0.05), transparent 70%);
}
[data-theme='light'] body::before {
  background:
    radial-gradient(900px 700px at 8% 6%, rgba(0, 192, 165, 0.10), transparent 65%),
    radial-gradient(800px 600px at 92% 95%, rgba(1, 144, 213, 0.07), transparent 65%);
}

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-strong); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
h1 { font-size: 30px; letter-spacing: -0.02em; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0; }

/* Theme-aware logo swapping. Add `theme-img-light` to imgs that show only in light mode. */
.theme-img-dark { display: inline-block; }
.theme-img-light { display: none; }
[data-theme='light'] .theme-img-dark { display: none; }
[data-theme='light'] .theme-img-light { display: inline-block; }
/* Dark-theme rules need the same [data-theme] specificity, otherwise the later
   `.brand-logo { display: block }` rule wins and BOTH logo variants show. */
[data-theme='dark'] .theme-img-dark { display: inline-block; }
[data-theme='dark'] .theme-img-light { display: none; }

/* Brand gradient text utility */
.brand-text-gradient {
  background: var(--brand-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Scroll style */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

/* Brand block in sidebar - uses real logo */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.brand-logo { height: 32px; width: auto; display: block; align-self: flex-start; flex-shrink: 0; }
.brand-mark-img { height: 30px; width: 30px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 13px; color: var(--text-primary); font-weight: 700; letter-spacing: 0.01em; }
.brand-text span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px; }

.nav-group { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 14px 12px 6px;
  font-weight: 600;
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  color: var(--text-secondary);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  position: relative;
}
.nav-item:hover { background: var(--bg-card); color: var(--text-primary); }
/* Active sub-item: a milder marker so the section title (brand gradient)
   remains the dominant highlight. Soft teal tint, teal text, no shadow,
   accent stripe on the left edge for the "you are here" signal. */
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}
.nav-item.active svg { color: var(--accent); }
/* Hover state for the active sub-item: keep the soft-teal pill, deepen the
   tint a notch, and lock the icon + text to teal so the generic
   .nav-item:hover rules don't paint over them. */
.nav-item.active:hover {
  background: var(--teal-glow-strong);
  color: var(--accent);
}
.nav-item.active:hover svg { color: var(--accent); }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); transition: color var(--t-fast); }
.nav-item:hover svg { color: var(--accent); }

.nav-item .badge {
  margin-left: auto;
  background: var(--brand-accent-gradient);
  color: white;
  font-size: 11px;
  border-radius: 100px;
  padding: 2px 8px;
  font-weight: 700;
  box-shadow: 0 2px 8px var(--teal-glow-strong);
}
.nav-item.active .badge { background: var(--accent); color: white; box-shadow: none; }

/* Red "needs attention" bubble (overdue invoices, tasks due, follow-ups, etc.) */
.nav-item .nav-badge {
  margin-left: auto;
  background: var(--red, #EF4444);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  min-width: 18px;
  text-align: center;
  border-radius: 100px;
  padding: 3px 7px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}
.nav-item.active .nav-badge { box-shadow: none; }
/* If a nav item somehow has both badges, don't double up the auto margin. */
.nav-item .badge + .nav-badge { margin-left: 6px; }

/* ---- Global autosave banner (under the top bar) ---- */
.save-banner {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.2s ease;
  border-bottom: 1px solid transparent;
}
.save-banner.show { max-height: 52px; opacity: 1; }
.save-banner-inner {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 22px;
  font-size: 13px; font-weight: 600;
}
.save-banner[data-state="saving"] {
  background: var(--bg-elevated, #f1f5f9);
  color: var(--text-secondary, #475569);
  border-bottom-color: var(--border, #e2e8f0);
}
.save-banner[data-state="saved"] {
  background: var(--green-soft, #ecfdf5);
  color: var(--green, #10b981);
  border-bottom-color: color-mix(in srgb, var(--green, #10b981) 30%, transparent);
}
.save-banner[data-state="error"] {
  background: var(--red-soft, #fef2f2);
  color: var(--red, #ef4444);
  border-bottom-color: color-mix(in srgb, var(--red, #ef4444) 30%, transparent);
}
.save-banner-spin { animation: save-banner-spin 0.8s linear infinite; }
@keyframes save-banner-spin { to { transform: rotate(360deg); } }

/* ---- Searchable model combobox (Settings -> AI Provider) ---- */
/* Lift the slot card that owns the open dropdown above following cards, so the
   menu is never painted behind the next field. */
[data-slot].combo-open { position: relative; z-index: 1000; }
.model-combo { position: relative; }
.model-combo > input { padding-right: 32px; }
.model-combo-caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted, #94a3b8);
  pointer-events: none; transition: transform var(--t-fast, 0.15s);
}
.model-combo.open .model-combo-caret { transform: translateY(-50%) rotate(180deg); }
.model-combo-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 60; max-height: 300px; overflow-y: auto;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  padding: 5px;
}
.model-combo-opt {
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  transition: background var(--t-fast, 0.12s);
}
.model-combo-opt:hover,
.model-combo-opt.is-active { background: var(--bg-elevated, #f1f5f9); }
.model-combo-opt.is-selected { background: var(--teal-soft, rgba(0, 192, 165, 0.12)); }
.model-combo-opt-name { font-size: 13.5px; font-weight: 600; color: var(--text, #0f172a); }
.model-combo-opt-meta { font-size: 11.5px; color: var(--text-muted, #94a3b8); margin-top: 1px; word-break: break-all; }
.model-combo-empty { padding: 12px 10px; color: var(--text-muted, #94a3b8); font-size: 12.5px; }

/* Searchable inline picker (e.g. "Link an existing activity") — a filter box
   over a scrollable result list. Modal-safe: rendered inline, never clipped. */
.link-act-list {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-input); padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
}
.link-act-opt {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; transition: background var(--t-fast);
}
.link-act-opt:hover { background: var(--bg-elevated); }
.link-act-opt.is-selected { background: var(--teal-soft, rgba(0, 192, 165, 0.12)); border-color: var(--accent); }
.link-act-opt-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.link-act-opt-meta { font-size: 11.5px; color: var(--text-muted); }
.link-act-empty { padding: 16px 10px; color: var(--text-muted); font-size: 12.5px; text-align: center; }

/* ---- Collapsible nav sections (sidebar disclosure) ---- */
.nav-section { display: flex; flex-direction: column; }

/* The label is now a <button>; reset native button chrome but keep the
   existing .nav-label typography so collapsed/expanded sections still look
   identical to a plain label. Three children: section icon + label span +
   chevron. Icon + label sit on the left (gap), chevron is pushed right with
   margin-left:auto. */
.nav-label[data-nav-toggle] {
  background: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  /* Inherit the existing .nav-label colour/size/spacing rules above */
  color: inherit;
  text-align: left;
}
.nav-label[data-nav-toggle]:hover { color: var(--text-primary); }
.nav-label[data-nav-toggle]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Section-title icon - smaller than the sub-item icons (the label text is
   tiny uppercase 10px, so the icon needs to be proportional or it dominates). */
.nav-section-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.75;
  color: var(--text-muted);
}

.nav-chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;     /* pushes the chevron to the right edge */
  transition: transform var(--t-fast, 140ms) var(--ease-out, ease-out);
  opacity: 0.7;
  flex-shrink: 0;
}
.nav-section[data-open="false"] .nav-chevron { transform: rotate(-90deg); }

/* Highlight the section title that owns the currently active sub-route.
   Mirrors the .nav-item.active treatment so the highlighted state reads as
   "you are inside this section". `has-active` is toggled by
   window.expandSectionFor() on every route change. */
.nav-section.has-active > .nav-label[data-nav-toggle] {
  background: var(--brand-gradient);
  color: white;
  /* The base .nav-label uses asymmetric padding (14 top, 6 bottom) for inter-
     section spacing. When painted, we want symmetric inset padding so the
     gradient looks like a pill, not a strip. Margin restores the breathing
     room outside the painted area. */
  padding: 8px 12px;
  margin: 6px 0 2px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-brand);
  transition: background var(--t-fast, 140ms) var(--ease-out, ease-out),
              color var(--t-fast, 140ms) var(--ease-out, ease-out);
}
.nav-section.has-active > .nav-label[data-nav-toggle]:hover {
  color: white;   /* override the default hover-darken so the contrast stays */
}
.nav-section.has-active .nav-section-icon,
.nav-section.has-active .nav-chevron {
  color: white;
  opacity: 1;
}

/* Body height transition via grid-template-rows (no JS measurement needed).
   Sub-items are visually nested under their section title via a left
   padding + a hairline vertical guide line on the indent edge - the same
   pattern VS Code, Linear and Notion use for tree-like sidebars. */
.nav-section-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-fast, 140ms) var(--ease-out, ease-out);
  position: relative;
  padding-left: 16px;
  margin-left: 10px;   /* leaves room for the guide line to sit left of the indent */
}
.nav-section[data-open="false"] .nav-section-body { grid-template-rows: 0fr; }
.nav-section-body > .nav-group {
  overflow: hidden;   /* required for the row collapse to clip cleanly */
  min-height: 0;
}

/* Vertical guide line - only painted when the section is open so closed
   sections don't leak a stray rule. */
.nav-section[data-open="true"] > .nav-section-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
  opacity: 0.7;
  border-radius: 1px;
}

/* Sub-item icons read a touch lighter than the section title icon so the
   title stays visually dominant when the section is open. Hover + active
   states bring the icon back to full intensity. */
.nav-section-body .nav-item svg { opacity: 0.75; }
.nav-section-body .nav-item:hover svg,
.nav-section-body .nav-item.active svg { opacity: 1; }

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 14, 26, 0.62);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
[data-theme='light'] .topbar { background: rgba(255, 255, 255, 0.72); }

.topbar .search { flex: 1; max-width: 480px; position: relative; }
.topbar .search input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--r-md);
  padding: 10px 14px 10px 40px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.topbar .search input:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--teal-glow);
}
.topbar .search svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); width: 16px; height: 16px;
}
.topbar .search kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text-muted);
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover { background: var(--bg-card-hover); color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 2; }
.icon-btn.has-dot::after {
  content: ''; position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 12px var(--gold-glow);
}

.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.user-chip:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
.user-chip .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand-accent-gradient);
  display: grid; place-items: center;
  color: white; font-weight: 700; font-size: 11px;
  box-shadow: 0 2px 8px var(--teal-glow-strong);
}

/* ==========================================================================
   CONTENT + PAGE HEADER
   ========================================================================== */
.content {
  /* extra bottom padding keeps the last row / chart clear of the floating
     co-pilot button (60px + 24px offset, bottom-right) */
  padding: 32px 32px 104px;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
/* Action-button rows in page headers wrap instead of forcing the page wider
   (proposal/invoice editors have 5-7 buttons that overflow laptop widths). */
.page-header > .row { flex-wrap: wrap; min-width: 0; }
.page-header .lede { display: flex; flex-direction: column; gap: 6px; }
.page-header .lede h1 { font-size: 28px; }
.page-header .lede p { color: var(--text-muted); font-size: 14px; }

/* ==========================================================================
   CHART CONTAINERS - Chart.js needs a relative-positioned parent
   for responsive: true + maintainAspectRatio: false to size correctly.
   ========================================================================== */
.card canvas,
[data-chart-wrap] canvas { display: block; }
.card > div[style*='height'],
.card > [data-chart-wrap] {
  position: relative;
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
  transition: border-color var(--t-fast), transform var(--t-base), box-shadow var(--t-base);
}
.card.hoverable:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-glow);
}
.card.glow {
  border-color: rgba(0, 192, 165, 0.25);
  box-shadow: var(--shadow-glow);
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 9px; }
.card-title svg { color: var(--accent); width: 18px; height: 18px; }
.card-sub { font-size: 12px; color: var(--text-muted); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  /* Never wider than the container — a long label can't push the page sideways. */
  max-width: 100%;
}
/* Buttons whose label is a full sentence (AI question chips etc.) wrap to a
   second line on phones instead of overflowing their card. */
.btn.btn-soft, [data-ai-chip] { white-space: normal; text-align: left; height: auto; }
.btn:hover { background: var(--bg-card-hover); border-color: var(--border-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--brand-accent-gradient);
  border: 1px solid transparent;
  color: white;
  box-shadow: 0 6px 16px var(--teal-glow-strong);
}
.btn-primary:hover {
  background: var(--brand-gradient);
  box-shadow: 0 10px 28px var(--blue-glow-strong), 0 0 0 1px rgba(255,255,255,0.06) inset;
  border-color: transparent;
}

.btn-success { background: var(--green); border-color: var(--green); color: white; }
.btn-success:hover { background: #0EA372; border-color: #0EA372; box-shadow: 0 6px 18px rgba(16,185,129,0.32); }
.btn-warn { background: var(--gold-gradient); border-color: transparent; color: #1a0e00; }
.btn-warn:hover { box-shadow: 0 6px 18px var(--gold-glow); }
.btn-danger { background: var(--red); border-color: var(--red); color: white; }
.btn-danger:hover { background: #DC2626; border-color: #DC2626; box-shadow: 0 6px 18px rgba(239,68,68,0.32); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-card); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-icon { padding: 9px; width: 38px; height: 38px; border-radius: 999px; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.input, .select, .textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--teal-glow);
}
.textarea { min-height: 90px; resize: vertical; line-height: 1.45; }
.label { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.08em; }
.field { display: flex; flex-direction: column; }
/* minmax(0,1fr) - not plain 1fr - so columns split evenly and can shrink below
   their content's intrinsic width. Date inputs have a wide intrinsic min-width
   that otherwise blows the columns out of alignment / overflows the container. */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.help { color: var(--text-muted); font-size: 12px; }

/* ==========================================================================
   PILLS / STATUS / PRIORITY
   ========================================================================== */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
  text-transform: uppercase;
}
.pill-accent, .pill-cyan, .pill-teal { background: var(--accent-soft); color: var(--accent); }
.pill-blue { background: var(--blue-glow); color: var(--brand-cyan); }
.pill-gold { background: var(--gold-soft); color: var(--gold); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-orange { background: var(--orange-soft); color: var(--orange); }
.pill-purple { background: var(--purple-soft); color: var(--purple); }
.pill-muted { background: var(--bg-card-hover); color: var(--text-secondary); border-color: var(--border); }
.pill-brand { background: var(--brand-accent-gradient); color: white; }

.status-NotStarted, .status-Backlog { background: var(--bg-card-hover); color: var(--text-secondary); }
.status-OnTrack, .status-ToDo, .status-Pending { background: var(--accent-soft); color: var(--accent); }
.status-AtRisk, .status-Blocked, .status-Snoozed { background: var(--orange-soft); color: var(--orange); }
.status-OffTrack, .status-Declined { background: var(--red-soft); color: var(--red); }
.status-Achieved, .status-Done, .status-Approved, .status-Implemented { background: var(--green-soft); color: var(--green); }
.status-InProgress { background: var(--purple-soft); color: var(--purple); }

.priority-Critical { color: var(--red); }
.priority-High { color: var(--orange); }
.priority-Medium { color: var(--gold); }
.priority-Low { color: var(--text-muted); }

/* ==========================================================================
   PROGRESS
   ========================================================================== */
.progress {
  position: relative;
  height: 8px;
  border-radius: 100px;
  background: var(--bg-input);
  overflow: hidden;
  border: 1px solid var(--border);
}
.progress > div {
  height: 100%;
  border-radius: 100px;
  background: var(--brand-accent-gradient);
  transition: width var(--t-slow);
  box-shadow: 0 0 12px var(--teal-glow-strong);
}
.progress.success > div { background: linear-gradient(90deg, var(--green), #34D399); box-shadow: 0 0 10px rgba(16,185,129,0.35); }
.progress.warn > div { background: var(--gold-gradient); box-shadow: 0 0 10px var(--gold-glow); }
.progress.danger > div { background: linear-gradient(90deg, var(--red), #F87171); box-shadow: 0 0 10px rgba(239,68,68,0.35); }

/* ==========================================================================
   STAT TILES
   ========================================================================== */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.stat-tile::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 0%, var(--accent-soft) 200%);
  pointer-events: none;
}
.stat-tile::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand-accent-gradient);
  opacity: 0.7;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-glow); border-color: var(--border-strong); }
.stat-tile .stat-label { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.stat-tile .stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.stat-tile .stat-sub { font-size: 12px; color: var(--text-secondary); }

/* ==========================================================================
   GRIDS
   ========================================================================== */
/* minmax(0,1fr) not 1fr: lets a column shrink below its content's intrinsic
   width, so a wide table inside a scroll wrapper can't blow the grid (and the
   whole page) out sideways on narrow screens. */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
/* auto-fit (not auto-fill) so a row of 3/4/5 stat cards fills evenly instead of
   leaving an orphaned card + dead space on a second row. */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }

/* ==========================================================================
   TABLES
   ========================================================================== */
.table-wrap {
  overflow: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
}
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data thead { background: var(--bg-elevated); position: sticky; top: 0; z-index: 1; }
table.data thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; }
table.data tbody tr { transition: background var(--t-fast); }
table.data tbody tr:hover { background: var(--bg-card-hover); }
table.data tbody tr:last-child td { border-bottom: 0; }

/* ---- People: Excel-style per-column header filters -------------------- */
.th-filter { display: inline-flex; align-items: center; gap: 6px; }
.th-filter-label { /* inherits the uppercase header styling */ }
.th-filter-btn {
  display: inline-flex; align-items: center; gap: 2px;
  background: transparent; border: 0; padding: 2px 4px; border-radius: 6px;
  color: var(--text-muted); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.th-filter-btn:hover { background: var(--bg-card-hover); color: var(--text-secondary); }
.th-filter-btn i { width: 13px; height: 13px; }
.th-filter.is-active .th-filter-btn { color: var(--accent); }
.th-filter.is-active .th-filter-label { color: var(--text-secondary); }
.th-filter-badge {
  font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 5px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}

.col-filter-pop {
  position: fixed; z-index: 200; min-width: 220px; max-width: 300px;
  max-height: 340px; overflow: auto; padding: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-soft-lg);
  font-size: 13px; color: var(--text-secondary);
}
.col-filter-pop .cf-text { width: 100%; margin-bottom: 8px; }
.col-filter-pop .cf-opts { display: flex; flex-direction: column; gap: 1px; }
.col-filter-pop .cf-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px;
  cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 400;
}
.col-filter-pop .cf-opt:hover { background: var(--bg-elevated); }
.col-filter-pop .cf-opt .cf-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.col-filter-pop .cf-opt .muted { margin-left: auto; font-size: 11px; }
.col-filter-pop .cf-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}

/* ==========================================================================
   MODALS / TOAST
   ========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center;
  z-index: 100;
  animation: fade-in var(--t-base);
}
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  width: min(640px, calc(100vw - 36px));
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: pop-in var(--t-base);
}
.modal.large { width: min(900px, calc(100vw - 36px)); }
.modal.modal-tasks { width: min(1200px, calc(100vw - 36px)); }

/* Full-width launcher button for the Project Tasks board (opens a modal). */
.task-launch {
  display: flex; align-items: center; gap: 16px; width: 100%;
  text-align: left; cursor: pointer;
  color: var(--text-primary); /* buttons don't inherit color — stays readable in dark mode */
  background: var(--bg-elevated); border: 1px solid var(--border);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.task-launch:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.task-launch-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.task-launch-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.task-launch-title { font-weight: 600; font-size: 15px; }
.task-launch-arrow { color: var(--text-secondary); flex-shrink: 0; }
.task-launch:hover .task-launch-arrow { color: var(--accent); }

/* Project Tasks generation hub (empty state of the tasks modal). */
.gen-hub-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.gen-hub-sources {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-bottom: 16px;
}
@media (max-width: 640px) { .gen-hub-sources { grid-template-columns: 1fr; } }
.gen-src {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elevated); transition: border-color var(--t-base);
}
.gen-src:hover { border-color: var(--accent); }
.gen-src input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.gen-src-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gen-src-off { opacity: .55; cursor: not-allowed; }
.gen-src-off:hover { border-color: var(--border); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; }
.modal-header h2 { flex: 1; font-size: 18px; }
.modal-body { padding: 24px; overflow-y: auto; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; justify-content: flex-end; background: var(--bg-base); }

.toast-stack { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  min-width: 240px;
  animation: slide-in var(--t-base);
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error { border-left: 3px solid var(--red); }
.toast.warn { border-left: 3px solid var(--orange); }

/* ==========================================================================
   AUTH SCREEN
   ========================================================================== */
.auth-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.auth-side {
  position: relative;
  background-image: linear-gradient(135deg, rgba(4,8,20,0.35) 0%, rgba(5,94,184,0.20) 60%, rgba(0,192,165,0.15) 100%), url('/images/brand/auth-bg.svg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 60px 64px;
  overflow: hidden;
}
.auth-side::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 600px; height: 600px;
  background: radial-gradient(closest-side, rgba(0,192,165,0.35), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.auth-side::after {
  content: '';
  position: absolute;
  inset: auto auto -30% -10%;
  width: 500px; height: 500px;
  background: radial-gradient(closest-side, rgba(1,144,213,0.30), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }
/* NO `display` here — it ties with the .theme-img-* swap rules (same
   specificity) and, being later in the file, forced BOTH logo variants
   visible on the login page. Sizing only; visibility belongs to the swap. */
.auth-side .brand-logo { height: 36px; width: auto; max-width: none; align-self: flex-start; flex-shrink: 0; }
/* Belt & braces: the swap must always win inside auth screens. */
html[data-theme='dark'] .auth-wrap .theme-img-light,
html[data-theme='light'] .auth-wrap .theme-img-dark { display: none !important; }

/* ---- Reports section navigation (sticky, scroll-spied) ---- */
.report-subnav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 2px;
  margin: -6px 0 18px;
  background: color-mix(in srgb, var(--bg-base) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.report-subnav::-webkit-scrollbar { display: none; }
.report-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.report-subnav-link i { width: 14px; height: 14px; }
.report-subnav-link:hover { color: var(--text); border-color: var(--border-strong); }
.report-subnav-link.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
}
/* Keep jump targets clear of the sticky bar. */
#bas, #accounting, #pnl-trends, #growth, #targets { scroll-margin-top: 72px; }

/* Light-mode filter: flips the white wordmark to dark while preserving the gradient infinity hue. */
.theme-img-light { filter: invert(1) hue-rotate(180deg); }
.auth-form-wrap {
  display: grid;
  place-items: center;
  padding: 40px;
  background: var(--bg-base);
}
.auth-form {
  width: 100%;
  max-width: 420px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.auth-form h1 { font-size: 28px; }
.auth-quote {
  color: white;
  font-size: 24px;
  line-height: 1.45;
  max-width: 520px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.auth-quote span {
  background: linear-gradient(135deg, #00C0A5, #66D9C4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-credit {
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   SPARKLINE / SKELETON
   ========================================================================== */
.sparkline { display: block; width: 100%; height: 40px; }
.skel {
  background: linear-gradient(90deg, var(--bg-card) 0%, var(--bg-card-hover) 50%, var(--bg-card) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s linear infinite;
  border-radius: var(--r-md);
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* ==========================================================================
   KANBAN - styled trello-meets-linear-meets-logic8 board
   ========================================================================== */
.kanban {
  display: grid;
  /* Single row of columns that scrolls horizontally rather than wrapping.
     Boards with 4 stages fit the viewport; boards with 6 (pipeline) scroll
     instead of orphaning the last columns onto a second row. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

/* Mirrored horizontal scrollbar above the kanban board.
   A thin div whose inner width matches the board's scroll width — synced
   via JS so scrolling either one scrolls the other. Always shows a styled
   scrollbar so users can scroll horizontally the moment they land on the
   page, without having to scroll down to the native bottom scrollbar. */
.kanban-hscroll-mirror {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 6px;
  border-radius: var(--r-sm);
}
.kanban-hscroll-mirror-inner {
  /* Height 1px — only the width matters; scrollbar is the UI */
  height: 1px;
  /* Background makes the inner visible so browsers paint the scrollbar track */
  background: transparent;
}
/* Always-visible, styled scrollbar (overrides macOS overlay-scrollbar
   behaviour so it shows even without hovering / using a mouse). */
.kanban-hscroll-mirror::-webkit-scrollbar        { height: 8px; }
.kanban-hscroll-mirror::-webkit-scrollbar-track  { background: var(--bg-card); border-radius: 999px; }
.kanban-hscroll-mirror::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 999px; }
.kanban-hscroll-mirror::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* Firefox */
.kanban-hscroll-mirror { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-card); }

/* Flexible board: auto-sizes columns to however many groups exist.
   Used by Goals / Targets board views, where the column count varies
   with how many categories are in use. Higher specificity than the
   plain `.kanban` rule so it also wins inside the mobile media query. */
.kanban.kanban-flex {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(264px, 1fr);
}
.kanban-col-cat { --col-stripe: var(--accent); }

/* A board column laid out as a card grid (Goals/Targets cards keep their
   full card styling rather than the compact kanban-card look). */
.kanban-list-cards { gap: 14px; }
.kanban-list-cards > .card { margin: 0; cursor: grab; }
.kanban-list-cards > .card:active { cursor: grabbing; }
.kanban-list-cards > .card.dragging { opacity: 0.45; cursor: grabbing; transform: rotate(-1.5deg); }

/* Column wrapper - subtle gradient + status-coloured top stripe */
.kanban-col {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 0;
  display: flex; flex-direction: column;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.kanban-col::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--col-stripe, var(--text-muted));
  opacity: 0.85;
}
.kanban-col-todo         { --col-stripe: #0190D5; }
.kanban-col-inprogress   { --col-stripe: #00C0A5; }
.kanban-col-blocked      { --col-stripe: #EF4444; }
.kanban-col-done         { --col-stripe: #10B981; }

/* ── Pipeline stage colour coding ─────────────────────────────────────────
   Keyed on [data-col] so no JS changes are needed. Each stage gets a
   distinct stripe + dot colour (via --col-stripe) plus a soft background
   tint fading from the top so the column feels coloured without being loud.
   Colours mirror the existing pill system for visual consistency across the
   whole app (pill-muted / pill-blue / pill-gold / pill-green / pill-red). */

.kanban-col[data-col="new"] {
  --col-stripe: #94A3B8;                                         /* slate  */
  background: linear-gradient(180deg, rgba(148,163,184,.08) 0%, var(--bg-card) 55%);
  border-color: rgba(148,163,184,.25);
}
.kanban-col[data-col="qualified"] {
  --col-stripe: #0190D5;                                         /* blue   */
  background: linear-gradient(180deg, rgba(1,144,213,.08) 0%,   var(--bg-card) 55%);
  border-color: rgba(1,144,213,.25);
}
.kanban-col[data-col="proposal"] {
  --col-stripe: #F5B041;                                         /* amber  */
  background: linear-gradient(180deg, rgba(245,176,65,.08) 0%,  var(--bg-card) 55%);
  border-color: rgba(245,176,65,.25);
}
.kanban-col[data-col="won"] {
  --col-stripe: #10B981;                                         /* green  */
  background: linear-gradient(180deg, rgba(16,185,129,.09) 0%,  var(--bg-card) 55%);
  border-color: rgba(16,185,129,.28);
}
.kanban-col[data-col="lost"] {
  --col-stripe: #EF4444;                                         /* red    */
  background: linear-gradient(180deg, rgba(239,68,68,.08) 0%,   var(--bg-card) 55%);
  border-color: rgba(239,68,68,.22);
}
/* New pipeline stages (discovery and negotiation added in CRM redesign) */
.kanban-col[data-col="discovery"] {
  --col-stripe: #7C3AED;
  background: linear-gradient(180deg, rgba(124,58,237,.08) 0%, var(--bg-card) 55%);
  border-color: rgba(124,58,237,.25);
}
.kanban-col[data-col="proposal_sent"] {
  --col-stripe: #F5B041;
  background: linear-gradient(180deg, rgba(245,176,65,.08) 0%, var(--bg-card) 55%);
  border-color: rgba(245,176,65,.25);
}
.kanban-col[data-col="negotiation"] {
  --col-stripe: #F97316;
  background: linear-gradient(180deg, rgba(249,115,22,.08) 0%, var(--bg-card) 55%);
  border-color: rgba(249,115,22,.25);
}
.kanban-col.drop-target { box-shadow: 0 0 0 2px var(--accent), 0 12px 30px rgba(0, 192, 165, 0.15); border-color: var(--accent); }

/* Column header */
.kanban-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 10px;
}
.kanban-col-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--col-stripe, var(--text-muted));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-stripe, #94A3B8) 22%, transparent);
}
.kanban-col-head h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-secondary); font-weight: 700; margin: 0; flex: 1;
}
.kanban-col-count {
  font-size: 11px; font-weight: 700;
  background: var(--bg-card); color: var(--text-secondary);
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
}

.kanban-list {
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 12px 14px;
  flex: 1;
}

/* Capped columns (activities board): show ~5 cards, then scroll inside the
   column instead of letting the whole page grow tall. Card heights vary with
   content, so this is "about five" rather than exactly five. Capped by 72vh so
   it never exceeds the viewport on short screens. Styled thin scrollbar to
   match the board's horizontal mirror scrollbar. */
.kanban-capped .kanban-list {
  max-height: min(660px, 72vh);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg-card);
}
/* The list is a flex column, so its children default to flex-shrink:1 — under a
   max-height that makes the browser squish the cards (clipping their content,
   since cards are overflow:hidden) instead of overflowing. Pin shrink to 0 so
   cards keep their natural height and the list scrolls instead. */
.kanban-capped .kanban-list > * { flex-shrink: 0; }
.kanban-capped .kanban-list::-webkit-scrollbar        { width: 8px; }
.kanban-capped .kanban-list::-webkit-scrollbar-track  { background: transparent; }
.kanban-capped .kanban-list::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 999px; }
.kanban-capped .kanban-list::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.kanban-empty {
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  padding: 18px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  /* Keep the empty hint compact and centred rather than reserving the full
     column height as dead space. */
  margin: auto 0;
}

/* Card */
.kanban-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px 12px 16px;
  cursor: grab;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
/* Left edge stripe - uses card's --card-edge if set, falls back to brand teal */
.kanban-card::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
  background: var(--card-edge, transparent);
  border-radius: 12px 0 0 12px;
}
.kanban-card.priority-critical::before { background: var(--card-edge, var(--red)); }
.kanban-card.priority-high::before     { background: var(--card-edge, var(--orange)); }
.kanban-card.priority-medium::before   { background: var(--card-edge, var(--cyan, #0190D5)); }
.kanban-card.priority-low::before      { background: var(--card-edge, var(--text-muted)); }
.kanban-card:hover {
  border-color: color-mix(in srgb, var(--card-edge, var(--accent)) 50%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,0.10), 0 1px 3px rgba(15,23,42,0.06);
}
.kanban-card.dragging { opacity: 0.45; cursor: grabbing; transform: rotate(-1.5deg); }

/* Card head row: priority chip + recurrence */
.kanban-card-head {
  display: flex; align-items: center; gap: 6px;
  min-height: 16px;
}
.kanban-card-priority {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.kanban-card-priority.pri-critical { background: rgba(239,68,68,0.13); color: #DC2626; }
.kanban-card-priority.pri-high     { background: rgba(249,115,22,0.13); color: #EA580C; }
.kanban-card-priority.pri-low      { background: rgba(148,163,184,0.18); color: #64748B; }
.kanban-card-rec {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.kanban-card-rec svg { width: 12px; height: 12px; }

.kanban-card-title {
  font-weight: 600; font-size: 14px; line-height: 1.35;
  color: var(--text-primary);
}
.kanban-card-desc {
  font-size: 12px; line-height: 1.45; color: var(--text-secondary);
}
.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.kanban-card-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 7px; border-radius: 4px;
  background: var(--bg-elevated); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.kanban-card-link {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  font-size: 11px; font-weight: 500;
  padding: 2px 7px; border-radius: 4px;
  background: var(--bg-elevated); color: var(--text-secondary);
  border: 1px solid var(--border);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kanban-card-link svg { width: 11px; height: 11px; flex-shrink: 0; }
.kanban-card-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding-top: 8px;
  border-top: 1px solid var(--borderSoft, var(--border));
}
.kanban-card-assignee {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-accent-gradient);
  color: #fff; font-weight: 700; font-size: 10px;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.kanban-card-due {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-secondary); font-weight: 500;
}
.kanban-card-due svg { width: 12px; height: 12px; }
.kanban-card-due.due-soon { color: var(--orange); font-weight: 600; }
.kanban-card-due.due-overdue {
  color: #fff; background: var(--red);
  padding: 2px 8px; border-radius: 999px;
}
.kanban-card-due.muted { color: var(--text-muted); font-style: italic; }

/* ==========================================================================
   COLOUR PICKER (activity edit modal)
   ========================================================================== */
.colour-picker {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}
.colour-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  position: relative;
}
.colour-swatch:hover { transform: scale(1.10); box-shadow: 0 3px 10px rgba(0,0,0,0.18); }
.colour-swatch.selected {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-primary);
  transform: scale(1.05);
}
.colour-swatch-none {
  background: var(--bg-input);
  border: 2px dashed var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.colour-swatch-none svg { width: 14px; height: 14px; }
.colour-swatch-none.selected {
  border-color: var(--text-primary);
  border-style: solid;
}

/* ==========================================================================
   PACE BADGE
   ========================================================================== */
.pace-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.pace-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--brand-accent-gradient);
}
.pace-dot { width: 14px; height: 14px; border-radius: 50%; position: relative; flex-shrink: 0; }
.pace-dot::after {
  content: ''; position: absolute; inset: -5px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.35;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.4); opacity: 0.10; }
}
.pace-dot.green { background: var(--green); }
.pace-dot.amber { background: var(--gold); }
.pace-dot.red { background: var(--red); }

/* ==========================================================================
   TAGS / SUGGESTIONS / MARKDOWN
   ========================================================================== */
.tag {
  display: inline-flex;
  background: var(--bg-card-hover);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: var(--font-mono);
}

.sugg-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.sugg-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand-accent-gradient);
  opacity: 0.6;
}
.sugg-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card-glow); }
.sugg-card .sugg-type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.sugg-card .sugg-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.sugg-card .sugg-body { color: var(--text-body); font-size: 14px; line-height: 1.55; }
.sugg-card .sugg-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 12px; }
.sugg-card .sugg-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

/* Brief outline flash on deep-link focus (e.g. /settings?focus=ai-coach) */
.focus-flash {
  animation: focus-flash-anim 2.2s ease-out;
}
@keyframes focus-flash-anim {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  30%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* AI Coach explainer strip on the suggestions page */
.sugg-coach-strip {
  position: relative;
  padding: 16px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--bg-card)), var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}
.sugg-coach-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.sugg-coach-icon svg { width: 18px; height: 18px; }
.sugg-coach-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sugg-coach-meta strong { color: var(--text-secondary); }

.md p { margin: 0 0 12px; line-height: 1.6; color: var(--text-body); }
.md p:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { margin: 18px 0 8px; color: var(--text-primary); }
.md h1 { font-size: 22px; }
.md h2 { font-size: 18px; }
.md h3 { font-size: 15px; }
.md ul, .md ol { margin: 8px 0 12px; padding-left: 22px; color: var(--text-body); line-height: 1.6; }
.md li { margin-bottom: 4px; }
.md code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-input); padding: 1px 6px; border-radius: 4px; color: var(--accent); }
.md pre { background: var(--bg-input); padding: 14px; border-radius: var(--r-md); overflow-x: auto; }
.md a { color: var(--accent); }
.md strong { color: var(--text-primary); }
.md blockquote { border-left: 3px solid var(--accent); padding: 4px 14px; color: var(--text-body); margin: 12px 0; }

/* ==========================================================================
   CALENDAR
   ========================================================================== */
.calendar { display: flex; flex-direction: column; gap: 14px; }
/* minmax(0, 1fr) (rather than just 1fr) is critical: it stops cells with long
   unbroken event titles from stretching their column wider than the others.
   Pairs with grid-auto-rows: 1fr so every row in the month has the same height. */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(110px, 1fr);
  gap: 6px;
}
/* The day-name row is its own grid above the cells. Sharing the same column
   template means columns line up perfectly with the cells below. */
.calendar-day-names {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.calendar-day-name {
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 8px 0;
  font-weight: 700;
}
.calendar-cell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: 110px;
  min-width: 0;
  padding: 8px;
  display: flex; flex-direction: column;
  font-size: 12px;
  transition: background var(--t-fast), border-color var(--t-fast);
  overflow: hidden;
}
.calendar-cell.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 18px var(--teal-glow); }
.calendar-cell.muted { opacity: 0.55; }
.calendar-cell.drop-hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.calendar-cell .cell-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.calendar-cell .num { font-weight: 700; color: var(--text-secondary); }
.calendar-cell.today .num { color: var(--accent); }
.calendar-cell .cell-add {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  padding: 0;
}
.calendar-cell .cell-add svg { width: 12px; height: 12px; stroke-width: 2.5; }
.calendar-cell:hover .cell-add { opacity: 1; }
.calendar-cell .cell-add:hover { background: var(--brand-gradient); color: #fff; border-color: transparent; transform: scale(1.08); }
.cal-event {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 2px;
  font-size: 11px;
  cursor: grab;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 2px solid var(--accent);
  font-weight: 500;
}
/* When an activity has a colour assigned, tint the calendar pill with that colour */
.cal-event.cal-event-tinted {
  background: color-mix(in srgb, var(--cal-event-color) 18%, transparent);
  color: color-mix(in srgb, var(--cal-event-color) 90%, var(--text-primary));
  border-left-color: var(--cal-event-color);
}
[data-theme='light'] .cal-event.cal-event-tinted {
  color: color-mix(in srgb, var(--cal-event-color) 75%, var(--text-primary));
}

/* Calendar - AI Recommendations strip */
.rec-strip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.rec-strip::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--brand-gradient);
}
.rec-strip-empty { padding: 12px 16px; }
.rec-empty { display: flex; align-items: center; gap: 14px; }
.rec-empty svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.rec-empty > div { flex: 1; }
.rec-empty p { margin-top: 2px; }

.rec-strip-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.rec-strip-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.rec-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: grab;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.rec-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); border-color: var(--purple-light); }
.rec-card.dragging { opacity: 0.5; cursor: grabbing; }
.rec-card-head { display: flex; align-items: center; justify-content: space-between; }
.rec-grip {
  background: transparent; border: none; padding: 0; margin: 0;
  color: var(--text-muted); cursor: grab;
  display: inline-flex; align-items: center;
}
.rec-grip svg { width: 14px; height: 14px; }
.rec-title { font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--text-primary); }
.rec-body { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.rec-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 28px;
  text-align: center;
  color: var(--text-muted);
  gap: 12px;
}
.empty svg { width: 44px; height: 44px; color: var(--accent); opacity: 0.7; }
.empty h3 { color: var(--text-primary); }
.empty p { font-size: 13px; max-width: 380px; line-height: 1.5; }

/* ==========================================================================
   COMMAND PALETTE
   ========================================================================== */
.palette-backdrop {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 150;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  animation: fade-in var(--t-fast);
}
.palette {
  width: min(620px, calc(100vw - 32px));
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  max-height: 70vh;
  animation: pop-in var(--t-base);
}
.palette-input {
  background: transparent; border: 0; outline: 0;
  color: var(--text-primary);
  font-size: 16px; padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
}
.palette-list { overflow-y: auto; padding: 8px; flex: 1; }
.palette-item {
  padding: 10px 14px;
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-body);
}
.palette-item:hover, .palette-item.selected { background: var(--bg-card-hover); color: var(--text-primary); }
.palette-item .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.palette-item svg { color: var(--accent); width: 16px; height: 16px; }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline-day {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px;
  color: var(--text-secondary);
  font-size: 13px;
}
.timeline-day i { width: 14px; height: 14px; opacity: 0.7; }
.timeline-day strong { color: var(--text-primary); font-size: 14px; }
.timeline-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.timeline-item {
  display: flex; gap: 14px; align-items: flex-start;
  min-width: 0;
  padding: 12px 4px;
  border-bottom: 1px dashed var(--border);
}
.timeline-item:last-child { border-bottom: none; }
/* Event text shrinks + wraps inside the row (long file names / URLs included)
   instead of pushing the list wider than the phone screen. */
.timeline-item > .col { min-width: 0; overflow-wrap: break-word; }
.timeline-dot {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--bg-card-hover);
  color: var(--accent);
  flex-shrink: 0;
}
.timeline-dot i { width: 16px; height: 16px; }
.timeline-dot.tone-cyan { background: var(--accent-soft); color: var(--accent); }
.timeline-dot.tone-gold { background: var(--gold-soft); color: var(--gold); }
.timeline-dot.tone-green { background: var(--green-soft); color: var(--green); }
.timeline-dot.tone-red { background: var(--red-soft); color: var(--red); }
.timeline-dot.tone-orange { background: var(--orange-soft); color: var(--orange); }
.timeline-dot.tone-purple { background: var(--purple-soft); color: var(--purple); }

/* Standalone avatar */
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-accent-gradient);
  display: grid; place-items: center;
  color: white; font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--teal-glow-strong);
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 920px) {
  /* Kill app-wide horizontal scroll: the top bar (and wide tables) must never
     push the page sideways. Tables get their own scroll container below. */
  html, body { overflow-x: hidden; max-width: 100%; }

  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0;
    height: 100vh; height: 100dvh; z-index: 60;
    transform: translateX(-105%);
    transition: transform var(--t-base);
    width: 268px;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 59;
    backdrop-filter: blur(4px);
  }
  /* Lock the page behind the open drawer / any overlay. */
  body.no-scroll { overflow: hidden; }
  /* The chat FAB (z 80) must not float over the open drawer (z 60). */
  body:has(.sidebar.open) .chat-fab { display: none; }

  .topbar { padding: 12px 16px; gap: 8px; }
  .content { padding: 20px 16px 90px; }   /* extra bottom room so the FAB clears content */
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .menu-toggle { display: grid !important; }
  .kanban { grid-auto-columns: minmax(220px, 78vw); }

  /* --- Top bar: make everything fit in a phone width --- */
  .topbar .search { max-width: none; min-width: 0; flex: 1 1 0 !important; }
  .topbar .search kbd { display: none; }              /* the "Cmd K" pill reads as decorative on touch */
  .topbar-actions { flex-wrap: wrap; gap: 6px; row-gap: 6px; min-width: 0; }
  /* Collapse "Ask AI" / "Log Check-in" to icon-only (label hidden, aria-label kept). */
  .topbar-actions .btn .btn-label { display: none; }
  .topbar-actions .btn-sm { padding: 0; width: 40px; min-height: 40px; justify-content: center; }
  .topbar-actions .btn-sm svg { margin: 0; }
  .user-chip span[data-user-name] { display: none; }   /* avatar is enough on a phone */

  /* --- Tables: scroll inside their card, never blow out the page --- */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card:has(> table.data), .card:has(> .table-wrap) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data { min-width: 560px; }

  /* --- Page headers stack: title over full-width action buttons --- */
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-header > .row { flex-wrap: wrap; }

  /* --- Touch targets >= ~44px --- */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 38px; }
  .menu-toggle { width: 44px; height: 44px; }
  .nav-item { min-height: 44px; display: flex; align-items: center; }
  table.data input[type="checkbox"],
  .table-wrap input[type="checkbox"] { width: 20px; height: 20px; }

  /* --- Filter / chip / date-range toolbars: scroll, don't wrap raggedly ---
     Scope to chip strips (.row.gap-sm) that sit inside a filter toolbar
     (.row.gap-md) so generic rows are untouched. */
  .row.gap-md > .row.gap-sm {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .row.gap-md > .row.gap-sm::-webkit-scrollbar { display: none; }
  .row.gap-md > .row.gap-sm > .btn-sm { flex-shrink: 0; }
  /* Date-range inputs + their selects go full-width and stack. */
  .row.gap-md > input[type="date"],
  .row.gap-md > .select { flex: 1 1 100%; width: 100% !important; max-width: none !important; }
}
.menu-toggle { display: none; }

/* ==========================================================================
   LOGIC8 CO-PILOT (Claude chat panel + FAB)
   ========================================================================== */
/* Logo avatar surface - charcoal background everywhere the brand mark sits inside a circle/badge */
:root {
  --logo-bg: #111827;          /* deep charcoal */
  --logo-bg-hover: #1F2937;
  --logo-ring: rgba(255,255,255,0.06);
}

.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px; height: 60px;
  border-radius: 999px;
  border: none;
  background: var(--logo-bg);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 80;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--logo-ring) inset;
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.chat-fab:hover { background: var(--logo-bg-hover); transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 40px rgba(1, 144, 213, 0.55); }
.chat-fab img { width: 32px; height: 32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.chat-fab-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: var(--brand-accent-gradient);
  opacity: 0.35;
  z-index: -1;
  animation: chat-pulse 2.6s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes chat-pulse {
  0%   { transform: scale(1);    opacity: 0.45; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.chat-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  z-index: 90;
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-panel.open { transform: translateX(0); }

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(0, 192, 165, 0.10) 0%, rgba(1, 144, 213, 0.08) 100%),
    var(--bg-elevated);
}
.chat-avatar {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--logo-bg);
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 1px var(--logo-ring) inset;
}
.chat-avatar img { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.chat-avatar.small { width: 28px; height: 28px; box-shadow: 0 0 0 1px var(--logo-ring) inset; }
.chat-avatar.small img { width: 16px; height: 16px; }

.chat-title { display: flex; flex-direction: column; flex: 1; line-height: 1.2; min-width: 0; }
.chat-title strong { font-size: 14px; color: var(--text-primary); font-weight: 700; }

/* Session chip - dropdown trigger that shows current session title */
.chat-session-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none; padding: 0;
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  transition: color var(--t-fast);
}
.chat-session-chip:hover { color: var(--accent); }
.chat-session-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-session-chip svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Context-size indicator pill */
.chat-context-pill {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-card); color: var(--text-muted);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-context-pill.warn { background: rgba(245, 158, 11, 0.14); color: var(--amber); border-color: var(--amber); }
.chat-context-pill.danger { background: rgba(239, 68, 68, 0.14); color: var(--red); border-color: var(--red); }

/* Banner for high-context warnings */
.chat-context-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.10);
  border-bottom: 1px solid rgba(245, 158, 11, 0.30);
  font-size: 12px;
  color: var(--text-secondary);
}
.chat-context-banner.danger { background: rgba(239, 68, 68, 0.10); border-bottom-color: rgba(239, 68, 68, 0.30); }
.chat-context-banner svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--amber); }
.chat-context-banner.danger svg { color: var(--red); }
.chat-context-banner span { flex: 1; }

/* Sessions list panel - drops down inside the chat panel */
.chat-session-panel {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  max-height: 320px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.chat-session-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast);
}
.chat-session-row:last-child { border-bottom: none; }
.chat-session-row:hover { background: var(--bg-elevated); }
.chat-session-row.active { background: var(--accent-soft); border-left: 3px solid var(--accent); padding-left: 11px; }
.chat-session-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.chat-session-row-main strong { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-session-snippet { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-session-meta { font-size: 10px; color: var(--text-muted); }
.chat-session-del {
  background: transparent; border: none; padding: 6px;
  border-radius: 6px;
  color: var(--text-muted); cursor: pointer;
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.chat-session-del:hover { color: var(--red); background: rgba(239, 68, 68, 0.10); }
.chat-session-del svg { width: 14px; height: 14px; }
.chat-session-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 12px; }

/* In-thread history view - replaces messages within the same pane */
.chat-history-view {
  display: flex; flex-direction: column;
  height: 100%;
  margin: -18px;          /* offset .chat-thread's padding so we span edge-to-edge */
}
.chat-history-view-search {
  position: relative;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.chat-history-view-search svg {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.chat-history-view-search input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px 8px 34px;
  color: var(--text-primary);
  font-size: 13px;
}
.chat-history-view-search input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--teal-glow);
}
.chat-history-view-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 6px 8px;
}
.chat-history-view-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  flex-shrink: 0;
}

/* History toggle button - active state */
.chat-history-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.chat-history-group-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 12px 12px 6px;
}
.chat-history-row {
  display: flex; align-items: stretch; gap: 4px;
  padding: 10px 8px 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--t-fast);
  margin: 2px 4px;
}
.chat-history-row:hover { background: var(--bg-card); }
.chat-history-row.active {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}
.chat-history-row-main { flex: 1; min-width: 0; }
.chat-history-row-head {
  display: flex; align-items: center; gap: 8px;
}
.chat-history-row-head strong {
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
  color: var(--text-primary);
}
.chat-history-active-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; background: var(--accent);
  padding: 2px 6px; border-radius: 999px;
  flex-shrink: 0;
}
.chat-history-row-snippet {
  font-size: 11px; color: var(--text-muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-history-row-meta {
  font-size: 10px; color: var(--text-muted);
  margin-top: 4px;
}
.chat-history-row-actions {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.chat-history-row:hover .chat-history-row-actions { opacity: 1; }
.icon-btn.small { width: 26px; height: 26px; }
.icon-btn.small svg { width: 12px; height: 12px; }
.chat-history-row-actions .icon-btn:hover { color: var(--accent); }
.chat-history-row-actions .icon-btn[data-row-action="delete"]:hover { color: var(--red); }

.chat-history-empty {
  text-align: center;
  padding: 40px 14px;
  color: var(--text-muted);
}
.chat-history-empty svg { width: 36px; height: 36px; opacity: 0.5; margin-bottom: 8px; }

/* Compact summary banner inside the thread */
.chat-summary-note {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: center;
  font-size: 11px; color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
}
.chat-summary-note svg { width: 12px; height: 12px; }

/* Mini menu (kebab) */
.chat-mini-menu {
  position: fixed;
  z-index: 200;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  display: flex; flex-direction: column;
  gap: 2px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  min-width: 200px;
}
.chat-mini-menu button {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: transparent; border: none;
  color: var(--text-primary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}
.chat-mini-menu button:hover { background: var(--bg-elevated); }
.chat-mini-menu button.danger { color: var(--red); }
.chat-mini-menu button.danger:hover { background: rgba(239, 68, 68, 0.10); }
.chat-mini-menu svg { width: 14px; height: 14px; }

.chat-clear, .chat-close { width: 34px; height: 34px; }
.chat-clear svg, .chat-close svg { width: 16px; height: 16px; }

.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

.chat-welcome {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 18px 4px;
}
.chat-welcome-avatar {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--logo-bg);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--logo-ring) inset;
  margin-bottom: 4px;
}
.chat-welcome-avatar img { width: 32px; height: 32px; }
.chat-welcome h3 { font-size: 18px; font-weight: 700; }
.chat-welcome p { color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.chat-suggestions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}
.chat-suggestion {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-body);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.chat-suggestion:hover { border-color: var(--accent); background: var(--bg-card-hover); transform: translateX(2px); }
.chat-suggestion svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }

.chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.chat-msg-user { justify-content: flex-end; }
.chat-msg-assistant { justify-content: flex-start; }

.chat-msg-user .chat-bubble {
  background: var(--brand-accent-gradient);
  color: white;
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  max-width: 78%;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 4px 14px var(--teal-glow);
}
.chat-msg-assistant .chat-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-body);
  padding: 12px 14px;
  border-radius: 18px 18px 18px 4px;
  max-width: 84%;
  font-size: 14px;
  line-height: 1.55;
}
.chat-msg-assistant .chat-bubble .md p { margin: 0 0 8px; color: var(--text-body); }
.chat-msg-assistant .chat-bubble .md p:last-child { margin-bottom: 0; }
.chat-msg-assistant .chat-bubble .md ul { margin: 6px 0 8px; padding-left: 20px; }
.chat-msg-assistant .chat-bubble .md ol { margin: 6px 0 8px; padding-left: 20px; }
.chat-msg-assistant .chat-bubble .md li { margin-bottom: 2px; }

.chat-typing {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 4px 0;
}
.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: chat-bounce 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.chat-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chat-actions-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chat-actions-count svg { width: 14px; height: 14px; color: var(--accent); }
.chat-accept-all {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: var(--brand-accent-gradient);
  color: white;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--teal-glow);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.chat-accept-all:hover { transform: translateY(-1px); box-shadow: 0 8px 18px var(--blue-glow-strong); }
.chat-accept-all:disabled { opacity: 0.85; cursor: default; transform: none; }
.chat-accept-all.done { background: var(--green); box-shadow: none; }
.chat-accept-all svg { width: 13px; height: 13px; }

.chat-action-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-action-card {
  display: grid;
  /* minmax(0, 1fr) is critical: a plain `1fr` inherits min-content sizing,
     which in a narrow chat panel pushes long titles into a 1-character column
     (each letter on its own line). minmax(0, 1fr) lets the body column shrink
     properly so overflow-wrap / word-break can wrap the text naturally. */
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  align-items: flex-start;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.chat-action-card:hover { border-color: var(--accent); }
.chat-action-card.running { border-color: var(--accent); box-shadow: 0 0 0 3px var(--teal-glow); }
.chat-action-card.done { background: var(--green-soft); border-color: var(--green); }
.chat-action-card.err { border-color: var(--red); background: rgba(239, 68, 68, 0.06); }

.chat-action-card .chat-action-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  margin-top: 2px;
}
.chat-action-card.done .chat-action-icon { background: var(--green); color: white; }
.chat-action-card.err .chat-action-icon { background: rgba(239, 68, 68, 0.15); color: var(--red); }
.chat-action-card .chat-action-icon svg { width: 16px; height: 16px; }

.chat-action-body {
  min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-action-head {
  display: flex; flex-direction: column; gap: 2px;
}
.chat-action-kind {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.chat-action-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  /* overflow-wrap: anywhere lets long unbroken words break only when they
     actually overflow, rather than chopping every character apart. */
  overflow-wrap: anywhere;
  word-break: normal;
  min-width: 0;
}
.chat-action-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chat-action-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 100%;
}
.chat-action-pill svg { width: 11px; height: 11px; color: var(--accent); flex-shrink: 0; }
.chat-action-pill > span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}
.chat-action-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 6px 8px;
  overflow-wrap: anywhere;
  word-break: normal;
  min-width: 0;
  white-space: pre-line;
}
.chat-action-head { min-width: 0; }
.chat-action-run { flex-shrink: 0; white-space: nowrap; }

.chat-action-run {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  align-self: center;
  flex-shrink: 0;
  white-space: nowrap;
  /* hard cap so a long success label can never blow out the grid auto column
     and squeeze the body to one character wide. */
  max-width: 110px;
}
.chat-action-run > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chat-action-run:hover { background: var(--brand-accent-gradient); color: white; border-color: transparent; transform: translateY(-1px); }
.chat-action-run:disabled { opacity: 0.85; cursor: default; transform: none; }
.chat-action-card.done .chat-action-run {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
.chat-action-card.err .chat-action-run {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}
.chat-action-run svg { width: 13px; height: 13px; }

.chat-action-open {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: background var(--t-fast), border-color var(--t-fast);
}

/* Small success note that appears in the card body after Add/Log/Save runs.
   Lives inside the body column (minmax(0, 1fr)) so long summaries wrap
   naturally without disturbing the grid. */
.chat-action-done-note {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 500;
  align-self: flex-start;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}
.chat-action-done-note svg { width: 12px; height: 12px; flex-shrink: 0; }
.chat-action-open:hover { border-color: var(--accent); color: var(--accent); }
.chat-action-open svg { width: 12px; height: 12px; }

/* Legacy single-button styles kept for any older renderers / Open links */
.chat-action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.chat-action-btn:hover { background: var(--brand-accent-gradient); color: white; border-color: transparent; transform: translateY(-1px); }
.chat-action-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
.chat-action-btn.done { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.chat-action-btn.ghost { background: transparent; }
.chat-action-btn svg { width: 14px; height: 14px; }

/* Narrow screens: stack the Run button below the body */
@media (max-width: 520px) {
  .chat-action-card { grid-template-columns: 28px 1fr; }
  .chat-action-card .chat-action-run {
    grid-column: 1 / -1;
    justify-self: flex-end;
  }
}

.chat-error { color: var(--red); font-size: 13px; }

/* Agent deep-link chips — rendered below the answer when the agent returns links */
.agent-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.agent-link-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--bg-elev, #eef); color: var(--text-body); text-decoration: none; border: 1px solid var(--border, #ccd); }
.agent-link-chip:hover { border-color: var(--accent); color: var(--accent); }

.chat-input-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
/* Action buttons sit on their own full-width row below the message box. */
.chat-input-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-input-actions .chat-send { margin-left: auto; }
.chat-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: none;
  min-height: 56px;
  max-height: 160px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.chat-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--teal-glow); }
.chat-send {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: none;
  background: var(--brand-accent-gradient);
  color: white;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px var(--teal-glow-strong);
  flex-shrink: 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.chat-send:hover { transform: translateY(-1px); box-shadow: 0 10px 22px var(--blue-glow-strong); }
.chat-send svg { width: 16px; height: 16px; }

/* Google Drive search toggle */
.chat-drive {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.chat-drive:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.chat-drive svg { width: 16px; height: 16px; stroke-width: 2; }
.chat-drive.active {
  color: #fff;
  background: var(--brand-accent-gradient);
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--teal-glow), 0 6px 16px var(--teal-glow-strong);
}

/* Voice dictation button */
.chat-mic {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.chat-mic:hover { color: var(--accent); border-color: var(--accent); }
.chat-mic svg { width: 16px; height: 16px; stroke-width: 2; }
.chat-mic.listening {
  color: #fff;
  background: linear-gradient(135deg, #EF4444, #B91C1C);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}
.chat-mic.chat-mic-unsupported { opacity: 0.45; cursor: help; }
.chat-mic-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  pointer-events: none;
  border: 2px solid #EF4444;
  opacity: 0;
}
.chat-mic.listening .chat-mic-pulse {
  animation: micPulse 1.4s ease-out infinite;
}
@keyframes micPulse {
  0%   { opacity: 0.6; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* Attach button - matches mic style */
.chat-attach {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.chat-attach:hover { color: var(--accent); border-color: var(--accent); }
.chat-attach svg { width: 16px; height: 16px; stroke-width: 2; }

/* Attachment chip tray (above the input) */
.chat-attach-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
}
.chat-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 6px 8px 6px 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-primary);
}
.chat-attach-chip.err { border-color: var(--red); color: var(--red); }
.chat-attach-chip .chat-attach-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.chat-attach-thumb {
  width: 28px; height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-attach-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--bg-soft, rgba(255,255,255,0.04));
  display: grid; place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.chat-attach-icon svg { width: 14px; height: 14px; }
.chat-attach-x {
  width: 20px; height: 20px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: grid; place-items: center;
}
.chat-attach-x:hover { color: var(--red); background: var(--bg-input); }
.chat-attach-x svg { width: 12px; height: 12px; }
.chat-attach-chip .spin { animation: spin 1s linear infinite; }

/* Inline chips inside a sent user message */
.chat-msg-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.chat-attach-chip.mini {
  padding: 4px 8px;
  font-size: 11px;
  max-width: 180px;
}
.chat-attach-chip.mini svg { width: 12px; height: 12px; }

/* Drag-over highlight on the chat panel */
.chat-panel.chat-drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
}

@media (max-width: 600px) {
  .chat-panel { width: 100vw; border-left: none; }
  .chat-fab { bottom: 16px; right: 16px; width: 54px; height: 54px; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.row { display: flex; align-items: center; gap: 12px; }
/* Toolbar / layout rows (.row.gap-md) wrap when they run out of room so filter
   chips, date pickers and side-by-side columns stack instead of pushing the
   page into horizontal scroll on laptops and phones. */
.row.gap-md { flex-wrap: wrap; }
.row.gap-sm { flex-wrap: wrap; }
/* Segmented filter controls wrap onto a second line rather than overflow. */
.seg { flex-wrap: wrap; }
/* Replaced controls never force their container wider than the viewport
   (long <option> text gives selects a huge intrinsic width). */
select { max-width: 100%; }
input[type="date"] { max-width: 100%; }
/* Card header control clusters (e.g. Reports P&L: Accrual/Cash + FY select)
   wrap inside the card instead of blowing it out on narrow screens. */
.card-header { flex-wrap: wrap; min-width: 0; }
.card-header .row { flex-wrap: wrap; min-width: 0; }
/* Form rows: when a .row lays out form fields side-by-side, align them to the
   TOP so a field with helper text (or a taller control) doesn't vertically
   centre its neighbours out of alignment. Labels get a one-line min-height so
   inputs start at the same y even when label lengths differ. (Site-wide fix.) */
.row:has(> .field) { align-items: flex-start; }
.row > .field > .label { min-height: 14px; }
.row > .field { min-width: 0; }
.col { display: flex; flex-direction: column; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gap-xs { gap: 4px; }
.gap-sm { gap: 6px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 20px; }
.flex-1 { flex: 1; }
.muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 14px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 14px; }
.mt-4 { margin-top: 16px; }
.text-right { text-align: right; }
.hidden { display: none !important; }
.click { cursor: pointer; }

/* ==========================================================================
   BULK SELECT (shared - activities / goals / targets)
   ========================================================================== */

/* Each selectable item gets a small checkbox overlay in its top-left corner.
   Hidden by default; visible on hover, when selected, or when there's already
   a selection in progress on the page. We reserve horizontal space at the top
   of cards so the checkbox never overlaps priority / status pills. */
.bulk-selectable .bulk-select-box {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  z-index: 5;
  box-sizing: border-box;
  overflow: hidden;
}
.bulk-selectable:hover .bulk-select-box,
.bulk-has-selection .bulk-selectable .bulk-select-box,
.bulk-selected .bulk-select-box {
  opacity: 1;
}
.bulk-selectable:hover .bulk-select-box {
  border-color: var(--accent);
}
.bulk-select-box .bulk-select-checkbox {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  /* native appearance off so the browser's checkbox chrome never bleeds
     through (Firefox especially likes to render its own tick on top). */
  -webkit-appearance: none;
  appearance: none;
}
/* CSS-only tick mark, drawn dead-centre with a rotated bottom-right border. */
.bulk-select-box::after {
  content: '';
  position: absolute;
  /* Box is 18x18 with 1.5px border. Centre a 5x9 tick visually. */
  top: 1px;
  left: 6px;
  width: 4px;
  height: 9px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: border-color var(--t-fast);
  pointer-events: none;
}
.bulk-selected .bulk-select-box {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
}
.bulk-selected .bulk-select-box::after {
  border-color: white;
}
.bulk-selected.kanban-card,
.bulk-selected.card {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Reserve room for the checkbox so it never overlaps the priority / status
   pills at the top of the card. Subtle constant padding looks cleaner than
   shifting layout when the box appears. */
.bulk-selectable.kanban-card .kanban-card-head { padding-left: 24px; min-height: 22px; }
.bulk-selectable.card > .row:first-child,
.bulk-selectable.card > .card-header:first-child { padding-left: 24px; }

/* Table-row variant: bulk-select.js inserts a dedicated <td class="bulk-cell">
   at the start of every selectable row, so the checkbox lives inside that
   cell rather than absolutely positioned. This avoids competing with any
   existing first column (e.g. activities' "done" toggle). */
tr.bulk-selectable { position: relative; }
.bulk-cell {
  width: 32px;
  padding: 8px 4px 8px 12px !important;
  vertical-align: middle;
}
.bulk-cell .bulk-select-box {
  /* Must stay a positioning context (not static) so the ::after tick is
     placed inside this 18px box rather than escaping to the <tr>. */
  position: relative;
  /* Reset the absolute-variant offsets (top/left:8px) inherited from
     `.bulk-selectable .bulk-select-box` — once position is relative those
     offsets nudge the box 8px down/right, misaligning it from the row text. */
  top: 0;
  left: 0;
  display: inline-flex;
  vertical-align: middle;
  opacity: 1;
}
tr.bulk-selected td {
  background: var(--accent-soft);
}

/* Floating bottom action bar */
.bulk-action-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 30px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  padding: 6px 10px;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.bulk-action-bar.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.bulk-action-bar-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bulk-action-count {
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.bulk-action-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
}
.bulk-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.bulk-action-btn:hover { transform: translateY(-1px); border-color: var(--accent); }
.bulk-action-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.bulk-action-btn svg { width: 14px; height: 14px; }
.bulk-action-btn.ghost { background: transparent; }
.bulk-action-btn.danger {
  background: var(--red);
  border-color: var(--red);
  color: white;
}
.bulk-action-btn.danger:hover { background: #B91C1C; border-color: #B91C1C; }
.bulk-action-btn.danger:disabled { background: var(--red); opacity: 0.5; }

/* ==========================================================================
   CLAUDE CLI SIGN-IN TERMINAL (Settings -> Connect with Claude)
   A real terminal emulator (xterm.js) renders the CLI's interactive login
   TUI properly - arrow-key menus, colours, correct spacing.
   ========================================================================== */
.claude-term {
  margin-top: 14px;
  padding: 0;
  background: #0F172A;
  border-color: #1E293B;
  overflow: hidden;
}
.claude-term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: #0F172A;
  border-bottom: 1px solid #1E293B;
}
.claude-term-bar strong { color: #fff; font-size: 13px; }
.claude-term-bar svg { color: #00C0A5; width: 14px; height: 14px; }
.claude-term-state {
  background: #1E40AF; color: #fff;
  font-size: 10.5px; font-weight: 600;
}
.claude-term-state[data-state="finished"] { background: #065F46; }
.claude-term-state[data-state="error"]    { background: #991B1B; }
.claude-term-screen {
  height: 380px;
  background: #020617;
  padding: 8px 6px 8px 10px;
}
.claude-term-screen .xterm { height: 100%; }
.claude-term-screen .xterm-viewport { background: transparent !important; }
.claude-term-tip {
  padding: 8px 12px;
  font-size: 12px;
  color: #94A3B8;
  background: #0F172A;
  border-top: 1px solid #1E293B;
  line-height: 1.5;
}
.claude-term-tip strong { color: #E2E8F0; }

/* Agent quick-reply chips (Yes / No / per-project disambiguation buttons) */
.agent-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.agent-quick-reply {
  font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--bg-card, #11203a); color: var(--text-body, #e6edf6);
  border: 1px solid var(--accent, #0aa3c2);
}
.agent-quick-reply:hover { background: var(--accent, #0aa3c2); color: #fff; }

/* PWA install pill + instructions modal */
.pwa-install-pill {
  position: fixed; left: 16px; bottom: 16px; z-index: 1200;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--accent, #0aa3c2); color: #fff; border: 0;
  font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.pwa-install-pill:hover { filter: brightness(1.05); }
.pwa-install-pill i { width: 16px; height: 16px; }
/* Don't let the floating install pill cover an open modal's footer/buttons. */
body:has(.modal-backdrop) .pwa-install-pill,
body:has(.pwa-install-overlay) .pwa-install-pill { display: none; }
.pwa-install-overlay {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,16,.6); padding: 20px;
}
.pwa-install-card {
  background: var(--bg-card, #11203a); color: var(--text-body, #e6edf6);
  border: 1px solid var(--border, #22344f); border-radius: 16px;
  padding: 24px; max-width: 24rem; width: 100%; text-align: center;
}
.pwa-install-logo { width: 64px; height: 64px; margin: 0 auto 6px; }
.pwa-install-card h2 { margin: 0 0 10px; font-size: 18px; }
.pwa-install-card ol { text-align: left; margin: 10px 0; padding-left: 20px; line-height: 1.7; }
.pwa-install-card .pwa-install-note { font-size: 12px; color: var(--text-muted, #9fb0c4); }
.pwa-install-card .btn { margin-top: 12px; }

/* Offline banner + queued message bubbles */
.offline-banner {
  position: fixed; left: 0; right: 0; top: 0; z-index: 1500;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: 13px; line-height: 1.4;
  background: #7c4a03; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.offline-banner i { width: 18px; height: 18px; flex: 0 0 auto; }
.chat-msg.queued .chat-bubble { opacity: .85; }
.chat-msg.queued .queued-note {
  font-size: 11px; color: var(--text-muted, #9fb0c4); margin-top: 3px; font-style: italic;
}

/* ===== Dedicated chat-app mode (installed PWA opens straight into the AI chat) ===== */
html.l8-chat-app, html.l8-chat-app body { background: #070b16; height: 100%; overflow: hidden; }
.l8-chat-app .app-shell,
.l8-chat-app .chat-fab,
.l8-chat-app .pwa-install-pill,
.l8-chat-app .save-banner { display: none !important; }

.l8-chat-app .chat-panel {
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0;
  box-shadow: none; transform: none !important; opacity: 1 !important;
  display: flex; flex-direction: column;
  background:
    radial-gradient(130% 55% at 50% -8%, rgba(10,163,194,.16), transparent 62%),
    #070b16;
}
/* App-bar header with iPhone notch / safe-area support */
.l8-chat-app .chat-header {
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  padding-bottom: 12px;
  background: rgba(7,11,22,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(120,150,190,.16);
}
.l8-chat-app .chat-title strong { font-size: 15px; letter-spacing: .2px; }
/* Strip internal-power-user controls for a clean mobile chat */
.l8-chat-app .chat-close,
.l8-chat-app .chat-drive,
.l8-chat-app .chat-context-pill { display: none !important; }

.l8-chat-app .chat-thread { flex: 1 1 auto; min-height: 0; padding: 16px; }
.l8-chat-app .chat-input-row {
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: rgba(7,11,22,.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(120,150,190,.16);
}
.l8-chat-app .chat-input { font-size: 16px; }   /* 16px stops iOS zoom-on-focus */
.l8-chat-app [data-fullsite] { margin-left: 2px; }

/* Friendly empty-state for the assistant app */
.l8-chat-app .chat-thread:empty::before {
  content: "Ask me anything about your CRM — projects, clients, sales, overdue invoices. Type or tap the mic.";
  display: block; max-width: 22rem; margin: 18vh auto 0; text-align: center;
  color: #8aa0bd; font-size: 14px; line-height: 1.6;
}

/* Install chooser: OS picker + graphical iOS/Android steps */
.pwa-install-sub { font-size: 13px; color: var(--text-muted, #9fb0c4); margin: 2px 0 14px; }
.pwa-os-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pwa-os-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px; border-radius: 14px; cursor: pointer;
  background: var(--bg-elev, #0f1c33); color: var(--text-body, #e6edf6);
  border: 1px solid var(--border, #22344f); font-size: 13px; font-weight: 600;
}
.pwa-os-btn:hover { border-color: var(--accent, #0aa3c2); }
.pwa-os-btn i { width: 26px; height: 26px; color: var(--accent, #0aa3c2); }
.pwa-install-later { margin-top: 14px; background: none; border: 0; color: var(--text-muted, #9fb0c4); font-size: 13px; cursor: pointer; }
.pwa-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--text-muted, #9fb0c4); font-size: 13px; cursor: pointer; margin-bottom: 4px; }
.pwa-phone {
  position: relative; width: 92px; height: 92px; margin: 4px auto 8px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #16263f, #0b1525); border: 2px solid rgba(120,150,190,.25);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.pwa-phone img { width: 54px; height: 54px; border-radius: 12px; }
.pwa-phone-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 30px; height: 5px; border-radius: 3px; background: rgba(120,150,190,.4); }
.pwa-steps { list-style: none; padding: 0; margin: 8px 0 6px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.pwa-steps li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 11px; font-size: 13.5px; line-height: 1.4; }
.pwa-step-num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent, #0aa3c2); color: #fff; font-size: 12px; font-weight: 700; }
.pwa-steps i { width: 20px; height: 20px; color: var(--accent, #0aa3c2); }

/* ===== Install popup: hard mobile fit (px/vw, never rem — the app scales its
   root font-size up on phones, which blew 24rem out past the screen) ===== */
.pwa-install-overlay { box-sizing: border-box; padding: 16px; }
.pwa-install-overlay * { box-sizing: border-box; }
.pwa-install-card {
  width: 100%;
  max-width: min(340px, calc(100vw - 32px)) !important;
  max-height: 88dvh; overflow-y: auto;
  padding: 20px !important;
  font-size: 14px;
}
.pwa-install-card h2 { font-size: 19px !important; line-height: 1.25; margin: 6px 0 4px; overflow-wrap: anywhere; }
.pwa-install-sub { font-size: 13px !important; line-height: 1.45; }
.pwa-install-logo { width: 54px !important; height: 54px !important; }
.pwa-install-card ol, .pwa-steps li { font-size: 13px !important; line-height: 1.45; }
.pwa-os-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.pwa-os-btn { padding: 14px 6px !important; font-size: 13px !important; }
.pwa-os-btn span { overflow-wrap: anywhere; }
.pwa-os-btn i { width: 24px !important; height: 24px !important; }
.pwa-phone { width: 82px !important; height: 82px !important; }
.pwa-phone img { width: 48px !important; height: 48px !important; }
.pwa-install-card .btn { font-size: 14px !important; padding: 10px 18px !important; }
.pwa-install-later { font-size: 13px !important; }
@media (max-width: 380px) { .pwa-os-grid { grid-template-columns: 1fr; } }

/* Force the install overlay to the true viewport so it can't inherit the wide
   (non-responsive) page width — guarantees the card centres on the screen. */
.pwa-install-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100dvh !important; max-width: 100vw !important;
  margin: 0 !important;
}
/* Apply the same viewport-fit guard to the chat-app shell so the installed app
   never inherits the wide layout either. */
.l8-chat-app .chat-panel { width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; }

/* ============================================================
   Modern chat-app design (installed PWA) — refined dark, airy,
   ChatGPT/Claude-grade. Plus global polish for reply chips and
   confirm cards so the buttons sit below the message, well spaced.
   ============================================================ */

/* --- App background & layout --- */
html.l8-chat-app, .l8-chat-app body { background: #080d18; }
.l8-chat-app .chat-panel {
  background:
    radial-gradient(140% 50% at 50% -6%, rgba(20,140,196,.18), transparent 60%),
    linear-gradient(180deg, #0a1020, #080d18);
  color: #e7eef7;
}
.l8-chat-app .chat-thread { padding: 18px 14px 10px; }
.l8-chat-app .chat-msg { margin: 14px 0; gap: 10px; align-items: flex-start; }

/* --- Header: glass app bar, soft glassy icon buttons (no white squares) --- */
.l8-chat-app .chat-header { gap: 8px; align-items: center; }
.l8-chat-app .chat-title strong { font-weight: 650; }
.l8-chat-app .chat-header .icon-btn {
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  color: #c4d6ea; display: inline-flex; align-items: center; justify-content: center;
}
.l8-chat-app .chat-header .icon-btn:hover { background: rgba(255,255,255,.10); color: #fff; }
.l8-chat-app .chat-avatar { width: 38px; height: 38px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.l8-chat-app .chat-avatar.small { width: 30px; height: 30px; border-radius: 9px; }
.l8-chat-app .chat-session-chip { color: #9fb3c9; }

/* --- Assistant: clean, no harsh bubble (text flows) --- */
.l8-chat-app .chat-msg-assistant .chat-bubble {
  background: transparent; border: 0; box-shadow: none; padding: 1px 0; color: #e7eef7;
  font-size: 15px; line-height: 1.55; max-width: 100%;
}
.l8-chat-app .chat-msg-assistant .md { font-size: 15px; line-height: 1.6; }

/* --- User: refined blue bubble, right-aligned --- */
.l8-chat-app .chat-msg-user { justify-content: flex-end; }
.l8-chat-app .chat-msg-user .chat-bubble {
  background: linear-gradient(135deg, #1b8fcf, #0aa3c2);
  color: #fff; border: 0; border-radius: 20px 20px 6px 20px;
  padding: 11px 15px; max-width: 84%; font-size: 15px; line-height: 1.5;
  box-shadow: 0 8px 22px rgba(10,120,160,.28);
}

/* --- Input bar: dark glass, comfortable, no jarring white --- */
.l8-chat-app .chat-input-row {
  background: rgba(9,14,26,.9); border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: flex-end; gap: 8px;
}
.l8-chat-app .chat-input {
  background: rgba(255,255,255,.055); color: #eaf1fa;
  border: 1px solid rgba(255,255,255,.13); border-radius: 18px;
  padding: 12px 15px; font-size: 16px; line-height: 1.4;
}
.l8-chat-app .chat-input::placeholder { color: #7e92ab; }
.l8-chat-app .chat-attach, .l8-chat-app .chat-mic {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.06); color: #c4d6ea; border: 1px solid rgba(255,255,255,.12);
  display: inline-flex; align-items: center; justify-content: center;
}
.l8-chat-app .chat-mic.listening { background: #e0466b; color: #fff; border-color: #e0466b; }
.l8-chat-app .chat-send {
  width: 46px; height: 46px; border-radius: 50%; border: 0; color: #fff;
  background: linear-gradient(135deg, #1b8fcf, #0aa3c2);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(10,140,180,.4);
}

/* --- Quick-reply chips: BELOW the message, full-width, well spaced (global) --- */
.agent-quick-replies { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.agent-quick-reply {
  flex: 1 1 auto; min-width: 120px; text-align: center; justify-content: center;
  font-size: 14.5px; font-weight: 600; padding: 12px 18px; border-radius: 14px; cursor: pointer;
  background: rgba(20,140,196,.12); color: #bfe6f2; border: 1px solid rgba(20,140,196,.45);
  transition: background .15s, transform .05s;
}
.agent-quick-reply:hover { background: rgba(20,140,196,.3); color: #fff; }
.agent-quick-reply:active { transform: translateY(1px); }

/* --- Confirm/action cards: button below, full-width, primary CTA (global) --- */
.chat-action-card { flex-wrap: wrap; }
.chat-action-card .chat-action-run {
  flex: 1 0 100%; width: 100%; margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #1b8fcf, #0aa3c2); color: #fff; border: 0;
  border-radius: 13px; padding: 12px 16px; font-size: 14.5px; font-weight: 650; cursor: pointer;
}
.chat-action-card .chat-action-run:hover { filter: brightness(1.07); }
.l8-chat-app .chat-action-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px; padding: 14px; margin-top: 12px;
}
.l8-chat-app .agent-links { margin-top: 12px; }
.l8-chat-app .agent-link-chip {
  background: rgba(255,255,255,.06); color: #cfe0f0; border: 1px solid rgba(255,255,255,.14);
  padding: 8px 13px; border-radius: 12px; font-size: 13.5px;
}

/* Install chooser OS buttons: white label on the dark button (was dark-on-dark) */
.pwa-os-btn, .pwa-os-btn span { color: #fff !important; }
.pwa-os-btn i { color: #38c6e6 !important; }

/* Centre the OS button content vertically (was sitting at the bottom) */
.pwa-os-btn { justify-content: center !important; }

/* Install-now button (Android/desktop) + switch link — forced centring */
.pwa-install-now {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 9px; width: 100%; margin-top: 8px; padding: 16px 18px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg,#1b8fcf,#0aa3c2); color: #fff !important;
  font-size: 16px; font-weight: 700; line-height: 1;
  box-shadow: 0 8px 22px rgba(10,140,180,.4);
}
.pwa-install-now i, .pwa-install-now svg { width: 20px !important; height: 20px !important; color: #fff !important; }
.pwa-install-now span { color: #fff !important; }
.pwa-install-now:hover { filter: brightness(1.06); }
.pwa-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.pwa-switch { background: none !important; border: 0 !important; color: #7fd7ec !important; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 6px 2px; }

/* Install diagnostic status box */
.pwa-diag {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px; text-align: left;
  background: rgba(255,170,40,.10); border: 1px solid rgba(255,170,40,.35);
  color: #ffd9a3; font-size: 13px; line-height: 1.5;
}
.pwa-diag strong { color: #fff; }

/* Readable diagnostic box: dark text on a light surface (was light-on-light) */
.pwa-diag {
  background: #fff6e6 !important; border: 1px solid #e0a23c !important;
  color: #3a2600 !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.55 !important;
}
.pwa-diag strong { color: #1a1100 !important; }

/* =================================================================
   CHAT APP — LIGHT & READABLE BY DEFAULT, brand-adaptive (--accent).
   Dark mode is opt-in via html.l8-chat-dark (toggle in the header).
   These rules come last and use !important so text is always legible
   regardless of the app's data-theme.
   ================================================================= */
html.l8-chat-app, html.l8-chat-app body { background: #eef2f7 !important; }
.l8-chat-app .chat-panel {
  background: linear-gradient(180deg, #f8fafc, #eef2f7) !important;
  color: #1f2937 !important;
}
.l8-chat-app .chat-header {
  background: rgba(255,255,255,.9) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.l8-chat-app .chat-title strong { color: #0f172a !important; }
.l8-chat-app .chat-session-chip { color: #64748b !important; }
.l8-chat-app .chat-header .icon-btn {
  background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #475569 !important;
}
.l8-chat-app .chat-header .icon-btn:hover { background: #f1f5f9 !important; color: #0f172a !important; }

/* Assistant — dark readable text, no bubble */
.l8-chat-app .chat-msg-assistant .chat-bubble { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.l8-chat-app .chat-msg-assistant .chat-bubble,
.l8-chat-app .chat-msg-assistant .md,
.l8-chat-app .chat-msg-assistant .md p,
.l8-chat-app .chat-msg-assistant .md li,
.l8-chat-app .chat-msg-assistant .md ul,
.l8-chat-app .chat-msg-assistant .md ol,
.l8-chat-app .chat-msg-assistant .md h1,
.l8-chat-app .chat-msg-assistant .md h2,
.l8-chat-app .chat-msg-assistant .md h3 { color: #1f2937 !important; }
.l8-chat-app .chat-msg-assistant .md strong { color: #0f172a !important; }
.l8-chat-app .chat-msg-assistant .md a { color: var(--accent, #0a7ea4) !important; text-decoration: underline; }

/* User — brand accent bubble, white text, right aligned */
.l8-chat-app .chat-msg-user .chat-bubble {
  background: var(--accent, #0aa3c2) !important; color: #fff !important;
  border-radius: 20px 20px 6px 20px !important; box-shadow: 0 6px 16px rgba(2,132,170,.22) !important;
}
.l8-chat-app .chat-msg-user .chat-bubble * { color: #fff !important; }

/* Input bar — white & clean */
.l8-chat-app .chat-input-row { background: rgba(255,255,255,.94) !important; border-top: 1px solid #e2e8f0 !important; }
.l8-chat-app .chat-input { background: #fff !important; color: #0f172a !important; border: 1px solid #d3dbe6 !important; }
.l8-chat-app .chat-input::placeholder { color: #94a3b8 !important; }
.l8-chat-app .chat-attach, .l8-chat-app .chat-mic { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; }
.l8-chat-app .chat-mic.listening { background: #e0466b !important; color: #fff !important; border-color: #e0466b !important; }
.l8-chat-app .chat-send { background: var(--accent, #0aa3c2) !important; color: #fff !important; }

/* Quick replies, action cards, links on light */
.l8-chat-app .agent-quick-reply {
  background: color-mix(in srgb, var(--accent, #0aa3c2) 10%, #fff) !important;
  color: #0a5a72 !important; border: 1px solid color-mix(in srgb, var(--accent, #0aa3c2) 40%, #fff) !important;
}
.l8-chat-app .agent-quick-reply:hover { background: var(--accent, #0aa3c2) !important; color: #fff !important; }
.l8-chat-app .chat-action-card { background: #fff !important; border: 1px solid #e2e8f0 !important; color: #1f2937 !important; }
.l8-chat-app .chat-action-card .chat-action-kind,
.l8-chat-app .chat-action-card .chat-action-title { color: #0f172a !important; }
.l8-chat-app .agent-link-chip { background: #fff !important; color: #0a5a72 !important; border: 1px solid #cdd8e6 !important; }
.l8-chat-app .chat-thread:empty::before { color: #64748b !important; }

/* History / sessions view + any var-driven chat surfaces. These use the theme
   variables (--bg-elevated, --bg-input, --border…) which are dark by default,
   so in LIGHT mode the session-history header, the "Search sessions" bar, the
   "Back to chat / New chat" footer and the band above the composer all showed
   dark. Re-point the variables to light values for light chat-app mode. */
html.l8-chat-app:not(.l8-chat-dark) {
  --bg: #eef2f7 !important;
  --bg-card: #ffffff !important;
  --bg-card-hover: #f1f5f9 !important;
  --bg-elevated: #f1f5f9 !important;
  --bg-input: #ffffff !important;
  --bg-subtle: #f8fafc !important;
  --border: #e2e8f0 !important;
  --border-strong: #cbd5e1 !important;
  --text-primary: #0f172a !important;
  --text-body: #1f2937 !important;
  --text-secondary: #475569 !important;
  --text-muted: #64748b !important;
}
.l8-chat-app:not(.l8-chat-dark) .chat-history-view,
.l8-chat-app:not(.l8-chat-dark) .chat-session-panel { background: #f8fafc !important; }
.l8-chat-app:not(.l8-chat-dark) .chat-history-view-search,
.l8-chat-app:not(.l8-chat-dark) .chat-history-view-foot { background: #ffffff !important; }
/* "Back to chat" + any plain footer buttons: readable on light */
.l8-chat-app:not(.l8-chat-dark) .chat-history-view-foot button:not(.btn-primary):not([class*="accent"]) {
  background: #f1f5f9 !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important;
}

/* ----- Dark mode (opt-in) ----- */
html.l8-chat-app.l8-chat-dark, html.l8-chat-app.l8-chat-dark body { background: #080d18 !important; }
.l8-chat-dark .chat-panel { background: linear-gradient(180deg,#0c1426,#080d18) !important; color: #e7eef7 !important; }
.l8-chat-dark .chat-header { background: rgba(10,16,30,.82) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.l8-chat-dark .chat-title strong { color: #fff !important; }
.l8-chat-dark .chat-header .icon-btn { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.1) !important; color: #c4d6ea !important; }
.l8-chat-dark .chat-msg-assistant .chat-bubble,
.l8-chat-dark .chat-msg-assistant .md,
.l8-chat-dark .chat-msg-assistant .md p,
.l8-chat-dark .chat-msg-assistant .md li { color: #e7eef7 !important; }
.l8-chat-dark .chat-msg-assistant .md strong { color: #fff !important; }
.l8-chat-dark .chat-input-row { background: rgba(10,16,30,.9) !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
.l8-chat-dark .chat-input { background: rgba(255,255,255,.06) !important; color: #eaf1fa !important; border: 1px solid rgba(255,255,255,.13) !important; }
.l8-chat-dark .chat-input::placeholder { color: #7e92ab !important; }
.l8-chat-dark .chat-attach, .l8-chat-dark .chat-mic { background: rgba(255,255,255,.06) !important; color: #c4d6ea !important; border: 1px solid rgba(255,255,255,.12) !important; }
.l8-chat-dark .chat-action-card { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.1) !important; color: #e7eef7 !important; }
.l8-chat-dark .agent-link-chip { background: rgba(255,255,255,.06) !important; color: #cfe0f0 !important; border: 1px solid rgba(255,255,255,.14) !important; }
.l8-chat-dark .chat-thread:empty::before { color: #93a4bb !important; }

/* Confirm/approval card — readable + full-width Approve button (no truncation) */
.chat-action-card { display: flex !important; flex-wrap: wrap !important; align-items: flex-start; gap: 10px; }
.chat-action-card .chat-action-body { flex: 1 1 auto; min-width: 0; }
.chat-action-card .chat-action-run {
  flex: 1 0 100% !important; width: 100% !important; min-width: 0 !important;
  margin-top: 12px !important; justify-content: center !important; white-space: nowrap;
  padding: 13px 16px !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 12px !important;
}
.chat-action-card .chat-action-run span { overflow: visible !important; max-width: none !important; }
.l8-chat-app .chat-action-card { background: #fff !important; border: 1px solid #e2e8f0 !important; padding: 16px !important; }
.l8-chat-app .chat-action-card .chat-action-kind { color: var(--accent, #0aa3c2) !important; font-weight: 700; }
.l8-chat-app .chat-action-card .chat-action-title { color: #0f172a !important; font-weight: 650; }
.l8-chat-app .chat-action-card .chat-action-desc { color: #334155 !important; font-style: italic; margin-top: 4px; }
.l8-chat-app .chat-actions-count { color: #64748b !important; }

/* Pull-to-refresh indicator (installed app) */
@keyframes l8spin { to { transform: rotate(360deg); } }
.l8-ptr {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 5px 16px rgba(0,0,0,.2);
  color: var(--accent, #0aa3c2); opacity: 0; z-index: 6; pointer-events: none;
}
.l8-ptr i { width: 20px; height: 20px; }
.l8-ptr.ready { background: var(--accent, #0aa3c2); color: #fff; }
.l8-ptr.spinning { opacity: 1 !important; transform: translateX(-50%) translateY(60px) !important; }
.l8-ptr.spinning i { animation: l8spin .8s linear infinite; }
.l8-chat-dark .l8-ptr { background: #16263f; box-shadow: 0 5px 16px rgba(0,0,0,.5); }

/* Install popup: pin the CARD to the viewport centre via fixed positioning, so a
   tall / non-responsive page can never push it off-screen. */
.pwa-install-overlay {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100dvh !important;
  background: rgba(4,8,16,.6) !important; z-index: 4000 !important;
}
.pwa-install-card {
  position: fixed !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100vw - 32px) !important; max-width: 360px !important;
  max-height: 88dvh !important; overflow-y: auto !important; margin: 0 !important;
}
/* 'Update app' pill (installed app, new version ready) — green to distinguish */
.pwa-update-pill { background: #16a34a !important; }

/* Native <dialog> install popup — centres itself in the top layer (bulletproof) */
dialog.pwa-install-dialog {
  border: 0; padding: 0; background: transparent; color: inherit;
  max-width: 100vw; max-height: 100dvh; overflow: visible;
}
dialog.pwa-install-dialog::backdrop { background: rgba(4,8,16,.62); }
.pwa-install-dialog .pwa-install-card {
  position: static !important; transform: none !important; inset: auto !important;
  top: auto !important; left: auto !important; margin: 0 !important;
  width: calc(100vw - 32px) !important; max-width: 360px !important;
  max-height: 88dvh !important; overflow-y: auto !important;
}

/* Build tag in the install popup (deployment diagnostic) */
.pwa-build { font-size: 10px; color: #94a3b8; text-align: center; margin-top: 10px; letter-spacing: .3px; }

/* DEFINITIVE install-popup centring: viewport-fixed overlay + flexbox. The card
   is forced back to static (earlier rules made it position:fixed, which Chrome
   anchored to the wrong box). Flexbox in a viewport-sized overlay always centres. */
.pwa-install-overlay {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100dvh !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 16px !important; box-sizing: border-box !important;
  background: rgba(4,8,16,.62) !important; z-index: 4000 !important; overflow-y: auto !important;
}
.pwa-install-overlay .pwa-install-card {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; inset: auto !important;
  transform: none !important; margin: auto !important;
  width: 100% !important; max-width: 360px !important; max-height: 88dvh !important; overflow-y: auto !important;
}

/* ---- Collapsible settings groups (Settings page accordions) ---- */
.settings-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  background: transparent;
}
.settings-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font: inherit;
}
.settings-group-head:hover { background: rgba(127, 127, 127, 0.06); }
.settings-group-caret {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.settings-group[data-open] .settings-group-caret { transform: rotate(90deg); }
.settings-group-heading {
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.settings-group-sub {
  margin-left: auto;
  text-align: right;
  color: var(--text-muted);
  font-size: 12.5px;
}
.settings-group-body { display: none; padding: 4px 18px 18px; }
.settings-group[data-open] .settings-group-body { display: block; }
.settings-group-body > .card:last-child,
.settings-group-body > .grid-2:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .settings-group-sub { display: none; } }

/* ---- Completed (already-approved) chat action cards ---- */
.chat-action-card.is-done { opacity: 0.95; }
.chat-action-card.is-done .chat-action-icon { color: var(--green); }
.chat-action-done-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.chat-action-undo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); cursor: pointer; font-size: 12px; font-weight: 600;
}
.chat-action-undo:hover { color: var(--red); border-color: var(--red); }

/* ---- Sticky "Back to Assistant" pill (installed app, full-site mode) ---- */
.assistant-return-pill {
  position: fixed;
  left: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 9999;                 /* above sidebar, topbar, FAB, everything */
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 16px; border-radius: 999px;
  border: none; cursor: pointer;
  background: var(--accent, #0190d5); color: #fff;
  font-weight: 700; font-size: 13px; font-family: inherit;
  box-shadow: 0 10px 28px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.assistant-return-pill:hover { filter: brightness(1.06); }
.assistant-return-pill:active { transform: translateY(1px); }
.assistant-return-pill i { width: 16px; height: 16px; }

/* ===== Staff permission matrix (Users & Access → edit member) ===== */
.card-section-title { font-size: 13px; letter-spacing: .02em; color: var(--text-secondary); text-transform: uppercase; }
.perm-matrix {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
  max-height: 46vh; overflow-y: auto; padding: 4px 4px 4px 0;
}
.perm-group {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: var(--bg-elevated);
}
.perm-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.perm-group-head strong { font-size: 13.5px; color: var(--text-primary); }
.perm-scope { font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.perm-actions { display: flex; flex-direction: column; gap: 6px; }
.perm-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--text-secondary);
}
.perm-check input { width: 15px; height: 15px; accent-color: var(--accent, #0aa3c2); cursor: pointer; flex-shrink: 0; }
.perm-check:hover { color: var(--text-primary); }

/* ===== Staff dashboard launchpad ===== */
.staff-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.staff-access-pill { align-self: center; }
.staff-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.staff-tile {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.staff-tile:hover {
  border-color: var(--accent, #0aa3c2); transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(2, 132, 170, .12);
}
.staff-tile-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent, #0aa3c2) 14%, transparent);
  color: var(--accent, #0aa3c2);
}
.staff-tile-ic i { width: 22px; height: 22px; }
.staff-tile-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.staff-tile-main strong { font-size: 15px; color: var(--text-primary); }
.staff-tile-desc { font-size: 12.5px; color: var(--text-muted); }
.staff-tile-go { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.staff-tile:hover .staff-tile-go { color: var(--accent, #0aa3c2); }