/* ============================================================
   Lougha Chats — design system (2026)
   Operator-grade editorial. Geist + Fraunces. OKLCH ramps.
   Dynamic light/dark via [data-theme] on <html>.
   ============================================================ */

:root, [data-theme="light"] {
  /* ─── Brand & accent ─── */
  --wa: #25d366;
  --wa-dark: #1da851;
  --wa-soft: oklch(0.85 0.18 150 / 0.18);
  --lougha: #10b7e2;
  --lougha-soft: oklch(0.85 0.10 220 / 0.18);

  /* Single accent — electric cobalt. Used for focus, primary actions,
     active states, links. Color = affordance, not decoration. */
  --accent: oklch(0.52 0.24 264);
  --accent-hover: oklch(0.46 0.24 264);
  --accent-strong: oklch(0.42 0.24 264);
  --accent-soft: oklch(0.52 0.24 264 / 0.10);
  --accent-fg: #ffffff;

  /* ─── Surfaces (warm cream → less harsh for 8h/day operators) ─── */
  --bg: oklch(0.99 0.005 75);
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-sunken: oklch(0.97 0.006 75);
  --surface-hover: oklch(0.965 0.006 75);
  --surface-active: oklch(0.95 0.008 75);

  /* ─── Borders ─── */
  --border: oklch(0.92 0.004 250);
  --border-strong: oklch(0.86 0.005 250);
  --border-subtle: oklch(0.94 0.003 250);

  /* ─── Text ─── */
  --text: oklch(0.18 0.012 250);
  --text-secondary: oklch(0.40 0.010 250);
  --text-tertiary: oklch(0.55 0.008 250);
  --text-muted: oklch(0.65 0.006 250);
  --text-inverse: oklch(0.98 0.005 75);

  /* ─── Status (muted but legible — same hue both themes) ─── */
  --success: oklch(0.60 0.16 150);
  --success-soft: oklch(0.60 0.16 150 / 0.12);
  --warning: oklch(0.72 0.16 75);
  --warning-soft: oklch(0.72 0.16 75 / 0.14);
  --danger: oklch(0.58 0.22 25);
  --danger-soft: oklch(0.58 0.22 25 / 0.10);
  --info: oklch(0.60 0.15 230);
  --info-soft: oklch(0.60 0.15 230 / 0.12);

  /* ─── Gray ramp (back-compat — kept for the 4500-line stylesheet that
       references --gray-XXX directly. Values map to a perceptually-even
       OKLCH ramp; dark theme flips them so legacy code re-themes for free.) */
  --gray-50: oklch(0.985 0.003 75);
  --gray-100: oklch(0.965 0.005 75);
  --gray-200: oklch(0.92 0.004 250);
  --gray-300: oklch(0.85 0.005 250);
  --gray-400: oklch(0.68 0.010 250);
  --gray-500: oklch(0.55 0.010 250);
  --gray-600: oklch(0.42 0.010 250);
  --gray-700: oklch(0.30 0.012 250);
  --gray-800: oklch(0.22 0.012 250);
  --gray-900: oklch(0.15 0.012 250);

  /* ─── Legacy accent colors (kept for components that hard-code them) ─── */
  --indigo-500: #6366f1;
  --pink-500: #ec4899;
  --blue-500: #3b82f6;
  --orange-500: #f97316;
  --violet-500: #8b5cf6;
  --amber-500: #f59e0b;
  --red-500: #ef4444;
  --purple-600: #7e22ce;
  --green-500: #16a34a;
  --green-600: #15803d;

  /* ─── Avatar palette (OKLCH-balanced, equal lightness) ─── */
  --av-1: oklch(0.62 0.18 264);
  --av-2: oklch(0.62 0.18 220);
  --av-3: oklch(0.62 0.16 150);
  --av-4: oklch(0.62 0.18 310);
  --av-5: oklch(0.62 0.18 350);
  --av-6: oklch(0.65 0.16 60);
  --av-7: oklch(0.62 0.14 180);
  --av-8: oklch(0.62 0.16 200);

  /* ─── Geometry ─── */
  --sidebar-w: 360px;
  --topbar-h: 56px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius-bubble: 14px;

  /* ─── Shadows (subtle in light, pronounced in dark) ─── */
  --shadow-sm: 0 1px 2px oklch(0.15 0.012 250 / 0.04);
  --shadow: 0 1px 3px oklch(0.15 0.012 250 / 0.05), 0 4px 12px oklch(0.15 0.012 250 / 0.04);
  --shadow-lg: 0 12px 32px oklch(0.15 0.012 250 / 0.10), 0 4px 12px oklch(0.15 0.012 250 / 0.06);

  /* ─── Typography ─── */
  --font-sans: 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, "Times New Roman", serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  /* ─── Motion ─── */
  --ease: cubic-bezier(0.2, 0.0, 0.0, 1);
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 280ms;

  /* ─── Alias tokens ─── names referenced across app.js inline styles + legacy
     CSS but never defined, so they fell back to nothing → broke dark mode
     (white-on-white dropdowns/selects). Defined ONCE here as var() aliases to
     the themed tokens above, so they auto-flip in dark mode for free (var()
     resolves at use-time against the cascaded [data-theme=dark] value). */
  --primary: var(--accent);
  --primary-soft: var(--accent-soft);
  --primary-strong: var(--accent-strong);
  --accent-50: var(--accent-soft);
  --accent-200: var(--accent-soft);
  --text-primary: var(--text);
  --author-color: var(--accent);
  --muted: var(--text-muted);
  --border-color: var(--border);
  --bg-secondary: var(--surface-sunken);
  --bg-tertiary: var(--surface-hover);
  --row-hover: var(--surface-hover);
  --slider-fill: var(--accent);
  --indigo-600: var(--accent);
  --red-600: var(--danger);
  --radius-md: var(--radius);
  --blue-50: var(--info-soft);
  --blue-100: var(--info-soft);
  --blue-200: var(--info-soft);
  --blue-300: var(--info);
  --blue-400: var(--info);
  --blue-600: var(--info);
  --blue-700: var(--info);

  /* ─── Focus ring — brand green (2026 refresh). One token → global; revert to
       var(--lougha) here if the cyan nav-focus convention is preferred. ─── */
  --focus: var(--wa);
  --focus-ring: var(--wa-soft);
  --focus-w: 2px;
  --focus-offset: 2px;

  /* ─── Density / airy spacing — dense for data (tables/inbox), airy for chrome
       (headers/cards/modals). Theme-invariant px. ─── */
  --pad-cell-y: 9px;
  --pad-cell-x: 16px;
  --pad-card: 16px;
  --pad-header-y: 16px;
  --pad-header-x: 20px;
  --pad-modal-y: 20px;
  --pad-modal-x: 22px;
  --row-h: 36px;
  --row-h-sm: 32px;
  --input-pad-y: 10px;
  --input-pad-x: 14px;
  --input-pad-y-sm: 6px;
  --input-pad-x-sm: 10px;
  --gap-dense: 8px;
  --gap-airy: 16px;

  /* ─── Elevation — alias the (dark-paired) shadow tokens so cards/overlays
       share one elevation language and auto-flip in dark. ─── */
  --elevation-flat: none;
  --elevation-card: var(--shadow-sm);
  --elevation-raised: var(--shadow);
  --elevation-overlay: var(--shadow-lg);
}

/* ================================================================
   SMART TICKET RESOLUTION REPORT — interactive operations cockpit
   Prefix tbr-* is intentionally unique: production carries several
   older report modules whose short .tr-* classes must not collide.
   ================================================================ */
#ticketsReport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 0 30px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  color: var(--text);
}
.tickets-report-loading,
.tickets-report-error {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-secondary);
}
.tickets-report-error { color: var(--danger); }
.tbr-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 128px;
  margin-bottom: 12px;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 20%, var(--accent-soft), transparent 34%),
    linear-gradient(135deg, var(--surface-elevated), var(--surface));
  box-shadow: var(--shadow-sm);
}
.tbr-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}
.tbr-hero-copy { position: relative; min-width: 0; }
.tbr-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--success);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.tbr-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
}
.tbr-hero h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.tbr-hero p {
  max-width: 680px;
  margin: 9px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}
.tbr-hero-actions {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tbr-updated { color: var(--text-tertiary); font-size: 11px; white-space: nowrap; }
.tbr-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.tbr-refresh:hover { background: var(--surface-hover); }
.tbr-refresh svg { width: 15px; height: 15px; }
.tbr-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.tbr-kpi {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 16px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tbr-kpi:hover,
.tbr-kpi.is-active {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.tbr-kpi.is-active::after {
  content: '';
  position: absolute;
  inset: auto 16px 0;
  height: 3px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  background: var(--accent);
}
.tbr-kpi-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  border-radius: 11px;
  background: var(--surface-sunken);
}
.tbr-kpi-icon svg { width: 18px; height: 18px; }
.tbr-tone-danger .tbr-kpi-icon { color: var(--danger); background: var(--danger-soft); }
.tbr-tone-warning .tbr-kpi-icon { color: var(--warning); background: var(--warning-soft); }
.tbr-tone-info .tbr-kpi-icon { color: var(--info); background: var(--info-soft); }
.tbr-kpi-copy { min-width: 0; display: grid; gap: 3px; }
.tbr-kpi-label {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.tbr-kpi-value {
  color: var(--text);
  font-size: 27px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.tbr-kpi-detail { color: var(--text-tertiary); font-size: 10px; }
.tbr-kpi-arrow { color: var(--text-muted); }
.tbr-kpi-arrow svg { width: 15px; height: 15px; }
.tbr-cockpit,
.tbr-analytics {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 12px;
  margin-bottom: 12px;
}
.tbr-analytics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tbr-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.tbr-focus-panel {
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 44%),
    var(--surface);
}
.tbr-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.tbr-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
}
.tbr-panel-head h3,
.tbr-queue-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  letter-spacing: -.01em;
}
.tbr-panel-hint { color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
.tbr-action-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.tbr-action-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface-elevated);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tbr-action-card:hover,
.tbr-action-card.is-active {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--surface-hover);
}
.tbr-action-card > svg { width: 15px; height: 15px; color: var(--text-muted); }
.tbr-action-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
}
.tbr-action-icon svg { width: 17px; height: 17px; }
.tbr-action-copy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; }
.tbr-action-kicker { overflow: hidden; color: var(--text-secondary); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.tbr-action-value { color: var(--text); font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.tbr-action-detail { grid-column: 1 / 3; overflow: hidden; color: var(--text-tertiary); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tbr-stage-bar {
  display: flex;
  width: 100%;
  height: 18px;
  margin: 5px 0 18px;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.tbr-stage-segment { min-width: 3px; height: 100%; padding: 0; border: 0; cursor: pointer; }
.tbr-stage-segment:hover { filter: brightness(1.12); }
.tbr-stage-new { background: var(--info); }
.tbr-stage-waiting-on-contact { background: var(--warning); }
.tbr-stage-waiting-on-us { background: var(--danger); }
.tbr-stage-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tbr-stage-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 10px;
  color: var(--text-secondary);
  text-align: left;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface-sunken);
  cursor: pointer;
}
.tbr-stage-item:hover,
.tbr-stage-item.is-active { border-color: var(--accent); background: var(--surface-hover); }
.tbr-stage-dot { width: 8px; height: 8px; border-radius: 50%; }
.tbr-stage-item span:nth-child(2) { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tbr-stage-item strong { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.tbr-stage-item small { grid-column: 2 / 4; color: var(--text-tertiary); font-size: 9px; }
.tbr-chart-list { display: grid; gap: 6px; }
.tbr-chart-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 7px 9px;
  color: var(--text-secondary);
  text-align: left;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}
.tbr-chart-row:hover,
.tbr-chart-row.is-active { border-color: var(--border); background: var(--surface-hover); }
.tbr-chart-label { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tbr-chart-value { color: var(--text); font-size: 11px; font-variant-numeric: tabular-nums; }
.tbr-chart-track {
  grid-column: 1 / 3;
  height: 5px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.tbr-chart-fill { display: block; height: 100%; border-radius: inherit; }
.tbr-chart-issue { background: var(--accent); }
.tbr-chart-owner { background: var(--lougha); }
.tbr-queue { padding: 0; overflow: hidden; }
.tbr-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.tbr-queue-head h3 { font-size: 18px; }
.tbr-queue-head p { margin: 3px 0 0; color: var(--text-tertiary); font-size: 11px; }
.tbr-search {
  flex: 0 1 330px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.tbr-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tbr-search svg { width: 15px; height: 15px; color: var(--text-muted); }
.tbr-search input {
  min-width: 0;
  width: 100%;
  color: var(--text);
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
}
.tbr-search input::placeholder { color: var(--text-muted); }
.tbr-quick-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-subtle);
  scrollbar-width: none;
}
.tbr-quick-filters::-webkit-scrollbar { display: none; }
.tbr-filter-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.tbr-filter-chip strong {
  min-width: 19px;
  padding: 2px 5px;
  color: var(--text);
  text-align: center;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 10px;
}
.tbr-filter-chip:hover,
.tbr-filter-chip.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.tbr-filter-chip.is-active strong { color: var(--accent); background: var(--surface); }
.tbr-bulk {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 5px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.tbr-bulk.has-selection { background: var(--accent-soft); }
.tbr-select-shown { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 11px; cursor: pointer; }
.tbr-selected-count { margin-right: auto; color: var(--text-tertiary); font-size: 11px; font-variant-numeric: tabular-nums; }
.tbr-bulk-working { color: var(--accent); font-size: 11px; }
.tbr-table { min-width: 0; }
.tbr-ticket-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 34px 58px minmax(220px, .9fr) minmax(320px, 1.35fr) minmax(270px, 1.15fr) minmax(165px, .72fr) minmax(145px, .62fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  min-height: 132px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background .14s ease;
}
.tbr-ticket-row:not(.tbr-table-head):hover { background: var(--surface-hover); }
.tbr-ticket-row.is-selected { background: var(--accent-soft); }
.tbr-table-head {
  min-height: 42px;
  align-items: center;
  padding-block: 6px;
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tbr-cell { min-width: 0; }
.tbr-cell-check { align-self: center; display: grid; place-items: center; }
.tbr-cell-check input,
.tbr-select-shown input { width: 15px; height: 15px; accent-color: var(--accent); }
.tbr-cell-risk { align-self: center; display: grid; place-items: center; }
.tbr-risk-score {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tbr-risk-critical { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.tbr-risk-high { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.tbr-risk-medium { color: var(--info); background: var(--info-soft); }
.tbr-cell-ticket { align-self: center; display: grid; gap: 5px; }
.tbr-cell-ticket > a,
.tbr-cell-ticket > strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tbr-cell-ticket > a:hover { color: var(--accent); text-decoration: underline; }
.tbr-student-link {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.tbr-student-link:hover { color: var(--accent); text-decoration: underline; }
.tbr-ticket-meta { overflow: hidden; color: var(--text-tertiary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tbr-student-details { display: flex; flex-wrap: wrap; gap: 4px; overflow: hidden; }
.tbr-student-details span {
  max-width: 100%;
  padding: 2px 6px;
  overflow: hidden;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tbr-reasons { display: flex; gap: 4px; overflow: hidden; }
.tbr-reason {
  flex: 0 0 auto;
  padding: 2px 6px;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: 10px;
}
.tbr-cell-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 3px 8px;
}
.tbr-context-label {
  padding-top: 1px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.tbr-context-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tbr-context-text.is-missing { color: var(--warning); }
.tbr-team-note { color: var(--text-secondary); }
.tbr-ticket-updated { color: var(--text-tertiary); font-size: 11.5px; }
.tbr-ticket-row.is-expanded .tbr-context-text,
.tbr-ticket-row.is-expanded .tbr-next-copy > span:last-child {
  display: block;
  overflow: visible;
  white-space: normal;
  -webkit-line-clamp: unset;
}
.tbr-last-activity,
.tbr-context-more {
  grid-column: 2;
  width: fit-content;
  padding: 2px 0;
  color: var(--accent);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
}
.tbr-last-activity:hover,
.tbr-context-more:hover { text-decoration: underline; }
.tbr-cell-next { align-self: center; display: flex; align-items: flex-start; gap: 10px; }
.tbr-next-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--accent);
  border-radius: 9px;
  background: var(--accent-soft);
}
.tbr-next-icon svg { width: 17px; height: 17px; }
.tbr-next-copy { min-width: 0; display: grid; gap: 3px; }
.tbr-next-copy strong { overflow: hidden; color: var(--text); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.tbr-next-copy > span:last-child {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.tbr-first-move {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}
.tbr-inline-pill,
.tbr-owner-button {
  max-width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  overflow: hidden;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font: inherit;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.tbr-inline-pill:hover,
.tbr-owner-button:hover { border-color: var(--accent); }
.tbr-status-new { color: var(--info); background: var(--info-soft); }
.tbr-status-waiting-on-contact { color: var(--warning); background: var(--warning-soft); }
.tbr-status-waiting-on-us { color: var(--danger); background: var(--danger-soft); }
.tbr-owner-button svg { width: 13px; height: 13px; flex: 0 0 auto; }
.tbr-owner-button span { overflow: hidden; text-overflow: ellipsis; }
.tbr-owner-button.needs-owner { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.tbr-cell-team {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.tbr-cell-age { color: var(--text-secondary); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.tbr-cell-actions { align-self: center; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.tbr-work-btn,
.tbr-history-btn,
.tbr-icon-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  color: var(--accent-contrast, var(--text-inverse));
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.tbr-work-btn:hover { background: var(--accent-hover); }
.tbr-work-btn svg,
.tbr-history-btn svg,
.tbr-icon-link svg { width: 13px; height: 13px; }
.tbr-history-btn {
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--surface);
}
.tbr-history-btn:hover { color: var(--accent); border-color: var(--accent); }
.tbr-icon-link { width: 32px; padding: 0; color: var(--text-secondary); border: 1px solid var(--border); background: var(--surface); }
.tbr-icon-link:hover { color: var(--accent); border-color: var(--accent); }
.tbr-empty {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text-tertiary);
}
.tbr-empty svg { width: 26px; height: 26px; }
.tbr-empty strong { color: var(--text); font-size: 12px; }
.tbr-empty span { font-size: 10px; }
.tbr-queue-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 54px;
  padding: 9px 18px;
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  font-size: 10px;
}
.tbr-queue-footer span { margin-right: auto; }

@media (max-width: 1750px) {
  .tbr-ticket-row {
    grid-template-columns: 30px 52px minmax(190px, .85fr) minmax(270px, 1.25fr) minmax(220px, 1fr) minmax(145px, .7fr) 128px;
    gap: 8px;
    padding-inline: 12px;
  }
}
@media (max-width: 1200px) {
  .tbr-table-head { display: none; }
  .tbr-ticket-row {
    grid-template-columns: 30px 52px minmax(0, 1fr) minmax(150px, .5fr);
    gap: 10px 12px;
    margin: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
  }
  .tbr-ticket-row:last-child { border-bottom: 1px solid var(--border); }
  .tbr-cell-check { grid-column: 1; grid-row: 1; }
  .tbr-cell-risk { grid-column: 2; grid-row: 1; }
  .tbr-cell-student { grid-column: 3; grid-row: 1; }
  .tbr-cell-team { grid-column: 4; grid-row: 1; }
  .tbr-cell-context { grid-column: 2 / 5; grid-row: 2; }
  .tbr-cell-solution { grid-column: 2 / 5; grid-row: 3; }
  .tbr-cell-actions { grid-column: 2 / 5; grid-row: 4; flex-direction: row; justify-content: flex-start; }
  .tbr-work-btn { min-width: 116px; }
}
@media (max-width: 1100px) {
  .tbr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbr-cockpit,
  .tbr-analytics { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #ticketsReport { padding-bottom: 18px; }
  .tbr-hero { align-items: flex-start; flex-direction: column; padding: 20px; }
  .tbr-hero-actions { width: 100%; justify-content: space-between; }
  .tbr-action-list { grid-template-columns: 1fr; }
  .tbr-queue-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .tbr-search { flex-basis: auto; width: 100%; }
  .tbr-bulk { flex-wrap: wrap; }
  .tbr-selected-count { min-width: 80px; }
  .tbr-ticket-row {
    grid-template-columns: 30px 50px minmax(0, 1fr);
    gap: 9px;
    margin: 10px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
  }
  .tbr-cell-check { grid-column: 1; grid-row: 1; }
  .tbr-cell-risk { grid-column: 2; grid-row: 1; }
  .tbr-cell-student { grid-column: 3; grid-row: 1; }
  .tbr-cell-context { grid-column: 2 / 4; grid-row: 2; grid-template-columns: 1fr; }
  .tbr-cell-context > * { grid-column: 1; }
  .tbr-context-text,
  .tbr-next-copy > span:last-child {
    display: block;
    overflow: visible;
    white-space: normal;
    -webkit-line-clamp: unset;
  }
  .tbr-cell-solution { grid-column: 2 / 4; grid-row: 3; }
  .tbr-cell-team { grid-column: 2 / 4; grid-row: 4; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tbr-cell-actions { grid-column: 2 / 4; grid-row: 5; flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 540px) {
  .tbr-kpis { grid-template-columns: 1fr; }
  .tbr-stage-list { grid-template-columns: 1fr; }
  .tbr-stage-item small { grid-column: auto; }
  .tbr-panel { padding: 14px; }
  .tbr-queue { padding: 0; }
  .tbr-panel-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .tbr-queue-footer { flex-wrap: wrap; }
  .tbr-queue-footer span { width: 100%; }
}

/* ----------------------------------------------------------------
   SMART TICKET 24H CONTROL — compact default operations view
   This layer is deliberately scoped to the control UI. The existing
   analysis cockpit above keeps its current layout and behaviour.
   ---------------------------------------------------------------- */
#ticketsReport {
  container: ticket-report / inline-size;
}

.tbr-control {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
}

.tbr-command {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tbr-command-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
}

.tbr-command .tbr-live-pill {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 8.5px;
  white-space: nowrap;
}

.tbr-command-title,
.tbr-command h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-command-subtitle,
.tbr-command-copy p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-command-actions {
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.tbr-mode-switch {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}

.tbr-mode-btn {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  color: var(--text-secondary);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: 10.5px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.tbr-mode-btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.tbr-mode-btn.is-active,
.tbr-mode-btn[aria-selected="true"],
.tbr-mode-btn[aria-pressed="true"] {
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tbr-mode-btn:focus-visible,
.tbr-track:focus-visible,
.tbr-owner-chip:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.tbr-data-note {
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  color: var(--warning);
  border: 1px solid var(--warning-soft);
  border-radius: 10px;
  background: var(--warning-soft);
  font-size: 10.5px;
  line-height: 1.35;
}

.tbr-data-note svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.tbr-data-note span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-tracks {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tbr-track {
  position: relative;
  min-width: 0;
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 11px 13px;
  overflow: hidden;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.tbr-track::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--border-strong);
}

.tbr-track:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.tbr-track.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-sm);
}

.tbr-track.is-active::before,
.tbr-track.is-protect::before,
.tbr-track-protect::before,
.tbr-track[data-track="protect"]::before {
  background: var(--accent);
}

.tbr-track.is-backlog::before,
.tbr-track-backlog::before,
.tbr-track[data-track="backlog"]::before {
  background: var(--warning);
}

.tbr-track.is-backlog.is-active,
.tbr-track-backlog.is-active,
.tbr-track[data-track="backlog"].is-active {
  border-color: var(--warning);
  background: var(--warning-soft);
  box-shadow: 0 0 0 1px var(--warning-soft), var(--shadow-sm);
}

.tbr-track-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.tbr-track-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border-radius: 9px;
  background: var(--accent-soft);
}

.tbr-track.is-backlog .tbr-track-icon,
.tbr-track-backlog .tbr-track-icon,
.tbr-track[data-track="backlog"] .tbr-track-icon {
  color: var(--warning);
  background: var(--warning-soft);
}

.tbr-track-icon svg { width: 15px; height: 15px; }

.tbr-track-title,
.tbr-track-head strong:not(.tbr-track-count) {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-track-title small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 9.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-track-count {
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

.tbr-track-metrics {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.tbr-track-metric,
.tbr-track-metrics > span {
  min-width: 0;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  overflow: hidden;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
  font-size: 9.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-track-metric strong,
.tbr-track-metrics > span strong {
  color: var(--text);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.tbr-plan-summary,
details.tbr-plan-details {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface);
}

details.tbr-plan-details { overflow: hidden; }

.tbr-plan-summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  color: var(--text-secondary);
  font-size: 10.5px;
  list-style: none;
  cursor: pointer;
}

details.tbr-plan-details > .tbr-plan-summary {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tbr-plan-summary::-webkit-details-marker { display: none; }

.tbr-plan-summary::after {
  content: '›';
  margin-left: auto;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .15s ease;
}

details[open] > .tbr-plan-summary::after { transform: rotate(-90deg); }

.tbr-plan-summary strong {
  color: var(--text);
  font-size: 11px;
}

.tbr-plan-summary > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-plan-summary-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
}

.tbr-plan-summary-icon svg { width: 13px; height: 13px; }

.tbr-plan-summary-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 7px;
  overflow: hidden;
}

.tbr-plan-summary-copy strong { flex: 0 0 auto; }

.tbr-plan-summary-copy > span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-plan-summary > b {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tbr-plan-details[open],
details.tbr-plan-details[open] {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.tbr-plan-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 11px 11px;
  border-top: 1px solid var(--border-subtle);
}

.tbr-plan-metric {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-top: 9px;
}

.tbr-plan-metric label,
.tbr-plan-metric > span:first-child {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 9.5px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-plan-metric input,
.tbr-plan-metric select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: 0;
  background: var(--surface-sunken);
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tbr-plan-metric input:focus,
.tbr-plan-metric select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.tbr-plan-metric strong {
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.tbr-plan-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-tertiary);
  font-size: 9.5px;
  line-height: 1.35;
}

.tbr-owner-band {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 9px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface);
}

.tbr-owner-band-title {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tbr-owner-strip {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.tbr-owner-strip::-webkit-scrollbar { display: none; }

.tbr-owner-chip {
  min-width: 0;
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
  font: inherit;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}

.tbr-owner-chip strong {
  color: var(--text);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.tbr-owner-chip > span {
  color: var(--text-tertiary);
  font-size: 9.5px;
}

.tbr-owner-chip:hover,
.tbr-owner-chip.is-active,
.tbr-owner-chip[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tbr-control-queue {
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tbr-control-queue .tbr-queue-head {
  min-height: 52px;
  gap: 12px;
  padding: 8px 12px;
}

.tbr-queue-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tbr-queue-title h3,
.tbr-queue-title strong {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-queue-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbr-control-queue .tbr-search {
  flex-basis: 300px;
  height: 34px;
}

.tbr-control-filters,
.tbr-control-queue .tbr-quick-filters {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-bottom: 1px solid var(--border-subtle);
  scrollbar-width: none;
}

.tbr-control-filters::-webkit-scrollbar,
.tbr-control-queue .tbr-quick-filters::-webkit-scrollbar { display: none; }

.tbr-control-queue .tbr-bulk {
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: 40px;
  padding: 4px 12px;
  box-shadow: 0 1px 0 var(--border-subtle);
}

.tbr-control-queue .tbr-bulk:not(.has-selection):not(.is-visible) { display: none; }

.tbr-control-row {
  grid-template-columns: 32px 76px minmax(210px, .9fr) minmax(270px, 1.22fr) minmax(220px, 1fr) minmax(135px, .62fr) 130px;
  gap: 9px;
  min-height: 118px;
  padding: 10px 12px;
}

.tbr-target-clock {
  box-sizing: border-box;
  width: 66px;
  min-height: 40px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 5px 6px;
  color: var(--accent);
  text-align: center;
  border: 1px solid var(--accent);
  border-radius: 11px;
  background: var(--accent-soft);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
  font-variant-numeric: tabular-nums;
}

.tbr-target-clock strong {
  color: inherit;
  font-size: 12px;
}

.tbr-target-clock small {
  color: var(--text-tertiary);
  font-size: 8.5px;
  font-weight: 650;
}

.tbr-target-clock.is-due {
  color: var(--warning);
  border-color: var(--warning);
  background: var(--warning-soft);
}

.tbr-target-clock.is-critical,
.tbr-target-clock.is-overdue {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-soft);
}

.tbr-target-clock.is-backlog {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-soft);
}

.tbr-target-clock.is-missing {
  color: var(--text-secondary);
  border-color: var(--border-strong);
  background: var(--surface-sunken);
}

.tbr-batch-pill {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  overflow: hidden;
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The app shell is wide at 2048px, so the dense table earns the space. */
@container ticket-report (min-width: 1200px) {
  .tbr-control-row .tbr-cell-context,
  .tbr-control-row .tbr-cell-solution { align-self: center; }
}

/* At a 1366px browser the report pane is roughly 1046px. Collapse the
   seven-column desktop table into five operational tracks while keeping
   each ticket compact enough for a working queue. */
@container ticket-report (min-width: 720px) and (max-width: 1199px) {
  .tbr-control-queue .tbr-table-head { display: none; }

  .tbr-control-row {
    grid-template-columns: 28px 68px minmax(0, 1fr) minmax(200px, .8fr) 150px;
    grid-template-rows: auto auto;
    gap: 7px 10px;
    min-height: 126px;
    padding: 10px 12px;
    background: var(--surface);
  }

  .tbr-control-row .tbr-cell-check { grid-column: 1; grid-row: 1 / 3; }
  .tbr-control-row .tbr-cell-risk { grid-column: 2; grid-row: 1 / 3; }
  .tbr-control-row .tbr-cell-student { grid-column: 3; grid-row: 1; }
  .tbr-control-row .tbr-cell-context { grid-column: 3; grid-row: 2; }
  .tbr-control-row .tbr-cell-solution { grid-column: 4; grid-row: 1 / 3; }
  .tbr-control-row .tbr-cell-team { grid-column: 5; grid-row: 1; }
  .tbr-control-row .tbr-cell-actions {
    grid-column: 5;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .tbr-control-row .tbr-context-label { font-size: 10.5px; }
  .tbr-control-row .tbr-context-text { font-size: 12px; }
  .tbr-control-row .tbr-work-btn { min-width: 108px; }
}

@container ticket-report (max-width: 719px) {
  .tbr-control { gap: 7px; }

  .tbr-command {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  .tbr-command-title,
  .tbr-command h3 { font-size: 17px; }

  .tbr-command-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .tbr-mode-switch {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .tbr-mode-btn {
    min-width: 0;
    flex: 1 1 auto;
    padding-inline: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tbr-command-actions .tbr-updated { display: none; }
  .tbr-command-actions .tbr-refresh { min-height: 34px; padding-inline: 10px; }

  .tbr-tracks { gap: 6px; }

  .tbr-track {
    min-height: 90px;
    gap: 6px;
    padding: 9px 8px;
  }

  .tbr-track-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
  }

  .tbr-track-icon { display: none; }
  .tbr-track-title,
  .tbr-track-head strong:not(.tbr-track-count) { font-size: 11.5px; }
  .tbr-track-title small { font-size: 8.5px; }
  .tbr-track-count { font-size: 21px; }
  .tbr-track-metrics { gap: 4px; }

  .tbr-track-metric,
  .tbr-track-metrics > span {
    padding: 2px 5px;
    font-size: 8.5px;
  }

  .tbr-track-metrics > :nth-child(n + 3) { display: none; }

  .tbr-plan-summary {
    min-height: 36px;
    padding-inline: 9px;
  }

  .tbr-plan-grid {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 0 9px 9px;
  }

  .tbr-owner-band {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
  }

  .tbr-owner-strip { width: 100%; }

  .tbr-control-queue .tbr-queue-head {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px;
  }

  .tbr-control-queue .tbr-search {
    width: 100%;
    flex-basis: auto;
  }

  .tbr-control-filters,
  .tbr-control-queue .tbr-quick-filters { padding-inline: 9px; }

  .tbr-control-queue .tbr-bulk {
    flex-wrap: wrap;
    padding: 6px 9px;
  }

  .tbr-control-row {
    grid-template-columns: 26px 68px minmax(0, 1fr);
    gap: 8px;
    margin: 7px;
    padding: 10px 9px;
  }

  .tbr-control-row .tbr-cell-check { grid-column: 1; grid-row: 1; }
  .tbr-control-row .tbr-cell-risk { grid-column: 2; grid-row: 1; }
  .tbr-control-row .tbr-cell-student { grid-column: 3; grid-row: 1; }
  .tbr-control-row .tbr-cell-context {
    grid-column: 2 / 4;
    grid-row: 2;
    grid-template-columns: 1fr;
  }
  .tbr-control-row .tbr-cell-context > * { grid-column: 1; }
  .tbr-control-row .tbr-cell-solution { grid-column: 2 / 4; grid-row: 3; }
  .tbr-control-row .tbr-cell-team {
    grid-column: 2 / 4;
    grid-row: 4;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .tbr-control-row .tbr-cell-actions {
    grid-column: 2 / 4;
    grid-row: 5;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .tbr-control-row .tbr-context-text,
  .tbr-control-row .tbr-next-copy > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .tbr-control-row .tbr-context-label { white-space: normal; }
  .tbr-control-row .tbr-last-activity,
  .tbr-control-row .tbr-context-more { grid-column: 1; }

  .tbr-control-row .tbr-cell-actions > * {
    max-width: 100%;
    flex: 1 1 118px;
  }

  .tbr-control-row .tbr-icon-link { flex: 0 0 34px; }
  .tbr-control-queue .tbr-queue-footer { padding-inline: 10px; }
}

@container ticket-report (max-width: 430px) {
  .tbr-track-title small { display: none; }
  .tbr-track-metrics > :nth-child(n + 2) { display: none; }
  .tbr-owner-band-title { font-size: 8.5px; }
  .tbr-control-row .tbr-cell-ticket > a,
  .tbr-control-row .tbr-cell-ticket > strong,
  .tbr-control-row .tbr-student-link { font-size: 13px; }
  .tbr-control-row .tbr-student-details span { max-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .tbr-track,
  .tbr-plan-summary::after { transition: none; }
}

/* ─── Dark theme overrides ──────────────────────────────────────────────
   Same token names, different values. Manual override via the topbar
   toggle (writes data-theme + localStorage). On first load with no saved
   preference, the inline <head> script honours OS prefers-color-scheme. */
[data-theme="dark"] {
  /* Surfaces — cool charcoal, layered for depth */
  --bg: oklch(0.16 0.008 250);
  --surface: oklch(0.20 0.008 250);
  --surface-elevated: oklch(0.24 0.010 250);
  --surface-sunken: oklch(0.18 0.008 250);
  --surface-hover: oklch(0.25 0.010 250);
  --surface-active: oklch(0.28 0.012 250);

  /* Borders — visible but quiet */
  --border: oklch(0.28 0.010 250);
  --border-strong: oklch(0.38 0.012 250);
  --border-subtle: oklch(0.24 0.010 250);

  /* Text — warm whites */
  --text: oklch(0.96 0.005 75);
  --text-secondary: oklch(0.78 0.008 250);
  --text-tertiary: oklch(0.62 0.010 250);
  --text-muted: oklch(0.48 0.010 250);
  --text-inverse: oklch(0.18 0.012 250);

  /* Accent — slightly brighter for dark-bg contrast */
  --accent: oklch(0.70 0.22 264);
  --accent-hover: oklch(0.76 0.22 264);
  --accent-strong: oklch(0.62 0.22 264);
  --accent-soft: oklch(0.70 0.22 264 / 0.20);

  /* Status — brightness pivot for AA contrast on charcoal */
  --success: oklch(0.72 0.16 150);
  --success-soft: oklch(0.72 0.16 150 / 0.18);
  --warning: oklch(0.82 0.15 75);
  --warning-soft: oklch(0.82 0.15 75 / 0.18);
  --danger: oklch(0.72 0.20 25);
  --danger-soft: oklch(0.72 0.20 25 / 0.20);
  --info: oklch(0.74 0.16 230);
  --info-soft: oklch(0.74 0.16 230 / 0.18);

  /* Gray ramp — flipped so var(--gray-900) text stays light in dark mode */
  --gray-50: oklch(0.22 0.010 250);
  --gray-100: oklch(0.26 0.010 250);
  --gray-200: oklch(0.32 0.010 250);
  --gray-300: oklch(0.42 0.010 250);
  --gray-400: oklch(0.55 0.010 250);
  --gray-500: oklch(0.66 0.008 250);
  --gray-600: oklch(0.76 0.008 250);
  --gray-700: oklch(0.86 0.006 250);
  --gray-800: oklch(0.92 0.005 75);
  --gray-900: oklch(0.96 0.005 75);

  /* Brand soft tints — slightly stronger to remain visible on dark surfaces */
  --wa-soft: oklch(0.72 0.16 150 / 0.20);
  --lougha-soft: oklch(0.72 0.14 220 / 0.20);

  /* Shadows — black with more diffusion (dark surfaces eat soft shadows) */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30);
  --shadow: 0 1px 3px oklch(0 0 0 / 0.45), 0 4px 14px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.55), 0 4px 14px oklch(0 0 0 / 0.40);
}

/* ─── Theme-toggle button — sun visible in dark mode, moon in light. */
.theme-toggle { color: var(--text-secondary); transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.theme-toggle:hover { color: var(--text); background: var(--surface-hover); }
.theme-toggle .theme-icon { display: none; }
[data-theme="light"] .theme-toggle .theme-icon-dark,
:root:not([data-theme="dark"]) .theme-toggle .theme-icon-dark { display: inline-flex; }
[data-theme="dark"] .theme-toggle .theme-icon-light { display: inline-flex; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-sans); color: var(--text); background: var(--bg); transition: background var(--motion-normal) var(--ease), color var(--motion-normal) var(--ease); }
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
/* Global keyboard-focus ring — brand green; any focusable lacking its own rule
   inherits this. Only shows on keyboard nav (:focus-visible), never on click. */
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }

/* ═══ Global motion system (2026 CRM refresh) ════════════════════════════════
   View entrance, modal entrance/exit, skeleton, stagger, content fade. Every
   keyframe keeps opacity:0 ONLY in from{} with animation-fill-mode:both — so
   under prefers-reduced-motion (animation:none) the element rests at its natural
   visible state (instant, no flash). Reused tokens: --motion-* + --ease. */
@keyframes viewEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view-enter { animation: viewEnter var(--motion-normal) var(--ease) both; }
.stagger-item { animation: viewEnter var(--motion-normal) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: scale(0.96) translateY(4px); } to { opacity: 1; transform: none; } }
.modal:not(.hidden):not(.modal-side) { animation: overlayIn var(--motion-fast) var(--ease) both; }
.modal:not(.hidden):not(.modal-side) .modal-card { animation: cardIn var(--motion-normal) var(--ease) both; }
.modal.modal-leaving:not(.modal-side) { animation: overlayIn var(--motion-fast) var(--ease) reverse both; }
.modal.modal-leaving:not(.modal-side) .modal-card { animation: cardIn var(--motion-fast) var(--ease) reverse both; }
@keyframes contentIn { from { opacity: 0; } to { opacity: 1; } }
.content-in { animation: contentIn var(--motion-normal) var(--ease) both; }
/* Shared skeleton primitive (one shimmer, reuses skeleton-shimmer keyframe). */
.skeleton { background-image: linear-gradient(100deg, var(--surface-sunken) 25%, var(--surface-hover) 45%, var(--surface-hover) 55%, var(--surface-sunken) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s linear infinite; border-radius: var(--radius); }
.loading-card { height: 168px; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-lg); }
.loading-row { height: 40px; border-radius: var(--radius-sm); margin-bottom: 6px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .view-enter, .stagger-item, .content-in, .skeleton,
  .modal:not(.hidden):not(.modal-side), .modal:not(.hidden):not(.modal-side) .modal-card,
  .modal.modal-leaving:not(.modal-side), .modal.modal-leaving:not(.modal-side) .modal-card { animation: none; }
  html { scroll-behavior: auto; }
}

.muted { color: var(--gray-500); }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.mb12 { margin-bottom: 12px; }
.mobile-only { display: none; }
@media (max-width: 768px) { .mobile-only { display: inline-flex; } }
/* Chat back button — promoted to desktop when there's a cross-chat
 * history stack to pop (set by navigateToChat in app.js). */
body.has-chat-history #chatBackBtn { display: inline-flex; }

/* ─── Lucide icon defaults ─── */
[data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.icon-btn [data-lucide] { width: 18px; height: 18px; }
.icon-btn-sm [data-lucide] { width: 14px; height: 14px; }

/* ─── Buttons (H1: 3-tier height system) ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all 0.15s;
  background: transparent; color: var(--gray-700);
}
.btn:hover { background: var(--gray-100); }
.btn-primary { background: var(--wa); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--wa-dark); }
.btn-ghost { color: var(--gray-600); background: var(--gray-100); }
.btn-ghost:hover { background: var(--gray-200); color: var(--gray-900); }
.btn-block { width: 100%; }
.btn-lg { height: 42px; padding: 0 18px; font-size: 14px; font-weight: 600; }
.btn:disabled, .btn[disabled] {
  opacity: 0.5; cursor: not-allowed; filter: saturate(0.6); pointer-events: none;
}
.btn-primary:disabled { background: var(--gray-300); color: #fff; }
.btn:focus-visible {
  outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset);
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; background: transparent;
  border-radius: var(--radius-sm); color: var(--gray-500); cursor: pointer;
  font-family: inherit;
  transition: all 0.15s; position: relative;
}
.icon-btn:hover { background: var(--gray-100); color: var(--gray-700); }
.icon-btn-primary { background: var(--wa); color: #fff; }
.icon-btn-primary:hover { background: var(--wa-dark); color: #fff; }
.icon-btn-sm {
  width: 26px; height: 26px;
  border: 0; background: transparent; border-radius: 6px;
  color: var(--gray-400); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn-sm:hover { background: var(--gray-200); color: var(--gray-700); }

/* Tooltip */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--gray-900); color: #fff; padding: 4px 8px; border-radius: 6px;
  font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.15s; z-index: 100;
}
.tip:hover::after { opacity: 1; }

.with-badge { position: relative; }
.badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--amber-500); color: #fff;
  font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ─── Inputs ─── */
.input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px; color: var(--text); background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.input::placeholder { color: var(--text-muted); }
.input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.input:disabled { background: var(--surface-sunken); color: var(--text-tertiary); cursor: not-allowed; }

/* ─── Screens / layout ─── */
.screen { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; }

/* ─── Login screen ─── */
.login-screen {
  background: var(--bg);
  position: relative;
}
/* Editorial backdrop — soft gradient mesh that picks up the accent in
   both themes. Quiet enough that the card reads as primary; present
   enough that the page isn't a flat blank rectangle. */
.login-screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 22% 22%, var(--accent-soft), transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 78%, var(--wa-soft), transparent 60%);
  opacity: 0.9;
}
.login-card {
  position: relative; z-index: 1;
  width: 360px; padding: 44px 36px; background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.login-logo {
  width: 56px; height: 56px; margin: 0 auto 8px;
  background: var(--accent-soft); border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
}
.login-logo [data-lucide] { width: 28px; height: 28px; color: var(--accent); }
.login-title { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.015em; color: var(--gray-900); font-variation-settings: "opsz" 144; }
.login-subtitle { margin: 0 0 16px; color: var(--gray-500); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; }
.error-text { color: var(--red-500); font-size: 13px; margin: 4px 0 0; }

/* ─── QR screen ─── */
.qr-screen { background: var(--gray-50); }
.qr-card {
  width: 380px; padding: 32px; background: var(--surface-elevated);
  border-radius: 16px; box-shadow: var(--elevation-overlay);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.qr-title { margin: 0; font-size: 20px; font-weight: 700; }
.qr-subtitle { margin: 0; color: var(--gray-500); font-size: 13px; line-height: 1.5; }
.qr-loading {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 0; color: var(--gray-400); font-size: 13px;
}
.qr-image { width: 280px; height: 280px; border-radius: 8px; border: 1px solid var(--gray-200); }
.qr-status { margin: 0; color: var(--gray-500); font-size: 12px; }

.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--gray-200); border-top-color: var(--wa);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
.spinner-sm {
  width: 16px; height: 16px;
  border: 2px solid var(--gray-200); border-top-color: var(--gray-400);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── App shell ─── */
.app { display: flex; flex-direction: column; height: 100vh; background: var(--bg); }

.topbar {
  height: var(--topbar-h);
  /* 3-column grid: left toggle, centered tabs, right user pill. Each
     side track is `1fr` so they're guaranteed equal width — that
     centers `.view-tabs` in the middle of the bar regardless of how
     wide the user pill on the right ends up. The toggle and the pill
     align inside their own columns via justify-self. Ayoub asked for
     a centered topbar that stays centered as more items get added. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 16px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.topbar-title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.topbar-spacer { display: none; } /* superseded by the grid template above */
.topbar > #sidebarToggleBtn { grid-column: 1; justify-self: start; }
.topbar > .view-tabs        { grid-column: 2; justify-self: center; }
.topbar > .topbar-right     { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
/* Back-compat — if the topbar-right wrapper ever goes missing,
   fall back to placing userPill in column 3 directly. */
.topbar > #userPill         { grid-column: 3; justify-self: end; }

.main {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr) 0;
  background: var(--bg);
  transition: grid-template-columns 0.2s ease;
}
.main.with-profile { grid-template-columns: var(--sidebar-w) minmax(0,1fr) 340px; }
.main.with-profile #profilePanel { display: flex; }
.main:not(.with-profile) #profilePanel { display: none; }
.main.sidebar-collapsed { grid-template-columns: 0 minmax(0,1fr) 0; }
.main.sidebar-collapsed.with-profile { grid-template-columns: 0 minmax(0,1fr) 340px; }
.main.sidebar-collapsed .sidebar { display: none; }

/* Class Groups channel: paperclip + mic are live since 2026-09-17 — a photo,
   PDF or voice note lands in students7's own group media store
   (/api/app-group-inbox/send-file · send-audio). The poll item is still hidden
   by _applyInboxChannelUI. */

/* ─── Sidebar ─── */
.sidebar {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border); background: var(--surface);
}
.sidebar-head {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-sunken); flex-shrink: 0;
}
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
  color: var(--text);
}

/* Tabs (channel switcher: Inbox / Groups) */
.tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-sunken); border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  margin-bottom: 10px;
}
.tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px; background: transparent;
  /* Stable active indicator: every tab reserves a 2px bottom border so the
     active tab's accent underline never nudges the label (no layout shift /
     jitter when switching tabs). border-radius rounds only the top corners so
     the underline reads as a clean tab indicator under the raised pill. */
  border: 0; border-bottom: 2px solid transparent;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  font-size: 12px; font-weight: 500;
  color: var(--text-tertiary); cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.08s;
  font-family: inherit;
}
/* Distinct HOVER: lift the label + a faint sunken wash so the target reads as
   live before the click (no size change → no reflow). */
.tab:hover { color: var(--text); background: var(--surface-sunken); }
/* Subtle PRESSED: a tiny GPU transform only — scales the tab in place without
   reflowing its neighbours (Stable Interaction States). */
.tab:active { transform: scale(0.97); }
.tab [data-lucide] { width: 14px; height: 14px; }
/* ACTIVE: raised pill (existing token pattern) + accent text + accent underline
   indicator. The underline replaces the reserved transparent border, so the
   text stays put. */
.tab.tab-active {
  background: var(--surface); color: var(--accent);
  box-shadow: var(--shadow-sm); border-bottom-color: var(--accent);
}
.tab.tab-active:hover { background: var(--surface); }   /* keep the pill on hover */
.tab[data-channel="groups"].tab-active { color: var(--av-4); border-bottom-color: var(--av-4); }
.tab[data-channel="clubs"].tab-active  { color: var(--av-5); border-bottom-color: var(--av-5); }
.tab[data-channel="sms"].tab-active    { color: var(--av-2); border-bottom-color: var(--av-2); }
.tab[data-channel="email"].tab-active  { color: var(--av-6); border-bottom-color: var(--av-6); }

/* Connection bar — quiet status pill above the search.
   Connected: success-soft / success.
   Disconnected: surface-sunken / muted text.
   The "Disconnect" action uses --danger so it reads as destructive. */
.conn-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius-sm);
  margin-bottom: 10px; font-size: 12px;
}
.conn-left { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.conn-disconnected { background: var(--surface-sunken); color: var(--text-tertiary); }
.conn-connected { background: var(--success-soft); color: var(--success); }
.conn-connected .conn-dot { background: var(--success); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.conn-action {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--accent);
  font-family: inherit;
}
.conn-action:hover { color: var(--accent-hover); }
.conn-connected .conn-action { color: var(--danger); }
.conn-connected .conn-action:hover { color: var(--danger); filter: brightness(0.9); }
.conn-action [data-lucide] { width: 12px; height: 12px; }

/* Filter dropdown */
.dropdown { position: relative; margin-bottom: 10px; }
.filter-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s;
  font-family: inherit;
}
.filter-btn:hover { border-color: var(--border-strong); }
.filter-btn [data-lucide] { width: 14px; height: 14px; }
/* Total-matching count pill on the right side of the filter button —
 * cobalt accent matches the rest of the design system's "selected
 * count" affordance (was indigo). */
.filter-count-pill {
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.filter-count-pill.hidden { display: none; }
.filter-btn .chev { margin-left: auto; transition: transform 0.15s; }
.filter-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10;
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  max-height: 240px; overflow-y: auto;
}
.dropdown-item {
  width: 100%; text-align: left; padding: 8px 12px;
  border: 0; background: transparent;
  font-size: 12px; color: var(--text-secondary); cursor: pointer;
  display: block;
  font-family: inherit;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.dropdown-item:hover { background: var(--surface-hover); color: var(--text); }
.dropdown-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dropdown-divider {
  height: 1px; background: var(--border);
  margin: 4px 0;
}
.dropdown-section-title {
  padding: 6px 12px 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-tertiary);
}

/* Pinned chat — subtle yellow tint + small icon next to the name. The
   icon is rendered inside .conv-name-wrap so it doesn't disrupt unread
   badge / time-stamp layout on the right side of the row. */
.conv-item.is-pinned { background: linear-gradient(0deg, rgba(250, 204, 21, 0.06), rgba(250, 204, 21, 0.06)); }
.conv-item.is-pinned.active { background: var(--wa-soft); }
.conv-name-wrap { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.conv-pin-icon { fill: currentColor; }
.conv-flag-icon { fill: #fef2f2; }
.conv-unread.flag-badge { background: #dc2626; }

/* Synthetic team-user rows shown under the Team filter — visually distinct
   so the agent knows clicking will route to Team chat (not WA). */
.conv-item.is-synthetic-team {
  background: linear-gradient(0deg, rgba(99, 102, 241, 0.04), rgba(99, 102, 241, 0.04));
}
.conv-item.is-synthetic-team::after {
  content: 'TEAM';
  margin-left: auto;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(99, 102, 241, 0.12); color: #4f46e5;
  flex-shrink: 0;
}

/* One Inbox keeps the three conversation transports visually explicit. The
   text labels carry the meaning (not colour alone), while the active rail
   mirrors the selected source for fast scanning. */
.inbox-source-badge,
.chat-source-badge {
  display: inline-flex; align-items: center; flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 700; letter-spacing: 0.025em; white-space: nowrap;
}
.inbox-source-badge {
  padding: 2px 6px; font-size: 10px; line-height: 1.2;
  text-transform: uppercase;
}
.chat-source-badge { padding: 3px 8px; font-size: 11px; line-height: 1.2; }
.inbox-source-badge.source-baileys,
.chat-source-badge.source-baileys {
  background: var(--wa-soft); color: var(--text);
  border-color: color-mix(in oklab, var(--wa) 28%, transparent);
}
.inbox-source-badge.source-leads7,
.chat-source-badge.source-leads7 {
  background: var(--accent-soft); color: var(--text);
  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
}
.inbox-source-badge.source-app,
.chat-source-badge.source-app {
  background: var(--lougha-soft); color: var(--text);
  border-color: color-mix(in oklab, var(--lougha) 30%, transparent);
}
.conv-item.active.inbox-source-baileys::before { background: var(--wa); }
.conv-item.active.inbox-source-leads7::before { background: var(--accent); }
.conv-item.active.inbox-source-app::before { background: var(--lougha); }

/* Compact source health/count strip shown only in One Inbox. A failed source
   stays present with its cached count and a struck dot, so partial upstream
   trouble never looks like conversations were deleted. */
.one-inbox-sources {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  margin: -2px 0 10px;
}
.one-inbox-source {
  min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 4px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-secondary); font-size: 9.5px; white-space: nowrap;
  overflow: hidden; width: 100%; appearance: none; font-family: inherit; line-height: 1.5; cursor: pointer;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.one-inbox-source:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.one-inbox-source:active { background: var(--surface-active); }
.one-inbox-source[aria-pressed="true"] { color: var(--text); font-weight: 650; box-shadow: inset 0 0 0 1px currentColor; }
.one-inbox-source-baileys[aria-pressed="true"] { background: var(--wa-soft); border-color: color-mix(in oklab, var(--wa) 58%, var(--border)); }
.one-inbox-source-leads7[aria-pressed="true"] { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 58%, var(--border)); }
.one-inbox-source-app[aria-pressed="true"] { background: var(--lougha-soft); border-color: color-mix(in oklab, var(--lougha) 58%, var(--border)); }
.one-inbox-source[aria-pressed="true"] .one-inbox-source-dot { transform: scale(1.25); }
.one-inbox-source-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.one-inbox-source strong { flex: 0 0 auto; font-size: 9.5px; font-variant-numeric: tabular-nums; color: var(--text); }
.one-inbox-source-status { display: none; flex: 0 0 auto; color: var(--danger); font-size: 9px; font-style: normal; font-weight: 700; }
.one-inbox-source-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.one-inbox-source-baileys .one-inbox-source-dot { background: var(--wa); }
.one-inbox-source-leads7 .one-inbox-source-dot { background: var(--accent); }
.one-inbox-source-app .one-inbox-source-dot { background: var(--lougha); }
.one-inbox-source.source-unavailable { border-color: color-mix(in oklab, var(--danger) 42%, var(--border)); border-style: dashed; }
.one-inbox-source.source-unavailable[aria-pressed="true"] { background: var(--danger-soft); border-color: var(--danger); }
.one-inbox-source.source-unavailable strong { display: none; }
.one-inbox-source.source-unavailable .one-inbox-source-status { display: inline; }
.one-inbox-source.source-unavailable .one-inbox-source-dot {
  background: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft);
}

@media (min-width: 769px) and (max-width: 1140px) {
  .one-inbox-source-label { font-size: 0; }
  .one-inbox-source-label::after { content: attr(data-short); font-size: 9.5px; }
}

/* Right-click context menu shared across the conv-list. Floating panel,
   small enough to not feel modal. Closes on outside click or scroll. */
.conv-ctx-menu {
  background: var(--surface-elevated); border: 1px solid var(--gray-200);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px; min-width: 160px;
}
.conv-ctx-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px; border: 0; background: transparent;
  font-size: 13px; color: var(--gray-700); cursor: pointer; text-align: left;
  border-radius: 6px;
}
.conv-ctx-item:hover { background: var(--gray-50); color: var(--gray-900); }

/* Per-message right-click menu (Copier / Répondre en privé / Épingler).
   Inherits the same look as .conv-ctx-menu but slightly wider to fit
   the longer French labels. */
.msg-ctx-menu { min-width: 200px; }

/* Pinned bar — sticky strip rendered above #messagesArea showing the most
   recently pinned message. Click → scroll-to + flash the bubble. */
.pinned-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--warning-soft);
  border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
  color: var(--text); font-size: 13px;
}
.pinned-bar:hover { background: color-mix(in oklab, var(--warning) 22%, transparent); }
.pinned-bar-body { flex: 1; min-width: 0; }
.pinned-bar-label { font-weight: 600; font-size: 11px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.4px; }
.pinned-bar-snippet { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Small 📌 corner indicator on pinned bubbles. Sits at the top-right
   of the bubble box; doesn't compete with the existing reaction picker. */
.bubble { position: relative; }
.pinned-indicator {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--warning); color: var(--text-inverse);
  border-radius: 50%; box-shadow: var(--shadow-sm);
  z-index: 2;
}
.message-row.fromMe .pinned-indicator { right: auto; left: -6px; }

/* Flash animation when scrollToPinnedMessage lands on a bubble — pulses
   a yellow halo for ~1s so the agent's eye finds the target message. */
@keyframes pinFlash {
  0% { box-shadow: 0 0 0 4px rgba(255,213,79,0.7); }
  100% { box-shadow: 0 0 0 4px rgba(255,213,79,0); }
}
.bubble.pin-flash { animation: pinFlash 1.2s ease-out; }

/* ─── Team chat view ─── two-pane layout: directory on the left, active
   conversation on the right. Mirrors the WhatsApp-web split. */
#teamchatView .bulk-body,
#teamgroupsView .bulk-body { padding: 0; flex: 1; min-height: 0; }
.teamchat-grid {
  display: grid; grid-template-columns: 320px minmax(0, 1fr) 360px;
  height: 100%; width: 100%; min-height: 0;
  /* Smaller laptops: drop the workspace column to keep the chat readable. */
}
@media (max-width: 1200px) {
  .teamchat-grid { grid-template-columns: 280px minmax(0, 1fr) 320px; }
}
@media (max-width: 1000px) {
  .teamchat-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .teamchat-workspace-slot { display: none; }
}
/* Slot for the workspace panel inside the team chat layout. JS docks
   #workspacePanel here when the user enters team chat (and undocks
   back to <section.app> when they leave) so the workspace reads as a
   permanent right column instead of a floating overlay. */
.teamchat-workspace-slot {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
  min-height: 0; min-width: 0;
}
/* When the workspace panel is docked (class added by JS), drop the
   fixed-position + slide animation + heavy shadow so it sits flush
   in the grid column. Constrain height to the slot so .workspace-
   list can scroll its overflow (without this the panel grows past
   the grid and pushes the page off the viewport). */
.workspace-panel.in-teamchat {
  position: static !important;
  width: auto !important; max-width: none;
  height: 100%; min-height: 0;
  box-shadow: none;
  transform: none !important;
  transition: none !important;
  border-left: 0;
}
.teamchat-workspace-slot > .workspace-panel.in-teamchat .workspace-list {
  flex: 1 1 0; min-height: 0; overflow-y: auto;
}
/* While docked we never want the panel hidden — drop the .hidden
   visibility override too. */
.workspace-panel.in-teamchat.hidden {
  transform: none !important;
  pointer-events: auto;
}
.teamchat-sidebar {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
  padding: 12px;
  background: var(--surface);
}
/* Segmented "Chats | Rooms" switcher — one inset track, solid lifted active pill.
   Restyles the previously-removed Rooms-tab classes; tokens only, dark-mode safe. */
.teamchat-tabs {
  display: flex; gap: 4px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin: 0 0 8px;
}
.teamchat-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--radius-xs);
  border: 1px solid transparent; background: transparent;
  cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  transition: background var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease);
}
.teamchat-tab:hover { color: var(--text); }
.teamchat-tab.active {
  background: var(--surface); color: var(--accent);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), inset 0 0 0 1px var(--accent-soft);
}
@media (prefers-reduced-motion: reduce) {
  .teamchat-tab { transition: none; }
}
/* Per-section unread count chip — only ever shown on the INACTIVE tab. */
.teamchat-tab-count {
  min-width: 16px; height: 16px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-pill);
  background: var(--danger); color: #fff; /* unread = alert, NOT WhatsApp-green */
}
.teamchat-tab.active .teamchat-tab-count { display: none; }
/* "· N online" presence suffix — only ever shown on the ACTIVE Chats tab. */
.teamchat-tab-online {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.teamchat-tab-online::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); display: inline-block;
}
.teamchat-tab:not(.active) .teamchat-tab-online { display: none; }
/* .hidden (utility) still wins to hide chip/online when count/online is 0. */
.teamchat-tab .hidden { display: none !important; }
.teamchat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.teamchat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.15s;
}
.teamchat-row:hover { background: var(--surface-hover); }
.teamchat-row.active { background: var(--accent-soft); }
.teamchat-avatar-wrap { position: relative; flex-shrink: 0; }
.presence-dot {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--text-muted);
}
.presence-dot.online { background: var(--success); }
.teamchat-row-body { flex: 1; min-width: 0; }
.teamchat-row-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.teamchat-row-tag {
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-xs);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.teamchat-row-tag.wa { background: var(--wa-soft); color: var(--wa-dark); }
/* Cross-platform teammate (other platform) — indigo pill to read as "remote". */
.teamchat-row-tag.remote { background: rgba(99, 102, 241, 0.15); color: #4f46e5; }
.teamchat-row-preview {
  font-size: 12px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.teamchat-unread {
  background: var(--wa); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--radius-pill); flex-shrink: 0;
}
.teamchat-empty-row { padding: 20px; text-align: center; font-size: 12.5px; color: var(--text-tertiary); }
.teamchat-section-title {
  padding: 10px 8px 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-tertiary);
}
.teamchat-row-wagroup .teamchat-row-tag.wa {
  font-weight: 700;
}
.teamchat-pane {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg);
}
.teamchat-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
}
.teamchat-active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.teamchat-active.hidden { display: none; }
.teamchat-active-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.teamchat-active-head-info { display: flex; flex-direction: column; flex: 1; }
.teamchat-active-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.teamchat-active-sub { font-size: 12px; color: var(--text-tertiary); }
.teamchat-open-inbox-link {
  font-size: 12px; font-weight: 600; color: var(--wa-dark);
  text-decoration: none; padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--wa-soft);
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease);
}
.teamchat-open-inbox-link:hover { background: var(--wa-soft); filter: brightness(0.95); }
[data-theme="dark"] .teamchat-open-inbox-link { color: var(--wa); }
[data-theme="dark"] .teamchat-open-inbox-link:hover { filter: brightness(1.15); }
.teamchat-messages {
  flex: 1; overflow-y: auto; padding: 18px 28px;
  display: flex; flex-direction: column; gap: 10px;
  /* Recessed canvas so the white "them" bubbles + green "me" bubbles
     pop instead of fading into the page. Matches the inbox feel where
     the messages area sits in a slightly darker well than the bubbles. */
  background: var(--surface-sunken);
}
[data-theme="dark"] .teamchat-messages { background: var(--bg); }
/* Tighter gap when two adjacent bubbles are from the same author — the
   server doesn't tag this, so a sibling CSS rule infers it: if a row
   has class .same-author-as-prev (set in renderTeamchatMessages), shrink
   the top gap so a burst of messages reads as one chunk. */
.teamchat-msg-row.same-author-as-prev { margin-top: -4px; }
.teamchat-msg-row.same-author-as-prev .teamchat-msg .teamchat-msg-author { display: none; }
.teamchat-empty-state {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
  color: var(--gray-600); text-align: center;
}
.teamchat-empty-bubble {
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(99, 102, 241, 0.10);
  color: #6366f1;
}
.teamchat-empty-bubble svg { width: 32px; height: 32px; }
.teamchat-empty-title { font-size: 15px; font-weight: 600; color: var(--gray-800); max-width: 360px; }
.teamchat-empty-sub { font-size: 12.5px; color: var(--gray-500); max-width: 340px; line-height: 1.45; }
.teamchat-msg {
  max-width: 62%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  position: relative;
  /* Two-layer shadow: a soft ambient (1px below) + a tight specular near
     the bubble edge. Stronger than the previous 0.04 alpha so bubbles
     stand off the recessed messages-area canvas. */
  box-shadow: 0 1px 0.5px oklch(0 0 0 / 0.06), 0 2px 8px oklch(0 0 0 / 0.06);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.teamchat-msg-row:hover .teamchat-msg {
  box-shadow: 0 1px 0.5px oklch(0 0 0 / 0.08), 0 4px 14px oklch(0 0 0 / 0.10);
}
[data-theme="dark"] .teamchat-msg {
  box-shadow: 0 1px 1px oklch(0 0 0 / 0.30), 0 2px 8px oklch(0 0 0 / 0.20);
}
/* Team-chat bubbles — mirror the inbox bubbles' theming pattern via
   the bubble's own CSS vars so the same outbound emerald reads in
   both modes (light WA-green / dark deep emerald). */
.teamchat-msg.me {
  align-self: flex-end;
  background: #d9fdd3;
  color: oklch(0.20 0.04 150);
  /* "Tail" on the right side via different corner radius. Makes the
     outbound side visually distinct from inbound at a glance. */
  border-bottom-right-radius: 4px;
}
[data-theme="dark"] .teamchat-msg.me {
  background: oklch(0.32 0.08 150);
  color: oklch(0.95 0.02 150);
}
.teamchat-msg.them {
  align-self: flex-start;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  border-bottom-left-radius: 4px;
}
[data-theme="dark"] .teamchat-msg.them { background: var(--surface-elevated); }
/* Author label inside .them bubbles in rooms — colour matches the
   sender's avatar via a per-row CSS custom property. renderTeamchat
   Messages writes --author-color when building the row. */
.teamchat-msg-author {
  font-size: 12px; font-weight: 700;
  color: var(--author-color, var(--accent));
  margin-bottom: 3px; letter-spacing: 0.01em;
}
.teamchat-msg-text { white-space: pre-wrap; word-wrap: break-word; }
.teamchat-msg-image { max-width: 280px; border-radius: var(--radius-sm); display: block; margin-top: 4px; }
.teamchat-msg-file {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--surface-sunken);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--text);
  text-decoration: none; margin-top: 4px; max-width: 280px;
  border: 1px solid var(--border-subtle);
  transition: background var(--motion-fast) var(--ease);
}
.teamchat-msg-file:hover { background: var(--surface-hover); }
.teamchat-msg-file svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-secondary); }
.teamchat-msg-file .doc-name {
  font-weight: 600; word-break: break-word;
}

/* Multi-select on team chat bubbles — same selection styling as inbox. */
.teamchat-msg-row { position: relative; }
.teamchat-msg-row .msg-select-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 4px; z-index: 5;
}
.teamchat-msg-row.me .msg-select-btn { left: auto; right: 4px; }
.teamchat-msg-row.is-selected { background: rgba(34, 197, 94, 0.08); }
.teamchat-msg-row.selection-mode { cursor: pointer; }
.teamchat-msg-meta {
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  font-size: 10px; color: var(--gray-500); margin-top: 2px;
}
.teamchat-tick { font-weight: 700; }
.teamchat-tick.read { color: #4ea3ff; }
.teamchat-compose {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-top: 1px solid var(--gray-200); background: #f7f7f7;
  /* Wrap so the reply-preview pill drops onto its own row above the
     buttons + textarea row, instead of competing for horizontal space
     and pushing the input off-screen on long quoted messages. */
  flex-wrap: wrap;
}
.teamchat-compose .icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--gray-600);
  background: transparent;
  transition: background 100ms ease;
}
.teamchat-compose .icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--gray-800); }
.teamchat-textarea {
  flex: 1; resize: none;
  min-height: 72px;         /* ~3 lines so the agent sees a comfortable
                               compose box from the start (was effectively
                               1 line ≈ 40px with rows=1) */
  max-height: 280px;        /* ~10-12 visible lines before scrolling kicks
                               in (was 120px ≈ 4 lines — too short) */
  padding: 9px 14px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--gray-200);
  font-size: 14px;
  line-height: 1.45;
}
.teamchat-textarea:focus { border-color: var(--blue-400, #60a5fa); outline: none; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); }
/* Today's Classes: the sheet snapshot is stale and the page must say so.
   Warning tokens only, so it themes in both modes (gotcha #14). */
.schedule-stale-banner {
  margin: 0 0 10px; padding: 10px 14px; border-radius: 10px;
  background: var(--warning-soft, var(--surface-sunken));
  border: 1px solid var(--warning, #f59e0b);
  color: var(--text); font-size: 13px; line-height: 1.5;
}
.schedule-stale-banner strong { color: var(--warning, #b45309); }
.teamchat-compose { position: relative; }
.teamchat-record-overlay {
  position: absolute; inset: 0;
  background: var(--surface-sunken); padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
}
.teamchat-record-overlay.hidden { display: none; }
.teamroom-members { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.teamroom-member-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 6px; cursor: pointer; font-size: 13px;
}
.teamroom-member-row:hover { background: var(--gray-50); }

/* Search */
.search { position: relative; }
.search [data-lucide] {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
.search input {
  width: 100%; padding: 9px 12px 9px 34px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 13px; outline: none;
  font-family: inherit;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.search input::placeholder { color: var(--text-muted); }
.search input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }

/* Conversation list */
.conv-list { flex: 1; overflow-y: auto; }
.conv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; padding: 40px 20px; gap: 8px;
  color: var(--gray-400); font-size: 13px;
}
/* Conv rows — calmer rhythm, accent rail/active state, larger date.
   Hover uses --surface-hover for uniform feel across the app; active
   pulls --accent-soft (cobalt) and an --accent rail. Channel variants
   keep their per-channel rail colour for quick visual chunking. */
.conv-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px 14px 18px;
  cursor: pointer; transition: background 0.12s; position: relative;
}
.conv-item + .conv-item { border-top: 1px solid var(--border-subtle); }
.conv-item:hover { background: var(--surface-hover); }
.conv-item.active { background: var(--accent-soft); }
.conv-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.conv-item.active.channel-groups::before { background: var(--av-4); }
.conv-item.active.channel-clubs::before  { background: var(--av-5); }

.avatar {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: #fff; font-size: 14px; font-weight: 700;
  background: var(--av-1);
}
.avatar-md { width: 40px; height: 40px; font-size: 13px; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-c1 { background: var(--av-1); }
.avatar-c2 { background: var(--av-2); }
.avatar-c3 { background: var(--av-3); }
.avatar-c4 { background: var(--av-4); }
.avatar-c5 { background: var(--av-5); }
.avatar-c6 { background: var(--av-6); }
.avatar-c7 { background: var(--av-7); }
.avatar-c8 { background: var(--av-8); }

.conv-body { flex: 1; min-width: 0; }
.conv-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conv-name-wrap {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex: 1;
}
.conv-name {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-label-chip {
  display: inline-block; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.1);
}
.conv-date {
  flex-shrink: 0; font-size: 11.5px; color: var(--gray-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.conv-row2 {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 3px;
}
.conv-preview {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-unread {
  flex-shrink: 0;
  min-width: 20px; height: 20px; padding: 0 7px;
  border-radius: 999px;
  background: #25d366; /* WhatsApp green */
  color: #fff;
  font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(37, 211, 102, 0.35);
  letter-spacing: 0.2px;
}
.conv-item.active .conv-unread {
  background: #1ea952;
  box-shadow: 0 1px 2px rgba(30, 169, 82, 0.45);
}
/* When a row has unread messages, brighten the time + preview to draw the eye —
 * matches the WhatsApp pattern of "new = high-contrast, read = dimmed". */
.conv-date-unread {
  color: #25d366 !important;
  font-weight: 700;
}
.conv-preview-unread {
  color: var(--gray-900) !important;
  font-weight: 600;
}

/* ─── Chat pane ──────────────────────────────────────────────────────
   The chat canvas is the most-looked-at surface in the app. It gets
   a quietly-themed background (warm cream in light, cool charcoal in
   dark) plus a subtle dotted overlay that gives the canvas texture
   without competing with bubble content. Both layers are CSS vars so
   the same rule themes correctly across modes. */
.chat-pane {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--bg);
}

.empty-state {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: var(--text-tertiary); padding: 40px;
}
.empty-icon {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.empty-icon [data-lucide] { width: 48px; height: 48px; color: var(--accent); opacity: 0.7; }
.empty-state h3 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--text); }
.empty-state p { margin: 0; font-size: 13px; max-width: 280px; text-align: center; color: var(--text-tertiary); }

.conv-view { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }

.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.chat-id { flex: 1; min-width: 0; }
.chat-id h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-id .muted { font-size: 12px; margin: 0; color: var(--text-tertiary);
  /* Keep the phone number on a single line — without this it wraps
     char-by-char into a tiny column when the 16-icon action row squeezes
     .chat-id (which has min-width:0). Ellipsize instead of cramping. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.chat-zoom-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 6px 10px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.chat-zoom-btn:hover { background: var(--surface-hover); }
.chat-zoom-btn svg { width: 15px; height: 15px; }
.chat-zoom-live-dot {
  display: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}
.chat-zoom-btn.is-live {
  color: var(--success); border-color: color-mix(in srgb, var(--success) 48%, var(--border));
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
}
.chat-zoom-btn.is-live .chat-zoom-live-dot { display: inline-block; }
.chat-zoom-btn.is-loading { opacity: .65; cursor: wait; }
/* Chat-header overflow: a thin divider then the ⋯ trigger that reveals the
   secondary actions as a labeled menu — keeps the daily header uncluttered. */
.chat-actions-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
.chat-more-wrap { position: relative; display: inline-flex; }
.chat-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  min-width: 214px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.chat-more-menu.hidden { display: none; }
.chat-more-menu .icon-btn {
  width: 100%; height: auto; justify-content: flex-start;
  gap: 10px; padding: 8px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
}
.chat-more-menu .icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.chat-more-label { white-space: nowrap; }

/* Messages — clean themed canvas. The dotted pattern was dropped by
   an earlier explicit request; now the canvas is a solid surface that
   flips with the theme so bubbles read cleanly against either bg. */
.messages-area {
  flex: 1; overflow-y: auto; padding: 20px 16px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg);
}
.messages-empty {
  margin: auto; color: var(--text-muted); font-size: 13px;
}
.messages-top-indicator {
  text-align: center; font-size: 11px; color: var(--text-tertiary);
  padding: 8px 0; font-style: italic;
  background: var(--surface-sunken);
}

/* "Show hidden system messages" chip — sits at the very top of the
   conversation, above the scroll-up hint, when the chat has any
   emptyFrame-tagged rows. Session-only state; reverts on reload. */
.empty-frames-chip {
  align-self: center;
  margin: 8px auto 4px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px dashed var(--border-subtle);
  background: var(--surface-elevated);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.empty-frames-chip:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border);
}
.empty-frames-chip.is-on {
  background: rgba(245, 158, 11, 0.10);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.4);
  border-style: solid;
}

/* Thin one-line strip for empty-frame placeholders. Replaces a full
   bubble — no avatar, no actions, just a subtle "System message" line
   with the timestamp. Hidden unless the chip toggled on. */
.empty-frame-row {
  display: flex; align-items: center;
  padding: 0; margin: 0;
}
.bubble-empty-frame {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 14px;
  color: var(--text-tertiary);
  font-size: 11px; font-style: italic;
  border-left: 2px dashed var(--border-subtle);
  margin-left: 8px;
  flex: 1;
}
.bubble-empty-frame [data-lucide] { width: 11px; height: 11px; opacity: 0.55; }
.bubble-empty-frame-time { opacity: 0.75; font-style: normal; }

/* Date separator chip — small pill centered between days so the agent
   sees at a glance that "Today 14:30" follows "Yesterday 22:43" rather
   than two random timestamps in odd order. */
.date-separator {
  align-self: center;
  padding: 4px 12px;
  margin: 8px 0;
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  flex-shrink: 0;
}

.message-row { display: flex; }
.message-row.fromMe { justify-content: flex-end; }
.message-row.fromMe + .message-row.fromMe,
.message-row:not(.fromMe) + .message-row:not(.fromMe) { margin-top: -2px; }

.bubble {
  --bubble-bg: var(--surface);
  --bubble-text: var(--text);
  --bubble-meta: var(--text-muted);
  max-width: 65%; padding: 8px 12px;
  border-radius: var(--radius-bubble);
  font-size: 14px; color: var(--bubble-text); position: relative;
  background: var(--bubble-bg);
  box-shadow: 0 1px 1px oklch(0 0 0 / 0.06);
  border: 1px solid var(--border-subtle);
  word-wrap: break-word; overflow-wrap: anywhere;
}
[data-theme="dark"] .bubble { box-shadow: 0 1px 2px oklch(0 0 0 / 0.30); }
/* Outbound bubble keeps the WhatsApp emerald identity in light mode;
   in dark mode it pivots to a deep readable emerald that still says
   "this is your message" without glowing white against the canvas. */
.bubble.fromMe {
  --bubble-bg: #d9fdd3;
  --bubble-text: oklch(0.20 0.04 150);
  --bubble-meta: oklch(0.40 0.05 150);
  border-color: transparent;
}
[data-theme="dark"] .bubble.fromMe {
  --bubble-bg: oklch(0.32 0.08 150);
  --bubble-text: oklch(0.95 0.02 150);
  --bubble-meta: oklch(0.75 0.04 150);
}
.bubble .text { white-space: pre-wrap; }
.bubble .meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 3px; font-size: 11px; color: var(--bubble-meta);
}
.bubble .meta [data-lucide] { width: 14px; height: 14px; }
/* Outbound "by <agent>" label — same hue as the rest of the meta but
   weight 600 + a separating dot so the agent's name sits comfortably
   beside the timestamp without screaming. Uses currentColor with
   slightly darker hue via the bubble's CSS var chain. */
.bubble .meta .meta-sender { font-weight: 600; color: inherit; opacity: 0.85; }
.bubble .meta .meta-sender::after { content: " · "; font-weight: 400; opacity: 0.7; }
.bubble .sender-name { font-size: 12px; font-weight: 600; color: var(--av-1); margin-bottom: 2px; }
.bubble .sender-name.clickable { cursor: pointer; }
.bubble .sender-name.clickable:hover { text-decoration: underline; }
/* Wider audio player so the scrubber is actually usable — agents
   need to see where they are in the recording, scrub backward, or
   pause/resume on a known position. The default 240px crammed every
   control into a tooltip-sized strip. */
.bubble audio { width: 380px; max-width: 100%; height: 40px; }

/* ===== WhatsApp-style custom audio player (buildAudioPlayer) =====
   Replaces native <audio controls> for voice notes + call recordings. The
   hidden <audio> drives playback; everything below is the custom skin. */
.audio-player { display: flex; align-items: center; gap: 10px; width: 392px; max-width: 100%; }
.audio-pp {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--wa);
  cursor: pointer; transition: transform .08s ease, filter .15s ease;
}
.audio-pp:hover { filter: brightness(1.06); }
.audio-pp:active { transform: scale(0.92); }
.audio-pp svg { display: block; }
.audio-wave { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; height: 32px; cursor: pointer; touch-action: none; }
.audio-bar {
  flex: 1 1 0; min-width: 2px; max-width: 4px; min-height: 3px; border-radius: 2px;
  background: var(--audio-track, rgba(0,0,0,0.16)); transition: background-color .08s linear;
}
.audio-bar.played { background: var(--audio-fill, var(--wa)); }
.audio-time {
  flex: 0 0 auto; min-width: 36px; text-align: right;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; opacity: .75;
}
/* Playback-speed chip — tap to cycle 1×→1.2×→2×→2.5×→3×. Greyed at 1×,
   accent (teal / sent-green) once faster so it's obvious speed-up is on. */
.audio-speed {
  flex: 0 0 auto; min-width: 34px; height: 22px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 11px;
  background: transparent; color: var(--text-secondary);
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600;
  line-height: 1; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.audio-speed:hover { background: var(--surface-hover); color: var(--text); }
.audio-speed:active { transform: scale(0.94); }
.audio-speed[data-rate="1"] { opacity: .7; }
.audio-speed:not([data-rate="1"]) { color: var(--wa); border-color: var(--wa); opacity: 1; }
.bubble.fromMe .audio-speed:not([data-rate="1"]) { color: var(--wa-dark); border-color: var(--wa-dark); }
[data-theme="dark"] .bubble.fromMe .audio-speed:not([data-rate="1"]) { color: #34d399; border-color: #34d399; }
.audio-player.audio-error .audio-pp { background: #b91c1c; }
.audio-player.audio-error .audio-bar { opacity: .5; }
/* sent / outbound bubble — deeper green so it reads on the light-green bubble */
.bubble.fromMe .audio-pp { background: var(--wa-dark); }
.bubble.fromMe .audio-bar { --audio-track: rgba(4,80,60,0.22); --audio-fill: var(--wa-dark); }
/* dark theme */
[data-theme="dark"] .audio-bar { --audio-track: rgba(255,255,255,0.20); }
[data-theme="dark"] .bubble.fromMe .audio-bar { --audio-track: rgba(255,255,255,0.22); --audio-fill: #34d399; }
[data-theme="dark"] .bubble.fromMe .audio-pp { background: #059669; }
/* recordings table cell — keep the player inside its column */
.rec-audio-player { width: 100%; }
/* Team-chat audio matches the inbox treatment 1:1 — same width, height,
   and rounded chrome — so a voice-note bubble feels identical across
   both surfaces. Without this, Chrome's intrinsic 240 px player crammed
   into the bubble and the scrubber was unusable. */
.teamchat-msg audio {
  width: 380px; max-width: 100%; height: 40px;
  display: block; margin-top: 4px;
}
/* When a voice note is the bubble's only payload (no text), drop the
   margin-top so the bubble doesn't get an extra empty row above the
   player. */
.teamchat-msg:not(:has(.teamchat-msg-text)) > audio { margin-top: 0; }
/* Chrome's <audio controls> shrinks to its ~50px intrinsic minimum (kebab
   + 0:00) without an explicit min-width on the wrapper. Force enough room
   for the full transport on both bubble surfaces. */
.bubble:has(audio) { max-width: min(420px, 80%); }
.teamchat-msg:has(audio) { max-width: 420px; min-width: 380px; }
/* Visible chip for messages whose media never made it to disk — Baileys
   decryption usually. Without this the bubble looked empty and agents
   thought the platform was broken; now it's an obvious "ask the sender
   to resend" prompt. */
.media-failed-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--warning-soft); color: var(--warning);
  font-size: 12.5px; font-weight: 500;
  border: 1px dashed var(--warning);
  cursor: pointer; font-family: inherit;
}
.media-failed-chip:hover { background: var(--warning); color: #fff; }
.media-failed-chip:disabled { cursor: progress; opacity: 0.7; }
.media-failed-chip:disabled:hover { background: var(--warning-soft); color: var(--warning); }

/* ── Shared contact card bubble (vCard, 2026-05-18) ────────────────
   When a user shares a phone-book entry, WhatsApp ships it as a
   contactMessage / contactsArrayMessage. Pre-fix the bubble rendered
   "[contact] — failed to download". Now we render the vCard: avatar
   + name + phone + a Message button to jump into a 1-1 chat. */
.contact-card-bubble { padding: 8px; }

/* Call bubble — for type:'call' rows mirrored from Leads7. Shows
   direction arrow + status + duration + an inline audio player for
   the WhatsApp recording. */
.call-bubble { min-width: 200px; max-width: 280px; }
.call-bubble-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  padding: 4px 0;
}
.call-bubble-head.call-bubble-missed { color: #b91c1c; }
.call-bubble-arrow { font-size: 14px; font-weight: 700; }
.call-bubble-label { color: var(--text, #0f172a); }
.call-bubble-duration { color: var(--muted, #64748b); font-size: 12px; font-weight: 400; }
.call-bubble audio { width: 100%; height: 32px; margin-top: 4px; }
.call-bubble-meta { font-size: 11px; color: var(--muted, #64748b); margin-top: 4px; }
/* --gray-100 is a DARK grey in the dark palette (the scale inverts), so it read
   as near-invisible on the bubble. --text is the light-on-dark token. */
[data-theme="dark"] .call-bubble-label { color: var(--text, #f1f5f9); }
[data-theme="dark"] .call-bubble-duration,
[data-theme="dark"] .call-bubble-meta { color: var(--gray-400, #94a3b8); }
[data-theme="dark"] .call-bubble-head.call-bubble-missed { color: #fca5a5; }
.shared-contact-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}
.shared-contact-card + .shared-contact-card { margin-top: 6px; }
.shared-contact-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
}
.shared-contact-avatar [data-lucide] { width: 18px; height: 18px; }
.shared-contact-info { min-width: 0; }
.shared-contact-name { font-size: 13.5px; font-weight: 600; color: var(--gray-900, #111827); }
.shared-contact-phone { font-size: 11.5px; color: var(--gray-600, #4b5563); }
.shared-contact-open {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.30);
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.shared-contact-open:hover { background: #10b981; color: white; }
.shared-contact-open [data-lucide] { width: 13px; height: 13px; }

/* ── Mic device picker (2026-05-19) ─────────────────────────────────
   Chevron next to each composer's mic button opens a popover with
   the list of audio input devices. Selection persists in localStorage
   under MIC_PREF_KEY and applies to every recorder surface (inbox
   1-1, inbox groups, team chat, team groups). */
.mic-wrap {
  display: inline-flex; align-items: stretch;
  gap: 0;
}
.mic-wrap .icon-btn { margin: 0; }
.mic-picker-trigger {
  padding-left: 2px !important; padding-right: 2px !important;
  margin-left: -4px !important;
  opacity: 0.6;
  transition: opacity 120ms ease, background 120ms ease;
}
.mic-picker-trigger:hover { opacity: 1; }
.mic-picker-trigger [data-lucide] { width: 12px; height: 12px; }

.mic-picker-menu {
  position: fixed;
  z-index: 1100;
  min-width: 280px; max-width: 420px;
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column; gap: 2px;
  max-height: 380px; overflow-y: auto;
}
.mic-picker-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: 0; border-radius: 8px;
  font-family: inherit; font-size: 13.5px;
  color: var(--gray-900, #111827);
  cursor: pointer;
  text-align: left;
  transition: background 100ms ease;
}
.mic-picker-row:hover { background: var(--surface-hover); }
.mic-picker-row.is-active { background: rgba(37, 99, 235, 0.08); }
.mic-picker-radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--gray-400, #9ca3af);
  flex-shrink: 0;
  position: relative;
  transition: border-color 100ms ease;
}
.mic-picker-row.is-active .mic-picker-radio,
.mic-picker-radio.is-on { border-color: #2563eb; }
.mic-picker-radio.is-on::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2563eb;
}
.mic-picker-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mic-picker-hint {
  flex-shrink: 0;
  color: #dc2626;
  font-size: 11.5px;
  font-weight: 500;
}
.mic-picker-empty {
  padding: 16px;
  text-align: center;
  color: var(--gray-500, #6b7280);
  font-size: 13px;
  font-style: italic;
}

/* ─── Reply / quote UI ──────────────────────────────────────────────────
   Hover any message bubble to reveal the reply trigger; click sets the
   composer's reply target. The composer surfaces a green-bar preview pill
   the agent can dismiss. Replies render with a quoted block prepended
   to the bubble — mirrors WhatsApp Web. */
.message-row { position: relative; }
/* Bubble is the positioned ancestor for its hover chips so they
   anchor to the bubble's actual edge instead of the full-width row.
   Without this, fromMe chips ended up off-screen at the far left
   while the bubble sat on the far right. */
.bubble { position: relative; }
.bubble .bubble-reply-trigger {
  position: absolute; top: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-tertiary); cursor: pointer;
  opacity: 0; transition: opacity 0.15s, transform 0.15s;
  box-shadow: var(--shadow);
  z-index: 2;
}
.bubble .bubble-reply-trigger:hover { color: var(--accent); transform: scale(1.05); }
.bubble .bubble-reply-trigger [data-lucide] { width: 14px; height: 14px; }
.bubble:not(.fromMe) .bubble-reply-trigger { right: -36px; }
.bubble.fromMe .bubble-reply-trigger        { left:  -36px; }
.message-row:hover .bubble .bubble-reply-trigger { opacity: 1; }

/* Receipt flag chip — inbound media bubbles only, next to Reply. Sends the
   virement photo / PDF to the Payments queue (Leads7's affordance, our line). */
.bubble .bubble-receipt-trigger {
  position: absolute; top: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-tertiary); cursor: pointer;
  opacity: 0; transition: opacity 0.15s, transform 0.15s;
  box-shadow: var(--shadow);
  z-index: 2;
}
.bubble .bubble-receipt-trigger:hover { color: #fff; background: var(--warning, #b45309); border-color: transparent; transform: scale(1.05); }
.bubble .bubble-receipt-trigger [data-lucide] { width: 14px; height: 14px; }
/* Slot AFTER the student-feedback thumbs (fb-up -68, fb-down -100) — the
   thumbs render on every inbound 1-1 student bubble, so -72 sat behind 👍. */
.bubble:not(.fromMe) .bubble-receipt-trigger { right: -132px; }
.message-row:hover .bubble .bubble-receipt-trigger { opacity: 1; }

/* WhatsApp-style reaction chips under each bubble + quick-react bar on hover */
.msg-reactions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
  /* Bubble width is fixed by content; chips overflow into a wrapped row. */
}
.msg-reactions.hidden { display: none; }
.msg-reaction-chip {
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 1px 7px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px; line-height: 1;
  color: var(--text);
  cursor: pointer; transition: transform 80ms ease, background 80ms;
}
.msg-reaction-chip:hover { transform: scale(1.05); background: var(--surface-hover); }
.msg-reaction-chip.is-mine {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
  font-weight: 700;
}
.msg-reaction-chip .mrc-emoji { font-size: 14px; }
.msg-reaction-chip .mrc-count { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.msg-reaction-chip.is-mine .mrc-count { color: var(--accent); }

/* "Who reacted" popover — opened by tapping a reaction chip (WhatsApp parity) */
.reaction-viewers-popover {
  position: fixed; z-index: 1000;
  width: 250px; max-height: 320px; overflow-y: auto;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 8px;
}
.reaction-viewers-popover .rv-title {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  padding: 2px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.reaction-viewers-popover .rv-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.reaction-viewers-popover .rv-filter-chip {
  font-size: 11px; line-height: 1; padding: 4px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-elevated);
  color: var(--text-secondary); cursor: pointer;
}
.reaction-viewers-popover .rv-filter-chip.active {
  background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 700;
}
.reaction-viewers-popover .rv-list { display: flex; flex-direction: column; }
.reaction-viewers-popover .rv-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; }
.reaction-viewers-popover .rv-row.is-mine { cursor: pointer; }
.reaction-viewers-popover .rv-row.is-mine:hover { background: var(--surface-hover); }
.reaction-viewers-popover .rv-avatar {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700;
}
.reaction-viewers-popover .rv-name-wrap { flex: 1 1 auto; min-width: 0; }
.reaction-viewers-popover .rv-name {
  font-size: 13px; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reaction-viewers-popover .rv-hint { font-size: 10px; color: var(--text-secondary); margin-top: 1px; }
.reaction-viewers-popover .rv-emoji { flex: 0 0 auto; font-size: 16px; }

/* Floating quick-react bar — shows on bubble hover, hidden by default */
.bubble .msg-quick-react-bar {
  position: absolute; top: -34px;
  display: inline-flex; gap: 2px;
  padding: 4px 6px;
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity 120ms ease;
  z-index: 3;
}
.bubble:not(.fromMe) .msg-quick-react-bar { left: 6px; }
.bubble.fromMe       .msg-quick-react-bar { right: 6px; }
.message-row:hover .bubble .msg-quick-react-bar { opacity: 1; pointer-events: auto; }
.msg-quick-react-bar .mqr-btn {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  border: 0; background: transparent; cursor: pointer;
  transition: transform 80ms ease, background 80ms;
}
.msg-quick-react-bar .mqr-btn:hover { transform: scale(1.18); background: var(--gray-50); }
.msg-quick-react-bar .mqr-btn.is-mine {
  background: #dbeafe; box-shadow: 0 0 0 2px #93c5fd inset;
}

/* Edit + Delete chips next to the reply trigger — only rendered on
   own (fromMe) bubbles. Stacked outward from the reply chip at
   left: -36 / -68 / -100. */
.bubble .bubble-edit-trigger,
.bubble .bubble-delete-trigger {
  position: absolute; top: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 50%;
  color: var(--gray-500); cursor: pointer;
  opacity: 0; transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  z-index: 2;
}
.bubble .bubble-edit-trigger:hover { color: #128c7e; transform: scale(1.05); }
.bubble .bubble-delete-trigger { color: #b91c1c; }
.bubble .bubble-delete-trigger:hover { color: #7f1d1d; transform: scale(1.05); }
.bubble .bubble-edit-trigger [data-lucide],
.bubble .bubble-delete-trigger [data-lucide] { width: 14px; height: 14px; }
.bubble.fromMe .bubble-edit-trigger   { left: -68px; }
.bubble.fromMe .bubble-delete-trigger { left: -100px; }
.bubble:not(.fromMe) .bubble-delete-trigger { right: -100px; }
.message-row:hover .bubble .bubble-edit-trigger,
.message-row:hover .bubble .bubble-delete-trigger { opacity: 1; }
.message-row.selection-mode .bubble .bubble-edit-trigger,
.message-row.selection-mode .bubble .bubble-delete-trigger { display: none !important; }

/* Teacher→teacher forward chip — rendered on teacher bubbles only. Sits in the
   free -68 slot next to the reply chip (teacher bubbles never get the edit
   chip, so -68 is free on both sides; own-message delete stays at -100). */
.bubble .bubble-forward-trigger {
  position: absolute; top: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-tertiary); cursor: pointer;
  opacity: 0; transition: opacity 0.15s, transform 0.15s;
  box-shadow: var(--shadow);
  z-index: 2;
}
.bubble .bubble-forward-trigger:hover { color: var(--accent); transform: scale(1.05); }
.bubble .bubble-forward-trigger [data-lucide] { width: 14px; height: 14px; }
.bubble:not(.fromMe) .bubble-forward-trigger { right: -68px; }
.bubble.fromMe .bubble-forward-trigger        { left:  -68px; }
.message-row:hover .bubble .bubble-forward-trigger { opacity: 1; }

/* Student-feedback quick tag — 👍 / 👎 on inbound (student) bubbles, stacked to
   the RIGHT of the reply chip (which sits at right:-36 for inbound). The active
   (tagged) thumb stays visible without hover so the capture is obvious. */
.bubble .bubble-fb-trigger {
  position: absolute; top: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-tertiary); cursor: pointer;
  opacity: 0; transition: opacity .15s, transform .15s, background .15s, color .15s;
  box-shadow: var(--shadow); z-index: 2;
}
.bubble .bubble-fb-trigger [data-lucide] { width: 14px; height: 14px; }
.bubble:not(.fromMe) .bubble-fb-up   { right: -68px; }
.bubble:not(.fromMe) .bubble-fb-down { right: -100px; }
.message-row:hover .bubble .bubble-fb-trigger { opacity: 1; }
.bubble .bubble-fb-up:hover   { color: var(--wa); transform: scale(1.08); }
.bubble .bubble-fb-down:hover { color: var(--danger); transform: scale(1.08); }
.message-row .bubble .bubble-fb-up.active   { opacity: 1; background: var(--wa); color: #fff; border-color: transparent; }
.message-row .bubble .bubble-fb-down.active { opacity: 1; background: var(--danger); color: #fff; border-color: transparent; }
.message-row.selection-mode .bubble .bubble-fb-trigger { display: none !important; }

/* Inline edit form replaces the .text element while editing. Same
   shape as the team chat editor so the muscle-memory transfers. */
.inbox-edit-form { display: flex; flex-direction: column; gap: 6px; margin: 2px 0; }
.inbox-edit-textarea {
  min-width: 220px; max-width: 100%;
  padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px;
  font: inherit; resize: vertical;
  background: rgba(255,255,255,0.95); color: #111827;
}
.bubble.fromMe .inbox-edit-textarea { background: rgba(255,255,255,0.9); }
.inbox-edit-btns { display: flex; gap: 6px; justify-content: flex-end; }
.inbox-edit-btns .btn { padding: 4px 10px; font-size: 12px; }

/* "edited" indicator in the meta row beside the timestamp. Same quiet
   italic styling used in team chat for consistency. */
.bubble .meta .meta-edited {
  font-size: 10px; color: var(--gray-500, #6b7280); font-style: italic;
  margin-left: 2px;
}

/* Bot bubble header — stacks the Bot tag, the always-visible Coach
   button, and the optional 💬N badge inline INSIDE the bubble so
   nothing gets clipped by the messages-area overflow. */
.bubble.is-bot .bot-bubble-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.bot-coach-inline-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: #6d28d9;
  background: #ede9fe; border: 1px solid #c4b5fd; border-radius: 999px;
  padding: 1px 8px; cursor: pointer;
}
.bot-coach-inline-btn:hover { background: #ddd6fe; }

.bubble .quoted-block {
  display: flex; gap: 8px; align-items: stretch;
  padding: 6px 10px; margin-bottom: 4px;
  background: rgba(0,0,0,0.05); border-radius: 6px;
  cursor: pointer; transition: background 0.15s;
}
.bubble .quoted-block:hover { background: rgba(0,0,0,0.08); }
.bubble.fromMe .quoted-block { background: rgba(0,0,0,0.06); }
.bubble .quoted-block-bar {
  width: 3px; flex-shrink: 0; border-radius: 2px; background: #25d366;
}
.bubble .quoted-block-body { flex: 1; min-width: 0; }
.bubble .quoted-block-author { font-size: 12px; font-weight: 600; color: #128c7e; margin-bottom: 1px; }
.bubble .quoted-block-snippet {
  font-size: 12.5px; color: var(--gray-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Composer reply pill — sits between the message list and the textarea. */
/* Archive shortcut row in the inbox sidebar — mirrors WhatsApp's
   "Archived" tile above the conversation list. Click toggles between
   main inbox and archived-only view. */
.archive-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  user-select: none;
  background: var(--gray-50, #f9fafb);
}
.archive-row:hover { background: var(--gray-100, #f3f4f6); }
.archive-row.active {
  background: rgba(37, 211, 102, 0.08);
  border-bottom-color: rgba(37, 211, 102, 0.35);
}
.archive-row-icon { display: inline-flex; color: var(--gray-600); }
.archive-row-icon i { width: 18px; height: 18px; }
.archive-row-label { flex: 1; font-size: 13px; font-weight: 500; color: var(--gray-700); }
.archive-row-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: #25d366; color: #fff; font-size: 11px; font-weight: 600;
}
.archive-row-count.zero { background: var(--gray-400); }

/* In-chat search bar — slides between the chat-header and messages area
   when toggled via #chatSearchBtn. Compact row: icon, input, match
   counter, prev/next/close. */
.chat-search-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--gray-50, #f9fafb);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0; /* Don't squeeze the messages area when both this and
                     the reply-preview are visible at the same time. */
}
.chat-search-bar .chat-search-icon {
  width: 16px; height: 16px; color: var(--gray-500); flex-shrink: 0;
}
.chat-search-bar input {
  flex: 1; min-width: 0;
  padding: 6px 8px; font-size: 13px;
  background: transparent; border: none; outline: none;
}
.chat-search-bar .chat-search-count {
  font-size: 11px; color: var(--gray-500);
  white-space: nowrap; user-select: none;
}
.chat-search-bar .icon-btn { padding: 4px; }
.chat-search-bar .icon-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.bubble.search-match { box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.45); }
.bubble.search-match-active { box-shadow: 0 0 0 2px #25d366; }

/* In-chat search results — WhatsApp-style clickable list under the search bar.
   A flex item between the search bar and the messages area (pushes them down,
   never overlays), capped + scrollable. Click a row to jump to that message. */
.chat-search-results {
  flex-shrink: 0;
  max-height: 55vh; overflow-y: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.chat-search-results.hidden { display: none; }
.csr-row {
  display: block; width: 100%; text-align: start;
  padding: 8px 14px; border: none; background: transparent; cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
}
.csr-row:hover, .csr-row.csr-active { background: var(--surface-hover); }
.csr-date { font-size: 11px; color: var(--text-tertiary); margin-bottom: 2px; }
.csr-snippet {
  font-size: 13px; color: var(--text); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.csr-snippet mark { background: transparent; color: var(--wa); font-weight: 700; }
.csr-empty { padding: 16px 14px; font-size: 13px; color: var(--text-tertiary); text-align: center; }

.reply-preview {
  display: flex; align-items: stretch; gap: 8px;
  padding: 8px 12px;
  background: var(--gray-50, #f9fafb);
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0; /* Mirrors .chat-search-bar — both can co-exist
                     between header and messages without crushing them. */
}
.reply-preview-bar { width: 3px; border-radius: 2px; background: #25d366; flex-shrink: 0; }
.reply-preview-body { flex: 1; min-width: 0; padding: 2px 0; }
.reply-preview-author { font-size: 12px; font-weight: 600; color: #128c7e; }
.reply-preview-snippet {
  font-size: 13px; color: var(--gray-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.reply-preview .icon-btn { align-self: center; }

/* Same UI inside the team chat / team groups composer too.
   `flex: 0 0 100%` parks the pill on its own row above the input
   (paired with `flex-wrap: wrap` on .teamchat-compose). `min-width: 0`
   is required so the nested ellipsis truncation actually kicks in —
   without it, a long quoted message pushes the parent's intrinsic
   min-width past the viewport and overflows horizontally. */
.teamchat-compose .reply-preview {
  flex: 0 0 100%;
  min-width: 0;
  border-top: none; border: 1px solid var(--gray-200); border-radius: 8px;
  margin-bottom: 6px;
}
.teamchat-msg .quoted-block {
  display: flex; gap: 10px; align-items: stretch;
  /* Recessed inset that ALSO eats the bubble's own corners so the
     quote sits in a tray inside the bubble, not as a floating chip.
     Negative top/side margins pull it flush to the bubble edge; the
     bottom margin keeps a clear gap before the reply body. */
  margin: -10px -14px 8px -14px;
  padding: 8px 12px 8px 10px;
  background: rgba(0, 0, 0, 0.05);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background 120ms ease;
}
.teamchat-msg .quoted-block:hover { background: rgba(0, 0, 0, 0.08); }
/* Outbound (me) bubbles tint the quote tray a deeper green so the
   contrast between "what I quoted" and "what I replied" is
   immediately readable. Without this, both halves blend into one
   solid green slab — exactly what Ayoub flagged. */
.teamchat-msg.me .quoted-block {
  background: rgba(18, 140, 126, 0.10);
  border-bottom-color: rgba(18, 140, 126, 0.15);
}
.teamchat-msg.me .quoted-block:hover { background: rgba(18, 140, 126, 0.16); }
.teamchat-msg .quoted-block-bar {
  width: 4px; border-radius: 2px;
  background: #25d366; flex-shrink: 0;
  /* Slightly inset top/bottom so the bar reads as part of the quote
     instead of a hard slab edge. */
  margin: 2px 0;
}
.teamchat-msg .quoted-block-body { flex: 1; min-width: 0; }
.teamchat-msg .quoted-block-author {
  font-size: 12px; font-weight: 700; color: #128c7e;
  margin-bottom: 2px;
}
.teamchat-msg .quoted-block-snippet {
  font-size: 12.5px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0.85;
}
/* Flash a message bubble briefly when scrolled-to via a quoted-block
   click — used by both the inbox and the team chat. */
@keyframes msgFlashKf {
  0%   { background: rgba(37, 211, 102, 0.30); }
  100% { background: transparent; }
}
/* Subtle pulse on a quoted-block while we paginate older messages
   to find the original. Stops the click feeling silent when the
   target is hundreds of messages back. */
.quoted-block-loading {
  animation: quoted-block-pulse 900ms ease-in-out infinite;
}
@keyframes quoted-block-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.msg-flash, .bubble.msg-flash {
  animation: msgFlashKf 1.2s ease-out;
  border-radius: 8px;
}
.bubble img { max-width: 280px; border-radius: 8px; display: block; }
.bubble .doc-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: rgba(0,0,0,0.04); border-radius: 6px;
  margin-bottom: 4px;
}
.bubble .doc-card [data-lucide] { width: 24px; height: 24px; color: var(--gray-500); flex-shrink: 0; }
.bubble .doc-name { font-size: 13px; font-weight: 500; color: var(--gray-700); word-break: break-all; }
.bubble.fromMe.is-bot { background: #ede9fe; }
.bubble .bot-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: #6d28d9;
  background: #ddd6fe; padding: 1px 6px; border-radius: 999px;
  margin-bottom: 4px;
}
.bubble .bot-tag [data-lucide] { width: 11px; height: 11px; }

/* Coaching badge on bot bubbles (1+ corrections exist on this reply). */
.bubble .bot-coach-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--warning);
  background: var(--warning-soft); padding: 1px 6px; border-radius: 999px;
  margin-left: 6px; margin-bottom: 4px; cursor: pointer;
  border: none;
}
.bubble .bot-coach-badge:hover { background: #fde68a; }
.bubble .bot-coach-badge.has-permanent { background: #fde68a; color: #78350f; }
.bubble .bot-coach-count { font-size: 10px; }

/* Floating popover anchored to the badge — lists each note with admin/author actions. */
.bot-coach-popover {
  position: fixed; z-index: 1000;
  width: 320px; max-height: 380px; overflow-y: auto;
  background: var(--surface-elevated); border: 1px solid var(--gray-200); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
}
.bot-coach-popover-title {
  font-size: 12px; font-weight: 600; color: var(--gray-600);
  padding: 4px 6px 8px; border-bottom: 1px solid var(--gray-100); margin-bottom: 6px;
}
.bot-coach-popover-row {
  padding: 8px 6px; border-radius: 6px;
}
.bot-coach-popover-row:hover { background: var(--gray-50); }
.bot-coach-popover-row + .bot-coach-popover-row { border-top: 1px solid var(--gray-100); }
.bot-coach-popover-row.permanent { background: #fef9c3; }
.bot-coach-popover-meta {
  font-size: 11px; color: var(--gray-500); margin-bottom: 4px;
}
.bot-coach-popover-body {
  font-size: 13px; color: var(--gray-800); white-space: pre-wrap; word-break: break-word;
}
.bot-coach-popover-actions {
  display: flex; gap: 6px; margin-top: 6px;
}
.btn.btn-tiny {
  font-size: 11px; padding: 3px 8px; line-height: 1.2;
}

/* Bot coach modal context boxes */
.bot-coach-context {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 8px; padding: 10px;
}
.bot-coach-context-label {
  font-size: 11px; font-weight: 600; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px;
}
.bot-coach-context-box {
  padding: 6px 8px; background: var(--surface); border-radius: 6px;
  font-size: 13px; color: var(--gray-800); white-space: pre-wrap; word-break: break-word;
  max-height: 120px; overflow-y: auto;
}
.bot-coach-context-box.bot-coach-reply {
  background: #ede9fe; color: #4c1d95;
}

/* Bot status pill in settings modal title */
.bot-pill {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--gray-200); color: var(--gray-600);
  margin-left: 8px; vertical-align: middle; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bot-pill.on { background: #ddd6fe; color: #6d28d9; }

/* Compose */
/* Image lightbox — click any image bubble anywhere in the platform
   (inbox 1-1/group, team chat DM, team chat WA-group inline) to open
   the full-resolution image centered over a dark backdrop. Esc /
   backdrop click / × closes. */
.image-lightbox {
  position: fixed; inset: 0;
  z-index: 250;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.image-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}
.image-lightbox img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  transform-origin: center center;
  will-change: transform;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
}
.image-lightbox img.is-zoomed { cursor: grab; }
.image-lightbox img.is-grabbing { cursor: grabbing; }
/* WhatsApp-style action toolbar — fixed dark-overlay surface, so it matches the
   close/download controls (theme-independent white-on-glass) rather than app tokens. */
.image-lightbox-toolbar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.image-lightbox-toolbar:empty { display: none; }
.image-lightbox-tool {
  width: 38px; height: 38px;
  border: none; background: transparent;
  color: #fff; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.image-lightbox-tool:hover { background: rgba(255, 255, 255, 0.18); }
.image-lightbox-tool.active { background: rgba(255, 255, 255, 0.28); }
.image-lightbox-tool i { width: 19px; height: 19px; }
.image-lightbox-zoom-label {
  min-width: 46px; text-align: center;
  color: #fff; font-size: 12px; font-weight: 600;
  opacity: 0.85; user-select: none;
}
.image-lightbox-sep {
  width: 1px; height: 22px; margin: 0 4px;
  background: rgba(255, 255, 255, 0.25);
}
.image-lightbox-react-pop {
  position: absolute; top: 62px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: 4px;
  padding: 6px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.image-lightbox-react-pop .mqr-btn {
  font-size: 20px; line-height: 1; background: transparent; border: none;
  cursor: pointer; border-radius: 8px; padding: 3px 5px; transition: transform 0.1s, background 0.15s;
}
.image-lightbox-react-pop .mqr-btn:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.18); }
.image-lightbox-react-pop .mqr-btn.is-mine { background: rgba(59, 130, 246, 0.5); }

/* Group-ticket "no class linked" — plain-language explanation card, NOT a red toast */
.tu-overlay {
  position: fixed; inset: 0; z-index: 1500;
  background: oklch(0 0 0 / 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ticket-unlinked-card {
  width: min(440px, 92vw);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 26px 24px 22px;
  text-align: center;
}
.ticket-unlinked-card .tu-icon {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lougha-soft);
  color: var(--lougha);
}
.ticket-unlinked-card .tu-icon i { width: 26px; height: 26px; }
.ticket-unlinked-card .tu-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 9px; }
.ticket-unlinked-card .tu-body { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 14px; }
.ticket-unlinked-card .tu-hint {
  display: flex; align-items: flex-start; gap: 8px; text-align: left;
  font-size: 12.5px; line-height: 1.45; color: var(--text-tertiary);
  background: var(--surface-hover); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 20px;
}
.ticket-unlinked-card .tu-hint i { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--lougha); }
.ticket-unlinked-card .tu-btns { display: flex; justify-content: center; }
.ticket-unlinked-card .tu-btn-primary {
  padding: 10px 30px; border-radius: 10px; border: none;
  background: var(--accent); color: var(--accent-fg);
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: filter 0.15s;
}
.ticket-unlinked-card .tu-btn-primary:hover { filter: brightness(1.08); }
.image-lightbox-close,
.image-lightbox-download {
  position: absolute;
  top: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
  z-index: 1;
  transition: background 0.15s;
}
.image-lightbox-close:hover,
.image-lightbox-download:hover {
  background: rgba(255, 255, 255, 0.22);
}
.image-lightbox-close { right: 16px; }
.image-lightbox-download { right: 64px; }
.image-lightbox-close i,
.image-lightbox-download i { width: 20px; height: 20px; }

/* Image annotation editor — full-screen-ish modal with toolbar at top
   and a canvas that scales-to-fit while preserving the source image's
   internal resolution for the final blob. */
.image-editor-card {
  width: 96vw; max-width: 1100px;
  height: 92vh; max-height: 900px;
  display: flex; flex-direction: column;
  padding: 0;
}
.image-editor-card .modal-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray-200);
}
.image-editor-toolbar {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.image-editor-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit; font-size: 13px;
  color: var(--gray-700);
}
.image-editor-tool i { width: 16px; height: 16px; }
.image-editor-tool:hover { background: var(--gray-100); }
.image-editor-tool.active {
  background: var(--blue-100, #dbeafe);
  color: var(--blue-700, #1d4ed8);
  border-color: var(--blue-200, #bfdbfe);
}
.image-editor-color-row {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--gray-200);
}
.image-editor-color {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.image-editor-color.active { border-color: var(--gray-700); }
.image-editor-spacer { flex: 1; }
.image-editor-body {
  flex: 1; min-height: 0;
  background: #1f2937;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 0;
}
.image-editor-canvas-wrap {
  max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.image-editor-canvas {
  max-width: 100%; max-height: 100%;
  background: #fff;
  display: block;
  cursor: crosshair;
  touch-action: none; /* let JS handle drag without browser scrolling */
}

/* Multi-attach preview strip — sits above the composer when at least
   one file is staged. Horizontal thumbnail strip + caption row. */
.attach-preview {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: var(--gray-50, #f9fafb);
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.attach-preview-strip {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.attach-preview-thumb {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 8px;
  background: var(--gray-200) center/cover no-repeat;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s;
}
.attach-preview-thumb:hover { transform: scale(1.04); }
.attach-preview-thumb.edited::before {
  content: "✎";
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(37, 99, 235, 0.92); color: #fff;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
}
.attach-preview-thumb.video::after {
  content: "▶";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 24px;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
  pointer-events: none;
}
/* Document / audio tiles in the attach preview — same 80×80 footprint
   as image thumbnails but render an icon + truncated filename + size
   instead of a thumbnail since these have no native preview. */
.attach-preview-doc {
  background: #f3f4f6;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px;
  cursor: default;
}
.attach-preview-doc:hover { transform: none; }
.attach-preview-doc-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  color: #2563eb;
}
.attach-preview-doc-icon i { width: 28px; height: 28px; }
.attach-preview-doc-meta {
  width: 100%; min-width: 0;
  text-align: center;
  margin-top: 4px;
}
.attach-preview-doc-name {
  font-size: 10px; font-weight: 500; color: var(--gray-800);
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-preview-doc-size {
  font-size: 9px; color: var(--gray-500);
  margin-top: 1px;
}
.attach-preview-thumb-remove {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px;
  background: rgba(0,0,0,0.6); color: #fff;
  border: none; border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  padding: 0;
}
.attach-preview-thumb-remove:hover { background: rgba(0,0,0,0.85); }
.attach-preview-add {
  width: 80px; height: 80px;
  border: 2px dashed var(--gray-400);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--gray-500);
}
.attach-preview-add:hover { border-color: var(--blue-500, #2563eb); color: var(--blue-500, #2563eb); }
.attach-preview-add i { width: 24px; height: 24px; }
.attach-preview-row {
  display: flex; align-items: center; gap: 6px;
}
.attach-preview-caption {
  flex: 1; min-width: 0;
  padding: 9px 14px;
  border: 0; background: var(--gray-100); border-radius: 20px;
  font-family: inherit; font-size: 14px; color: var(--gray-900);
  outline: none;
}
.attach-preview-caption:focus { background: #fff; box-shadow: 0 0 0 1px var(--gray-300); }
.attach-preview-voice-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: rgba(37, 211, 102, 0.15);
  color: #128c7e;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
}
.attach-preview-voice-pill i { width: 14px; height: 14px; }
.attach-preview-voice-discard {
  background: transparent; border: 0; cursor: pointer;
  padding: 0; display: inline-flex; color: inherit;
}
.attach-preview-voice-discard i { width: 12px; height: 12px; }
.attach-preview .attach-preview-thumb.failed { border-color: #ef4444; }
.attach-preview .attach-preview-thumb.failed::before {
  content: "⚠";
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(239, 68, 68, 0.95); color: #fff;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
}
/* Oversize warning — file is over the 100 MB server cap and will be
   rejected on send. Red border + warning chip so the agent removes it
   before clicking ✈️. */
.attach-preview .attach-preview-thumb.oversize {
  border-color: #f97316;
  background-color: #fff7ed;
}
.attach-preview .attach-preview-thumb.oversize::before {
  content: "⚠";
  position: absolute; top: 4px; left: 4px;
  background: #f97316; color: #fff;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
}
.attach-preview-doc-size.oversize { color: #c2410c; font-weight: 600; }

/* Will-compress hint — PDF is between 95 MB and 500 MB, server will
   run Ghostscript before sending so it lands under WhatsApp's 100 MB
   cap. Yellow (not red) so the agent knows it'll work but takes
   longer than usual. */
.attach-preview .attach-preview-thumb.will-compress {
  border-color: #eab308;
  background-color: #fefce8;
}
.attach-preview .attach-preview-thumb.will-compress::before {
  content: "⏱";
  position: absolute; top: 4px; left: 4px;
  background: #eab308; color: #fff;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
}
.attach-preview-doc-size.will-compress { color: #854d0e; font-weight: 600; }

/* Live status bar at the bottom of an attach-preview tile during
   send. Width animates 0% → 100% as chunks complete; status text
   replaces the size text on the same line. Stays on the tile until
   the strip is cleared so the agent always sees what's happening. */
.attach-preview-progress {
  position: absolute;
  left: 0; bottom: 0; height: 3px;
  background: var(--green-500, #22c55e);
  border-radius: 0 0 8px 8px;
  transition: width 200ms linear;
  pointer-events: none;
}
.attach-preview .attach-preview-thumb { position: relative; }

.compose {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 10px 12px; border-top: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0; position: relative;
}
/* When the multi-attach preview is active, hide the composer's regular
   controls but KEEP .compose as a structural container so #recordOverlay
   (which lives inside it) can still mount when the batch's mic button
   triggers startRecording. Without this, the agent's voice-record click
   silently did nothing. */
.compose.batching > *:not(#recordOverlay) {
  display: none;
}
.compose.batching {
  padding: 0; border-top: 0;
  /* Collapse height when nothing visible inside. */
  min-height: 0;
}
/* WhatsApp-style attach popover anchored above the paperclip button. */
.attach-menu {
  position: absolute;
  bottom: 56px;
  left: 50px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 220px;
  z-index: 200;
}
.attach-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  transition: background var(--motion-fast) var(--ease);
}
.attach-menu-item:hover { background: var(--surface-hover); }
.attach-menu-item i { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.compose-input {
  flex: 1; min-height: 38px; max-height: 120px;
  padding: 9px 14px;
  border: 1px solid transparent;
  background: var(--surface-sunken);
  border-radius: 20px;
  font-family: inherit; font-size: 14px; color: var(--text);
  resize: none; outline: none; line-height: 1.4;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.compose-input::placeholder { color: var(--text-muted); }
.compose-input:focus { background: var(--surface); border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }

.record-overlay {
  position: absolute; inset: 0; display: flex; align-items: center;
  gap: 10px; padding: 8px 12px;
  background: var(--surface);
}
.record-trash-btn {
  flex-shrink: 0;
  color: var(--gray-500);
}
.record-trash-btn:hover { color: #dc2626; background: #fef2f2; }
.record-bar {
  flex: 1; display: flex; align-items: center; gap: 12px;
  background: #f9fafb; border: 1px solid var(--gray-200);
  border-radius: 999px; padding: 6px 14px;
  min-width: 0;
}
.record-status {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600;
  color: #dc2626;
}
.record-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #dc2626; animation: pulse 1s infinite;
  flex-shrink: 0;
}
.record-waveform {
  flex: 1; height: 32px; min-width: 0;
  display: block;
}
.record-pause-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--gray-100); border-radius: 50%;
  color: var(--gray-700);
}
.record-pause-btn:hover { background: var(--gray-200); }
.record-pause-btn.paused {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
}
.record-send-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  background: #25d366 !important;
  border-radius: 50% !important;
  color: #fff !important;
}
.record-send-btn:hover { background: #1ebe5a !important; }

/* ─── Profile panel ──────────────────────────────────────────────────
   Right-rail panel for Contact + Group profiles. Surface stack:
     panel = --surface (white / charcoal)
     head + body backdrop = --surface-sunken (recessed)
     each card = --surface again, separated by hairlines */
.profile-panel {
  border-left: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; min-height: 0;
}
.profile-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-sunken); flex-shrink: 0;
}
.profile-id { flex: 1; min-width: 0; }
.profile-id h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-id .small { font-size: 11px; margin: 2px 0 0; color: var(--text-tertiary); }
.profile-body {
  flex: 1; overflow-y: auto;
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-sunken);
  position: relative; /* anchors the .ai-popup overlay inside the pane */
}
.profile-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.profile-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  background: var(--surface); border-bottom: 1px solid transparent;
  transition: background 0.15s;
}
.profile-card[open] .profile-card-head { border-bottom-color: var(--border-subtle); }
.profile-card-head:hover { background: var(--surface-hover); }
.card-title { display: inline-flex; align-items: center; gap: 8px; }
.card-title [data-lucide] { width: 16px; height: 16px; color: var(--text-tertiary); }
.card-toggle {
  border: 0; background: transparent; cursor: pointer; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
}
.card-toggle:hover { background: var(--surface-hover); color: var(--text); }
.profile-card-body {
  padding: 10px 12px; font-size: 13px; color: var(--text-secondary);
  display: none;
}
.profile-card.open .profile-card-body { display: block; }
.profile-card.open .card-toggle { transform: rotate(180deg); }

.field-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* Click-to-copy affordance on profile fields. Hovering a non-editable
   value shows a `cursor: copy` so agents know it's clickable; the
   delegated click handler on #profileSections copies + toasts. Editable
   rows keep their own pointer + edit behaviour. */
#profileSections .field-val,
#profileSections .field-key,
#profileSections .li-title,
#profileSections .li-sub { user-select: text; }
#profileSections .field-row:not(.field-row-editable) .field-val:not(.empty):not(.field-val-editable):hover {
  cursor: copy;
}
#profileSections .li-sub:hover { cursor: copy; }

.field-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--gray-100); font-size: 13px; }
.field-row:last-child { border-bottom: 0; }
.field-key { min-width: 100px; color: var(--gray-500); font-size: 12px; flex-shrink: 0; padding-top: 1px; }
.field-val { color: var(--gray-900); flex: 1; word-break: break-word; }
.field-val.empty { color: var(--gray-300); font-style: italic; }

.list-item {
  padding: 8px 10px; border-radius: 6px; background: var(--gray-50);
  margin-bottom: 6px; font-size: 13px;
}
.list-item:last-child { margin-bottom: 0; }
.field-row-editable.editing { background: rgba(99, 102, 241, 0.04); border-radius: 6px; padding: 6px 8px; }
/* Edit pencil sits to the right of every editable field. Faint until
   hover so it doesn't compete with the value (which is the primary
   thing the agent is reading). Clicking the pencil is the ONLY way
   into edit mode — text clicks pass through to URL links. */
.field-edit-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--gray-400);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.field-edit-btn [data-lucide] { width: 14px; height: 14px; }
.field-row-editable:hover .field-edit-btn { opacity: 1; }
.field-edit-btn:hover { background: var(--gray-100); color: var(--gray-700); }
.field-edit-btn:focus-visible { opacity: 1; outline: 2px solid var(--indigo-500, #6366f1); outline-offset: 1px; }
/* Hide the pencil while the row is in edit mode — Save / Cancel
   replace it. */
.field-row-editable.editing .field-edit-btn { display: none; }

/* Linkified URLs inside field-val — clickable, look like real links,
   plus hint that Alt+click copies instead of opening. */
.field-val .field-val-link {
  color: #2563eb;
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.4);
  text-underline-offset: 2px;
  word-break: break-all;
}
.field-val .field-val-link:hover { color: #1d4ed8; text-decoration-color: #1d4ed8; }
.list-item-clickable { transition: background 0.15s, border-color 0.15s; }
.list-item-clickable:hover {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.4);
}
.list-item-clickable:hover .li-title { color: #4338ca; }
/* Quick visual feedback when an "Open" click points at the chat we're
 * already viewing — pulses the conv-item's background indigo so the
 * agent knows the click registered. */
@keyframes conv-flash {
  0%   { background-color: rgba(99, 102, 241, 0.30); }
  100% { background-color: transparent; }
}
.conv-item.flash { animation: conv-flash 0.6s ease-out; }
.li-open-hint { margin-left: auto; opacity: 0.6; transition: opacity 0.15s; }
.list-item-clickable:hover .li-open-hint { opacity: 1; color: #4338ca; }
.list-item .li-title { font-weight: 600; color: var(--gray-900); }
/* ── Class card (profile → Groups/Classes) — redesign 2026-09-22 ──────────
   Before: the class name was squeezed into ~90px because four action buttons
   shared its row, and the only facts on screen were schedule + teacher, both
   as identical 11px grey lines. Now the name owns the first row, the actions
   sit on a footer row, and the group-truth fields the API already sends
   (level, start date, end date, status) are visible without opening HubSpot.
   All colours are ramp tokens, so the card re-themes for free in dark mode. */
.list-item.class-card { padding: 10px 11px; }
.list-item.class-card .li-title-row { flex-wrap: wrap; row-gap: 4px; }
.list-item.class-card .li-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; line-height: 1.35;
  /* Two lines is enough for "Individual class: <full name>"; beyond that the
     title would push the facts below the fold of a short drawer. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.list-item.class-card .li-open-hint { margin-left: 0; flex: 0 0 auto; }

/* Status pill — right-aligned so a column of cards reads its statuses down
   one edge instead of at a ragged position after each name. */
.cls-pill {
  margin-left: auto; flex: 0 0 auto;
  font-size: 10px; font-weight: 600; line-height: 1;
  letter-spacing: 0.02em; text-transform: capitalize;
  padding: 3px 7px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.cls-pill-live    { background: color-mix(in oklch, var(--green-600) 13%, transparent); color: var(--green-600); border-color: color-mix(in oklch, var(--green-600) 28%, transparent); }
.cls-pill-warn    { background: color-mix(in oklch, var(--amber-500) 16%, transparent); color: var(--amber-600, #b45309); border-color: color-mix(in oklch, var(--amber-500) 34%, transparent); }
.cls-pill-done    { background: var(--gray-100); color: var(--gray-500); border-color: var(--gray-200); }
.cls-pill-neutral { background: var(--gray-100); color: var(--gray-600); border-color: var(--gray-200); }

/* One fact per row. A two-column grid was tried first and ellipsised half the
   real values in a 300px drawer, so the block is a single icon rail instead —
   nothing truncates, and every row starts at the same x. */
.cls-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin-top: 7px;
}
.cls-meta-cell {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 11.5px; color: var(--gray-600);
}
/* "when is this class?" is the most-read fact on the card. */
.cls-meta-cell.cls-meta-strong { color: var(--gray-800); font-weight: 500; }
.cls-meta-cell [data-lucide],
.cls-meta-cell svg { width: 12px; height: 12px; flex: 0 0 12px; color: var(--gray-400); stroke-width: 2; }
.cls-meta-cell.cls-meta-strong svg { color: var(--gray-500); }
/* Ellipsis is a last resort here, not the normal case — the full value is
   always in the cell's title=. */
.cls-meta-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cls-actions {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px;
  margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--gray-200);
}
/* The buttons keep their inline colours; only the footer geometry changes. */
.cls-actions .btn-icon-sm { margin: 0; }

.list-item .li-sub { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
.list-item a { color: var(--blue-500); text-decoration: none; font-size: 11px; }
.list-item a:hover { text-decoration: underline; }

.empty-row { color: var(--gray-400); font-size: 12px; text-align: center; padding: 12px; }

.link-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border: 0; background: transparent;
  border-radius: 4px; cursor: pointer;
  font-size: 11px; font-weight: 500; color: var(--blue-500);
}
.link-btn:hover { background: var(--gray-100); }
.link-btn [data-lucide] { width: 12px; height: 12px; }

/* AI summary */
.ai-card { border: 1px solid var(--violet-500); }
.ai-card .profile-card-head { background: linear-gradient(135deg, #f5f3ff, #fff); }
.ai-card .card-title [data-lucide] { color: var(--violet-500); }
.ai-body { white-space: pre-wrap; line-height: 1.6; font-size: 12.5px; }
.ai-body.loading { color: var(--gray-400); display: flex; align-items: center; gap: 8px; }

/* ─── Modal (H4: bigger title, more padding, blurred backdrop, calmer foot) ─── */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: oklch(0.10 0.012 250 / 0.55);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
[data-theme="dark"] .modal-backdrop { background: oklch(0 0 0 / 0.65); }
.modal-card {
  position: relative; width: 100%; max-width: 540px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; max-height: 90vh; overflow: hidden;
  color: var(--text);
}
.modal-lg { max-width: 720px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border-subtle);
}
.modal-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 10px;
}
.modal-head h2 [data-lucide] {
  width: 18px; height: 18px; color: var(--accent); stroke-width: 2;
}
.modal-body { padding: 20px 22px; overflow-y: auto; color: var(--text-secondary); }
.modal-foot {
  padding: 14px 22px; border-top: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
  display: flex; justify-content: flex-end; gap: 8px;
}
.modal-foot.has-hint { background: var(--surface-sunken); }

/* Right-side slide-in panel variant — for forms that need the chat
   behind them to stay readable AND INTERACTIVE (so agents can select
   + copy text from the conversation while the form is open).
   Trick: pointer-events:none on .modal + .modal-backdrop, then
   pointer-events:auto re-enables clicks on the .modal-card itself.
   Click anywhere on the chat behind → goes to the chat. Click on
   the card → goes to the form. Closing happens via X / Cancel only. */
.modal.modal-side {
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
}
.modal.modal-side .modal-backdrop {
  display: none; /* no scrim — the chat behind stays fully visible */
}
.modal.modal-side .modal-card {
  pointer-events: auto;
  /* Sized to occupy roughly the right rail's real-estate so on a 13"
     laptop (~1366 px wide) the panel doesn't overgrow the chat column.
     clamp scales gracefully: 320px floor (small screens), 28vw target,
     420px ceiling (big monitors). */
  width: clamp(320px, 28vw, 420px);
  height: 100vh;
  max-height: 100vh;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
  animation: modal-side-slide-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes modal-side-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Documents modal */
.doc-tabs { display: flex; padding: 8px 14px 0; border-bottom: 1px solid var(--border); gap: 4px; background: var(--surface-elevated); }
.doc-tab {
  padding: 8px 14px; border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 500; color: var(--text-tertiary); cursor: pointer;
  font-family: inherit;
  transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.doc-tab:hover { color: var(--text); }
.doc-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.doc-form { display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }

.doc-items { display: flex; flex-direction: column; gap: 6px; }
.doc-item {
  display: grid; grid-template-columns: 2fr 80px 100px 28px; gap: 6px;
  align-items: center;
}
.doc-item .input { padding: 7px 10px; font-size: 13px; }
.doc-item-del {
  width: 28px; height: 28px; border: 0; background: transparent;
  border-radius: 6px; color: var(--red-500); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.doc-item-del:hover { background: #fee2e2; }
.doc-item-del [data-lucide] { width: 14px; height: 14px; }

.doc-totals {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; background: var(--gray-50); border-radius: 8px;
  font-size: 13px;
}
.doc-totals > div { display: flex; justify-content: space-between; }
.doc-totals .total {
  padding-top: 6px; border-top: 1px solid var(--gray-200);
  font-size: 14px; color: var(--gray-900);
}

/* Templates */
.template-form { display: flex; flex-direction: column; gap: 8px; }
.tpl-category-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.tpl-cat-btn {
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-secondary);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.tpl-cat-btn:hover { background: var(--surface-hover); }
.tpl-cat-btn.active {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent); font-weight: 600;
}
.tpl-cat-tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  margin-left: 6px;
  letter-spacing: 0.06em;
}
/* Category tags — each tied to a distinct OKLCH-balanced avatar slot
   so they stay readable in both themes and the four categories remain
   visually distinct. */
.tpl-cat-tag-student  { background: oklch(0.62 0.18 220 / 0.18); color: var(--av-2); }
.tpl-cat-tag-group    { background: oklch(0.62 0.18 350 / 0.18); color: var(--av-5); }
.tpl-cat-tag-reminder { background: var(--warning-soft);          color: var(--warning); }
.tpl-cat-tag-club     { background: oklch(0.62 0.18 310 / 0.18); color: var(--av-4); }

.reminder-tpl-picker {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0 12px;
}
.reminder-tpl-label { font-size: 11px; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.reminder-tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reminder-tpl-chip {
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.reminder-tpl-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.reminder-tpl-empty { font-size: 12px; color: var(--text-tertiary); font-style: italic; }
.tpl-list { display: flex; flex-direction: column; gap: 8px; }
.tpl-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; background: var(--surface-sunken); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.tpl-item:hover { border-color: var(--border-strong); }
.tpl-body { flex: 1; min-width: 0; }
.tpl-name { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-weight: 600; font-size: 13px; color: var(--text); }
.tpl-content { font-size: 12px; color: var(--text-secondary); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.tpl-actions { display: flex; gap: 4px; flex-shrink: 0; }
.icon-btn-sm.tpl-send-btn {
  background: var(--success-soft); color: var(--success);
}
.icon-btn-sm.tpl-send-btn:hover { background: var(--success-soft); filter: brightness(0.96); }
[data-theme="dark"] .icon-btn-sm.tpl-send-btn:hover { filter: brightness(1.15); }

/* Inline edit — when an agent clicks the ✏️ icon on a template card,
   that card flips into a form. The info-soft tint + info border mark
   which row is being edited so the agent doesn't lose track in a long
   list. */
.tpl-item.tpl-item-editing {
  background: var(--info-soft);
  border-color: var(--info);
  flex-direction: column;
  align-items: stretch;
}
.tpl-edit-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tpl-edit-form .input { font-size: 13px; }
.tpl-edit-form .tpl-edit-content { font-family: inherit; resize: vertical; min-height: 96px; }
.tpl-edit-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tpl-edit-actions .tpl-edit-cat { max-width: 160px; }
.tpl-edit-actions .btn { padding: 6px 12px; font-size: 12px; }

/* Checkbox for multi-template select. Hidden by default; revealed
   on hover OR when the row is already selected (so the green check
   stays visible). Same green accent as message multi-select. */
.tpl-checkbox {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  display: none;
  align-items: center; justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer; padding: 0; flex-shrink: 0;
  margin-top: 2px;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.tpl-checkbox svg { width: 14px; height: 14px; }
.tpl-item:hover .tpl-checkbox { display: inline-flex; }
.tpl-checkbox.selected {
  display: inline-flex;
  background: var(--success); color: #fff; border-color: var(--success);
}
.tpl-item.tpl-item-selected {
  background: var(--success-soft);
  border-color: var(--success);
}

/* Sticky footer at the bottom of the templates modal — replaces
   the per-card ✈️ for the multi-send flow. */
.tpl-multi-send-bar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-top: 12px;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.tpl-multi-send-bar.hidden { display: none; }
.tpl-multi-count { font-weight: 600; color: var(--text); font-size: 13px; }
.tpl-multi-send-bar .btn { padding: 6px 14px; font-size: 13px; }

/* ───── Multi-select / Forward / Copy ─────
   Hover a bubble to reveal the ◯ select button. In selection mode
   we still keep ◯ hover-only for unselected rows (less visual
   clutter than WA Desktop's all-rows-show approach), but selected
   rows show a permanent green check + a tinted background. */
.message-row { position: relative; }
.msg-select-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--gray-300, #d1d5db);
  display: none;
  align-items: center; justify-content: center;
  color: var(--gray-500, #6b7280);
  cursor: pointer; padding: 0;
  z-index: 5;
}
.msg-select-btn svg { width: 14px; height: 14px; }
.message-row:hover .msg-select-btn { display: flex; }
.msg-select-btn.selected {
  display: flex;  /* always visible when selected */
  background: #22c55e; color: #fff; border-color: #16a34a;
}
.message-row.fromMe .msg-select-btn { left: auto; right: 4px; }

/* Hover reply icon — sits just inside the select button. Visible
   only on hover (and not while in selection mode, where the
   ◯ takes priority). Keeps inbox + team chat in parity. */
.msg-reply-btn,
.teamchat-msg-row .msg-reply-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 30px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--gray-300, #d1d5db);
  display: none;
  align-items: center; justify-content: center;
  color: var(--gray-500, #6b7280);
  cursor: pointer; padding: 0;
  z-index: 5;
}
.msg-reply-btn svg { width: 13px; height: 13px; }
.message-row:hover .msg-reply-btn,
.teamchat-msg-row:hover .msg-reply-btn { display: flex; }
.message-row.selection-mode .msg-reply-btn,
.teamchat-msg-row.selection-mode .msg-reply-btn { display: none !important; }
.message-row.fromMe .msg-reply-btn { left: auto; right: 30px; }
.teamchat-msg-row.me .msg-reply-btn { left: auto; right: 30px; }
.message-row.is-selected { background: rgba(34, 197, 94, 0.08); }
.message-row.selection-mode { cursor: pointer; }

/* Forward icon — sits next to Reply on team-chat bubbles. Single-click
   alternative to the multi-select bar's Forward button; opens the
   shared picker (Team + WhatsApp sections) with one message as the
   source. Same circular chip style + hover-only behaviour as Reply.
   On own (me) rows it lives past Delete/Edit at right:108px so the
   stacking order stays Reply → Edit → Delete → Forward going inward. */
.teamchat-msg-row .msg-forward-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 56px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--gray-300, #d1d5db);
  display: none;
  align-items: center; justify-content: center;
  color: var(--gray-500, #6b7280);
  cursor: pointer; padding: 0;
  z-index: 5;
}
.msg-forward-btn svg { width: 13px; height: 13px; }
.teamchat-msg-row:hover .msg-forward-btn { display: flex; }
.teamchat-msg-row.selection-mode .msg-forward-btn { display: none !important; }
.teamchat-msg-row.me .msg-forward-btn { left: auto; right: 108px; }
.teamchat-msg-row .msg-forward-btn:hover { color: var(--accent, #16a34a); }

/* Edit / Delete hover buttons on Team chat bubbles. Same circular
   chip style as msg-reply-btn so the row keeps a consistent look as
   the buttons stack. Order from right edge inward (own-row): Reply
   (30px), Edit (56px), Delete (82px). */
.teamchat-msg-row .msg-edit-btn,
.teamchat-msg-row .msg-delete-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--gray-300, #d1d5db);
  display: none;
  align-items: center; justify-content: center;
  color: var(--gray-500, #6b7280);
  cursor: pointer; padding: 0;
  z-index: 5;
}
.teamchat-msg-row .msg-edit-btn svg,
.teamchat-msg-row .msg-delete-btn svg { width: 13px; height: 13px; }
.teamchat-msg-row.me .msg-edit-btn   { right: 56px; }
.teamchat-msg-row.me .msg-delete-btn { right: 82px; color: #b91c1c; }
.teamchat-msg-row:hover .msg-edit-btn,
.teamchat-msg-row:hover .msg-delete-btn { display: flex; }
.teamchat-msg-row.selection-mode .msg-edit-btn,
.teamchat-msg-row.selection-mode .msg-delete-btn { display: none !important; }

/* Inline edit form replaces the .teamchat-msg-text while editing.
   Textarea matches the bubble width so the user can see the full line
   they're rewriting; Save / Cancel sit below on their own row. */
.teamchat-edit-form { display: flex; flex-direction: column; gap: 6px; }
.teamchat-edit-textarea {
  min-width: 220px; max-width: 100%;
  padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px;
  font: inherit; resize: vertical;
  background: rgba(255,255,255,0.95); color: #111827;
}
.teamchat-msg.me .teamchat-edit-textarea { background: rgba(255,255,255,0.85); }
.teamchat-edit-btns { display: flex; gap: 6px; justify-content: flex-end; }
.teamchat-edit-btns .btn { padding: 4px 10px; font-size: 12px; }

/* "edited" indicator next to the timestamp. Quiet styling — sits in
   the same meta row as the time + tick, doesn't compete for attention
   but tells the recipient the bubble is post-edit. */
.teamchat-msg-edited {
  font-size: 10px; color: var(--gray-500, #6b7280); font-style: italic;
  margin-left: 2px;
}

/* Bottom toolbar — replaces the composer while selection is active.
   Mounted as a sibling immediately before .compose so the agent
   sees Cancel / Copy / Forward in the exact spot they expect a
   send button. */
.msg-selection-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--gray-200);
  background: var(--surface); flex-shrink: 0;
}
.msg-selection-bar.hidden { display: none; }
.msg-selection-count { font-weight: 600; color: var(--gray-800, #1f2937); }
.msg-selection-bar .btn { padding: 6px 14px; font-size: 13px; }
.msg-selection-bar .icon-btn.msg-selection-x { color: var(--gray-700, #374151); }
.compose.hidden-during-selection,
.teamchat-compose.hidden-during-selection { display: none; }

/* "Forwarded" label inside a forwarded bubble */
.forwarded-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--gray-500, #6b7280);
  font-style: italic; margin-bottom: 4px;
}
.forwarded-tag svg { width: 12px; height: 12px; }

/* Client "Delete for everyone" — content kept, retraction flagged */
.revoked-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--danger); background: var(--danger-soft);
  border-radius: 999px; padding: 2px 8px; margin-bottom: 4px;
  width: fit-content;
}
.revoked-tag svg { width: 12px; height: 12px; }

/* Forward picker modal — chat list with multi-select ticks */
.fwd-chat-list {
  max-height: 360px; overflow-y: auto;
  border: 1px solid var(--gray-200); border-radius: 8px;
}
.fwd-chat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
}
.fwd-chat-row:last-child { border-bottom: 0; }
.fwd-chat-row:hover { background: var(--gray-50); }
.fwd-chat-row.picked { background: rgba(34, 197, 94, 0.08); }
.fwd-chat-name { flex: 1; min-width: 0; font-size: 13px; color: var(--gray-900); }
.fwd-chat-name-channel { display: flex; align-items: center; gap: 8px; }
.fwd-chat-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwd-channel-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  max-width: 160px; padding: 2px 7px; border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; font-weight: 700; line-height: 1.35;
}
.fwd-channel-baileys { color: #047857; background: rgba(16, 185, 129, 0.12); }
.fwd-channel-leads7 { color: #1d4ed8; background: rgba(37, 99, 235, 0.12); }
/* A class that lives only in the app: it takes text and nothing else, so the
   row says which one it is, and greys itself out when the thing being
   forwarded is a voice note, an image or a PDF. */
.fwd-channel-app { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.fwd-chat-row.fwd-row-blocked { opacity: 0.5; cursor: not-allowed; }
.fwd-chat-row.fwd-row-blocked:hover { background: transparent; }
.fwd-chat-tick svg { width: 18px; height: 18px; color: var(--gray-400); }
.fwd-chat-row.picked .fwd-chat-tick svg { color: #16a34a; }

/* Section titles inside the forward picker. The "Team" title is
   meant to feel anchored — same visual rhythm as the WhatsApp
   title underneath. Both stick to the top of their respective
   sections via position:sticky so the agent always knows what
   they're scrolling through. */
.fwd-section-title {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--gray-100, #f3f4f6);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--gray-700, #374151); letter-spacing: 0.04em;
  border-bottom: 1px solid var(--gray-200);
}
.fwd-section-title svg { width: 14px; height: 14px; }

/* Sticker bubble — transparent, no background, smaller than a
   regular image. Matches WhatsApp's own sticker rendering. */
.bubble.sticker-bubble {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.bubble .sticker {
  max-width: 160px; max-height: 160px;
  width: auto; height: auto;
  display: block;
  background: transparent;
}
.fwd-team-row { background: rgba(99, 102, 241, 0.04); }
.fwd-team-row:hover { background: var(--accent-soft); }
.fwd-team-row.picked { background: rgba(34, 197, 94, 0.10); }
.fwd-team-row .fwd-chat-name::after {
  /* The " · Team" / " · Room" suffix is part of the text node now,
     keep the row clean */
  content: '';
}
.avatar.avatar-room { background: var(--indigo-500, #6366f1); }

/* Notes */
.notes-list { display: flex; flex-direction: column; gap: 8px; }
.note-item {
  padding: 10px; background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px;
  font-size: 13px; color: var(--gray-800); position: relative;
}
.note-time { font-size: 11px; color: var(--gray-500); margin-top: 4px; }
.note-del {
  position: absolute; top: 6px; right: 6px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--gray-400); padding: 2px;
}
.note-del:hover { color: var(--red-500); }

/* Bot toggle active state */
.icon-btn.bot-on { background: #ede9fe; color: var(--violet-500); }
.icon-btn.bot-on:hover { background: #ddd6fe; color: var(--violet-500); }
.icon-btn.profile-active { background: var(--wa-soft); color: var(--wa); }

/* Legacy team-call class names are retained for controller compatibility;
   the visual treatment is the shared non-blocking side panel below. */
.incoming-call-modal {
  position: fixed;
  top: calc(var(--topbar-h, 56px) + 18px);
  right: 20px;
  width: min(360px, calc(100vw - 32px));
  display: block;
  z-index: 1200;
  pointer-events: none;
}
.incoming-call-modal.hidden { display: none; }
.incoming-call-card {
  min-width: 0;
  max-width: none;
  pointer-events: auto;
}
@keyframes incoming-call-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.incoming-call-pulse {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  display: inline-flex; align-items: center; justify-content: center;
  color: #047857;
  margin-bottom: 4px;
  animation: incoming-call-ring 1.6s ease-out infinite;
}
.incoming-call-pulse [data-lucide] { width: 30px; height: 30px; }
@keyframes incoming-call-ring {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70%  { box-shadow: 0 0 0 20px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.incoming-call-name {
  font-size: 21px; font-weight: 700; line-height: 1.2; text-align: center;
  color: var(--text, #111827);
}
.incoming-call-sub {
  font-size: 12.5px; color: var(--text-secondary, #6b7280);
}
.incoming-call-agent {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 3px 11px; border-radius: 999px;
  background: var(--surface-sunken, rgba(0, 0, 0, 0.05));
  color: var(--text-secondary, #4b5563);
  margin-top: 2px;
}
.incoming-call-agent.hidden { display: none; }
.incoming-call-agent.is-mine { background: rgba(34, 197, 94, 0.14); color: #16a34a; }
.incoming-call-actions {
  display: flex; gap: 40px;
  margin-top: 14px;
}
.incoming-call-action { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.incoming-call-action-label { font-size: 12px; font-weight: 600; color: var(--text-secondary, #6b7280); }
.incoming-call-btn {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.incoming-call-btn [data-lucide] { width: 25px; height: 25px; }
.incoming-call-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.20); filter: brightness(1.05); }
.incoming-call-btn:active { transform: translateY(0); }
.incoming-call-btn.is-decline { background: #ef4444; color: white; }
.incoming-call-btn.is-accept  { background: #10b981; color: white; }
.incoming-call-hide {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  padding: 7px 16px; border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.10));
  color: var(--text-secondary, #6b7280);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.incoming-call-hide [data-lucide] { width: 15px; height: 15px; }
.incoming-call-hide:hover {
  background: var(--surface-sunken, rgba(0, 0, 0, 0.05));
  color: var(--text, #111827);
  border-color: var(--text-secondary, #9ca3af);
}
.incoming-call-hide-hint {
  font-size: 11px; color: var(--text-secondary, #9ca3af); opacity: 0.85;
  margin-top: 5px; text-align: center;
}

/* Shared incoming-call source palette. Source stays written in the header;
   colour is only a fast secondary cue. */
.incoming-call-host,
#gcIncomingModal {
  --call-accent: var(--wa, #16a34a);
  --call-accent-soft: var(--wa-soft, #e9f8ef);
  --call-accent-ink: var(--wa-dark, #087443);
}
.incoming-call-host[data-call-source="support2"],
#gcIncomingModal[data-call-source="support2"] {
  --call-accent: var(--wa, #16a34a);
  --call-accent-soft: var(--wa-soft, #e9f8ef);
  --call-accent-ink: var(--wa-dark, #087443);
}
.incoming-call-host[data-call-source="leads7"],
#gcIncomingModal[data-call-source="leads7"] {
  --call-accent: var(--accent, #2563eb);
  --call-accent-soft: var(--accent-soft, #eaf0ff);
  --call-accent-ink: var(--accent-strong, #1d4ed8);
}
.incoming-call-host[data-call-source="teachers"],
#gcIncomingModal[data-call-source="teachers"] {
  --call-accent: #8b5cf6;
  --call-accent-soft: #f1edff;
  --call-accent-ink: #6d3ed6;
}
.incoming-call-host[data-call-source="whatsapp"] {
  --call-accent: var(--wa, #16a34a);
  --call-accent-soft: var(--wa-soft, #e9f8ef);
  --call-accent-ink: var(--wa-dark, #087443);
}
.incoming-call-host[data-call-source="team"] {
  --call-accent: #0ea5e9;
  --call-accent-soft: #e8f7fd;
  --call-accent-ink: #036b9c;
}

/* ID scope keeps the host stable when drag positioning is written inline. */
#incomingCallModal.incoming-call-modal {
  position: fixed;
  inset: auto 20px auto auto;
  top: calc(var(--topbar-h, 56px) + 18px);
  width: min(360px, calc(100vw - 32px));
  z-index: 1200;
  display: block;
  align-items: initial;
  justify-content: initial;
  background: transparent;
  pointer-events: none;
}
#incomingCallModal.incoming-call-modal.hidden { display: none; }
#incomingCallModal .incoming-call-card {
  min-width: 0;
  max-width: none;
  padding: 0;
  gap: 0;
  align-items: stretch;
  text-align: left;
  pointer-events: auto;
}
#incomingCallModal .incoming-call-actions { display: grid; gap: 8px; margin-top: 10px; }
#incomingCallModal .incoming-call-btn {
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: none;
}
#incomingCallModal .incoming-call-btn [data-lucide] { width: 17px; height: 17px; }
#incomingCallModal .incoming-call-name,
#incomingCallModal .incoming-call-sub { text-align: left; }

/* ── Compact, non-blocking incoming-call panel ────────────────────
   The host never creates a backdrop and leaves the inbox/composer fully
   interactive while any call is ringing. */
#waIncomingCallModal.wa-incoming-call {
  position: fixed;
  top: calc(var(--topbar-h, 56px) + 18px);
  right: 20px;
  width: min(360px, calc(100vw - 32px));
  z-index: 1200;
  pointer-events: none;
}
#waIncomingCallModal.wa-incoming-call.hidden { display: none; }
.wa-call-panel {
  overflow: hidden;
  color: var(--text);
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--elevation-overlay);
  pointer-events: auto;
  animation: wa-call-panel-in 220ms var(--ease) both;
}
@keyframes wa-call-panel-in {
  from { opacity: 0; transform: translateX(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.wa-call-panel-head {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 12px 12px 11px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.wa-call-panel-head:active { cursor: grabbing; }
.wa-call-drag-grip {
  position: absolute;
  top: 2px;
  left: 50%;
  display: inline-flex;
  color: var(--text-muted);
  opacity: 0.55;
  transform: translateX(-50%);
}
.wa-call-drag-grip [data-lucide] { width: 18px; height: 18px; }
.wa-call-channel-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--call-accent-ink, var(--wa-dark));
  background: var(--call-accent-soft, var(--wa-soft));
  animation: wa-call-icon-ring 1.7s ease-out infinite;
}
.wa-call-channel-icon [data-lucide] { width: 21px; height: 21px; }
@keyframes wa-call-icon-ring {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--call-accent, var(--wa)) 0%, transparent); }
  35% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--call-accent, var(--wa)) 14%, transparent); }
}
.wa-call-identity { min-width: 0; }
.wa-call-kicker { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wa-call-source,
.wa-call-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}
.wa-call-source { color: var(--call-accent-ink, var(--wa-dark)); text-transform: uppercase; letter-spacing: 0.045em; }
.wa-call-source-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--call-accent, var(--wa));
}
.wa-call-state { color: var(--text-tertiary); }
.wa-call-state::before { content: "·"; color: var(--text-muted); }
.wa-call-name {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text);
  font: 700 16px/1.25 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-call-sub {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-call-head-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
}
.wa-call-head-btn:hover { color: var(--text); background: var(--surface-hover); }
.wa-call-head-btn:focus-visible,
.wa-call-action:focus-visible,
.wa-call-open-chat:focus-visible,
.wa-call-hide:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
.wa-call-head-btn [data-lucide] { width: 18px; height: 18px; transition: transform var(--motion-normal) var(--ease); }
.wa-call-panel-body { padding: 12px; }
.wa-call-resolved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--success);
  background: var(--success-soft);
  font-size: 12px;
}
.wa-call-resolved [data-lucide] { width: 17px; height: 17px; flex: 0 0 auto; }
.wa-call-context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.wa-call-context-row,
.wa-call-ticket-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-sunken);
}
.wa-call-ticket-row { grid-column: 1 / -1; }
.wa-call-context-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.wa-call-context-icon [data-lucide] { width: 15px; height: 15px; }
.wa-call-context-icon.is-sales { color: var(--info); background: var(--info-soft); }
.wa-call-context-icon.is-support { color: var(--success); background: var(--success-soft); }
.wa-call-context-icon.is-ticket { color: var(--warning); background: var(--warning-soft); }
.wa-call-context-icon.is-platform,
.wa-call-context-icon.is-team { color: var(--call-accent-ink); background: var(--call-accent-soft); }
.wa-call-context-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.wa-call-context-label {
  color: var(--text-tertiary);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}
.wa-call-owner-value,
.wa-call-owner-fallback,
.wa-call-ticket-title {
  overflow: hidden;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-call-owner-fallback { color: var(--text-muted); font-weight: 550; }
.wa-call-owner-value:not(.hidden) + .wa-call-owner-fallback { display: none; }
.wa-call-owner-value.is-mine { color: var(--success); }
.wa-call-ticket-status {
  flex: 0 0 auto;
  max-width: 92px;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--surface-active);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-call-ticket-status.is-open { color: var(--warning); background: var(--warning-soft); }
.wa-call-ticket-status.is-resolved { color: var(--success); background: var(--success-soft); }
.wa-call-open-chat {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border-subtle));
  border-radius: 10px;
  color: var(--success);
  background: var(--success-soft);
  font: 700 11.5px/1.2 var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease), filter var(--motion-fast) var(--ease);
}
.wa-call-open-chat [data-lucide] { width: 16px; height: 16px; }
.wa-call-open-chat [data-lucide]:last-child { width: 14px; height: 14px; justify-self: end; }
.wa-call-open-chat:hover { filter: brightness(1.03); transform: translateY(-1px); }
.wa-call-open-chat:active { transform: none; }
.wa-call-open-chat:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.wa-call-primary-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; margin-top: 10px; }
.wa-call-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: 700 12px/1.2 var(--font-sans);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease), filter var(--motion-fast) var(--ease);
}
.wa-call-action [data-lucide] { width: 17px; height: 17px; }
.wa-call-action:hover { filter: brightness(1.04); transform: translateY(-1px); }
.wa-call-action:active { transform: none; }
.wa-call-action:disabled { opacity: 0.55; cursor: wait; transform: none; }
.wa-call-action.is-decline { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.wa-call-action.is-accept { color: #fff; background: var(--success); }
.wa-call-hide {
  width: 100%;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 7px;
  border: 0;
  border-radius: 9px;
  color: var(--text-secondary);
  background: transparent;
  font: 650 11.5px/1.2 var(--font-sans);
  cursor: pointer;
}
.wa-call-hide:hover { color: var(--text); background: var(--surface-hover); }
.wa-call-hide [data-lucide] { width: 15px; height: 15px; }
.wa-call-hide-hint { margin: 2px 0 0; color: var(--text-muted); font-size: 10px; text-align: center; }

/* Team direct calls use the same action grid as the WhatsApp panel. The
   legacy circular button dimensions must not leak into this compact shell. */
.wa-call-panel .wa-call-primary-actions > .incoming-call-btn {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 46px;
  border-radius: 11px;
  box-shadow: none;
}
.wa-call-panel .wa-call-primary-actions > .incoming-call-btn:hover { box-shadow: none; }

.team-call-route-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--call-accent-soft) 48%, var(--surface-sunken));
}
.team-call-route-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.team-call-route-chip:first-child { color: var(--call-accent-ink); }
.team-call-route-chip [data-lucide] { width: 14px; height: 14px; flex: 0 0 auto; }
.team-call-route-chip strong {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-call-route-arrow { color: var(--text-muted); font-size: 12px; }
#gcIncomingModal .wa-call-name,
#incomingCallModal .wa-call-name { font-size: 17px; }

/* Outgoing/connected Team engine panel. It deliberately shares the exact
   source palette, header rhythm and motion language of incoming calls. */
#groupCallPanel.group-call-panel {
  position: fixed;
  inset: auto 20px auto auto;
  top: calc(var(--topbar-h, 56px) + 18px);
  width: min(360px, calc(100vw - 32px));
  z-index: 1200;
  display: block;
  background: transparent;
  pointer-events: none;
}
#groupCallPanel.group-call-panel.hidden { display: none; }
#groupCallPanel.group-call-panel > * { pointer-events: auto; }
#groupCallPanel .team-call-session-card { animation: none; }
#groupCallPanel[data-call-state="active"] .wa-call-channel-icon { animation: none; }
#groupCallPanel .gc-panel-head { cursor: grab; }
#groupCallPanel .gc-panel-head:active { cursor: grabbing; }
.team-call-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--call-accent) 22%, var(--border-subtle));
  border-radius: 11px;
  color: var(--call-accent-ink);
  background: var(--call-accent-soft);
}
.team-call-progress-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--call-accent-ink);
  background: color-mix(in srgb, var(--call-accent) 13%, transparent);
}
.team-call-progress-icon [data-lucide] { width: 16px; height: 16px; }
.team-call-progress-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 1px; }
.team-call-progress-copy strong { font-size: 12.5px; line-height: 1.3; }
.team-call-progress-copy span { overflow: hidden; color: var(--text-tertiary); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.team-call-live-time { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.team-call-live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
}
.team-call-member-list {
  max-height: 208px;
  overflow: auto;
  margin-top: 8px;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface-sunken);
}
.team-call-session-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.team-call-session-actions.is-ringing { grid-template-columns: 1fr; }
.team-call-session-btn {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  font: 700 11.5px/1.15 var(--font-sans);
  cursor: pointer;
}
.team-call-session-btn:hover { color: var(--text); background: var(--surface-hover); }
.team-call-session-btn [data-lucide] { width: 15px; height: 15px; }
.team-call-session-btn.is-on { color: var(--call-accent-ink); border-color: color-mix(in srgb, var(--call-accent) 30%, var(--border-subtle)); background: var(--call-accent-soft); }
.team-call-session-btn.is-end { color: #fff; border-color: var(--danger); background: var(--danger); }
.team-call-session-btn.is-cancel { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 52%, var(--border)); background: var(--danger-soft); }
#groupCallPanel.is-minimized { width: min(300px, calc(100vw - 32px)) !important; }
#groupCallPanel.is-minimized .wa-call-panel-body { display: none; }
#groupCallPanel.is-minimized .wa-call-panel-head { min-height: 64px; border-bottom: 0; }
#groupCallPanel.is-minimized .wa-call-head-btn [data-lucide] { transform: rotate(180deg); }

/* State hooks for the call controller. */
#incomingCallModal.is-minimized,
#waIncomingCallModal.is-minimized,
#gcIncomingModal.is-minimized { width: min(300px, calc(100vw - 32px)) !important; }
#incomingCallModal.is-minimized .wa-call-panel-body,
#waIncomingCallModal.is-minimized .wa-call-panel-body,
#gcIncomingModal.is-minimized .wa-call-panel-body { display: none; }
#incomingCallModal.is-minimized .wa-call-panel-head,
#waIncomingCallModal.is-minimized .wa-call-panel-head,
#gcIncomingModal.is-minimized .wa-call-panel-head { min-height: 64px; border-bottom: 0; }
#incomingCallModal.is-minimized .wa-call-head-btn [data-lucide],
#waIncomingCallModal.is-minimized .wa-call-head-btn [data-lucide],
#gcIncomingModal.is-minimized .wa-call-head-btn [data-lucide] { transform: rotate(180deg); }
#waIncomingCallModal.is-resolved .wa-call-resolved,
#waIncomingCallModal.is-taken .wa-call-resolved,
#waIncomingCallModal[data-call-state="resolved"] .wa-call-resolved,
#waIncomingCallModal[data-call-state="taken"] .wa-call-resolved { display: flex !important; }
#waIncomingCallModal.is-resolved .wa-call-channel-icon,
#waIncomingCallModal.is-taken .wa-call-channel-icon,
#waIncomingCallModal[data-call-state="resolved"] .wa-call-channel-icon,
#waIncomingCallModal[data-call-state="taken"] .wa-call-channel-icon { animation: none; }
#waIncomingCallModal.is-resolved .wa-call-primary-actions,
#waIncomingCallModal.is-taken .wa-call-primary-actions,
#waIncomingCallModal[data-call-state="resolved"] .wa-call-primary-actions,
#waIncomingCallModal[data-call-state="taken"] .wa-call-primary-actions { display: none; }

/* Dynamic group-call host. Its builder emits the shared `.wa-call-panel`
   shell; normal-priority positioning intentionally allows drag coordinates. */
#gcIncomingModal {
  position: fixed;
  inset: auto 20px auto auto;
  top: calc(var(--topbar-h, 56px) + 18px);
  width: min(360px, calc(100vw - 32px));
  height: auto;
  z-index: 1200;
  display: block;
  background: transparent;
  pointer-events: none;
}
#gcIncomingModal.hidden { display: none; }
#gcIncomingModal > * { pointer-events: auto; }
#gcIncomingModal > :not(.wa-call-panel) {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 2px 10px !important;
  padding: 12px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 16px !important;
  background: var(--surface-elevated) !important;
  box-shadow: var(--elevation-overlay) !important;
  text-align: left !important;
  animation: wa-call-panel-in 220ms var(--ease) both;
}
#gcIncomingModal > :not(.wa-call-panel)::before {
  grid-column: 2;
  grid-row: 1;
  color: var(--call-accent-ink);
  content: "Support2 \00b7  Appel entrant";
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#gcIncomingModal[data-call-source="leads7"] > :not(.wa-call-panel)::before { content: "Leads7 \00b7  Appel entrant"; }
#gcIncomingModal[data-call-source="teachers"] > :not(.wa-call-panel)::before { content: "Teachers \00b7  Appel entrant"; }
#gcIncomingModal > :not(.wa-call-panel) > :nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: var(--call-accent-soft) !important;
  color: var(--call-accent-ink);
  font-size: 20px !important;
}
#gcIncomingModal > :not(.wa-call-panel) > :nth-child(2) {
  grid-column: 2;
  grid-row: 2;
  overflow: hidden;
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gcIncomingModal > :not(.wa-call-panel) > :nth-child(3) {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0 !important;
  overflow: hidden;
  color: var(--text-tertiary) !important;
  font-size: 11.5px !important;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gcIncomingModal > :not(.wa-call-panel) > :nth-child(4) {
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid !important;
  grid-template-columns: 1fr 1.15fr;
  gap: 8px !important;
  margin-top: 10px !important;
}
#gcIncomingModal > :not(.wa-call-panel) > :nth-child(4) > button {
  width: auto !important;
  min-height: 44px;
  height: auto !important;
  border-radius: 10px !important;
  font-size: 0 !important;
  font-weight: 700;
}
#gcIncomingModal > :not(.wa-call-panel) > :nth-child(4) > button:first-child::after {
  content: "Refuser";
  font-size: 12px;
}
#gcIncomingModal > :not(.wa-call-panel) > :nth-child(4) > button:last-child::after {
  content: "R\00e9 pondre";
  font-size: 12px;
}

@media (max-width: 640px) {
  #incomingCallModal.incoming-call-modal,
  #waIncomingCallModal.wa-incoming-call,
  #gcIncomingModal,
  #groupCallPanel.group-call-panel {
    top: auto !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    width: auto !important;
  }
  #incomingCallModal.is-minimized,
  #waIncomingCallModal.is-minimized,
  #gcIncomingModal.is-minimized,
  #groupCallPanel.is-minimized { width: auto !important; }
  .wa-call-panel { max-height: min(82vh, 520px); overflow-y: auto; }
  .wa-call-panel-head { cursor: default; touch-action: auto; }
  .wa-call-drag-grip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-call-panel,
  .wa-call-channel-icon,
  #groupCallPanel.group-call-panel,
  #gcIncomingModal > :not(.wa-call-panel) { animation: none; }
  .wa-call-head-btn [data-lucide],
  .wa-call-action { transition: none; }
}

/* ── Voice call: active-call floating pill ────────────────────────
   Stays in the bottom-right corner regardless of which view the
   agent navigates to. Mute toggle + hangup. Timer ticks live. */
.team-call-pill {
  position: fixed;
  bottom: 24px; right: 24px;
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 999px;
  padding: 8px 8px 8px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  z-index: 1100;
  min-width: 240px;
}
.team-call-pill.hidden { display: none; }
.team-call-pill-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.team-call-pill-name {
  font-size: 13.5px; font-weight: 700;
  color: var(--gray-900, #111827);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-call-pill-meta {
  font-size: 11px; color: var(--gray-500, #6b7280);
  display: flex; gap: 6px; align-items: baseline;
}
.team-call-pill-time {
  font-variant-numeric: tabular-nums;
  color: var(--gray-700, #374151);
  font-weight: 600;
}
.team-call-pill-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.05);
  color: var(--gray-700, #374151);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.team-call-pill-btn [data-lucide] { width: 16px; height: 16px; }
.team-call-pill-btn:hover { background: rgba(0, 0, 0, 0.10); }
.team-call-pill-btn.is-muted { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.team-call-pill-btn.is-hangup { background: #dc2626; color: white; }
.team-call-pill-btn.is-hangup:hover { background: #b91c1c; }
/* Pill needs a user click to unblock remote-audio play() (gesture
   policy on the CALLER side after the answer arrives). Pulse the pill
   amber so the agent notices + clicks. */
.team-call-pill.needs-gesture {
  animation: pill-pulse-amber 1.2s ease-in-out infinite;
  border-color: rgba(245, 158, 11, 0.6);
}
@keyframes pill-pulse-amber {
  0%   { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(245, 158, 11, 0.4); }
  70%  { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 0 0 12px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Cross-platform Team direct still has a separate signalling controller, but
   its outgoing/active surface now matches the shared Team card exactly. */
#teamCallPill.team-call-pill {
  position: fixed;
  inset: auto 20px auto auto;
  top: calc(var(--topbar-h, 56px) + 18px);
  bottom: auto;
  width: min(360px, calc(100vw - 32px));
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  z-index: 1200;
}
#teamCallPill.team-call-pill.hidden { display: none; }
#teamCallPill > * { pointer-events: auto; }
#teamCallPill .team-call-pill-time:not(:empty)::before { content: " · "; }
#teamCallPill .team-call-legacy-actions { grid-template-columns: 1fr 1.18fr; }
#teamCallPill .team-call-session-btn.team-call-pill-btn {
  width: auto;
  height: auto;
  border-radius: 10px;
  color: var(--text-secondary);
  background: var(--surface-sunken);
}
#teamCallPill .team-call-session-btn.team-call-pill-btn.is-end { color: #fff; background: var(--danger); }
#teamCallPill .wa-call-head-btn.team-call-pill-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-secondary);
  background: transparent;
}
#teamCallPill[data-call-state="ringing-out"] .team-call-legacy-actions { grid-template-columns: 1fr; }
#teamCallPill[data-call-state="ringing-out"] #teamCallPillMute { display: none; }
#teamCallPill[data-call-state="ringing-out"] #teamCallPillHangup {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 52%, var(--border));
  background: var(--danger-soft);
}
#teamCallPill.is-minimized { width: min(300px, calc(100vw - 32px)) !important; }
#teamCallPill.is-minimized .wa-call-panel-body { display: none; }
#teamCallPill.is-minimized .wa-call-panel-head { min-height: 64px; border-bottom: 0; }
#teamCallPill.is-minimized .wa-call-head-btn [data-lucide] { transform: rotate(180deg); }
#teamCallPill.needs-gesture { animation: none; }
#teamCallPill.needs-gesture .wa-call-panel {
  border-color: rgba(245, 158, 11, 0.75);
  animation: pill-pulse-amber 1.2s ease-in-out infinite;
}
@media (max-width: 640px) {
  #teamCallPill.team-call-pill {
    top: auto !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    width: auto !important;
  }
  #teamCallPill.is-minimized { width: auto !important; }
}

/* Team-chat header phone icon — grey when teammate is offline. */
.teamchat-call-btn { margin-left: auto; }
.teamchat-call-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.teamchat-call-btn:not(:disabled):hover { color: #10b981; }

/* Call-log system message — centred pill in the chat, distinct
   from regular bubbles. Missed = red, declined = amber, ended = neutral. */
.teamchat-msg-row.is-call-log {
  justify-content: center !important;
}
.teamchat-msg-row.is-call-log .msg-select-btn,
.teamchat-msg-row.is-call-log .msg-reply-btn,
.teamchat-msg-row.is-call-log .msg-edit-btn,
.teamchat-msg-row.is-call-log .msg-delete-btn { display: none !important; }
.teamchat-call-log {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--gray-700, #374151);
  font-size: 12px; font-weight: 500;
  max-width: 80%;
}
.teamchat-call-log [data-lucide] { width: 13px; height: 13px; }
.teamchat-call-log.is-missed {
  background: rgba(220, 38, 38, 0.10); color: #b91c1c;
}
.teamchat-call-log.is-declined {
  background: rgba(245, 158, 11, 0.10); color: #92400e;
}
.teamchat-call-log-time {
  font-size: 11px; color: var(--gray-500, #6b7280);
  font-variant-numeric: tabular-nums;
}

/* ── Notification permission setup banner (2026-05-19) ──────────────
   Pops at the top of the app on first load until each teammate
   grants OS notifications. Persistent (no auto-dismiss) so they
   actually action it. Different color/copy when denied since the
   recovery path requires browser settings, not just a click. */
.notif-setup-banner {
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 1250;
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-elevated);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  min-width: 460px; max-width: 720px;
  font-size: 13.5px;
}
.notif-setup-banner.notif-setup-denied { border-left-color: #dc2626; background: var(--danger-soft); }
.notif-setup-icon { font-size: 22px; flex-shrink: 0; }
.notif-setup-text { flex: 1; color: var(--gray-800, #1f2937); line-height: 1.4; }
.notif-setup-text strong { color: var(--gray-900, #111827); }
.notif-setup-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.notif-setup-btn {
  border: 0; border-radius: 8px;
  cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}
.notif-setup-primary {
  background: #2563eb; color: white;
  padding: 7px 14px;
}
.notif-setup-primary:hover { background: #1d4ed8; }
.notif-setup-banner.notif-setup-denied .notif-setup-primary {
  background: #dc2626;
}
.notif-setup-banner.notif-setup-denied .notif-setup-primary:hover { background: #b91c1c; }
.notif-setup-dismiss {
  width: 28px; height: 28px;
  background: transparent;
  color: var(--gray-500, #6b7280);
  font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.notif-setup-dismiss:hover { background: rgba(0,0,0,0.06); color: var(--gray-800, #1f2937); }

/* ── In-app message banner (2026-05-19) ─────────────────────────────
   Slides in from top-right whenever a new message arrives. Mimics
   macOS notification banner shape (frosted card with title + body
   + close X). Click anywhere on the card → focus + jump to chat.
   Stack of up to 3; older slide out as new ones land. */
.inapp-notif-layer {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 1300;
  display: flex; flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.inapp-notif-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 12px 36px 12px 14px;
  min-width: 280px; max-width: 360px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  transform: translateX(420px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}
.inapp-notif-card.is-open { transform: translateX(0); opacity: 1; }
.inapp-notif-card.is-closing { transform: translateX(420px); opacity: 0; }
.inapp-notif-card:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.20); }
.inapp-notif-title {
  font-size: 13px; font-weight: 700;
  color: var(--gray-900, #111827);
  margin-bottom: 2px;
}
.inapp-notif-body {
  font-size: 12.5px; color: var(--gray-700, #374151);
  line-height: 1.4;
  word-break: break-word;
}
.inapp-notif-close {
  position: absolute;
  top: 6px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent; border: 0;
  color: var(--gray-400, #9ca3af);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.inapp-notif-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--gray-700, #374151);
}

/* ─── Toast ─── */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--gray-900); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); font-size: 13px;
  box-shadow: var(--shadow); z-index: 200;
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--red-500); }
.toast.success { background: var(--wa-dark); }

/* ─── Scrollbars ─── */
.conv-list, .messages-area, .dropdown-menu {
  scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent;
}
.conv-list::-webkit-scrollbar,
.messages-area::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar { width: 6px; }
.conv-list::-webkit-scrollbar-thumb,
.messages-area::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  :root { --sidebar-w: 100%; }
  .main { grid-template-columns: 100% 0 0; }
  .main.show-chat { grid-template-columns: 0 100% 0; }
  .main.show-chat .sidebar { display: none; }
  .main:not(.show-chat) .chat-pane { display: none; }
  .main.with-profile #profilePanel,
  .main.with-conv-details #convDetailsPanel { display: none; } /* mobile collapses both panels */
  .chat-actions .icon-btn:nth-child(n+4) { display: none; }
}

/* ─── Bulk send view ─── */
.gap8 { gap: 8px; }
/* C5: segmented-control treatment for top view-tabs */
.view-tabs {
  display: flex; gap: 2px; margin-left: 16px;
  padding: 4px;
  background: var(--gray-100); border-radius: 10px;
}
.view-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--gray-600);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.view-tab:hover { background: var(--surface-hover); color: var(--text); }
.view-tab [data-lucide] { width: 15px; height: 15px; stroke-width: 2; }
.view-tab.view-tab-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
}
.view-tab.view-tab-active [data-lucide] { color: var(--lougha); stroke-width: 2.25; }
.view-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  margin-left: 2px;
}
.view-tab-badge.hidden { display: none; }

/* Dropdown groups in the top bar. Each .view-tab-group holds a
   .view-tab-trigger button (visible in the bar) and a .view-tab-menu
   panel (anchored just below the trigger when .open is set). Reuses
   the popover look from #attachMenu so the topbar dropdowns and the
   attach (📎) popover stay visually consistent. */
.view-tab-group { position: relative; display: inline-flex; }
.view-tab-trigger .view-tab-chevron {
  width: 12px; height: 12px; opacity: 0.7;
  transition: transform 0.15s;
}
.view-tab-group.open .view-tab-trigger .view-tab-chevron { transform: rotate(180deg); }
.view-tab-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  z-index: 200;
  min-width: 200px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  flex-direction: column; gap: 2px;
}
.view-tab-group.open .view-tab-menu { display: flex; }
.view-tab-item {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--gray-700);
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.view-tab-item:hover { background: var(--surface-hover); color: var(--text); }
.view-tab-item [data-lucide] { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; color: var(--text-tertiary); }
.view-tab-item:hover [data-lucide] { color: var(--lougha); }
/* Highlight the active child inside the open menu so the user always
   knows which sub-view they're currently looking at, even with the
   parent trigger in the active state behind. */
.view-tab-item.view-tab-active {
  background: var(--accent-soft);
  color: var(--accent);
}
.view-tab-item.view-tab-active [data-lucide] { color: var(--lougha); }
.one-inbox-menu-item {
  margin-bottom: 4px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 8px 8px 3px 3px;
}
/* The aggregated parent badge sits inline with the chevron — keeps
   the visual rhythm of the existing single-tab badges. */
.view-tab-trigger .view-tab-group-badge { margin-left: 2px; }

/* Native <select> base — low-specificity theme fallback so dropdowns + their
   option lists aren't white-on-white in dark mode (class rules still override
   the element; `option` can ONLY be themed at the element level). */
select {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
select option { background: var(--surface); color: var(--text); }

/* Phone numbers detected inside a message bubble — clickable chip that
   opens the matching 1-1 chat. Underline on hover so the affordance is
   obvious without being noisy at rest. */
.msg-phone-link {
  color: var(--wa); font-weight: 500;
  text-decoration: none; cursor: pointer;
  border-bottom: 1px dashed currentColor;
}
.msg-phone-link:hover {
  text-decoration: none;
  border-bottom-style: solid;
  background: rgba(37, 211, 102, 0.08);
  border-radius: 3px;
}
/* @-mention chip — resolved JIDs render as "@Name" with a subtle blue
   highlight so the team can tell it was tag-resolved rather than typed. */
.msg-mention-chip {
  color: #1e6fd9;
  font-weight: 600;
  background: rgba(30, 111, 217, 0.08);
  border-radius: 3px;
  padding: 0 3px;
}

/* Team-only inline timeline event ("Asmae a créé un ticket #12345").
   Centered chip row between message bubbles. Pale neutral background so
   it's clearly distinguishable from WhatsApp messages without screaming. */
.event-chip-row {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.event-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 80%;
  padding: 5px 12px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  font-size: 12px;
  color: #475569;
  line-height: 1.3;
}
.event-chip-icon { font-size: 13px; }
.event-chip-text { font-weight: 500; }
.event-chip-time { color: #94a3b8; font-size: 11px; }
/* WhatsApp call-log chips — missed/declined get a red tint like native WA */
.event-chip.is-call-missed {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.22);
  color: #dc2626;
}
.event-chip.is-call-missed .event-chip-time { color: #f87171; }

/* Incoming WhatsApp call — notification-only variant. It shares the same
   compact right-side language without pretending Baileys can answer in-app. */
.wa-incoming-call-banner {
  --call-accent: var(--wa, #16a34a);
  --call-accent-soft: var(--wa-soft, #e9f8ef);
  --call-accent-ink: var(--wa-dark, #087443);
  position: fixed;
  z-index: 1200;
  top: calc(var(--topbar-h, 56px) + 18px);
  right: 20px;
  left: auto;
  width: min(360px, calc(100vw - 32px));
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 32px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--elevation-overlay);
  transform: none;
  animation: waicb-slide-in 220ms var(--ease) both;
}
@keyframes waicb-slide-in {
  from { opacity: 0; transform: translateX(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.wa-incoming-call-banner .waicb-icon {
  grid-column: 1;
  grid-row: 1;
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--call-accent-soft); color: var(--call-accent-ink);
  animation: waicb-pulse 1.2s ease-in-out infinite;
}
.wa-incoming-call-banner .waicb-icon svg { width: 20px; height: 20px; }
@keyframes waicb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--call-accent) 0%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--call-accent) 14%, transparent); }
}
.wa-incoming-call-banner .waicb-body { grid-column: 2; grid-row: 1; min-width: 0; }
.wa-incoming-call-banner .waicb-title {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--call-accent-ink);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wa-incoming-call-banner .waicb-title::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--call-accent);
  content: "";
}
.wa-incoming-call-banner .waicb-name {
  margin-top: 2px;
  font-size: 16px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-incoming-call-banner .waicb-hint { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.wa-incoming-call-banner .waicb-assigned {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-secondary); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-incoming-call-banner .waicb-assigned-txt { overflow: hidden; text-overflow: ellipsis; }
.wa-incoming-call-banner .waicb-assigned-chip {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 6px; border-radius: 999px;
  background: var(--call-accent-soft); color: var(--call-accent-ink);
}
.wa-incoming-call-banner .waicb-assigned.is-mine .waicb-assigned-txt { color: var(--call-accent-ink); font-weight: 600; }
/* When the call is for the current agent's own contact, lift the whole banner. */
.wa-incoming-call-banner.is-mine {
  border-color: color-mix(in oklab, var(--call-accent) 42%, var(--border-strong));
  box-shadow: var(--elevation-overlay), 0 0 0 2px color-mix(in oklab, var(--call-accent) 10%, transparent);
}
.wa-incoming-call-banner .waicb-open {
  grid-column: 2;
  grid-row: 2;
  width: max-content;
  min-height: 30px;
  padding-inline: 11px;
  justify-self: start;
  justify-content: center;
  color: var(--call-accent-ink);
  border-color: color-mix(in oklab, var(--call-accent) 25%, var(--border));
  background: var(--call-accent-soft);
  white-space: nowrap;
}
.wa-incoming-call-banner .waicb-close { grid-column: 3; grid-row: 1; flex: 0 0 auto; }
.wa-incoming-call-banner .waicb-open:focus-visible,
.wa-incoming-call-banner .waicb-close:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

@media (max-width: 640px) {
  .wa-incoming-call-banner {
    top: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-incoming-call-banner,
  .wa-incoming-call-banner .waicb-icon { animation: none; }
}

/* ─── Certificate drag-and-drop editor ───────────────────────────── */
.cert-editor {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cert-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cert-editor-hint {
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  line-height: 1.3;
}
.cert-editor-add-btn {
  background: #142463;
  color: #fff;
  border: 0;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.cert-editor-add-btn:hover { background: #1e336f; }
.cert-editor-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 254 / 143;
  overflow: hidden;
  border-radius: 8px;
  user-select: none;
  background: #f8fafc;
  container-type: inline-size;
}
.cert-editor-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.cert-editor-layer {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  cursor: move;
  padding: 2px 4px;
  border-radius: 4px;
  outline: 1px dashed transparent;
  outline-offset: 2px;
}
.cert-editor-layer:hover { outline-color: rgba(20, 36, 99, 0.4); background: rgba(20, 36, 99, 0.04); }
.cert-editor-layer-dragging { outline-color: #142463; outline-style: solid; background: rgba(20, 36, 99, 0.08); }
.cert-editor-layer[contenteditable="true"] { outline-color: #16a34a; outline-style: solid; background: #fff; cursor: text; }
.cert-editor-del-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #ef4444;
  background: #fff;
  color: #ef4444;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.cert-editor-layer:hover .cert-editor-del-btn { opacity: 1; }
.cert-editor-del-btn:hover { background: #ef4444; color: #fff; }
.msg-link {
  color: #1d4ed8; text-decoration: underline; word-break: break-all;
}
.msg-link:hover { color: #1e40af; background: rgba(29, 78, 216, 0.08); border-radius: 3px; }
.bubble.fromMe .msg-link { color: #065f46; }
.bubble.fromMe .msg-link:hover { color: #047857; background: rgba(6, 95, 70, 0.08); }

.bulk-view {
  flex: 1; overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column;
}
.bulk-grid {
  flex: 1; display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 16px; padding: 16px; overflow: hidden;
}
.bulk-recipients,
.bulk-composer {
  background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.bulk-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bulk-section-head h2 {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.01em;
}
.bulk-section-head h2 [data-lucide] { width: 18px; height: 18px; color: var(--text-tertiary); }

.bulk-recipients-controls {
  padding: 12px 16px; display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.bulk-search { width: 100%; }
.bulk-tag-filter {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 70px; overflow-y: auto;
}
.bulk-tag-pill {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-700); border: 0;
  cursor: pointer; font-weight: 500;
}
.bulk-tag-pill.active { background: var(--wa); color: #fff; }
.bulk-count { font-size: 12px; color: var(--gray-500); margin-left: auto; }

/* HubSpot-style filter panel (Bulk Send) */
.bulk-filter-panel {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--border-subtle);
}
.bulk-filter-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px;
}
.bulk-filter-label {
  font-weight: 600; color: var(--gray-700); min-width: 110px;
}
.bulk-weekday-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.bulk-weekday-chip {
  font-size: 11px; padding: 4px 9px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-700);
  border: 1px solid var(--border-subtle); cursor: pointer; font-weight: 500;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.bulk-weekday-chip:hover { background: var(--gray-200, #e5e7eb); }
.bulk-weekday-chip.active {
  background: var(--wa); color: #fff; border-color: var(--wa);
}
.bulk-filter-select, .bulk-filter-input {
  font-size: 12px; padding: var(--input-pad-y-sm) var(--input-pad-x-sm); border-radius: 6px;
  background: var(--surface-elevated); color: var(--text);
  border: 1px solid var(--border-subtle); cursor: pointer;
  min-height: 28px;
}
.bulk-filter-input { min-width: 120px; }
.bulk-filter-empty-opt { color: var(--gray-500); font-style: italic; }
.bulk-filter-clear {
  font-size: 11px; padding: 3px 8px; border-radius: 6px;
  background: transparent; color: var(--gray-600);
  border: 1px solid var(--border-subtle); cursor: pointer;
}
.bulk-filter-clear:hover { background: var(--gray-100); }
.bulk-filter-remove {
  background: transparent; border: 0; color: var(--gray-500);
  cursor: pointer; padding: 2px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bulk-filter-remove:hover { background: var(--gray-200, #e5e7eb); color: var(--gray-800); }
.bulk-filter-remove [data-lucide] { width: 14px; height: 14px; }
.bulk-filter-add-select { color: var(--wa); font-weight: 500; }
.bulk-filter-note { font-size: 11px; color: var(--gray-500); margin-left: 6px; }
.bulk-composer-inner { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bulk-field-label { font-size: 12px; font-weight: 600; color: var(--gray-700); margin-top: 6px; }

/* Polls — bubble + creation modal + voters modal */
.poll-bubble {
  background: #DCF8C6;
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 280px; max-width: 360px;
}
[data-theme="dark"] .poll-bubble { background: oklch(0.30 0.05 150); color: var(--text); }
.poll-question { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.poll-subtitle { font-size: 11px; color: var(--gray-600); margin-bottom: 10px; }
.poll-option-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 8px;
  margin: 8px 0;
  align-items: center;
}
.poll-option-name { font-size: 13px; color: var(--text); }
.poll-option-count { font-size: 12px; color: var(--gray-700); font-weight: 600; }
.poll-option-bar {
  grid-column: 1 / -1;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}
.poll-option-fill { background: #25D366; height: 100%; transition: width 0.2s; }
.poll-see-votes {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
}
.poll-see-votes:hover:not([disabled]) { color: var(--accent); }
.poll-see-votes[disabled] { cursor: default; color: var(--gray-500); }

/* Poll creation modal */
.poll-field-label { font-size: 12px; font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 4px; }
.poll-options-list { display: flex; flex-direction: column; gap: 6px; }
.poll-option-input-row { display: flex; gap: 6px; align-items: center; }
.poll-option-input-row input { flex: 1; }

/* Poll voters modal */
.poll-voters-question { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.poll-voters-total { font-size: 12px; color: var(--gray-600); margin-bottom: 14px; }
.poll-voters-section { padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.poll-voters-section:first-of-type { border-top: 0; }
.poll-voters-option-name { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.poll-voters-list { margin: 0; padding-left: 18px; }
.poll-voters-list li { font-size: 13px; padding: 2px 0; }
.poll-voters-empty { font-size: 12px; color: var(--gray-500); font-style: italic; }
.bulk-filter-value-btn {
  font-size: 12px; padding: 4px 10px; border-radius: 6px;
  background: var(--surface-elevated); color: var(--text);
  border: 1px solid var(--border-subtle); cursor: pointer;
  min-height: 28px; min-width: 120px; text-align: left;
}
.bulk-filter-value-btn:hover { border-color: var(--accent); }
.bulk-filter-value-btn.has-value { color: var(--wa); font-weight: 500; }

/* HubSpot-style value picker popover */
.bulk-value-picker {
  background: var(--surface-elevated); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 8px; width: 260px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 6px;
}
.bulk-value-picker-search {
  font-size: 12px; padding: 6px 10px; border-radius: 6px;
  background: var(--surface-sunken); color: var(--text);
  border: 1px solid var(--border-subtle);
}
.bulk-value-picker-list {
  max-height: 260px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.bulk-value-picker-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 4px;
  font-size: 13px; cursor: pointer;
}
.bulk-value-picker-row:hover { background: var(--surface-hover); }
.bulk-value-picker-selectall { font-weight: 600; border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; margin-bottom: 2px; }
.bulk-value-picker-row-label { flex: 1; }
.bulk-value-picker-empty { font-size: 12px; color: var(--gray-500); text-align: center; padding: 12px 0; }

.bulk-groups-list {
  flex: 1; overflow-y: auto; padding: 4px 4px 8px;
}
/* C1: bigger padding, real grid, cyan-tinted selected state */
.bulk-group-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  margin: 2px 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.bulk-group-row:hover { background: var(--gray-50); }
.bulk-group-row.hs-selected,
.bulk-group-row.selected { background: rgba(16,183,226,0.08); }
.bulk-group-row input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer; accent-color: #10b7e2;
  flex-shrink: 0;
}
.bulk-group-row .bulk-g-name {
  font-size: 14px; font-weight: 600; color: var(--gray-900);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bulk-group-row .bulk-g-meta { font-size: 12px; color: var(--gray-500); }
.bulk-group-row .bulk-g-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.bulk-group-row .bulk-g-tag {
  font-size: 10.5px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: var(--gray-100); color: var(--gray-600);
}
/* Perceived-speed: loading areas shimmer (a soft sweep) so the surface reads as
   "actively loading" instead of a dead "Loading…". Themed + reduced-motion-safe.
   Applies to every .bulk-loading spot (Rapport, scoreboard, lists, drill-downs)
   with no JS change. */
.bulk-loading {
  padding: 18px 24px; text-align: center; color: var(--text-tertiary); font-size: 13px;
  border-radius: var(--radius);
  background-image: linear-gradient(100deg, var(--surface-sunken) 25%, var(--surface-hover) 45%, var(--surface-hover) 55%, var(--surface-sunken) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
}
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bulk-loading { animation: none; background-image: none; } }

.bulk-composer-body {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px;
}
/* C6: composer textarea with subtle elevation + cyan focus */
.bulk-message-input {
  font-family: inherit; resize: vertical; min-height: 160px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--surface-sunken);
}
.bulk-message-input:focus {
  background: var(--surface);
  border-color: #10b7e2;
  box-shadow: 0 0 0 3px rgba(16,183,226,0.12);
  outline: none;
}
.bulk-attach-row {
  display: flex; align-items: center; gap: 10px;
}
/* C3: anti-ban panel — white card, calm header, auto-fit grid that fills width */
.bulk-antiban {
  background: var(--surface); border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 16px 18px;
}
.bulk-antiban h3 {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 600; color: var(--gray-700);
  text-transform: none; letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.bulk-antiban h3::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #10b7e2;
}
.bulk-antiban-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.bulk-antiban-row label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--gray-600); font-weight: 500;
}
.bulk-antiban-row input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 8px;
  font-size: 14px; background: var(--surface);
}
.bulk-antiban-row input:focus {
  border-color: #10b7e2;
  box-shadow: 0 0 0 3px rgba(16,183,226,0.15);
  outline: none;
}
.bulk-composer-foot {
  padding: 12px 16px; border-top: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex-shrink: 0;
}
.bulk-progress {
  padding: 12px 16px; border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.bulk-progress-bar {
  height: 8px; background: var(--gray-200); border-radius: 999px; overflow: hidden;
  margin-bottom: 6px;
}
.bulk-progress-fill {
  height: 100%; background: var(--wa); width: 0%;
  transition: width 0.3s;
}
.bulk-progress-label { font-size: 12px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.bulk-progress-log {
  font-size: 11px; color: var(--gray-500); max-height: 80px; overflow-y: auto;
  font-family: ui-monospace, Menlo, monospace;
}
.bulk-progress-log .row-fail { color: #dc2626; }
.bulk-progress-log .row-ok { color: #16a34a; }

.bulk-history-list .bulk-history-row {
  padding: 10px 0; border-bottom: 1px solid var(--gray-100);
  font-size: 13px; display: flex; gap: 10px; align-items: center;
}
.bulk-history-list .bulk-history-row:last-child { border-bottom: 0; }
.bulk-history-row .h-summary { flex: 1; color: var(--text-secondary); }
.bulk-history-row .h-success { color: var(--success); font-weight: 600; }
.bulk-history-row .h-failed { color: var(--danger); font-weight: 600; }
.bulk-history-row .h-time { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ─── User pill (topbar) ──────────────────────────────────────────────
   Operator identity card: avatar + stacked name/role + subtle logout
   tucked behind a hairline separator. Designed to read clearly even
   when the topbar gets dense; the soft surface-sunken pill bg gives
   it weight without competing with the action-bar tabs in the centre. */
.user-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 3px 6px 3px 4px; border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  margin-right: 0;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.user-pill:hover { background: var(--surface-hover); border-color: var(--border); }

.user-pill-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--surface);
  flex-shrink: 0;
}
.user-pill-info {
  display: flex; flex-direction: column;
  line-height: 1.15;
  padding: 0 2px;
  gap: 1px;
  min-width: 0;
  max-width: 140px;
}
.user-pill-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: capitalize;
}
.user-pill-role {
  font-size: 9.5px; font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.12em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Admin / super-admin badge — cobalt, signals elevated privilege.
   The role text doubles as a small caps badge inside the pill so
   Ayoub immediately sees his rights at a glance. */
.user-pill-role.role-admin { color: var(--accent); }

/* Logout button — quiet by default, turns coral on hover so the
   destructive nature reads without dominating the resting state. */
.user-pill #logoutBtn {
  width: 28px; height: 28px;
  color: var(--text-muted);
  margin-left: 2px;
  position: relative;
  border-radius: 50%;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.user-pill #logoutBtn::before {
  content: ''; position: absolute; left: -6px; top: 50%;
  transform: translateY(-50%);
  height: 18px; width: 1px;
  background: var(--border);
}
.user-pill #logoutBtn:hover {
  color: var(--danger);
  background: var(--danger-soft);
}
.user-pill #logoutBtn [data-lucide] { width: 15px; height: 15px; }

/* ─── Team view ─── */
.team-grid {
  flex: 1; display: grid;
  grid-template-columns: 1fr minmax(320px, 420px);
  gap: 16px; padding: 16px; overflow: hidden;
}
.team-users, .team-activity {
  background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.team-users-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.team-user-row {
  display: grid; grid-template-columns: 40px 1fr auto auto auto;
  align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border-subtle);
  transition: background 0.1s;
}
.team-user-row:hover { background: var(--surface-hover); }
.team-user-row:last-child { border-bottom: 0; }
/* Avatar — cobalt (consistent with the user-pill and profile avatars).
   Admin-role users keep cobalt; viewer/agent rely on the role pill for
   role signaling rather than colored avatars. */
.team-user-row .tu-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.team-user-row.role-admin .tu-avatar { background: var(--accent-strong); }
.team-user-row.inactive .tu-avatar { opacity: 0.4; filter: grayscale(1); }
.team-user-row.inactive .tu-name { text-decoration: line-through; color: var(--text-muted); }
.team-user-row .tu-name { font-size: 14px; font-weight: 600; color: var(--text); }
.team-user-row .tu-username { font-size: 12px; color: var(--text-tertiary); }
/* Role pills — semantic palette so dark mode pivots brightness. */
.team-user-row .tu-role-pill {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.team-user-row .tu-role-pill.role-admin  { background: var(--accent-soft);  color: var(--accent); }
.team-user-row .tu-role-pill.role-agent  { background: var(--info-soft);    color: var(--info); }
.team-user-row .tu-role-pill.role-viewer { background: var(--warning-soft); color: var(--warning); }
.team-user-row .tu-last-login { font-size: 11px; color: var(--text-muted); }
.team-user-row .tu-edit-btn {
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer;
  padding: 4px; border-radius: var(--radius-xs);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.team-user-row .tu-edit-btn:hover { background: var(--surface-hover); color: var(--text); }

/* User editor password handoff. The current password stays masked until the
   super-admin explicitly reveals/copies it. Legacy hashes get a clear reset
   action because their original plaintext cannot be recovered. */
.ue-password-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}
.ue-password-controls .btn { white-space: nowrap; }
.ue-password-icon-btn { padding-inline: 11px; }
.ue-password-hint {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}
.ue-current-password {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.ue-current-password-label {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.ue-current-password-value {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ue-current-password-value.is-legacy {
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
}
.ue-current-password-copy,
.ue-current-password-reset { white-space: nowrap; }
.ue-current-password-reset { grid-column: 3 / 5; }
@media (max-width: 480px) {
  .ue-current-password { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ue-current-password-label { grid-column: 1 / -1; }
  .ue-current-password-reset { grid-column: 2 / 4; }
}

.team-activity-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.team-activity-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 16px; border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}
.team-activity-row:last-child { border-bottom: 0; }
.team-activity-row .ta-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-sunken); color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
}
.team-activity-row .ta-icon [data-lucide] { width: 14px; height: 14px; }
.team-activity-row .ta-text { color: var(--text-secondary); }
.team-activity-row .ta-text strong { color: var(--text); font-weight: 600; }
.team-activity-row .ta-time { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ===================================================================
 * Bot Health card — Mr.Bot v2 dashboard. Sits at the top of the Super
 * Admin view, above the Team Activity Report. KPI tiles + status pill
 * + expandable list of skipped chats. Reuses .tar-tile grammar where
 * possible so the two cards visually relate.
 * =================================================================== */
.bot-health-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin: 0 0 14px;
  padding: 14px 16px 12px;
  flex-shrink: 0;
}
.bot-health-card .bulk-section-head { margin-bottom: 10px; }
.bot-health-head-right {
  display: inline-flex; align-items: center; gap: 8px;
}
.bot-health-status {
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.bot-health-status-green { color: var(--success); background: var(--success-soft); }
.bot-health-status-yellow { color: var(--warning); background: var(--warning-soft); }
.bot-health-status-red { color: var(--danger); background: var(--danger-soft); }
.bot-health-tiles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 1100px) {
  .bot-health-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bot-health-tile {
  display: flex; gap: 8px; align-items: center;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 9px 10px;
  min-width: 0;
}
.bot-health-tile-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bot-health-tile-icon [data-lucide] { width: 15px; height: 15px; }
.bot-health-tile-body { min-width: 0; flex: 1; }
.bot-health-tile-big {
  font-size: 17px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bot-health-tile-label { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-health-tile-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-health-foot {
  display: flex; justify-content: flex-start;
  padding: 4px 0 0;
}
.bot-health-skips-table {
  margin-top: 10px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  max-height: 320px; overflow-y: auto;
}
.bot-health-skips-table.hidden { display: none; }
.bot-health-skip-row {
  display: grid;
  grid-template-columns: 120px 140px 1fr 90px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  font-size: 12px;
  transition: background .12s;
}
.bot-health-skip-row:last-child { border-bottom: 0; }
.bot-health-skip-row:hover { background: var(--surface-hover); }
.bot-health-skip-reason {
  font-weight: 600; color: var(--text);
  background: var(--surface);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bot-health-skip-chat { font-family: var(--font-mono, monospace); color: var(--text-secondary); }
.bot-health-skip-text { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-health-skip-time { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }

/* ===================================================================
 * Team Activity Report — admin dashboard with dynamic filters,
 * totals strip, per-agent table, and click-to-expand drill-down.
 * Lives in the Super Admin view above the existing activity feed.
 *
 * Note: the parent #teamView (.bulk-view) defaults to overflow:hidden
 * so that other bulk-views (Clubs / Schedule / Bulk send) keep their
 * inner-scroll-by-list layout. We override for #teamView only — the
 * Super Admin page is taller now (report card + team-grid below it)
 * and the user MUST be able to scroll the whole page vertically.
 * =================================================================== */
#teamView.bulk-view {
  overflow-y: auto;
  overflow-x: hidden;
}
/* In the Super Admin view, .team-grid is no longer the "fill remaining"
 * region — the page now scrolls vertically and the grid should pick up
 * its natural height so a tall Recent activity list doesn't crush the
 * Team members panel (and vice-versa). 480px is enough for ~8 user rows
 * plus the header, matches the team's current roster. */
#teamView .team-grid {
  flex: 0 0 auto;
  min-height: 480px;
  max-height: 640px;
}
/* Without flex:1 on the parent .team-grid, the inner lists lose their
 * height cap and grow to natural content height. Give them an explicit
 * max-height so a long recent-activity feed stays compact + scrolls
 * internally (the same UX as the pre-report layout). */
#teamView .team-users-list,
#teamView .team-activity-list {
  max-height: 580px;
}
.monthly-performance-report {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin: 0 0 18px;
  padding: 14px 16px 12px;
}
.monthly-performance-report .bulk-section-head { margin-bottom: 10px; }
.monthly-performance-report .mpr-range-label { font-variant-numeric: tabular-nums; }
.mpr-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}
.mpr-month-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mpr-filter-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}
.mpr-filter-label [data-lucide] { width: 14px; height: 14px; }
.mpr-month {
  height: 30px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
}
.mpr-refresh { margin-left: auto; }
.mpr-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.mpr-summary-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.mpr-summary-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface);
  color: var(--text-secondary);
}
.mpr-summary-icon [data-lucide] { width: 15px; height: 15px; }
.mpr-summary-body { min-width: 0; flex: 1; }
.mpr-summary-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpr-summary-label {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpr-summary-sub {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpr-good .mpr-summary-icon { color: #15803d; background: #dcfce7; }
.mpr-watch .mpr-summary-icon { color: var(--warning); background: var(--warning-soft); }
.mpr-bad .mpr-summary-icon { color: #b91c1c; background: #fee2e2; }
.mpr-table-wrap { border-top: 1px solid var(--border-subtle); }
.mpr-thead,
.mpr-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.25fr) minmax(130px, .9fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr);
  gap: 8px;
  align-items: center;
}
.mpr-thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.mpr-th {
  border: 0;
  background: none;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: left;
  cursor: pointer;
}
.mpr-th:hover { color: var(--text); }
.mpr-th-static { cursor: default; }
.mpr-th-static:hover { color: var(--text-tertiary); }
.mpr-th-desc::after { content: ' ↓'; font-size: 10px; }
.mpr-th-asc::after { content: ' ↑'; font-size: 10px; }
.mpr-tbody {
  max-height: 500px;
  overflow-y: auto;
  padding: 8px 0;
}
.mpr-row {
  padding: 12px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.mpr-row:hover,
.mpr-row-expanded {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}
.mpr-td {
  min-width: 0;
  font-size: 13px;
  color: var(--text);
}
.mpr-person {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mpr-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--av-3, #0ea5e9);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.mpr-person-meta { min-width: 0; }
.mpr-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpr-role { font-size: 11px; color: var(--text-tertiary); }
.mpr-decision-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.mpr-score-line { display: flex; align-items: baseline; gap: 2px; }
.mpr-score {
  font-weight: 800;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.mpr-score-sub { font-size: 10px; color: var(--text-muted); }
.mpr-score-green { color: var(--success); }
.mpr-score-amber { color: var(--warning); }
.mpr-score-red { color: var(--danger); }
.mpr-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpr-badge-green { color: var(--success); background: var(--success-soft); }
.mpr-badge-amber { color: var(--warning); background: var(--warning-soft); }
.mpr-badge-red { color: var(--danger); background: var(--danger-soft); }
.mpr-num {
  text-align: right;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
}
.mpr-num-main {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.mpr-num-sub {
  margin-left: 2px;
  font-size: 10px;
  color: var(--text-muted);
}
.mpr-risk-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: #ef4444;
  vertical-align: middle;
}
.mpr-signal-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-sunken);
}
.mpr-signal-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  line-height: 1.2;
}
.mpr-signal-label {
  color: var(--text-muted);
  white-space: nowrap;
}
.mpr-signal-value {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mpr-risk-cell {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
}
.mpr-risk-count {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
}
.mpr-risk-count-hot {
  background: #fee2e2;
  color: #991b1b;
}
.mpr-risk-summary {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mpr-drill {
  display: grid;
  grid-template-columns: minmax(420px, .95fr) minmax(360px, 1.05fr);
  gap: 18px;
  padding: 16px 18px 18px;
  background: #fafafa;
  border-bottom: 1px solid var(--border-subtle);
}
.mpr-verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface);
}
.mpr-verdict-score {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface-sunken);
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.mpr-verdict-copy { min-width: 0; }
.mpr-verdict-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.mpr-verdict-sub {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}
.mpr-drill-head {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-tertiary);
}
.mpr-component-row {
  display: grid;
  grid-template-columns: minmax(210px, .9fr) minmax(160px, 1fr) 52px;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface);
}
.mpr-component-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mpr-component-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.mpr-component-help {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-muted);
}
.mpr-component-bar-wrap {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-subtle);
}
.mpr-component-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--primary, #3b82f6);
}
.mpr-component-score {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.mpr-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.mpr-metric {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface);
}
.mpr-metric-value {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mpr-metric-label {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpr-risks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.mpr-risk-chip {
  border-radius: 999px;
  padding: 4px 8px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
}
.mpr-muted-line {
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.mpr-proof-box {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 8px;
  overflow: hidden;
}
.mpr-proof-title {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mpr-proof-list { padding: 6px 9px; }
.mpr-proof-item {
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.mpr-proof-item + .mpr-proof-item { border-top: 1px dashed var(--border-subtle); }
.mpr-review-warning {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
}
.mpr-review-note {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 11px;
}
@media (max-width: 1180px) {
  .mpr-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mpr-thead,
  .mpr-row {
    grid-template-columns: minmax(150px, 1fr) minmax(120px, .85fr) repeat(4, minmax(130px, 1fr));
  }
  .mpr-drill { grid-template-columns: 1fr; }
  .mpr-component-row { grid-template-columns: minmax(180px, 1fr) minmax(120px, .8fr) 48px; }
}
.team-activity-report {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin: 0 0 18px;
  padding: 14px 16px 12px;
}
.team-activity-report .bulk-section-head { margin-bottom: 10px; }
.team-activity-report .tar-range-label { font-variant-numeric: tabular-nums; }
.tar-filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 8px 0 12px; border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}
.tar-filter-group {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
}
.tar-filter-label {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
}
.tar-filter-label [data-lucide] { width: 14px; height: 14px; }
.tar-multi-chips { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }
.tar-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; line-height: 1.4;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
  font-family: inherit;
}
.tar-chip [data-lucide] { width: 13px; height: 13px; flex-shrink: 0; }
.tar-chip:hover { background: var(--surface-hover); }
.tar-chip-active {
  background: var(--primary, #3b82f6);
  color: #fff;
  border-color: var(--primary, #3b82f6);
}
.tar-chip-active:hover { background: var(--primary-strong, #2563eb); }
.tar-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .5;
}
.tar-date {
  height: 28px; padding: 2px 8px; font-size: 12px;
  border-radius: 6px;
}
.tar-date-sep { color: var(--text-tertiary); }
.tar-refresh { margin-left: auto; }

.tar-totals {
  display: grid;
  /* Always 7 columns in one row. `minmax(0, 1fr)` lets each column shrink
   * below the tile's intrinsic content width so the row never overflows
   * (and never wraps into a 2nd row that the parent .bulk-view's
   * overflow:hidden would clip). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.tar-tile {
  display: flex; gap: 8px; align-items: center;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 9px 10px;
  transition: opacity .15s;
  min-width: 0;
}
.tar-tile-dim { opacity: .35; }
.tar-tile-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tar-tile-icon [data-lucide] { width: 15px; height: 15px; }
.tar-tile-body {
  min-width: 0; flex: 1;
}
.tar-tile-big {
  font-size: 17px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tar-tile-label { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tar-tile-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Per-agent table (CSS grid; reuses .tickets-row philosophy) */
.tar-table-wrap { border-top: 1px solid var(--border-subtle); }
.tar-thead, .tar-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.7fr) repeat(7, minmax(72px, 1fr));
  gap: 4px;
  align-items: center;
}
.tar-thead {
  position: sticky; top: 0;
  background: var(--surface);
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-subtle);
  z-index: 1;
}
.tar-th {
  background: none; border: 0; padding: 4px 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-tertiary);
  text-align: right; cursor: pointer; font-family: inherit;
  transition: color .12s;
}
.tar-th:first-child { text-align: left; }
.tar-th:hover { color: var(--text); }
.tar-th-static { cursor: default; }
.tar-th-static:hover { color: var(--text-tertiary); }
.tar-th-dim { opacity: .35; }
.tar-th-desc::after { content: ' ↓'; font-size: 10px; }
.tar-th-asc::after  { content: ' ↑'; font-size: 10px; }

.tar-tbody {
  padding: 4px 0;
  max-height: 400px;
  overflow-y: auto;
}
.tar-row {
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background .12s;
}
.tar-row:hover { background: var(--surface-hover); }
.tar-row-expanded { background: var(--surface-hover); }
.tar-td { font-size: 13px; color: var(--text); }
.tar-td-name {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.tar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--av-2, #6366f1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.tar-name-block { min-width: 0; }
.tar-name { font-size: 13px; font-weight: 600; color: var(--text); }
.tar-username { font-size: 11px; color: var(--text-tertiary); }
.tar-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 6px;
}
.tar-td-num .tar-num { display: block; font-weight: 600; font-size: 14px; color: var(--text); }
.tar-td-num .tar-sub { display: block; font-size: 10px; color: var(--text-muted); }
.tar-td-dim { opacity: .35; }

/* Drill-down expanded row — sits inline under the clicked row. */
.tar-drill {
  grid-column: 1 / -1;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  padding: 14px 18px 16px;
}
.tar-drill-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
}
.tar-drill-bar-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: .04em;
}
.tar-drill-bar-label [data-lucide] { width: 13px; height: 13px; }
.tar-drill-bar-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  height: 60px;
  align-items: end;
}
.tar-drill-bar-cell {
  display: flex; flex-direction: column; align-items: stretch;
  height: 60px; position: relative;
}
.tar-drill-bar {
  width: 100%; background: var(--border-subtle); border-radius: 2px 2px 0 0;
  align-self: flex-end; min-height: 1px;
}
.tar-drill-bar.has-val { background: var(--primary, #3b82f6); }
.tar-drill-bar-label-day {
  font-size: 9px; color: var(--text-muted);
  text-align: center; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.tar-drill-events {
  margin-top: 14px;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 12px;
}
.tar-drill-events-head {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-tertiary);
  margin-bottom: 8px;
}
.tar-drill-events-list {
  max-height: 280px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

@media (max-width: 1100px) {
  .tar-thead, .tar-row {
    grid-template-columns: minmax(140px, 1.5fr) repeat(7, minmax(56px, 1fr));
  }
}

.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; }
.form-label input[type="checkbox"] { margin-right: 6px; vertical-align: middle; }

/* Hide elements based on role */
.role-agent [data-admin-only="true"] { display: none !important; }
/* Super-admin only gate — hides the WhatsApp Disconnect/Connect button
 * for everyone except the user(s) listed in SUPER_ADMIN_USERNAMES. */
body:not(.role-super-admin) [data-super-admin-only="true"] { display: none !important; }

/* ─── Assign-to dropdown ─── */
.assign-wrap { position: relative; display: inline-block; }
.assign-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface-elevated); border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  min-width: 260px; max-width: 320px;
  z-index: 100; overflow: hidden;
}
.assign-dropdown-head {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--gray-500); padding: 14px 16px 8px;
  border-bottom: 1px solid var(--gray-100);
}
.assign-dropdown-list { max-height: 320px; overflow-y: auto; padding: 4px 0; }
.assign-dropdown-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  transition: background 0.1s;
  font-size: 14px;
}
.assign-dropdown-row:hover { background: var(--gray-50); }
.assign-dropdown-row.active { background: var(--wa-soft); }
.assign-dropdown-row .ad-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase;
  flex-shrink: 0;
}
.assign-dropdown-row .ad-name { color: var(--gray-900); font-weight: 500; }
.assign-dropdown-row.unassigned { color: var(--gray-500); border-bottom: 1px solid var(--gray-100); }
.assign-dropdown-row.unassigned .ad-avatar {
  background: var(--gray-200); color: var(--gray-500);
}
.assign-dropdown-row .ad-check {
  margin-left: auto; color: var(--wa);
}

/* Simple item variant (Team Chat assign/tags dropdowns + email precedent):
   a plain <button> row, no per-row color class — reuses .assign-dropdown /
   .assign-dropdown-list as the popover shell but doesn't need the
   .ad-avatar/.ad-name split since it renders a generic .avatar. */
.assign-dropdown-list .assign-dropdown-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 16px; border: 0; background: none; text-align: left;
  cursor: pointer; font: inherit; font-size: 14px; color: var(--gray-900);
  transition: background 0.1s;
}
.assign-dropdown-list .assign-dropdown-item:hover { background: var(--gray-50); }
.assign-dropdown-list .assign-dropdown-item.is-active { background: var(--wa-soft); }

/* Assign button highlight when chat IS assigned */
#assignBtn.is-assigned { background: var(--wa-soft); color: var(--wa-dark); }
#assignBtn.is-assigned [data-lucide] { stroke: var(--wa-dark); }

/* Conversation list — small assignee indicator */
.conv-item .conv-assignee {
  position: absolute; bottom: 8px; right: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Conversation list — assignee pill (full name visible). Inline at the
 * right end of row2 so the preview text truncates before reaching it
 * (was absolute-positioned and overlapping RTL Arabic previews). */
.conv-item .conv-assignee-pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1.5px 7px 1.5px 5px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.15);
  font-size: 9.5px; font-weight: 600; color: #4f46e5;
  max-width: 90px;
  letter-spacing: 0.15px;
}
.conv-item .conv-assignee-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.conv-item .conv-assignee-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: capitalize;
}
.conv-item.active .conv-assignee-pill {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.35);
  color: #3730a3;
}

/* Tickets table — Assigned column. Reuse the conv-assignee-pill look. */
.tickets-cell.tickets-cell-assigned { display: flex; align-items: center; cursor: pointer; }
.tickets-cell.tickets-cell-assigned:hover { background: var(--surface-hover); }
.tickets-cell.tickets-cell-assigned .conv-assignee-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 6px; border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid transparent;
  font-size: 11px; font-weight: 600; color: var(--accent-strong);
  max-width: 140px;
}
[data-theme="dark"] .tickets-cell.tickets-cell-assigned .conv-assignee-pill { color: var(--accent); }
.tickets-cell.tickets-cell-assigned .conv-assignee-init {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--accent-fg); background: var(--accent); flex-shrink: 0;
}
.tickets-cell.tickets-cell-assigned .conv-assignee-name {
  text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticket-assignee-unmapped {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gray-700);
}
.ticket-assignee-unmapped-name { font-weight: 500; }
.ticket-assignee-unmapped-tag {
  font-size: 9.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--gray-100); color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.3px;
}

/* Super Admin profile card — top of the Team / Super Admin view.
   Editorial card: cobalt accent backdrop, large Fraunces name, role
   badge. This is Ayoub's own card; the visual weight makes the role
   feel intentional rather than buried in a settings page. */
.superadmin-profile { padding: 0 24px; margin-bottom: 16px; }
.superadmin-profile-card {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.superadmin-avatar {
  width: 64px; height: 64px; font-size: 22px; font-weight: 600;
  color: var(--accent-fg);
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  flex-shrink: 0;
}
.superadmin-profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.superadmin-profile-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.superadmin-name {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  color: var(--text); margin: 0;
}
.superadmin-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-fg);
}
.superadmin-badge svg { width: 12px; height: 12px; }
.superadmin-profile-meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 12.5px; color: var(--text-secondary); margin-top: 4px;
}
.superadmin-meta-row { display: inline-flex; align-items: center; gap: 5px; }
.superadmin-meta-row svg { width: 13px; height: 13px; opacity: 0.7; }
.superadmin-system-tools { flex-shrink: 0; display: flex; gap: 8px; }
.superadmin-system-tools .btn { font-size: 12px; }

/* Super Admin — Platform mappings section */
.superadmin-mappings { padding: 0 24px; margin-bottom: 18px; }
.superadmin-mappings .bulk-section-head { margin-bottom: 10px; gap: 12px; align-items: baseline; }
.superadmin-mapping-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
.superadmin-mapping-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.superadmin-mapping-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.superadmin-mapping-card-future { opacity: 0.6; }
.superadmin-mapping-card .smc-head { display: flex; align-items: center; gap: 10px; }
.superadmin-mapping-card .smc-logo {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.superadmin-mapping-card .smc-meta { flex: 1; min-width: 0; }
.superadmin-mapping-card .smc-name { font-size: 14px; font-weight: 600; color: var(--text); }
.superadmin-mapping-card .smc-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; }
.superadmin-mapping-card .smc-count {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-tertiary); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Assigned filter dropdown — pill list. Each row pairs a checkbox with
   a coloured pill (initial-avatar + name) so the dropdown visually
   mirrors the Assigned-column cells. Special filters (me / unmapped /
   no owner) get distinct colours so they pop above the team members. */
.tickets-assignee-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 8px;
  cursor: pointer; transition: background 80ms ease;
}
.tickets-assignee-row:hover { background: var(--gray-50); }
.tickets-assignee-row.checked { background: rgba(59, 130, 246, 0.06); }
.tickets-assignee-row input[type="checkbox"] {
  width: 14px; height: 14px; cursor: pointer; accent-color: #3b82f6;
  flex-shrink: 0;
}
.tickets-assignee-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px 3px 4px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.18);
  font-size: 13px; font-weight: 600; color: #4f46e5;
  max-width: 100%;
}
.tickets-assignee-pill .tap-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white;
  background: #6366f1; flex-shrink: 0;
}
.tickets-assignee-pill .tap-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Special-filter pill colours — me / unmapped / no-owner each stand
   out so the team list below feels grouped. */
.tickets-assignee-pill.pill-me {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.30);
  color: #047857;
}
.tickets-assignee-pill.pill-me .tap-avatar { background: #10b981; }
.tickets-assignee-pill.pill-warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.30);
  color: #b45309;
}
.tickets-assignee-pill.pill-warn .tap-avatar { background: #f59e0b; }
.tickets-assignee-pill.pill-muted {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-600);
}
.tickets-assignee-pill.pill-muted .tap-avatar { background: var(--gray-400); }
/* Team-member pill — purple tint matching the Assigned-column cell. */
.tickets-assignee-pill.pill-user { /* defaults above already apply */ }
.tickets-assignee-role {
  margin-left: auto; font-size: 10.5px; font-weight: 600;
  color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.4px;
}

/* Team ↔ HubSpot owner mapping modal */
.team-owner-map-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.team-owner-map-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--gray-200); border-radius: 8px; background: var(--surface);
}
.team-owner-map-row .tomr-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.team-owner-map-row .tomr-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: white; background: #6366f1;
  flex-shrink: 0;
}
.team-owner-map-row .tomr-user-info { min-width: 0; }
.team-owner-map-row .tomr-name { font-weight: 600; font-size: 13px; color: var(--gray-900); }
.team-owner-map-row .tomr-role { font-size: 11px; color: var(--gray-500); margin-top: 1px; }
.team-owner-map-row .tomr-select { flex: 0 0 240px; font-size: 12px; }

/* Avatar color palette by name (deterministic) */
.av-c1 { background: #16a34a; }   /* green */
.av-c2 { background: #ec4899; }   /* pink */
.av-c3 { background: #06b6d4; }   /* teal */
.av-c4 { background: #22c55e; }   /* emerald */
.av-c5 { background: #3b82f6; }   /* blue */
.av-c6 { background: #a855f7; }   /* purple */
.av-c7 { background: #f59e0b; }   /* amber */
.av-c8 { background: #ef4444; }   /* red */

/* ─── Conversation Details panel (Notes + Activity + Take over) ─── */
.main.with-conv-details { grid-template-columns: var(--sidebar-w) minmax(0,1fr) 340px; }
.main.with-conv-details #convDetailsPanel { display: flex; }
.main.with-conv-details:not(.with-profile) #profilePanel { display: none; }
.main.sidebar-collapsed.with-conv-details { grid-template-columns: 0 minmax(0,1fr) 340px; }
.main:not(.with-conv-details) #convDetailsPanel { display: none; }

.conv-details-panel { flex-direction: column; }
.conv-details-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--gray-200);
}

.conv-details-tabs {
  display: flex; border-bottom: 1px solid var(--gray-200);
  background: var(--surface);
}
.conv-details-tab {
  flex: 1; padding: 14px 8px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--gray-500);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  position: relative;
}
.conv-details-tab [data-lucide] { width: 16px; height: 16px; }
.conv-details-tab.active { color: #d97706; }
.conv-details-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 16px; right: 16px; height: 2px;
  background: #d97706;
}
.conv-tab-count {
  background: #fed7aa; color: #c2410c;
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  min-width: 18px; text-align: center;
}

.conv-details-pane { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }

.conv-notes-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: #fffbeb; color: #b45309;
  font-size: 13px; border-bottom: 1px solid #fef3c7;
}
.conv-notes-banner [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; }

.conv-notes-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.conv-note-card {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  padding: 10px 12px; position: relative;
}
.conv-note-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.conv-note-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; flex-shrink: 0;
}
.conv-note-author { font-weight: 600; font-size: 13px; color: var(--gray-800); flex: 1; }
.conv-note-time { font-size: 11px; color: var(--gray-500); }
.conv-note-content {
  font-size: 14px; color: var(--gray-900); white-space: pre-wrap; word-wrap: break-word;
  overflow-wrap: anywhere;
}
.conv-note-delete {
  position: absolute; top: 6px; right: 6px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--gray-400); padding: 4px; border-radius: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.conv-note-card:hover .conv-note-delete { opacity: 1; }
.conv-note-delete:hover { background: rgba(0,0,0,0.05); color: #dc2626; }
.conv-note-delete [data-lucide] { width: 14px; height: 14px; }

.conv-notes-compose {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--gray-200); background: var(--surface);
}
/* Multi-line note input — auto-grows with content (set by JS) between
   the min-height of ~3 rows and a max-height that keeps the notes list
   readable above. Rounded rectangle (not the old pill) so longer notes
   feel like a proper message-compose. */
.conv-notes-compose .input.conv-note-textarea {
  flex: 1; min-height: 64px; max-height: 200px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid #fde68a;
  font-family: inherit; font-size: 14px; line-height: 1.4;
  resize: none; overflow-y: auto;
}
.conv-notes-compose .input.conv-note-textarea:focus {
  border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(251,191,36,0.2);
  outline: none;
}
.conv-note-send {
  background: #fcd34d; color: #92400e; border: 0; border-radius: 50%;
  width: 40px; height: 40px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.conv-note-send:hover { background: #fbbf24; }
.conv-note-send [data-lucide] { width: 16px; height: 16px; }

.conv-activity-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.conv-activity-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 16px; border-bottom: 1px solid var(--gray-100);
}
.conv-activity-row:last-child { border-bottom: 0; }
.conv-activity-row .ca-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gray-100); color: var(--gray-500);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.conv-activity-row .ca-icon [data-lucide] { width: 14px; height: 14px; }
.conv-activity-row .ca-body { flex: 1; min-width: 0; }
.conv-activity-row .ca-text { font-size: 13px; color: var(--gray-800); }
.conv-activity-row .ca-text strong { font-weight: 600; color: var(--gray-900); }
.conv-activity-row .ca-time { font-size: 11px; color: var(--gray-400); margin-top: 2px; }

/* notesBtn = lock icon shows orange when notes exist */
#notesBtn.has-notes { color: #d97706; }
#notesBtn.has-notes [data-lucide] { stroke: #d97706; }

/* ─── Contact Profile v2 ─── */
.profile-head-v2 {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
  position: relative;
}
.profile-head-top {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.profile-head-title {
  margin: 0; font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.08em;
}
/* Big avatar — now cobalt to anchor the page with the design accent
   (was orange). The colour will look uniform across both themes via
   --accent's brightness pivot. */
.profile-avatar-big {
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 18px; font-weight: 600; color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  text-transform: uppercase;
  margin-top: 0;
  box-shadow: 0 0 0 3px var(--surface-sunken);
}
/* Contact / group name — the editorial moment of the profile page.
   Fraunces gives it the editorial weight; -0.015em tracking + opsz 144
   tune it for display size. Replaces the old Geist 15px weight 700. */
.profile-name-big {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
  color: var(--text);
  text-align: center; word-break: break-word;
}
.profile-phone-big {
  margin: 0; font-size: 12px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
/* Name + edit-pencil row in the Contact Profile header. Pencil is
   tucked next to the name and only flips to visible on hover so the
   layout reads as a static label until the agent reaches for it. */
.profile-name-row {
  display: inline-flex; align-items: center; gap: 4px;
  justify-content: center;
}
.profile-name-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: transparent; border: 1px solid transparent;
  border-radius: 50%; color: var(--gray-400, #9ca3af);
  cursor: pointer; padding: 0;
  /* Always visible at a subtle 0.55 so the team can find the rename
   * affordance without having to hover-discover it. Previously
   * opacity:0 by default — team reported "the contact has no name and
   * I can't see how to add one". Hover lifts to full opacity. */
  opacity: 0.55; transition: opacity 0.12s, background 0.12s, color 0.12s;
}
/* Chat header rename pencil — sits next to the contact name in the
 * chat topbar so the team can rename without having to open the
 * profile panel. Crucial for the attestation flow where the name
 * shown here is what ends up on the certificate. */
.chat-id-row {
  display: inline-flex; align-items: center; gap: 6px;
}
.chat-name-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: transparent; border: 1px solid transparent;
  border-radius: 50%; color: var(--gray-400, #9ca3af);
  cursor: pointer; padding: 0;
  opacity: 0.55; transition: opacity 0.12s, background 0.12s, color 0.12s;
  font-family: inherit;
}
.chat-name-edit-btn [data-lucide] { width: 13px; height: 13px; }
.chat-header:hover .chat-name-edit-btn,
.chat-name-edit-btn:focus-visible,
.chat-name-edit-btn:hover { opacity: 1; }
.chat-name-edit-btn:hover { background: var(--surface-hover); color: var(--accent); }
.chat-name-edit-btn.hidden { display: none; }
.profile-name-edit-btn [data-lucide] { width: 12px; height: 12px; }
.profile-head:hover .profile-name-edit-btn,
.profile-name-row:hover .profile-name-edit-btn,
.profile-name-edit-btn:focus-visible,
.profile-name-edit-btn:hover { opacity: 1; }
.profile-name-edit-btn:hover { background: var(--surface-hover); color: var(--accent); border-color: var(--border); }

.profile-name-edit-form {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 2px 0 0; justify-content: center;
}
.profile-name-edit-input {
  font: inherit; font-family: var(--font-display); font-size: 18px; font-weight: 500;
  letter-spacing: -0.015em;
  padding: 3px 8px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  min-width: 0; max-width: 220px;
  outline: none;
}
.profile-name-edit-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.profile-name-edit-form .btn { padding: 3px 10px; font-size: 12px; }
/* Group the two action pills (Link to HubSpot + Lougha AI) on a single
   row so the header keeps a tight vertical footprint. */
.profile-head-pills {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 4px;
}
.profile-head-pills .profile-link-pill,
.profile-head-pills .profile-ai-pill,
.profile-head-pills .profile-teacher-notes-pill { margin-top: 0; }
.profile-link-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.08); color: #4f46e5;
  border: 0; cursor: pointer;
  font-size: 12px; font-weight: 600;
  margin-top: 4px;
  transition: background 0.15s;
}
.profile-link-pill:hover { background: rgba(99, 102, 241, 0.15); }
.profile-link-pill [data-lucide] { width: 14px; height: 14px; }

/* Teacher observations are visually distinct from Support2's private notes:
   graduation-cap = teacher-authored, lock = internal agent note. */
#teacherNotesBtn {
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.08);
}
#teacherNotesBtn:hover,
#teacherNotesBtn.has-notes { background: rgba(99, 102, 241, 0.16); color: #4338ca; }
#teacherNotesBtn [data-lucide] { width: 18px; height: 18px; }
.profile-teacher-notes-pill {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 5px 12px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(99, 102, 241, 0.10); color: #4f46e5;
  font: inherit; font-size: 12px; font-weight: 650;
  transition: background 0.15s, color 0.15s;
}
.profile-teacher-notes-pill:hover { background: rgba(99, 102, 241, 0.18); color: #4338ca; }
.profile-teacher-notes-pill [data-lucide] { width: 14px; height: 14px; }
.profile-teacher-notes-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #4f46e5; color: #fff;
  font-size: 10px; font-weight: 750; line-height: 1;
}

/* ─── Conversation-scoped Teacher notes modal ─── */
.teacher-notes-modal-card { max-width: 760px; max-height: min(86vh, 820px); }
.teacher-notes-modal-head { align-items: flex-start; }
.teacher-notes-modal-head > div { min-width: 0; }
.teacher-notes-context {
  margin: 4px 0 0; color: var(--text-tertiary);
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.teacher-notes-filters {
  display: flex; gap: 7px; padding: 10px 22px;
  border-bottom: 1px solid var(--border-subtle); background: var(--surface-sunken);
}
.teacher-notes-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-secondary);
  font: inherit; font-size: 11px; font-weight: 650; cursor: pointer;
}
.teacher-notes-filter:hover { border-color: #818cf8; color: #4f46e5; }
.teacher-notes-filter.active { border-color: #6366f1; background: rgba(99, 102, 241, 0.10); color: #4338ca; }
.teacher-notes-filter-count { font-variant-numeric: tabular-nums; opacity: 0.72; }
.teacher-notes-body { padding: 16px 18px 20px; background: var(--surface-sunken); }
.teacher-notes-loading,
.teacher-notes-empty {
  min-height: 180px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: var(--text-tertiary); text-align: center;
}
.teacher-notes-empty [data-lucide] { width: 30px; height: 30px; color: #818cf8; }
.teacher-notes-warning {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  padding: 8px 10px; border-radius: 9px;
  background: var(--warning-soft); color: var(--warning); font-size: 12px;
}
.teacher-notes-warning [data-lucide] { width: 14px; height: 14px; flex: 0 0 auto; }
.teacher-notes-list { display: grid; gap: 10px; }
.teacher-note-card {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px;
  padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px;
  background: var(--surface-elevated); box-shadow: var(--shadow-xs);
}
.teacher-note-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(99, 102, 241, 0.12); color: #4f46e5;
  font-size: 12px; font-weight: 750;
}
.teacher-note-main { min-width: 0; }
.teacher-note-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.teacher-note-teacher { color: var(--text); font-size: 13px; font-weight: 700; }
.teacher-note-scope {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 280px; padding: 2px 7px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.09); color: #4f46e5;
  font-size: 10.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.teacher-note-scope.is-student { background: rgba(20, 184, 166, 0.10); color: #0f766e; }
.teacher-note-scope [data-lucide] { width: 11px; height: 11px; flex: 0 0 auto; }
.teacher-note-when { margin-left: auto; color: var(--text-muted); font-size: 10.5px; white-space: nowrap; }
.teacher-note-text {
  margin-top: 7px; color: var(--text-secondary); font-size: 13px;
  line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.teacher-note-edited { color: var(--text-muted); font-size: 10px; }
@media (max-width: 620px) {
  .teacher-notes-modal-card { width: calc(100% - 18px); max-height: 92vh; }
  .teacher-notes-filters { padding-inline: 14px; overflow-x: auto; }
  .teacher-notes-body { padding: 12px; }
  .teacher-note-card { grid-template-columns: 32px minmax(0, 1fr); padding: 11px; }
  .teacher-note-avatar { width: 32px; height: 32px; }
  .teacher-note-when { width: 100%; margin-left: 0; }
}

/* ─── AI Card v2 (Lougha AI) ─── */
.ai-card-v2 {
  margin: 12px; padding: 14px 14px 12px;
  border: 1px solid #fbcfe8; border-radius: 12px;
  background: var(--surface-elevated);
  position: relative;
}

/* When used as a popup overlay (hidden by default, opened via the
   profile-header trigger). Floats above the accordion list, with shadow. */
.ai-popup {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 30;
  margin: 0;
  box-shadow: 0 10px 32px rgba(168, 85, 247, 0.18), 0 2px 8px rgba(0,0,0,0.06);
}

/* Trigger pill in profile header — mirrors .profile-link-pill styling but
   wears the AI gradient so it reads as the gateway to the summary popup. */
.profile-ai-pill {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 5px 12px;
  border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #ec4899 0%, #a855f7 100%);
  color: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
.profile-ai-pill:hover { box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3); transform: translateY(-1px); }
.profile-ai-pill [data-lucide] { width: 14px; height: 14px; stroke: #fff; }
.ai-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.ai-card-meta { flex: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ai-gen-label { font-size: 11px; color: var(--gray-500); }
.ai-gen-time { font-size: 11px; color: var(--gray-700); font-weight: 500; }
.ai-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(90deg, #ec4899 0%, #a855f7 100%);
  color: #fff; font-size: 11px; font-weight: 600;
}
.ai-pill [data-lucide] { width: 12px; height: 12px; stroke: #fff; }
.ai-refresh-btn {
  background: transparent; border: 0; cursor: pointer;
  color: var(--gray-400); padding: 4px; border-radius: 4px;
  display: inline-flex; align-items: center;
}
.ai-refresh-btn:hover { background: var(--gray-100); color: var(--gray-700); }
.ai-refresh-btn [data-lucide] { width: 14px; height: 14px; }
.ai-refresh-btn.spin [data-lucide] { animation: spin 0.8s linear infinite; }
/* @keyframes spin already defined earlier in the file */

.ai-body-v2 {
  font-size: 13px; line-height: 1.6; color: var(--gray-900);
  white-space: pre-wrap; word-wrap: break-word;
  min-height: 28px;
}
.ai-actions-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #fce7f3;
}
.ai-action-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--gray-200); background: #fff;
  cursor: pointer; color: var(--gray-500);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.ai-action-btn:hover { background: var(--gray-50); color: var(--gray-700); }
.ai-action-btn.up-active { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
.ai-action-btn.down-active { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.ai-action-btn [data-lucide] { width: 14px; height: 14px; }
.ai-ask-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  background: rgba(236, 72, 153, 0.08); color: #db2777;
  border: 1px solid rgba(236, 72, 153, 0.2);
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.ai-ask-btn:hover { background: rgba(236, 72, 153, 0.15); }
.ai-ask-btn [data-lucide] { width: 14px; height: 14px; }

/* Section accordions: count badges + add property */
.profile-card .card-title-count {
  font-size: 12px; font-weight: 500; color: var(--gray-500);
  margin-left: 4px;
}
.profile-card-head .card-add-prop {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(99, 102, 241, 0.08); color: #4f46e5;
  border: 0; cursor: pointer;
  padding: 4px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  margin-right: 6px;
}
.profile-card-head .card-add-prop:hover { background: rgba(99, 102, 241, 0.15); }
.profile-card-head .card-add-prop [data-lucide] { width: 11px; height: 11px; }

/* Ask AI answer area inside modal */
.ask-ai-answer {
  margin-top: 14px; padding: 12px 14px;
  background: #fdf4ff; border: 1px solid #f3e8ff;
  border-radius: 8px; color: var(--gray-800);
  font-size: 13px; line-height: 1.6; white-space: pre-wrap;
}

/* ─── Custom properties ─── */
.custom-prop-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 6px; align-items: start;
  padding: 8px 10px; border-radius: 6px;
  margin-top: 4px; background: rgba(99, 102, 241, 0.04);
  position: relative;
}
.custom-prop-row:hover { background: rgba(99, 102, 241, 0.08); }
.custom-prop-row .cp-content { min-width: 0; }
.custom-prop-row .cp-key {
  font-size: 11px; font-weight: 600; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.4px;
  display: flex; align-items: center; gap: 6px;
}
.custom-prop-row .cp-key-edit {
  border: 0; background: transparent; padding: 0;
  font-size: 11px; font-weight: 600; color: var(--gray-700);
  text-transform: uppercase; letter-spacing: 0.4px;
  width: 100%;
}
.custom-prop-row .cp-key-edit:focus { outline: 2px solid #4f46e5; outline-offset: 2px; border-radius: 3px; }
.custom-prop-row .cp-value {
  font-size: 13px; color: var(--gray-900); white-space: pre-wrap;
  word-wrap: break-word; cursor: text;
  padding: 2px 0;
}
.custom-prop-row .cp-value-edit {
  width: 100%; border: 1px solid var(--gray-300); border-radius: 4px;
  padding: 4px 8px; font: inherit; font-size: 13px;
}
.custom-prop-row .cp-author {
  font-size: 10px; color: var(--gray-400); margin-top: 4px; font-style: italic;
}
.custom-prop-row .cp-edit-btn,
.custom-prop-row .cp-del-btn {
  background: transparent; border: 0; cursor: pointer;
  color: var(--gray-400); padding: 4px; border-radius: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.custom-prop-row:hover .cp-edit-btn,
.custom-prop-row:hover .cp-del-btn { opacity: 1; }
.custom-prop-row .cp-edit-btn:hover { background: rgba(99,102,241,0.15); color: #4f46e5; }
.custom-prop-row .cp-del-btn:hover { background: rgba(220,38,38,0.1); color: #dc2626; }
.custom-prop-row .cp-edit-btn [data-lucide],
.custom-prop-row .cp-del-btn [data-lucide] { width: 13px; height: 13px; }
.custom-props-divider {
  height: 1px; background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
  margin: 10px 0 6px;
}
.custom-props-label {
  font-size: 10px; font-weight: 700; color: #4f46e5;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 8px 0 4px; display: flex; align-items: center; gap: 4px;
}
.custom-props-label [data-lucide] { width: 12px; height: 12px; }

/* ─── Add Property modal — quick suggestion chips ─── */
.add-prop-templates {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px; background: var(--gray-50);
  border-radius: 6px; min-height: 32px;
}
.add-prop-templates:empty::after {
  content: 'No templates yet — type a name below.';
  font-size: 12px; color: var(--gray-400);
}
.add-prop-tpl {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.1); color: #4f46e5;
  border: 1px solid transparent; cursor: pointer;
  font-size: 12px; font-weight: 500;
  transition: background .12s, border-color .12s, transform .08s;
}
.add-prop-tpl:hover { background: rgba(99, 102, 241, 0.2); }
.add-prop-tpl.selected {
  background: rgba(34, 197, 94, 0.14); color: #15803d;
  border-color: rgba(34, 197, 94, 0.45);
}
.add-prop-tpl.selected:hover { background: rgba(34, 197, 94, 0.22); }
.add-prop-tpl.empty-prop {
  background: rgba(148, 163, 184, 0.10); color: var(--gray-500);
}
.add-prop-tpl.empty-prop:hover { background: rgba(148, 163, 184, 0.20); }
.add-prop-tpl.empty-prop.selected {
  background: rgba(34, 197, 94, 0.14); color: #15803d;
}

/* HubSpot contact picker (duplicate-phone resolution) */
.contact-picker-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.contact-picker-row {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--gray-200); border-radius: 8px; padding: 10px 12px;
  background: var(--surface); cursor: pointer; transition: background 120ms, border-color 120ms;
}
.contact-picker-row:hover { background: var(--gray-50); border-color: var(--blue-300); }
.contact-picker-row.active { border-color: var(--blue-500); background: rgba(59, 130, 246, 0.06); }
.contact-picker-row .cpr-head { display: flex; align-items: center; gap: 8px; }
.contact-picker-row .cpr-name { flex: 1; font-weight: 600; font-size: 14px; color: var(--gray-900); }
.contact-picker-row .cpr-active-chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--blue-500); color: #fff;
}
.contact-picker-row .cpr-score {
  font-size: 11px; padding: 2px 6px; border-radius: 6px;
  background: var(--gray-100); color: var(--gray-600);
}
.contact-picker-row .cpr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.contact-picker-row .cpr-field { display: flex; justify-content: space-between; font-size: 12px; min-width: 0; }
.contact-picker-row .cpr-key { color: var(--gray-500); }
.contact-picker-row .cpr-val { color: var(--gray-900); font-weight: 500; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-prop-templates {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 220px; overflow-y: auto;
  padding: 8px; background: var(--gray-50);
  border-radius: 10px; border: 1px solid var(--gray-200);
}

/* Pinned-field row inside Student Info — same look as default rows + tiny remove button on hover */
.pinned-field-row { position: relative; padding-right: 24px; padding-left: 18px; }
.pinned-field-remove {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--gray-400); cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.pinned-field-row:hover .pinned-field-remove { opacity: 1; }
.pinned-field-remove:hover { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.pinned-field-remove svg { width: 12px; height: 12px; }

/* Create Ticket modal */
.ct-section-title {
  font-size: 12px; font-weight: 600; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin: 0 0 10px;
}
.ct-essential, .ct-advanced {
  display: flex; flex-direction: column; gap: 12px;
}
.ct-advanced-list {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 320px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--gray-200); border-radius: 8px;
  background: var(--gray-50);
}
.ct-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 12px 0;
  font-size: 12px;
}
.ct-toggle svg { width: 14px; height: 14px; }
.ct-field { display: flex; flex-direction: column; gap: 4px; }
.ct-label {
  font-size: 12px; font-weight: 600; color: var(--gray-700);
}
.ct-input { width: 100%; }
/* Multi-line ticket fields (Student Feedback / Note) — roomy, resizable, and
   JS auto-grows them to fit a long feedback history so nothing is hidden. */
.ct-textarea {
  min-height: 96px;
  line-height: 1.5;
  resize: vertical;
  overflow-y: auto;
  font-family: inherit;
}
.ct-field-missing { opacity: 0.85; }
.ct-field-missing .ct-label { color: var(--gray-500); }
.ct-missing-note {
  font-size: 11.5px; color: #b45309;
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed rgba(245, 158, 11, 0.35);
  border-radius: 6px; padding: 6px 8px;
}
.card-create-ticket {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(34, 197, 94, 0.10); color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.25);
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.card-create-ticket:hover { background: rgba(34, 197, 94, 0.20); }
.card-create-ticket svg { width: 12px; height: 12px; }
.card-create-ticket span { display: inline-block; }

/* Ticket cards inside Tickets section */
.ticket-card {
  border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--gray-50);
}
.ticket-card-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 8px;
}
.ticket-card-subject {
  font-weight: 600; font-size: 13px; color: var(--gray-800);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticket-card-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  color: var(--gray-400); text-decoration: none;
}
.ticket-card-link:hover { color: var(--blue-500); background: var(--gray-100); }
.ticket-card-link svg { width: 13px; height: 13px; }
.ticket-card-fields { display: flex; flex-direction: column; gap: 0; }
.ticket-card-fields .field-row { padding: 4px 0; border-bottom: 1px dashed var(--gray-200); }
.ticket-card-fields .field-row:last-child { border-bottom: 0; }

/* Drag handle for reorder — discoverable at rest, brighter on hover */
.pinned-field-drag {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: var(--gray-300); cursor: grab;
  opacity: 0.6; transition: opacity .12s, color .12s;
}
.pinned-field-row:hover .pinned-field-drag { opacity: 1; }
.pinned-field-drag:hover { color: var(--gray-600); }
.pinned-field-drag:active { cursor: grabbing; }
.pinned-field-drag svg { width: 12px; height: 12px; }
.pinned-field-row.dragging { opacity: 0.4; }
.pinned-field-row.drop-above { box-shadow: inset 0 2px 0 0 #6366f1; }
.pinned-field-row.drop-below { box-shadow: inset 0 -2px 0 0 #6366f1; }

/* Inline-editable contact property values (click → edit, see
   startPinnedFieldEdit). The dashed underline is always visible so the
   affordance is discoverable on touch, not hover-only. */
#profileSections .field-val.field-val-editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--gray-300);
  padding-bottom: 1px;
}
#profileSections .field-val.field-val-editable:hover {
  border-bottom-color: var(--indigo-500, #6366f1);
  color: var(--indigo-600, #4f46e5);
}
/* The inline editor sized to fill the value column without reflowing the row. */
.pinned-field-row .pinned-field-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  font-size: 13px;
  padding: 3px 6px;
  margin: -2px 0;
}
textarea.pinned-field-input { resize: vertical; line-height: 1.4; }
.pinned-field-row.pinned-field-saving { opacity: 0.55; pointer-events: none; }

/* ─── Note search results ─── */
.note-search-results {
  margin-top: 12px; max-height: 400px; overflow-y: auto;
}
.note-search-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; cursor: pointer; border-radius: 8px;
  border: 1px solid transparent;
  margin-bottom: 6px;
}
.note-search-row:hover { background: var(--gray-50); border-color: var(--gray-200); }
.note-search-row .nsr-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 12px; color: var(--gray-500);
}
.note-search-row .nsr-chat {
  font-weight: 700; color: var(--gray-800);
}
.note-search-row .nsr-content {
  font-size: 13px; color: var(--gray-900); line-height: 1.5;
  white-space: pre-wrap;
}
.note-search-row .nsr-content mark {
  background: #fef3c7; padding: 0 2px; border-radius: 2px;
}

/* Section drag handle */
.profile-card-head .card-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; cursor: grab;
  color: var(--gray-300); margin-right: 4px;
  user-select: none;
}
.profile-card-head .card-drag-handle:hover { color: var(--gray-500); }
.profile-card-head .card-drag-handle [data-lucide] { width: 14px; height: 14px; }
.profile-card.dragging { opacity: 0.5; }
.profile-card.drop-target {
  border-top: 2px solid #4f46e5;
}

/* HubSpot import button */
.profile-card-head .card-hs-import {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 122, 89, 0.1); color: #ea580c;
  border: 0; cursor: pointer;
  padding: 4px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  margin-right: 6px;
}
.profile-card-head .card-hs-import:hover { background: rgba(255, 122, 89, 0.2); }
.profile-card-head .card-hs-import [data-lucide] { width: 11px; height: 11px; }

/* HubSpot-imported prop has subtle orange tag */
.custom-prop-row[data-source="hubspot"] {
  background: rgba(255, 122, 89, 0.05);
  border-left: 2px solid #ea580c;
}
.custom-prop-row[data-source="hubspot"] .cp-key::after {
  content: 'HUBSPOT';
  font-size: 9px; padding: 1px 6px; border-radius: 999px;
  background: #fed7aa; color: #c2410c;
  margin-left: 6px;
}

/* ─── Documents v2 (7-type picker + dynamic form) ─── */
.doc-picker-body { padding: 0 0 12px; }
.doc-contact-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #fff;
}
.doc-contact-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; text-transform: uppercase;
}
.doc-contact-name { font-size: 15px; font-weight: 700; }
.doc-contact-phone { font-size: 12px; color: rgba(255,255,255,0.7); }

.doc-picker-intro {
  margin: 16px 20px 12px; font-size: 13px; color: var(--gray-600);
}
.doc-picker-list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 20px 20px;
}
.doc-picker-card {
  display: grid; grid-template-columns: 44px 1fr 18px;
  align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: 10px;
  cursor: pointer; background: var(--surface-elevated);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.doc-picker-card:hover {
  border-color: #f59e0b; background: #fffbeb;
  box-shadow: 0 1px 4px rgba(245,158,11,0.15);
}
.doc-picker-card .dpc-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--gray-100); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 20px;
}
.doc-picker-card .dpc-label { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 2px; }
.doc-picker-card .dpc-desc { font-size: 12px; color: var(--gray-500); line-height: 1.4; }
.doc-picker-card .dpc-arrow { color: var(--gray-300); }
.doc-picker-card:hover .dpc-arrow { color: #f59e0b; }
.doc-picker-card.accent-orange:hover { border-color: #f97316; }
.doc-picker-card.accent-cyan:hover { border-color: #06b6d4; background: #ecfeff; box-shadow: 0 1px 4px rgba(6,182,212,0.15); }
.doc-picker-card.accent-emerald:hover { border-color: #10b981; background: #ecfdf5; }
.doc-picker-card.accent-indigo:hover { border-color: #6366f1; background: #eef2ff; }
.doc-picker-card.accent-amber:hover { border-color: #f59e0b; }
.doc-picker-card.accent-sky:hover { border-color: #0ea5e9; background: #f0f9ff; }
.doc-picker-card.accent-violet:hover { border-color: #8b5cf6; background: #f5f3ff; }

/* ─── Document form (dynamically populated from registry) ─── */
#documentsModal .modal-card {
  width: min(1250px, calc(100vw - 64px));
  max-width: 1250px;
}
.doc-form-body { padding: 16px 20px; }
.doc-form-fields { display: flex; flex-direction: column; gap: 14px; }
.doc-field {
  display: flex; flex-direction: column; gap: 4px;
}
.doc-field-label {
  font-size: 12px; font-weight: 600; color: var(--gray-700);
  display: inline-flex; align-items: center; gap: 6px;
}
.doc-field-label .doc-required { color: #dc2626; }
.doc-field-help { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

.doc-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

.doc-items-list { display: flex; flex-direction: column; gap: 6px; }
.doc-invoice-prefill {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 2px;
  border: 1px solid #bae6fd; border-radius: 10px;
  background: #f0f9ff; color: #075985;
  font-size: 12px; font-weight: 650;
}
.doc-invoice-prefill [data-lucide] { width: 16px; height: 16px; flex: 0 0 auto; }
.doc-item-row {
  display: grid; grid-template-columns: 1fr 80px 110px 30px;
  gap: 6px; align-items: center;
}
.doc-invoice-item-header {
  padding: 0 4px;
  color: var(--gray-500);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.doc-invoice-item-header > span:nth-child(2),
.doc-invoice-item-header > span:nth-child(3) { text-align: center; }
/* Receipt-specific row layout — 4 inputs (Période / Description / Mois / Montant)
   instead of the invoice's 3, plus the delete button. */
.doc-item-row.doc-receipt-row {
  grid-template-columns: 1fr 110px 70px 100px 100px 30px;
}
.doc-receipt-header {
  font-size: 11px; font-weight: 700;
  color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0 4px;
}
.doc-receipt-header > span { padding-left: 4px; }
.doc-item-row .input { padding: 8px 10px; font-size: 13px; }
.doc-item-row .doc-item-del {
  background: transparent; border: 0; cursor: pointer;
  color: var(--gray-400); padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.doc-item-row .doc-item-del:hover { color: #dc2626; }
.doc-add-item {
  align-self: flex-start; padding: 6px 12px;
  background: rgba(99, 102, 241, 0.08); color: #4f46e5; border: 0;
  border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
}
.doc-add-item:hover { background: rgba(99, 102, 241, 0.15); }
.doc-add-item [data-lucide] { width: 12px; height: 12px; }

/* ─── Affiche pack gallery (Fiche d'inscription) ─── */
.doc-affiche-presets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.doc-affiche-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-tertiary, var(--gray-500));
}
.doc-affiche-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.doc-affiche-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border-radius: 12px;
  border: 1px solid var(--border-subtle, var(--gray-200));
  background: var(--surface, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer; user-select: none;
  transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.doc-affiche-card .daf-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.doc-affiche-card:hover {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.doc-affiche-card:active { transform: scale(.98); }
.doc-affiche-card:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: 2px; }
.doc-affiche-card.selected {
  border-color: var(--accent, #6366f1);
  background: var(--accent-soft, #eef2ff);
  box-shadow: inset 0 0 0 1px var(--accent, #6366f1);
}
.doc-affiche-card .daf-icon { font-size: 20px; line-height: 1; }
.doc-affiche-card .daf-net {
  font-size: 13px; font-weight: 800; white-space: nowrap;
  color: var(--accent, #4f46e5); font-variant-numeric: tabular-nums;
}
.doc-affiche-card .daf-label {
  font-size: 13px; font-weight: 700; color: var(--text, var(--gray-900)); line-height: 1.25;
}
.doc-affiche-card .daf-sub {
  font-size: 11px; color: var(--text-tertiary, var(--gray-500)); line-height: 1.3;
}

/* Fiche item rows carry an extra "Offert" toggle → 5 columns */
.doc-item-row.doc-reg-row { grid-template-columns: 1fr 64px 96px auto 30px; }
.doc-item-offert {
  border: 1px solid var(--border, var(--gray-300));
  background: var(--surface, #fff); color: var(--text-tertiary, var(--gray-500));
  border-radius: var(--radius-pill, 999px); cursor: pointer;
  font-size: 11px; font-weight: 600; padding: 5px 10px; white-space: nowrap;
  font-family: inherit; transition: background .15s, color .15s, border-color .15s;
}
.doc-item-offert:hover { background: var(--surface-hover, var(--gray-50)); }
.doc-item-offert.on {
  background: var(--success-soft, #dcfce7); color: var(--success, #16a34a);
  border-color: var(--success, #16a34a);
}
.doc-item-row.offert .input:nth-child(3) { text-decoration: line-through; opacity: 0.65; }

/* L'offre editor (validity line + bullet list) */
.doc-offre-editor { display: flex; flex-direction: column; gap: 6px; }
.doc-offre-editor .doc-offre-validity { font-style: italic; }
.doc-offre-points { display: flex; flex-direction: column; gap: 6px; }
.doc-offre-point { display: grid; grid-template-columns: 14px 1fr 30px; gap: 6px; align-items: center; }
.doc-offre-point .doc-offre-bullet { color: var(--accent, #6366f1); font-size: 10px; text-align: center; }
.doc-offre-point .doc-item-del {
  background: transparent; border: 0; cursor: pointer; color: var(--gray-400); padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.doc-offre-point .doc-item-del:hover { color: #dc2626; }

@media (pointer: coarse) {
  .doc-affiche-card { padding: 14px; min-height: 56px; }
  .doc-item-offert { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-affiche-card { transition: none; }
  .doc-affiche-card:active { transform: none; }
}
@media (max-width: 900px) {
  #documentsModal .modal-card { width: calc(100vw - 32px); }
  .doc-affiche-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #documentsModal .modal-card { width: calc(100vw - 16px); }
  .doc-affiche-grid { grid-template-columns: 1fr; }
}

.doc-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.doc-toggle input[type="checkbox"] { width: 16px; height: 16px; }

.doc-months-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
.doc-month-pill {
  padding: 6px 4px; border: 1px solid var(--gray-200); border-radius: 6px;
  background: var(--surface-elevated); cursor: pointer; font-size: 11px; font-weight: 600;
  text-align: center; user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.doc-month-pill.paid {
  background: #fef3c7; border-color: #f59e0b; color: #92400e;
}

/* ─── Document preview ─── */
.doc-preview-body { padding: 0; display: flex; flex-direction: column; }
.doc-preview-name {
  padding: 10px 20px; font-size: 12px; color: var(--gray-600);
  background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
}
.doc-preview-frame {
  width: 100%; height: 60vh; border: 0; background: #fff;
}

/* ─── Documents — validation + footer hint ─── */
.doc-form-errors {
  margin: 0 0 14px; padding: 12px 14px;
  background: #fee2e2; border: 1px solid #fca5a5; border-radius: 8px;
  color: #991b1b; font-size: 13px;
}
.doc-form-errors strong { display: block; margin-bottom: 4px; }
.doc-form-errors ul { margin: 0; padding-left: 20px; }
.doc-form-errors li { line-height: 1.5; }
.doc-foot-hint {
  flex: 1; font-size: 12px; color: var(--gray-500); font-style: italic;
}
.doc-field.has-error .input,
.doc-field.has-error textarea,
.doc-field.has-error select { border-color: #dc2626; }
.doc-field.has-error .doc-field-label { color: #dc2626; }

/* ─── HubSpot Group Send (C2 — members fill column, larger type, clear no-phone state) ─── */
.hs-members-list {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: none;
  border: 1px solid var(--gray-200); border-radius: 10px;
  background: var(--surface);
  padding: 4px;
  overflow-y: auto;
}
.hs-member-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 0;
}
.hs-member-row + .hs-member-row { border-top: 1px solid var(--gray-100); }
.hs-member-row:hover { background: var(--gray-50); }
.hs-member-name { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.hs-member-phone { font-size: 12px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.hs-member-row.no-phone { background: var(--danger-soft); }
.hs-member-row.no-phone .hs-member-phone {
  color: #b91c1c; font-style: normal; font-weight: 500;
}
.hs-member-row.no-phone::after {
  content: '⚠'; color: #b91c1c; margin-left: 6px;
}

/* ============================================================================
   AUDIT FIXES (applied 2026-05-03 — see senior frontend audit transcript)
   These rules sit at the END of the file so they cleanly override earlier
   declarations without me having to chase every original site.
   ============================================================ */

/* P6: thinner ambient icons, thicker on action buttons */
[data-lucide] { stroke-width: 1.75; }
.btn-primary [data-lucide],
.icon-btn-primary [data-lucide],
.view-tab.view-tab-active [data-lucide] { stroke-width: 2; }

/* M1: unified focus ring across interactive elements */
.btn:focus-visible,
.icon-btn:focus-visible,
.tab:focus-visible,
.view-tab:focus-visible,
.conv-item:focus-visible,
.conv-details-tab:focus-visible {
  outline: 2px solid #10b7e2; outline-offset: 2px;
}

/* H2 brand-tone color map — green only for Send + outgoing bubbles + pulse.
   Cyan elsewhere for navigation / state / focus. Override earlier per-spot rules. */
.profile-link-pill { background: rgba(16,183,226,0.08); color: #0e7490; }
.profile-link-pill:hover { background: rgba(16,183,226,0.16); }
.custom-prop-row { background: rgba(16,183,226,0.04); }
.custom-prop-row:hover { background: rgba(16,183,226,0.08); }
.custom-props-label { color: #0e7490; }
#convTakeOverBtn { color: #0e7490 !important; }

/* H3: notes amber stays (sticky-note metaphor); other tabs go neutral with cyan underline */
.conv-details-tab.active { color: var(--gray-900); }
.conv-details-tab.active::after { background: #10b7e2; }
.conv-details-tab[data-conv-tab="notes"].active { color: #b45309; }
.conv-details-tab[data-conv-tab="notes"].active::after { background: #f59e0b; }
.conv-tab-count { background: var(--gray-100); color: var(--gray-600); }
.conv-details-tab[data-conv-tab="notes"].active .conv-tab-count {
  background: #fed7aa; color: #c2410c;
}

/* M3: tone down uppercase letter-spaced micro-pills */
.bot-pill,
.team-user-row .tu-role-pill {
  text-transform: none; letter-spacing: 0; font-weight: 600;
}

/* H1: Send button is the primary action — bump it */
#bulkSendBtn,
#hsSendBtn,
#docFormPreviewBtn,
#docPreviewSendBtn,
#docFormSendBtn,
#bulkSendBtn[disabled],
#hsSendBtn[disabled] {
  height: 42px; padding: 0 18px; font-size: 14px; font-weight: 600;
}

/* H5: bulk-count as a real pill instead of bare text */
.bulk-count {
  font-size: 12px; font-weight: 600; color: var(--gray-700);
  padding: 4px 10px; border-radius: 999px;
  background: var(--gray-100);
}

/* C6 reinforcement: composer textarea base style for plain .input textareas
   inside bulk/hubspot composers */
.bulk-composer-body .input { font-size: 14px; }

/* Cancel button visibility when shown */
.bulk-composer-foot .btn-ghost,
#hsCancelBtn { color: #b91c1c; }
.bulk-composer-foot .btn-ghost:hover,
#hsCancelBtn:hover { background: #fee2e2; color: #991b1b; }

/* P3: avatar-md inconsistency fix (was 13px, smaller than base 14px) */
.avatar-md { font-size: 14px; }

/* P9: drag handle visible by default */
.profile-card-head .card-drag-handle { color: var(--gray-400); }
.profile-card-head .card-drag-handle:hover { color: var(--gray-700); }

/* P1 override (legacy): solid background on messages area — now themed
   to follow --bg so it flips between light cream and dark charcoal. */
.messages-area {
  background: var(--bg) !important;
}

/* M4: field keys with more presence */
.field-key { font-size: 12.5px; font-weight: 500; color: var(--gray-600); }

/* Inbox conv-item: drop the legacy bottom border (replaced with .conv-item + .conv-item top border in C4) */
#conversationList .conv-item { border-bottom: 0; }

/* ─── Group tracking modal ─── */
.trk-list { display: flex; flex-direction: column; gap: 10px; }
.trk-card {
  border: 1px solid var(--gray-200); border-radius: 10px;
  background: var(--surface-elevated); overflow: hidden;
}
.trk-card-head {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; cursor: pointer;
  transition: background 0.12s;
}
.trk-card-head:hover { background: var(--gray-50); }
.trk-card-name { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.trk-card-meta { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.trk-card-stats {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 12px; font-weight: 600;
}
.trk-stat-joined { color: var(--success); }
.trk-stat-pending { color: var(--warning); }
.trk-card-body { padding: 12px 14px; border-top: 1px solid var(--gray-100); background: var(--gray-50); display: none; }
.trk-card.expanded .trk-card-body { display: block; }
.trk-member-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  padding: 8px 12px; border-radius: 6px; background: var(--surface);
  margin-bottom: 4px;
  font-size: 13px;
}
.trk-member-row .trk-status {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.trk-status.joined { background: var(--success-soft); color: var(--success); }
.trk-status.pending { background: var(--warning-soft); color: var(--warning); }
.trk-resend-btn {
  background: rgba(99,102,241,0.1); color: #4f46e5; border: 0;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 600;
}
.trk-resend-btn:hover { background: rgba(99,102,241,0.2); }
.trk-resend-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Today's Classes view ─── */
/* Schedule view container: flex column with the body taking the remaining
 * height and scrolling internally. Without flex:1 + overflow:auto, the list
 * grows past the viewport and the topbar/page can't scroll to reach it. */
#scheduleView .bulk-header,
#clubsView .bulk-header { flex-shrink: 0; }
/* Editorial heading on the daily-ops + admin views — Fraunces gives
   the page-anchor heading a "newspaper of today" feel, matches the
   Tickets and Super Admin sections. */
#scheduleView .bulk-section-head h2,
#clubsView .bulk-section-head h2,
#teamView .bulk-section-head h2 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
  color: var(--text);
}
#scheduleView .bulk-section-head h2 [data-lucide],
#clubsView .bulk-section-head h2 [data-lucide],
#teamView .bulk-section-head h2 [data-lucide] { color: var(--accent); }
#scheduleView .bulk-body,
#clubsView .bulk-body {
  flex: 1; min-height: 0;
  overflow: auto;
  padding: 16px 20px;
}
.schedule-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.schedule-filters {
  flex-shrink: 0;
  position: sticky;
  top: -16px;
  z-index: 5;
  background: var(--surface);
  margin-top: -16px;
  margin-left: -20px;
  margin-right: -20px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.sched-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.sched-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.sched-row.cancelled { opacity: 0.55; background: var(--surface-sunken); }
.sched-row.cancelled .sched-name { text-decoration: line-through; }
.sched-row.checked { border-left: 3px solid var(--wa); }

/* Time-status row colors — only meaningful for "today" (buildScheduleRow
   sets status-upcoming for non-today dates so the list stays neutral).
   Past   = sunken bg, muted text.
   Now    = info-soft tint + pulsing info dot.
   Upcoming = default --surface card. */
.sched-row.status-past {
  background: var(--surface-sunken);
  opacity: 0.78;
}
.sched-row.status-past .sched-time { color: var(--text-tertiary); }
.sched-row.status-past .sched-name { color: var(--text-secondary); }

.sched-row.status-now {
  background: var(--info-soft);
  border-color: var(--info);
  box-shadow: 0 0 0 2px var(--info-soft);
}
.sched-row.status-now .sched-time { color: var(--info); }
.sched-row.status-now::before {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--info);
  margin-left: -16px; margin-top: 8px;
  box-shadow: 0 0 0 4px var(--info-soft);
  animation: pulseNow 1.6s ease-in-out infinite;
}
.sched-row.status-now { position: relative; }
@keyframes pulseNow {
  0%, 100% { box-shadow: 0 0 0 0 var(--info-soft); }
  50%      { box-shadow: 0 0 0 10px transparent; }
}

/* Center the schedule header — the filter row stays full-width below. */
.schedule-header-centered {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.schedule-header-left {
  display: flex; gap: 8px; align-items: center;
  justify-self: start;
}
.schedule-header-title {
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: center; text-align: center;
}
.schedule-header-right { justify-self: end; }

.sched-time {
  font-size: 18px; font-weight: 700; color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.sched-time-end { font-size: 11px; font-weight: 500; color: var(--text-tertiary); font-family: var(--font-mono); }

.sched-body { min-width: 0; }
.sched-name { font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; letter-spacing: -0.005em; }
.sched-meta { font-size: 11.5px; color: var(--text-tertiary); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sched-note-badge {
  display: inline-block;
  background: var(--warning-soft); color: var(--warning);
  padding: 1px 7px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
}
.sched-source-badge {
  background: var(--accent-soft); color: var(--accent);
  padding: 1px 7px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 600;
}
/* Exact calendar date on First-sessions rows — one row screenshot must be
   self-explanatory (Ayoub 2026-07-13). */
.sched-date-badge {
  background: var(--surface-sunken); color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 1px 7px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.sched-cancelled-badge {
  background: var(--danger-soft); color: var(--danger);
  padding: 1px 7px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
}

.sched-actions { display: flex; align-items: center; gap: 6px; }
.sched-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.sched-action-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
/* Primary (Send via WhatsApp) keeps the WhatsApp green identity — it's
   the brand for the outbound action, not a theme variable. */
.sched-action-btn.primary { background: var(--wa); border-color: var(--wa); color: #fff; }
.sched-action-btn.primary:hover { background: var(--wa-dark); }
.sched-action-btn.checked { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.sched-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sched-action-btn i.lucide { width: 14px; height: 14px; }

.sched-auto-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-secondary);
  cursor: pointer; user-select: none;
  padding: 4px 8px; border-radius: var(--radius-sm);
}
.sched-auto-toggle input { margin: 0; accent-color: var(--accent); }
.sched-auto-toggle:hover { background: var(--surface-hover); }
.sched-auto-toggle.on { color: var(--accent); font-weight: 600; }

.schedule-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.sched-cfg-mapping-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px;
  margin-bottom: 8px; align-items: center;
}
.sched-cfg-mapping-row label { font-size: 12px; color: var(--gray-700); }

/* Sales → Support placement-test availability queue. This is a dedicated
   Classes & Clubs page, separate from the daily class list. */
.sar-page-wrap {
  flex: 1; min-height: 0; overflow: auto;
  padding: 26px 30px 48px;
}
.sar-section {
  width: 100%; max-width: 1480px; margin: 0 auto;
  padding: 0;
}
.sar-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 14px;
}
.sar-eyebrow {
  margin-bottom: 4px; color: var(--accent); font-size: 10.5px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.sar-head h2 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0; color: var(--text); font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
}
.sar-head h2 > svg { width: 23px; height: 23px; color: var(--accent); }
.sar-head p { margin: 5px 0 0; color: var(--text-tertiary); font-size: 12px; }
.sar-active-badge {
  display: inline-flex; align-items: center; min-height: 22px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--warning-soft); color: var(--warning);
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 750;
}
.sar-filters {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px;
}
.sar-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); background: var(--surface);
  color: var(--text-secondary); font: 650 11.5px/1 var(--font-sans);
  cursor: pointer;
}
.sar-filter:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.sar-filter.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sar-filter span {
  display: inline-grid; place-items: center; min-width: 19px; min-height: 19px;
  padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: inherit; font-size: 10px;
}
.sar-filter.active span { background: var(--surface); }
.sar-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sar-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 13px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}
.sar-card[data-status="new"] { border-left: 3px solid var(--warning); }
.sar-card[data-status="in_process"] { border-left: 3px solid var(--info); }
.sar-card[data-status="done"] { border-left: 3px solid var(--success); }
.sar-card[data-status="rejected"] { border-left: 3px solid var(--danger); }
.sar-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sar-client { min-width: 0; }
.sar-client strong {
  display: block; overflow: hidden; color: var(--text); font-size: 13.5px;
  font-weight: 750; text-overflow: ellipsis; white-space: nowrap;
}
.sar-client span { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 10.5px; }
.sar-status {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 7px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 750;
}
.sar-status > svg { width: 12px; height: 12px; }
.sar-status-new { background: var(--warning-soft); color: var(--warning); }
.sar-status-in_process { background: var(--info-soft); color: var(--info); }
.sar-status-done { background: var(--success-soft); color: var(--success); }
.sar-status-rejected { background: var(--danger-soft); color: var(--danger); }
.sar-windows { display: flex; flex-wrap: wrap; gap: 6px; }
.sar-window {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 7px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-sunken);
  color: var(--text-secondary); font-size: 10.5px; font-weight: 650;
}
.sar-window > svg { width: 13px; height: 13px; color: var(--accent); }
.sar-request-note {
  margin: 0; padding: 8px 9px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--text-secondary);
  font-size: 11px; line-height: 1.45; white-space: pre-wrap;
}
.sar-request-note b { color: var(--text); }
.sar-result {
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px; border-radius: var(--radius-sm);
  font-size: 11px; line-height: 1.4;
}
.sar-result strong { display: flex; align-items: center; gap: 6px; }
.sar-result strong > svg { width: 14px; height: 14px; }
.sar-result-done { border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); background: var(--success-soft); color: var(--success); }
.sar-result-rejected { border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); background: var(--danger-soft); color: var(--danger); }
.sar-result-note { color: var(--text-secondary); white-space: pre-wrap; }
.sar-result-note b { color: var(--text); }
.sar-suggested {
  display: flex; align-items: center; gap: 7px; margin-top: 2px;
  padding: 7px 8px; border-radius: var(--radius-sm);
  background: var(--info-soft); color: var(--info); font-weight: 700;
}
.sar-suggested > svg { width: 15px; height: 15px; }
.sar-meta { color: var(--text-tertiary); font-size: 10px; }
.sar-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.sar-card-actions .btn { min-height: 30px; }
.sar-start-btn { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.sar-found-btn { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.sar-reject-btn { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.sar-empty {
  grid-column: 1 / -1; padding: 30px 20px; border: 1px dashed var(--border);
  border-radius: var(--radius-lg); color: var(--text-tertiary);
  text-align: center; font-size: 12.5px;
}
.sar-empty > svg { display: block; width: 25px; height: 25px; margin: 0 auto 7px; color: var(--text-tertiary); }
.sar-resolution-request {
  margin-bottom: 14px; padding: 10px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-sunken);
  color: var(--text-secondary); font-size: 11.5px;
}
.sar-resolution-request strong { display: block; margin-bottom: 5px; color: var(--text); font-size: 13px; }
.sar-resolution-request .sar-windows { margin-top: 7px; }
.sar-resolution-found { margin-bottom: 14px; }
.sar-resolution-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sar-resolution-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sar-weekday { color: var(--accent); font-size: 10.5px; font-weight: 700; }
.sar-resolution-suggestion {
  margin-bottom: 14px; padding: 10px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-sunken);
}
.sar-resolution-suggestion > strong { display: block; color: var(--text); font-size: 12px; }
.sar-resolution-suggestion > span { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 10.5px; }
.sar-suggestion-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.sar-suggestion-head strong { display: block; color: var(--text); font-size: 12px; }
.sar-suggestion-head span { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 10.5px; }
.sar-suggestion-list { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.sar-suggestion-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr) 30px;
  gap: 9px; align-items: end; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.sar-suggestion-row .form-label { display: block; margin-bottom: 6px; }
.sar-suggestion-row .input { width: 100%; margin: 0; }
.sar-suggestion-remove { align-self: end; margin-bottom: 4px; }
#sarResolutionConfirmBtn.danger {
  border-color: var(--danger); background: var(--danger); color: #fff;
}
#sarRefreshBtn.is-loading > svg { animation: spin .8s linear infinite; }

@media (max-width: 980px) {
  .sar-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sar-page-wrap { padding: 18px 14px 36px; }
  .sar-head { align-items: stretch; flex-direction: column; }
  .sar-head .btn { align-self: flex-start; }
  .sar-resolution-when { grid-template-columns: 1fr; }
  .sar-suggestion-row { grid-template-columns: minmax(0, 1fr); }
  .sar-suggestion-remove { justify-self: end; }
}

/* Today's Clubs row wrapper + expansion panel. The wrapper holds the
 * compact .sched-row plus a .club-expansion that drops down on click so
 * the agent can see which member-class WA groups make up the cluster. */
.club-row-wrap { display: flex; flex-direction: column; }
.club-body-clickable { cursor: pointer; user-select: none; }
.club-body-clickable:hover .sched-name { color: var(--accent); }
.club-name-line { display: inline-flex; align-items: center; gap: 6px; }
.club-chevron {
  font-size: 11px; color: var(--text-tertiary); transition: transform 0.15s, color 0.15s;
  display: inline-block;
}
.club-row-wrap.expanded .club-chevron { color: var(--accent); }
.club-member-chip {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600;
}
/* Three states tied to the foundation semantic palette so dark mode
   pivots automatically. all = success, partial = warning, none = danger. */
.club-member-chip.all     { background: var(--success-soft); color: var(--success); }
.club-member-chip.partial { background: var(--warning-soft); color: var(--warning); }
.club-member-chip.none    { background: var(--danger-soft);  color: var(--danger); }
.club-topic-chip {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 500;
  background: var(--accent-soft); color: var(--accent);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: help;
}

.club-expansion {
  padding: 0 14px 14px 70px;
  background: var(--surface-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border: 1px solid var(--border); border-top: 0;
  margin-top: -8px;
}
.club-expansion.hidden { display: none; }
.club-expansion-inner { padding-top: 10px; }
.club-expansion-head {
  font-size: 13px; color: var(--gray-700); margin-bottom: 6px;
}
.club-expansion-head strong { color: var(--gray-900); margin-right: 4px; }
.club-expansion-head em { color: var(--gray-500); font-style: italic; }
.club-expansion-subtitle {
  font-size: 12px; color: var(--gray-500); margin-bottom: 8px;
}
.club-expansion-empty { font-size: 12px; color: var(--gray-500); }
.club-member-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
}
@media (max-width: 800px) { .club-member-list { grid-template-columns: 1fr; } }
.club-member-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 8px; border-radius: 6px;
  background: var(--surface-elevated); border: 1px solid var(--gray-200);
}
.club-member-item.unresolved { background: rgba(245, 158, 11, 0.05); }
.club-member-code { font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.club-member-level {
  font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: var(--gray-100); color: var(--gray-600); font-weight: 500;
}
.club-member-arrow { color: var(--gray-400); }
.club-member-target { color: var(--gray-700); flex: 1; }
.club-member-target.clickable { color: #4338ca; cursor: pointer; }
.club-member-target.clickable:hover { text-decoration: underline; }
.club-member-target.warn { color: #b45309; }

/* Individually-enrolled students section — name rows resolved against
   HubSpot. Same visual grammar as the class-code list above; just adds
   the ⚠ multi-match badge for ambiguous lookups. */
.club-members-named .club-member-code {
  font-weight: 600;
  text-transform: capitalize;
  font-variant-numeric: normal;
}
.club-member-multi-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 600;
}

/* Profile-panel "Students to add to group" diff section. Visually echoes the
   existing .group-student-row from the Students + WhatsApp members blocks;
   adds a right-aligned Add button (or a no-phone warning badge). */
.profile-add-row { align-items: center; }
.profile-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--blue-600, #2563eb);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.profile-add-btn:hover { background: var(--blue-700, #1d4ed8); }
.profile-add-btn:disabled { opacity: 0.6; cursor: wait; }
.profile-add-btn i {
  width: 14px;
  height: 14px;
}
/* Per-member "remove from group" (kick) on each WhatsApp members row. Always
   visible (not hover-only) but subtle until hovered, then red, so the affordance
   is discoverable without a stray click being too easy. */
.wa-member-remove {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--gray-400);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.wa-member-remove:hover { background: rgba(239, 68, 68, 0.10); color: #dc2626; border-color: rgba(239, 68, 68, 0.45); }
.wa-member-remove svg { width: 15px; height: 15px; }
.wa-member-remove:disabled, .wa-member-remove.is-busy { opacity: 0.5; cursor: default; }
/* One-click "copy group invite link" button on the Group info accordion. */
.group-link-copy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 12px; font-weight: 600;
  color: var(--blue-600, #2563eb);
  background: var(--blue-50, #eff6ff);
  border: 1px solid var(--blue-200, #bfdbfe); border-radius: 6px;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.group-link-copy:hover { background: var(--blue-100, #dbeafe); border-color: var(--blue-300, #93c5fd); }
.group-link-copy:disabled { opacity: 0.6; cursor: default; }
.group-link-copy svg { width: 14px; height: 14px; }
.profile-add-row-warn {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 500;
  flex-shrink: 0;
}

/* ── Group activity rows in profile panel (2026-05-18) ─────────────
   Shows WA group join / leave / remove events for the contact. Left
   colour stripe by action type so silent quits ("Left") jump out
   even when scrolling fast through a busy panel. */
.group-event-row {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  padding: 6px 8px;
  border-left: 3px solid var(--gray-200, #e5e7eb);
  font-size: 13px;
  align-items: start;
}
.group-event-row.group-event-add    { border-left-color: #10b981; }
.group-event-row.group-event-leave  { border-left-color: #e11d48; }
.group-event-row.group-event-remove { border-left-color: #b45309; }
.group-event-row.group-event-promote { border-left-color: #6366f1; }
.group-event-row.group-event-demote  { border-left-color: #9ca3af; }
.group-event-icon { width: 14px; height: 14px; color: var(--gray-600, #4b5563); margin-top: 1px; }
.group-event-row.group-event-leave  .group-event-icon { color: #be123c; }
.group-event-row.group-event-remove .group-event-icon { color: #b45309; }
.group-event-row.group-event-add    .group-event-icon { color: #047857; }
.group-event-main { min-width: 0; }
.group-event-line {
  color: var(--gray-900, #111827);
  font-weight: 500;
  word-wrap: break-word;
}
.group-event-when {
  color: var(--gray-500, #6b7280);
  font-size: 11px;
  margin-top: 2px;
}

/* Clubs multi-send modal — checklist of member groups + pacing knobs +
 * live progress strip. Each row shows status icon (queued/sending/sent/
 * failed), the class code, level chip, target WA group name. */
.clubs-remind-row { display: flex; align-items: center; gap: 8px; }
.clubs-remind-grouplist {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  max-height: 240px; overflow-y: auto;
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid var(--gray-200); border-radius: 8px;
  padding: 8px;
}
@media (max-width: 760px) { .clubs-remind-grouplist { grid-template-columns: 1fr; } }
.clubs-remind-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 4px 8px; border-radius: 6px;
  background: var(--surface-elevated); border: 1px solid var(--gray-200);
}
.clubs-remind-item input[type="checkbox"] { margin: 0; }
.clubs-remind-item .clubs-remind-status-icon {
  font-size: 13px; width: 16px; text-align: center;
  display: inline-block; flex-shrink: 0;
}
.clubs-remind-item .clubs-remind-code { font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.clubs-remind-item .clubs-remind-target { color: var(--gray-700); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clubs-remind-item.is-sent { background: rgba(34, 197, 94, 0.06); border-color: rgba(34, 197, 94, 0.3); }
.clubs-remind-item.is-sending { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.4); }
.clubs-remind-item.is-failed { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.3); }
.clubs-remind-item.is-cancelled { background: var(--gray-100); border-color: var(--gray-300); opacity: 0.6; }

.clubs-remind-delay {
  display: flex; align-items: center; gap: 16px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 8px;
  padding: 8px 12px;
}
.clubs-remind-delay label { font-size: 13px; color: var(--gray-700); display: inline-flex; align-items: center; gap: 6px; }

.clubs-remind-status {
  font-size: 13px; padding: 8px 12px; border-radius: 6px;
  background: rgba(99, 102, 241, 0.08); color: #4338ca;
}
.clubs-remind-status.done { background: rgba(34, 197, 94, 0.1); color: #15803d; }
.clubs-remind-status.error { background: rgba(239, 68, 68, 0.1); color: #b91c1c; }

/* "No link in message" inline warning inside the clubs reminder modal.
   Amber strip with an inline Insert button so the agent fixes it without
   leaving the modal. */
.clubs-remind-warn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  color: #92400e;
  font-size: 13px;
}
.clubs-remind-warn-text { flex: 1; }
.clubs-remind-warn .btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  background: #f59e0b;
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.clubs-remind-warn .btn-sm:hover { background: #d97706; }

/* Day-of-week section header used by Today's Clubs in "All" view to group
 * clusters by their meeting day. Sticky-ish look but stays inline so the
 * scroll position is predictable. */
.clubs-day-header {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4338ca;
  background: rgba(99, 102, 241, 0.08);
  padding: 6px 12px; border-radius: 6px;
  margin: 12px 0 4px;
}
.clubs-day-header:first-child { margin-top: 0; }

.sched-filter-btn,
.clubs-filter-btn {
  padding: 6px 14px; border-radius: 999px;
  background: var(--gray-100); border: 1px solid var(--gray-200);
  color: var(--gray-700); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.sched-filter-btn:hover,
.clubs-filter-btn:hover { background: var(--gray-200); }
.sched-filter-btn.active,
.clubs-filter-btn.active {
  background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.4);
  color: #4338ca;
}
.sched-filter-count,
.clubs-filter-count {
  font-size: 11px; opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.sched-row.individual .sched-name::before { content: '👤 '; }
.sched-row.group .sched-name::before { content: '👥 '; }

/* ─── Labels dropdown — rows + actions + add button ─── */
.label-row {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.label-row:hover { background: var(--gray-50); }
.label-swatch {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}
.label-name {
  flex: 1; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.label-row .label-action-btn {
  display: none;
  background: transparent; border: 0;
  padding: 4px; border-radius: 4px;
  cursor: pointer;
  color: var(--gray-500);
  align-items: center; justify-content: center;
}
.label-row:hover .label-action-btn { display: inline-flex; }
.label-row .label-action-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}
.label-row .label-action-btn [data-lucide] { width: 14px; height: 14px; }
.label-lock {
  width: 14px; height: 14px;
  color: var(--gray-400);
  flex-shrink: 0;
}
.label-add-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0; border-top: 1px solid var(--gray-100);
  background: transparent;
  color: var(--wa-dark, #075e54);
  font-weight: 500; font-size: 13px;
  cursor: pointer; text-align: left;
  margin-top: 4px;
}
.label-add-row:hover { background: var(--gray-50); }
.label-add-row .ad-add-icon { width: 14px; height: 14px; }

/* ─── Label editor modal — color grid ─── */
.label-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.label-color-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.1s;
}
.label-color-swatch:hover { transform: scale(1.06); }
.label-color-swatch.active {
  border-color: var(--gray-900);
  transform: scale(1.04);
  box-shadow: 0 0 0 2px #fff inset;
}

/* ─── Reminder modal — templates list (mirrors templates modal layout) ─── */
.reminder-tpl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}
.reminder-tpl-list .tpl-item.reminder-tpl-row {
  padding: 8px 10px;
}
.reminder-tpl-list .tpl-item.reminder-tpl-row .tpl-content {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
}
.reminder-tpl-use-btn {
  white-space: nowrap;
}
#reminderTplCategoryTabs {
  margin-bottom: 8px;
}

/* ===== Team-chat image annotator =====
   Full-viewport overlay. Toolbar pinned to the top, canvas fits the
   remaining space. Canvas is scaled by CSS but its bitmap stays at the
   image's natural resolution so the exported PNG keeps full quality. */
body.ia-open { overflow: hidden; }
.image-annotator-overlay {
  position: fixed; inset: 0;
  z-index: 1200;
  background: rgba(15, 23, 42, 0.92);
  display: flex; flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}
.image-annotator-toolbar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.image-annotator-toolbar .ia-tool {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #111827;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.image-annotator-toolbar .ia-tool:hover { background: #f3f4f6; }
.image-annotator-toolbar .ia-tool.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}
.image-annotator-toolbar .ia-sep {
  width: 1px; height: 24px; background: #e5e7eb; margin: 0 2px;
}
.image-annotator-toolbar .ia-spacer { flex: 1; }
.image-annotator-toolbar .ia-swatches {
  display: flex; gap: 8px; align-items: center;
}
.image-annotator-toolbar .ia-swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.image-annotator-toolbar .ia-swatch:hover { transform: scale(1.08); }
.image-annotator-toolbar .ia-swatch.active {
  border-color: #111827;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827;
}
.image-annotator-toolbar .ia-icon-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #111827;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.image-annotator-toolbar .ia-icon-btn:hover { background: #f3f4f6; }
.image-annotator-toolbar .ia-text-btn {
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #111827;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.image-annotator-toolbar .ia-text-btn:hover { background: #e5e7eb; }
.image-annotator-toolbar .ia-text-btn.ia-done {
  background: #22c55e; border-color: #16a34a; color: #fff;
}
.image-annotator-toolbar .ia-text-btn.ia-done:hover { background: #16a34a; }

.image-annotator-canvas-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow: auto;
}
.image-annotator-canvas {
  max-width: 100%; max-height: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  cursor: crosshair;
  touch-action: none; /* prevent scroll while drawing on touch */
}

/* Inline text input that pops up over the canvas in Text mode.
   v4: now a <textarea> so multi-line wrap is visible while typing.
   Width is set inline by JS (matches either an enclosing Box op or
   the distance to the canvas right edge). Auto-grows in height as
   the user types — JS toggles `height: auto` then sets scrollHeight.
   Dashed border keeps the "still editable" affordance. */
.ia-text-input {
  position: fixed;
  font-family: sans-serif;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.94);
  border: 2px dashed #ef4444;
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  z-index: 1300;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  resize: none;
  overflow: hidden;
  line-height: 1.2;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ===== Tickets view — HubSpot-style triage table =====
   New top-bar view added 2026-05-12. Live-fetches from HubSpot, edits
   write back via PATCH. Layout: filter chips header + scrollable
   grid table + load-more pager. Pills mirror HubSpot's status colors
   so an agent's eye lands on the right rows in 0.2 s. */
#ticketsView .bulk-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pad-header-y) var(--pad-header-x) 8px;
}
.tickets-filter-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 20px 12px;
}
/* Sub-view tabs (All / Teachers / Groups / Renew / Change / Attestation) —
   a domain slice above the status chips. Pill row matching the app's tab
   look (reuses --accent-soft/--accent like the attendance sub-tabs). */
.tickets-sub-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 20px 4px;
}
.tickets-sub-tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  padding: 6px 14px;
  border-radius: var(--radius-pill, 999px);
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary, #4b5563);
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.tickets-sub-tab i { width: 15px; height: 15px; }
.tickets-sub-tab:hover { background: var(--surface-hover, #f3f4f6); }
.tickets-sub-tab.active {
  background: var(--accent-soft, #dbeafe);
  color: var(--accent, #2563eb);
  border-color: transparent;
  font-weight: 600;
}
[data-theme="dark"] .tickets-sub-tab:hover { background: var(--gray-800, #1e293b); }
[data-theme="dark"] .tickets-sub-tab.active { background: #1e3a8a; color: #93c5fd; }
.tickets-cell-teacher .ticket-teacher-name { font-size: 13px; color: var(--text); }
/* Filter chips — ALWAYS colored, regardless of active state.
   The chip's status color is its visual identity, so muting it on
   inactivity would erase that identity. Instead the active/inactive
   distinction is communicated by:
     • opacity (active = 100 %, inactive = ~55 % so it reads as faded
       but still clearly "blue" / "red" / etc.)
     • a 2-px ring + checkmark glyph appearing only on the active chip,
       so a quick glance tells the agent which queues feed the table
       below. */
.tickets-filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  background: var(--gray-100); border: 1px solid var(--gray-200);
  color: var(--gray-700);
  /* Avoid layout shift when the ::after checkmark appears. Reserve
     room for it via a zero-width placeholder span. */
  transition: opacity 0.12s, box-shadow 0.12s, transform 0.08s;
  opacity: 0.55;
  /* `filter: saturate()` is too aggressive on the pale fills already
     used by the table pills; opacity alone reads cleaner. */
}
.tickets-filter-chip:hover { opacity: 0.78; }
.tickets-filter-chip:active { transform: scale(0.97); }
/* Dimmed look when a search query is active — clicks still work
   (so re-toggling a chip while typing is non-destructive) but the
   pills visibly read as "ignored for now" so the agent isn't
   confused by chips that don't affect results. */
.tickets-filter-chip.chip-disabled-by-search {
  opacity: 0.45;
  text-decoration: line-through;
}

/* Per-status palette — same swatches as the table pills so the
   chip and the pill on the matching row read as one.
   Themed via OKLCH foundation tokens so colors stay legible in
   both light and dark mode (each token pivots brightness across
   themes; the chip border falls through to the saturated text
   colour for a subtle ring effect on both surfaces). */
.tickets-filter-chip.tickets-pill-new        { background: var(--info-soft);    border-color: transparent; color: var(--info); }
.tickets-filter-chip.tickets-pill-waiting    { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.tickets-filter-chip.tickets-pill-attention  { background: var(--danger-soft);  border-color: transparent; color: var(--danger); }
.tickets-filter-chip.tickets-pill-closed     { background: var(--surface-sunken); border-color: var(--border); color: var(--text-tertiary); }

/* Dot before the label — same color as the chip text. Keeps the
   "tiny legend" feel even on faded chips. */
.tickets-filter-chip::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* Active state — full opacity + a softer outer ring + checkmark
   suffix. The ring uses currentColor (the chip's text colour) so
   it picks up the status palette automatically. */
.tickets-filter-chip.active {
  opacity: 1;
  box-shadow: 0 0 0 2px currentColor inset, 0 1px 2px rgba(0,0,0,0.06);
}
.tickets-filter-chip.active::after {
  content: '✓';
  font-weight: 800; font-size: 12px;
  margin-left: 2px;
}

/* Title block — Sheet-style: editorial title (Fraunces) + subtle subtitle */
.tickets-view-header { align-items: flex-start; }
.tickets-view-header .tickets-title-block { display: flex; flex-direction: column; gap: 4px; }
.tickets-view-header h2 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--text);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.tickets-view-header h2 [data-lucide] { color: var(--accent); }
.tickets-subtitle {
  margin: 0; font-size: 12px; color: var(--text-tertiary); font-weight: 400;
  letter-spacing: 0.01em;
  max-width: 600px;
}

/* ════════════════════════════════════════════════════════════════
   Rest page — matches the Tickets table visual language exactly.
   Only the bucket-chip palette + amount stack + settings drawer
   carry Rest-specific styling. Everything else inherits from the
   .tickets-* classes for consistency.
   ──────────────────────────────────────────────────────────────── */

/* Bucket chips reuse .tickets-filter-chip — these add the per-bucket
   palette (Past / Current / Upcoming / All) and the count badge. */
.tickets-filter-chip.rest-chip-all      { background: var(--surface-sunken); border-color: var(--border); color: var(--text-secondary); }
.tickets-filter-chip.rest-chip-past     { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.tickets-filter-chip.rest-chip-current  { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.tickets-filter-chip.rest-chip-upcoming { background: rgba(16, 185, 129, 0.10); border-color: transparent; color: #047857; }
[data-theme="dark"] .tickets-filter-chip.rest-chip-upcoming { background: rgba(110, 231, 183, 0.12); color: #6ee7b7; }

/* Closing Groups chips — same 4-bucket pattern as Rest, distinct palette.
   🔴 overdue (closed too long ago) · 🟠 urgent (closing next 15d) ·
   🟡 this month · 🟢 next month. */
.tickets-filter-chip.closing-chip-all       { background: var(--surface-sunken); border-color: var(--border); color: var(--text-secondary); }
.tickets-filter-chip.closing-chip-overdue   { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.tickets-filter-chip.closing-chip-urgent    { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.tickets-filter-chip.closing-chip-month     { background: rgba(234, 179, 8, 0.12); border-color: transparent; color: #92400e; }
[data-theme="dark"] .tickets-filter-chip.closing-chip-month { background: rgba(250, 204, 21, 0.15); color: #fde047; }
.tickets-filter-chip.closing-chip-upcoming  { background: rgba(16, 185, 129, 0.10); border-color: transparent; color: #047857; }
[data-theme="dark"] .tickets-filter-chip.closing-chip-upcoming { background: rgba(110, 231, 183, 0.12); color: #6ee7b7; }

/* Per-row bucket pill (smaller, inside the row "Bucket" column) */
.closing-row-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.closing-row-pill.closing-pill-overdue   { background: var(--danger-soft); color: var(--danger); }
.closing-row-pill.closing-pill-urgent    { background: var(--warning-soft); color: var(--warning); }
.closing-row-pill.closing-pill-month     { background: rgba(234, 179, 8, 0.12); color: #92400e; }
.closing-row-pill.closing-pill-upcoming  { background: rgba(16, 185, 129, 0.10); color: #047857; }
[data-theme="dark"] .closing-row-pill.closing-pill-month     { background: rgba(250, 204, 21, 0.15); color: #fde047; }
[data-theme="dark"] .closing-row-pill.closing-pill-upcoming  { background: rgba(110, 231, 183, 0.12); color: #6ee7b7; }

/* Closing Groups table — column widths
   (cb / Group / Status / Teacher·Schedule / Start / End / Close / Close 9mo /
    Days / Missing / Note / Owner / Actions).
   Proportional minmax columns (2026-07-18): the old fixed-px set summed to
   ~1520px, so on a 1440 screen the 1fr Teacher column collapsed to
   min-content and the whole header bunched up. Now every column shrinks and
   grows together; below ~1350px the .tickets-table-wrap scrolls. */
#closingTable .closing-row {
  display: grid;
  grid-template-columns:
    36px                    /* checkbox */
    minmax(110px, 1.2fr)    /* Group */
    minmax(88px, 0.9fr)     /* Status */
    minmax(150px, 1.7fr)    /* Teacher · Schedule */
    minmax(92px, 1fr)       /* Date of start */
    minmax(92px, 1fr)       /* Date of end */
    minmax(96px, 1.05fr)    /* Close date */
    minmax(96px, 1.05fr)    /* Close 9 months */
    minmax(80px, 0.9fr)     /* Days */
    minmax(76px, 0.8fr)     /* Missing */
    minmax(110px, 1.2fr)    /* Note */
    minmax(100px, 1.1fr)    /* Owner */
    minmax(90px, 0.9fr);    /* Actions */
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 120ms ease;
}
#closingTable .closing-row:hover { background: var(--surface-hover); }
#closingTable .closing-row.is-selected { background: rgba(13, 148, 136, 0.06); }
/* Click-to-sort date headers (HubSpot-style). */
#closingTable .closing-sort-head { cursor: pointer; user-select: none; }
#closingTable .closing-sort-head:hover { color: var(--text-primary); }
#closingTable .closing-sort-arrow { margin-left: 4px; font-weight: 700; color: var(--lougha); }
/* Agent note — free-form, clamp long notes so rows stay scannable. */
#closingTable .closing-cell-note {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
/* Expandable-group callout under the bucket pill (same token recipe as
   .blkt-st-expandable — theme-safe via --info). */
.closing-expandable-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: color-mix(in oklab, var(--info) 14%, transparent);
  color: var(--info);
  white-space: nowrap;
}
/* Sticky column header (Ayoub 2026-07-18): the wrap is the vertical scroll
   container (same recipe as #lifecycleView), so the header stays pinned
   while the agent scrolls the rows. .tickets-table already sets
   overflow:visible + isolation:isolate precisely so sticky heads work. */
#closingGroupsView .tickets-table-wrap { max-height: calc(100vh - 290px); min-height: 320px; overflow: auto; }
#closingTable .closing-row-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-sunken);
  cursor: default;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  font-weight: 600;
}
#closingTable .closing-cell-name { font-weight: 600; color: var(--text-primary); }
#closingTable .closing-cell-teacher { font-size: 12.5px; color: var(--text-secondary); }
#closingTable .closing-cell-schedule { font-size: 12px; color: var(--text-tertiary); }
#closingTable .closing-cell-date { font-size: 12.5px; color: var(--text-secondary); }
#closingTable .closing-cell-days { font-size: 12px; font-weight: 600; }
#closingTable .closing-cell-missing { font-size: 11px; color: var(--warning); }
#closingTable .closing-cell-owner { font-size: 12px; color: var(--text-tertiary); }
#closingTable .closing-cell-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* Closing Groups — advanced filter bar (teacher combobox + date field/period) */
.closing-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.closing-fb-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.closing-finput, .closing-fselect, .closing-fdate {
  height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: 13px;
}
.closing-finput { min-width: 190px; }
.closing-finput:focus-visible, .closing-fselect:focus-visible, .closing-fdate:focus-visible {
  outline: var(--focus-w) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.closing-finput.is-set, .closing-fselect.is-set {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.closing-fclear {
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}
.closing-fclear:hover { background: var(--surface-hover); color: var(--text-primary); }

.rest-chip-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 11px;
  font-weight: 700;
}
.tickets-filter-chip.active .rest-chip-count { background: rgba(255, 255, 255, 0.25); }

/* Per-row table grid for Rest — smaller than Tickets' 11-column grid
   because Rest doesn't have multi-select or as many text columns. */
.rest-table .tickets-row {
  grid-template-columns:
    36px                  /* Checkbox */
    minmax(160px, 1.3fr)  /* Student */
    100px                 /* Bucket pill */
    120px                 /* Program */
    minmax(150px, 1fr)    /* Paid / Owed stack */
    minmax(110px, 0.9fr)  /* First session */
    100px                 /* Days left */
    minmax(110px, 0.9fr)  /* Status */
    110px                 /* Last contact */
    96px;                 /* Actions */
  align-items: center;
  padding: 12px 16px;
}
.rest-lastcontact { display: flex; flex-direction: column; gap: 2px; }
.rest-lastcontact-ago { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.rest-lastcontact-source {
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600; color: var(--text-tertiary);
}
.rest-lastcontact-source-whatsapp { color: #1f9d55; }
.rest-lastcontact-source-hubspot  { color: #b45309; }
.rest-lastcontact-source-3cx      { color: #2563eb; }

/* ===== Contact timeline quick-view modal =====
   Click on a LAST CONTACT cell in Tickets/Rest → opens this modal
   with a flat newest-first merge of recent WA messages + 3CX calls.
   Each row has a left color stripe identifying the source. */
.contact-timeline-row {
  display: grid;
  grid-template-columns: 18px 64px 1fr;
  gap: 10px;
  padding: 10px 8px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
  align-items: start;
}
.contact-timeline-row:last-child { border-bottom: none; }
.contact-timeline-row.is-wa  { border-left-color: #1f9d55; }
.contact-timeline-row.is-3cx { border-left-color: #2563eb; }
.contact-timeline-row-arrow {
  color: var(--gray-500);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  line-height: 18px;
}
.contact-timeline-row.is-wa .contact-timeline-row-arrow { color: #1f9d55; }
.contact-timeline-row.is-3cx .contact-timeline-row-arrow { color: #2563eb; }
.contact-timeline-row-ago {
  color: var(--gray-600);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.contact-timeline-row-body {
  color: var(--gray-900);
  min-width: 0;
  word-wrap: break-word;
  line-height: 1.4;
}
.contact-timeline-row-meta {
  color: var(--gray-500);
  font-size: 11px;
  margin-top: 3px;
  text-transform: capitalize;
}
.contact-timeline-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
  font-size: 13px;
}
.rest-lastcontact-empty { color: var(--text-tertiary); }
.rest-cell-select { display: flex; align-items: center; justify-content: center; }
.rest-cell-select input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--ws-amber, #b45309); }
.rest-table .tickets-row.is-selected { background: var(--accent-soft, rgba(180, 83, 9, 0.06)); }
.rest-table .tickets-row-header {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
}

/* Student name + phone */
.rest-name {
  font-weight: 600;
  color: var(--text);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rest-phone {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Bucket pill — same shape as the filter chips but smaller */
.rest-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.rest-pill::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.rest-pill[data-bucket="past"]     { background: var(--danger-soft); color: var(--danger); }
.rest-pill[data-bucket="current"]  { background: var(--warning-soft); color: var(--warning); }
.rest-pill[data-bucket="upcoming"] { background: rgba(16, 185, 129, 0.10); color: #047857; }
[data-theme="dark"] .rest-pill[data-bucket="upcoming"] { background: rgba(110, 231, 183, 0.12); color: #6ee7b7; }

/* Program cell */
.rest-program-main { font-size: 13px; color: var(--text); font-weight: 500; }
.rest-program-hours {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Amount stack — 3 lines, owed in red */
.rest-amount-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.rest-amount-paid {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}
.rest-amount-paid .rest-amount-label,
.rest-amount-expected .rest-amount-label {
  display: inline-block;
  min-width: 52px;
  font-weight: 400;
  color: var(--text-tertiary);
}
.rest-amount-expected {
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.rest-amount-owed {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
}
.rest-amount-owed .rest-amount-unit {
  font-weight: 500;
  font-size: 10.5px;
  margin-left: 3px;
  opacity: 0.7;
}
[data-theme="dark"] .rest-amount-owed { color: #fca5a5; }

/* First session + program-end */
.rest-date-main {
  font-size: 12.5px;
  color: var(--text);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.rest-date-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Days left / overdue */
.rest-days-left   { font-size: 12.5px; color: var(--text); font-feature-settings: 'tnum' 1, 'lnum' 1; }
.rest-days-overdue {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--danger);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.rest-days-empty { color: var(--text-tertiary); }
[data-theme="dark"] .rest-days-overdue { color: #fca5a5; }

/* Status — paid_status tag + student_status subtitle */
.rest-status { display: flex; flex-direction: column; gap: 2px; }
.rest-status-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-sunken);
  color: var(--text);
  border: 1px solid var(--border-subtle);
}
.rest-status-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Action buttons — visible on hover */
.rest-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 140ms;
}
.rest-table .tickets-row:hover .rest-actions { opacity: 1; }
.rest-table .tickets-row:focus-within .rest-actions { opacity: 1; }

/* Row-as-link affordance — match Tickets behaviour: hover tint + cursor */
.rest-row-clickable:hover { background: var(--row-hover, rgba(0,0,0,0.03)); }
.rest-name-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.rest-name-link:hover { color: var(--accent-strong, #b45309); text-decoration: underline; }
.rest-action-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.rest-action-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.rest-action-btn [data-lucide] { width: 13px; height: 13px; }
/* Danger variant — kicks the student out of their WA class group.
   Red on hover so an agent knows it's destructive. 2026-05-18. */
.rest-action-btn--danger:hover {
  background: rgba(220, 38, 38, 0.10);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.45);
}
.rest-action-btn--danger.is-done {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.35);
  cursor: default;
}
.rest-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Column visibility — hide via data attributes on the view */
#restView[data-hide-bucket]  .rest-cell-bucket  { display: none; }
#restView[data-hide-program] .rest-cell-program { display: none; }
#restView[data-hide-amount]  .rest-cell-amount  { display: none; }
#restView[data-hide-first]   .rest-cell-first   { display: none; }
#restView[data-hide-days]    .rest-cell-days    { display: none; }
#restView[data-hide-status]  .rest-cell-status  { display: none; }
#restView[data-hide-last]    .rest-cell-last    { display: none; }
#restView[data-hide-actions] .rest-cell-actions { display: none; }

/* ─── Settings drawer ────────────────────────────────────────
   Slides in from the right edge. Backdrop scrim dims the page. */
.rest-settings {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 92vw;
  z-index: 60;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px rgba(0,0,0,0.10), -4px 0 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
}
.rest-settings:not(.hidden) { transform: translateX(0); }
.rest-settings.hidden { pointer-events: none; }
.rest-settings-scrim {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(2px);
  transition: opacity 200ms;
}
.rest-settings-scrim.hidden { opacity: 0; pointer-events: none; }

.rest-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.rest-settings-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.rest-settings-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.rest-settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px 20px;
}
.rest-settings-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.rest-settings-section:last-of-type { border-bottom: 0; }
.rest-settings-h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.rest-settings-help {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.rest-settings-help em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

/* Slider */
.rest-slider-row { display: flex; align-items: center; gap: 12px; }
.rest-slider-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--slider-fill, 33%), var(--border) var(--slider-fill, 33%));
  outline: none;
  cursor: pointer;
}
.rest-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  cursor: grab;
}
.rest-slider-row input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15); cursor: grab;
}
.rest-slider-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  min-width: 64px;
  text-align: right;
  font-feature-settings: 'tnum' 1;
}

/* Input grid */
.rest-input-grid { display: grid; gap: 10px; }
.rest-field { display: flex; flex-direction: column; gap: 5px; }
.rest-field-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
}
.rest-field-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 120ms, box-shadow 120ms;
}
.rest-field-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.rest-field-input-wrap input {
  flex: 1; border: 0; outline: 0; background: transparent;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--text);
  font-feature-settings: 'tnum' 1;
}
.rest-field-suffix {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Column toggles */
.rest-toggle-list { display: flex; flex-direction: column; gap: 6px; }
.rest-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.rest-toggle-row:hover { background: var(--surface-hover); border-color: var(--border); }
.rest-toggle-row-label {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}
.rest-toggle-switch {
  position: relative;
  width: 32px; height: 18px;
  border-radius: 999px;
  background: var(--border);
  transition: background 140ms;
  flex-shrink: 0;
}
.rest-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.rest-toggle-row.is-on .rest-toggle-switch { background: var(--accent); }
.rest-toggle-row.is-on .rest-toggle-switch::after { transform: translateX(14px); }

/* Footer */
.rest-settings-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
}
.rest-settings-reset {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.rest-settings-foot-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

.tickets-table-wrap {
  flex: 1; overflow: auto; padding: 0 20px 12px;
}

/* ===== In-Process Groups view (Management → Groups) =====
   2026-07-10: the read-only .groups-table/.groups-row rules were replaced by
   the .gip-* CRM table (creation workspace) at the END of this file. The pills
   + type/level chip tints below are still used by the new table.
   .groups-row survives ONLY as the hover affordance for the Substitutes table
   (_subsRender), which reuses the class with its own inline grid styles. */
.groups-row:not(.groups-head):hover { background: var(--surface-hover); }
.groups-student-pill {
  display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.groups-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.groups-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* Per-type chip count tints — mirror the colour-coded Rest/Closing chips so the
   class-type filter reads at a glance (active state already adds the base accent). */
.groups-chip-individual .rest-chip-count { background: var(--accent-soft); color: var(--accent); }
.groups-chip-kids .rest-chip-count { background: color-mix(in oklch, var(--warning, #b45309) 14%, transparent); color: var(--warning, #b45309); }
.groups-chip-adults .rest-chip-count { background: color-mix(in oklch, var(--success, #047857) 14%, transparent); color: var(--success, #047857); }
/* Level sub-filter row — sits right under the class-type chips, tighter to read
   as a second dimension of the same filter. The leading "Level" label tells the
   two unlabeled "All" chips apart. */
.groups-level-chips { padding-top: 0; }
.groups-level-label {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-tertiary, #9ca3af);
  padding-right: 2px;
}
.groups-level-chip .rest-chip-count { background: var(--surface-sunken); color: var(--text-secondary); }
.groups-level-chip.active .rest-chip-count { background: rgba(255, 255, 255, 0.25); color: inherit; }
.tickets-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Was `overflow: hidden` to clip the rounded corners — but that
     also blocked position: sticky on the header. We need the header
     row to stick to the top of the .tickets-table-wrap scroll
     container as the agent scrolls through the queue. Use
     `isolation: isolate` to keep the stacking context separate
     instead, and let the inner radius come from the first-row hack
     below. */
  overflow: visible;
  isolation: isolate;
  /* min-width: min-content forces the table to be AT LEAST as wide as
     the sum of its row's grid track minimums (≈1558 px). Default block
     behaviour still lets the table grow with .tickets-table-wrap on
     wide viewports (fr units distribute the surplus), but the table
     can never be NARROWER than its own rows. That was Ayoub's "decalage
     kamel" — rows were 1558 px while the table was clipping at 1240 px,
     so the last 3 cells protruded past the rounded border. */
  min-width: min-content;
}
/* Round the last row's bottom corners so the zebra fill respects the
   table's outer radius. .tickets-row-head already rounds the top via
   border-*-top-radius rules; without this the bottom edges showed a
   square zebra fill bleeding past the rounded border. */
.tickets-table .tickets-row:last-child {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.tickets-row {
  display: grid;
  /* 14 columns — leading checkbox + 13 data columns. Description column
     added 2026-05-18 between Student feedback and Agent note; Teacher column
     added 2026-06-14 between Assigned and Companies (from the class company's
     lougha_teachers — see the Teachers sub-view tab). */
  grid-template-columns:
    36px                   /* Select checkbox */
    minmax(160px, 1.2fr)   /* Ticket name */
    120px                  /* Status */
    100px                  /* Priority */
    150px                  /* Feedback Status */
    minmax(130px, 1fr)     /* Contact */
    130px                  /* Assigned */
    minmax(120px, 1fr)     /* Teacher */
    minmax(120px, 1fr)     /* Companies */
    minmax(220px, 2fr)     /* Student feedback */
    minmax(220px, 2fr)     /* Description — same width as feedback */
    minmax(160px, 1.5fr)   /* Agent note — smaller min, same fr-growth */
    110px                  /* Last contact */
    100px;                 /* Created */
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 80ms ease;
}
.tickets-row.is-selected { background: var(--accent-soft) !important; }
.tickets-row.is-selected:hover { background: var(--accent-soft) !important; box-shadow: inset 3px 0 0 var(--accent); }
.tickets-cell-select { display: flex; align-items: center; justify-content: center; }
.tickets-cell-select input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent);
}

/* Floating bulk-action bar — appears when ≥1 row checked. High-contrast
   command surface that flips polarity with the theme: dark slate in
   light mode, warm white in dark mode. The local --tbb-tint variable
   carries the highlight colour used for the inner buttons / separators
   so they read correctly against the inverse surface. */
/* Bulk-action bar now lives at the TOP of the tickets view, right below
   the filter chips (was sticky:bottom — moved per Ayoub's request so
   the bar lives next to the info bar instead of covering data rows).
   Slides down from the chips when ≥1 row is checked. */
.tickets-bulk-bar {
  margin: 0 20px 12px;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
  background: var(--text); color: var(--text-inverse);
  --tbb-tint: rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  z-index: 3;
  animation: tbb-slide-down 140ms ease;
}
[data-theme="dark"] .tickets-bulk-bar { --tbb-tint: rgba(0, 0, 0, 0.10); }
.tickets-bulk-bar.hidden { display: none; }
@keyframes tbb-slide-down { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.tickets-bulk-bar .tbb-count { font-weight: 700; letter-spacing: 0.3px; }
.tickets-bulk-bar .tbb-link { background: transparent; border: none; color: inherit; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; opacity: 0.9; padding: 0 2px; }
.tickets-bulk-bar .tbb-link:hover { opacity: 1; }
.tickets-bulk-bar .tbb-link.hidden { display: none; }
.tickets-bulk-bar .tbb-sep { width: 1px; height: 18px; background: var(--tbb-tint); }
.tickets-bulk-bar .tbb-btn {
  background: var(--tbb-tint); color: inherit;
  border: 1px solid var(--tbb-tint);
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--motion-fast) var(--ease);
}
.tickets-bulk-bar .tbb-btn:hover { background: var(--tbb-tint); filter: brightness(1.4); }
.tickets-bulk-bar .tbb-cancel { margin-left: auto; opacity: 0.85; }
.tickets-bulk-bar .tbb-cancel:hover { opacity: 1; }
.tickets-row:last-child { border-bottom: 0; }
.tickets-row-head {
  background: var(--surface-sunken);
  /* Header sticks to the top of the scrolling container so column
     labels stay visible while the agent scrolls through dozens of
     tickets. Slight shadow gives it a soft "floating" feel once the
     rows start scrolling underneath. */
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--border);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  font-size: 11px; font-weight: 600;
  color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 10px 16px;
}
.tickets-row:not(.tickets-row-head):hover { background: var(--surface-hover); }
.tickets-row:nth-child(even):not(.tickets-row-head) { background: var(--surface-sunken); }
.tickets-row:nth-child(even):not(.tickets-row-head):hover { background: var(--surface-hover); }

/* Sortable column header — click to sort asc/desc. Arrow renders inline
   only on the active column; inactive headers stay clean and tighter. */
.tickets-cell-head {
  color: var(--text-tertiary); white-space: nowrap;
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color 100ms ease;
}
.tickets-cell-head:hover { color: var(--text); }
.tickets-cell-head .sort-arrow {
  display: inline-flex; opacity: 0; transition: opacity 80ms ease;
  font-size: 10px; color: var(--accent);
}
.tickets-cell-head.sort-active .sort-arrow { opacity: 1; }
.tickets-cell-head.sort-active { color: var(--text); }

.tickets-cell {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.tickets-cell-head { color: var(--text-tertiary); white-space: nowrap; }
.tickets-cell-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.tickets-cell-date { color: var(--text-tertiary); font-size: 12px; }
.tickets-cell-text { cursor: pointer; }
/* Empty free-text cells (Agent note / Student feedback with no value) —
   mute the `—` placeholder so the eye doesn't read it as an intentional
   gap. Same trick as muted dates / counts elsewhere in the table. */
.tickets-cell-empty .tickets-cell-text-preview { color: var(--text-muted); opacity: 0.45; }
/* Dark mode: lift the muted opacity slightly so the placeholder stays
   above the AA contrast floor on dark surfaces. */
[data-theme="dark"] .tickets-cell-empty .tickets-cell-text-preview { color: var(--text-tertiary); opacity: 0.7; }
.tickets-cell-text:hover { background: var(--accent-soft); border-radius: var(--radius-xs); }
.tickets-cell-text-preview { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.tickets-open-link {
  display: inline-flex; align-items: center; color: var(--text-muted);
  text-decoration: none; opacity: 0; transition: opacity 0.12s, color 0.12s;
}
.tickets-open-link [data-lucide] { width: 12px; height: 12px; }
.tickets-row:hover .tickets-open-link { opacity: 1; }
.tickets-open-link:hover { color: var(--accent); }

.tickets-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid transparent;
  font-size: 12px; font-weight: 600; color: var(--text-tertiary);
  cursor: pointer; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: inherit;
  transition: filter var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.tickets-pill:hover { filter: brightness(0.96); }
[data-theme="dark"] .tickets-pill:hover { filter: brightness(1.15); }
.tickets-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Sheet-style cell-active focus ring — matches the Teachers Sheet feel
   when an inline-editable cell is in focus. Applied via JS when an
   inline dropdown opens against a pill cell. */
.tickets-cell.is-focus,
.tickets-pill.is-focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.tickets-pill-new       { background: var(--info-soft);    color: var(--info); }
.tickets-pill-attention { background: var(--danger-soft);  color: var(--danger); }
.tickets-pill-waiting   { background: var(--warning-soft); color: var(--warning); }
.tickets-pill-closed    { background: var(--surface-sunken); border-color: var(--border); color: var(--text-tertiary); }
.tickets-pill-low       { background: var(--success-soft); color: var(--success); }
.tickets-pill-medium    { background: var(--warning-soft); color: var(--warning); }
.tickets-pill-high      { background: var(--danger-soft);  color: var(--danger); }
.tickets-pill-urgent    { background: var(--danger-soft);  color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.tickets-pill-neutral   { background: var(--surface-sunken); border-color: var(--border); color: var(--text-tertiary); }

.tickets-pill-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted);
}
.tickets-pill-dot.tickets-pill-new       { background: var(--info); }
.tickets-pill-dot.tickets-pill-attention { background: var(--danger); }
.tickets-pill-dot.tickets-pill-waiting   { background: var(--warning); }
.tickets-pill-dot.tickets-pill-closed    { background: var(--text-muted); }
.tickets-pill-dot.tickets-pill-low       { background: var(--success); }
.tickets-pill-dot.tickets-pill-medium    { background: var(--warning); }
.tickets-pill-dot.tickets-pill-high      { background: var(--danger); }
.tickets-pill-dot.tickets-pill-urgent    { background: var(--danger); }

/* Inline dropdown menu — anchored at the pill's bottom by the open
   helper. Mirrors the topbar .view-tab-menu look (PR #121) so the
   visual rhythm of dropdowns across the app stays consistent. */
.tickets-inline-menu {
  position: fixed; z-index: 1100;
  min-width: 200px; max-height: 280px; overflow-y: auto;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.tickets-inline-menu-item {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: transparent; border: 0; cursor: pointer;
  font-size: 13px; color: var(--text-secondary);
  text-align: left;
  font-family: inherit;
}
.tickets-inline-menu-item:hover { background: var(--surface-hover); color: var(--text); }
.tickets-inline-menu-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tickets-inline-menu-item.disabled { color: var(--text-muted); cursor: not-allowed; font-style: italic; }
.tickets-inline-menu-item.disabled:hover { background: transparent; }

.tickets-empty {
  padding: 32px 20px; text-align: center;
  color: var(--gray-500); font-size: 13px;
}
.tickets-pager {
  padding: 12px 20px 20px;
  display: flex; justify-content: center;
}

/* Contact-cell link inside the Tickets table — click jumps the agent
   straight into the 1-1 inbox conversation with that student (handled
   in buildContactCell via openChatForPhoneNumber). */
.tickets-cell-contact .tickets-contact-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.tickets-cell-contact .tickets-contact-link:hover {
  text-decoration: underline;
}

/* Companies cell — one or more clickable chips per ticket. Each chip
   navigates to the corresponding WhatsApp group inbox via the
   tracking-table match server-side. Disabled (gray) when no matching
   WA group exists for that HubSpot company. */
.tickets-cell-companies {
  display: flex; flex-wrap: wrap; gap: 4px;
  white-space: normal;
}
.tickets-company-link {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid transparent;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tickets-company-link:hover { background: var(--accent-soft); filter: brightness(0.96); }
[data-theme="dark"] .tickets-company-link:hover { filter: brightness(1.15); }
.tickets-company-link-disabled {
  background: var(--surface-sunken); color: var(--text-tertiary);
  border-color: var(--border); cursor: default;
}
.tickets-company-link-disabled:hover { background: var(--surface-sunken); filter: none; }

/* Minimal inline spinner for the Tickets loading state. Pure CSS,
   no SVG dependency. Spins next to "Loading tickets…" so the user
   sees motion while the HubSpot round-trip resolves. */
.tickets-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(0,0,0,0.12);
  border-top-color: #3b82f6;
  border-radius: 50%;
  vertical-align: -2px;
  animation: tickets-spin 0.8s linear infinite;
}
@keyframes tickets-spin { to { transform: rotate(360deg); } }

/* ===== Tickets — Feedback Status multi-select dropdown =====
   Lives below the status chip row. Trigger button shows a label +
   count badge; click opens a panel with a searchable checkbox list
   of the 27 BOT_TICKET_CATEGORIES values. Each tick reloads the
   list with `categories=` in the query string. */
.tickets-category-filter {
  position: relative;
  padding: 0 20px 12px;
  display: flex;
  align-items: center;
}
.tickets-category-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tickets-category-trigger:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.tickets-category-trigger [data-lucide] { width: 14px; height: 14px; stroke-width: 2; }
.tickets-category-trigger .tickets-category-chevron { transition: transform 0.15s; }
.tickets-category-filter.open .tickets-category-trigger {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.tickets-category-filter.open .tickets-category-chevron { transform: rotate(180deg); }

.tickets-category-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-fg);
  font-size: 10px; font-weight: 700; line-height: 1;
}
.tickets-category-count.hidden { display: none; }

.tickets-category-menu {
  position: absolute;
  top: calc(100% - 8px);
  left: 20px;
  z-index: 30;
  min-width: 260px; max-width: 320px;
  max-height: 380px;
  display: flex; flex-direction: column;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.tickets-category-menu.hidden { display: none; }
.tickets-category-menu-head {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
}
.tickets-category-menu-head .input {
  flex: 1; padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--gray-200); border-radius: 8px;
}
.tickets-category-menu-head .btn { padding: 5px 10px; font-size: 12px; }

.tickets-category-list {
  flex: 1; overflow-y: auto;
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.tickets-category-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  font-size: 13px; color: var(--gray-800);
  cursor: pointer;
  user-select: none;
}
.tickets-category-item:hover { background: var(--gray-100); }
.tickets-category-item input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: #2563eb;
}
.tickets-category-empty {
  padding: 20px; text-align: center;
  font-size: 12px; color: var(--gray-500);
}

/* ─── My workspace — per-agent personal to-do list ──────────────────
   Floating overlay anchored to the right edge. Slides in over the
   conversation pane (doesn't reflow it). Same surface tokens as the
   conv-details panel so it feels native. */
/* ─── My workspace ─── "Cozy productivity notebook" — paper-feel cards
   in a warm-cream rail with amber accents. Section grouping (Today /
   This week / Later / Done), inline edit, pin, optional note. */

:root {
  /* Workspace palette — warm amber-cream with red/sage accents.
     Centralised so dark mode + section variants override one place. */
  --ws-amber:        var(--warning);
  --ws-amber-soft:   var(--warning-soft);
  --ws-amber-deep:   var(--warning);
  --ws-canvas:       oklch(0.98 0.012 75);
  --ws-card:         #ffffff;
  --ws-card-border:  oklch(0.92 0.004 75);
  --ws-text:         oklch(0.25 0.01 75);
  --ws-text-muted:   oklch(0.50 0.01 75);
  --ws-text-dim:     oklch(0.65 0.005 75);
  --ws-divider:      oklch(0.93 0.005 75);
  --ws-pin:          #dc2626;
  --ws-today:        #f59e0b;
  --ws-week:         #65a30d;
  --ws-later:        #7c3aed;
  --ws-done:         #94a3b8;
}
[data-theme="dark"] {
  --ws-canvas:       oklch(0.18 0.008 250);
  --ws-card:         oklch(0.22 0.008 250);
  --ws-card-border:  oklch(0.28 0.008 250);
  --ws-text:         oklch(0.92 0.005 75);
  --ws-text-muted:   oklch(0.65 0.01 75);
  --ws-text-dim:     oklch(0.50 0.005 75);
  --ws-divider:      oklch(0.28 0.005 250);
}

.workspace-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 100vw;
  background: var(--ws-canvas);
  border-left: 1px solid var(--ws-divider);
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column;
  z-index: 100; color: var(--ws-text);
  transform: translateX(0);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.workspace-panel.hidden {
  transform: translateX(100%);
  display: flex !important;
  pointer-events: none;
}

/* ─── Header ───────────────────────────────────────────────────── */
.workspace-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 14px;
  background: var(--ws-canvas);
  border-bottom: 1px solid var(--ws-divider);
  flex-shrink: 0;
}
.workspace-head-title-wrap {
  flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0;
}
.workspace-head-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  color: var(--ws-amber);
  filter: drop-shadow(0 1px 0 rgba(245, 158, 11, 0.18));
}
.workspace-head-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.workspace-head-title {
  margin: 0; font-size: 17px; font-weight: 700;
  letter-spacing: -0.015em; color: var(--ws-text);
}
.workspace-head-sub {
  margin: 0; font-size: 11.5px;
  color: var(--ws-text-dim); font-weight: 500;
  letter-spacing: 0.02em;
}
.workspace-close-btn {
  width: 32px; height: 32px; border-radius: 8px;
  color: var(--ws-text-muted);
}
.workspace-close-btn:hover { background: var(--ws-divider); color: var(--ws-text); }
.workspace-close-btn [data-lucide] { width: 16px; height: 16px; }

/* ─── Add task input ──────────────────────────────────────────── */
.workspace-add {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 14px;
  flex-shrink: 0;
  background: var(--ws-canvas);
}
/* + glyph is now an actual submit button — keyboard- and mouse-
   reachable, focus-visible, and visually distinct on hover so the
   agent knows it's clickable (not just decoration). */
.workspace-add-glyph {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--ws-text-muted);
  cursor: pointer; padding: 0;
  transition: background 140ms ease, color 140ms ease;
}
.workspace-add-glyph:hover {
  background: var(--ws-amber-soft);
  color: var(--ws-amber-deep);
}
.workspace-add-glyph:focus-visible {
  outline: 2px solid var(--ws-amber);
  outline-offset: 1px;
}
.workspace-add-glyph:active { transform: scale(0.94); }
.workspace-add-glyph [data-lucide] { width: 16px; height: 16px; }
/* ⏎ kbd is a passive hint — make sure it can't accidentally steal
   pointer events when the agent clicks around the input. */
.workspace-add-kbd { pointer-events: none; }
.workspace-add-input {
  flex: 1; min-width: 0;
  padding: 10px 0; border: 0;
  background: transparent; color: var(--ws-text);
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  border-bottom: 1.5px solid var(--ws-divider);
  transition: border-color 160ms ease;
}
.workspace-add-input::placeholder { color: var(--ws-text-dim); font-weight: 400; }
.workspace-add-input:focus {
  outline: none; border-bottom-color: var(--ws-amber);
}
.workspace-add-input:focus + .workspace-add-kbd { opacity: 1; transform: translateY(0); }
.workspace-add-kbd {
  font-family: inherit; font-size: 10px; font-weight: 600;
  padding: 3px 7px; border-radius: 5px;
  background: var(--ws-amber-soft); color: var(--ws-amber-deep);
  border: 1px solid rgba(245, 158, 11, 0.20);
  opacity: 0; transform: translateY(2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* ─── Assign-to chip + menu ───────────────────────────────────
   Small affordance below the add input that lets the agent pick a
   teammate. Defaults to 'Me' so the row stays out of the way for
   solo tasks. */
.workspace-assign-row {
  padding: 0 18px 10px;
  display: flex; align-items: center; flex-shrink: 0;
  position: relative;
}
.workspace-assign-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; border-radius: 999px;
  background: transparent; border: 1px dashed var(--ws-card-border);
  color: var(--ws-text-muted);
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.workspace-assign-chip:hover {
  background: var(--ws-amber-soft);
  border-color: rgba(245, 158, 11, 0.30);
  color: var(--ws-amber-deep);
}
.workspace-assign-chip.is-set {
  background: var(--ws-amber-soft);
  border-style: solid; border-color: rgba(245, 158, 11, 0.35);
  color: var(--ws-amber-deep);
}
.workspace-assign-icon { width: 13px; height: 13px; }
.workspace-assign-chevron { width: 12px; height: 12px; opacity: 0.6; }
.workspace-assign-menu {
  position: absolute; left: 18px; top: calc(100% - 4px); z-index: 50;
  min-width: 200px; max-height: 240px; overflow-y: auto;
  background: var(--ws-card); border: 1px solid var(--ws-card-border);
  border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
  display: flex; flex-direction: column; gap: 2px;
}
.workspace-assign-menu.hidden { display: none; }
.workspace-assign-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px;
  background: transparent; border: 0; color: var(--ws-text);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
}
.workspace-assign-option:hover { background: var(--ws-amber-soft); color: var(--ws-amber-deep); }
.workspace-assign-option.is-active { background: var(--ws-divider); color: var(--ws-text); }
.workspace-assign-option-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ws-divider); color: var(--ws-text-muted);
  font-size: 10.5px; font-weight: 700;
}

/* "from <agent>" badge on tasks delegated to me by someone else. */
.workspace-task-from {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  font-size: 10.5px; font-weight: 600;
  padding: 1px 7px 1px 5px; border-radius: 999px;
  background: rgba(101, 163, 13, 0.10);
  color: #3f6212;
  letter-spacing: 0.03em;
}
.workspace-task-from [data-lucide] { width: 11px; height: 11px; }
/* "to <agent>" badge on tasks I delegated to someone — appears in
   the Delegated-by-you section so the agent sees who's holding the
   work. Sky-blue to distinguish from the lime 'from' direction. */
.workspace-task-to {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  font-size: 10.5px; font-weight: 600;
  padding: 1px 7px 1px 5px; border-radius: 999px;
  background: rgba(14, 165, 233, 0.10);
  color: #0369a1;
  letter-spacing: 0.03em;
}
.workspace-task-to [data-lucide] { width: 11px; height: 11px; }

/* ─── Due-date picker chip (add-form) ─────────────────────────────────
   Sits next to the assign chip on both forms (floating panel +
   full-page MWP). Reuses the dashed-when-empty / filled-when-set
   pattern of the assign chip so they read as a pair. The native
   <input type="date"> is positioned absolutely on top of the chip but
   visually hidden — clicking the chip programmatically opens it via
   showPicker(). */
.workspace-due-wrap {
  position: relative; display: inline-flex; align-items: center;
  margin-left: 8px;
}
.workspace-due-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; border-radius: 999px;
  background: transparent; border: 1px dashed var(--ws-card-border);
  color: var(--ws-text-muted);
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.workspace-due-chip:hover {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.30);
  color: #0369a1;
}
.workspace-due-chip.is-set {
  background: rgba(14, 165, 233, 0.10);
  border-style: solid; border-color: rgba(14, 165, 233, 0.35);
  color: #0369a1;
}
.workspace-due-icon { width: 13px; height: 13px; }
.workspace-due-clear {
  width: 12px; height: 12px; opacity: 0.7;
  margin-left: 2px;
}
.workspace-due-clear:hover { opacity: 1; }
.workspace-due-clear.hidden { display: none; }
/* The picker input itself is overlaid on the chip but visually muted —
   the chip is the visible UI. We keep the input clickable (1px opacity)
   so showPicker() fallback (focus + click) still triggers the OS UI on
   browsers that don't expose showPicker. */
.workspace-due-input {
  position: absolute; inset: 0; opacity: 0.001;
  width: 100%; height: 100%; padding: 0; margin: 0; border: 0;
  pointer-events: none;
}

/* Per-task due-date badge — appears inline next to the day-priority
   pill on every open task. Same .mwp-badge baseline as day-priority,
   different status-aware colour palette:
     overdue → red (action needed yesterday)
     today   → orange (matches "today" day pill so the eye groups them)
     tomorrow→ amber soft
     future  → blue (calm, not urgent)
     empty   → muted ghost (the "+date" affordance)
   Two class names share these styles: `.workspace-task-due` lives on
   floating-panel rows (buildWorkspaceTaskNode), `.mwp-task-due` lives
   on the full-page MWP card (buildMyWorkspaceCard). Same look + behaviour
   on both surfaces. */
.workspace-task-due, .mwp-task-due {
  position: relative;
  cursor: pointer;
  user-select: none;
  margin-left: 6px;
  transition: filter 140ms ease, transform 140ms ease;
}
.workspace-task-due:hover, .mwp-task-due:hover { filter: brightness(1.05); transform: translateY(-1px); }
.workspace-task-due [data-lucide], .mwp-task-due [data-lucide] { width: 11px; height: 11px; }
.workspace-task-due.is-overdue, .mwp-task-due.is-overdue  { background: rgba(220, 38, 38, 0.12); color: #991b1b; border: 1px solid rgba(220, 38, 38, 0.25); }
.workspace-task-due.is-today, .mwp-task-due.is-today      { background: rgba(245, 158, 11, 0.14); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.30); }
.workspace-task-due.is-tomorrow, .mwp-task-due.is-tomorrow { background: rgba(234, 179, 8, 0.12);  color: #854d0e; border: 1px solid rgba(234, 179, 8, 0.25); }
.workspace-task-due.is-future, .mwp-task-due.is-future    { background: rgba(14, 165, 233, 0.10); color: #0369a1; border: 1px solid rgba(14, 165, 233, 0.20); }
.workspace-task-due.is-empty, .mwp-task-due.is-empty {
  background: transparent;
  color: var(--ws-text-muted);
  border: 1px dashed var(--ws-card-border);
  opacity: 0.55;
}
.workspace-task-due.is-empty:hover, .mwp-task-due.is-empty:hover { opacity: 1; }
.workspace-task.is-done .workspace-task-due,
.mwp-task.is-done .mwp-task-due { opacity: 0.45; }
.workspace-task-due-input, .mwp-task-due-input {
  position: absolute; inset: 0; opacity: 0.001;
  width: 100%; height: 100%; padding: 0; margin: 0; border: 0;
  pointer-events: none;
}

/* Drop-target highlight when dragging a card over a status column.
   Lights the column with a soft blue ring + tinted background so the
   agent knows where the card will land. Same look on both surfaces
   (MWP page board/list + floating panel). */
.mwp-section.drag-target,
.workspace-section.drag-target {
  background: rgba(14, 165, 233, 0.06);
  outline: 2px dashed rgba(14, 165, 233, 0.45);
  outline-offset: -2px;
  border-radius: 12px;
  transition: background 100ms ease, outline-color 100ms ease;
}
.mwp-task.dragging,
.workspace-task.dragging {
  opacity: 0.55;
  transform: scale(0.985);
}
.mwp-task[draggable="true"] { cursor: grab; }
.mwp-task[draggable="true"]:active { cursor: grabbing; }

/* ─── List + sections ─────────────────────────────────────────── */
.workspace-list {
  flex: 1; overflow-y: auto;
  padding: 4px 14px 22px;
  display: flex; flex-direction: column; gap: 18px;
  background: var(--ws-canvas);
}
.workspace-section { display: flex; flex-direction: column; gap: 8px; }
.workspace-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px 4px;
  cursor: pointer; user-select: none;
}
.workspace-section-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.workspace-section[data-section="today"] .workspace-section-dot { background: var(--ws-today); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
.workspace-section[data-section="week"]  .workspace-section-dot { background: var(--ws-week);  box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.15); }
.workspace-section[data-section="later"] .workspace-section-dot { background: var(--ws-later); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }
.workspace-section[data-section="done"]  .workspace-section-dot { background: var(--ws-done);  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15); }
.workspace-section[data-section="delegated"] .workspace-section-dot { background: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); }
/* Status-axis lane colours (audit M6-code) — rail now groups by status, mirrors MWP palette. */
.workspace-section[data-section="todo"]        .workspace-section-dot { background: #64748b; box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.15); }
.workspace-section[data-section="in_progress"] .workspace-section-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
.workspace-section[data-section="review"]      .workspace-section-dot { background: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.workspace-section--delegated .workspace-section-name { color: #0369a1; }
[data-theme="dark"] .workspace-section--delegated .workspace-section-name { color: #7dd3fc; }
.workspace-section-name {
  flex: 1; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ws-text-muted);
}
.workspace-section-count {
  font-size: 11px; font-weight: 600;
  color: var(--ws-text-dim);
  padding: 2px 7px; border-radius: 10px;
  background: var(--ws-card-border);
  min-width: 22px; text-align: center;
}
.workspace-section-chevron {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--ws-text-dim);
  transition: transform 180ms ease;
}
.workspace-section.collapsed .workspace-section-chevron { transform: rotate(-90deg); }
.workspace-section-body { display: flex; flex-direction: column; gap: 6px; }
.workspace-section.collapsed .workspace-section-body { display: none; }

/* ─── Task card ──────────────────────────────────────────────── */
.workspace-task {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--ws-card);
  border: 1px solid var(--ws-card-border);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03);
  user-select: none;
  transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
  position: relative;
  animation: wsTaskEnter 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes wsTaskEnter {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.workspace-task:hover {
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.06);
  border-color: oklch(0.88 0.008 75);
}
.workspace-task.dragging { opacity: 0.4; cursor: grabbing; }
.workspace-task.drag-over { border-color: var(--ws-amber); border-style: dashed; }
.workspace-task.is-pinned { border-color: rgba(245, 158, 11, 0.35); background: linear-gradient(180deg, #fffaf0 0%, #fff 70%); }
[data-theme="dark"] .workspace-task.is-pinned { background: linear-gradient(180deg, oklch(0.26 0.018 75) 0%, var(--ws-card) 70%); border-color: rgba(245, 158, 11, 0.30); }

/* ─── Checkbox — animated tick ─────────────────────────────── */
.workspace-task-check {
  width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0;
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--ws-text-dim); border-radius: 6px;
  cursor: pointer; position: relative;
  background: transparent;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.workspace-task-check:hover { border-color: var(--ws-amber); }
.workspace-task-check:active { transform: scale(0.92); }
.workspace-task-check:checked {
  background: var(--ws-amber); border-color: var(--ws-amber);
}
.workspace-task-check:checked::after {
  content: '';
  position: absolute; left: 4px; top: 0;
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ─── Task body (text + note + chips) ─────────────────────── */
.workspace-task-body { flex: 1; min-width: 0; }
.workspace-task-text {
  font-size: 14px; line-height: 1.4;
  color: var(--ws-text); font-weight: 500;
  /* Same fix as .mwp-task-title — overflow-wrap is the kanban-safe
     property; word-break: break-word fragmented every long-ish line
     when the column was narrow. */
  overflow-wrap: break-word; word-break: normal;
  cursor: text;
  padding: 1px 0;
}
.workspace-task-text:empty::before { content: 'Untitled'; color: var(--ws-text-dim); }
.workspace-task.is-done .workspace-task-text {
  color: var(--ws-text-dim); text-decoration: line-through;
  text-decoration-color: rgba(148, 163, 184, 0.6);
}
.workspace-task-text[contenteditable="true"] {
  outline: none;
  background: var(--ws-amber-soft);
  margin: -2px -4px; padding: 1px 4px;
  border-radius: 4px;
}
.workspace-task-note {
  margin-top: 4px; font-size: 12.5px; line-height: 1.45;
  color: var(--ws-text-muted);
  padding: 4px 0 0; border-top: 1px dashed var(--ws-divider);
  cursor: text;
}
.workspace-task-note:empty { display: none; }
.workspace-task-note[contenteditable="true"] {
  outline: none;
  background: var(--ws-amber-soft);
  margin: 4px -4px 0; padding: 4px 4px 4px;
  border-top: 0; border-radius: 4px;
}
.workspace-task-note[contenteditable="true"]:empty::before {
  content: 'Add a note…'; color: var(--ws-text-dim);
}

/* ─── Action chips (pin / note / delete / drag) ────────────── */
.workspace-task-actions {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  margin-top: -2px; flex-shrink: 0;
  opacity: 0; transition: opacity 140ms ease;
}
.workspace-task:hover .workspace-task-actions,
.workspace-task:focus-within .workspace-task-actions { opacity: 1; }
.workspace-task.is-pinned .workspace-task-actions { opacity: 1; }
.workspace-task-act {
  width: 26px; height: 26px;
  background: transparent; border: 0; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ws-text-dim);
  transition: background 120ms ease, color 120ms ease;
}
.workspace-task-act [data-lucide] { width: 13px; height: 13px; }
.workspace-task-act:hover { background: var(--ws-divider); color: var(--ws-text); }
.workspace-task-act.is-pinned-act {
  color: var(--ws-amber); opacity: 1;
}
.workspace-task-act.is-pinned-act:hover { background: rgba(245, 158, 11, 0.12); }
.workspace-task-act.is-danger:hover { background: rgba(220, 38, 38, 0.08); color: var(--ws-pin); }

/* Drag handle — only visible on hover, sits to the left of the
   checkbox. Click+drag reorders inside the section. */
.workspace-task-drag {
  width: 18px; align-self: stretch; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ws-text-dim); cursor: grab;
  opacity: 0; margin-left: -8px; margin-right: -2px;
  transition: opacity 120ms ease;
}
.workspace-task-drag [data-lucide] { width: 12px; height: 12px; }
.workspace-task:hover .workspace-task-drag { opacity: 0.7; }

/* Section badge (small chip showing which section, used inside the
   task card during drag preview and on done items). */
.workspace-task-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px;
  background: var(--ws-divider); color: var(--ws-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 4px;
}
.workspace-task-tag[data-tag="today"] { background: rgba(245, 158, 11, 0.10); color: var(--ws-amber-deep); }
.workspace-task-tag[data-tag="week"]  { background: rgba(101, 163, 13, 0.10); color: #3f6212; }
.workspace-task-tag[data-tag="later"] { background: rgba(124, 58, 237, 0.10); color: #5b21b6; }

/* ─── Empty state ──────────────────────────────────────────── */
.workspace-empty {
  margin: 32px 8px; padding: 28px 20px;
  text-align: center;
  background: var(--ws-card); border: 1px dashed var(--ws-card-border);
  border-radius: 14px;
}
.workspace-empty-glyph {
  width: 44px; height: 44px; margin: 0 auto 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ws-amber-soft);
  color: var(--ws-amber-deep);
}
.workspace-empty-glyph [data-lucide] { width: 22px; height: 22px; }
.workspace-empty-title {
  margin: 0 0 4px; font-size: 14px; font-weight: 700;
  color: var(--ws-text);
}
.workspace-empty-sub {
  margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--ws-text-muted);
}
.workspace-empty-sub kbd {
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  padding: 1px 5px; border-radius: 4px;
  background: var(--ws-divider); color: var(--ws-text-muted);
  border: 1px solid var(--ws-card-border);
}

/* ─── Topbar workspace toggle — small circular badge ────────── */
.workspace-toggle { position: relative; }
.workspace-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--ws-amber); color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}

/* ════════════════════════════════════════════════════════════════
   My Workspace — full-page personal canvas (Notion-style)
   Shares colour tokens with the floating rail (--ws-amber etc.).
   ──────────────────────────────────────────────────────────────── */
#myWorkspaceView {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(245, 158, 11, 0.08), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(124, 58, 237, 0.06), transparent 55%),
    linear-gradient(180deg, #fffbef 0%, #fdf6e3 100%);
  min-height: calc(100vh - 64px);
  padding: 36px 28px 80px;
  overflow-y: auto;
}
.mwp-shell {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  transition: max-width 240ms ease;
}
/* Board mode needs more horizontal room for the 4-column grid to
   breathe — widen the shell when the content wrapper is in board
   mode by inspecting the descendant class. */
.mwp-shell:has(> .mwp-content.mwp-content--board) { max-width: 1320px; }

/* ─── Hero ───────────────────────────────────────────────────── */
.mwp-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.mwp-hero-left { display: flex; gap: 18px; align-items: center; }
.mwp-hero-glyph {
  width: 56px; height: 56px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  color: #78350f;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.mwp-hero-glyph [data-lucide] { width: 26px; height: 26px; }
.mwp-title {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: #1f2937;
  line-height: 1.1;
}
.mwp-subtitle {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 14px;
}
.mwp-hero-right {
  display: flex; gap: 12px; align-items: center;
}

/* Layout toggle — segmented control sitting to the left of the stat cards */
.mwp-layout-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  padding: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 12px rgba(0, 0, 0, 0.03);
}
.mwp-layout-opt {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent;
  color: #6b7280;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.mwp-layout-opt [data-lucide] { width: 14px; height: 14px; }
.mwp-layout-opt:hover { color: #1f2937; }
.mwp-layout-opt.is-active {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #78350f;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}
.mwp-stat {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 10px 16px;
  display: flex; flex-direction: column;
  align-items: center;
  min-width: 76px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 12px rgba(0, 0, 0, 0.03);
}
.mwp-stat-num {
  font-size: 22px; font-weight: 800;
  color: #1f2937; line-height: 1;
}
.mwp-stat-lbl {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af; margin-top: 4px;
}

/* ─── Add form ──────────────────────────────────────────────── */
.mwp-add-form {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.mwp-add-form:focus-within {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.10);
}
.mwp-add-glyph {
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, #fef3c7, #fcd34d);
  color: #92400e;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.mwp-add-glyph:hover {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(245, 158, 11, 0.30);
}
.mwp-add-glyph [data-lucide] { width: 18px; height: 18px; }
.mwp-add-input {
  flex: 1 1 280px;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: #1f2937;
}
.mwp-add-input::placeholder { color: #9ca3af; }
.mwp-add-section-picker {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.mwp-section-chip {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fafafa;
  color: #6b7280;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.mwp-section-chip:hover { background: #f3f4f6; color: #374151; }
.mwp-section-chip.is-active {
  background: #fff7ed;
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.4);
}

/* ─── Sections ──────────────────────────────────────────────── */
.mwp-content {
  display: flex; flex-direction: column; gap: 28px;
}
/* List layout (default) — sections stack vertically with extra breathing room. */
.mwp-content--list { gap: 28px; }
/* Board layout — 4 lanes side by side wrapped in .mwp-board, with the
   delegated row sitting full-width below. */
.mwp-board {
  display: grid;
  /* 6 columns side-by-side (2026-05-18). Each column gets a 240px
     minimum so task titles word-wrap naturally instead of breaking
     one character per line — minmax(0, 1fr) was too aggressive on
     ≤1500px viewports and produced columns ~120px wide. When the
     viewport can't fit 6×240 + gaps, the wrapper scrolls
     horizontally (same kanban convention Trello/Linear use). */
  grid-template-columns: repeat(6, minmax(240px, 1fr));
  gap: 12px;
  align-items: stretch;
  overflow-x: auto;
  /* Padding-bottom reserves room for the horizontal scrollbar so
     column shadows aren't clipped on macOS overlay scrollbars. */
  padding-bottom: 4px;
}
@media (max-width: 700px) {
  /* On phones the kanban is genuinely one column at a time — let
     the user swipe horizontally to reach the other 5. */
  .mwp-board { grid-template-columns: repeat(6, 84vw); gap: 10px; }
}
.mwp-content--board > .mwp-board { /* nothing more — the wrapper handles spacing */ }
.mwp-content--board { gap: 22px; }
.mwp-content--board .mwp-board > .mwp-section {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 18px;
  padding: 14px;
  min-height: 240px;
  position: relative;
  overflow: hidden;
}
/* Tinted top band that signals the section identity. Sits inside the column
   so the radius corners remain clean. */
.mwp-content--board .mwp-board > .mwp-section::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--mwp-band, rgba(245, 158, 11, 0.6));
  border-radius: 18px 18px 0 0;
}
/* 6-status palette (2026-05-18). Order: cold→warm→cool→warm→success
   →terminal. Each column gets a soft tinted background + a saturated
   top band so the columns are distinguishable at a glance without
   shouting. */
.mwp-content--board .mwp-board > .mwp-section[data-section="not_started"] { --mwp-band: linear-gradient(90deg, #cbd5e1, #64748b); background: linear-gradient(180deg, #f8fafc 0%, rgba(255, 255, 255, 0.7) 100%); }
.mwp-content--board .mwp-board > .mwp-section[data-section="new"]         { --mwp-band: linear-gradient(90deg, #fde68a, #d97706); background: linear-gradient(180deg, #fffbeb 0%, rgba(255, 255, 255, 0.7) 100%); }
.mwp-content--board .mwp-board > .mwp-section[data-section="in_progress"] { --mwp-band: linear-gradient(90deg, #93c5fd, #2563eb); background: linear-gradient(180deg, #eff6ff 0%, rgba(255, 255, 255, 0.7) 100%); }
.mwp-content--board .mwp-board > .mwp-section[data-section="backlog"]     { --mwp-band: linear-gradient(90deg, #fda4af, #e11d48); background: linear-gradient(180deg, #fff1f2 0%, rgba(255, 255, 255, 0.7) 100%); }
.mwp-content--board .mwp-board > .mwp-section[data-section="done"]        { --mwp-band: linear-gradient(90deg, #6ee7b7, #10b981); background: linear-gradient(180deg, #ecfdf5 0%, rgba(255, 255, 255, 0.7) 100%); }
.mwp-content--board .mwp-board > .mwp-section[data-section="cancelled"]   { --mwp-band: linear-gradient(90deg, #c4b5fd, #7c3aed); background: linear-gradient(180deg, #f5f3ff 0%, rgba(255, 255, 255, 0.7) 100%); }
/* Legacy column ids — keep the old palette as a fallback so any
   transitional tasks that still have status='todo' or 'review' render
   coloured instead of plain white. */
.mwp-content--board .mwp-board > .mwp-section[data-section="todo"]        { --mwp-band: linear-gradient(90deg, #cbd5e1, #64748b); background: linear-gradient(180deg, #f8fafc 0%, rgba(255, 255, 255, 0.7) 100%); }
.mwp-content--board .mwp-board > .mwp-section[data-section="review"]      { --mwp-band: linear-gradient(90deg, #a5b4fc, #6366f1); background: linear-gradient(180deg, #eef2ff 0%, rgba(255, 255, 255, 0.7) 100%); }

/* ── Weekly view (2026-05-18) ──────────────────────────────────────
   Notion-style: each week is a collapsible card with a thin header
   row, count chip, and a chevron that rotates open. Body inside the
   card reuses the mwp-task card so click/edit/drag all work the same
   as in list view. */
.mwp-content--weekly {
  display: flex; flex-direction: column;
  gap: 8px;
  max-width: 900px;
  margin: 0 auto;
}
.mwp-weekly-card {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  background: white;
  overflow: hidden;
  transition: box-shadow 140ms ease;
}
.mwp-weekly-card.is-open { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.mwp-weekly-card.is-current { border-color: rgba(217, 119, 6, 0.35); }
.mwp-weekly-card.is-no-date { border-style: dashed; opacity: 0.92; }
.mwp-weekly-head {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: transparent; border: 0;
  cursor: pointer;
  font: inherit; color: inherit;
  text-align: left;
}
.mwp-weekly-head:hover { background: rgba(0, 0, 0, 0.025); }
.mwp-weekly-chev {
  width: 14px; height: 14px;
  transition: transform 140ms ease;
  color: var(--gray-500, #6b7280);
}
.mwp-weekly-card.is-open .mwp-weekly-chev { transform: rotate(90deg); }
.mwp-weekly-icon { width: 16px; height: 16px; color: #d97706; }
.mwp-weekly-card.is-no-date .mwp-weekly-icon { color: var(--gray-400, #9ca3af); }
.mwp-weekly-title {
  font-size: 14px; font-weight: 600;
  color: #b45309;
  flex: 1;
}
.mwp-weekly-card.is-no-date .mwp-weekly-title { color: var(--gray-600, #4b5563); font-style: italic; }
.mwp-weekly-pill {
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(217, 119, 6, 0.12); color: #92400e;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.mwp-weekly-count {
  font-size: 11.5px; font-weight: 700;
  background: rgba(0, 0, 0, 0.06); color: var(--gray-700, #374151);
  padding: 2px 8px; border-radius: 999px;
  min-width: 22px; text-align: center;
}
.mwp-weekly-body {
  padding: 4px 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--gray-100, #f3f4f6);
}
.mwp-weekly-empty {
  padding: 32px; text-align: center;
  color: var(--gray-500, #6b7280); font-style: italic;
  border: 1px dashed var(--gray-200, #e5e7eb); border-radius: 10px;
}

/* Delegated as a full-width strip under the board lanes. */
.mwp-content--board > .mwp-section[data-section="delegated"] {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 18px;
  padding: 14px 16px;
}
.mwp-section {
  display: flex; flex-direction: column; gap: 10px;
}
.mwp-section-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 2px;
}
.mwp-section-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}
/* Status section dots — match the column band palette (2026-05-18).
   not_started gray / new amber / in_progress blue / backlog rose /
   done emerald / cancelled violet / delegated sky. Legacy ids kept
   as fallbacks so transitional data still renders coloured. */
.mwp-section[data-section="not_started"] .mwp-section-dot { background: #64748b; box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.15); }
.mwp-section[data-section="new"]         .mwp-section-dot { background: #d97706; box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15); }
.mwp-section[data-section="in_progress"] .mwp-section-dot { background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }
.mwp-section[data-section="backlog"]     .mwp-section-dot { background: #e11d48; box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.15); }
.mwp-section[data-section="done"]        .mwp-section-dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
.mwp-section[data-section="cancelled"]   .mwp-section-dot { background: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15); }
.mwp-section[data-section="delegated"]   .mwp-section-dot { background: #0ea5e9; box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12); }
/* Legacy aliases */
.mwp-section[data-section="todo"]        .mwp-section-dot { background: #64748b; box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.15); }
.mwp-section[data-section="review"]      .mwp-section-dot { background: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }
.mwp-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #374151;
}
.mwp-section-count {
  font-size: 11px; font-weight: 700;
  background: rgba(0, 0, 0, 0.05);
  color: #6b7280;
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 22px;
  text-align: center;
}
.mwp-section-hint {
  font-size: 12px;
  color: #9ca3af;
  margin-left: auto;
  font-style: italic;
}
.mwp-section-empty {
  font-size: 12px;
  color: #c1c4ca;
  padding: 18px 14px;
  border: 1px dashed rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  text-align: center;
  letter-spacing: 0.04em;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.mwp-section-empty-glyph {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  color: #b9bcc4;
  display: inline-flex; align-items: center; justify-content: center;
}
.mwp-section-empty-glyph [data-lucide] { width: 18px; height: 18px; }
.mwp-section-empty-text { font-weight: 600; }

/* Per-section empty glyph tint — matches the status column band */
.mwp-section[data-section="todo"]        .mwp-section-empty-glyph { background: rgba(100, 116, 139, 0.10); color: #475569; }
.mwp-section[data-section="in_progress"] .mwp-section-empty-glyph { background: rgba(245, 158, 11, 0.10); color: #d97706; }
.mwp-section[data-section="review"]      .mwp-section-empty-glyph { background: rgba(99, 102, 241, 0.10); color: #4f46e5; }
.mwp-section[data-section="done"]        .mwp-section-empty-glyph { background: rgba(16, 185, 129, 0.10); color: #059669; }
.mwp-section[data-section="delegated"]   .mwp-section-empty-glyph { background: rgba(14, 165, 233, 0.10); color: #0284c7; }

/* Section icon (next to title) — visible only in board mode; the list
   mode keeps the minimal dot-only look. */
.mwp-section-icon {
  width: 22px; height: 22px;
  border-radius: 7px;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.04);
}
.mwp-section-icon [data-lucide] { width: 13px; height: 13px; color: #6b7280; }
.mwp-content--board .mwp-section-icon { display: inline-flex; }
.mwp-content--board .mwp-section[data-section="todo"]        .mwp-section-icon { background: rgba(100, 116, 139, 0.15); }
.mwp-content--board .mwp-section[data-section="todo"]        .mwp-section-icon [data-lucide] { color: #475569; }
.mwp-content--board .mwp-section[data-section="in_progress"] .mwp-section-icon { background: rgba(245, 158, 11, 0.15); }
.mwp-content--board .mwp-section[data-section="in_progress"] .mwp-section-icon [data-lucide] { color: #b45309; }
.mwp-content--board .mwp-section[data-section="review"]      .mwp-section-icon { background: rgba(99, 102, 241, 0.15); }
.mwp-content--board .mwp-section[data-section="review"]      .mwp-section-icon [data-lucide] { color: #4338ca; }
.mwp-content--board .mwp-section[data-section="done"]        .mwp-section-icon { background: rgba(16, 185, 129, 0.15); }
.mwp-content--board .mwp-section[data-section="done"]        .mwp-section-icon [data-lucide] { color: #047857; }
.mwp-content--board .mwp-section[data-section="delegated"]   .mwp-section-icon { background: rgba(14, 165, 233, 0.15); }
.mwp-content--board .mwp-section[data-section="delegated"]   .mwp-section-icon [data-lucide] { color: #0369a1; }

/* In board mode the dot becomes redundant next to the icon — hide it. */
.mwp-content--board .mwp-section-dot { display: none; }
.mwp-content--board .mwp-section-hint { display: none; } /* keep columns compact */

/* Cards inside board columns are slightly tighter. */
.mwp-content--board .mwp-task {
  padding: 12px 12px;
  border-radius: 12px;
}
.mwp-content--board .mwp-task-title { font-size: 14px; }
.mwp-content--board .mwp-task-act { width: 24px; height: 24px; }
.mwp-content--board .mwp-task-act [data-lucide] { width: 12px; height: 12px; }
.mwp-content--board .mwp-section-list { gap: 8px; }

/* Board view: position the action toolbar absolutely in the card's
   top-right so it never steals horizontal space from the title.
   Without this, the action row sat inside the flex head and shrunk
   the title to ~30px wide on 6-column boards (reported 2026-05-18).
   The card's already position: relative so this just lifts the
   buttons out of the layout flow. They still fade in on hover. */
.mwp-content--board .mwp-task-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  padding: 2px;
  backdrop-filter: blur(2px);
  z-index: 1;
}
/* Reserve a tiny right padding on the head so the (hidden) absolute
   actions don't visually collide with the title's last word when
   hovered. */
.mwp-content--board .mwp-task-head {
  padding-right: 4px;
}
/* Old media queries (980px → 2 cols, 620px → 1 col) belonged to the
   4-column era — superseded by the consistent 6-column-with-scroll
   layout at the top of this section. Kept out intentionally. */
.mwp-section-list {
  display: flex; flex-direction: column; gap: 10px;
}

/* ─── Task card ─────────────────────────────────────────────── */
.mwp-task {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease, background 160ms ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 6px rgba(0, 0, 0, 0.02);
  position: relative;
}
.mwp-task:hover {
  border-color: rgba(245, 158, 11, 0.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 20px rgba(0, 0, 0, 0.05);
}
.mwp-task.is-expanded {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 32px rgba(245, 158, 11, 0.12);
}
.mwp-task.is-pinned {
  border-color: rgba(245, 158, 11, 0.55);
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
}
.mwp-task.is-pinned::before {
  content: '';
  position: absolute;
  left: -1px; top: 14px; bottom: 14px; width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
}
.mwp-task.is-done {
  background: #fafafa;
  opacity: 0.85;
}
.mwp-task.is-done .mwp-task-title {
  text-decoration: line-through;
  color: #9ca3af;
}
.mwp-task.is-delegated {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
  border-color: rgba(14, 165, 233, 0.20);
}

.mwp-task-head {
  display: flex; align-items: flex-start; gap: 12px;
}
.mwp-task-check {
  margin: 4px 0 0 0;
  width: 18px; height: 18px;
  accent-color: #f59e0b;
  cursor: pointer;
  flex-shrink: 0;
}
.mwp-task-titlewrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.mwp-task-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.45;
  outline: none;
  /* word-break: break-word was forcing one-character-per-line wraps
     in narrow board columns (2026-05-18 — reported by Ayoub).
     overflow-wrap: break-word only fires when a single word genuinely
     can't fit, which is the desired kanban behaviour. */
  overflow-wrap: break-word;
  word-break: normal;
}
.mwp-task-title[contenteditable="true"] {
  background: #fffbeb;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 6px;
}
.mwp-task-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.mwp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
}
.mwp-badge [data-lucide] { width: 11px; height: 11px; }
.mwp-badge--from {
  background: rgba(101, 163, 13, 0.10);
  color: #3f6212;
}
.mwp-badge--to {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
}
.mwp-badge--section[data-section="week"]  { background: rgba(101, 163, 13, 0.10); color: #3f6212; }
.mwp-badge--section[data-section="later"] { background: rgba(124, 58, 237, 0.10); color: #5b21b6; }
/* Day-priority pill — kept on every card so the Today/Week/Later
   context survives the move to status-based columns. Click cycles. */
.mwp-badge--day {
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.mwp-badge--day[data-section="today"] { background: rgba(245, 158, 11, 0.12); color: #92400e; }
.mwp-badge--day[data-section="week"]  { background: rgba(101, 163, 13, 0.12); color: #3f6212; }
.mwp-badge--day[data-section="later"] { background: rgba(124, 58, 237, 0.12); color: #5b21b6; }
.mwp-badge--day:hover { transform: translateY(-1px); filter: brightness(1.05); }
.mwp-badge--ghost {
  background: transparent;
  color: #c1c4ca;
  font-style: italic;
  font-weight: 500;
  padding-left: 2px;
}
.mwp-task-actions {
  display: flex; gap: 4px;
  opacity: 0;
  transition: opacity 150ms ease;
  flex-shrink: 0;
}
.mwp-task:hover .mwp-task-actions,
.mwp-task.is-expanded .mwp-task-actions,
.mwp-task:focus-within .mwp-task-actions {
  opacity: 1;
}
.mwp-task-act {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: #6b7280;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.mwp-task-act [data-lucide] { width: 14px; height: 14px; }
.mwp-task-act:hover { background: #f3f4f6; color: #1f2937; }
.mwp-task-act.is-on { color: #92400e; background: rgba(245, 158, 11, 0.10); }
.mwp-task-act.is-danger:hover { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }

/* ─── Note expand ───────────────────────────────────────────── */
.mwp-task-body {
  padding-left: 30px; /* aligns with title (past checkbox) */
}
.mwp-note-wrap {
  background: #fffbf2;
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.mwp-note-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #92400e;
}
.mwp-note-header [data-lucide] { width: 12px; height: 12px; }
.mwp-note-counter {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: #c9a25a;
  text-transform: none;
  letter-spacing: 0;
}
.mwp-note-textarea {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: #1f2937;
  resize: vertical;
  min-height: 64px;
  max-height: 360px;
  padding: 0;
}
.mwp-note-textarea::placeholder { color: #c9a25a; font-style: italic; }

/* ─── Task comments thread (2026-05-18) ─────────────────────────
   Notion-style thread: avatar + author + date + body, stacked. Each
   comment owns its own edit/delete chrome (only for the author).
   The compose form at the bottom is a 1-row autogrowing textarea. */
.mwp-comments-wrap {
  display: flex; flex-direction: column;
  gap: 10px;
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
}
.mwp-comments-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--gray-700, #374151);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mwp-comments-head [data-lucide] { width: 13px; height: 13px; color: #d97706; }
.mwp-comments-count {
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
  font-size: 10.5px; font-weight: 800;
  padding: 1px 7px; border-radius: 999px;
  margin-left: auto;
}
.mwp-comments-thread {
  display: flex; flex-direction: column;
  gap: 12px;
}
.mwp-comments-empty {
  color: var(--gray-500, #6b7280);
  font-size: 13px; font-style: italic;
  text-align: center;
  padding: 12px 6px;
}
.mwp-comment-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
  position: relative;
}
.mwp-comment-row.is-migrated { opacity: 0.85; }
.mwp-comment-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.mwp-comment-main {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.mwp-comment-headline {
  display: flex; align-items: baseline; gap: 6px;
  flex-wrap: wrap;
}
.mwp-comment-author {
  font-size: 13px; font-weight: 700;
  color: var(--gray-900, #111827);
}
.mwp-comment-date {
  font-size: 11px; color: var(--gray-500, #6b7280);
}
.mwp-comment-edited {
  font-size: 11px; color: var(--gray-400, #9ca3af);
  font-style: italic;
}
.mwp-comment-migrated {
  font-size: 9.5px; font-weight: 700;
  background: rgba(124, 58, 237, 0.12);
  color: #5b21b6;
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mwp-comment-body {
  font-size: 13.5px; color: var(--gray-800, #1f2937);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word; word-break: normal;
}
.mwp-comment-body[contenteditable="true"] {
  background: #fffbeb;
  outline: none;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 6px;
}
.mwp-comment-acts {
  display: flex; gap: 2px;
  opacity: 0;
  transition: opacity 140ms ease;
}
.mwp-comment-row:hover .mwp-comment-acts,
.mwp-comment-row:focus-within .mwp-comment-acts {
  opacity: 1;
}
.mwp-comment-act {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: transparent; border: 0;
  color: var(--gray-500, #6b7280);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.mwp-comment-act [data-lucide] { width: 12px; height: 12px; }
.mwp-comment-act:hover { background: rgba(0, 0, 0, 0.06); color: var(--gray-800, #1f2937); }
.mwp-comment-act.is-danger:hover { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
/* Compose row at the bottom */
.mwp-comment-compose {
  display: flex; align-items: flex-end; gap: 8px;
  border-top: 1px solid rgba(245, 158, 11, 0.18);
  padding-top: 10px;
  margin-top: 4px;
}
.mwp-comment-input {
  flex: 1;
  font-family: inherit; font-size: 13px;
  line-height: 1.45; color: var(--gray-900, #111827);
  background: white;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  padding: 7px 10px;
  resize: none;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mwp-comment-input:focus {
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.mwp-comment-input::placeholder { color: var(--gray-400, #9ca3af); }
.mwp-comment-send {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #f59e0b; color: white;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, transform 80ms ease;
}
.mwp-comment-send:hover:not(:disabled) { background: #d97706; }
.mwp-comment-send:active:not(:disabled) { transform: scale(0.96); }
.mwp-comment-send:disabled {
  background: var(--gray-300, #d1d5db); cursor: not-allowed; color: var(--gray-100, #f3f4f6);
}
.mwp-comment-send [data-lucide] { width: 14px; height: 14px; }

/* ─── Empty state ───────────────────────────────────────────── */
.mwp-empty {
  text-align: center;
  padding: 80px 20px;
  border: 1px dashed rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.5);
}
.mwp-empty-glyph {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fef3c7, #fcd34d);
  color: #92400e;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.20);
}
.mwp-empty-glyph [data-lucide] { width: 30px; height: 30px; }
.mwp-empty-title {
  margin: 0;
  font-size: 20px; font-weight: 700;
  color: #1f2937;
}
.mwp-empty-sub {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}
.mwp-empty-sub kbd {
  background: var(--surface-elevated);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #92400e;
}

/* Dark mode polish */
[data-theme="dark"] #myWorkspaceView {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(245, 158, 11, 0.10), transparent 60%),
    linear-gradient(180deg, #0f172a 0%, #111827 100%);
}
[data-theme="dark"] .mwp-title { color: #f3f4f6; }
[data-theme="dark"] .mwp-subtitle { color: #94a3b8; }
[data-theme="dark"] .mwp-stat { background: rgba(15, 23, 42, 0.6); border-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .mwp-stat-num { color: #f3f4f6; }
[data-theme="dark"] .mwp-add-form { background: #1f2937; border-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .mwp-add-input { color: #f3f4f6; }
[data-theme="dark"] .mwp-section-chip { background: #111827; color: #94a3b8; border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .mwp-section-chip.is-active { background: rgba(245, 158, 11, 0.16); color: #fcd34d; border-color: rgba(245, 158, 11, 0.4); }
[data-theme="dark"] .mwp-task { background: #1f2937; border-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .mwp-task:hover { border-color: rgba(245, 158, 11, 0.35); }
[data-theme="dark"] .mwp-task-title { color: #f3f4f6; }
[data-theme="dark"] .mwp-task.is-delegated { background: rgba(14, 165, 233, 0.08); }
[data-theme="dark"] .mwp-note-wrap { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.18); }
[data-theme="dark"] .mwp-note-textarea { color: #f3f4f6; }
[data-theme="dark"] .mwp-section-title { color: #cbd5e1; }
[data-theme="dark"] .mwp-empty { background: rgba(15, 23, 42, 0.6); border-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .mwp-empty-title { color: #f3f4f6; }
[data-theme="dark"] .mwp-empty-sub { color: #94a3b8; }

/* Responsive */
@media (max-width: 720px) {
  #myWorkspaceView { padding: 24px 16px 64px; }
  .mwp-title { font-size: 26px; }
  .mwp-hero-right { width: 100%; }
  .mwp-add-form { padding: 12px; }
}

/* Inline mini audio player inside a quoted-block (team-chat reply to a
   voice note). Sits below the snippet text, full quoted-block width so
   the scrubber has room. The native <audio controls> chrome is fine
   here — agents already recognise it from the main bubble pattern. */
.quoted-block-audio {
  display: block; width: 100%;
  margin-top: 6px;
  height: 36px; /* keeps the player from dominating the reply preview */
  max-width: 280px;
}

/* ===== Recordings view — 3CX call playback =====
   Reuses Tickets table classes (.tickets-table, .tickets-row,
   .tickets-row-head) for layout consistency. The .rec-* classes
   override grid template + add the urgency/segment widgets.

   Why grid (not flex): aligns the column header with the row cells
   pixel-perfect even when summary text wraps. */
.rec-row {
  display: grid;
  grid-template-columns:
    72px       /* time */
    minmax(140px, 1fr)  /* agent */
    minmax(150px, 1.2fr) /* caller */
    72px       /* duration */
    96px       /* urgency badge */
    minmax(120px, 1fr)  /* category */
    minmax(220px, 2.5fr) /* summary */
    270px;     /* audio player */
  gap: 12px;
  align-items: center;
}
.rec-col { font-size: 13px; min-width: 0; }
.rec-col-time { color: var(--gray-700); font-variant-numeric: tabular-nums; }
.rec-col-agent { font-weight: 500; color: var(--gray-900); }
.rec-col-caller { font-variant-numeric: tabular-nums; color: var(--gray-800); }
.rec-col-dur { color: var(--gray-600); font-variant-numeric: tabular-nums; }
.rec-col-cat { color: var(--gray-700); text-transform: capitalize; }
.rec-col-sum {
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl; /* Darija — Arabic-script renders right-to-left */
  text-align: right;
}
.rec-col-play { display: flex; align-items: center; justify-content: flex-end; }

/* Urgency badge — red / yellow / green pill. Sized to match the
   Tickets priority pills so visual weight is consistent across views. */
.rec-urgency-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  background: var(--gray-100);
  color: var(--gray-600);
}
.rec-urgency-high { background: var(--danger-soft); color: var(--danger); }
.rec-urgency-medium { background: var(--warning-soft); color: var(--warning); }
.rec-urgency-low { background: #d1fae5; color: #047857; }

/* Compact native audio player to fit a table row. The browser-native
   <audio controls> shrinks gracefully — only the height needs a clamp
   so it doesn't push the row taller than the urgency badge. */
.rec-audio {
  width: 260px;
  height: 32px;
  vertical-align: middle;
}

/* "▶ 2m 8s" button — what shows BEFORE the user clicks play. Duration
   text comes from the sidecar JSON, so the user sees the real length
   without waiting for any media fetch. On click, this button is
   replaced by a native <audio controls autoplay> with a presigned src. */
.rec-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--gray-50);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 120ms ease, border-color 120ms ease;
  min-width: 96px;
  justify-content: center;
}
.rec-play-btn:hover { background: var(--gray-100); border-color: var(--gray-300); }
.rec-play-btn:disabled { opacity: 0.6; cursor: wait; }
.rec-play-icon { font-size: 12px; line-height: 1; color: var(--blue-600, #2563eb); }
.rec-play-dur { color: var(--gray-700); }

/* Segmented filter buttons (Team / Urgency). Mimics the chip-row look of
   .tickets-filter-chip but only one option is active at a time. */
.rec-segment {
  display: inline-flex;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: var(--gray-50);
}
.rec-segment-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  border-right: 1px solid var(--gray-200);
}
.rec-segment-btn:last-child { border-right: none; }
.rec-segment-btn:hover { background: var(--gray-100); color: var(--gray-800); }
.rec-segment-btn.rec-segment-active {
  background: var(--blue-600, #2563eb);
  color: #ffffff;
}
.rec-segment-btn.rec-segment-active.rec-segment-high { background: #b91c1c; }
.rec-segment-btn.rec-segment-active.rec-segment-medium { background: #b45309; }
.rec-segment-btn.rec-segment-active.rec-segment-low { background: #047857; }
.rec-segment-btn.rec-segment-high { color: #b91c1c; }
.rec-segment-btn.rec-segment-medium { color: #b45309; }
.rec-segment-btn.rec-segment-low { color: #047857; }

/* Empty-state inside the agent/category dropdown — same chrome as the
   Tickets category empty state. */
.tickets-category-empty {
  padding: 16px 12px;
  font-size: 13px;
  color: var(--gray-500);
  text-align: center;
  font-style: italic;
}

/* "Show all callers" toggle — sits in the Recordings header row. Default
   is OFF so the team sees only paying-student calls by definition. */
.rec-paying-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--gray-50);
  font-size: 12px;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
}
.rec-paying-toggle input { margin: 0; cursor: pointer; }
.rec-paying-toggle:hover { background: var(--gray-100); }

/* Dark-mode color tweaks — match the dark theme's elevation. */
@media (prefers-color-scheme: dark) {
  .rec-urgency-high { background: rgba(239,68,68,0.15); color: #fca5a5; }
  .rec-urgency-medium { background: rgba(245,158,11,0.15); color: #fcd34d; }
  .rec-urgency-low { background: rgba(16,185,129,0.15); color: #6ee7b7; }
  .rec-segment { background: var(--gray-900); border-color: var(--gray-700); }
  .rec-segment-btn { color: var(--gray-300); border-right-color: var(--gray-700); }
  .rec-segment-btn:hover { background: var(--gray-800); }
}

/* ══════════════════════════════════════════════════════════════════
   Email Inbox view (Phase 4 minimal)
   ══════════════════════════════════════════════════════════════════ */
.email-view {
  display: grid;
  grid-template-columns: 360px 1fr;
  height: calc(100vh - 64px);
  overflow: hidden;
  background: var(--bg, #fff);
}
.email-view.hidden { display: none; }

.email-sidebar {
  border-right: 1px solid var(--gray-200, #e5e7eb);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.email-sidebar-head {
  padding: 16px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.email-title { margin: 0; font-size: 18px; font-weight: 600; }
.email-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.email-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--gray-300, #d1d5db);
  background: var(--gray-50, #f9fafb);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.email-filter-menu {
  position: absolute;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 100;
  padding: 4px;
  min-width: 200px;
  margin-top: 4px;
}
.email-filter-menu.hidden { display: none; }
.email-filter-item {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.email-filter-item:hover { background: var(--gray-100, #f3f4f6); }

.email-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 6px;
  padding: 6px 10px;
}
.email-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
}

.email-thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.email-thread-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  padding: 12px 16px;
  cursor: pointer;
  font-family: inherit;
}
.email-thread-item:hover { background: var(--gray-50, #f9fafb); }
.email-thread-item.active { background: var(--accent-50, #eff6ff); border-left: 3px solid var(--accent, #2563eb); }
.email-thread-item.unread { font-weight: 600; }
.email-thread-item.unread .etl-sender { color: #111; }
.etl-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.etl-row2 { margin-bottom: 2px; }
.etl-row3 { font-size: 12px; color: var(--gray-600, #6b7280); font-weight: normal; }
.etl-sender { font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etl-time { font-size: 11px; color: var(--gray-500, #9ca3af); white-space: nowrap; flex-shrink: 0; }
.etl-subject { font-size: 13px; color: #444; }
.etl-snippet { color: var(--gray-500, #9ca3af); }

.email-thread-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.email-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gray-500, #9ca3af);
  gap: 12px;
}
.email-empty-state.hidden { display: none; }
.email-empty-icon { font-size: 48px; opacity: 0.4; }
.email-empty-state h3 { margin: 0; font-weight: 500; }

.email-thread-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.email-thread-view.hidden { display: none; }

.email-thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.email-thread-id { flex: 1; min-width: 0; }
.email-thread-id h3 { margin: 0 0 4px; font-size: 16px; }
.email-thread-id p { margin: 0; font-size: 12px; }
.email-thread-actions { display: flex; gap: 4px; }

.email-message-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--gray-50, #f9fafb);
}
.email-message {
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}
.email-message.from-me { border-color: var(--accent-200, #bfdbfe); background: var(--accent-50, #eff6ff); }
.email-message-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.emh-sender { font-size: 14px; font-weight: 500; }
.emh-meta { font-size: 12px; margin-top: 2px; }
.email-body-iframe {
  width: 100%;
  border: 0;
  min-height: 200px;
  background: white;
}
.email-body-text {
  margin: 0;
  padding: 16px;
  font-family: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.5;
}
.email-attachments {
  padding: 8px 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.email-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--gray-100, #f3f4f6);
  font-size: 12px;
}
.email-reply-placeholder {
  padding: 12px 20px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  font-size: 13px;
  text-align: center;
}
.email-empty {
  padding: 20px;
  text-align: center;
  color: var(--gray-500, #9ca3af);
  font-size: 13px;
}

@media (max-width: 768px) {
  .email-view { grid-template-columns: 1fr; }
  .email-view .email-thread-pane { display: none; }
  .email-view.show-thread .email-sidebar { display: none; }
  .email-view.show-thread .email-thread-pane { display: flex; }
}

@media (prefers-color-scheme: dark) {
  .email-view { background: var(--gray-900); }
  .email-sidebar { border-right-color: var(--gray-700); }
  .email-sidebar-head { border-bottom-color: var(--gray-700); }
  .email-thread-item { border-bottom-color: var(--gray-800); }
  .email-thread-item:hover { background: var(--gray-800); }
  .email-thread-item.active { background: rgba(37,99,235,0.15); }
  .etl-sender { color: var(--gray-100); }
  .etl-subject { color: var(--gray-200); }
  .email-message { background: var(--gray-800); border-color: var(--gray-700); }
  .email-message.from-me { background: rgba(37,99,235,0.1); border-color: rgba(37,99,235,0.4); }
  .email-message-head { border-bottom-color: var(--gray-700); }
  .email-thread-header { border-bottom-color: var(--gray-700); }
  .email-message-list { background: var(--gray-900); }
  .email-reply-placeholder { background: var(--gray-800); border-top-color: var(--gray-700); }
  .email-attachment-chip { background: var(--gray-700); }
}

/* Email Phase 3 — compose modal + reply bar */
.email-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.email-compose-btn-sm { padding: 6px 12px; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }

.email-reply-bar {
  border-top: 1px solid var(--gray-200, #e5e7eb);
  padding: 12px 20px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.email-reply-textarea {
  width: 100%;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.email-reply-textarea:focus { border-color: var(--accent, #2563eb); }
.email-reply-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.email-reply-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.email-reply-status { flex: 1; }

.email-compose-card {
  width: 100%;
  max-width: 720px;
  margin: 80px auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 160px);
}
.email-compose-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  overflow-y: auto;
}
.email-compose-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.email-compose-label {
  flex-shrink: 0;
  width: 60px;
  font-size: 12px;
  color: var(--gray-500, #9ca3af);
  font-weight: 500;
}
.email-compose-input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
}
.email-compose-body-textarea {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  margin-top: 8px;
  box-sizing: border-box;
  min-height: 240px;
}
.email-compose-body-textarea:focus { border-color: var(--accent, #2563eb); }

@media (prefers-color-scheme: dark) {
  .email-reply-bar { background: var(--gray-800); border-top-color: var(--gray-700); }
  .email-reply-textarea { background: var(--gray-900); color: var(--gray-100); border-color: var(--gray-700); }
  .email-compose-card { background: var(--gray-800); }
  .email-compose-input { color: var(--gray-100); }
  .email-compose-row { border-bottom-color: var(--gray-700); }
  .email-compose-body-textarea { background: var(--gray-900); color: var(--gray-100); border-color: var(--gray-700); }
}

/* ════════════════════════════════════════════════════════════════════
   Email view — Phase 4.5 WhatsApp-style clone
   Uses same chat-* / profile-panel CSS so styling auto-matches WA inbox.
   ══════════════════════════════════════════════════════════════════ */
.email-view {
  display: block;
  width: 100%;
  height: calc(100vh - 64px);
  overflow: hidden;
}
.email-view.hidden { display: none; }
.email-main.email-main {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: none;
}
.email-main:has(#emailProfilePanel:not(.hidden)).email-main,
.email-main:has(#emailConvDetailsPanel:not(.hidden)).email-main {
  grid-template-columns: 320px minmax(0, 1fr) 340px !important;
}
.email-sidebar-wa {
  border-right: 1px solid var(--gray-200, #e5e7eb);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: white;
}
.email-sidebar-wa .sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.email-sidebar-wa .sidebar-title { margin: 0; font-size: 18px; font-weight: 700; }
.email-sidebar-wa .sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.email-sidebar-wa .sidebar-tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  color: var(--gray-600, #6b7280);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
}
.email-sidebar-wa .sidebar-tab.active {
  color: var(--accent, #0d9488);
  border-bottom-color: var(--accent, #0d9488);
  font-weight: 600;
}

.email-compose-btn-sm {
  padding: 6px 12px;
  font-size: 13px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* Conv item override for email view — same .conv-item base, just add
   spacing for the avatar + 3-row layout. */
#emailThreadList .conv-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  cursor: pointer;
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-family: inherit;
  text-align: left;
}
#emailThreadList .conv-item:hover { background: var(--surface-hover); }
#emailThreadList .conv-item.active {
  background: var(--accent-50, #ecfeff);
  border-left: 3px solid var(--accent, #0d9488);
  padding-left: 13px;
}
.conv-item-body { flex: 1; min-width: 0; }
.conv-item-row1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.conv-item-name {
  font-size: 14px;
  color: #111;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item.unread .conv-item-name { font-weight: 700; }
.conv-item-time {
  font-size: 11px;
  color: var(--gray-500, #9ca3af);
  white-space: nowrap;
  flex-shrink: 0;
}
.conv-item-row2 { margin-bottom: 2px; }
.conv-item-subject {
  color: var(--gray-700, #374151);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item-row3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.conv-item-preview {
  font-size: 12px;
  color: var(--gray-500, #9ca3af);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item-unread-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: var(--accent, #0d9488);
  border-radius: 50%;
}
.conv-empty {
  padding: 24px;
  text-align: center;
  color: var(--gray-500, #9ca3af);
  font-size: 13px;
}

/* iframe email body inside chat-bubble */
.chat-bubble .email-body-iframe {
  display: block;
  width: 100%;
  background: white;
  border-radius: 4px;
}
.chat-msg.from-me .chat-bubble .email-body-iframe {
  background: rgba(255,255,255,0.95);
}

/* Email-specific compose modal (kept from earlier) */
.email-compose-card {
  width: 100%;
  max-width: 720px;
  margin: 80px auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 160px);
}
.email-compose-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  overflow-y: auto;
}
.email-compose-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.email-compose-label {
  flex-shrink: 0;
  width: 60px;
  font-size: 12px;
  color: var(--gray-500, #9ca3af);
  font-weight: 500;
}
.email-compose-input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
}
.email-compose-body-textarea {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  margin-top: 8px;
  box-sizing: border-box;
  min-height: 240px;
}

@media (max-width: 768px) {
  .email-main { grid-template-columns: 1fr; }
  .email-main .chat-pane { display: none; }
  .email-view.show-thread .email-sidebar-wa { display: none; }
  .email-view.show-thread .email-main .chat-pane { display: flex; }
}

@media (prefers-color-scheme: dark) {
  .email-sidebar-wa { background: var(--gray-900); border-right-color: var(--gray-700); }
  .email-sidebar-wa .sidebar-head { border-bottom-color: var(--gray-700); }
  .email-sidebar-wa .sidebar-tabs { border-bottom-color: var(--gray-700); }
  #emailThreadList .conv-item { border-bottom-color: var(--gray-800); }
  #emailThreadList .conv-item:hover { background: var(--gray-800); }
  #emailThreadList .conv-item.active { background: rgba(13,148,136,0.15); }
  .conv-item-name { color: var(--gray-100); }
  .conv-item-subject { color: var(--gray-200); }
  .email-compose-card { background: var(--gray-800); }
}

/* Email compose rich editor (Phase 6 minimum) */
.email-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--surface-hover);
  margin-top: 8px;
}
.email-fmt-btn {
  background: var(--surface);
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  min-width: 30px;
  color: var(--text);
}
.email-fmt-btn:hover { border-color: var(--border); background: var(--surface-hover); }
.email-fmt-btn.active { background: var(--accent); color: #fff; }
.email-fmt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.email-mode-toggle { font-weight: 600; }
.email-compose-rich {
  min-height: 240px;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  background: var(--surface);
  color: var(--text);
}
.email-compose-rich:focus { border-color: var(--accent); }
.email-compose-rich:empty::before {
  content: attr(data-placeholder);
  color: var(--text-tertiary);
  pointer-events: none;
}
.email-compose-rich p:first-child { margin-top: 0; }
.email-compose-rich ul, .email-compose-rich ol { padding-left: 24px; }
/* (dark mode now handled by the theme tokens above — no prefers-color-scheme block,
   so app-Dark/OS-Light no longer shows a white toolbar.) */

/* ============ Attendance dashboard ============ */
.attendance-view {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  height: 100%;
  overflow: hidden;
}
.attendance-view.show-drill {
  grid-template-columns: 220px 1fr 380px;
}
.attendance-sidebar {
  border-right: 1px solid var(--border, #e5e7eb);
  background: var(--surface-sunken, #f9fafb);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
}
.attendance-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.attendance-sidebar-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.attendance-sub-tabs {
  display: flex;
  flex-direction: column;
  padding: 8px 8px;
  gap: 2px;
}
.attendance-sub-tab {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text, #111827);
}
.attendance-sub-tab:hover { background: var(--surface-hover, #f3f4f6); }
.attendance-sub-tab.active { background: var(--accent-soft, #dbeafe); color: var(--accent, #2563eb); font-weight: 600; }
.attendance-status {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--muted, #6b7280);
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.attendance-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #9ca3af;
}
.attendance-status-green { background: #10b981; }
.attendance-status-yellow { background: #f59e0b; }
.attendance-status-red { background: #ef4444; }
.attendance-status-grey { background: #9ca3af; }
.attendance-sidebar-help {
  padding: 8px 16px 16px;
  font-size: 11px;
  color: var(--muted, #6b7280);
  line-height: 1.5;
}
.attendance-content {
  padding: 16px 20px;
  overflow: auto;
}

/* KPI strip */
.attendance-kpi-strip {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.attendance-kpi {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
}
.attendance-kpi-primary {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fecaca;
}
.attendance-kpi-big { font-size: 36px; font-weight: 800; line-height: 1; color: #b91c1c; }
.attendance-kpi-num { font-size: 24px; font-weight: 700; line-height: 1; }
.attendance-kpi-label { font-size: 12px; color: var(--muted, #6b7280); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.attendance-kpi-sub { font-size: 11px; color: var(--muted, #6b7280); margin-top: 4px; }

/* Filter bar */
.attendance-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.attendance-input {
  min-width: 140px;
  padding: 7px 10px;
  font-size: 13px;
}
.attendance-chip-row { display: flex; gap: 6px; }
.attendance-chip {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
.attendance-chip:hover { background: var(--surface-hover, #f3f4f6); }
.attendance-chip.active { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb); }

/* Unmapped banner */
.attendance-unmapped-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}
.attendance-unmapped-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.attendance-unmapped-row {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr auto;
  gap: 10px;
  background: #fff;
  border: 1px solid #fde68a;
  padding: 8px 10px;
  border-radius: 6px;
  align-items: center;
}
.attendance-unmapped-topic { font-weight: 600; }
.attendance-unmapped-meta { font-size: 12px; color: var(--muted, #6b7280); }
.attendance-unmapped-suggestion { font-size: 12px; color: #047857; }

/* ============ Table — refined data-density (Linear/Vercel-style) ============
   Column widths use minmax(min, fr) so long group / teacher names get the
   space they need, while pure-number cells stay tight. Numeric cells use
   tabular-nums so digits line up vertically across rows. Sparkline grows
   to fill its cell. */
.attendance-table-wrap {
  overflow: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
}
.attendance-row,
.attendance-row-head {
  display: grid;
  /* group | teacher | enrolled | active | attendance(% + spark) | show-up | health | action */
  grid-template-columns:
    minmax(200px, 2.4fr)
    minmax(150px, 1.4fr)
    72px
    96px
    minmax(180px, 1.7fr)
    82px
    72px
    72px;
  gap: 14px;
  align-items: center;
}
.attendance-row {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #eef0f3);
  font-size: 13.5px;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.attendance-row:last-child { border-bottom: none; }
.attendance-row:hover {
  background: var(--surface-hover, #f8fafc);
}
.attendance-row-head {
  background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-sunken, #f9fafb) 100%);
  padding: 12px 16px;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #6b7280);
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

/* Group cell: name + URGENT MERGE pill stacked, name wraps to multi-line */
.attendance-cell-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.attendance-group-name {
  font-weight: 600;
  color: var(--text, #0f172a);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Teacher cell: full name, multi-line allowed, no truncation */
.attendance-cell-teacher {
  min-width: 0;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text, #0f172a);
}

/* Pure-number cells — tabular numerals for vertical alignment */
.attendance-cell-num,
.attendance-cell-active,
.attendance-cell-showup,
.attendance-rate-num,
.attendance-cell-trend,
.attendance-cell-health {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.attendance-cell-num {
  font-size: 14px;
  color: var(--text, #0f172a);
}

/* Active count: prominent N, muted "/" + total */
.attendance-cell-active {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.att-active-n {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #0f172a);
}
.att-active-divider {
  color: var(--muted, #cbd5e1);
  margin: 0 1px;
  font-weight: 300;
}
.att-active-d {
  font-size: 13px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}

/* Attendance: percent + sparkline side-by-side, sparkline fills remaining space */
.attendance-cell-spark {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.attendance-rate-num {
  font-weight: 600;
  font-size: 14px;
  min-width: 38px;
  color: var(--text, #0f172a);
}
.attendance-spark {
  color: var(--accent, #2563eb);
  vertical-align: middle;
  flex-shrink: 0;
}
.attendance-spark-fluid {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 26px;
}

/* Show-up + trend — quiet but tabular */
.attendance-cell-showup {
  font-size: 13.5px;
  color: var(--text, #1e293b);
  font-weight: 500;
}
.attendance-cell-trend {
  font-size: 13px;
}
.attendance-cell-health {
  display: flex;
  align-items: center;
}
.attendance-cell-action button { padding: 4px 12px; font-size: 12px; }

/* Health & severity chips — refined: compact pill with deliberate weight */
.health-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  min-width: 36px;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
.health-green  { background: linear-gradient(180deg, #10b981 0%, #059669 100%); }
.health-yellow { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); }
.health-red    { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); }
.health-new    { background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%); }

.severity-urgent {
  background: #ef4444; color: #fff;
  padding: 4px 11px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.severity-potential {
  background: #f59e0b; color: #fff;
  padding: 4px 11px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.conf-high   { color: #047857; font-weight: 600; }
.conf-medium { color: #b45309; font-weight: 600; }
.conf-low    { color: #6b7280; font-weight: 600; }
.attendance-trend-up   { color: #059669; font-weight: 600; }
.attendance-trend-down { color: #dc2626; font-weight: 600; }
.attendance-trend-flat { color: var(--muted, #94a3b8); }

/* URGENT MERGE pill — refined inline tag */
.attendance-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  align-self: flex-start;
}
.attendance-pill-urgent {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Attendance dot row (compact session-by-session view) */
.attendance-roster-dots {
  display: inline-flex;
  gap: 6px;
  vertical-align: middle;
  align-items: center;
}
.attendance-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid transparent;
  transition: transform 120ms ease;
  cursor: help;
}
.attendance-dot:hover { transform: scale(1.35); }
.attendance-dot-on {
  background: #10b981;
  border-color: #047857;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.15);
}
/* Brief (< 15 min total) — orange — student joined but barely */
.attendance-dot-brief {
  background: #f59e0b;
  border-color: #b45309;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.18);
}
.attendance-dot-off {
  background: #fff;
  border-color: #cbd5e1;
}

/* ============ Roster table — single CSS grid, dates align over dots ============
   The whole table (header + every body row) uses the SAME grid template so
   each date label sits precisely above its dot column. --n-dots is set on
   the table element so the column count is data-driven. */
.attendance-roster-table {
  --n-dots: 4;
  display: contents;
}
.attendance-roster-row {
  display: grid;
  /* Budget for 460px panel - 36px body padding = 424px usable:
     name fills the rest (min 130px), status 50, 6 dots × 24 = 144,
     last 40, 9 gaps × 3 = 27. Total fixed: 261. Name: ~163px. */
  grid-template-columns: minmax(130px, 1fr) 50px repeat(var(--n-dots), 24px) 40px;
  column-gap: 3px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--surface-sunken, #f1f5f9);
  font-size: 12.5px;
}
.attendance-roster-row:last-child { border-bottom: none; }
.attendance-roster-cell { min-width: 0; }

/* Header row */
.attendance-roster-head {
  position: sticky;
  top: 0;
  background: var(--surface, #fff);
  padding: 8px 4px 6px;
  border-bottom: 1.5px solid var(--border, #e2e8f0);
  z-index: 2;
}
.attendance-roster-col-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #94a3b8);
}
.attendance-roster-date-cell {
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  color: var(--text, #475569);
  letter-spacing: 0;
  text-transform: none;
  cursor: help;
  /* Wrap dates to 2 lines so "8 May" becomes "8" / "May" if needed,
     preventing horizontal overflow into neighbouring columns. */
  line-height: 1.1;
  word-spacing: -0.5px;
  white-space: pre-line;
}
.attendance-roster-status-col { text-align: left; }
.attendance-roster-last-col { text-align: right; font-size: 9.5px; }

/* Direction caption — minimal sub-header */
.attendance-roster-direction {
  text-align: center;
  padding: 3px 0 6px;
  border-bottom: 1px solid var(--surface-sunken, #f1f5f9);
}
.attendance-roster-direction-text {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--muted, #cbd5e1);
  font-style: italic;
}

/* Body rows */
.attendance-roster-body-row { background: transparent; }
.attendance-roster-body-row:hover { background: var(--surface-hover, #f8fafc); }
.attendance-roster-name {
  font-weight: 600;
  color: var(--text, #0f172a);
  font-size: 13.5px;
  line-height: 1.25;
  /* Allow names to wrap to a second line instead of getting truncated.
     The wider panel + name column give them room to breathe. */
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.attendance-roster-dot-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.attendance-roster-last {
  text-align: right;
  font-size: 11px;
  color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Collapsible legend — closed by default; toggle pill expands it */
.attendance-drill-section-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.attendance-drill-section-title-inline {
  border-bottom: none;
  margin: 0;
  padding-bottom: 0;
}
.attendance-legend-toggle {
  background: var(--surface-sunken, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  color: var(--muted, #64748b);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.attendance-legend-toggle:hover {
  background: var(--surface-hover, #e2e8f0);
  color: var(--text, #0f172a);
}
.attendance-legend-toggle[aria-expanded="true"] {
  background: var(--accent-soft, #dbeafe);
  border-color: var(--accent, #93c5fd);
  color: var(--accent, #2563eb);
}
.attendance-legend-toggle-icon {
  font-size: 11px;
  line-height: 1;
}
.attendance-roster-legend {
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease;
  margin-bottom: 0;
}
.attendance-roster-legend.open {
  max-height: 400px;
  margin-bottom: 8px;
}
.attendance-legend-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 5px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-sunken, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 11.5px;
}
.attendance-legend-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
}
.attendance-legend-label {
  color: var(--muted, #475569);
  line-height: 1.35;
}

/* Status chips on Students table */
.attendance-status-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.attendance-status-active { background: #d1fae5; color: #047857; }
.attendance-status-brief { background: #ffedd5; color: #9a3412; }
.attendance-status-at_risk { background: #fef3c7; color: #92400e; }
.attendance-status-inactive { background: #fee2e2; color: #b91c1c; }
.attendance-status-new { background: #e0e7ff; color: #3730a3; }

/* Drill-down side panel */
.attendance-drill {
  border-left: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  width: 460px;
  flex-shrink: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 56px;
  bottom: 0;
  z-index: 30;
  box-shadow: -4px 0 12px rgba(0,0,0,0.08);
}
.attendance-drill.hidden { display: none; }
.attendance-drill-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.attendance-drill-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.attendance-drill-head h3.attendance-drill-title-linked {
  cursor: pointer;
  color: var(--accent, #2563eb);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 120ms;
}
.attendance-drill-head h3.attendance-drill-title-linked:hover {
  text-decoration-color: var(--accent, #2563eb);
}
.attendance-roster-name-linked {
  cursor: pointer;
  color: var(--accent, #2563eb);
}
.attendance-roster-name-linked:hover { text-decoration: underline; }
/* Unmatched-but-mappable: subtle dashed underline + cursor pointer hint */
.attendance-roster-name-mappable {
  cursor: pointer;
  border-bottom: 1px dashed var(--muted, #94a3b8);
  display: inline-block;
  padding-bottom: 1px;
}
.attendance-roster-name-mappable:hover { color: var(--accent, #2563eb); border-bottom-color: var(--accent, #2563eb); }

/* Inbox attendance popover (📅 icon → last 5 sessions per group) */
.inbox-attendance-pop {
  position: fixed; z-index: 1000;
  width: 320px; max-height: 420px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: flex; flex-direction: column; overflow: hidden;
}
.inbox-attendance-pop-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface-sunken, #f8fafc);
}
.inbox-attendance-pop-title { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text, #0f172a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-attendance-pop-close {
  width: 24px; height: 24px; line-height: 20px; font-size: 18px;
  background: transparent; border: none; cursor: pointer; color: var(--muted, #64748b);
}
.inbox-attendance-pop-close:hover { color: var(--text, #0f172a); }
.inbox-attendance-pop-body { overflow-y: auto; padding: 8px 12px 12px; }
.inbox-attendance-pop-muted { font-size: 12px; color: var(--muted, #64748b); padding: 6px 0; }
.inbox-attendance-pop-section { margin-top: 10px; }
.inbox-attendance-pop-section:first-child { margin-top: 0; }
.inbox-attendance-pop-group-name { font-size: 11.5px; font-weight: 600; color: var(--muted, #64748b); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.inbox-attendance-pop-dots { display: flex; gap: 12px; flex-wrap: wrap; }
.inbox-attendance-pop-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.inbox-attendance-pop-date { font-size: 10px; color: var(--muted, #64748b); white-space: nowrap; }
.inbox-att-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid var(--border, #d1d5db); }
.inbox-att-dot-full { background: #16a34a; border-color: #15803d; }
.inbox-att-dot-brief { background: #f59e0b; border-color: #d97706; }
.inbox-att-dot-miss { background: transparent; }

/* Gotcha #14: f l'dark l'gray scale m9loub (--gray-900 = oklch .96 = qrib l-byed),
   fa l'overrides l-9dam kanou kay-diro l'popover card BIDA f west app dark. L'base
   rules fo9 deja b --surface/--text/--muted/--border → kay-flippiw wa7edhom. */

/* Group variant: wider with KPI strip + per-student grid */
.inbox-attendance-pop-wide { width: min(580px, calc(100vw - 32px)); max-height: 74vh; }

/* Student variant: chher KAMEL (7tal ~13 hissa) f blast akhir 5. B 320px l'row
   dyal l'dots kat-3mer f 7 items o l'8 kay-t9ess 3la l'7afa — o l'aghlabiya
   dyal l'chhour 3endhom 8-9 hissa. 420px = 9-10 f row, o li zad kay-wrappi. */
.inbox-attendance-pop-tall { max-height: 74vh; width: min(420px, calc(100vw - 32px)); }

/* Month navigator — l'popover kay-warri chher b chher (◀ / ▶) 3la l'history
   kamla dyal l'class. Sticky bach l'agent y-b9a chayef f ay chher howa melli
   kay-scrolli f liste twila dyal students. Tokens GHIR (gotcha #14). */
.inbox-att-monthbar {
  position: sticky; top: -8px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 8px; margin-bottom: 2px;
  background: var(--surface);
}
.inbox-att-monthnav {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; font-weight: 700;
  background: var(--surface-sunken, #f8fafc);
  border: 1px solid var(--border); color: var(--text);
  cursor: pointer;
}
.inbox-att-monthnav:hover:not(:disabled) { background: var(--surface-hover, var(--surface-sunken)); border-color: var(--wa); color: var(--wa); }
.inbox-att-monthnav:disabled { opacity: .35; cursor: default; }
.inbox-att-monthlabel { flex: 1; text-align: center; line-height: 1.15; }
.inbox-att-monthname { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); }
.inbox-att-monthcount { display: block; font-size: 10.5px; color: var(--muted); }

/* Kan inline b #ecfeff/#a5f3fc/#0e7490 hardcoded = ma-kay-t9ra-ch f dark. */
.inbox-att-mergebadge {
  margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; font-size: 12px;
  background: var(--surface-sunken, #f8fafc);
  border: 1px solid var(--border); color: var(--text);
}
.inbox-attendance-pop-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 8px 10px; margin-bottom: 10px;
  background: var(--surface-sunken, #f8fafc);
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
}
.inbox-attendance-pop-kpi-cell { text-align: center; }
.inbox-attendance-pop-kpi-label { font-size: 9.5px; font-weight: 600; color: var(--muted, #64748b); letter-spacing: 0.04em; }
.inbox-attendance-pop-kpi-val { font-size: 16px; font-weight: 700; color: var(--text, #0f172a); margin-top: 2px; }
.inbox-attendance-pop-table-head,
.inbox-attendance-pop-table-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 56px repeat(var(--n-dots), 24px);
  column-gap: 4px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--surface-sunken, #f1f5f9);
}
.inbox-attendance-pop-table-head {
  font-size: 9.5px; font-weight: 700; color: var(--muted, #64748b);
  letter-spacing: 0.04em; position: sticky; top: 36px;
  background: var(--surface, #fff); padding-top: 6px; padding-bottom: 6px;
}
.inbox-attendance-pop-th-name { padding-left: 4px; }
.inbox-attendance-pop-th-status { text-align: left; }
.inbox-attendance-pop-th-date { text-align: center; line-height: 1.1; white-space: pre-line; font-size: 9px; }
.inbox-attendance-pop-row-name {
  font-size: 12.5px; font-weight: 600; color: var(--text, #0f172a);
  padding-left: 4px; line-height: 1.2; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inbox-attendance-pop-row-name-linked { cursor: pointer; color: var(--accent, #2563eb); }
.inbox-attendance-pop-row-name-linked:hover { text-decoration: underline; }
.inbox-attendance-pop-row-status { display: flex; align-items: center; }
.inbox-attendance-pop-row-dot { display: flex; justify-content: center; align-items: center; }

/* Nefs s-sabab dyal fo9 — l'wa7id li b9a howa l'lien (contrast 3la khalfiya dakna). */
[data-theme="dark"] .inbox-attendance-pop-row-name-linked { color: #60a5fa; }

/* Manual-map picker popover (anchored under the clicked name cell) */
.attendance-map-picker {
  position: fixed;
  z-index: 1000;
  width: 320px;
  max-height: 380px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.attendance-map-picker-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface-sunken, #f8fafc);
}
.attendance-map-picker-title { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text, #0f172a); }
.attendance-map-picker-close {
  width: 24px; height: 24px; line-height: 20px; font-size: 18px;
  background: transparent; border: none; cursor: pointer; color: var(--muted, #64748b);
}
.attendance-map-picker-close:hover { color: var(--text, #0f172a); }
.attendance-map-picker-search {
  margin: 8px 10px; padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
  background: var(--surface, #fff); color: var(--text, #0f172a);
}
.attendance-map-picker-list { overflow-y: auto; padding: 4px 6px 8px; }
.attendance-map-picker-row {
  display: block; width: 100%; text-align: left;
  padding: 6px 10px; background: transparent; border: none; border-radius: 4px;
  cursor: pointer; color: var(--text, #0f172a);
}
.attendance-map-picker-row:hover { background: var(--surface-sunken, #f1f5f9); }
.attendance-map-picker-row-name { font-size: 13px; font-weight: 500; }
.attendance-map-picker-row-phone { font-size: 11px; color: var(--muted, #64748b); margin-top: 1px; }
.attendance-map-picker-row[disabled] { opacity: 0.5; cursor: wait; }

[data-theme="dark"] .attendance-map-picker { background: var(--gray-900, #0f172a); border-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-map-picker-head { background: var(--gray-800, #1e293b); border-bottom-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-map-picker-title { color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-map-picker-search { background: var(--gray-800, #1e293b); border-color: var(--gray-700, #334155); color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-map-picker-row { color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-map-picker-row:hover { background: var(--gray-800, #1e293b); }
[data-theme="dark"] .attendance-map-picker-row-phone { color: var(--gray-400, #94a3b8); }
[data-theme="dark"] .attendance-roster-name-mappable { border-bottom-color: var(--gray-500, #64748b); }

.attendance-drill-body { padding: 16px 18px; overflow: auto; }

/* Meta header (schedule chips + dates + links) */
.attendance-drill-meta {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.attendance-drill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.attendance-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--surface-sunken, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #0f172a);
  letter-spacing: 0.01em;
}
.attendance-meta-chip-level {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.attendance-drill-dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  font-size: 13px;
}
.attendance-drill-date-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.attendance-meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}
.attendance-drill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.attendance-meta-link {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent, #2563eb);
  text-decoration: none;
}
.attendance-meta-link:hover { text-decoration: underline; }

/* KPI strip rebuilt with labels above values */
.attendance-drill-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  padding: 12px;
  margin-bottom: 14px;
  background: var(--surface-sunken, #f8fafc);
  border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb);
}
.attendance-drill-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.attendance-drill-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}
.attendance-drill-stat-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  color: var(--text, #0f172a);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Larger sparkline + caption */
.attendance-drill-spark {
  margin: 6px 0 18px;
  color: var(--accent, #2563eb);
}
.attendance-drill-spark-caption {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  margin-top: 4px;
}

/* Section titles */
.attendance-drill-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

/* Per-session list */
.attendance-drill-sessions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 6px;
}
.attendance-drill-session {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--surface-sunken, #f3f4f6);
}
.attendance-drill-session:last-child { border-bottom: none; }
.attendance-drill-session-date { font-weight: 500; color: var(--text, #0f172a); }
.attendance-drill-session-attend {
  text-align: right;
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.attendance-drill-teacher-dot {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.attendance-drill-teacher-dot.on  { background: #ecfdf5; color: #047857; }
.attendance-drill-teacher-dot.off { background: #fef2f2; color: #b91c1c; }

/* Roster section spacing */
.attendance-drill-roster-section { margin-top: 6px; }

/* Teacher-issue pill — same shape as urgent, different color */
.attendance-pill-warn {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.attendance-drill-roster { display: flex; flex-direction: column; gap: 0; }
.attendance-roster-unlinked {
  display: inline-flex;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: middle;
}
.attendance-roster-status {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attendance-drill-timeline { display: flex; flex-direction: column; gap: 4px; }
.attendance-timeline-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--surface-sunken, #f3f4f6);
}

/* Merge side-by-side */
/* Merge suggestions — card-based layout (rich client-acceptance view) */
.attendance-merge-cards { display: flex; flex-direction: column; gap: 12px; padding: 0 0 16px; }
.attendance-merge-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  box-shadow: var(--elevation-card);
}
.attendance-merge-card.severity-bar-urgent { border-left-color: var(--danger); }
.attendance-merge-card.severity-bar-potential { border-left-color: var(--warning); }
.attendance-merge-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.attendance-merge-card-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text, #0f172a); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.attendance-merge-card-vs { color: var(--muted, #64748b); font-weight: 500; }
.attendance-merge-severity-chip { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em; }
/* 3-group merge: chip on the header + "already merged" badge on the merged unit's column. */
.attendance-merge-3way-chip { background: var(--wa); color: #fff; }
.attendance-merge-merged-badge { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: rgba(37, 211, 102, 0.15); color: var(--wa); vertical-align: middle; }
.attendance-merge-acc {
  text-align: center; min-width: 72px;
  padding: 4px 10px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center;
}
.attendance-merge-acc-val { font-size: 22px; font-weight: 700; line-height: 1; }
.attendance-merge-acc-label { font-size: 9px; font-weight: 600; letter-spacing: 0.05em; margin-top: 2px; opacity: 0.85; }
.attendance-merge-acc-high { background: #dcfce7; color: #15803d; }
.attendance-merge-acc-med { background: #fef3c7; color: #b45309; }
.attendance-merge-acc-low { background: #fee2e2; color: #b91c1c; }
.attendance-merge-card-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.attendance-merge-card-col { background: var(--surface-sunken, #f8fafc); padding: 10px 12px; border-radius: 6px; }
.attendance-merge-card-col-name { font-weight: 600; font-size: 13px; color: var(--text, #0f172a); margin-bottom: 6px; }
.attendance-merge-card-meta-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 12px; }
.attendance-merge-card-meta-label { color: var(--muted, #64748b); font-weight: 500; }
.attendance-merge-card-meta-val { color: var(--text, #0f172a); text-align: right; }
.attendance-merge-card-note {
  margin-top: 8px; padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
}
.attendance-merge-card-note-label { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: #b45309; margin-bottom: 2px; }
.attendance-merge-card-note-val { font-size: 12px; color: var(--text, #0f172a); line-height: 1.35; }
[data-theme="dark"] .attendance-merge-card-note { background: rgba(245, 158, 11, 0.12); }
[data-theme="dark"] .attendance-merge-card-note-label { color: #fcd34d; }
[data-theme="dark"] .attendance-merge-card-note-val { color: var(--gray-100, #f1f5f9); }
.attendance-merge-card-reasons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.attendance-merge-reason-chip {
  background: #ecfdf5; color: #047857;
  font-size: 11px; padding: 3px 8px; border-radius: 4px;
  font-weight: 500; border: 1px solid #a7f3d0;
}
.attendance-merge-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--border, #e5e7eb); }
.attendance-merge-card-combined { font-size: 12px; color: var(--text, #0f172a); display: flex; align-items: center; gap: 6px; }
.attendance-merge-card-combined-label { font-size: 10px; font-weight: 600; color: var(--muted, #64748b); letter-spacing: 0.05em; margin-right: 4px; }
.attendance-merge-card-shared { font-size: 11px; }
.attendance-merge-card-actions { display: flex; gap: 8px; }

[data-theme="dark"] .attendance-merge-card { background: var(--gray-900, #0f172a); border-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-merge-card-title,
[data-theme="dark"] .attendance-merge-card-col-name,
[data-theme="dark"] .attendance-merge-card-meta-val { color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-merge-card-col { background: var(--gray-800, #1e293b); }
[data-theme="dark"] .attendance-merge-card-meta-label,
[data-theme="dark"] .attendance-merge-card-vs,
[data-theme="dark"] .attendance-merge-card-combined-label { color: var(--gray-400, #94a3b8); }
[data-theme="dark"] .attendance-merge-card-foot { border-top-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-merge-reason-chip { background: rgba(16,185,129,0.15); color: #6ee7b7; border-color: rgba(16,185,129,0.3); }
[data-theme="dark"] .attendance-merge-acc-high { background: rgba(34,197,94,0.18); color: #86efac; }
[data-theme="dark"] .attendance-merge-acc-med { background: rgba(245,158,11,0.2); color: #fcd34d; }
[data-theme="dark"] .attendance-merge-acc-low { background: rgba(239,68,68,0.2); color: #fca5a5; }

.attendance-merge-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.attendance-merge-col { background: var(--surface-sunken, #f9fafb); padding: 10px; border-radius: 8px; }
.attendance-merge-col h4 { margin: 0 0 4px; font-size: 14px; }
.attendance-merge-active { font-size: 18px; font-weight: 700; margin-top: 6px; }
.attendance-merge-actions { display: flex; gap: 8px; }

.attendance-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted, #6b7280);
  font-size: 13px;
}
.attendance-spinning i { animation: attspin 1s linear infinite; }
@keyframes attspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Dark-mode overrides — platform toggles via data-theme attribute on <html>. */
/* Sidebar (left rail) */
[data-theme="dark"] .attendance-sidebar { background: var(--gray-900, #0f172a); border-right-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-sidebar-head { border-bottom-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-sidebar-title { color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-sub-tab { color: var(--gray-200, #e2e8f0); }
[data-theme="dark"] .attendance-sub-tab:hover { background: var(--gray-800, #1e293b); }
[data-theme="dark"] .attendance-sub-tab.active { background: #1e3a8a; color: #93c5fd; }
[data-theme="dark"] .attendance-status { border-top-color: var(--gray-700, #334155); color: var(--gray-400, #94a3b8); }
[data-theme="dark"] .attendance-sidebar-help { color: var(--gray-500, #64748b); }

/* KPI strip — explicitly recolor numbers + sub-label so they're readable on dark bg */
[data-theme="dark"] .attendance-kpi {
  background: var(--gray-800, #1e293b);
  border-color: var(--gray-700, #334155);
  color: var(--gray-100, #f1f5f9);
}
[data-theme="dark"] .attendance-kpi-num { color: var(--gray-50, #f8fafc); }
[data-theme="dark"] .attendance-kpi-label { color: var(--gray-400, #94a3b8); }
[data-theme="dark"] .attendance-kpi-sub { color: var(--gray-500, #64748b); }
[data-theme="dark"] .attendance-kpi-primary {
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  border-color: #b91c1c;
}
[data-theme="dark"] .attendance-kpi-big { color: #fecaca; }
[data-theme="dark"] .attendance-kpi-primary .attendance-kpi-label { color: #fecaca; }
[data-theme="dark"] .attendance-kpi-primary .attendance-kpi-sub { color: #fca5a5; }

/* Filter inputs / chips */
[data-theme="dark"] .attendance-input {
  background: var(--gray-800, #1e293b);
  border-color: var(--gray-700, #334155);
  color: var(--gray-100, #f1f5f9);
}
[data-theme="dark"] .attendance-chip {
  background: var(--gray-800, #1e293b);
  border-color: var(--gray-700, #334155);
  color: var(--gray-200, #e2e8f0);
}
[data-theme="dark"] .attendance-chip.active { background: #1e3a8a; color: #93c5fd; border-color: #1e3a8a; }

/* Table card + rows */
[data-theme="dark"] .attendance-table-wrap { background: var(--gray-900, #0f172a); border-color: var(--gray-700, #334155); }
/* ── Dark-mode legibility: text that sits on the REAL dark table surface ──
   This whole [data-theme="dark"] attendance block was written against
   Tailwind's grey scale — read the fallback literals: #f1f5f9 (slate-100) for
   text, #1e293b (slate-800) for surfaces. There, 100 is nearly white and 800
   is nearly black. Later the ramp was FLIPPED in dark ("so var(--gray-900)
   text stays light in dark mode") to rescue untouched legacy rules, which
   silently inverted every reference in here: the intended-dark surfaces went
   light, and the intended-light text went dark.

   Most of the block survived that by accident — an element whose own
   background flipped to light still reads fine with dark text, which is why
   .attendance-kpi/-num/-input measure 12-14:1 today. The casualties are the
   seven rules below: transparent text sitting on the genuinely dark table,
   measured at 1.05-1.43:1 in a live dark-mode pass, i.e. invisible.

   Fixed by naming the semantic token instead of a rung of a ramp whose
   direction depends on the theme — --text/--text-secondary mean the same
   thing in both. Only `color` is touched: the surfaces stay exactly as the
   team sees them today, they are simply readable again. Fixing the ramp
   itself would repaint every attendance page, which is a separate decision. */
[data-theme="dark"] .attendance-row { color: var(--text); border-bottom-color: var(--gray-800, #1e293b); }
[data-theme="dark"] .attendance-row:hover { background: var(--gray-800, #1e293b); }
[data-theme="dark"] .attendance-row-head {
  background: linear-gradient(180deg, var(--gray-900, #0f172a) 0%, var(--gray-800, #1e293b) 100%);
  color: var(--gray-400, #94a3b8);
  border-bottom-color: var(--gray-700, #334155);
}
[data-theme="dark"] .attendance-group-name { color: var(--text); }
[data-theme="dark"] .attendance-cell-teacher { color: var(--text-secondary); }
[data-theme="dark"] .attendance-cell-num { color: var(--text); }
[data-theme="dark"] .att-active-n { color: var(--text); }
[data-theme="dark"] .att-active-divider { color: var(--gray-600, #475569); }
[data-theme="dark"] .att-active-d { color: var(--gray-400, #94a3b8); }
[data-theme="dark"] .attendance-rate-num { color: var(--text); }
[data-theme="dark"] .attendance-cell-showup { color: var(--text-secondary); }

/* Sparkline (line is currentColor; keep accent blue) */
[data-theme="dark"] .attendance-spark { color: #60a5fa; }

/* Drill-down panel */
[data-theme="dark"] .attendance-drill { background: var(--gray-900, #0f172a); border-left-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-drill-head { border-bottom-color: var(--gray-700, #334155); color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-drill-head h3 { color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-drill-head h3.attendance-drill-title-linked { color: #60a5fa; }
[data-theme="dark"] .attendance-drill-head h3.attendance-drill-title-linked:hover { text-decoration-color: #60a5fa; }
[data-theme="dark"] .attendance-roster-name-linked { color: #60a5fa; }
[data-theme="dark"] .attendance-drill-meta { border-bottom-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-meta-chip { background: var(--gray-800, #1e293b); border-color: var(--gray-700, #334155); color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-meta-chip-level { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; }
[data-theme="dark"] .attendance-meta-label { color: var(--gray-500, #64748b); }
[data-theme="dark"] .attendance-meta-link { color: #93c5fd; }
[data-theme="dark"] .attendance-drill-strip { background: var(--gray-800, #1e293b); border-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-drill-stat-label { color: var(--gray-500, #64748b); }
[data-theme="dark"] .attendance-drill-stat-value { color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-drill-section-title { color: var(--gray-400, #94a3b8); border-bottom-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-drill-session { border-bottom-color: var(--gray-800, #1e293b); }
[data-theme="dark"] .attendance-drill-session-date { color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-drill-teacher-dot.on { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .attendance-drill-teacher-dot.off { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .attendance-drill-spark-caption { color: var(--gray-500, #64748b); }

/* Roster legend + dots row */
[data-theme="dark"] .attendance-roster-legend { background: var(--gray-800, #1e293b); border-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-roster-legend-text { color: var(--gray-300, #cbd5e1); }
[data-theme="dark"] .attendance-roster-row { border-bottom-color: var(--gray-800, #1e293b); color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-roster-name { color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-roster-dates-row { color: var(--gray-500, #64748b); border-bottom-color: var(--gray-700, #334155); }
[data-theme="dark"] .attendance-roster-col-label { color: var(--gray-500, #64748b); }
[data-theme="dark"] .attendance-roster-date-label { color: var(--gray-300, #cbd5e1); }
[data-theme="dark"] .attendance-roster-dots-direction { color: var(--gray-500, #64748b); }
[data-theme="dark"] .attendance-dot-off { background: var(--gray-800, #1e293b); border-color: var(--gray-600, #475569); }

/* Merging modal */
[data-theme="dark"] .attendance-merge-col { background: var(--gray-800, #1e293b); }
[data-theme="dark"] .attendance-merge-col h4 { color: var(--gray-100, #f1f5f9); }
[data-theme="dark"] .attendance-merge-active { color: var(--gray-100, #f1f5f9); }

/* Unmapped banner */
[data-theme="dark"] .attendance-unmapped-banner { background: #422006; border-color: #92400e; color: #fde68a; }
[data-theme="dark"] .attendance-unmapped-row { background: var(--gray-800, #1e293b); border-color: #92400e; }

/* Status chips (Students tab) */
[data-theme="dark"] .attendance-status-active { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .attendance-status-brief { background: #78350f; color: #fdba74; }
[data-theme="dark"] .attendance-status-at_risk { background: #78350f; color: #fbbf24; }
[data-theme="dark"] .attendance-status-inactive { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .attendance-status-new { background: #312e81; color: #a5b4fc; }
[data-theme="dark"] .attendance-dot-brief { background: #c2410c; border-color: #f97316; }

/* =====================================================================
   RESPONSIVE (1100–2560) — additive layer, keeps the current look.
   Design + responsiveness only; no behavioural changes. Every rule here
   is range-bounded with min-width:769px so it NEVER overrides the
   existing <768px mobile stack (app.css ~3082). Organized by step:
   STEP 1 = shell (sidebar/profile widths) + topbar. Later surface
   blocks get appended below this banner.
   ===================================================================== */

/* ── STEP 1·0 · Kill a pre-existing horizontal scrollbar ───────────────
   The off-canvas "My Workspace" drawer is position:fixed and parks just
   past the right edge, leaking ~11px of page scroll at every width.
   Nothing in this app scrolls the ROOT horizontally (wide tables scroll
   inside their own .*-table-wrap containers), so clip the root x-axis. */
html { overflow-x: hidden; }

/* ── STEP 1a · Fluid shell widths ──────────────────────────────────────
   The default grid is var(--sidebar-w:360px) | chat | 340px profile.
   On a 13–16" laptop that fixed chrome (~700px when the profile is open)
   crushes the chat. Scale the sidebar + profile column down as the
   viewport narrows so the chat keeps usable width. Big screens (>1440)
   are unchanged. The profile literal (340px) is re-declared here because
   the base rules hard-code it; the sidebar uses var(--sidebar-w) so
   overriding the var cascades to every layout automatically. */
@media (min-width: 1281px) and (max-width: 1440px) {
  :root { --sidebar-w: 320px; }
  .main.with-profile, .main.with-conv-details {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 320px;
  }
  .main.sidebar-collapsed.with-profile, .main.sidebar-collapsed.with-conv-details {
    grid-template-columns: 0 minmax(0, 1fr) 320px;
  }
}
@media (min-width: 1141px) and (max-width: 1280px) {
  :root { --sidebar-w: 288px; }
  .main.with-profile, .main.with-conv-details {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 304px;
  }
  .main.sidebar-collapsed.with-profile, .main.sidebar-collapsed.with-conv-details {
    grid-template-columns: 0 minmax(0, 1fr) 304px;
  }
}
@media (min-width: 769px) and (max-width: 1140px) {
  :root { --sidebar-w: 256px; }
  .main.with-profile, .main.with-conv-details {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 288px;
  }
  .main.sidebar-collapsed.with-profile, .main.sidebar-collapsed.with-conv-details {
    grid-template-columns: 0 minmax(0, 1fr) 288px;
  }
}

/* ── STEP 1b · Topbar condense ─────────────────────────────────────────
   Keep the centered pill of dropdown tabs on one line as the bar narrows
   by trimming padding / gap / font. Same look, just tighter. */
@media (min-width: 769px) and (max-width: 1280px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .view-tabs { margin-left: 8px; gap: 2px; padding: 3px; }
  .view-tab { padding: 7px 10px; font-size: 12px; gap: 5px; }
  .topbar > .topbar-right { gap: 6px; }
}
@media (min-width: 769px) and (max-width: 1140px) {
  .view-tab { padding: 6px 8px; }
  .view-tab [data-lucide] { width: 14px; height: 14px; }
  /* Last resort if the pill still can't fit: let the tab row scroll
     horizontally rather than overflow the bar or shove the user pill. */
  .view-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .view-tabs::-webkit-scrollbar { display: none; }
}

/* URGENT MERGE pill — re-tune for dark */
[data-theme="dark"] .attendance-pill-urgent { background: #450a0a; color: #fecaca; border-color: #b91c1c; }
[data-theme="dark"] .attendance-pill-warn { background: #422006; color: #fde68a; border-color: #92400e; }

[data-theme="dark"] .attendance-empty { color: var(--gray-500, #64748b); }


/* =====================================================================
   RESPONSIVE STEP 2 — per-surface (1100–2560px). Authored + adversarially
   reviewed by a multi-agent pass; assembled single-writer. Every @media is
   min-width-guarded (>=769/1001/1141/1281) so the <768 mobile stack and the
   Step 1 shell rules are never overridden. CSS-only, vars-only, look kept.
   ===================================================================== */


/* ====== SURFACE: tickets ====== */
/* ---- Tickets table (responsive, 1100–2560px) ----
   Scoped to #ticketsTable ONLY. .tickets-row / .tickets-cell are SHARED
   with #closingTable, #restTable, #recordingsTable and the attendance
   tables (each overrides grid-template-columns itself), so every rule
   below is prefixed with #ticketsTable to avoid leaking into them.
   The shell (.main/.sidebar/.topbar/profile panels) is owned by Step 1
   and is NOT touched here. Goals:
     1) Keep the wrap scrolling cleanly (already overflow:auto + sticky
        header) and make the ticket-identity columns (checkbox + name)
        STICKY to the left so they stay readable while the team scrolls
        the 13-column queue sideways.
     2) Shrink the table's min-content floor (~1558px) at narrower desktop
        widths by tightening the oversized fixed/min tracks to fluid
        clamp()/min values — WITHOUT hiding any of the 13 columns — so the
        last cells stop protruding past the rounded border around ~1280px.
   All colours come from existing CSS variables → dark mode is preserved.
   The full grid track list is re-declared (a grid template can't be
   partially overridden by cascade) but the column COUNT/ORDER is identical
   to the base rule at .tickets-row. */

/* --- Sticky identity columns (checkbox col 1 + name col 2) ---
   Active across the whole desktop range so the ticket name never scrolls
   out of view on the inevitably-wide table. Sticky cells need their own
   opaque background to cover rows passing underneath; we mirror the
   existing zebra / header / hover / selected backgrounds using the same
   variables the base rules use. */
@media (min-width: 769px) {
  #ticketsTable .tickets-cell-select { position: sticky; left: 0;  z-index: 1; }
  #ticketsTable .tickets-cell-name   { position: sticky; left: 36px; z-index: 1; }

  /* Default (odd / base) rows resolve to the table surface. */
  #ticketsTable .tickets-row .tickets-cell-select,
  #ticketsTable .tickets-row .tickets-cell-name {
    background: var(--surface);
  }
  /* Zebra: even body rows sit on the sunken fill. */
  #ticketsTable .tickets-row:nth-child(even):not(.tickets-row-head) .tickets-cell-select,
  #ticketsTable .tickets-row:nth-child(even):not(.tickets-row-head) .tickets-cell-name {
    background: var(--surface-sunken);
  }
  /* Header row also uses the sunken fill and must float above body cells. */
  #ticketsTable .tickets-row-head .tickets-cell-select,
  #ticketsTable .tickets-row-head .tickets-cell-head:first-of-type {
    background: var(--surface-sunken);
    z-index: 3; /* above body sticky cells (z:1) and sticky header context */
  }
  /* Hover wins over zebra so the sticky cells track the row highlight. */
  #ticketsTable .tickets-row:not(.tickets-row-head):hover .tickets-cell-select,
  #ticketsTable .tickets-row:not(.tickets-row-head):hover .tickets-cell-name {
    background: var(--surface-hover);
  }
  /* Selected rows keep the accent wash on the frozen cells too. */
  #ticketsTable .tickets-row.is-selected .tickets-cell-select,
  #ticketsTable .tickets-row.is-selected .tickets-cell-name {
    background: var(--accent-soft);
  }
  /* CASCADE FIX: a hovered + selected row must keep the frozen pair on the
     accent wash, not fall back to --surface-hover. The base rule
     `.tickets-row.is-selected:hover` (app.css:7265) keeps the rest of the
     row accent-washed via !important; this matches it on the sticky cells.
     Higher specificity (.is-selected + :hover) than the plain :hover rule
     above, and placed after it, so it wins. */
  #ticketsTable .tickets-row.is-selected:hover .tickets-cell-select,
  #ticketsTable .tickets-row.is-selected:hover .tickets-cell-name {
    background: var(--accent-soft);
  }
  /* Soft right edge so the frozen pair reads as a distinct pane when the
     rest of the row scrolls behind it. border-subtle keeps it quiet.
     NOTE: width-independent — renders a faint 1px seam even at >=1441px
     where the table does not overflow. Kept intentionally as the freeze
     affordance; gate behind max-width:1440 if a strict large-width no-op
     is required. */
  #ticketsTable .tickets-cell-name { box-shadow: 1px 0 0 var(--border-subtle); }
}

/* --- <=1440px: light fluid tightening of the big text columns ---
   Plenty of room here; only convert the two 220px-min free-text columns
   to a clamp so the table breathes without forcing scroll earlier than
   needed. All 13 tracks retained. */
@media (min-width: 769px) and (max-width: 1440px) {
  #ticketsTable .tickets-row {
    grid-template-columns:
      36px                                  /* Select checkbox */
      minmax(150px, 1.2fr)                  /* Ticket name */
      118px                                 /* Status */
      96px                                  /* Priority */
      140px                                 /* Feedback Status */
      minmax(120px, 1fr)                    /* Contact */
      120px                                 /* Assigned */
      minmax(110px, 1fr)                    /* Companies */
      minmax(clamp(180px, 18vw, 220px), 2fr)  /* Student feedback */
      minmax(clamp(180px, 18vw, 220px), 2fr)  /* Description */
      minmax(150px, 1.5fr)                  /* Agent note */
      104px                                 /* Last contact */
      96px;                                 /* Created */
  }
}

/* --- <=1280px: pull the fixed status/meta columns in so the
   min-content floor drops well under 1558px and the trailing cells stop
   protruding past the rounded right border. Still all 13 columns. --- */
@media (min-width: 769px) and (max-width: 1280px) {
  #ticketsTable .tickets-row {
    grid-template-columns:
      34px                                  /* Select checkbox */
      minmax(140px, 1.2fr)                  /* Ticket name */
      110px                                 /* Status */
      90px                                  /* Priority */
      130px                                 /* Feedback Status */
      minmax(110px, 1fr)                    /* Contact */
      110px                                 /* Assigned */
      minmax(104px, 1fr)                    /* Companies */
      minmax(clamp(160px, 16vw, 200px), 2fr)  /* Student feedback */
      minmax(clamp(160px, 16vw, 200px), 2fr)  /* Description */
      minmax(140px, 1.4fr)                  /* Agent note */
      100px                                 /* Last contact */
      90px;                                 /* Created */
    gap: 8px;                               /* a touch tighter to recover width */
  }
  /* Re-anchor the sticky name column to the narrower checkbox width. */
  #ticketsTable .tickets-cell-name { left: 34px; }
}

/* --- <=1140px: tightest desktop. Squeeze the floor further (≈1100px of
   content) so on a 1100–1200px laptop the table needs minimal—or no—
   horizontal scroll, with the frozen name column carrying identity if it
   still scrolls. No columns dropped. --- */
@media (min-width: 769px) and (max-width: 1140px) {
  #ticketsTable .tickets-row {
    grid-template-columns:
      32px                                  /* Select checkbox */
      minmax(132px, 1.1fr)                  /* Ticket name */
      104px                                 /* Status */
      86px                                  /* Priority */
      124px                                 /* Feedback Status */
      minmax(104px, .95fr)                  /* Contact */
      104px                                 /* Assigned */
      minmax(100px, .95fr)                  /* Companies */
      minmax(clamp(150px, 15vw, 190px), 1.9fr) /* Student feedback */
      minmax(clamp(150px, 15vw, 190px), 1.9fr) /* Description */
      minmax(132px, 1.3fr)                  /* Agent note */
      96px                                  /* Last contact */
      86px;                                 /* Created */
    gap: 8px;
    padding: 12px 14px;                     /* trim side padding a hair */
  }
  #ticketsTable .tickets-cell-name { left: 32px; }
}


/* ====== SURFACE: attendance ====== */
/* ---- Attendance dashboard ---- */
/* RESPONSIVE APPEND (Step 2). All queries are min-width:769px guarded.
   NOTE: there is currently NO <768px mobile stack for .attendance-view in
   this file (base 220px|1fr applies at all widths); the guards simply make
   these rules large-screen-only and a true no-op at >=1441px.
   FIX vs the proposed block: the drill-pane width and the show-drill grid's
   reserved 3rd column now use the EXACT SAME clamp expression in each
   breakpoint range, so the fixed overlay can never be wider than the
   reserved layout space (no content occlusion behind the pane).
   Vars-only, no colour/JS/shell changes. */

/* ── A · KPI strip: stop the 5-up cramp ───────────────────────────────── */
@media (min-width: 769px) and (max-width: 1440px) {
  .attendance-kpi-strip {
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 13vw, 190px), 1fr));
  }
  .attendance-kpi-primary { grid-column: span 2; }
}
@media (min-width: 769px) and (max-width: 1140px) {
  .attendance-kpi-strip {
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 22vw, 170px), 1fr));
  }
  .attendance-kpi-primary { grid-column: auto; }
}

/* ── B · Left sub-nav rail: shrink fluidly with the surface ────────────── */
/* The drill width is the SINGLE SOURCE OF TRUTH for the reserved 3rd
   column. In 769-1280 the rail = clamp(176px,15vw,220px), and the
   show-drill reserved column == the drill width clamp from section D
   (clamp(320px,30vw,420px)) so they stay in lockstep. The 769-1140 tier
   overrides BOTH the rail (unchanged) and the reserved column to match
   that tier's drill clamp (see section D). */
@media (min-width: 769px) and (max-width: 1280px) {
  .attendance-view { grid-template-columns: clamp(176px, 15vw, 220px) 1fr; }
  .attendance-view.show-drill {
    grid-template-columns: clamp(176px, 15vw, 220px) 1fr clamp(320px, 30vw, 420px);
  }
  .attendance-content { padding: 16px clamp(12px, 1.4vw, 20px); }
}

/* ── C · Wide 8-column table: scroll cleanly, never hide data ──────────── */
@media (min-width: 769px) and (max-width: 1280px) {
  .attendance-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* min-width matched to the base track-min sum (~924px) so the wrap gives
     ONE honest H-scrollbar instead of squashing columns. */
  .attendance-row,
  .attendance-row-head { min-width: 924px; }
}
@media (min-width: 769px) and (max-width: 1140px) {
  /* Tighten gaps + the flexible (fr) maxes so the row's natural width drops.
     Mins are untouched so nothing truncates harder than the base allows.
     min-width matched to this tier's track-min sum (~890px). */
  .attendance-row,
  .attendance-row-head {
    gap: 10px;
    grid-template-columns:
      minmax(180px, 2fr)
      minmax(130px, 1.2fr)
      64px
      88px
      minmax(150px, 1.4fr)
      76px
      66px
      66px;
    min-width: 890px;
  }
  .attendance-row { padding: 12px 14px; }
  .attendance-row-head { padding: 10px 14px; }
}

/* ── D · Drill pane: 460px fixed → fluid clamp, kept in sync with grid ─── */
/* The drill clamp here MUST equal the show-drill reserved-column clamp in
   the SAME media range (see section B / the 1140 override below). Big
   screens (>1280) keep the original fixed 460px untouched. */
@media (min-width: 769px) and (max-width: 1280px) {
  .attendance-drill { width: clamp(320px, 30vw, 420px); }
}
@media (min-width: 769px) and (max-width: 1140px) {
  .attendance-drill { width: clamp(300px, 34vw, 380px); }
  .attendance-view.show-drill {
    /* reserved column == this tier's drill clamp, exactly */
    grid-template-columns: clamp(176px, 15vw, 220px) 1fr clamp(300px, 34vw, 380px);
  }
}


/* ====== SURFACE: recordings ====== */
/* ---- Recordings table (responsive pass) — APPEND ONLY ----
   Surface: #recordingsView -> .tickets-table-wrap > #recordingsTable, rows = .rec-row.
   Every rule is scoped to #recordingsView so the shared Tickets table
   (#ticketsView .tickets-row) and every OTHER consumer of the shared
   .tickets-table-wrap (attendance / rest / closing) is untouched.
   Every @media is min-width:769px guarded so the <768 mobile stack is untouched.
   No colors, no vars changed, no JS, no shell (.main/.sidebar/--sidebar-w/.topbar/.view-tabs).

   Source offenders (verified against app.css):
     1) .rec-audio: fixed width:260px (app.css:9089) -> made fluid, capped at 260px
        so the wide look is byte-for-byte unchanged.
     2) The audio grid track: fixed 270px (app.css:9048) -> only goes fluid BELOW
        1280 (the cramped range). At >=1281 it stays the original 270px so the
        wide desktop look is an exact no-op.
   Horizontal scroll floor is ALREADY provided by .tickets-table { min-width:min-content }
   (app.css:7228) inside .tickets-table-wrap { overflow:auto } (app.css:7206) — we do
   NOT touch the shared wrapper and we do NOT add a second (lower) min-width floor. */

/* --- Fluid audio player (was fixed width:260px). Caps at 260px so the
   player is identical to today at any width >=769. --- */
@media (min-width: 769px) {
  #recordingsView .rec-audio {
    width: 100%;
    max-width: 260px;
    min-width: 0;
  }
  /* Play cell holds the "▶ 2m 8s" pill OR the native <audio>; let it shrink
     instead of forcing the whole row wider. */
  #recordingsView .rec-col-play {
    min-width: 0;
  }
}

/* --- 769–1280: the cramped range. Tighten the audio track + gap so the
   agent/caller/summary columns keep breathing room. Anything past the row's
   own min-content scrolls horizontally via the EXISTING shared wrapper
   (overflow:auto + .tickets-table min-width:min-content) — no data hidden,
   no new wrapper override, no fixed row min-width. --- */
@media (min-width: 769px) and (max-width: 1280px) {
  #recordingsView .rec-row {
    gap: 10px;
    grid-template-columns:
      64px                 /* time */
      minmax(130px, 1fr)   /* agent */
      minmax(140px, 1.2fr) /* caller */
      64px                 /* duration */
      90px                 /* urgency badge */
      minmax(110px, 1fr)   /* category */
      minmax(200px, 2.3fr) /* summary */
      clamp(180px, 22vw, 240px); /* audio player — fluid in this band */
  }
  #recordingsView .rec-audio { max-width: 240px; }
}

/* --- >=1281: keep the existing spacious look EXACTLY (no-op at >=1441 and
   above). We re-state the original 8 tracks verbatim, including the fixed
   270px audio track, so nothing shifts on wide desktops. This block exists
   only to neutralize the 769–1280 grid override above the breakpoint;
   it intentionally matches app.css:9038-9051 1:1. --- */
@media (min-width: 1281px) {
  #recordingsView .rec-row {
    gap: 12px;
    grid-template-columns:
      72px                 /* time */
      minmax(140px, 1fr)   /* agent */
      minmax(150px, 1.2fr) /* caller */
      72px                 /* duration */
      96px                 /* urgency badge */
      minmax(120px, 1fr)   /* category */
      minmax(220px, 2.5fr) /* summary */
      270px;               /* audio player — unchanged from base */
  }
}


/* ====== SURFACE: teamchat ====== */
/* ---- Team chat 3-pane ---- */
/* Desktop-only (>=769px) refinements for the team chat / team groups
   3-pane grid. Base rule (app.css:581) is UNCONDITIONAL
   `320px minmax(0,1fr) 360px`. Existing UNGUARDED steps:
     @media (max-width:1200px)  -> 280 / 320  (still 3 tracks)
     @media (max-width:1000px)  -> 280 / 1fr  (2 tracks) + slot display:none
   These appended, min-width:769-guarded rules layer ON TOP via source
   order so the side columns breathe with clamp() instead of hard-
   stepping, and so the 380px audio player stops forcing the chat pane
   wide. CRITICAL: the 3-track grid clamps are floored at min-width:1001px
   so they NEVER re-declare grid-template-columns inside the 769-1000px
   band where the existing rule intentionally drops to a 2-track layout
   (re-declaring 3 tracks there would reserve a dead empty track for the
   display:none workspace slot and steal width from the chat pane).
   Nothing here touches the <=768 mobile stack. Colors via existing vars
   only; no JS, no shell selectors. */

/* 1281-1440px: trim the slightly oversized side columns so the
   conversation pane keeps the lion's share of the width. */
@media (min-width: 1281px) and (max-width: 1440px) {
  .teamchat-grid {
    grid-template-columns:
      clamp(280px, 22vw, 320px)
      minmax(0, 1fr)
      clamp(300px, 24vw, 360px);
  }
}

/* 1001-1280px: overlaps the existing `max-width:1200` step (280/320,
   still 3 tracks). Replace the hard step with a fluid clamp so the
   1100-1280 band reads comfortably while the chat pane never collapses
   below its minmax(0,1fr). Floor is 1001px (NOT 769px) so the existing
   `max-width:1000` 2-track / drop-workspace layout is left fully intact
   below 1000px. */
@media (min-width: 1001px) and (max-width: 1280px) {
  .teamchat-grid {
    grid-template-columns:
      clamp(240px, 21vw, 290px)
      minmax(0, 1fr)
      clamp(260px, 23vw, 320px);
  }
}

/* The fixed `width:380px` voice-note player + its bubble
   `min-width:380px` force the conversation column wide on smaller
   desktops, eating into both side panes. Make the player fluid and
   relax the bubble min-width so it fits the available pane instead of
   dictating layout. This is safe at the 769px floor because it operates
   INSIDE the chat pane and does not redeclare any grid tracks, so it is
   harmless whether the layout is 2- or 3-column. Range matched so the
   wide-desktop look (380px) is preserved >1280px. */
@media (min-width: 769px) and (max-width: 1280px) {
  .teamchat-msg audio {
    width: clamp(220px, 26vw, 380px);
  }
  .teamchat-msg:has(audio) {
    min-width: clamp(220px, 26vw, 380px);
    max-width: 420px;
  }
}

/* 1001-1140px: below ~1140px the right workspace column gets cramped
   before the existing `max-width:1000` rule drops it entirely. Tighten
   side-pane floors so the 1100-1140 band (target lower bound) doesn't
   feel pinched. Floored at 1001px so it never redeclares grid tracks in
   the 769-1000 band (would reserve a dead 3rd track). */
@media (min-width: 1001px) and (max-width: 1140px) {
  .teamchat-grid {
    grid-template-columns:
      clamp(228px, 22vw, 272px)
      minmax(0, 1fr)
      clamp(248px, 24vw, 300px);
  }
}

/* Bubble relative-width nudge — safe at the 769px floor since it does
   not touch grid tracks, only the in-pane bubble max-width. */
@media (min-width: 769px) and (max-width: 1140px) {
  .teamchat-msg { max-width: 68%; }
  .teamchat-msg-image { max-width: 100%; }
  .teamchat-msg-file { max-width: 100%; }
}


/* ====== SURFACE: bulk ====== */
/* ---- Bulk send / Team Groups / HubSpot / Bulk email ----
   Surface: the two-pane grids inside .bulk-view sections — Bulk Send
   (#bulkSendView), HubSpot (#hubspotView), Bulk Email (#bulkEmailView)
   all use `.bulk-grid` (minmax(320,380) 1fr → left recipients pane is
   the FIXED column); Team Groups + Super Admin (#teamView) use
   `.team-grid` (1fr minmax(320,420) → right activity pane is the FIXED
   column). Base rules at app.css ~3367 and ~3751.

   Problem on 1100–1280px laptops: the fixed pane stays at its 380/420px
   ceiling, squeezing the fluid side (the message composer / users list)
   until the anti-ban grid + textarea + footer buttons feel cramped.
   Fix: swap the fixed pane's hard minmax ceiling for a viewport-fluid
   clamp() (same pattern as .modal-side's clamp(320px,28vw,420px)) so the
   pane gives width back to the composer/list as the screen narrows, and
   trim the 16px gutter a touch in the tightest band. Pure layout — no
   colors, no behaviour, no shell selectors. Every query is
   min-width:769px guarded so the <768px mobile stack is never overridden.

   Note: #teamView .team-grid (app.css ~3933) only overrides flex/height,
   not grid-template-columns, so re-declaring columns here cascades safely
   to both the Team Groups list and the Super Admin team panel. */

/* ── 1281–1440px · gentle clamp, full 16px gutter kept ───────────────── */
@media (min-width: 1281px) and (max-width: 1440px) {
  /* Bulk Send / HubSpot / Bulk Email — recipients pane (left) is fixed */
  .bulk-grid { grid-template-columns: clamp(320px, 26vw, 380px) minmax(0, 1fr); }
  /* Team Groups / Super Admin — activity pane (right) is fixed */
  .team-grid { grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 420px); }
}

/* ── 1141–1280px · narrow the fixed pane so the composer keeps width ─── */
@media (min-width: 1141px) and (max-width: 1280px) {
  .bulk-grid {
    grid-template-columns: clamp(300px, 25vw, 360px) minmax(0, 1fr);
    gap: 14px; padding: 14px;
  }
  .team-grid {
    grid-template-columns: minmax(0, 1fr) clamp(312px, 26vw, 392px);
    gap: 14px; padding: 14px;
  }
}

/* ── 769–1140px · tightest band · smaller fixed pane + gutter ────────── */
@media (min-width: 769px) and (max-width: 1140px) {
  .bulk-grid {
    grid-template-columns: clamp(280px, 27vw, 332px) minmax(0, 1fr);
    gap: 12px; padding: 12px;
  }
  .team-grid {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 360px);
    gap: 12px; padding: 12px;
  }
  /* Composer textarea: relax the 160px floor a hair so the composer
     body's vertical rhythm (textarea + anti-ban card + footer) stays
     comfortable when the panel is shorter. Still generously tall. */
  .bulk-message-input { min-height: 140px; }
}


/* ====== SURFACE: schedule ====== */
/* ---- Today's Classes + Today's Clubs (schedule + clubs) ---- */
/* Append-only responsive layer. Every query is min-width:769px guarded so
   it NEVER touches the existing <768px mobile stack. Scope is limited to
   #scheduleView / #clubsView and the shared .schedule-* / .sched-* / .club-*
   selectors those two views render. No colors, no JS/HTML, no shell.
   The two offenders this fixes:
     1) the sticky filter chip bar overflowed at 1100-1280 — fixed by making
        the right-aligned search input fluid (flex) so it shrinks instead of
        pushing the row wide; and
     2) the 80px time column is proportionally large once the chat column
        narrows, squeezing .sched-body + .sched-actions — fixed by a fluid
        clamp() time column.
   IMPORTANT (changed from the proposed block): we do NOT touch
   .schedule-filters padding/margin. Its -20px side margin exists to make the
   sticky bar bleed edge-to-edge against the .bulk-body 20px padding; shrinking
   it to -16px would leave a 4px notch in the full-bleed bar. The overflow is
   fixed by the search-input flex rule alone, which is full-bleed-safe. */

/* ── 1440-and-down · gentle pre-tighten ──────────────────────────────────
   Trim the time column a touch and let chips breathe a little less so the
   sticky bar has slack before the harder breakpoints kick in. */
@media (min-width: 769px) and (max-width: 1440px) {
  /* Fluid time column: was a hard 80px. Tabular mono "HH:MM" needs ~52px;
     clamp keeps it readable but reclaims width for the name/actions. */
  #scheduleView .sched-row,
  #clubsView .sched-row {
    grid-template-columns: clamp(56px, 6vw, 72px) minmax(0, 1fr) auto;
    gap: 12px;
  }
  /* Chips: slightly tighter so more fit per wrapped line. */
  #scheduleView .sched-filter-btn,
  #clubsView .clubs-filter-btn,
  #clubsView .sched-filter-btn {
    padding: 5px 12px;
    font-size: 12.5px;
  }
}

/* ── 1280-and-down · stop the sticky bar overflowing ─────────────────────
   At this range the inline right-aligned search + full chips made the bar
   exceed its width. Let the search input become fluid (its inline
   max-width:280px stays the ceiling) so it can shrink instead of pushing
   the bar wide. We intentionally leave .schedule-filters padding/margin
   alone to preserve the sticky bar's edge-to-edge bleed. */
@media (min-width: 769px) and (max-width: 1280px) {
  /* Search box: allow it to shrink and grow within the wrapped row so it
     never forces overflow. Inline max-width:280px remains the cap. */
  #scheduleView .schedule-filters input[type="search"],
  #clubsView .schedule-filters input[type="search"] {
    flex: 1 1 200px;
    min-width: 160px;
  }
  /* Time column a bit narrower still in this band. */
  #scheduleView .sched-row,
  #clubsView .sched-row {
    grid-template-columns: clamp(54px, 5.4vw, 66px) minmax(0, 1fr) auto;
    padding: 11px 12px;
  }
  /* Keep the big mono time legible but a hair smaller so it fits the
     narrower column without clipping. */
  #scheduleView .sched-time,
  #clubsView .sched-time { font-size: 16px; }
  /* Action buttons: trim so the row's auto column doesn't crowd the name. */
  #scheduleView .sched-action-btn,
  #clubsView .sched-action-btn { padding: 6px 9px; }
  /* Clubs topic chip: was a hard 320px max — make it fluid so it ellipsizes
     sooner instead of stretching the row. */
  #clubsView .club-topic-chip { max-width: clamp(160px, 22vw, 320px); }
}

/* ── 1140-and-down · tightest supported desktop band ─────────────────────
   Sidebar is at its narrowest (Step 1) so the chat column is most cramped.
   Squeeze the row chrome a touch more and let the chip group + search wrap
   cleanly without any horizontal scroll on the sticky bar. */
@media (min-width: 769px) and (max-width: 1140px) {
  #scheduleView .sched-row,
  #clubsView .sched-row {
    grid-template-columns: clamp(50px, 7vw, 60px) minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 11px;
  }
  #scheduleView .sched-filter-btn,
  #clubsView .clubs-filter-btn,
  #clubsView .sched-filter-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
  /* Search can drop to its own wrapped line at the narrowest width. */
  #scheduleView .schedule-filters input[type="search"],
  #clubsView .schedule-filters input[type="search"] {
    flex: 1 1 180px;
  }
  /* Status-now pulse dot is offset by -16px margin assuming wider padding;
     nudge it so it still hugs the row's left edge at the tighter padding. */
  #scheduleView .sched-row.status-now::before,
  #clubsView .sched-row.status-now::before { margin-left: -13px; }
  /* Club expansion indent (70px) tracks the old 80px time column — pull it
     in so the member grid lines up under the narrower time column. */
  #clubsView .club-expansion { padding-left: 56px; }
}


/* ====== SURFACE: profile ====== */
/* ---- Profile / conversation-details panel ----
   Surface lives inside #profilePanel and #convDetailsPanel — the right rail
   that Step 1 shrinks from 340px to 320 / 304 / 288px as the viewport narrows.
   At 288px the inner content area is only ~238px, so .field-key's fixed
   min-width:100px leaves long values (emails, HubSpot IDs, URLs) ~130px and
   they crush/wrap awkwardly. These rules ADAPT the rail to its own width —
   no redesign, no color changes, no hidden data. Every query is
   min-width:769px guarded so the <768px mobile stack is untouched.
   Shell widths (the column itself) are owned by Step 1; we only style the
   contents of the panel. */

/* ── Tier A · widest responsive step (320px column, 1281–1440px) ──────────
   Barely tighter than the 340px default. Soften the field-key reservation a
   touch via the existing clamp() pattern so values get a few extra px while
   keeping the familiar two-column key|value row. Everything else stays. */
@media (min-width: 1281px) and (max-width: 1440px) {
  #profilePanel .field-key,
  #convDetailsPanel .field-key {
    min-width: clamp(82px, 30%, 100px);
  }
}

/* ── Tier B · mid step (304px column, 1141–1280px) ────────────────────────
   Column ~304px → inner ~256px. Keep the two-column row but shrink the key
   column further and trim card/body padding so the value gets real room.
   Force values + linkified URLs to wrap inside their box (never overflow). */
@media (min-width: 769px) and (max-width: 1280px) {
  /* reclaim a little horizontal space from the recessed paddings */
  #profilePanel .profile-body,
  #convDetailsPanel .conv-notes-list { padding: 10px; }
  #profilePanel .profile-card-body { padding: 10px; }

  /* key narrower, value wider — still side-by-side */
  #profilePanel .field-key,
  #convDetailsPanel .field-key {
    min-width: clamp(72px, 28%, 96px);
  }
  /* values + the inline link variant must wrap, not clip */
  #profilePanel .field-val,
  #convDetailsPanel .field-val { min-width: 0; overflow-wrap: anywhere; }
  #profilePanel .field-val .field-val-link,
  #convDetailsPanel .field-val .field-val-link { overflow-wrap: anywhere; }

  /* pinned-field rows carry extra L/R padding (18px + 24px) for the remove
     button — trim it so the value isn't squeezed twice at this width */
  #profilePanel .pinned-field-row { padding-left: 14px; padding-right: 20px; }

  /* contact-picker mini-fields are a 2-col grid — collapse to 1 col so the
     truncated value can use the full width instead of 60% of half */
  #profilePanel .contact-picker-row .cpr-fields { grid-template-columns: 1fr; }
  #profilePanel .contact-picker-row .cpr-val { max-width: 100%; }
}

/* ── Tier C · narrowest step (288px column, 769–1140px) ───────────────────
   Column 288px → inner content ~238px. The side-by-side key|value row can no
   longer give long values a usable width, so STACK each row to one column:
   key on its own line above a full-width value. This is the same idiom the
   file already uses for .ct-field / .ticket-card-fields (flex-direction:
   column). Nothing is hidden; values simply get the whole row to wrap into. */
@media (min-width: 769px) and (max-width: 1140px) {
  /* even tighter padding to maximise the readable column */
  #profilePanel .profile-body { padding: 8px; }
  #profilePanel .profile-card-body { padding: 8px 10px; }
  #convDetailsPanel .conv-notes-list,
  #convDetailsPanel .conv-activity-row { padding-left: 10px; padding-right: 10px; }

  /* stack: key over value */
  #profilePanel .field-row,
  #convDetailsPanel .field-row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  #profilePanel .field-key,
  #convDetailsPanel .field-key {
    min-width: 0;        /* drop the 100px reservation entirely */
    padding-top: 0;
  }
  #profilePanel .field-val,
  #convDetailsPanel .field-val {
    flex: none;          /* not sharing a row anymore */
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #profilePanel .field-val .field-val-link,
  #convDetailsPanel .field-val .field-val-link { overflow-wrap: anywhere; }

  /* editable rows: keep the pencil reachable on a stacked row by letting the
     row be a column but the pencil float to the value's trailing edge would
     need JS; instead keep the existing flow — the pencil still sits in the
     row and remains hover-revealed. Just ensure it doesn't force a 2nd
     column width. (no structural change, only safe sizing.) */

  /* pinned rows: minimal L/R so the stacked value spans the rail */
  #profilePanel .pinned-field-row { padding-left: 12px; padding-right: 18px; }

  /* contact-picker mini grid → single column, full-width values */
  #profilePanel .contact-picker-row .cpr-fields { grid-template-columns: 1fr; }
  #profilePanel .contact-picker-row .cpr-field { flex-direction: column; }
  #profilePanel .contact-picker-row .cpr-val {
    max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip;
  }

  /* conv-details tabs: tighten so "Notes / Activity + count" stay on one
     line without wrapping at the narrow width */
  #convDetailsPanel .conv-details-tab { padding: 12px 4px; font-size: 13px; gap: 4px; }
  #convDetailsPanel .conv-details-tab .conv-tab-count { padding: 1px 6px; min-width: 16px; }

  /* head title row: let the name ellipsis do its job in the slimmer head */
  #profilePanel .profile-head { padding: 10px 10px; }
}


/* ====== SURFACE: chatmedia ====== */
/* ---- Chat bubbles + audio + compose recorder ---- */
/* Step-2 surface: make voice-note players and the recorder waveform
   adapt to width. The chat pane narrows hard at 1100-1280px when the
   profile/conv-details + workspace columns are open; the fixed 380px
   audio width, the 380px min-width floor on voice-note bubbles, and the
   600px intrinsic recorder canvas all overflowed that pane. We only
   relax the FIXED floors to fluid values — bubble proportions, colors,
   and chrome are untouched. Every query is min-width:769 guarded so the
   sub-768 mobile stack from Step 1 is never overridden.
   NOTE: call rows reuse the base .bubble element with an added
   .call-bubble class (app.js: bubble.classList.add('call-bubble')) and
   already define their own .call-bubble audio { width:100% } +
   .call-bubble { max-width:280px }. A bare '.bubble audio' / '.bubble:has(audio)'
   override would win by source order and silently re-size call recordings,
   so the voice-note rules below are scoped '.bubble:not(.call-bubble)' to
   stay inside this surface. */

/* ── Recorder waveform canvas (always-on, not breakpoint-bound) ──────
   #recordWaveform carries an HTML width="600" attribute, which becomes
   the canvas's intrinsic (default) CSS width. .record-waveform already
   has flex:1 + min-width:0 so it can shrink, but pinning width/max-width
   neutralizes the 600px intrinsic basis entirely so it can never seed an
   overflow inside the record bar. Width-independent (no-op at large
   widths since the flex item already stretches). Scoped to >=769 so
   mobile is untouched. */
@media (min-width: 769px) {
  .record-waveform {
    width: 100%;
    max-width: 100%;
  }
}

/* ── Narrow chat pane: 1140-1280px ──────────────────────────────────
   Side panels open here, leaving the message canvas tight. Convert the
   voice-note bubble's hard 380px min-width floor to a fluid clamp and
   give the audio element a clamp width (still capped by max-width:100%
   to the bubble) so the scrubber stays usable without forcing the bubble
   wider than the pane. :not(.call-bubble) keeps call recordings on their
   own width:100% / 280px look. Bubble max-width caps are kept proportional. */
@media (min-width: 769px) and (max-width: 1280px) {
  .bubble:not(.call-bubble) audio,
  .teamchat-msg audio {
    width: clamp(220px, 30vw, 380px);
    max-width: 100%;
  }
  .bubble:not(.call-bubble):has(audio) {
    max-width: min(420px, 82%);
  }
  .teamchat-msg:has(audio) {
    max-width: min(420px, 82%);
    min-width: clamp(220px, 30vw, 380px);
  }
  /* Keep inline media from forcing the bubble past the pane. */
  .bubble img,
  .teamchat-msg-image,
  .teamchat-msg-file {
    max-width: 100%;
  }
}

/* ── Very narrow chat pane: <=1140px ────────────────────────────────
   At the tightest supported desktop width (all rails open on a 1100px
   shell) drop the voice-note floors further so the player never bleeds
   past the bubble, and let the audio fill the available bubble width.
   Stacked after the 1280 block so these tighter values win at 769-1140
   by source order at equal specificity. Still :not(.call-bubble)-scoped. */
@media (min-width: 769px) and (max-width: 1140px) {
  .bubble:not(.call-bubble) audio,
  .teamchat-msg audio {
    width: 100%;
    max-width: 100%;
  }
  .bubble:not(.call-bubble):has(audio) {
    max-width: 88%;
  }
  .teamchat-msg:has(audio) {
    max-width: 88%;
    min-width: clamp(200px, 42vw, 320px);
  }
}


/* ====== SURFACE: misc_tables ====== */
/* ---- Other dashboards (bot-health · mid-pipeline · team-activity · rest/closing) ---- */
/* Step-1 owns the shell; this block ONLY adapts these inner dashboard
 * surfaces for the 1100-2560px desktop band. Every query is min-width:769
 * guarded so it NEVER overrides the existing <=768 mobile stack, and never
 * conflicts with the file's existing (un-guarded, mobile-inclusive)
 * max-width:1100/1180 rules — those still own everything below 769px.
 *
 * The bot-health / mpr / tar cards live inside #teamView.bulk-view which
 * scrolls VERTICALLY (overflow-y:auto), so reflowing tile rows into more
 * rows is safe — nothing is horizontally clipped. The Rest/Closing tables
 * scroll HORIZONTALLY via .tickets-table-wrap (overflow:auto) +
 * .tickets-table{min-width:min-content}; we only shrink oversized FIXED px
 * columns to fluid clamps so they stop cramming, never hide data. */

/* ===================================================================
 * 1) Bot Health tiles — base is repeat(7); existing max-width:1100
 *    drops to 4. Fill the 1101-1440 band so 7 rigid columns stop
 *    cramping the big numbers. auto-fit keeps the current tile look,
 *    just lets them wrap into a 2nd row instead of squeezing.
 * =================================================================== */
@media (min-width: 769px) and (max-width: 1440px) {
  .bot-health-tiles {
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 14vw, 190px), 1fr));
  }
}

/* ===================================================================
 * 2) Mid-pipeline report (mpr)
 *    - .mpr-summary: base repeat(6); existing max-width:1180 -> 3.
 *      Bridge 1181-1440 with auto-fit so the 6 tiles reflow instead of
 *      crushing the 17px values.
 *    - .mpr-metric-grid (inside drill-down): base repeat(4), NO query
 *      at all — give it an auto-fit floor so it never overflows the
 *      narrower drill column at 1100-1280.
 *    - .mpr-thead/.mpr-row: existing max-width:1180 already retracks the
 *      6 data columns; nothing extra needed in the 769+ band (its
 *      minmax tracks distribute surplus fine on wide screens).
 * =================================================================== */
@media (min-width: 769px) and (max-width: 1440px) {
  .mpr-summary {
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 15vw, 200px), 1fr));
  }
}
@media (min-width: 769px) and (max-width: 1280px) {
  .mpr-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(96px, 11vw, 130px), 1fr));
  }
}

/* ===================================================================
 * 3) Team Activity Report (tar)
 *    - .tar-totals: base repeat(7, minmax(0,1fr)) with NO responsive
 *      query — by design it never wraps, but in 1100-1280 the 7 tiles
 *      get painfully thin. Let them reflow (auto-fit) ONLY in that band;
 *      parent #teamView scrolls vertically so a 2nd row is fine.
 *    - .tar-thead/.tar-row: base minmax(180px,1.7fr)+repeat(7,minmax(72px))
 *      ~684px+ of fixed minimums. Existing max-width:1100 tightens it for
 *      mobile. For 1101-1280 shrink the numeric columns a touch and the
 *      name column floor so the 8-col row fits without overflow.
 * =================================================================== */
@media (min-width: 769px) and (max-width: 1280px) {
  .tar-totals {
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 15vw, 200px), 1fr));
  }
  .tar-thead,
  .tar-row {
    grid-template-columns: minmax(150px, 1.5fr) repeat(7, minmax(64px, 1fr));
  }
}

/* ===================================================================
 * 4) Rest table (#restTable / .rest-table .tickets-row)
 *    Base row min ~1238px (160+100+120+150+110+100+110+96 + 36 + gaps).
 *    It scrolls cleanly already, but in 1100-1280 the rigid 100/110/120px
 *    columns waste width while forcing horizontal scroll early. Convert
 *    the oversized FIXED px columns to fluid clamps so the row first uses
 *    available width, then scrolls only when truly needed. Header reuses
 *    the same .tickets-row grid so it stays column-aligned automatically.
 * =================================================================== */
@media (min-width: 769px) and (max-width: 1280px) {
  .rest-table .tickets-row {
    grid-template-columns:
      36px                                      /* Checkbox */
      minmax(150px, 1.3fr)                      /* Student */
      clamp(84px, 8vw, 100px)                   /* Bucket pill */
      clamp(96px, 9vw, 120px)                   /* Program */
      minmax(130px, 1fr)                        /* Paid / Owed stack */
      minmax(96px, 0.9fr)                       /* First session */
      clamp(84px, 8vw, 100px)                   /* Days left */
      minmax(96px, 0.9fr)                       /* Status */
      clamp(92px, 9vw, 110px)                   /* Last contact */
      96px;                                     /* Actions */
  }
}

/* ===================================================================
 * 5) Closing Groups table (#closingTable .closing-row)
 *    2026-07-18: the base grid is proportional minmax now (min sum ~1336px)
 *    and shrinks/grows at every width — the old 1100-1280 clamp override
 *    became redundant and was removed. Below ~1350px the .tickets-table-wrap
 *    horizontal scroll is the safety net.
 * =================================================================== */


/* ====== SURFACE: modals ====== */
/* ---- Modals & pickers ---- */
/* Surface audit (1100–2560px): nearly everything here is already fluid or
   capped below the 1100px floor, so almost nothing needs a guard:
     • .modal-card (max-width 540) / .modal-lg (720) — fit 1100px easily.
     • .modal.modal-side .modal-card — already clamp(320px,28vw,420px).
     • .bulk-value-picker (260px) / .fwd-chat-list / .contact-picker-list,
       .doc-picker, templates list — all narrower than the modal-card cap.
     • .image-annotator-overlay / .image-editor-card — viewport-relative
       (96vw / 100vw) with max-width:1100px and canvas max-width:100%, so the
       canvas never overflows the root.
   The ONLY real cramping is the two image-editing TOOLBARS: at narrow desktop
   widths their many tools + color swatches + spacer + Done button compete on
   one row and wrap into ragged lines with oversized padding. The guards below
   only TIGHTEN spacing/padding at those widths so the row packs cleanly — same
   buttons, same colors, same look, just less air. All min-width:769 guarded so
   the <768px mobile stack is untouched. No max-width or fixed width is altered. */

/* ── Image annotation editor (.image-editor-*) toolbar condense ──────────── */
@media (min-width: 769px) and (max-width: 1280px) {
  /* The editor card is 96vw/max 1100px; base already resolves to
     min(900px,92vh) (height:92vh + max-height:900px). The max-height line
     below is a harmless no-op restatement — kept for documentation clarity. */
  .image-editor-card { max-height: min(900px, 92vh); }
  .image-editor-toolbar { gap: 4px; }
  .image-editor-tool { padding: 5px 8px; font-size: 12.5px; }
  .image-editor-color-row { margin-left: 4px; padding-left: 6px; }
}
@media (min-width: 769px) and (max-width: 1140px) {
  .image-editor-tool { padding: 5px 7px; gap: 4px; }
  .image-editor-tool i { width: 15px; height: 15px; }
  .image-editor-color { width: 20px; height: 20px; }
}

/* ── Team-chat image annotator (.image-annotator-*) toolbar condense ─────── */
@media (min-width: 769px) and (max-width: 1280px) {
  .image-annotator-toolbar { gap: 6px; padding: 8px 12px; }
  .image-annotator-toolbar .ia-tool { padding: 7px 11px; font-size: 13px; }
  .image-annotator-toolbar .ia-text-btn { padding: 7px 13px; font-size: 13px; }
  .image-annotator-toolbar .ia-swatches { gap: 6px; }
  /* Shrink the canvas frame padding a touch so the image gets more room
     once the toolbar has taken its (now tighter) slice. NOTE: because
     .image-annotator-canvas uses max-width/height:100%, this lets the image
     render marginally LARGER at 769–1280px — a deliberate, surface-scoped
     change, not strictly "same look". No-op at >=1441px. */
  .image-annotator-canvas-wrap { padding: 18px; }
}
@media (min-width: 769px) and (max-width: 1140px) {
  .image-annotator-toolbar { gap: 5px; padding: 8px 10px; }
  .image-annotator-toolbar .ia-tool { padding: 6px 9px; }
  .image-annotator-toolbar .ia-text-btn { padding: 6px 11px; }
  .image-annotator-toolbar .ia-icon-btn { width: 32px; height: 32px; font-size: 16px; }
  .image-annotator-toolbar .ia-swatch { width: 23px; height: 23px; }
  .image-annotator-canvas-wrap { padding: 14px; }
}

/* ===== Inline message translation (🌐 → Arabic) — shared across inbox,
   groups, team chat and email. Token-driven so dark mode adapts. ===== */
.meta-translate-btn {
  background: none; border: none; cursor: pointer;
  padding: 0 2px; margin: 0; font-size: 12px; line-height: 1;
  opacity: 0.55; filter: grayscale(0.2);
  transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.meta-translate-btn:hover { opacity: 1; transform: scale(1.18); filter: none; }
.meta-translate-btn.active { opacity: 1; filter: none; }
.msg-translation {
  margin-top: 6px; padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  direction: rtl; text-align: right;
}
.msg-translation-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent); margin-bottom: 4px;
}
.msg-translation-ico { font-size: 11px; }
.msg-translation-lang { flex: 1; text-align: right; }
.msg-translation-hide {
  background: none; border: none; cursor: pointer;
  color: var(--text-tertiary); font-size: 12px; line-height: 1; padding: 0 2px;
}
.msg-translation-hide:hover { color: var(--text); }
.msg-translation-body {
  font-size: 13.5px; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  direction: rtl; text-align: right;
}

/* ===== AI writing assistant (✨ compose / rewrite) ===== */
.ai-compose-btn { color: var(--accent); }
.ai-compose-btn:hover { background: var(--accent-soft); color: var(--accent); }
/* Keyboard focus ring for all the new AI/translate/tab controls (cyan, app-standard). */
.teamchat-tab:focus-visible,
.meta-translate-btn:focus-visible,
.msg-translation-hide:focus-visible,
.ai-compose-btn:focus-visible,
.email-fmt-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.ai-compose-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-kbd-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ai-kbd-toggle [data-lucide] { width: 15px; height: 15px; }
.ai-kbd-toggle:hover { background: var(--surface-sunken); color: var(--text); }
.ai-kbd-toggle.is-active { background: var(--accent-soft, rgba(13, 148, 136, 0.12)); color: var(--accent, #0d9488); border-color: var(--accent, #0d9488); }
.ai-kbd { margin-top: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-sunken, rgba(0, 0, 0, 0.03)); }
.ai-kbd.hidden { display: none; }
.ai-kbd-row { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.ai-kbd-row + .ai-kbd-row { margin-top: 4px; }
.ai-kbd-key {
  min-width: 34px; height: 36px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-elevated, #fff); color: var(--text);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 90ms ease, transform 90ms ease;
}
.ai-kbd-key:hover { background: var(--surface-sunken); }
.ai-kbd-key:active { transform: translateY(1px); background: var(--accent-soft, rgba(13, 148, 136, 0.14)); }
.ai-kbd-key.is-space { flex: 1; min-width: 120px; font-size: 13px; font-weight: 600; }
.ai-kbd-key.is-bksp { min-width: 56px; font-size: 17px; }
.ai-compose-controls { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ai-compose-controls #aiComposeLang { flex: 0 0 auto; width: auto; min-width: 96px; }
.ai-compose-controls #aiComposeLength { flex: 0 0 auto; width: auto; min-width: 84px; }
.ai-compose-actions { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; min-width: 220px; }
.ai-compose-actions #aiComposeCorrectBtn { flex: 0 0 auto; }
.ai-compose-actions #aiComposeGenBtn { flex: 1; }
.ai-compose-result { margin-top: 14px; }
#aiComposeDraft { line-height: 1.6; min-height: 120px; }
.btn.is-loading { opacity: 0.6; cursor: wait; }

/* ════════════════════════════════════════════════════════════════════════
   Placement Test view + modals — ported from Leads7 (2026-06-07).
   Two sub-views: Availability (slot grid) + Bookings (table). Styling kept
   verbatim from Leads7 public/app.css so the grid/table/pills read the same.
   The .test-view shell + horizontal sub-tab bar are support2-native.
   ════════════════════════════════════════════════════════════════════════ */

/* Shell — full-height column with a horizontal sub-tab bar on top. */
.test-view { display: flex; flex-direction: column; overflow: hidden; }
.test-sub-tabs {
  display: flex; gap: 6px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex: 0 0 auto;
}
.test-sub-tab {
  background: transparent; border: 0;
  padding: 8px 14px; border-radius: 8px 8px 0 0;
  font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text, #111827);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.test-sub-tab:hover { background: var(--surface-hover, #f3f4f6); }
.test-sub-tab.active { color: var(--accent, #2563eb); font-weight: 600; border-bottom-color: var(--accent, #2563eb); }
.test-sub-view { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; }
.test-sub-view.hidden { display: none; }
[data-theme="dark"] .test-sub-tab { color: var(--gray-200, #e2e8f0); }
[data-theme="dark"] .test-sub-tab:hover { background: var(--gray-800, #1e293b); }

/* ─── Recycle view sub-tabs (Recycle / Recently recycled) ─── */
.recycle-sub-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 16px; }
.recycle-sub-tab { background: transparent; border: 0; padding: 8px 14px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--text, #111827); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.recycle-sub-tab:hover { background: var(--surface-hover, #f3f4f6); border-radius: 8px 8px 0 0; }
.recycle-sub-tab.active { color: var(--accent, #2563eb); font-weight: 600; border-bottom-color: var(--accent, #2563eb); }
.recycle-sub-tab [data-lucide] { width: 16px; height: 16px; }
.recycle-sub-view.hidden { display: none; }
[data-theme="dark"] .recycle-sub-tab { color: var(--gray-200, #e2e8f0); }
[data-theme="dark"] .recycle-sub-tab:hover { background: var(--gray-800, #1e293b); }

/* ─── CEFR level badges (placement test grid + slot details) ─── */
.cefr-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.cefr-A0 { background: #fee2e2; color: #b91c1c; }
.cefr-A1 { background: #ffedd5; color: #c2410c; }
.cefr-A2 { background: #fef3c7; color: #a16207; }
.cefr-B1 { background: #dbeafe; color: #1d4ed8; }
.cefr-B2 { background: #e0e7ff; color: #4338ca; }
.cefr-C1 { background: #d1fae5; color: #047857; }
.cefr-C2 { background: #bbf7d0; color: #14532d; }

/* Pending-evaluation indicator on slot cells */
.ts-cell-pending-eval {
  display: inline-block; margin-left: 4px;
  padding: 1px 5px; border-radius: 999px;
  background: #fef3c7; color: #b45309;
  font-size: 10px; font-weight: 600;
}
.ts-cell-notes-dot {
  display: inline-block; margin-left: 4px;
  font-size: 11px; opacity: 0.7;
}

/* ─── Test schedule view ─── */
.ts-title-block { display: flex; flex-direction: column; gap: 2px; }
.ts-title-block h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.ts-subtitle { margin: 0; font-size: 13px; color: var(--text-tertiary); }

.ts-date-nav { display: flex; align-items: center; gap: 8px; }
.ts-date-input { width: 160px; }

.ts-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px;
  padding: 12px 20px; border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.ts-stat {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 6px 10px; min-width: 64px;
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.ts-stat-num { font-size: 16px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ts-stat-lbl { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }

.ts-grid-wrap { padding: 16px 20px 24px; overflow: auto; }
.ts-grid {
  display: grid;
  gap: 4px;
  align-items: stretch;
}
.ts-corner {
  background: var(--surface-sunken); color: var(--text-tertiary);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  position: sticky; top: 0; left: 0; z-index: 3;
}
.ts-teacher-head {
  background: var(--surface-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  font-weight: 600; font-size: 13px;
  position: sticky; top: 0; z-index: 2;
}
.ts-teacher-color {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.ts-teacher-name { color: var(--text); }
.ts-time {
  background: var(--surface-sunken); color: var(--text-secondary);
  font-size: 12px; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  position: sticky; left: 0; z-index: 1;
}
.ts-cell {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 8px;
  min-height: 40px;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  font-family: inherit;
  font-size: 11px; color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.ts-cell:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.ts-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ts-cell-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ts-cell-label  { font-size: 12px; color: var(--text); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ts-cell-available { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.ts-cell-available:hover { background: #d1fae5; }
.ts-cell-booked    { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.ts-cell-booked:hover { background: #bfdbfe; }
.ts-cell-confirmed { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
.ts-cell-confirmed:hover { background: #ddd6fe; }
.ts-cell-reminder  { background: #fef3c7; border-color: #fcd34d; color: #b45309; }
.ts-cell-reminder:hover { background: #fde68a; }
.ts-cell-in-test   { background: #fed7aa; border-color: #fb923c; color: #c2410c; font-weight: 600; }
.ts-cell-in-test:hover { background: #fdba74; }
.ts-cell-completed { background: #d1fae5; border-color: #34d399; color: #065f46; }
.ts-cell-completed:hover { background: #a7f3d0; }
.ts-cell-no-show   { background: #fee2e2; border-color: #f87171; color: #991b1b; }
.ts-cell-no-show:hover { background: #fecaca; }
.ts-cell-cancelled { background: #f3f4f6; border-color: #d1d5db; color: #9ca3af; text-decoration: line-through; }
.ts-cell-cancelled:hover { background: #e5e7eb; }
.ts-cell-missing   { background: transparent; color: var(--text-tertiary); border-style: dashed; cursor: default; }
.ts-cell-past      { background: #fafafa; color: #d1d5db; border: 1px dashed #e5e7eb; cursor: default; font-size: 11px; text-align: center; padding: 6px; }

.ts-empty {
  grid-column: 1 / -1;
  padding: 40px 20px; text-align: center;
  color: var(--text-tertiary); font-size: 13px;
}
.ts-empty-error { color: var(--danger); }

@media (max-width: 1280px) {
  .ts-stats { padding: 10px 14px; gap: 8px; }
  .ts-grid-wrap { padding: 12px 14px 18px; }
}
@media (max-width: 1024px) {
  .ts-stats { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; padding: 8px 12px; }
  .ts-stat { padding: 5px 8px; min-width: 0; }
  .ts-stat-num { font-size: 15px; }
  .ts-grid-wrap { padding: 10px 12px 16px; }
}

/* Test schedule modals */
.ts-slot-summary {
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.ts-slot-summary-row { font-size: 13px; color: var(--text); }
.ts-slot-summary-muted { color: var(--text-tertiary); font-size: 12px; }
.ts-slot-status-pill {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.ts-book-results {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 280px; overflow-y: auto;
}
.ts-book-result {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
  text-align: left; cursor: pointer; font-family: inherit; color: var(--text);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.ts-book-result:hover { background: var(--surface-hover); }
.ts-book-result.selected { border-color: var(--accent); background: var(--accent-soft); }
.ts-book-result-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ts-book-result-name  { font-size: 13px; font-weight: 600; }
.ts-book-result-stage { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.ts-book-result-phone { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.ts-book-empty { padding: 12px; text-align: center; color: var(--text-tertiary); font-size: 13px; }

/* Placement-test popup (chat header → calendar-plus icon) */
.pt-lead-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--bg-secondary, #f7f7f9);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pt-lead-card .pt-lead-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft, #ece9ff); color: var(--primary);
  font-weight: 600;
}
.pt-lead-card .pt-lead-name { font-weight: 600; font-size: 15px; }
.pt-lead-card .pt-lead-phone { font-size: 12px; color: var(--text-secondary); }
.pt-lead-card .pt-lead-stage {
  margin-left: auto; padding: 4px 10px; border-radius: 999px;
  background: var(--primary-soft, #ece9ff); color: var(--primary);
  font-size: 11px; font-weight: 500;
}
.pt-date-tabs {
  display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto;
  padding-bottom: 4px;
}
.pt-date-tab {
  flex: 0 0 auto; min-width: 76px;
  padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--bg-secondary, #f7f7f9);
  border: 1px solid var(--border);
  cursor: pointer; text-align: center;
  font-size: 12px; line-height: 1.3;
}
.pt-date-tab .pt-date-day { font-weight: 600; }
.pt-date-tab .pt-date-num { color: var(--text-secondary); font-size: 11px; }
.pt-date-tab .pt-date-free { color: var(--text-tertiary); font-size: 10px; margin-top: 2px; }
.pt-date-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pt-date-tab.active .pt-date-num,
.pt-date-tab.active .pt-date-free { color: rgba(255,255,255,0.85); }
.pt-agent-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.pt-teacher-block { margin-bottom: 18px; }
.pt-teacher-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-weight: 600; font-size: 14px;
}
.pt-teacher-color {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 10px;
}
.pt-teacher-free { color: var(--text-tertiary); font-size: 12px; font-weight: 400; }
.pt-slot-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
}
.pt-slot {
  padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--bg-secondary, #f7f7f9);
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer;
  transition: background 0.08s ease, border-color 0.08s ease;
}
.pt-slot:hover:not(:disabled) { background: var(--primary-soft, #ece9ff); border-color: var(--primary); }
.pt-slot.selected { background: var(--primary); color: #fff; border-color: var(--primary); }
.pt-slot.selected i { color: #fff; }
.pt-slot:disabled {
  opacity: 0.4; cursor: not-allowed;
  background: var(--bg-tertiary, #efeff2);
  text-decoration: line-through;
}
.pt-slot i { width: 13px; height: 13px; flex: 0 0 13px; color: var(--text-tertiary); }

.ts-book-error {
  margin-top: 10px;
  padding: 8px 12px; border-radius: var(--radius-md);
  background: var(--danger-soft); color: var(--danger);
  font-size: 12px;
}

/* ─── Tests / Bookings table view ─── */
.tests-toolbar {
  display: flex; gap: 8px; align-items: center;
  margin-left: auto;
}
.tests-date-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary, #6b7280);
}
.tests-date-input { width: 140px; }

.tests-body { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 12px; }

.tests-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.tests-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border, #e5e7eb);
  background: white;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tests-chip:hover { background: var(--bg-secondary, #f9fafb); border-color: #c7d2fe; }
.tests-chip.is-active {
  background: var(--accent, #4f46e5);
  color: white;
  border-color: var(--accent, #4f46e5);
}
.tests-chip-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: inherit;
  font-size: 11px; font-weight: 600;
  text-align: center;
}
.tests-chip.is-active .tests-chip-count {
  background: rgba(255,255,255,0.25);
}

.tests-search-row {
  display: flex; align-items: center; gap: 12px;
}
.tests-search { flex: 1; max-width: 480px; }
.tests-result-count { color: var(--text-tertiary, #9ca3af); font-size: 12px; }

.tests-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: white;
}
.tests-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}
.tests-table thead th {
  position: sticky; top: 0;
  background: var(--gray-50, #f9fafb);
  text-align: left;
  padding: 10px 12px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary, #6b7280);
  border-bottom: 1px solid var(--border, #e5e7eb);
  white-space: nowrap;
}
.tests-th-date { min-width: 110px; }
.tests-th-time { min-width: 70px; }
.tests-th-num { text-align: right; }

.tests-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.tests-table tbody tr:hover { background: rgba(99,102,241,0.06); }
.tests-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  vertical-align: middle;
}
.tests-td-date, .tests-td-time, .tests-td-num { white-space: nowrap; }
.tests-td-student { font-weight: 600; }
.tests-td-phone { font-variant-numeric: tabular-nums; color: var(--text-secondary, #6b7280); }
.tests-td-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tests-td-notes { color: var(--text-secondary, #6b7280); max-width: 280px; }
.tests-td-by { color: var(--text-tertiary, #9ca3af); font-size: 12px; }

.tests-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: #eef2ff; color: #4338ca;
  border: 1px solid transparent;
}
.tests-pill-stage { text-transform: capitalize; background: var(--surface-sunken); color: var(--text-secondary); }
.tests-status-pos     { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.tests-status-pending { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.tests-status-neg     { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.tests-rec-pos     { background: var(--success-soft); color: var(--success); }
.tests-rec-neg     { background: var(--danger-soft); color: var(--danger); }
.tests-rec-pending { background: var(--warning-soft); color: var(--warning); }

.tests-empty, .tests-loading {
  padding: 40px; text-align: center;
  color: var(--text-secondary, #6b7280);
  font-style: italic;
}
.tests-empty.hidden, .tests-loading.hidden { display: none; }

/* ===== Renew follow-up view (2026-06-10) ===== */
.renew-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.renew-dot-red    { background: #dc2626; }
.renew-dot-orange { background: #f59e0b; }
.renew-dot-yellow { background: #eab308; }
.renew-status-chips { padding-top: 0; }
#renewTable .renew-row {
  display: grid;
  grid-template-columns: 36px minmax(180px, 1.4fr) 170px 150px 150px 150px 40px 90px;
  gap: 12px; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 120ms ease;
}
#renewTable .renew-row:hover { background: var(--surface-hover); }
#renewTable .renew-row.is-selected { background: rgba(13, 148, 136, 0.06); }
#renewTable .renew-row-head {
  background: var(--surface-sunken);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary);
  position: sticky; top: 0; z-index: 5; cursor: default;
}
.renew-cell-name .renew-name { font-weight: 600; }
.renew-cell-name .renew-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.renew-end-date { font-variant-numeric: tabular-nums; font-size: 13px; }
.renew-cell-pack { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.renew-days-pill {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.renew-days-late  { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.renew-days-now   { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.renew-days-soon  { background: rgba(234, 179, 8, 0.16);  color: #854d0e; }
.renew-days-later { background: rgba(16, 185, 129, 0.12); color: #047857; }
.renew-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; min-height: 28px; white-space: nowrap;
  transition: filter 120ms ease;
}
.renew-status-pill:hover { filter: brightness(0.96); }
.renew-st-none      { background: var(--surface-sunken); color: var(--text-secondary); border-color: var(--border); }
.renew-st-contacted { background: rgba(59, 130, 246, 0.12);  color: #1d4ed8; }
.renew-st-promised  { background: rgba(168, 85, 247, 0.12);  color: #7e22ce; }
.renew-st-renewed   { background: rgba(16, 185, 129, 0.15);  color: #047857; }
.renew-st-refused   { background: rgba(220, 38, 38, 0.10);   color: #b91c1c; }
.renew-status-pop {
  position: fixed; z-index: 3000;
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 170px;
}
.renew-status-pop button {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 0; background: transparent; border-radius: 8px;
  cursor: pointer; font-size: 13px; min-height: 42px; text-align: left; color: var(--text);
}
.renew-status-pop button:hover { background: var(--surface-sunken); }
.renew-ticket-dot { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; display: inline-block; }
.renew-cell-actions { display: flex; gap: 6px; }
.renew-drawer-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.renew-d-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--border-subtle); font-size: 13px;
}
.renew-d-row .k { color: var(--text-secondary); flex: 0 0 auto; }
.renew-d-row .v { font-weight: 600; text-align: right; word-break: break-word; }
.renew-hist { margin-top: 14px; }
.renew-hist-item { font-size: 12px; color: var(--text-secondary); padding: 4px 0; }
.renew-table-note { padding: 10px 16px; font-size: 12px; color: var(--text-secondary); }
.renew-group-link { color: var(--accent, #0d9488); cursor: pointer; font-weight: 600; }
.renew-group-link:hover { text-decoration: underline; }
.renew-group-blocktext {
  font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 9px 11px; margin-top: 4px; max-height: 180px; overflow-y: auto;
}

/* ===== Unified Team hub — sectioned sidebar (2026-06-10) ===== */
.teamchat-section-head {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 10px 7px; margin-top: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); cursor: pointer; user-select: none;
  position: sticky; top: 0; background: var(--surface); z-index: 4;
  border-bottom: 1px solid var(--border-subtle);
}
.teamchat-section-head:hover { color: var(--text); }
.teamchat-section-chev { font-size: 10px; transition: transform 120ms ease; }
.teamchat-section-head.is-collapsed .teamchat-section-chev { transform: rotate(-90deg); }
.teamchat-section-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.teamchat-section-dot.dot-sales    { background: #10b981; }
.teamchat-section-dot.dot-support  { background: #3b82f6; }
.teamchat-section-dot.dot-teachers { background: #8b5cf6; }
.teamchat-section-dot.dot-admin    { background: #475569; }
.teamchat-section-dot.dot-rooms    { background: #f59e0b; }
.teamchat-section-dot.dot-groups   { background: #0d9488; }
.teamchat-section-count { font-weight: 600; color: var(--text-secondary); opacity: 0.75; }
.teamchat-section-online { margin-left: auto; font-size: 10px; font-weight: 600; color: #16a34a; text-transform: none; letter-spacing: 0; }
.teamchat-section-chip { margin-left: 6px; }
.teamchat-section-head .teamchat-section-chip { margin-left: auto; }
.teamchat-section-head .teamchat-section-online + .teamchat-section-chip { margin-left: 6px; }
.teamchat-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.teamchat-row-time { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.teamchat-row-time.has-unread { color: var(--accent, #0d9488); font-weight: 700; }
.teamchat-section-menu-title { font-size: 11px; font-weight: 700; color: var(--text-secondary); padding: 6px 10px 2px; }

/* ===== Unified inbox tab row (Inbox · Groups · Teachers · Team · Rooms) ===== */
/* 5 tabs + badges must FIT the sidebar width: drop the in-tab icons (labels
   carry the meaning, icons cost ~18px each) + compact sizing, so the full
   words always show — never "In… / Te…". overflow stays visible vertically so
   the 2px active underline isn't clipped; only horizontal overflow is hidden. */
.tabs { width: 100%; min-width: 0; overflow-x: hidden; gap: 2px; padding: 4px 3px; }
/* 5 tabs at full width: the label must read in full, so badges are OVERLAID
   (absolute, top-right corner) instead of inline — an inline badge ate ~30px
   and forced "In…/G…/Teache…". font-size:11.5 + tight letter-spacing fits the
   longest label ("Teachers") in the per-tab share. */
.tabs .tab {
  position: relative; gap: 0; flex: 1 1 0; min-width: 0;
  padding: 7px 2px; font-size: 11px; letter-spacing: -0.2px;
}
.tabs .tab [data-lucide], .tabs .tab svg { display: none; }
.tabs .tab > span:not(.tab-badge) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Overlaid count badge — doesn't consume label width, sits over the top-right
   corner of the tab so the full word always shows underneath. */
.tab-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: var(--danger, #ef4444); color: #fff;
  font-size: 8.5px; font-weight: 700; line-height: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.5px var(--surface-sunken);   /* ring blends into the row bg */
  pointer-events: none;
}
.tab.tab-active .tab-badge { box-shadow: 0 0 0 1.5px var(--surface); }  /* ring matches the active pill */
.tab-badge.soft { background: #dbeafe; color: #1d4ed8; }
[data-theme="dark"] .tab-badge.soft { background: oklch(0.45 0.10 250); color: #dbeafe; }
.inbox-team-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.inbox-team-pane .teamchat-active { flex: 1; min-height: 0; }
.inbox-team-pane .teamchat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.team-newroom-row {
  display: flex; align-items: center; justify-content: center;
  margin: 8px 9px 2px; padding: 9px; border: 1.5px dashed var(--border);
  border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
.team-newroom-row:hover { background: var(--surface-sunken); color: var(--accent, #0d9488); }
/* Super-admin room controls under "+ New room" — manage the registry and
   optionally surface rooms the admin is not a member of. */
.team-roomadmin-bar { display: flex; gap: 6px; margin: 4px 9px 6px; }
.team-roomadmin-bar button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text-secondary);
  font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.team-roomadmin-bar button:hover { background: var(--surface-hover); color: var(--text); }
.team-roomadmin-bar [data-lucide] { width: 13px; height: 13px; }
.team-roomadmin-toggle.is-on { background: var(--wa-soft); border-color: var(--wa); color: var(--wa-dark); }
.teamchat-row-tag.kind-notmine { background: var(--surface-sunken); color: var(--text-muted); }
/* "12 members" in a room header doubles as the member-editor trigger. */
.teamchat-active-sub.teamchat-sub-link { cursor: pointer; }
.teamchat-active-sub.teamchat-sub-link:hover { color: var(--wa-dark); text-decoration: underline; }
/* Room registry modal */
.trm-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.trm-toolbar .input { flex: 1; }
.trm-list { max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.trm-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
}
.trm-row:hover { background: var(--surface-hover); }
.trm-body { flex: 1; min-width: 0; }
.trm-name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; color: var(--text); }
.trm-sub { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trm-acts { display: flex; gap: 6px; flex-shrink: 0; }
/* Rooms vs WhatsApp team groups — fixed visual identities so the two kinds
   never blur together (team feedback 2026-06-10). */
.team-row-room { border-left: 3px solid #f59e0b; padding-left: 7px; }
.team-row-wagroup { border-left: 3px solid #0d9488; padding-left: 7px; }
.avatar.team-av-room {
  border-radius: 13px !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #fff !important; font-size: 19px !important; font-weight: 800;
}
.avatar.team-av-wagroup {
  background: linear-gradient(135deg, #34d399, #0d9488) !important;
  color: #fff !important; font-size: 17px !important;
}
.teamchat-row-tag.kind-room { background: var(--warning-soft); color: var(--warning); }
.teamchat-row-tag.kind-wa { background: var(--wa-soft); color: var(--wa-dark); }
/* Narrow sidebars (1100-1280 viewports): shave the last few px so 5 tabs never overflow. */
@media (min-width: 769px) and (max-width: 1280px) {
  .tabs { gap: 2px; padding: 4px 2px; }
  .tabs .tab { font-size: 11px; padding: 7px 1px; }
  .tab-badge { min-width: 13px; height: 13px; font-size: 8px; line-height: 13px; padding: 0 2px; top: 1px; right: 0; }
}
/* Section ▲▼ reorder controls — quiet until the header is hovered. */
.teamchat-section-ctrls { display: inline-flex; gap: 1px; margin-left: 6px; opacity: 0; transition: opacity 120ms ease; }
.teamchat-section-head:hover .teamchat-section-ctrls { opacity: 1; }
.tsc-btn {
  border: 0; background: transparent; cursor: pointer;
  font-size: 9px; line-height: 1; padding: 4px 5px; border-radius: 6px;
  color: var(--text-secondary);
}
.tsc-btn:hover { background: var(--surface-sunken); color: var(--accent, #0d9488); }
/* Pin for WA team groups (Rooms tab) — working-set groups stick to the top. */
.team-pin-btn {
  border: 0; background: transparent; cursor: pointer; font-size: 13px;
  padding: 4px 5px; border-radius: 7px; opacity: 0; transition: opacity 120ms ease;
  filter: grayscale(1); flex: 0 0 auto;
}
.teamchat-row:hover .team-pin-btn { opacity: 0.7; }
.team-pin-btn:hover { opacity: 1 !important; filter: none; background: var(--surface-sunken); }
.team-row-wagroup.is-pinned { background: rgba(13, 148, 136, 0.05); }
.team-row-wagroup.is-pinned .team-pin-btn { opacity: 0.85; filter: none; }
.team-pin-ind { font-size: 11px; margin-right: 2px; }

/* ============================================================
   EMAIL VIEW RESTYLE (2026-06-11) — token-driven so it matches
   the platform's cream design in light mode AND themes correctly
   in dark mode (it was half-hardcoded white/#111 before, which
   broke dark mode into a dark-sidebar/white-pane clash).
   Pure CSS override block — zero functional/DOM changes.
   ============================================================ */
/* — Sidebar shell — */
#emailView .email-sidebar-wa {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
#emailView .email-sidebar-wa .sidebar-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
#emailView .email-sidebar-wa .sidebar-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 20px; font-weight: 600; color: var(--text);
}
#emailView .email-sidebar-wa .sidebar-tabs {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
}
#emailView .email-sidebar-wa .sidebar-tab {
  color: var(--text-secondary);
  font-weight: 500; padding: 11px 12px;
  transition: color 120ms ease, background 120ms ease;
}
#emailView .email-sidebar-wa .sidebar-tab:hover { color: var(--text); background: var(--surface-sunken); }
#emailView .email-sidebar-wa .sidebar-tab.active {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 650;
}
/* — Thread rows — */
#emailView #emailThreadList .conv-item {
  border-bottom: 1px solid var(--border-subtle);
  padding: 11px 14px;
  transition: background 120ms ease;
}
#emailView #emailThreadList .conv-item:hover { background: var(--surface-hover); }
#emailView #emailThreadList .conv-item.active {
  background: var(--accent-soft, rgba(13, 148, 136, 0.08));
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}
#emailView .conv-item-name { color: var(--text); font-weight: 600; font-size: 13.5px; }
#emailView .etl-sender { color: var(--text); font-size: 13.5px; font-weight: 600; }
#emailView .etl-subject { color: var(--text-secondary); font-size: 12.5px; }
#emailView .etl-snippet { color: var(--text-tertiary, var(--text-secondary)); opacity: 0.85; }
#emailView .etl-row3 { color: var(--text-secondary); opacity: 0.8; font-size: 11.5px; }
#emailView .etl-time { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: 11px; }
/* Unread: bolder + accent dot + accent time (scannable hierarchy) */
#emailView .email-thread-item.unread .etl-sender,
#emailView .email-thread-item.unread .conv-item-name { font-weight: 750; }
#emailView .email-thread-item.unread .etl-sender::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: 1px;
}
#emailView .email-thread-item.unread .etl-subject { color: var(--text); font-weight: 600; }
#emailView .email-thread-item.unread .etl-time { color: var(--accent); font-weight: 700; }
/* — Thread pane / message cards — */
#emailView .email-message-list {
  background: var(--bg, var(--surface-sunken));
  padding: 18px 22px; gap: 14px;
}
#emailView .email-message {
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
#emailView .email-message.from-me {
  background: var(--accent-soft, rgba(13, 148, 136, 0.07));
  border-color: rgba(13, 148, 136, 0.35);
}
#emailView .email-message-head {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
#emailView .emh-sender { color: var(--text); font-weight: 650; }
#emailView .emh-meta { color: var(--text-secondary); }
#emailView .email-body-text { color: var(--text); }
/* External HTML bodies render in a white iframe by nature — give the card a
   white inner well in dark mode too so emails stay readable as designed. */
#emailView .email-body-iframe { border-radius: 0 0 13px 13px; }
#emailView .email-attachments { padding: 10px 16px 12px; gap: 8px; }
#emailView .email-attachment-chip {
  background: var(--surface-sunken); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; padding: 5px 11px;
}
#emailView .email-attachment-chip:hover { border-color: var(--accent); color: var(--accent); }
/* — Reply composer — */
#emailView .email-reply-textarea {
  background: var(--surface-elevated, var(--surface));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
#emailView .email-reply-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(13, 148, 136, 0.15));
}
#emailView .email-reply-placeholder {
  background: var(--surface-sunken); border-top: 1px solid var(--border);
  color: var(--text-secondary);
}
#emailView .email-compose-card {
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--border); border-radius: 14px;
}
#emailView .email-compose-body-textarea {
  background: var(--surface-elevated, var(--surface)); color: var(--text);
}
/* Search + filter row inherit the platform inputs already (.input/.search). */
.renew-missing-chip { border-color: var(--warning) !important; color: var(--warning); }
.renew-missing-chip .rest-chip-count { background: var(--warning-soft); color: var(--warning); }

/* ============================================================
   Clubs cross-club duplicate guard (2026-06-12) — chips shown when the
   sheet lists the same class under two clubs the same day, and when a
   group already received a club reminder today (send-log hit). */
.clubs-remind-dup-chip {
  font-size: 10px; padding: 1px 7px; border-radius: 999px; font-weight: 600;
  background: rgba(245, 158, 11, 0.14); color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35); white-space: nowrap;
}
[data-theme="dark"] .clubs-remind-dup-chip { color: #fbbf24; }
.clubs-remind-sent-chip {
  font-size: 10px; padding: 1px 7px; border-radius: 999px; font-weight: 600;
  background: rgba(16, 185, 129, 0.12); color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.35); white-space: nowrap;
}
[data-theme="dark"] .clubs-remind-sent-chip { color: #34d399; }
.clubs-remind-dup-banner {
  grid-column: 1 / -1; font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; color: #92400e;
  background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.30);
}
[data-theme="dark"] .clubs-remind-dup-banner { color: #fbbf24; }

/* ─── Mbrouk! ticket-solved celebration (ported from Leads7 2026-06-12) ───
   Full-viewport overlay, pointer-events: none so work continues underneath;
   only the centered card is interactive. Theme-aware via shared CSS vars.
   .cele-progress* kept from the source block (unused here — no sales
   objective bar on support2) so the two platforms' blocks stay diffable. */
.cele-overlay {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.cele-overlay.is-leaving { opacity: 0; transition: opacity .25s ease; }
.cele-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cele-card {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: min(420px, calc(100vw - 48px));
  padding: 28px 28px 24px;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: cele-pop .42s cubic-bezier(.2,.9,.3,1.25) both;
  animation-delay: .12s;
}
@keyframes cele-pop {
  from { transform: translate(-50%, -50%) scale(.88); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.cele-overlay.is-static .cele-card {
  animation: none;
  box-shadow: var(--shadow-lg), 0 0 0 12px var(--lougha-soft);
}
.cele-glyph { width: 52px; height: 52px; margin-bottom: 2px; }
.cele-glyph svg { width: 100%; height: 100%; }
.cele-title {
  font-family: var(--font-display, Georgia, serif);
  font-variation-settings: "opsz" 144;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--text);
}
.cele-line { font-size: 15px; color: var(--text-secondary); }
.cele-line strong { color: var(--text); font-variant-numeric: tabular-nums; font-size: 17px; }
.cele-sub { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); max-width: 100%; }
.cele-lead { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cele-pack {
  flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--success-soft); color: var(--success);
}
.cele-progress { width: 100%; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cele-progress-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.cele-progress-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--lougha), oklch(0.62 0.18 250));
  transition: width .9s cubic-bezier(.2,.8,.2,1);
  min-width: 2px;
}
.cele-progress-fill.is-done { background: linear-gradient(90deg, var(--success), oklch(0.70 0.17 150)); }
.cele-progress-label { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.cele-close,
.cele-mute {
  position: absolute; top: 10px;
  color: var(--text-muted);
}
.cele-close { right: 10px; }
.cele-mute { right: 48px; }
@media (prefers-reduced-motion: reduce) {
  .cele-card { animation: none; }
  .cele-canvas { display: none; }
  .cele-progress-fill { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Student Lifecycle Management (2026-06-16) — token-based, dark-mode adapts.
   ══════════════════════════════════════════════════════════════════════ */
#lifecycleView { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
/* KPI strip — compact; scrolls horizontally on narrow screens instead of wrapping tall */
.lifecycle-kpi-strip { display: flex; gap: 8px; padding: 10px 16px 8px; overflow-x: auto; flex: 0 0 auto; }
/* Lifecycle Test funnel sub-strip (2026-06-24) */
.lc-funnel-strip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 16px 8px; }
.lc-funnel-title { font-size:12px; font-weight:700; color:var(--text-secondary); display:inline-flex; align-items:center; gap:5px; }
.lc-funnel-title [data-lucide] { width:14px; height:14px; }
.lc-funnel-kpi { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); cursor:pointer; font-size:12.5px; font-weight:600; color:var(--text-secondary); transition:border-color .12s, background .12s; }
.lc-funnel-kpi:hover { border-color:var(--border-strong); }
.lc-funnel-num { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); }
.lc-fn-new.active { border-color:var(--text-tertiary); background:var(--surface-hover); color:var(--text); }
.lc-fn-sent.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.lc-fn-sent.active .lc-funnel-num { color:var(--accent); }
.lc-fn-done.active { border-color:var(--success); background:var(--success-soft); color:var(--success); }
.lc-fn-done.active .lc-funnel-num { color:var(--success); }
.lc-selectall { margin-left:auto; }
.lc-selectall.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }
.lc-send-all { margin-left:auto; }
.lc-cell-action { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.lc-fn-badge { font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:var(--radius-pill); }
.lc-fn-badge-new { color:var(--text-tertiary); background:var(--surface-hover); }
.lc-fn-badge-sent { color:var(--accent); background:var(--accent-soft); }
.lc-fn-badge-done { color:var(--success); background:var(--success-soft); }
.lc-fn-send { font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:6px; border:1px solid var(--border); background:var(--surface-sunken); color:var(--accent); cursor:pointer; }
.lc-fn-send:hover { background:var(--accent-soft); border-color:var(--accent); }
/* Lifecycle multi-select + bulk bar (2026-06-24) */
#lifecycleTable .lc-cell-name { display:flex; align-items:center; gap:8px; }
.lc-name-wrap { display:flex; flex-direction:column; min-width:0; }
.lc-name-wrap .lc-name, .lc-name-wrap .lc-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-select-cb { flex:0 0 auto; width:15px; height:15px; cursor:pointer; }
#lifecycleTable .lc-row.is-selected { background:var(--accent-soft); }
#lifecycleTable .lc-row.is-selected .lc-cell-name { background:var(--accent-soft); }
.lc-bulk-bar { display:flex; align-items:center; gap:10px; padding:8px 16px; flex-wrap:wrap; }
.lc-bulk-sender { font-size:12.5px; color:var(--text-secondary); display:inline-flex; align-items:center; gap:6px; }
.lc-bulk-sender select { font-size:12.5px; padding:4px 7px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--text); }
.lc-tpl-search { width:100%; margin-bottom:8px; padding:var(--input-pad-y-sm) var(--input-pad-x-sm); border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; }
.lc-tpl-newmeta { align-self:flex-start; margin:0 0 9px; font-size:12px; font-weight:600; padding:5px 12px; border-radius:8px; border:1px dashed var(--border-strong); background:transparent; color:var(--accent); cursor:pointer; }
.lc-tpl-newmeta:hover { background:var(--accent-soft); border-style:solid; }
.lc-nmt-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.lc-nmt-lbl { font-size:12px; font-weight:600; color:var(--text-secondary); min-width:118px; }
.lc-nmt-row .lc-input { flex:1 1 auto; }
.lc-nmt-input { padding:var(--input-pad-y-sm) var(--input-pad-x-sm); border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; }
.lc-nmt-vars { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:7px 0 4px; }
.lc-nmt-vars-lbl { font-size:11.5px; color:var(--text-tertiary); margin-right:2px; }
.lc-nmt-var { font-size:11px; font-weight:600; font-family:var(--mono, monospace); padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:var(--accent-soft); color:var(--accent); cursor:pointer; }
.lc-nmt-var:hover { border-color:var(--accent); }
.lc-tpl-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
.lc-tpl-chip { font-size:11.5px; font-weight:600; padding:4px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); cursor:pointer; transition:border-color .12s, background .12s, color .12s; }
.lc-tpl-chip:hover { border-color:var(--border-strong); }
.lc-tpl-chip.active { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.lc-tpl-list { max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin-bottom:10px; padding-right:2px; }
.lc-tpl-empty { padding:22px; text-align:center; color:var(--text-tertiary); font-size:13px; }
.lc-tpl-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:9px 12px; cursor:pointer; background:var(--surface); transition:border-color .12s, background .12s, box-shadow .12s; }
.lc-tpl-card:hover { border-color:var(--border-strong); background:var(--surface-hover); }
.lc-tpl-card.selected { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset; }
.lc-tpl-card-head { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lc-tpl-name { font-weight:700; font-size:12.5px; color:var(--text); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-tpl-badge { font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.lc-tpl-st-approved { color:var(--success); background:var(--success-soft); }
.lc-tpl-st-pending { color:var(--warning); background:var(--warning-soft); }
.lc-tpl-st-rejected { color:var(--danger); background:var(--danger-soft); }
.lc-tpl-st-local { color:var(--text-tertiary); background:var(--surface-hover); }
.lc-tpl-tag { font-size:9.5px; font-weight:600; padding:2px 8px; border-radius:999px; color:var(--accent); background:var(--accent-soft); }
.lc-tpl-lang { font-size:9.5px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; }
.lc-tpl-snippet { font-size:11px; color:var(--text-tertiary); margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-tpl-preview { background:var(--surface-sunken); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:12.5px; color:var(--text-secondary); white-space:pre-wrap; max-height:160px; overflow-y:auto; margin-bottom:8px; }
/* Custom template tags — chip row, per-card badge/assign, popover (2026-06-24) */
.lc-tpl-tagrow { margin-top:-2px; }
.tpl-tag-chip { display:inline-flex; align-items:center; gap:2px; font-size:11.5px; font-weight:600; padding:3px 5px 3px 11px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); cursor:pointer; }
.tpl-tag-chip.active { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.tpl-tag-chip-lbl { line-height:1; }
.tpl-tag-x { border:none; background:transparent; color:inherit; cursor:pointer; font-size:14px; line-height:1; padding:0 3px; opacity:.45; border-radius:50%; }
.tpl-tag-x:hover { opacity:1; color:var(--danger); }
.tpl-tag-add { font-size:11.5px; font-weight:600; padding:3px 11px; border-radius:999px; border:1px dashed var(--border-strong); background:transparent; color:var(--text-tertiary); cursor:pointer; }
.tpl-tag-add:hover { color:var(--accent); border-color:var(--accent); }
.tpl-tag-add-input { font-size:11.5px; padding:3px 9px; border-radius:999px; border:1px solid var(--accent); background:var(--surface); color:var(--text); width:120px; }
.tpl-tag-badge { font-size:9.5px; font-weight:600; padding:2px 8px; border-radius:999px; color:var(--accent); background:var(--accent-soft); white-space:nowrap; }
.tpl-tag-btn { background:transparent; border:none; cursor:pointer; font-size:13px; line-height:1; padding:2px 4px; opacity:.7; }
.tpl-tag-btn:hover { opacity:1; }
.tpl-tag-pop { position:fixed; z-index:100000; min-width:190px; max-height:280px; overflow-y:auto; background:var(--surface-elevated); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.28); padding:7px; display:flex; flex-direction:column; gap:3px; }
.tpl-tag-pop-row { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text); padding:4px 6px; border-radius:7px; cursor:pointer; }
.tpl-tag-pop-row:hover { background:var(--surface-hover); }
.tpl-tag-pop-empty { font-size:11.5px; color:var(--text-tertiary); padding:3px 6px; }
.tpl-tag-pop-new { font-size:12px; padding:5px 8px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--text); margin-top:3px; }
.lifecycle-kpi { flex: 1 0 auto; min-width: 92px; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s; }
.lifecycle-kpi:hover { border-color: var(--border-strong); }
.lifecycle-kpi.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lifecycle-kpi-num { font-size: 18px; font-weight: 800; line-height: 1.1; color: var(--text); }
.lifecycle-kpi-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.lifecycle-kpi.lc-kpi-conflict { border-color: var(--danger); }
.lifecycle-kpi.lc-kpi-conflict.active { box-shadow: inset 0 0 0 1px var(--danger); }
.lifecycle-kpi.lc-kpi-conflict .lifecycle-kpi-num { color: var(--danger); }
/* Compact toolbar — search + 4 filters + 2 toggles in ONE wrapping row */
.lifecycle-toolbar { display: flex; gap: 8px; align-items: center; padding: 0 16px 8px; flex-wrap: wrap; flex: 0 0 auto; }
.lc-input { height: 32px; padding: 0 var(--input-pad-x-sm); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; width: auto; flex: 0 0 auto; }
.lc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lc-search { flex: 1 1 200px; min-width: 150px; max-width: 340px; }
.lc-chip { height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-secondary); font-size: 12px; cursor: pointer; white-space: nowrap; }
.lc-chip svg { width: 14px; height: 14px; }
.lc-chip:hover { border-color: var(--border-strong); }
.lc-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.lc-tool-note { margin-left: auto; font-size: 12px; white-space: nowrap; }
/* Table fills the remaining height and scrolls under the sticky header row */
#lifecycleView .tickets-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
#lifecycleTable { display: flex; flex-direction: column; }
/* Students view = 14 cols: Student·Status·NewLevel·Group·Report·Pack·Start·GroupEnd·ClubEnd·Attendance·Tickets·Note·Action·⚠ */
#lifecycleTable .lc-row { display: grid; grid-template-columns: minmax(150px,1.5fr) 90px 68px minmax(115px,1.1fr) 76px 76px 76px minmax(105px,1fr) 88px 100px 100px minmax(130px,1.2fr) minmax(110px,1.1fr) minmax(100px,1fr) 88px 36px; gap: 8px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; font-size: 13px; min-width: 1572px; }
/* Groups view = 14 cols: Group·Level·Type·Schedule·Teacher·Start·Close+9·Status·#·Report6M·Report·Test·Note·edit */
#lifecycleTable.lc-groups-mode .lc-row { grid-template-columns: minmax(150px,1.6fr) 64px 82px minmax(115px,1.1fr) minmax(105px,1.1fr) 90px 102px 96px 40px 78px 78px 78px minmax(130px,1.3fr) 32px; min-width: 1358px; }
.lc-link { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-size: 12px; text-decoration: none; white-space: nowrap; }
.lc-link svg { width: 13px; height: 13px; }
.lc-link:hover { text-decoration: underline; }
/* Sticky first column (Student/Group name) — stays visible while scrolling wide table */
#lifecycleTable .lc-cell-name { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--border-subtle); }
#lifecycleTable .lc-row:not(.lc-row-head):hover .lc-cell-name { background: var(--surface-hover); }
#lifecycleTable .lc-row.lc-row-urgent .lc-cell-name { box-shadow: inset 3px 0 0 var(--danger); }
#lifecycleTable .lc-row-head .lc-cell-head:first-child { position: sticky; left: 0; z-index: 3; background: var(--surface-sunken); }
.lc-status-chip { display: inline-block; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.lc-cell-note { overflow: hidden; }
.lc-cell-note > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-cell-tk { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.lc-edit-hint { color: var(--text-muted); display: inline-flex; }
.lc-edit-hint svg { width: 14px; height: 14px; }
#lifecycleTable .lc-row:hover { background: var(--surface-hover); }
#lifecycleTable .lc-row-head { position: sticky; top: 0; z-index: 1; background: var(--surface-sunken); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); cursor: default; }
.lc-row-head .lc-cell-head.lc-sortable { cursor: pointer; user-select: none; }
.lc-row-head .lc-cell-head.lc-sortable:hover { color: var(--text); }
#lifecycleTable .lc-row.lc-row-urgent { border-left: 3px solid var(--danger); background: var(--danger-soft); }
.lc-cell, .lc-cell-name, .lc-cell-att { min-width: 0; overflow: hidden; }
.lc-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-days-pill { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; margin-left: 4px; }
.lc-days-over { background: var(--danger-soft); color: var(--danger); }
.lc-att-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.lc-att-dot.on { background: var(--success); }
.lc-att-dot.off { background: var(--text-muted); }
.lc-tk-badge { display: inline-block; min-width: 18px; text-align: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; border-radius: 6px; padding: 1px 5px; font-size: 11px; margin-right: 4px; }
.lc-cat-chip { display: inline-block; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: 1px 6px; font-size: 10px; margin: 1px 2px 1px 0; }
.lc-cell-flags { display: flex; gap: 2px; color: var(--warning); }
.lc-flag svg { width: 15px; height: 15px; }
.lc-action-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.lc-act-conflict { background: var(--danger-soft); color: var(--danger); }
.lc-act-issue { background: var(--accent-soft); color: var(--accent); }
.lc-act-renew { background: var(--warning-soft); color: var(--warning); }
.lc-act-club { background: var(--accent-soft); color: var(--accent); }
.lc-act-test { background: oklch(0.55 0.18 300 / 0.16); color: oklch(0.58 0.20 300); }
[data-theme="dark"] .lc-act-test { color: oklch(0.78 0.16 300); }
.lc-act-churned { background: var(--surface-sunken); color: var(--text-muted); }
.lc-act-ok { background: var(--success-soft); color: var(--success); }
.lc-act-unknown { background: var(--surface-sunken); color: var(--text-tertiary); }
.lc-sec { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.lc-sec-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; cursor: pointer; background: var(--surface-sunken); font-weight: 600; color: var(--text); }
.lc-sec-head svg { width: 16px; height: 16px; }
.lc-sec-title { flex: 1; }
.lc-sec-chev { display: inline-flex; transition: transform .15s; }
.lc-sec.open .lc-sec-chev { transform: rotate(180deg); }
.lc-sec-body { padding: 12px; display: none; }
.lc-sec.open .lc-sec-body { display: block; }
.lc-kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px; padding: 3px 0; font-size: 13px; }
.lc-kv-k { color: var(--text-muted); }
.lc-kv-v { color: var(--text); }
.lc-reason { margin: 6px 0 10px; color: var(--text-secondary); font-size: 13px; }
.lc-flags-box { margin: 8px 0; }
.lc-flag-row { background: var(--danger-soft); color: var(--danger); border-radius: 8px; padding: 6px 10px; font-size: 12px; margin-bottom: 4px; }
.lc-att-group { font-size: 13px; margin-top: 8px; }
.lc-att-gname { font-weight: 600; color: var(--text); }
.lc-att-dots { display: flex; gap: 4px; margin: 6px 0; flex-wrap: wrap; }
.lc-att-d { width: 13px; height: 13px; border-radius: 3px; }
.lc-att-d.full { background: var(--success); }
.lc-att-d.brief { background: var(--warning); }
.lc-att-d.miss { background: var(--danger-soft); border: 1px solid var(--danger); }
.lc-tl-row { font-size: 12px; color: var(--text-secondary); padding: 2px 0; }
.lc-tk-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--border-subtle); }
.lc-tk-subj { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-tk-stage { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.lc-tk-stage.open { background: var(--warning-soft); color: var(--warning); }
.lc-tk-stage.closed { background: var(--surface-sunken); color: var(--text-muted); }
.lc-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================================
   Team Scoring & Per-Agent Performance (gamified, 2026-06-18)
   Agent private page (#myPerformanceView) + admin Team Scoreboard
   (#teamScoreboard). Tones: green=success, amber=warning, red=danger.
   ============================================================================ */
.score-tone-green { --score-tone: var(--success); --score-tone-soft: var(--success-soft); }
.score-tone-amber { --score-tone: var(--warning); --score-tone-soft: var(--warning-soft); }
.score-tone-red   { --score-tone: var(--danger);  --score-tone-soft: var(--danger-soft); }

/* --- Agent page shell --- */
.mp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mp-head-right { display: flex; align-items: center; gap: 6px; }
.mp-month, .tsb-month { width: 140px; }
.mp-body { padding: 4px 2px 24px; display: flex; flex-direction: column; gap: 18px; }

/* --- Coming-soon placeholder (team sees this; super-admin sees real data) --- */
.mp-coming-soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 72px 24px; min-height: 380px;
  background: linear-gradient(135deg, var(--wa-soft), var(--surface));
  border: 1px solid var(--border); border-radius: 16px;
}
.mp-coming-soon-ico {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px;
  background: var(--wa); color: var(--accent-fg); box-shadow: var(--shadow-lg);
}
.mp-coming-soon-ico svg { width: 38px; height: 38px; }
.mp-coming-soon-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--wa-soft); color: var(--wa);
}
.mp-coming-soon-badge svg { width: 14px; height: 14px; }
.mp-coming-soon h3 { font-size: 22px; font-weight: 800; color: var(--text); margin: 4px 0 0; }
.mp-coming-soon p { font-size: 14px; color: var(--text-secondary); max-width: 460px; line-height: 1.6; margin: 0; }

/* --- Hero card (big points + tier + progress) --- */
.score-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 20px 22px; border-radius: 16px;
  background: linear-gradient(135deg, var(--score-tone-soft, var(--surface-elevated)), var(--surface));
  border: 1px solid var(--border);
}
.score-hero-left { display: flex; align-items: center; gap: 16px; }
.score-hero-ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--score-tone, var(--accent)); color: #fff; flex: none;
}
.score-hero-ico svg { width: 28px; height: 28px; }
.score-hero-num { font-size: 40px; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.score-hero-unit { font-size: 18px; font-weight: 600; color: var(--text-secondary); }
.score-hero-sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.score-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 220px; }
.score-tier-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; background: var(--score-tone-soft, var(--surface-sunken)); color: var(--score-tone, var(--text));
}
.score-tier-badge svg { width: 15px; height: 15px; }
.score-next { width: 240px; }
.score-next-bar { height: 8px; border-radius: 6px; background: var(--surface-sunken); overflow: hidden; }
.score-next-fill { height: 100%; border-radius: 6px; background: var(--score-tone, var(--accent)); transition: width .4s ease; }
.score-next-label { font-size: 12px; color: var(--text-secondary); margin-top: 5px; text-align: right; }

/* --- Metric tiles --- */
/* 120px was fine for a number + a 3-word sub. The tiles now carry the
   arithmetic line too ("671×0.1 + 416×0.3 + 307×0.8 → cap 400"), which
   wraps to one word per line at that width. */
.score-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.score-tile { align-items: flex-start; }
.score-tile-body { min-width: 0; }
.score-tile {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--elevation-card);
  transition: box-shadow var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.score-tile:hover { box-shadow: var(--elevation-raised); transform: translateY(-1px); border-color: var(--border-strong); }
@media (prefers-reduced-motion: reduce) { .score-tile { transition: none; } .score-tile:hover { transform: none; } }
.score-tile-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--info-soft); color: var(--info); flex: none; }
.score-tile-ico svg { width: 18px; height: 18px; }
.score-tile-manual .score-tile-ico { background: var(--accent-soft); color: var(--accent); }
/* v3 pillar tile tones (Tickets/Calls/Renew/Suivi/Qualité/Manual/SLA) */
.score-tile-result .score-tile-ico { background: var(--success-soft); color: var(--success); }
.score-tile-effort .score-tile-ico { background: var(--info-soft); color: var(--info); }
.score-tile-renew .score-tile-ico { background: var(--wa-soft); color: var(--wa); }
.score-tile-followup .score-tile-ico { background: var(--lougha-soft); color: var(--lougha); }
.score-tile-quality .score-tile-ico { background: var(--success-soft); color: var(--success); }
.score-tile-quality-bad .score-tile-ico { background: var(--danger-soft); color: var(--danger); }
.score-tile-sla .score-tile-ico { background: var(--warning-soft); color: var(--warning); }
.tsb-bd-warn { color: var(--danger) !important; font-weight: 700; }
.tsb-bd-warn svg { opacity: 1 !important; }
.score-tile-big { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.score-tile-quality-bad .score-tile-big { color: var(--danger); }
.score-tile-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.score-tile-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* --- Entry list (recent points) --- */
.score-entries-sec { display: flex; flex-direction: column; gap: 8px; }
.score-sec-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 4px 0; }
.score-entry { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface); }
.score-entry-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-sunken); color: var(--text-secondary); flex: none; }
.score-entry-ico svg { width: 16px; height: 16px; }
.score-entry-main { flex: 1; min-width: 0; }
.score-entry-label { font-size: 13px; font-weight: 600; color: var(--text); }
.score-entry-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-entry-pts { font-size: 14px; font-weight: 800; flex: none; }
.score-entry-pts.pos { color: var(--success); }
.score-entry-pts.neg { color: var(--danger); }
.score-entry-del { opacity: .55; }
.score-entry-del:hover { opacity: 1; color: var(--danger); }
.score-empty { font-size: 13px; color: var(--text-muted); padding: 14px; text-align: center; }

/* --- Admin Team Scoreboard --- */
.team-scoreboard { margin-top: 24px; }
.tsb-head-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tsb-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.tsb-sum-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 10px; background: var(--score-tone-soft, var(--surface-sunken)); border: 1px solid var(--border-subtle); }
.tsb-sum-chip svg { width: 16px; height: 16px; color: var(--score-tone, var(--text-secondary)); }
.tsb-sum-n { font-size: 16px; font-weight: 800; color: var(--text); }
.tsb-sum-l { font-size: 12px; color: var(--text-secondary); }
.tsb-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tsb-row {
  display: grid; grid-template-columns: 42px 40px minmax(120px, 1.4fr) 90px 130px minmax(140px, 1.2fr);
  align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border-subtle); transition: background .12s;
}
.tsb-row:last-child { border-bottom: none; }
.tsb-row:hover { background: var(--surface-hover); }
.tsb-rank { font-size: 14px; font-weight: 800; color: var(--text-secondary); text-align: center; font-variant-numeric: tabular-nums; }
.tsb-name-wrap { min-width: 0; }
.tsb-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsb-role { font-size: 11px; }
.tsb-points { display: flex; align-items: baseline; gap: 4px; }
.tsb-points-n { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.tsb-points-u { font-size: 11px; color: var(--text-muted); }
.tsb-breakdown { display: flex; gap: 10px; flex-wrap: wrap; }
.tsb-bd { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-secondary); }
.tsb-bd svg { width: 13px; height: 13px; opacity: .7; }
.tsb-drill { padding: 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 14px; }
.tsb-drill-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tsb-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.score-avatar { display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--accent-fg); }

/* --- Modals (add points / config) --- */
.score-field { display: flex; flex-direction: column; gap: 4px; }
.score-field-l { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.score-cfg-sec { display: flex; flex-direction: column; gap: 8px; }
.score-cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.score-cfg-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.score-cat-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.score-cat-row { display: grid; grid-template-columns: 1fr 80px 110px 34px; gap: 8px; align-items: center; }

/* ===== Barème — inline scoring control panel (below the leaderboard) ===== */
.bareme-panel { margin-top: 22px; }
.bareme-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.bareme-title { display: flex; align-items: center; gap: 12px; }
.bareme-title > i, .bareme-title svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.bareme-title h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.bareme-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); max-width: 60ch; }
.bareme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.bareme-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.bareme-card-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.bareme-card-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); flex: none; }
.bareme-card-ico svg { width: 18px; height: 18px; }
.bareme-card-title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.bareme-card-desc { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.bareme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; }
.bareme-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-secondary); }
.bareme-field-lbl { font-weight: 500; }
.bareme-num, .bareme-cat-pts, .bareme-cat-name, .bareme-search,
.bareme-task-lbl, .bareme-task-pts, .bareme-task-ico { padding: 7px 9px; font-size: 13px; }
.bareme-ticket-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.bareme-cat-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.bareme-cat-row { display: grid; grid-template-columns: 1fr 92px; gap: 8px; align-items: center; }
.bareme-cat-row:has(.icon-btn-sm) { grid-template-columns: 1fr 92px 32px; }
.bareme-cat-name-fixed { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bareme-cat-pts { text-align: center; }
.bareme-task-list { display: flex; flex-direction: column; gap: 6px; }
.bareme-task-row { display: grid; grid-template-columns: 1fr 76px 96px 32px; gap: 8px; align-items: center; }
.bareme-add { margin-top: 10px; align-self: flex-start; }
.bareme-save-btn.is-loading, #baremeSaveBtn.is-loading { opacity: 0.6; pointer-events: none; }

/* Keep the scoreboard table readable on narrow widths (≥769 only — never
   touches the <768 mobile layer). */
@media (max-width: 980px) and (min-width: 769px) {
  .tsb-row { grid-template-columns: 36px 36px minmax(100px, 1fr) 76px 110px; }
  .tsb-row .tsb-breakdown { display: none; }
}
/* Gamified medals on the top-3 leaderboard ranks */
.tsb-rank-medal { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto; border-radius: var(--radius-pill); background: var(--warning-soft); font-size: 16px; }
.tsb-row-top { background: linear-gradient(90deg, color-mix(in srgb, var(--warning-soft) 40%, transparent), transparent 60%); }

/* ============================================================================
   RAPPORT — admin control center (premium SaaS + gamified). Overview hub +
   4 report pages, all wrapped in .rapport-page for a unified family. Tokens
   only → honors light/dark themes. (2026-06-18)
   ============================================================================ */
/* .bulk-view gives flex:1 + display:flex/column + overflow:hidden. We need an
   explicit width (column-flex auto-margins would otherwise shrink the section
   to its content width ~464px), full vertical scroll (pages are tall), and
   page padding. */
.rapport-page { width: 100%; max-width: 1280px; margin: 0 auto; overflow-y: auto; overflow-x: hidden; padding: 22px 26px 48px; }

/* Page header — unified across the hub (full head) */
.rapport-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rapport-ph-left { display: flex; align-items: center; gap: 14px; }
.rapport-ph-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); color: #fff; flex: none; box-shadow: 0 6px 18px -8px var(--accent); }
.rapport-ph-ico svg { width: 24px; height: 24px; }
.rapport-ph-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--text-tertiary); }
.rapport-ph-title { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--text); margin: 1px 0; line-height: 1.1; }
.rapport-ph-sub { font-size: 13px; color: var(--text-secondary); }
.rapport-ph-right { display: flex; align-items: center; gap: 8px; }
.rapport-month { width: 150px; }

/* Breadcrumb strip on the 4 sub-pages (slim, no title duplication) */
.rapport-crumb { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 14px; }
.rapport-crumb svg { width: 14px; height: 14px; }
.rapport-crumb strong { color: var(--text); font-weight: 700; }
.rapport-crumb-sep { opacity: .5; }

/* KPI hero strip */
.rapport-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.rapport-hero-tile {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  border-radius: 16px; border: 1px solid var(--border);
  background: linear-gradient(150deg, color-mix(in srgb, var(--score-tone, var(--surface-elevated)) 14%, var(--surface)), var(--surface));
}
.rapport-hero-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--score-tone-soft, var(--surface-sunken)); color: var(--score-tone, var(--text-secondary)); flex: none; }
.rapport-hero-ico svg { width: 22px; height: 22px; }
.rapport-hero-ico .avatar { width: 44px; height: 44px; font-size: 17px; }
.rapport-hero-big { font-size: 25px; font-weight: 800; letter-spacing: -.5px; color: var(--text); line-height: 1.05; }
.rapport-hero-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.rapport-hero-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* Report cards grid */
.rapport-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.rapport-card {
  --rc-accent: var(--info);
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--rc-accent);
  border-radius: 14px; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.rapport-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--rc-accent) 60%, #000); }
.rapport-card-amber { --rc-accent: var(--warning); }
.rapport-card-green { --rc-accent: var(--success); }
.rapport-card-red { --rc-accent: var(--danger); }
.rapport-card-info { --rc-accent: var(--info); }
.rapport-card-head { display: flex; align-items: center; gap: 10px; }
.rapport-card-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--rc-accent) 16%, transparent); color: var(--rc-accent); flex: none; }
.rapport-card-ico svg { width: 17px; height: 17px; }
.rapport-card-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.rapport-card-body { display: flex; flex-direction: column; gap: 6px; }
.rapport-mini-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rapport-mini-row .rapport-mini-name { flex: 1; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rapport-mini-row .rapport-mini-val { font-weight: 700; color: var(--text); }
.rapport-medal { font-size: 15px; flex: none; }
.rapport-mini-empty { font-size: 12px; color: var(--text-muted); }
.rapport-card-foot { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--rc-accent); margin-top: auto; }
.rapport-card-foot svg { width: 14px; height: 14px; transition: transform .16s ease; }
.rapport-card:hover .rapport-card-foot svg { transform: translateX(4px); }

/* Staggered page-load reveal (premium micro-delight) */
.rapport-page:not(.hidden) > * { animation: rapportIn .42s cubic-bezier(.22,.61,.36,1) both; }
.rapport-page:not(.hidden) > *:nth-child(2) { animation-delay: .05s; }
.rapport-page:not(.hidden) > *:nth-child(3) { animation-delay: .1s; }
.rapport-hero-tile { animation: rapportIn .42s cubic-bezier(.22,.61,.36,1) both; }
.rapport-hero-tile:nth-child(2){animation-delay:.04s} .rapport-hero-tile:nth-child(3){animation-delay:.08s}
.rapport-hero-tile:nth-child(4){animation-delay:.12s} .rapport-hero-tile:nth-child(5){animation-delay:.16s}
.rapport-card { animation: rapportIn .42s cubic-bezier(.22,.61,.36,1) both; }
.rapport-card:nth-child(2){animation-delay:.06s} .rapport-card:nth-child(3){animation-delay:.12s} .rapport-card:nth-child(4){animation-delay:.18s}
@keyframes rapportIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rapport-page:not(.hidden) > *, .rapport-hero-tile, .rapport-card { animation: none; } }

/* Lifecycle v2 — view toggle + global year/month + group/student edit forms (2026-06-19) */
.lifecycle-viewbar { display: flex; gap: 10px; align-items: center; padding: 4px 16px 8px; flex-wrap: wrap; }
.lc-segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.lc-seg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; }
.lc-seg + .lc-seg { border-left: 1px solid var(--border); }
.lc-seg svg { width: 15px; height: 15px; }
.lc-seg.active { background: var(--accent); color: var(--accent-fg); }
.lifecycle-viewbar .lc-input { height: 32px; }
/* edit forms (group modal + student modal edit section) */
.lc-gform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.lc-gfield { display: flex; flex-direction: column; gap: 4px; }
.lc-gfield-wide { grid-column: 1 / -1; }
.lc-glabel { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.lc-ginput { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; }
textarea.lc-ginput { height: auto; padding: 8px 10px; resize: vertical; }
.lc-ginput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
@media (max-width: 768px) { .lc-gform { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   Lifecycle v3 — visual polish (premium, calm, de-noised). Token-based, dark-safe.
   Appended last so it overrides the base lifecycle styles. (2026-06-19)
   ════════════════════════════════════════════════════════════════════════ */
/* KPI cards: icon + tabular number + uppercase label, accent bar, hover lift */
.lifecycle-kpi { position: relative; flex: 1 0 auto; min-width: 118px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 12px 14px 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: left; overflow: hidden; box-shadow: var(--elevation-card); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.lifecycle-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0; transition: opacity .15s ease; }
.lifecycle-kpi:hover { transform: translateY(-1px); box-shadow: var(--elevation-raised); border-color: var(--border-strong); }
.lifecycle-kpi.active { border-color: var(--accent); }
.lifecycle-kpi.active::before { opacity: 1; }
.lifecycle-kpi-ic { width: 16px; height: 16px; color: var(--text-muted); margin-bottom: 3px; }
.lifecycle-kpi-num { font-size: 24px; font-weight: 800; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.lifecycle-kpi-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .045em; font-weight: 600; white-space: nowrap; }
.lc-kpi-conflict .lifecycle-kpi-ic { color: var(--danger); }
.lc-kpi-conflict { border-color: color-mix(in oklab, var(--danger) 35%, var(--border)); }
.lc-kpi-conflict::before { background: var(--danger); }
.lc-kpi-conflict.active { border-color: var(--danger); }
.lc-kpi-test .lifecycle-kpi-ic { color: oklch(0.60 0.19 300); }
.lc-kpi-issue .lifecycle-kpi-ic { color: var(--accent); }
.lc-kpi-renew .lifecycle-kpi-ic { color: var(--warning); }
.lc-kpi-club .lifecycle-kpi-ic { color: var(--accent); }
.lc-kpi-ok .lifecycle-kpi-ic { color: var(--success); }
.lc-kpi-churned .lifecycle-kpi-ic, .lc-kpi-unknown .lifecycle-kpi-ic { color: var(--text-tertiary); }

/* Table: calmer rhythm, tabular numerics, hover, soft urgent (no red overload) */
#lifecycleTable .lc-row { min-height: 46px; align-content: center; border-bottom: 1px solid var(--border-subtle); transition: background .12s ease; }
#lifecycleTable .lc-row:not(.lc-row-head):hover { background: var(--surface-hover); }
#lifecycleTable .lc-row-head { background: var(--surface-sunken); border-bottom: 1.5px solid var(--border-strong); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; }
#lifecycleTable .lc-cell-num { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
#lifecycleTable .lc-row.lc-row-urgent { border-left: 3px solid var(--danger); background: var(--danger-soft); }
#lifecycleTable .lc-name { font-weight: 600; }
#lifecycleTable .lc-row .lc-edit-hint { opacity: .4; transition: opacity .12s ease, color .12s ease; }
#lifecycleTable .lc-row:hover .lc-edit-hint { opacity: 1; color: var(--accent); }

/* Status pills coloured by value (semantic colour kept to status, not every cell) */
.lc-st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.lc-st-active { background: var(--success-soft); color: var(--success); }
.lc-st-pause { background: var(--warning-soft); color: var(--warning); }
.lc-st-inactive { background: var(--danger-soft); color: var(--danger); }
.lc-st-pending { background: var(--accent-soft); color: var(--accent); }
.lc-st-renewed { background: var(--accent-soft); color: var(--accent-strong); }
.lc-st-done, .lc-st-neutral { background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border); }

/* Segmented view toggle — clean pill, accent-filled active */
.lc-segmented { border-radius: 10px; padding: 2px; background: var(--surface-sunken); border-color: var(--border); gap: 2px; }
.lc-seg { border-radius: 8px; padding: 6px 14px; }
.lc-seg + .lc-seg { border-left: none; }
.lc-seg.active { box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Edit modal: clean form feel + header accent underline */
#lifecycleGroupModal .modal-head, #lifecycleModal .modal-head { border-bottom: 1px solid var(--border); }
.lc-gform .lc-ginput { transition: border-color .12s ease, box-shadow .12s ease; }

@media (prefers-reduced-motion: reduce) {
  .lifecycle-kpi, #lifecycleTable .lc-row, .lc-edit-hint, .lc-gform .lc-ginput { transition: none; }
  .lifecycle-kpi:hover { transform: none; }
}

/* Lifecycle inline cell editing (Status / New level / Note) — 2026-06-19 */
#lifecycleTable .lc-editable { cursor: text; border-radius: 6px; }
#lifecycleTable .lc-editable:hover { box-shadow: inset 0 0 0 1px var(--border-strong); background: var(--surface-active); }
.lc-inline-input { width: 100%; max-width: 100%; height: 30px; padding: 0 7px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12px; font-family: inherit; box-shadow: 0 0 0 2px var(--accent-soft); }
.lc-inline-input:focus { outline: none; }

/* Lifecycle group cell: class name + that group's status badge (2026-06-19) */
.lc-grp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-grp-badge { display: inline-block; margin-top: 3px; font-size: 9.5px; padding: 0 6px; line-height: 16px; }

/* Lifecycle editable report-link cell (2026-06-19) */
.lc-rep-edit, .lc-rep-add { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); border-radius: 6px; padding: 1px 6px; font-size: 11px; cursor: pointer; vertical-align: middle; }
.lc-rep-edit svg, .lc-rep-add svg { width: 12px; height: 12px; }
.lc-rep-add { color: var(--accent); border-color: var(--accent-soft); }
.lc-rep-edit:hover, .lc-rep-add:hover { border-color: var(--accent); color: var(--accent); }

/* Today's Classes — teacher name next to the group; clickable → teacher's 1-1 inbox (2026-06-20) */
.sched-teacher { color: var(--text-tertiary); }
.sched-teacher-link { color: var(--accent); cursor: pointer; font-weight: 600; }
.sched-teacher-link:hover { text-decoration: underline; }

/* ============================================================
   Teacher profile — weekly schedule ("mini" day-grouped layout).
   Replaces the student sections for teacher contacts. Token-driven
   only (dark/light safe — gotcha #14). Appended last to win. (2026-06-22)
   ============================================================ */
.tsched-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 0 10px; padding: 3px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--lougha); background: var(--lougha-soft);
  border-radius: var(--radius-pill);
}
.tsched-badge-ico { display: inline-flex; }
.tsched-badge-ico i, .tsched-badge-ico svg { width: 13px; height: 13px; }

/* "Check the app" — sits under the TEACHER pill, super-admins only. Tokens only
   (gotcha #14) so it flips with the theme. */
.tsched-appbtn {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 5px 12px;
  font: inherit; font-size: 12px; font-weight: 650;
  color: var(--wa); background: transparent;
  border: 1px solid var(--wa); border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.tsched-appbtn:hover:not(:disabled) { background: var(--wa); color: #fff; }
.tsched-appbtn:disabled { opacity: .55; cursor: default; }
.tsched-appbtn i, .tsched-appbtn svg { width: 14px; height: 14px; }

.tsched-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  margin-bottom: 2px; font-size: 12px; color: var(--text-secondary);
}
.tsched-stat strong { color: var(--text-primary); font-size: 14px; font-weight: 700; }
.tsched-synced { color: var(--text-tertiary); font-size: 11px; }

.tsched-fulllink {
  display: inline-block; margin: 4px 0 10px;
  font-size: 11.5px; font-weight: 600; color: var(--lougha); text-decoration: none;
}
.tsched-fulllink:hover { text-decoration: underline; }

.tsched-grid { display: flex; flex-direction: column; gap: 2px; }
.tsched-day {
  margin: 9px 0 3px; padding-bottom: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle);
}
.tsched-day:first-child { margin-top: 2px; }

.tsched-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--border); background: var(--surface-sunken);
  font-size: 12px; color: var(--text-primary);
}
.tsched-row:hover { background: var(--surface-hover); }
.tsched-prog-off2class { border-left-color: var(--purple-600); }
.tsched-prog-eslpals   { border-left-color: var(--blue-500); }
.tsched-prog-other     { border-left-color: var(--border-strong); }

.tsched-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-tertiary); }
.tsched-dot-booked         { background: var(--wa); }
.tsched-dot-available      { background: var(--blue-500); }
.tsched-dot-available_soon { background: var(--amber-500); }
.tsched-dot-standby        { background: var(--text-tertiary); }
.tsched-dot-leaving        { background: var(--red-500); }

.tsched-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); min-width: 38px; }
.tsched-code { font-weight: 600; color: var(--text-secondary); }
.tsched-level {
  padding: 0 6px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700;
  color: var(--accent-fg, #fff); background: var(--accent);
}
.tsched-type { font-size: 10.5px; color: var(--text-tertiary); text-transform: capitalize; }
.tsched-soon-chip {
  margin-left: auto; padding: 0 6px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700;
  color: var(--warning); background: var(--warning-soft);
}

/* Teacher LIVE Zoom presence — green/red "in class now" banner (2026-06-22).
   Tokens only (dark/light safe). Lives in .tsched-live-slot so it survives the
   schedule body re-render. */
.tsched-live-slot:empty { display: none; }
.tsched-live {
  display: flex; align-items: center; gap: 7px;
  margin: 8px 0 2px; padding: 7px 10px; border-radius: var(--radius-md);
  font-size: 12px; font-weight: 600;
}
.tsched-live-on  { color: var(--wa); background: var(--wa-soft); }
.tsched-live-off { color: var(--danger); background: var(--danger-soft); }
.tsched-live-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.tsched-live-on .tsched-live-dot { animation: tsched-pulse 1.6s ease-in-out infinite; }
.tsched-live-txt { flex: 1 1 auto; }
.tsched-live-since { font-weight: 500; opacity: 0.8; font-size: 11px; }
@keyframes tsched-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .tsched-live-on .tsched-live-dot { animation: none; } }
.tsched-row.is-live { background: var(--wa-soft); box-shadow: inset 0 0 0 1px var(--wa); }

/* =====================================================================
   SURFACE: attestations — Management ▸ Attestations (2026-06-22).
   Rendered with the SAME design as the Tickets table: reuses
   .tickets-table-wrap / .tickets-table / .tickets-row / .tickets-cell so it
   inherits the header, zebra, pills, fonts. Only the column grid + the
   small-laptop card-reflow are attestation-specific (mirrors #ticketsTable).
   Token-only → dark-safe.  Card-mode tuning knob = the 1536px max-width.
   ===================================================================== */
#attestationsView .tickets-table-wrap { flex: 1; overflow: auto; padding: 0 20px 12px; }
#attestationsTable .tickets-row {
  grid-template-columns:
    minmax(150px, 1.2fr)   /* Student */
    minmax(110px, 1fr)     /* Group */
    72px                   /* Level */
    minmax(200px, 2fr)     /* Result */
    minmax(160px, 1.5fr)   /* Agent note */
    120px                  /* Done */
    40px;                  /* Open */
}
#attestationsTable .tickets-open-link { opacity: 1; }    /* always reachable (read-only view) */
.att-student { font-weight: 600; color: var(--text); }
.att-level { font-size: 11px; font-weight: 700; color: var(--success); background: var(--success-soft); padding: 2px 7px; border-radius: var(--radius-pill); }
.att-done { font-size: 12px; color: var(--success); font-weight: 600; white-space: nowrap; }
.att-empty { padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* card-reflow on small laptops — mirrors the #ticketsTable card mode */
@media (min-width: 769px) and (max-width: 1536px) {
  #attestationsTable { min-width: 0; background: transparent; border-color: transparent; }
  #attestationsTable .tickets-row-head { display: none; }
  #attestationsTable .tickets-row:not(.tickets-row-head) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 12px 14px; margin: 0 0 10px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  }
  #attestationsTable .tickets-row:nth-child(even):not(.tickets-row-head) { background: var(--surface); }
  #attestationsTable .tickets-row:not(.tickets-row-head):hover { background: var(--surface-hover); border-color: var(--border-strong); }
  #attestationsTable .tickets-row > .tickets-cell { flex: 0 0 auto; overflow: visible; white-space: normal; min-width: 0; }
  #attestationsTable .tickets-row > .tickets-cell:nth-child(1) { order: 1; }   /* Student */
  #attestationsTable .tickets-row > .tickets-cell:nth-child(2) { order: 2; }   /* Group */
  #attestationsTable .tickets-row > .tickets-cell:nth-child(3) { order: 3; }   /* Level */
  #attestationsTable .tickets-row > .tickets-cell:nth-child(6) { order: 4; margin-left: auto; }  /* Done */
  #attestationsTable .tickets-row > .tickets-cell:nth-child(7) { order: 5; }   /* Open */
  #attestationsTable .tickets-row > .tickets-cell:nth-child(4) {               /* Result — full line */
    order: 6; flex: 1 1 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: 13px; color: var(--text);
  }
  #attestationsTable .tickets-row > .tickets-cell:nth-child(5) {               /* Agent note — full line */
    order: 7; flex: 1 1 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: 12.5px; color: var(--text-tertiary);
  }
  #attestationsTable .tickets-row > .tickets-cell:nth-child(4) .tickets-cell-text-preview,
  #attestationsTable .tickets-row > .tickets-cell:nth-child(5) .tickets-cell-text-preview {
    display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
}

/* =====================================================================
   SURFACE: tickets — COMPACT HEADER (2026-06-22, Ayoub: don't waste the
   top space). Row 1 = title (mini) + sub-tabs (fill the middle gap) +
   search + actions on ONE line; subtitle dropped. Row 2 = status chips +
   Feedback/Assigned dropdowns on one line. Reclaims ~3 rows vs the old
   stacked header. Scoped to #ticketsView; token-only → dark-safe.
   ===================================================================== */
#ticketsView .bulk-header.tickets-header-row1 {
  align-items: center;            /* override .tickets-view-header's flex-start */
  gap: 14px; flex-wrap: wrap;
  padding: 12px 20px 6px;
}
#ticketsView .tickets-title-mini {
  margin: 0; flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--text);
}
#ticketsView .tickets-title-mini [data-lucide],
#ticketsView .tickets-title-mini svg { width: 18px; height: 18px; color: var(--accent); }
/* sub-tabs fill the middle gap between the title and the right-side actions */
#ticketsView .tickets-header-row1 .tickets-sub-tabs {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 0;
}
#ticketsView .tickets-header-actions {
  display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto;
}
#ticketsView .tickets-header-actions #ticketsSearch { min-width: 220px; }
/* Row 2 — chips + filter dropdowns share one line; reset the chips' own padding */
#ticketsView .tickets-filter-row { padding: 2px 20px 10px; }
#ticketsView .tickets-filter-row .tickets-filter-chips { padding: 0; }

/* =====================================================================
   Attendance ▸ Low-attendance command centre.
   Decision-ready cards + lifecycle filters + student split drill-down.
   ===================================================================== */
.att-low-heading {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 14px;
}
.att-low-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; color: var(--text); }
.att-low-heading p { margin: 5px 0 0; max-width: 760px; font-size: 13px; color: var(--text-secondary); }
.att-low-trust {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-secondary); font-size: 11px; font-weight: 650;
}
.att-low-trust svg { width: 15px; height: 15px; color: var(--success); }
.att-low-kpis { grid-template-columns: 1.55fr repeat(4, minmax(128px, 1fr)); }
.att-low-kpi-danger { box-shadow: inset 0 -3px 0 color-mix(in oklab, var(--danger) 70%, transparent); }
.att-low-num-danger { color: var(--danger); }
.att-low-num-warning { color: var(--warning); }

.att-low-filter-panel {
  margin-bottom: 14px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
.att-low-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-low-filter-row + .att-low-filter-row { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.att-low-filter-row .attendance-input { min-width: 126px; background: var(--surface); }
.att-low-filter-row-main > select.attendance-input {
  width: auto; flex: 0 1 154px;
}
#attSmallDecision { flex-basis: 185px; }
#attSmallActiveMax { flex-basis: 180px; }
#attSmallLevel { flex-basis: 118px; }
#attSmallSort { flex-basis: 180px; }
.att-low-search {
  position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 220px;
}
.att-low-search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--text-tertiary); pointer-events: none; }
.att-low-search input { width: 100%; padding-left: 32px; }
.att-low-date-row { color: var(--text-secondary); font-size: 11px; }
.att-low-date-filter {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.att-low-date-filter > span:first-child { color: var(--text); font-weight: 700; white-space: nowrap; }
.att-low-date-filter .attendance-input { min-width: 122px; padding: 5px 7px; border-color: transparent; background: var(--surface-sunken); }
.att-low-results-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 2px 10px; color: var(--text-secondary); font-size: 12px;
}
.att-low-results-head strong { color: var(--text); font-size: 15px; }
.att-low-results-wrap { padding-bottom: 20px; }
.att-low-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; align-items: start;
}
.att-low-card {
  position: relative; overflow: hidden; min-width: 0;
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius-lg); background: var(--surface);
  padding: 14px 15px 12px; box-shadow: var(--elevation-card);
  cursor: pointer; outline: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.att-low-card:hover,
.att-low-card:focus-visible { transform: translateY(-1px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.att-low-card-critical { border-left-color: var(--danger); }
.att-low-card-warning { border-left-color: var(--warning); }
.att-low-card-info { border-left-color: var(--accent); }
.att-low-card-ok { border-left-color: var(--success); }
.att-low-card-head { display: flex; align-items: flex-start; gap: 14px; }
.att-low-card-identity { flex: 1 1 auto; min-width: 0; }
.att-low-card-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.att-low-card-title-row h3 {
  margin: 0 2px 0 0; min-width: 0; max-width: 100%;
  color: var(--text); font-size: 15px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-low-card-sub { margin-top: 5px; color: var(--text-secondary); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-low-type-chip,
.att-low-under-five {
  display: inline-flex; align-items: center; padding: 2px 7px;
  border-radius: var(--radius-pill); font-size: 9.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.att-low-type-chip.is-class { color: var(--accent); background: var(--accent-soft); }
.att-low-type-chip.is-individual { color: #7c3aed; background: color-mix(in oklab, #7c3aed 12%, transparent); }
.att-low-under-five { color: var(--danger); background: var(--danger-soft); }
.att-small-gn { font-weight: 600; color: var(--text); }
.att-small-close { font-size: 12.5px; color: var(--text-secondary); }
.att-small-level { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: var(--radius-pill); }
.att-small-count { font-weight: 700; color: var(--warning); background: var(--warning-soft); padding: 2px 9px; border-radius: var(--radius-pill); font-size: 13px; }
.att-small-count-low { color: var(--danger); background: var(--danger-soft); }
.att-low-action {
  flex: 0 0 min(170px, 38%); display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; border-radius: 9px; border: 1px solid currentColor;
}
.att-low-action svg { width: 17px; height: 17px; flex: 0 0 auto; }
.att-low-action > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-low-action strong { font-size: 11px; line-height: 1.2; }
.att-low-action span { font-size: 9.5px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-low-action-critical { color: var(--danger); background: var(--danger-soft); }
.att-low-action-warning { color: color-mix(in oklab, var(--warning) 80%, var(--text)); background: var(--warning-soft); }
.att-low-action-info { color: var(--accent); background: var(--accent-soft); }
.att-low-action-ok { color: var(--success); background: var(--success-soft); }
.att-low-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  margin-top: 12px;
}
.att-low-metric {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 7px 8px; border-radius: 8px; background: var(--surface-sunken);
}
.att-low-metric-label { color: var(--text-tertiary); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.att-low-metric strong { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-low-metric.is-danger strong { color: var(--danger); }
.att-low-metric.is-warning strong { color: var(--warning); }
.att-low-rationale { margin-top: 10px; color: var(--text-secondary); font-size: 11.5px; line-height: 1.45; }
.att-low-rationale-main { min-height: 32px; }
.att-low-match {
  display: flex; align-items: center; gap: 6px; margin-top: 7px; padding: 6px 8px;
  border-radius: 7px; background: var(--success-soft); color: var(--success); font-size: 10.5px;
}
.att-low-match svg { width: 14px; height: 14px; flex: 0 0 auto; }
.att-low-match-missing { background: var(--warning-soft); color: color-mix(in oklab, var(--warning) 78%, var(--text)); }
.att-low-card-foot {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px; align-items: end; margin-top: 11px; padding-top: 9px;
  border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-secondary);
}
.att-low-card-foot > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.att-low-foot-label { color: var(--text-tertiary); font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.att-low-open { color: var(--accent); font-weight: 750; white-space: nowrap; align-self: center; }

.attendance-drill.attendance-drill-low { width: min(620px, 48vw); }
.att-low-drill-decision {
  display: grid; grid-template-columns: 40px 1fr; gap: 11px;
  margin-bottom: 14px; padding: 12px; border: 1px solid currentColor;
  border-radius: 10px;
}
.att-low-drill-decision-critical { color: var(--danger); background: var(--danger-soft); }
.att-low-drill-decision-warning { color: color-mix(in oklab, var(--warning) 80%, var(--text)); background: var(--warning-soft); }
.att-low-drill-decision-info { color: var(--accent); background: var(--accent-soft); }
.att-low-drill-decision-ok { color: var(--success); background: var(--success-soft); }
.att-low-drill-decision-icon {
  width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in oklab, currentColor 10%, var(--surface));
}
.att-low-drill-decision-icon svg { width: 21px; height: 21px; }
.att-low-drill-decision-copy { min-width: 0; }
.att-low-drill-eyebrow { display: block; margin-bottom: 2px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .74; }
.att-low-drill-decision h4 { margin: 0; color: currentColor; font-size: 16px; }
.att-low-drill-decision p { margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.att-low-drill-target {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; color: currentColor; font-size: 11px;
}
.att-low-drill-target svg { width: 14px; height: 14px; }
.att-low-student-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 10px 0 12px;
}
.att-low-student-bucket {
  min-width: 0; padding: 9px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface-sunken);
}
.att-low-student-bucket-attending { border-color: color-mix(in oklab, var(--success) 40%, var(--border)); }
.att-low-student-bucket-missing { border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); }
.att-low-student-bucket-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); font-size: 11px; }
.att-low-student-count { min-width: 22px; padding: 1px 6px; text-align: center; border-radius: var(--radius-pill); background: var(--surface); font-weight: 800; }
.att-low-student-names { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; max-height: 116px; overflow: auto; }
.att-low-student-name {
  max-width: 100%; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-secondary); font: inherit; font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.att-low-student-name { cursor: pointer; color: var(--accent); }
button.att-low-student-name:hover { border-color: var(--accent); background: var(--accent-soft); }

@media (max-width: 1420px) {
  .att-low-grid { grid-template-columns: 1fr; }
  .att-low-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 1000px) {
  .att-low-heading { flex-direction: column; }
  .att-low-trust { align-self: flex-start; }
  .att-low-filter-row-main > select.attendance-input { flex: 1 1 180px; }
  .att-low-card-head { flex-direction: column; }
  .att-low-action { flex-basis: auto; width: 100%; }
  .att-low-metrics { grid-template-columns: repeat(2, 1fr); }
  .att-low-card-foot { grid-template-columns: repeat(2, 1fr); }
  .att-low-open { grid-column: 1 / -1; justify-self: end; }
  .attendance-drill.attendance-drill-low { width: min(560px, 60vw); }
}

/* =====================================================================
   SURFACE: merging-process — pipeline board (Kanban + List) + message modal.
   Token-only → dark-safe (2026-06-22).
   ===================================================================== */
.mp-toggle { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-pill); overflow:hidden; }
.mp-toggle-btn { background:transparent; border:0; padding:5px 14px; font-size:13px; font-weight:600; color:var(--text-tertiary); cursor:pointer; }
.mp-toggle-btn.active { background:var(--accent); color:#fff; }
.mp-kanban { padding:10px 16px 22px; overflow-x:auto; }
.mp-board { display:flex; gap:12px; min-width:min-content; align-items:flex-start; }
.mp-col { flex:1 1 0; min-width:238px; background:var(--surface-sunken); border-radius:var(--radius-lg); padding:10px 9px; }
.mp-col-head { font-weight:700; font-size:12.5px; padding:3px 6px 9px; border-bottom:2px solid var(--mp-accent, var(--border)); margin-bottom:10px; color:var(--text); }
.mp-card { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--mp-accent, var(--border)); border-radius:var(--radius-lg); padding:11px 12px; margin-bottom:10px; font-size:12px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.mp-card:hover { transform:translateY(-1px); box-shadow:var(--shadow); border-color:var(--border-strong); }
.mp-card-head { display:flex; align-items:center; gap:6px; }
.mp-gn { font-weight:700; font-size:13px; color:var(--text); letter-spacing:-.01em; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-badge { flex:0 0 auto; font-size:9.5px; font-weight:700; padding:1px 7px; border-radius:var(--radius-pill); white-space:nowrap; }
.mp-badge-up { color:var(--success); background:var(--success-soft); }
.mp-badge-dark { color:var(--text-tertiary); background:var(--surface-hover); }
.mp-meta { opacity:.62; margin-top:2px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* health row — the signature: attendance vital sign (ratio + severity bar) */
.mp-health { margin-top:9px; }
.mp-health-top { display:flex; align-items:baseline; gap:7px; }
.mp-ratio { font-size:19px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.mp-ratio-lbl { font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; opacity:.5; }
.mp-bar { height:5px; border-radius:99px; background:var(--surface-hover); margin-top:5px; overflow:hidden; }
.mp-bar-fill { height:100%; border-radius:99px; }
.mp-health-crit .mp-ratio { color:var(--danger); } .mp-health-crit .mp-bar-fill { background:var(--danger); }
.mp-health-low .mp-ratio { color:var(--warning); } .mp-health-low .mp-bar-fill { background:var(--warning); }
.mp-health-ok .mp-ratio { color:var(--success); } .mp-health-ok .mp-bar-fill { background:var(--success); }
/* merge-candidate chip (clickable → rosters) */
.mp-merge-chip { display:flex; align-items:center; gap:6px; width:100%; margin-top:9px; padding:6px 9px; border:1px solid var(--border); border-radius:8px; background:var(--surface-sunken); color:var(--accent); font-size:11.5px; font-weight:600; cursor:pointer; text-align:left; transition:background .12s, border-color .12s; }
.mp-merge-chip:hover { background:var(--accent-soft); border-color:var(--accent); }
.mp-merge-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.mp-merge-lead { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-merge-tgt { font-size:10px; font-weight:500; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-merge-arrow { flex:0 0 auto; font-weight:800; opacity:.7; }
.mp-foot { opacity:.55; margin-top:6px; font-size:10.5px; }
.mp-stale { margin-top:6px; }
/* actions: primary button + icon squares, one row, no overflow */
.mp-actions { display:flex; gap:6px; margin-top:10px; }
.mp-act { border:1px solid transparent; border-radius:8px; cursor:pointer; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:5px; transition:filter .12s, background .12s, border-color .12s; }
.mp-act-primary { flex:1 1 auto; padding:7px 10px; font-size:12px; background:var(--accent); color:#fff; }
.mp-act-primary:hover { filter:brightness(1.07); }
.mp-act-icon { flex:0 0 34px; width:34px; height:32px; padding:0; font-size:14px; background:var(--surface-sunken); border-color:var(--border); }
.mp-act-icon:hover { background:var(--surface-hover); border-color:var(--border-strong); }
.mp-stage-sel { margin-top:8px; width:100%; font-size:11.5px; padding:5px 7px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
.mp-btn { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:6px; border:1px solid transparent; background:var(--accent); color:#fff; cursor:pointer; }
.mp-btn-ghost { background:transparent; border-color:var(--border); color:var(--text-secondary); }
#mpTable .tickets-row.mp-list-row { grid-template-columns: minmax(150px,1.5fr) 150px 80px 110px 110px minmax(120px,1.2fr) 110px 110px minmax(130px,1.2fr); }
/* Merging-process editable note + merge-target + already-merged badge (2026-06-25). Tokens only. */
.mp-edit { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.mp-edit-row { display: flex; align-items: center; gap: 6px; }
.mp-edit-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; color: var(--text-tertiary); min-width: 64px; text-transform: uppercase; }
.mp-note-inp, .mp-target-inp {
  flex: 1 1 auto; min-width: 0; width: 100%;
  font-size: 12px; padding: 3px 7px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary);
}
.mp-note-inp:focus, .mp-target-inp:focus { outline: none; border-color: var(--lougha); box-shadow: 0 0 0 2px var(--lougha-soft); }
.mp-note-inp::placeholder, .mp-target-inp::placeholder { color: var(--text-tertiary); }
/* Read-only, truncated note preview → click opens the full-text popup (_mpOpenNoteModal). */
.mp-note-cell { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.7; }
.mp-note-cell:hover { border-color: var(--lougha); background: var(--surface-hover); }
.mp-note-cell.is-empty { color: var(--text-tertiary); }
.mp-merged-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; color: var(--success); background: var(--success-soft); }
.mp-list-acc { font-size: 11px; font-weight: 700; color: var(--lougha); }
.mp-muted { color: var(--text-tertiary); }
.mp-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:9999; }
.mp-modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; width:min(520px,92vw); box-shadow:var(--shadow-lg, 0 10px 40px rgba(0,0,0,.3)); }
.mp-modal-title { font-weight:700; font-size:15px; margin-bottom:10px; color:var(--text); }
.mp-modal-ta { width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:8px; padding:10px; font:inherit; font-size:13px; background:var(--surface-sunken); color:var(--text); resize:vertical; }
.mp-modal-btns { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.mp-btn-send { background:var(--wa, #16a34a); }
/* Manual compare panel + card */
#mergingProcessView>.tickets-view-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex:0 0 auto; padding:10px 16px 4px; }
.mp-header-actions { display:flex; align-items:center; gap:8px; min-width:0; }
.mp-compare { position:relative; padding:0; }
.mp-compare-toggle { display:flex; align-items:center; gap:7px; width:auto; min-height:34px; padding:6px 10px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text-secondary); font-size:12px; font-weight:700; text-align:left; cursor:pointer; }
.mp-compare-toggle svg { width:15px; height:15px; color:var(--accent); }
.mp-compare-toggle .mp-compare-chevron { margin-left:auto; color:var(--text-muted); transition:transform .15s ease; }
.mp-compare.is-open .mp-compare-chevron { transform:rotate(180deg); }
.mp-compare-toggle:focus-visible { outline:var(--focus-w,2px) solid var(--focus,var(--accent)); outline-offset:2px; }
.mp-compare-panel { display:none; position:absolute; z-index:1250; top:calc(100% + 7px); right:0; width:min(720px,calc(100vw - 32px)); max-height:min(72vh,620px); overflow:auto; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--elevation-overlay,0 16px 48px rgba(0,0,0,.22)); }
.mp-compare.is-open .mp-compare-panel { display:block; }
.mp-compare-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mp-compare-lbl { font-size:13px; font-weight:600; color:var(--text-secondary); }
.mp-compare-sel { font-size:13px; padding:5px 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); min-width:180px; max-width:280px; }
.mp-compare-vs { opacity:.6; font-weight:700; }
.mp-cmp-card { margin-top:12px; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius-lg); padding:14px; box-shadow:var(--shadow); }
.mp-cmp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mp-cmp-title { font-weight:700; font-size:15px; color:var(--text); }
.mp-cmp-acc { text-align:center; border-radius:10px; padding:6px 12px; min-width:64px; background:var(--surface-sunken); }
.mp-cmp-acc.hi { background:var(--success-soft); color:var(--success); }
.mp-cmp-acc.mid { background:var(--warning-soft); color:var(--warning); }
.mp-cmp-acc.lo { background:var(--danger-soft); color:var(--danger); }
.mp-cmp-acc-val { font-size:22px; font-weight:800; line-height:1; }
.mp-cmp-acc-lbl { font-size:9px; font-weight:700; letter-spacing:.08em; opacity:.8; }
.mp-cmp-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
.mp-cmp-col { background:var(--surface-sunken); border-radius:10px; padding:10px 12px; }
.mp-cmp-col-name { font-weight:700; font-size:13.5px; margin-bottom:6px; color:var(--text); }
.mp-cmp-meta { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; padding:2px 0; }
.mp-cmp-k { color:var(--text-tertiary); }
.mp-cmp-v { color:var(--text); font-weight:500; text-align:right; }
.mp-cmp-note { margin-top:6px; font-size:11.5px; color:var(--text-tertiary); }
.mp-cmp-reasons { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.mp-cmp-reason { font-size:11.5px; font-weight:600; color:var(--success); background:var(--success-soft); padding:3px 9px; border-radius:var(--radius-pill); }
.mp-cmp-reason.warn { color:var(--danger); background:var(--danger-soft); }
.mp-cmp-combined { margin-top:10px; font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.mp-cmp-add { margin-top:10px; width:100%; background:var(--wa, #16a34a); }
.mp-tmpl-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px; }
.mp-tmpl-lbl { font-size:12px; font-weight:600; color:var(--text-tertiary); margin-right:2px; }
.mp-tmpl-chip { font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--surface-sunken); color:var(--text-secondary); cursor:pointer; }
.mp-tmpl-chip:hover { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.mp-tmpl-ai { border-color:var(--accent); color:var(--accent); }
/* v2 R1: recovery/stale badges + responsive stacking */
.mp-dark { font-size:10px; font-weight:700; color:var(--text-tertiary); background:var(--surface-hover); padding:1px 6px; border-radius:var(--radius-pill); }
.mp-stale { margin-top:3px; font-size:10.5px; font-weight:700; display:inline-block; padding:1px 7px; border-radius:var(--radius-pill); }
.mp-stale-amber { color:var(--warning); background:var(--warning-soft); }
.mp-stale-red { color:var(--danger); background:var(--danger-soft); }
@media (max-width:1100px){ #mergingProcessView .mp-cmp-cols{ grid-template-columns:1fr; } #mergingProcessView .mp-kanban{ overflow-x:auto; } }
/* v2: students popup */
.mp-modal-wide { width:min(620px,94vw); }
.mp-students-list { max-height:280px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:6px; margin-bottom:10px; background:var(--surface-sunken); }
.mp-students-head { display:flex; align-items:center; gap:6px; font-weight:700; font-size:12.5px; padding:4px 6px 8px; border-bottom:1px solid var(--border); margin-bottom:4px; cursor:pointer; }
.mp-student-row { display:flex; align-items:center; gap:8px; padding:4px 6px; font-size:12.5px; border-radius:6px; cursor:pointer; }
.mp-student-row:hover { background:var(--surface-hover); }
.mp-student-dot { font-size:10px; }
.mp-student-name { flex:1 1 auto; color:var(--text); }
.mp-student-phone { color:var(--text-tertiary); font-variant-numeric:tabular-nums; font-size:11.5px; }
.mp-student-absent { font-size:10px; color:var(--text-tertiary); background:var(--surface-hover); padding:1px 6px; border-radius:var(--radius-pill); }
/* merge-candidates popup */
.mp-cand-sub { font-size:12px; color:var(--text-tertiary); margin-bottom:10px; }
.mp-cand-list { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; max-height:340px; overflow-y:auto; }
.mp-cand { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface-sunken); }
.mp-cand-acc { flex:0 0 auto; min-width:46px; text-align:center; font-weight:800; font-size:14px; padding:5px 8px; border-radius:8px; }
.mp-cand-acc.hi { color:var(--success); background:var(--success-soft); }
.mp-cand-acc.mid { color:var(--warning); background:var(--warning-soft); }
.mp-cand-acc.lo { color:var(--danger); background:var(--danger-soft); }
.mp-cand-info { flex:1 1 auto; min-width:0; }
.mp-cand-name { font-weight:700; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-cand-meta { font-size:11px; color:var(--text-tertiary); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-cand-acts { flex:0 0 auto; display:flex; gap:6px; }
.mp-cand-btn { padding:5px 10px; font-size:11.5px; }

/* ── Paid Clients view (Management → Paid Clients) — read-only paid population from the HubSpot mirror ── */
#paidClientsTable .paidcl-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.6fr) 130px minmax(110px, 1.2fr) 110px 90px 96px 56px 104px;
  gap: 12px; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 120ms ease;
}
#paidClientsTable .paidcl-row:hover { background: var(--surface-hover); }
#paidClientsTable .paidcl-row-head {
  background: var(--surface-sunken);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary);
  position: sticky; top: 0; z-index: 5; cursor: default;
}
.paidcl-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
.paidcl-name { font-weight: 600; color: var(--text); }
.paidcl-sub { font-size: 11px; color: var(--text-secondary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paidcl-num { font-variant-numeric: tabular-nums; }
.paidcl-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.paidcl-badge-total { background: var(--success-soft); color: var(--success); }
.paidcl-badge-avance { background: var(--warning-soft); color: var(--warning); }
.paidcl-badge-other { background: var(--surface-sunken); color: var(--text-secondary); }
.paidcl-table-note { padding: 10px 16px; font-size: 12px; color: var(--text-secondary); }

/* Student Feedback page (Management) — feedback board table + manual-add form.
   Big-CRM (Attio/HubSpot) polish: table reads as ONE contained card, calm row
   rhythm, identity avatar, segmented sentiment control, refined empty state. */
#sfTable { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); isolation: isolate; overflow: visible; }
#sfTable .sf-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) 116px minmax(110px, 0.9fr) minmax(160px, 2.2fr) 110px 100px 116px 44px;
  gap: 12px; align-items: center;
  padding: var(--pad-cell-y) var(--pad-cell-x);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--motion-fast) var(--ease);
}
#sfTable .sf-row:last-child { border-bottom: none; }
#sfTable .sf-row.sf-clickable { cursor: pointer; }
#sfTable .sf-row.sf-clickable:hover { background: var(--surface-hover); }
#sfTable .sf-row-head {
  background: var(--surface-sunken);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary);
  position: sticky; top: 0; z-index: 5; cursor: default;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.sf-cell { overflow: hidden; min-width: 0; font-size: 13px; color: var(--text); }
.sf-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sf-id-text { min-width: 0; }
.sf-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--lougha-soft); color: var(--lougha); }
.sf-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-num { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.sf-text { color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-chan { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.sf-chan [data-lucide] { width: 15px; height: 15px; flex: none; }
.sf-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sf-pill [data-lucide] { width: 13px; height: 13px; }
.sf-pill-pos { background: var(--wa-soft); color: var(--wa); }
.sf-pill-neg { background: var(--danger-soft); color: var(--danger); }
.sf-actions { display: flex; justify-content: flex-end; }
.sf-del { opacity: .45; }
.sf-del:hover { opacity: 1; color: var(--danger); }
#sfTable .sf-row:hover .sf-del { opacity: .8; }
/* Count pill in the header — discrete tabular metric badge */
.sf-count-pill { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-count-pill:empty { display: none; }
/* Sentiment chips → segmented control (SCOPED to #sfSentimentChips so the shared
   .tickets-filter-chip used in Tickets/Lifecycle is untouched). */
#sfSentimentChips { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-pill); }
#sfSentimentChips .tickets-filter-chip { background: transparent; border-color: transparent; box-shadow: none; opacity: 1; color: var(--text-secondary); padding: 5px 12px; }
#sfSentimentChips .tickets-filter-chip::before, #sfSentimentChips .tickets-filter-chip::after { display: none; }
#sfSentimentChips .tickets-filter-chip [data-lucide] { width: 14px; height: 14px; }
#sfSentimentChips .tickets-filter-chip:hover { background: var(--surface-hover); }
#sfSentimentChips .tickets-filter-chip.active { background: var(--surface-elevated); color: var(--text); box-shadow: var(--elevation-card); }
#sfSentimentChips .tickets-filter-chip[data-sfsent="positive"].active { color: var(--wa); }
#sfSentimentChips .tickets-filter-chip[data-sfsent="negative"].active { color: var(--danger); }
#sfSentimentChips .tickets-filter-chip.active .rest-chip-count { background: var(--surface-sunken); color: inherit; }
/* Refined empty state (encourage / no-match / error) */
.sf-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; text-align: center; }
.sf-empty-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--wa-soft); }
.sf-empty-icon [data-lucide] { width: 34px; height: 34px; color: var(--wa); }
.sf-empty-icon.is-error { background: var(--danger-soft); }
.sf-empty-icon.is-error [data-lucide] { color: var(--danger); }
.sf-empty-icon.is-muted { background: var(--surface-sunken); }
.sf-empty-icon.is-muted [data-lucide] { color: var(--text-tertiary); }
.sf-empty h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.sf-empty p { margin: 0; max-width: 340px; font-size: 13px; line-height: 1.5; color: var(--text-tertiary); }
/* Analytics dashboard header — KPI stat cards + CSS bar charts (big-CRM BI look).
   Compact by design so the whole page (dashboard + table) fits small laptops. */
.sf-dash { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.sf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sf-kpi { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.sf-kpi-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--lougha-soft); color: var(--lougha); }
.sf-kpi-ico [data-lucide] { width: 18px; height: 18px; }
.sf-kpi.is-pos .sf-kpi-ico { background: var(--wa-soft); color: var(--wa); }
.sf-kpi.is-neg .sf-kpi-ico { background: var(--danger-soft); color: var(--danger); }
.sf-kpi.is-month .sf-kpi-ico { background: var(--info-soft); color: var(--info); }
.sf-kpi-num { font-size: 20px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.sf-kpi-lbl { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.sf-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); padding: 11px 14px; }
.sf-chart-title { font-size: 12px; font-weight: 700; color: var(--text); margin: 0 0 9px; }
.sf-bars { display: flex; flex-direction: column; gap: 6px; }
.sf-bar-row { display: grid; grid-template-columns: 80px 1fr 30px; align-items: center; gap: 8px; }
.sf-bar-lbl { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-bar-track { height: 7px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.sf-bar-fill { height: 100%; border-radius: var(--radius-pill); background: var(--lougha); min-width: 3px; transition: width var(--motion-slow, .4s) var(--ease); }
.sf-chart--agent .sf-bar-fill { background: var(--wa); }
.sf-bar-val { font-size: 11px; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.sf-chart-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 14px 0; }
@media (prefers-reduced-motion: reduce) { .sf-bar-fill { transition: none; } }
@media (max-width: 1100px) { .sf-kpis { grid-template-columns: repeat(2, 1fr); } .sf-charts { grid-template-columns: 1fr; } }
/* Feedback app page (Management) — post-class ⭐ ratings pulled from students7.
   Reuses the Student-Feedback board vocabulary (.sf-cell / .sf-kpi / .sf-bar-*);
   only the table container, its 6-column grid and the star cell are its own. */
#afTable { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); isolation: isolate; overflow: visible; }
#afTable .sf-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(110px, 1fr) 84px 104px minmax(170px, 2.4fr) 116px;
  gap: 12px; align-items: center;
  padding: var(--pad-cell-y) var(--pad-cell-x);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--motion-fast) var(--ease);
}
#afTable .sf-row:last-child { border-bottom: none; }
#afTable .sf-row.sf-clickable { cursor: pointer; }
#afTable .sf-row.sf-clickable:hover { background: var(--surface-hover); }
#afTable .sf-row-head {
  background: var(--surface-sunken);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary);
  position: sticky; top: 0; z-index: 5; cursor: default;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
#afTable .sf-row.is-low { box-shadow: inset 3px 0 0 var(--danger); }
.af-stars { white-space: nowrap; font-size: 13px; letter-spacing: 1px; color: var(--warning); }
.af-stars .off { color: var(--text-tertiary); opacity: .4; }
.af-avg { display: inline-flex; align-items: baseline; gap: 3px; }
.af-avg-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-kpi.is-avg .sf-kpi-ico { background: color-mix(in oklab, var(--warning) 16%, transparent); color: var(--warning); }
/* Star chips → segmented control (same look as #sfSentimentChips, scoped). */
#afStarChips { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-pill); }
#afStarChips .tickets-filter-chip { background: transparent; border-color: transparent; box-shadow: none; opacity: 1; color: var(--text-secondary); padding: 5px 12px; }
#afStarChips .tickets-filter-chip::before, #afStarChips .tickets-filter-chip::after { display: none; }
#afStarChips .tickets-filter-chip:hover { background: var(--surface-hover); }
#afStarChips .tickets-filter-chip.active { background: var(--surface-elevated); color: var(--text); box-shadow: var(--elevation-card); }
#afStarChips .tickets-filter-chip[data-afstar="high"].active { color: var(--wa); }
#afStarChips .tickets-filter-chip[data-afstar="low"].active { color: var(--danger); }
#afStarChips .tickets-filter-chip.active .rest-chip-count { background: var(--surface-sunken); color: inherit; }

/* Manual-add inline form (external reviews). */
.sf-addform { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--pad-card); margin: 0 0 12px; display: flex; flex-direction: column; gap: var(--gap-dense); box-shadow: var(--elevation-card); }
.sf-addform.hidden { display: none; }
.sf-addform-legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.sf-addform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-dense); }
.sf-addform-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 900px) { .sf-addform-grid { grid-template-columns: 1fr 1fr; } }

/* Open Tasks board (Workspace) — 4 status columns of task cards + detail/create modal. */
/* Header row: let the search grow, keep the action buttons on one line (no "New / task" wrap). */
#otSearch { flex: 1 1 auto; }
#otNewBtn { flex: none; white-space: nowrap; }
.ot-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-airy); align-items: start; padding: 4px 2px 24px; }
.ot-col { position: relative; overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px; min-height: 120px; }
/* Per-column status accent (Linear/Notion color-coded board) */
.ot-col--open { --ot-accent: var(--info); }
.ot-col--prog { --ot-accent: var(--warning); }
.ot-col--subm { --ot-accent: var(--lougha); }
.ot-col--scored { --ot-accent: var(--success); }
/* (column top stripe removed — color-coding stays on the header icon/count + card spine) */
.ot-col-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); padding: 4px 6px 10px; }
.ot-col-head [data-lucide] { width: 15px; height: 15px; color: var(--ot-accent, var(--text-secondary)); }
.ot-col-count { margin-left: auto; background: color-mix(in oklab, var(--ot-accent, var(--text-muted)) 12%, var(--surface)); color: var(--ot-accent, var(--text-secondary)); border: 1px solid transparent; border-radius: var(--radius-pill); padding: 1px 8px; font-size: 11px; font-variant-numeric: tabular-nums; }
.ot-col-body { display: flex; flex-direction: column; gap: 8px; }
.ot-col-empty { display: grid; place-items: center; gap: 4px; border: 1px dashed var(--border); border-radius: var(--radius); min-height: 60px; font-size: 12px; color: var(--text-muted); padding: 14px 0; }
.ot-col-empty [data-lucide] { width: 16px; height: 16px; }
.ot-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 12px 18px; cursor: pointer; box-shadow: inset 3px 0 0 var(--ot-accent, var(--border)), var(--elevation-card); transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.ot-card-title + .ot-card-meta { margin-top: 2px; }
.ot-card:hover { border-color: var(--wa); box-shadow: inset 3px 0 0 var(--ot-accent, var(--border)), var(--elevation-raised); transform: translateY(-1px); }
.ot-card:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { .ot-card { transition: none; } .ot-card:hover { transform: none; } }
.ot-card-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ot-card-meta { display: flex; align-items: center; gap: 6px; }
.ot-card-owner { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ot-card-pts { font-size: 12px; font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
.ot-card-date { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ot-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ot-badge-open { background: var(--info-soft); color: var(--info); }
.ot-badge-prog { background: var(--warning-soft); color: var(--warning); }
.ot-badge-subm { background: var(--lougha-soft); color: var(--lougha); }
.ot-badge-scored { background: var(--success-soft); color: var(--success); }
.ot-badge-cancel { background: var(--surface-sunken); color: var(--text-muted); }
.ot-modal-card { width: min(620px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.ot-modal-card .modal-body { overflow-y: auto; }
.ot-form, .ot-detail { display: flex; flex-direction: column; gap: 10px; }
.ot-flabel { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: -4px; }
.ot-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ot-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ot-detail-owner { font-size: 12px; color: var(--text-secondary); }
.ot-detail-desc { white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: var(--text); background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px; }
.ot-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ot-score-panel { background: var(--wa-soft); border: 1px solid var(--wa); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--elevation-card); }
.ot-score-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ot-score-row .input[type="text"] { flex: 1; min-width: 140px; }
.ot-comments { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.ot-comment-list { display: flex; flex-direction: column; gap: 8px; }
.ot-comment { background: var(--surface-sunken); border-radius: 10px; padding: 8px 10px; }
.ot-comment-head { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.ot-comment-body { font-size: 13px; color: var(--text); white-space: pre-wrap; }
.ot-comment-add { display: flex; gap: 8px; }
.ot-comment-add .input { flex: 1; }
@media (max-width: 1100px) { .ot-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ot-board { grid-template-columns: 1fr; } }

/* ---- Find a group ---- */
.fg-summary { margin: 12px 16px 0; padding: 14px 16px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fg-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fg-sum-name { font-size: 17px; font-weight: 700; color: var(--text); }
.fg-sum-phone { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; margin-top: 1px; }
.fg-sum-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fg-sum-note { margin-top: 10px; display: inline-block; padding: 4px 10px; background: var(--lougha-soft); color: var(--lougha); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.fg-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 12px 16px 0; padding: 10px 14px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius); }
.fg-ctrl-group { display: flex; align-items: center; gap: 6px; }
.fg-ctrl-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-right: 2px; }
.fg-chip { padding: 5px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; }
.fg-chip:hover { background: var(--surface-hover); color: var(--text); }
.fg-chip.active { background: var(--lougha); color: #fff; border-color: var(--lougha); }
.fg-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; }
.fg-toggle input { accent-color: var(--lougha); cursor: pointer; }
.fg-results { padding: 12px 16px 24px; }
.fg-results-count { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.fg-card { padding: 14px 16px 15px; background: var(--surface-elevated); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); cursor: pointer; transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease); }
.fg-card:hover { border-color: var(--lougha); border-left-color: var(--lougha); box-shadow: var(--shadow); transform: translateY(-2px); }
.fg-card:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
/* Left accent telegraphs fit quality at a glance (green = strong, amber = okay). */
.fg-card-hi { border-left-color: var(--success); }
.fg-card-mid { border-left-color: var(--warning); }
.fg-card-lo { border-left-color: var(--border-strong); }
.fg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fg-card-title { font-weight: 700; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-match { flex-shrink: 0; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fg-match-hi { background: var(--success-soft); color: var(--success); }
.fg-match-mid { background: var(--warning-soft); color: var(--warning); }
.fg-match-lo { background: var(--surface-sunken); color: var(--text-tertiary); }
.fg-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.fg-kv { display: flex; flex-direction: column; min-width: 0; }
.fg-k { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-tertiary); }
.fg-v { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A 4-day week ("Mon & Wed 22:00–23:30 · Tue & Thu 20:30–22:00") must read in full. */
.fg-v.fg-v-wrap { white-space: normal; overflow: visible; line-height: 1.35; }
.fg-reasons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.fg-reason { padding: 2px 8px; background: var(--surface-sunken); color: var(--text-secondary); border-radius: var(--radius-pill); font-size: 11px; }
.fg-card-open { margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--lougha); opacity: 0; transition: opacity .16s ease; }
.fg-card:hover .fg-card-open { opacity: 1; }
.fg-v-num { font-variant-numeric: tabular-nums; }
/* Program mini-bar — the primary signal gets a visual, not just a number. */
.fg-prog { height: 4px; margin-top: 3px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.fg-prog-fill { height: 100%; background: var(--lougha); border-radius: var(--radius-pill); transition: width .25s ease; }
/* Reason chips carry meaning by color + text (never color alone). */
.fg-reason-pos { background: var(--success-soft); color: var(--success); }
.fg-reason-warn { background: var(--warning-soft); color: var(--warning); }
/* Focus-visible rings for keyboard nav (a11y). */
.fg-chip:focus-visible, .fg-toggle input:focus-visible, #fgStudentSearch:focus-visible, #fgSearchBtn:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
/* Skeleton loading — perceived speed for the >300ms search round-trip. */
.fg-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.fg-skel { height: 168px; border-radius: var(--radius-lg); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); background: linear-gradient(100deg, var(--surface-sunken) 30%, var(--surface-hover) 50%, var(--surface-sunken) 70%); background-size: 200% 100%; animation: fg-shimmer 1.3s ease-in-out infinite; }
@keyframes fg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fg-card, .fg-chip, .fg-card-open, .fg-prog-fill { transition: none; }
  .fg-card:hover { transform: none; }
  .fg-skel { animation: none; }
}
/* ---- Find a group: search autocomplete ---- */
.fg-search-wrap { position: relative; display: flex; gap: 8px; align-items: center; }
.fg-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-tertiary); pointer-events: none; }
.fg-search-input { min-width: 300px; padding-left: 34px !important; }
.fg-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 52px; z-index: 60; max-height: 340px; overflow-y: auto; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 4px; }
.fg-suggest-item { padding: 8px 10px; border-radius: var(--radius); cursor: pointer; transition: background .12s ease; }
.fg-suggest-item:hover, .fg-suggest-item.active { background: var(--surface-hover); }
.fg-suggest-main { display: flex; align-items: center; gap: 8px; }
.fg-suggest-name { font-size: 14px; font-weight: 600; color: var(--text); }
.fg-suggest-level { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--lougha-soft); color: var(--lougha); font-size: 11px; font-weight: 700; }
.fg-suggest-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- Find a group: student hero ---- */
.fg-sum-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fg-avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--lougha), var(--accent)); }
/* ---- Find a group: best match ---- */
.fg-card-best { border-color: var(--success); box-shadow: 0 0 0 1px var(--success-soft), var(--shadow); }
.fg-best-badge { position: absolute; top: -1px; right: -1px; padding: 3px 10px; background: var(--success); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 0 var(--radius-lg) 0 var(--radius); }
.fg-card { position: relative; }
/* ---- Find a group: card actions + booking ---- */
.fg-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.fg-book-btn { padding: 5px 14px !important; font-size: 12px !important; }
.fg-modal-overlay { position: fixed; inset: 0; z-index: 1000; background: oklch(0.15 0.012 250 / 0.55); display: grid; place-items: center; padding: 20px; }
.fg-modal { width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.fg-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.fg-modal-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.fg-modal-body { padding: 14px 16px; overflow-y: auto; }
.fg-modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-sunken); }
.fg-book-summary { background: var(--surface-sunken); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.fg-book-sum-row { font-size: 13px; color: var(--text); }
.fg-book-sum-arrow { margin-top: 3px; color: var(--text-secondary); }
.fg-book-note { font-size: 12px; padding: 7px 10px; border-radius: var(--radius); margin-bottom: 12px; }
.fg-book-note-ok { background: var(--success-soft); color: var(--success); }
.fg-book-note-warn { background: var(--warning-soft); color: var(--warning); }
.fg-book-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-tertiary); margin: 10px 0 4px; font-weight: 600; }
.fg-book-textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
.fg-book-textarea:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 1px; }
.fg-book-status { font-size: 12px; color: var(--warning); }
/* ---- Find a group: bookings panel ---- */
.fg-bookings-panel { margin: 12px 16px 0; padding: 8px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); max-height: 320px; overflow-y: auto; }
.fg-bk-row { display: grid; grid-template-columns: 120px 115px 1.25fr 1.35fr 100px 100px 74px; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text); align-items: center; }
.fg-bk-row:not(.fg-bk-head):hover { background: var(--surface-hover); }
.fg-bk-head { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-tertiary); font-weight: 600; border-bottom: 1px solid var(--border-subtle); }
.fg-bk-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-bk-plat { padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.fg-bk-plat-support2 { background: var(--lougha-soft); color: var(--lougha); }
.fg-bk-plat-leads7 { background: var(--accent-soft); color: var(--accent); }
.fg-book-empty { padding: 14px; text-align: center; font-size: 13px; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .fg-book-btn { transition: none; } }
/* ---- Find a group: filter dropdowns ---- */
.fg-controls { align-items: flex-end; }
.fg-fld { display: flex; flex-direction: column; gap: 3px; }
.fg-fld > span { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-tertiary); font-weight: 600; }
.fg-fld > select.input { min-width: 132px; padding: 6px 9px; font-size: 13px; }
.fg-controls .fg-toggle { padding-bottom: 6px; }
/* ---- Find a group: new-student card ---- */
.fg-newstudent { margin: 10px 16px 0; padding: 14px 16px; background: var(--surface-elevated); border: 1px solid var(--lougha-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fg-ns-title { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.fg-ns-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.fg-ns-fld { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 170px; }
.fg-ns-fld > span { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-tertiary); font-weight: 600; }
.fg-ns-actions { display: flex; gap: 8px; margin-top: 14px; }
/* SENDER segmented control — the active pill is green (semantically "send from"). */
.fg-book-sender-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fg-segmented { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.fg-seg { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); border-radius: var(--radius-pill); cursor: pointer; user-select: none; transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.fg-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fg-seg:has(input:checked) { background: var(--wa); color: #fff; box-shadow: var(--shadow-sm); }
.fg-seg:has(input:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
.fg-seg:has(input:disabled) { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .fg-seg { transition: none; } }

/* Book-class flagship motion (Phase G) — modal scale-in + choreographed page entrance. */
.fg-modal-overlay:not(.hidden) { animation: overlayIn var(--motion-fast) var(--ease) both; }
.fg-modal-overlay:not(.hidden) .fg-modal { animation: cardIn var(--motion-normal) var(--ease) both; }
.fg-modal-overlay.modal-leaving { animation: overlayIn var(--motion-fast) var(--ease) reverse both; }
.fg-modal-overlay.modal-leaving .fg-modal { animation: cardIn var(--motion-fast) var(--ease) reverse both; }
#findGroupView:not(.hidden) .bulk-header { animation: viewEnter var(--motion-normal) var(--ease) both; }
#findGroupView:not(.hidden) .fg-summary:not(.hidden) { animation: viewEnter var(--motion-normal) var(--ease) both; animation-delay: 50ms; }
#findGroupView:not(.hidden) .fg-controls:not(.hidden) { animation: viewEnter var(--motion-normal) var(--ease) both; animation-delay: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .fg-modal-overlay:not(.hidden), .fg-modal-overlay:not(.hidden) .fg-modal,
  .fg-modal-overlay.modal-leaving, .fg-modal-overlay.modal-leaving .fg-modal,
  #findGroupView:not(.hidden) .bulk-header, #findGroupView:not(.hidden) .fg-summary:not(.hidden), #findGroupView:not(.hidden) .fg-controls:not(.hidden) { animation: none; }
}
.fg-book-textarea.fg-readonly { background: var(--surface-sunken); color: var(--text-secondary); cursor: default; }
.fg-book-student { display: flex; gap: 10px; margin-bottom: 12px; }
.fg-book-student .fg-ns-fld { flex: 1; min-width: 0; }
.fg-book-date-fld { margin: 0 0 12px; }
.fg-bk-retry { padding: 4px 8px !important; font-size: 11px !important; }
.fg-book-name-fld { position: relative; }
.fg-book-suggest { left: 0; right: 0 !important; top: calc(100% + 4px); max-height: 240px; z-index: 1010; }


/* ─── Zone C — card primitives. One elevation/surface language for cards.
   Base = elevated surface + 1px border + --radius-lg + --pad-card + card elevation.
   Modifiers opt into flat/raised elevation or interactive hover-lift. ─── */
.card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-card);
  box-shadow: var(--elevation-card);
}
.card--flat { box-shadow: var(--elevation-flat); }
.card--elevated { box-shadow: var(--elevation-raised); }
.card--interactive {
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.card--interactive:hover {
  border-color: var(--border-strong);
  box-shadow: var(--elevation-raised);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .card--interactive { transition: none; }
  .card--interactive:hover { transform: none; }
}



/* ── Zone D: unified chip / badge base ───────────────────────────────
   A single role-driven chip family. New UI should use .chip + a modifier
   instead of hardcoding pale-status literals. Tokens flip in dark for free. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.chip--sm { padding: 1px 6px; font-size: 10px; }
.chip--info    { background: var(--info-soft);    color: var(--info); }
.chip--success { background: var(--success-soft); color: var(--success); }
.chip--warning { background: var(--warning-soft); color: var(--warning); }
.chip--danger  { background: var(--danger-soft);  color: var(--danger); }
.chip--accent  { background: var(--accent-soft);  color: var(--accent); }


/* ═══════════════════════════════════════════════════════════════════════════
   RICH EMERALD — premium dark chrome (2026-06-28). DARK-MODE ONLY; light is
   untouched (every rule is [data-theme="dark"]-scoped). Reversible: blank the
   dark token block below to restore the prior dark look.
   Spec: docs/superpowers/specs/2026-06-28-rich-emerald-premium-design.md
   ═══════════════════════════════════════════════════════════════════════════ */
:root, [data-theme="light"] {
  --header-grad: transparent;
  --hero-grad: transparent;
  --glass-panel: var(--surface-elevated);
  --glass-blur: none;
  --emerald-border: var(--border);
  --glow-green: var(--shadow-sm);
  --glow-green-sm: var(--shadow-sm);
  --btn-grad: var(--wa);
}
[data-theme="dark"] {
  --header-grad: linear-gradient(90deg, oklch(0.34 0.07 162 / 0.40), oklch(0.16 0.008 250 / 0.20) 72%);
  --hero-grad: radial-gradient(640px 380px at 50% 6%, oklch(0.50 0.13 160 / 0.16), transparent 70%);
  --glass-panel: oklch(0.46 0.10 160 / 0.08);
  --glass-blur: blur(14px);
  --emerald-border: oklch(0.55 0.14 160 / 0.22);
  --glow-green: 0 6px 24px oklch(0.62 0.16 150 / 0.40);
  --glow-green-sm: 0 2px 10px oklch(0.62 0.16 150 / 0.45);
  --btn-grad: linear-gradient(135deg, oklch(0.76 0.16 155), oklch(0.58 0.16 150));
}
/* Topbar */
[data-theme="dark"] .topbar { background-image: var(--header-grad); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--emerald-border); }
[data-theme="dark"] .view-tab.view-tab-active, [data-theme="dark"] .view-tab-item.view-tab-active { box-shadow: var(--glow-green-sm); }
[data-theme="dark"] .user-pill-avatar { background-image: var(--btn-grad); box-shadow: var(--glow-green-sm); }
/* Sidebar (inbox) */
[data-theme="dark"] .conv-item.active { background: color-mix(in oklab, var(--wa) 9%, transparent); box-shadow: inset 0 0 0 1px var(--emerald-border); }
[data-theme="dark"] .conv-unread { box-shadow: var(--glow-green-sm); }
/* KPI / scoreboard / generic cards — glassy emerald (KPI keeps its semantic border) */
[data-theme="dark"] .card, [data-theme="dark"] .score-tile { background: var(--glass-panel); backdrop-filter: var(--glass-blur); border-color: var(--emerald-border); }
[data-theme="dark"] .lifecycle-kpi { background: var(--glass-panel); backdrop-filter: var(--glass-blur); }
[data-theme="dark"] .card--interactive:hover, [data-theme="dark"] .score-tile:hover { box-shadow: var(--glow-green); border-color: color-mix(in oklab, var(--wa) 40%, transparent); }
[data-theme="dark"] .lifecycle-kpi:hover { box-shadow: var(--glow-green-sm); }
/* Buttons */
[data-theme="dark"] .btn-primary { background-image: var(--btn-grad); box-shadow: var(--glow-green); }
[data-theme="dark"] .btn-primary:hover { filter: brightness(1.06); }
/* Hero — inbox empty state */
[data-theme="dark"] .empty-state { background-image: var(--hero-grad); }
/* Dense tables — emerald ACCENTS only (crisp, no blur) */
[data-theme="dark"] .tickets-row:not(.tickets-row-head):hover, [data-theme="dark"] .lc-row:not(.lc-row-head):hover, [data-theme="dark"] .paidcl-row:hover, [data-theme="dark"] .groups-row:not(.groups-row-head):hover { background: color-mix(in oklab, var(--wa) 7%, var(--surface-hover)); }
[data-theme="dark"] .tickets-row-head, [data-theme="dark"] .lc-row-head, [data-theme="dark"] .groups-row-head { border-bottom: 2px solid var(--emerald-border); }
@media (prefers-reduced-motion: reduce) { [data-theme="dark"] .btn-primary:hover { filter: none; } }
/* Big-CRM polish — dark-only emerald chrome for the 3 new surfaces (Student Feedback,
   Open Tasks, Scoring). Light untouched; reversible by blanking this block. */
[data-theme="dark"] #sfTable { border-color: var(--emerald-border); }
[data-theme="dark"] .sf-addform { border-color: var(--emerald-border); }
[data-theme="dark"] .ot-col { background: var(--glass-panel); backdrop-filter: var(--glass-blur); border-color: var(--emerald-border); }
[data-theme="dark"] .ot-card { border-color: var(--emerald-border); }
[data-theme="dark"] .ot-card:hover { box-shadow: inset 3px 0 0 var(--ot-accent, var(--wa)), var(--glow-green); border-color: color-mix(in oklab, var(--wa) 40%, transparent); }
[data-theme="dark"] .ot-score-panel { box-shadow: var(--glow-green-sm); }
[data-theme="dark"] .score-hero { border-color: var(--emerald-border); box-shadow: var(--glow-green-sm); }
[data-theme="dark"] .sf-empty { background-image: var(--hero-grad); border-radius: var(--radius-lg); }

/* ============ Team Chat inbox (team ⇄ teacher) ============ */
#teamChatInboxView { padding: 0; }
/* 2 columns by default — the contact-info column is only reserved when the
   panel is OPEN and actually has content (closed/empty = dead white gap
   otherwise, the 2026-07-03 "fin l'profil?" bug). Panel now defaults open. */
.tcinbox-wrap { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 116px); gap: 14px; padding: 12px 16px; }
.tcinbox-wrap.tc-panel-open { grid-template-columns: 320px 1fr 320px; }
.tcinbox-wrap.tc-panel-open:has(.tcinbox-schedpane:empty) { grid-template-columns: 320px 1fr; }
.tcinbox-schedpane { min-height: 0; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); padding: 14px; }
.tcinbox-schedpane:empty { display: none; }
.tcinbox-schedpane .profile-card { margin: 0; }
.tcinbox-listpane { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); overflow: hidden; }
.tcinbox-listhead { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.tcinbox-listhead h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.tcinbox-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-sunken); color: var(--text); }
.tcinbox-list { flex: 1; overflow-y: auto; padding: 6px; }
.tcinbox-row { gap: 11px; }
.tcinbox-rowbody { min-width: 0; flex: 1; }
.tcinbox-rowtop { display: flex; align-items: baseline; gap: 8px; }
.tcinbox-rowtop .conv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcinbox-time { font-size: 11px; color: var(--text-muted); flex: 0 0 auto; }
.tcinbox-rowbot { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.tcinbox-rowbot .conv-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcinbox-unread { background: var(--wa); }
.tcinbox-chatpane { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); overflow: hidden; }
.tcinbox-chathead { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.tcinbox-sub { font-size: 11px; color: var(--text-muted); }
.tcinbox-chatacts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.tcinbox-notes-panel { border-bottom: 1px solid var(--border-subtle); padding: 10px 14px; background: var(--surface-sunken); max-height: 220px; overflow-y: auto; }
.tcinbox-notes-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.tcinbox-note-item { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.tcinbox-note-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.tcinbox-notes-add { display: flex; gap: 8px; align-items: flex-end; }
.tcinbox-notes-add textarea { flex: 1; font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; }
.tcinbox-search-bar { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); }
.tcinbox-search-bar input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-sunken); color: var(--text); }
.tcinbox-msg-hidden-by-search { display: none !important; }
.tcinbox-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
/* (Legacy .tcinbox-msgrow bubble CSS removed 2026-07-03 — bubbles render via the
   shared buildBubble pipeline (.message-row/.bubble) since the parity port;
   only the scroll container above and the reply bar below are still live.) */
.tcinbox-replybar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; margin: 0 14px; border-left: 3px solid var(--wa); background: var(--surface-sunken); border-radius: 6px; }
.tcinbox-replybar.hidden { display: none; }
.tcinbox-replybar-b { min-width: 0; flex: 1; }
.tcinbox-replybar-b b { display: block; font-size: 11px; color: var(--wa-dark, var(--wa)); }
.tcinbox-replybar-b span { display: block; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcinbox-replybar-x { cursor: pointer; border: 0; background: none; font-size: 17px; color: var(--text-muted); }
.tcinbox-composer { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.tcinbox-ta { flex: 1; font: inherit; font-size: 14px; resize: none; border: 1px solid var(--border); border-radius: 18px; padding: 9px 14px; max-height: 120px; box-sizing: border-box; background: var(--surface); color: var(--text); }
.tcinbox-iconbtn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--surface); color: var(--text-secondary); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.tcinbox-iconbtn:hover { background: var(--surface-hover); }
.tcinbox-iconbtn.recording { background: var(--danger); color: #fff; }
/* Teachers composer attach popover — mirrors the main chat's
   .attach-menu/.attach-menu-item (search app.css for those) but scoped
   under its own class names + anchor wrapper so it doesn't collide with
   the main chat's singleton #attachMenu. Anchored via a position:relative
   wrap (same convention as .assign-wrap) around the 📎 button instead of
   the main chat's hardcoded bottom/left offsets, since this composer's
   attach button isn't always the first element in its row. */
.tc-attach-wrap { position: relative; display: inline-flex; }
.tc-attach-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 200px;
  z-index: 200;
}
.tc-attach-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  transition: background var(--motion-fast) var(--ease);
}
.tc-attach-menu-item:hover { background: var(--surface-hover); }
.tc-attach-menu-item i { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.tcinbox-empty { margin: auto; color: var(--text-muted); font-size: 13px; text-align: center; padding: 30px; }
@media (max-width: 1100px) { .tcinbox-wrap, .tcinbox-wrap.tc-panel-open { grid-template-columns: 320px 1fr; } .tcinbox-schedpane { display: none; } }
@media (max-width: 820px) { .tcinbox-wrap, .tcinbox-wrap.tc-panel-open { grid-template-columns: 1fr; } }

/* ── Embedded Teachers tab (2026-07-02) — row pin affordance. The rows reuse
   .tcinbox-row inside the MAIN inbox sidebar; the pin button is hover-only
   (WA-style) so the list stays clean. Tokens only (gotcha #14). ── */
.tc-pin-btn { background: none; border: none; padding: 4px; border-radius: 8px; color: var(--text-muted); cursor: pointer; opacity: 0; flex: 0 0 auto; transition: opacity 0.15s ease, background 0.15s ease; }
.tcinbox-row:hover .tc-pin-btn, .tc-pin-btn:focus-visible { opacity: 1; }
.tc-pin-btn:hover { background: var(--surface-hover); color: var(--text); }
.tcinbox-row.is-pinned .tc-pin-btn { opacity: 0.7; }
.tc-pin-btn svg, .tc-pin-btn i { width: 15px; height: 15px; }
.tc-row-pin { color: var(--text-muted); display: inline-flex; }
.tc-row-pin svg { width: 13px; height: 13px; }

/* ── Merging Smart Dashboard (2026-07-02, ui-ux-pro-max pass) — KPI header +
   filter bar + priority table inside #mergingProcessView. Tokens only
   (gotcha #14); Lucide icons only; 150ms transitions; focus via --focus. ── */
.mpd-kpis { display: flex; gap: 10px; padding: 6px 0 12px; overflow-x: auto; }
.mpd-kpi { display: flex; align-items: center; gap: 10px; min-width: 128px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
.mpd-kpi:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--elevation-card, 0 2px 8px rgba(0,0,0,.06)); }
.mpd-kpi:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--wa)); outline-offset: var(--focus-offset, 2px); }
.mpd-kpi-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-sunken); color: var(--text-muted); transition: background .15s ease, color .15s ease; }
.mpd-kpi-ico svg { width: 16px; height: 16px; }
.mpd-kpi-body { display: flex; flex-direction: column; gap: 1px; }
.mpd-kpi-num { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.15; }
.mpd-kpi-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
/* tone accents live on the icon bubble; active = tinted card */
.mpd-kpi-t-danger .mpd-kpi-ico { background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--danger); }
.mpd-kpi-t-warning .mpd-kpi-ico { background: color-mix(in oklab, var(--warning) 14%, transparent); color: var(--warning); }
.mpd-kpi-t-success .mpd-kpi-ico { background: var(--success-soft); color: var(--success); }
.mpd-kpi-t-accent .mpd-kpi-ico { background: var(--accent-soft); color: var(--accent); }
.mpd-kpi.active { border-color: var(--accent); background: var(--accent-soft); }
.mpd-kpi.active .mpd-kpi-num, .mpd-kpi.active .mpd-kpi-label { color: var(--accent); }
.mpd-kpi-t-danger.active { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 9%, transparent); }
.mpd-kpi-t-danger.active .mpd-kpi-num, .mpd-kpi-t-danger.active .mpd-kpi-label { color: var(--danger); }
.mpd-kpi-t-warning.active { border-color: var(--warning); background: color-mix(in oklab, var(--warning) 12%, transparent); }
.mpd-kpi-t-warning.active .mpd-kpi-num, .mpd-kpi-t-warning.active .mpd-kpi-label { color: var(--warning); }
.mpd-kpi-t-success.active { border-color: var(--success); background: var(--success-soft); }
.mpd-kpi-t-success.active .mpd-kpi-num, .mpd-kpi-t-success.active .mpd-kpi-label { color: var(--success); }

.mpd-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 0 12px; }
.mpd-more-filters { display:none; align-items:center; gap:6px; }
.mpd-more-filters svg { width:14px; height:14px; }
.mpd-more-filters b { min-width:18px; padding:1px 5px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent); font-size:9px; text-align:center; }
.mpd-search { flex: 1 1 200px; min-width: 170px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: 12.5px; transition: border-color .15s ease; }
.mpd-search:hover { border-color: var(--border-strong); }
.mpd-search:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--wa)); outline-offset: 1px; }
.mpd-search.is-set { border-color: var(--accent); background: var(--accent-soft); }
.mpd-select { padding: 6px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: 500; max-width: 168px; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.mpd-select:hover { border-color: var(--border-strong); background: var(--surface); }
.mpd-select:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--wa)); outline-offset: 1px; }
.mpd-select.is-set { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.mpd-chip { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.mpd-chip:hover { border-color: var(--border-strong); }
.mpd-chip:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--wa)); outline-offset: 1px; }
.mpd-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

#mpdTable .tickets-row.mpd-row { grid-template-columns: 46px minmax(165px, 1.55fr) 96px 82px minmax(105px, 1fr) 132px 105px; align-items: center; transition: background .15s ease; }
#mpdTable .tickets-row.mpd-row:not(.tickets-row-head):hover { background: var(--surface-hover); }
#mpdTable .tickets-row-head { position: sticky; top: 0; z-index: 5; background: var(--surface); box-shadow: 0 1px 0 var(--border); }
#mpdTable .tickets-cell-head { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.mpd-prio { display: flex; justify-content: center; }
/* priority = quiet tinted pill (a wall of solid red circles reads as alarm noise) */
.mpd-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 24px; padding: 0 7px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.mpd-dot-crit { background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 35%, transparent); }
.mpd-dot-high { background: color-mix(in oklab, var(--warning) 14%, transparent); color: var(--warning); border-color: color-mix(in oklab, var(--warning) 40%, transparent); }
.mpd-dot-med { background: var(--accent-soft); color: var(--accent); }
.mpd-dot-low { background: var(--surface-sunken); color: var(--text-secondary); }
.mpd-dot-off { background: var(--surface-sunken); color: var(--text-muted); }
.mpd-group { min-width: 0; }
.mpd-gname { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.mpd-gname .mp-gn { font-weight: 650; }
.mpd-gsub { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpd-note-preview { color:var(--accent); font-weight:650; }
.mpd-teacher-note-badge { display:inline-flex; align-items:center; padding:1px 6px; border-radius:var(--radius-pill); background:color-mix(in oklab,var(--accent) 12%,transparent); color:var(--accent); font-size:9px; font-weight:800; white-space:nowrap; }
.mpd-teacher-note-preview { color:#7c3aed; font-weight:650; }
.mpd-att { display: flex; flex-direction: column; gap: 4px; }
.mpd-att-num { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.mpd-att .mp-bar { width: 78px; }
.mpd-att-open { display:flex; min-width:88px; flex-direction:column; align-items:flex-start; gap:3px; margin:-4px; padding:4px; border:0; border-radius:7px; background:transparent; text-align:left; cursor:pointer; }
.mpd-att-open:hover { background:var(--accent-soft); }
.mpd-att-open:focus-visible { outline:var(--focus-w,2px) solid var(--focus,var(--accent)); outline-offset:1px; }
.mpd-att-open-label { color:var(--accent); font-size:8.5px; font-weight:700; opacity:.82; }
.mpd-closes-in { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.mpd-closes-in.warn { color: var(--danger); }
.mpd-match-chip { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; background: var(--surface); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.mpd-match-chip:hover { transform: translateY(-1px); }
.mpd-match-chip:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--wa)); outline-offset: 1px; }
.mpd-match-chip.hi { color: var(--success); border-color: color-mix(in oklab, var(--success) 45%, transparent); background: var(--success-soft); }
.mpd-match-chip.mid { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 45%, transparent); background: color-mix(in oklab, var(--warning) 8%, transparent); }
.mpd-match-chip.lo { color: var(--text-muted); }
/* quiet the stage select + note inside the dashboard rows (they competed with data) */
#mpdTable .mp-stage-sel { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 8px; font-size: 11.5px; padding: 5px 6px; color: var(--text-secondary); cursor: pointer; }
#mpdTable .mp-stage-sel:hover { border-color: var(--border-strong); }
#mpdTable .mp-note-cell { background: transparent; border: 1px dashed transparent; border-radius: 8px; font-size: 11.5px; padding: 5px 8px; transition: border-color .15s ease, background .15s ease; }
#mpdTable .mp-note-cell:hover { border-color: var(--border-strong); background: var(--surface-sunken); }
#mpdTable .mp-note-cell.is-empty { color: var(--text-muted); }
.mpd-assignee { position: relative; display: inline-flex; }
.mpd-assign-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); background: transparent; padding: 4px 9px; font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.mpd-assign-chip:hover { border-color: var(--accent); color: var(--accent); }
.mpd-assign-chip:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--wa)); outline-offset: 1px; }
.mpd-assign-chip.has { border-style: solid; border-color: var(--border); color: var(--text); background: var(--surface-hover); }
.mpd-assign-av { width: 18px; height: 18px; font-size: 8.5px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.mpd-assign-pop { position: fixed; z-index: 1000; min-width: 175px; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--elevation-overlay, 0 8px 24px rgba(0,0,0,.18)); padding: 4px; display: flex; flex-direction: column; }
.mpd-assign-opt { display: flex; align-items: center; gap: 7px; }
.mpd-assign-opt { text-align: left; padding: 6px 9px; border: none; background: none; border-radius: 7px; font-size: 12px; color: var(--text); cursor: pointer; }
.mpd-assign-opt:hover { background: var(--surface-hover); }
.mpd-assign-opt.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.mpd-assign-loading { padding: 6px 9px; font-size: 11.5px; color: var(--text-muted); }
.mpd-acts { display: flex; gap: 4px; }
.mpd-act { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.mpd-act svg { width: 14px; height: 14px; }
.mpd-act:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.mpd-act:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--wa)); outline-offset: 1px; }

/* Scroll fix: #mpDash must be a proper flex column inside .bulk-view
   (overflow:hidden) — as a plain block its overflow was CLIPPED and the
   page "wouldn't scroll past the first rows". The inner wrap scrolls. */
#mpDash { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#mpDash.hidden { display: none; }
#mpDash .mpd-kpis, #mpDash .mpd-controlbar, #mpDash .mpd-toolbar { flex: 0 0 auto; }
#mpDash .tickets-table-wrap { min-height: 0; overflow: auto; }

/* Merging CRM — explicit record scopes + master/detail workspace. */
.mpd-scopes { display:flex; align-items:center; gap:5px; padding:0 0 10px; overflow-x:auto; flex:0 0 auto; }
.mpd-controlbar { flex:0 0 auto; }
.mpd-scope { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:5px 10px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text-secondary); font-size:12px; font-weight:650; white-space:nowrap; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.mpd-scope svg { width:14px; height:14px; }
.mpd-scope b { min-width:20px; padding:1px 6px; border-radius:var(--radius-pill); background:var(--surface-sunken); color:var(--text-muted); font-size:10px; text-align:center; }
.mpd-scope:hover { border-color:var(--border-strong); background:var(--surface-hover); }
.mpd-scope.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.mpd-scope.active b { background:var(--surface); color:var(--accent); }
.mpd-workspace { flex:1; min-height:0; display:grid; grid-template-columns:minmax(720px,1fr) minmax(370px,430px); gap:12px; }
.mpd-list-pane { min-width:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
#mpdTable .tickets-row.mpd-row[data-group-id] { cursor:pointer; outline:none; }
#mpdTable .tickets-row.mpd-row[data-group-id].selected { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
#mpdTable .tickets-row.mpd-row[data-group-id]:focus-visible { box-shadow:inset 0 0 0 2px var(--focus,var(--accent)); }

.mpd-detail { min-width:0; overflow-y:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--elevation-card,0 2px 10px rgba(0,0,0,.06)); }
.mpd-detail-empty { min-height:260px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:30px; color:var(--text-muted); text-align:center; }
.mpd-detail-empty svg { width:28px; height:28px; opacity:.65; }
.mpd-detail-empty strong { color:var(--text); font-size:14px; }
.mpd-detail-empty span { max-width:280px; font-size:12px; line-height:1.5; }
.mpd-detail-head { position:sticky; top:0; z-index:3; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:16px 16px 12px; border-bottom:1px solid var(--border-subtle); background:color-mix(in oklab,var(--surface) 94%,transparent); backdrop-filter:blur(10px); }
.mpd-detail-title { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px; }
.mpd-detail-title h3 { flex:1 0 100%; margin:0; color:var(--text); font-size:18px; line-height:1.25; overflow-wrap:anywhere; }
.mpd-detail-eyebrow { color:var(--text-muted); font-size:9px; font-weight:800; letter-spacing:.11em; }
.mpd-detail-stage { display:inline-flex; align-items:center; padding:2px 7px; border-radius:var(--radius-pill); background:var(--surface-sunken); color:var(--text-secondary); font-size:10px; font-weight:700; }
.mpd-detail-stage-done { background:var(--success-soft); color:var(--success); }
.mpd-detail-stage-rejected { background:var(--surface-hover); color:var(--text-muted); }
.mpd-detail-stage-low_attendance { background:color-mix(in oklab,var(--danger) 11%,transparent); color:var(--danger); }
.mpd-detail-close { display:none; width:30px; height:30px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text-secondary); cursor:pointer; }
.mpd-detail-close svg { width:15px; height:15px; }
.mpd-detail-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:10px 14px; border-bottom:1px solid var(--border-subtle); }
.mpd-detail-action { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:48px; padding:5px; border:1px solid var(--border); border-radius:9px; background:var(--surface-sunken); color:var(--text-secondary); font-size:9.5px; font-weight:700; cursor:pointer; }
.mpd-detail-action svg { width:15px; height:15px; }
.mpd-detail-action:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.mpd-detail-action.primary { border-color:var(--accent); background:var(--accent); color:#fff; }
.mpd-detail-facts { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 14px; }
.mpd-detail-fact { min-width:0; display:flex; gap:8px; padding:9px; border:1px solid var(--border-subtle); border-radius:9px; background:var(--surface-sunken); }
.mpd-detail-fact-ico { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:7px; background:var(--surface); color:var(--accent); }
.mpd-detail-fact-ico svg { width:13px; height:13px; }
.mpd-detail-fact-body { min-width:0; display:flex; flex-direction:column; gap:1px; }
.mpd-detail-fact-body small { color:var(--text-muted); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.mpd-detail-fact-body strong { color:var(--text); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mpd-detail-fact-body span { color:var(--text-muted); font-size:9.5px; }
.mpd-detail-alert { margin:0 14px 10px; padding:8px 10px; border:1px solid color-mix(in oklab,var(--warning) 38%,transparent); border-radius:8px; background:color-mix(in oklab,var(--warning) 10%,transparent); color:var(--warning); font-size:10.5px; line-height:1.4; }
.mpd-record-note { display:flex; width:calc(100% - 28px); flex-direction:column; gap:6px; margin:0 14px 12px; padding:10px 11px; border:1px solid color-mix(in oklab,var(--accent) 38%,var(--border)); border-radius:9px; background:var(--accent-soft); color:var(--text-secondary); text-align:left; cursor:pointer; transition:border-color .15s ease,background .15s ease,transform .15s ease; }
.mpd-record-note:hover { border-color:var(--accent); transform:translateY(-1px); }
.mpd-record-note:focus-visible { outline:var(--focus-w,2px) solid var(--focus,var(--accent)); outline-offset:2px; }
.mpd-record-note.is-empty { border-style:dashed; background:var(--surface-sunken); color:var(--text-muted); }
.mpd-record-note-head { display:flex; align-items:center; gap:6px; color:var(--accent); }
.mpd-record-note-head svg { width:14px; height:14px; }
.mpd-record-note-head strong { font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.mpd-record-note-head>span { margin-left:auto; font-size:9.5px; font-weight:700; }
.mpd-record-note-text { font-size:10.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.mpd-detail-section { padding:12px 14px; border-top:1px solid var(--border-subtle); }
.mpd-detail-section h4 { display:flex; align-items:center; gap:6px; margin:0 0 9px; color:var(--text); font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.mpd-detail-section h4 svg { width:14px; height:14px; color:var(--accent); }
.mpd-section-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:18px; margin-left:auto; padding:0 6px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent); font-size:9px; font-variant-numeric:tabular-nums; }
.mpd-teacher-notes-section { background:color-mix(in oklab,var(--accent) 3%,var(--surface)); }
.mpd-teacher-notes-help { margin:-3px 0 9px; color:var(--text-muted); font-size:9.5px; line-height:1.4; }
.mpd-teacher-notes-list { display:flex; flex-direction:column; gap:7px; }
.mpd-teacher-note-card { padding:9px 10px; border:1px solid color-mix(in oklab,var(--accent) 22%,var(--border)); border-radius:9px; background:var(--surface); }
.mpd-teacher-note-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px 7px; margin-bottom:5px; }
.mpd-teacher-note-meta strong { color:var(--text); font-size:10.5px; }
.mpd-teacher-note-meta time { margin-left:auto; color:var(--text-muted); font-size:9px; }
.mpd-teacher-note-scope { max-width:180px; padding:2px 6px; overflow:hidden; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent); font-size:9px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.mpd-teacher-note-text { color:var(--text-secondary); font-size:10.5px; line-height:1.48; white-space:pre-wrap; overflow-wrap:anywhere; }
.mpd-attendance-section { scroll-margin-top:78px; }
.mpd-attendance-explain { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; margin-bottom:9px; padding:9px 10px; border:1px solid color-mix(in oklab,var(--accent) 32%,var(--border)); border-radius:9px; background:var(--accent-soft); }
.mpd-attendance-explain strong { color:var(--accent); font-size:15px; font-variant-numeric:tabular-nums; }
.mpd-attendance-explain span { color:var(--text-secondary); font-size:9.5px; line-height:1.4; }
.mpd-attendance-sources { display:flex; gap:5px; margin-bottom:9px; overflow-x:auto; padding-bottom:2px; }
.mpd-attendance-source { flex:0 0 auto; padding:5px 8px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); color:var(--text-secondary); font-size:9.5px; font-weight:650; cursor:pointer; }
.mpd-attendance-source:hover { border-color:var(--accent); color:var(--accent); }
.mpd-attendance-source.active { border-color:var(--accent); background:var(--accent); color:#fff; }
.mpd-attendance-source:focus-visible { outline:var(--focus-w,2px) solid var(--focus,var(--accent)); outline-offset:1px; }
.mpd-attendance-subhead { margin:0 0 6px; color:var(--text-muted); font-size:9px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.mpd-journey { display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); align-items:center; gap:4px; }
.mpd-journey-node { min-width:0; display:flex; flex-direction:column; gap:2px; padding:9px; border:1px solid var(--border); border-radius:9px; background:var(--surface-sunken); }
.mpd-journey-node small,.mpd-inbound>small { color:var(--text-muted); font-size:8.5px; font-weight:800; letter-spacing:.06em; }
.mpd-journey-node strong { color:var(--text); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mpd-journey-node span { color:var(--success); font-size:9.5px; font-weight:650; }
.mpd-journey-node.target { border-color:color-mix(in oklab,var(--success) 35%,var(--border)); background:var(--success-soft); }
.mpd-journey-node.empty { border-style:dashed; }
.mpd-journey-arrow { display:flex; justify-content:center; color:var(--text-muted); }
.mpd-journey-arrow svg { width:15px; height:15px; }
.mpd-inbound { margin-top:9px; }
.mpd-inbound-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.mpd-inbound-chips span { padding:2px 7px; border-radius:var(--radius-pill); background:var(--success-soft); color:var(--success); font-size:9.5px; font-weight:700; }
.mpd-session-list { display:flex; flex-direction:column; gap:5px; }
.mpd-session-row { display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px; min-height:30px; padding:5px 8px; border-radius:7px; background:var(--surface-sunken); font-size:10px; }
.mpd-session-date { flex:1; min-width:120px; color:var(--text-secondary); }
.mpd-session-row strong { color:var(--success); font-size:10px; }
.mpd-session-brief { color:var(--warning); font-weight:650; }
.mpd-session-sub { flex:1 0 100%; color:var(--accent); font-size:9px; }
.mpd-student-summary { display:flex; gap:6px; margin-bottom:7px; }
.mpd-student-summary span { padding:2px 7px; border-radius:var(--radius-pill); background:var(--success-soft); color:var(--success); font-size:9.5px; font-weight:700; }
.mpd-student-summary span:nth-child(2) { background:var(--surface-sunken); color:var(--text-muted); }
.mpd-student-summary .warn { background:color-mix(in oklab,var(--warning) 12%,transparent); color:var(--warning); }
.mpd-roster-list { max-height:270px; overflow-y:auto; border:1px solid var(--border-subtle); border-radius:9px; }
.mpd-roster-row { display:grid; grid-template-columns:8px minmax(120px,1fr) auto 30px; align-items:center; gap:7px; min-height:39px; padding:5px 8px; border-bottom:1px solid var(--border-subtle); }
.mpd-roster-row:last-child { border-bottom:0; }
.mpd-roster-row.unlinked { background:color-mix(in oklab,var(--warning) 7%,transparent); }
.mpd-roster-status { width:7px; height:7px; border-radius:50%; background:var(--text-muted); }
.mpd-roster-status.active { background:var(--success); box-shadow:0 0 0 3px var(--success-soft); }
.mpd-roster-who { min-width:0; display:flex; flex-direction:column; }
.mpd-roster-who strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:10.5px; }
.mpd-roster-who small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-size:8.5px; }
.mpd-roster-dots { display:flex; gap:3px; }
.mpd-att-dot { display:block; width:7px; height:7px; border-radius:50%; background:var(--surface-hover); border:1px solid var(--border-strong); }
.mpd-att-dot.full { background:var(--success); border-color:var(--success); }
.mpd-att-dot.brief { background:var(--warning); border-color:var(--warning); }
.mpd-roster-count { color:var(--text-muted); font-size:9px; font-variant-numeric:tabular-nums; text-align:right; }
.mpd-detail-loading,.mpd-detail-error,.mpd-detail-emptyline { padding:12px; border-radius:8px; background:var(--surface-sunken); color:var(--text-muted); font-size:10.5px; text-align:center; }
.mpd-detail-error { color:var(--danger); background:color-mix(in oklab,var(--danger) 8%,transparent); }
.mpd-timeline { position:relative; display:flex; flex-direction:column; gap:0; }
.mpd-timeline-item { display:grid; grid-template-columns:12px 1fr; gap:7px; min-height:42px; }
.mpd-timeline-item>i { position:relative; width:8px; height:8px; margin-top:4px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.mpd-timeline-item:not(:last-child)>i::after { content:""; position:absolute; top:10px; left:3px; width:1px; height:29px; background:var(--border); }
.mpd-timeline-item>div { display:flex; flex-direction:column; gap:1px; }
.mpd-timeline-item strong { color:var(--text); font-size:10.5px; }
.mpd-timeline-item span { color:var(--text-muted); font-size:9px; }
.mpd-timeline-item.tone-success>i { background:var(--success); box-shadow:0 0 0 3px var(--success-soft); }
.mpd-timeline-item.tone-wa>i { background:var(--wa,#16a34a); box-shadow:0 0 0 3px color-mix(in oklab,var(--wa,#16a34a) 14%,transparent); }
.mpd-timeline-item.tone-muted>i { background:var(--text-muted); box-shadow:0 0 0 3px var(--surface-hover); }

@media (max-width:1450px) {
  .mpd-workspace { grid-template-columns:minmax(620px,1fr) 360px; gap:8px; }
  #mpdTable .tickets-row.mpd-row { grid-template-columns:38px minmax(135px,1.5fr) 78px 68px minmax(85px,1fr) 104px 78px; gap:6px; padding:9px 10px; }
  #mpdTable .tickets-row-head { padding-block:8px; }
  #mpdTable .mpd-match-chip { padding:3px 6px; font-size:10px; }
  #mpdTable .mp-stage-sel { width:100%; font-size:10.5px; }
  #mpdTable .mpd-assign-chip { padding-inline:6px; }
  #mpdTable .mpd-assign-name { max-width:50px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* Compact laptop mode: keep the working table tall and put optional tools
   behind explicit toggles. Active advanced filters remain visible. */
@media (max-width:1700px), (max-height:950px) {
  #mergingProcessView>.tickets-view-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:0 0 auto; padding:8px 16px 4px; }
  #mergingProcessView .tickets-view-header h2 { font-size:19px; }
  #mergingProcessView .tickets-subtitle { font-size:10.5px; }
  #mergingProcessView .mp-compare-bar { flex-wrap:nowrap; }
  #mergingProcessView .mp-compare-lbl { display:none; }
  #mergingProcessView .mp-compare-sel { flex:1 1 180px; min-width:120px; max-width:none; }
  #mergingProcessView .mpd-kpis { gap:6px; padding:4px 16px 7px; }
  #mergingProcessView .mpd-kpi { flex:0 0 auto; min-width:108px; gap:7px; padding:7px 9px; border-radius:10px; }
  #mergingProcessView .mpd-kpi-ico { width:27px; height:27px; border-radius:7px; }
  #mergingProcessView .mpd-kpi-num { font-size:17px; }
  #mergingProcessView .mpd-kpi-label { font-size:8.5px; }
  #mergingProcessView .mpd-controlbar { display:flex; align-items:center; gap:8px; padding:0 16px 8px; overflow:hidden; }
  #mergingProcessView .mpd-scopes { padding:0; }
  #mergingProcessView .mpd-scope { min-height:29px; padding:4px 8px; font-size:11px; }
  #mergingProcessView .mpd-toolbar { flex:1 1 auto; flex-wrap:nowrap; padding:0; overflow-x:auto; }
  #mergingProcessView .mpd-search { flex:1 1 260px; min-width:180px; }
  #mergingProcessView .mpd-select { flex:0 0 auto; max-width:145px; }
  #mergingProcessView .mpd-more-filters { display:inline-flex; flex:0 0 auto; }
  #mergingProcessView .mpd-toolbar:not(.show-advanced) [data-mpd-advanced]:not(.is-set) { display:none; }
  #mergingProcessView .mpd-workspace { margin:0 16px 10px; }
}
@media (max-width:1200px) {
  #mergingProcessView .mpd-controlbar { flex-direction:column; align-items:stretch; gap:6px; }
  #mergingProcessView .mpd-scopes, #mergingProcessView .mpd-toolbar { width:100%; }
}
@media (max-width:1100px) {
  .mpd-workspace { display:block; }
  .mpd-list-pane { height:100%; }
  .mpd-detail { position:fixed; z-index:1200; top:8px; right:8px; bottom:8px; width:min(430px,calc(100vw - 16px)); transform:translateX(calc(100% + 18px)); opacity:0; pointer-events:none; transition:transform .2s ease,opacity .2s ease; box-shadow:var(--elevation-overlay,0 12px 40px rgba(0,0,0,.25)); }
  .mpd-detail.is-open { transform:translateX(0); opacity:1; pointer-events:auto; }
  .mpd-detail-close { display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width:700px) {
  #mergingProcessView>.tickets-view-header { align-items:flex-start; padding-inline:10px; }
  #mergingProcessView .tickets-subtitle { display:none; }
  #mergingProcessView .mp-toggle-btn { padding-inline:9px; }
  #mergingProcessView .mp-header-actions { gap:4px; }
  #mergingProcessView .mp-compare-toggle { padding-inline:8px; }
  #mergingProcessView .mp-compare-toggle .mp-compare-chevron { display:none; }
  #mergingProcessView .mp-compare-panel { position:fixed; top:64px; left:10px; right:10px; width:auto; }
  #mergingProcessView .mp-compare-bar { display:grid; grid-template-columns:1fr auto 1fr; }
  #mergingProcessView .mp-compare-bar .mp-btn { grid-row:2; }
  #mergingProcessView .mpd-kpis { padding-inline:10px; }
  #mergingProcessView .mpd-controlbar { padding-inline:10px; }
  #mergingProcessView .mpd-workspace { margin-inline:10px; }
  .mpd-detail { top:4px; right:4px; bottom:4px; width:calc(100vw - 8px); }
  .mpd-detail-facts { grid-template-columns:1fr; }
}

/* ── Bulk send — CRM restructure (2026-07-08, Ayoub: "diro 3la chekel CRM") ──
   Table-first layout: KPI strip → filter toolbar → records table, with a
   compact Compose rail on the right. Reuses .mpd-kpi tiles + tickets-table
   scroll shell. Tokens only (gotcha #14) so both themes come for free. */

/* Layout flip: the TABLE is the page, compose is a rail. */
.blk-crm-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
.blk-crm { min-width: 0; }
.blk-crm .bulk-section-head { padding: 10px 16px; }

/* KPI strip — one horizontal scrollable row under the header. */
.blk-kpis { padding: 10px 16px 8px; flex-wrap: nowrap; border-bottom: 1px solid var(--border-subtle); }
.blk-kpis .mpd-kpi { padding: 6px 12px; flex: 0 0 auto; }
.blk-kpis .mpd-kpi.blk-kpi-static { cursor: default; }

/* Toolbar: search · day chips · Hide-ended · filter pills · +Add · selection. */
.blk-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--border-subtle);
}
.blk-search { width: 240px; flex: 0 0 auto; }
.blk-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.blk-selbar { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.blk-tb-group { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.blk-tb-label {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); margin-right: 2px;
}
.blk-fpill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 10px; border-radius: var(--radius-pill);
  background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.blk-fpill-label { font-size: 11.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.blk-fpill .bulk-filter-select, .blk-fpill .bulk-filter-input { min-height: 24px; padding: 2px 6px; font-size: 11.5px; }
.bulk-filter-select.is-set { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.blk-tagbar { padding: 6px 16px 0; }
.blk-tagbar:empty { display: none; }

/* Records table — grid rows inside the tickets-table scroll shell. */
.blk-table-wrap { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 10px; }
.blk-table { display: flex; flex-direction: column; }
.blkt-row {
  display: grid;
  grid-template-columns: 30px minmax(210px, 1.7fr) minmax(130px, 1.1fr) 108px minmax(150px, 1fr) 74px;
  align-items: center; gap: 10px;
  min-height: var(--row-h, 36px); padding: 5px 8px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px; color: var(--text);
  cursor: pointer;
}
.blkt-row:not(.blkt-head):hover { background: var(--surface-hover); }
.blkt-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); cursor: default;
  border-bottom: 1px solid var(--border);
}
.blkt-h {
  background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.blkt-h:hover, .blkt-h.active { color: var(--accent); }
.blkt-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blkt-cb { flex: 0 0 auto; accent-color: var(--wa); width: 15px; height: 15px; cursor: pointer; }
.blkt-cb-slot { display: inline-flex; justify-content: center; color: var(--text-muted); }
.blkt-cb-slot svg { width: 14px; height: 14px; }
.blkt-name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.blkt-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blkt-company { color: var(--text-secondary); font-size: 12px; }
.blkt-sched { color: var(--text-secondary); font-size: 11.5px; }
.blkt-members { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); padding-right: 4px; }
.blkt-status {
  display: inline-flex; align-items: center; padding: 1px 8px;
  border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700;
  border: 1px solid transparent; text-transform: lowercase;
}
.blkt-st-active { background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); }
.blkt-st-expandable { background: color-mix(in oklab, var(--info) 14%, transparent); color: var(--info); }
.blkt-st-closed { background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--danger); }
.blkt-st-other { background: var(--surface-sunken); color: var(--text-secondary); }
.blkt-st-none { background: transparent; color: var(--text-muted); }

/* Section toggle (unlinked groups) + badges. */
.blk-section-head {
  padding: 8px 10px 4px; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); background: transparent;
  border: 0; width: 100%; text-align: left;
}
button.blk-section-toggle { cursor: pointer; }
button.blk-section-toggle:hover { color: var(--text-secondary); }
.blk-row-disabled { opacity: .6; cursor: default; }
.blk-badge {
  display: inline-flex; align-items: center; padding: 1px 7px;
  border-radius: var(--radius-pill); font-size: 10px; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap; flex: 0 0 auto;
}
.blk-badge-shared { background: var(--accent-soft); color: var(--accent); }
.blk-badge-stale {
  background: color-mix(in oklab, var(--warning) 14%, transparent);
  color: var(--warning);
  border-color: color-mix(in oklab, var(--warning) 40%, transparent);
}
.blk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer;
  flex: 0 0 auto;
}
.blk-chip:hover { background: var(--surface-hover); }
.blk-chip.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.blk-offline-note { color: var(--warning); font-weight: 600; font-size: 11px; }

/* Compose rail — compact. */
.blk-compose .bulk-composer-body { gap: 12px; padding: 14px; }
.blk-compose .bulk-message-input { min-height: 120px; font-size: 13.5px; padding: 12px 14px; }
.blk-compose .bulk-antiban { padding: 12px 14px; }
.blk-compose .bulk-antiban-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.blk-compose .bulk-antiban-row label { font-size: 11px; }
.blk-compose .bulk-antiban-row input { padding: 6px 8px; font-size: 13px; }
.blk-presets { display: flex; gap: 6px; margin-bottom: 10px; }
.blk-presets button {
  flex: 1; height: 26px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-sunken);
  color: var(--text-secondary); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.blk-presets button:hover { background: var(--surface-hover); }
.blk-presets button.active { background: var(--wa); border-color: var(--wa); color: #fff; }
.blk-estimate {
  margin-top: 8px; font-size: 12px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; min-height: 16px;
}

/* Narrow screens: stack — table keeps priority, compose below. */
@media (max-width: 1180px) {
  .blk-crm-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* ── Email-in-conversation (2026-07-02, port of Leads7 spec) ──
   type:'email' bubbles in the WhatsApp thread + the compose modal fields.
   Tokens only (gotcha #14): --info = inbound accent (blue), --wa = fromMe
   accent (green) — both auto-flip in dark mode. */
.email-bubble {
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--radius);
  padding: 8px 12px;
  max-width: 480px;
  background: var(--surface);
}
.message-row.fromMe .email-bubble { border-left-color: var(--wa); }
.email-bubble-head {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 12px; color: var(--info);
  margin-bottom: 4px;
}
.message-row.fromMe .email-bubble-head { color: var(--wa-dark); }
.email-bubble-head svg, .email-bubble-head [data-lucide] { width: 14px; height: 14px; flex: 0 0 auto; }
.email-bubble-body { white-space: pre-wrap; font-size: 13px; word-break: break-word; color: var(--text); }
.email-bubble-atts { margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.email-bubble-meta { margin-top: 4px; font-size: 11px; color: var(--text-secondary); text-align: right; }
.email-status-banner {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 13px; margin-bottom: 10px;
}
.email-field { display: block; margin-bottom: 10px; }
.email-field > span { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.email-field .input { width: 100%; }
.email-field textarea.input { resize: vertical; min-height: 120px; }

/* ── Attendance Students smart upgrade (2026-07-02) — reuses .mpd-kpi tiles;
   sub-lines, missed-streak badge, drill-down per-group dots. Tokens only. ── */
#attStuKpis { padding: 10px 16px 4px; }
.att-stu-name { font-weight: 650; font-size: 12.5px; }
.att-stu-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.att-stu-sub.warn { color: var(--warning); }
.att-streak { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-secondary); }
.att-streak-hot { background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--danger); }
.att-stu-acts { display: flex; gap: 4px; }
.attendance-drill-enriched { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.attendance-drill-egroup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.att-eg-name { font-weight: 650; }
/* filter-bar layout fix: the generic .input is width:100%, which stacked every
   control on its own full-width row once the Students bar grew. Inline them. */
#attendanceSub-students .attendance-filter-bar .attendance-input { width: auto; flex: 0 1 auto; }
#attendanceSub-students .attendance-filter-bar #attStudentsSearch { flex: 1 1 200px; min-width: 170px; }

/* AI draft row inside the conversation email modal (2026-07-02) */
.email-ai-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.email-ai-row .input { flex: 1; min-width: 0; }
.email-ai-btn { white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.email-ai-btn svg, .email-ai-btn [data-lucide] { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════════════
   TEACHERS STANDALONE VIEW — design layer (2026-07-03)
   Dashboard-grade chrome for #teamChatInboxView: the JS-built header/tabs/
   theme-picker classes shipped with ZERO backing CSS, and the 3 chat themes
   (data-tc-theme sky|ocean|ivory) were inert. Everything here is scoped to
   #teamChatInboxView / #tcInboxList so the embedded Teachers tab (same row
   classes inside #conversationList) is untouched. Tokens only (gotcha #14);
   ocean/ivory define EXPLICIT bubble colors so they read correctly under
   both app light/dark (sky = follows the app theme, zero change).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Panes: card elevation (dashboard language) ── */
#teamChatInboxView .tcinbox-listpane,
#teamChatInboxView .tcinbox-chatpane,
#teamChatInboxView .tcinbox-schedpane { box-shadow: var(--elevation-card); border-radius: var(--radius-lg); }

/* ── Sidebar header ── */
#teamChatInboxView .tcinbox-listhead { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.tc-head-row { display: flex; align-items: center; gap: 6px; }
.tc-head-row .tc-title-wrap { min-width: 0; margin-right: auto; }
.tc-head-row h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.tc-head-row h2::before { content: ""; width: 4px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--wa), var(--lougha)); flex: 0 0 auto; }
.tc-head-count { margin: 2px 0 0 12px; font-size: 11.5px; color: var(--text-tertiary); }
.tc-head-row .icon-btn { width: 32px; height: 32px; border-radius: 10px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); color: var(--text-secondary); transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.tc-head-row .icon-btn:hover { color: var(--wa-dark, var(--wa)); border-color: var(--wa); transform: translateY(-1px); }
[data-theme="dark"] .tc-head-row .icon-btn:hover { color: var(--wa); }
.tc-head-row .icon-btn [data-lucide] { width: 16px; height: 16px; }

/* Search — pill, calm */
#teamChatInboxView .tcinbox-search { border-radius: var(--radius-pill); padding: 8px 14px; }

/* Segmented All/Unread */
.tc-filter-tabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); }
.tc-filter-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.tc-filter-tab:hover { color: var(--text); }
.tc-filter-tab.active { background: var(--surface-elevated); color: var(--wa-dark, var(--wa)); font-weight: 650; box-shadow: var(--shadow-sm); }
[data-theme="dark"] .tc-filter-tab.active { color: var(--wa); }
.tc-filter-count { min-width: 17px; height: 17px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--wa); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; }

/* ── Theme picker popover ── */
.tc-theme-wrap { position: relative; }
.tc-theme-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 216px; padding: 6px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-overlay); }
.tc-theme-pop::before { content: "Chat theme"; display: block; padding: 4px 10px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.tc-theme-pop.hidden { display: none; }
.tc-theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; transition: background var(--motion-fast) var(--ease); }
.tc-theme-opt:hover { background: var(--surface-hover); }
.tc-theme-opt.is-active { background: var(--wa-soft); border-color: var(--wa); }
.tc-theme-opt.is-active::after { content: "✓"; margin-left: auto; color: var(--wa-dark, var(--wa)); font-weight: 800; }
[data-theme="dark"] .tc-theme-opt.is-active::after { color: var(--wa); }
/* Mini wallpaper preview: the JS inline-colors the 3 layers; CSS shapes them
   into a tiny chat mock (wallpaper card + a bubble on each side). */
.tc-theme-mini { position: relative; flex: 0 0 auto; width: 40px; height: 28px; border-radius: 7px; border: 1px solid var(--border-subtle); overflow: hidden; }
.tc-theme-mini-in { position: absolute; left: 4px; bottom: 4px; width: 16px; height: 8px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
.tc-theme-mini-out { position: absolute; right: 4px; top: 4px; width: 16px; height: 8px; border-radius: 4px; }

/* ── Thread rows (scoped to the standalone list ONLY) ── */
#tcInboxList { padding: 6px 8px; }
#tcInboxList .conv-item + .conv-item { border-top: none; }
#tcInboxList .tcinbox-row { margin: 2px 0; padding: 11px 12px; border-radius: 12px; transition: background var(--motion-fast) var(--ease); }
#tcInboxList .tcinbox-row .avatar { width: 40px; height: 40px; font-size: 14px; }
#tcInboxList .tcinbox-row.active::before { top: 8px; bottom: 8px; border-radius: 3px; }

/* ── Chat pane header + action cluster ── */
#teamChatInboxView .tcinbox-chathead { padding: 12px 16px; gap: 12px; }
#teamChatInboxView .tcinbox-chathead .avatar { box-shadow: 0 0 0 2px var(--wa-soft); }
#teamChatInboxView .tcinbox-chathead .conv-name { font-size: 15px; font-weight: 650; }
#teamChatInboxView .tcinbox-chatacts { gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); }
#teamChatInboxView .tcinbox-chatacts .icon-btn { width: 30px; height: 30px; border-radius: 50%; }

/* In-chat search bar */
#teamChatInboxView .tcinbox-search-bar { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.tc-searchbar-inner { display: flex; align-items: center; gap: 8px; }
.tc-searchbar-inner input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); }
.tc-search-count { font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; }
.tc-search-nav { width: 28px; height: 28px; }

/* Contact-info panel head */
.tc-panel-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
.tc-panel-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.tc-panel-title::before { content: ""; width: 4px; height: 14px; border-radius: 3px; background: linear-gradient(180deg, var(--wa), var(--lougha)); }
.tc-panel-close { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; }

/* Empty state */
#teamChatInboxView .tcinbox-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; color: var(--text-tertiary); font-size: 13.5px; }
#teamChatInboxView .tcinbox-empty [data-lucide] { width: 34px; height: 34px; opacity: 0.45; }

/* ── Chat themes — data-tc-theme consumes the bubble variable chain ──
   sky   = app default (nothing to define — follows light/dark tokens)
   ocean = always-dark chat (matches the advertised swatches #0b141a/#1d2b35/#0e4b63)
   ivory = always-light warm chat
   Explicit colors (not tokens) inside themed scopes: the wallpaper must stay
   stable whether the app is in light or dark mode. */
#teamChatInboxView[data-tc-theme="ocean"] .tcinbox-msgs { background: #0b141a; }
#teamChatInboxView[data-tc-theme="ocean"] .tcinbox-msgs .bubble { --bubble-bg: #1d2b35; --bubble-text: #e8edef; --bubble-meta: #8fa3ad; border-color: transparent; }
#teamChatInboxView[data-tc-theme="ocean"] .tcinbox-msgs .bubble.fromMe { --bubble-bg: #0e4b63; --bubble-text: #eaf6fb; --bubble-meta: #9fc6d6; }
#teamChatInboxView[data-tc-theme="ocean"] .tcinbox-msgs .date-separator { background: #1d2b35; border-color: #24333e; color: #8fa3ad; }
#teamChatInboxView[data-tc-theme="ivory"] .tcinbox-msgs { background: #f3f1ec; }
#teamChatInboxView[data-tc-theme="ivory"] .tcinbox-msgs .bubble { --bubble-bg: #ffffff; --bubble-text: #1f2937; --bubble-meta: #8b8578; border-color: #e7e2d8; }
#teamChatInboxView[data-tc-theme="ivory"] .tcinbox-msgs .bubble.fromMe { --bubble-bg: #dcefdc; --bubble-text: #14331b; --bubble-meta: #5f7d64; border-color: transparent; }
#teamChatInboxView[data-tc-theme="ivory"] .tcinbox-msgs .date-separator { background: #ffffff; border-color: #e7e2d8; color: #8b8578; }

/* ==========================================================================
   Teacher & Group Ranking (2026-07-06) — the sales team's classification page
   under Book class. All colors go through design tokens (gotcha #14): green
   --wa for favorite/top, --warning for avoid, score hi/mid/lo = success/warn/danger.
   ========================================================================== */
.tr-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.tr-tabs { display: inline-flex; background: var(--surface-hover); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.tr-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.tr-tab i { width: 15px; height: 15px; }
.tr-tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--elevation-card, 0 1px 2px rgba(0,0,0,.08)); }
.tr-search { flex: 1; min-width: 160px; max-width: 340px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--surface); color: var(--text); font-size: 13px; }
.tr-sort { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.tr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.tr-toggle input { accent-color: var(--wa); }
.tr-body { padding: 14px 16px; overflow: auto; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.tr-empty { color: var(--muted); padding: 40px; text-align: center; font-size: 14px; }

.tr-card { display: flex; align-items: stretch; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius, 12px); padding: 12px 14px; box-shadow: var(--elevation-card, 0 1px 2px rgba(0,0,0,.06)); transition: border-color .15s, box-shadow .15s; }
.tr-card:hover { border-color: var(--wa); }
.tr-card.tr-fav { border-left-color: var(--wa); background: color-mix(in srgb, var(--wa) 5%, var(--surface)); }
.tr-card.tr-tier-top { border-left-color: var(--wa); }
.tr-card.tr-tier-avoid { border-left-color: var(--warning); opacity: .82; }
.tr-rank-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 40px; }
.tr-rank { font-weight: 800; color: var(--muted); font-size: 13px; }
.tr-star { border: 0; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted); padding: 0; }
.tr-star.on { color: #f5b301; }
.tr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-name { font-weight: 700; font-size: 15px; color: var(--text); }
.tr-tier-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.tr-tier-badge-top { background: color-mix(in srgb, var(--wa) 18%, transparent); color: var(--wa); }
.tr-tier-badge-good { background: color-mix(in srgb, var(--success, #16a34a) 16%, transparent); color: var(--success, #16a34a); }
.tr-tier-badge-avoid { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.tr-rev-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.tr-rev-very_good { background: color-mix(in srgb, var(--wa) 18%, transparent); color: var(--wa); }
.tr-rev-good { background: color-mix(in srgb, #06b6d4 20%, transparent); color: #0891b2; }
.tr-rev-average { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.tr-rev-not_good_enough { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.tr-chip-muted { font-size: 10px; font-weight: 600; color: var(--muted); background: var(--surface-hover); padding: 2px 7px; border-radius: 999px; }
.tr-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-hover); border-radius: 999px; padding: 3px 4px 3px 10px; }
.tr-pill-k { font-size: 11px; color: var(--muted); font-weight: 600; }
.tr-pill-v { font-size: 12px; font-weight: 800; min-width: 26px; text-align: center; padding: 1px 6px; border-radius: 999px; color: #fff; }
.tr-sc-hi { background: var(--success, #16a34a); }
.tr-sc-mid { background: var(--warning); }
.tr-sc-lo { background: var(--danger); }
.tr-reasons { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-reason { font-size: 11px; color: var(--muted); background: var(--surface-hover); padding: 2px 8px; border-radius: 6px; }
.tr-tier-ctrl { display: inline-flex; gap: 4px; }
.tr-tier-opt { border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.tr-tier-opt.on.tr-tier-opt-top { background: var(--wa); border-color: var(--wa); color: #fff; }
.tr-tier-opt.on.tr-tier-opt-good { background: var(--success, #16a34a); border-color: var(--success, #16a34a); color: #fff; }
.tr-tier-opt.on.tr-tier-opt-avoid { background: var(--warning); border-color: var(--warning); color: #fff; }
.tr-note { font-size: 12px; color: var(--muted); font-style: italic; }
.tr-gmeta { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 12px; }
.tr-kv { display: flex; gap: 6px; font-size: 12px; }
.tr-kv-k { color: var(--muted); }
.tr-kv-v { color: var(--text); font-weight: 600; }
.tr-score { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; border-radius: var(--radius, 10px); color: #fff; padding: 6px; align-self: center; }
.tr-score.tr-sc-hi { background: var(--success, #16a34a); }
.tr-score.tr-sc-mid { background: var(--warning); }
.tr-score.tr-sc-lo { background: var(--danger); }
.tr-score-num { font-size: 22px; font-weight: 800; line-height: 1; }
.tr-score-lbl { font-size: 10px; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 720px) { .tr-grid { grid-template-columns: 1fr; } }

/* Book-class card rank badges — teacher tier + group favorite from the ranking page. */
.fg-rank-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.fg-rank-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.fg-rank-fav { background: color-mix(in srgb, #f5b301 20%, transparent); color: #b8860b; }
.fg-rank-top { background: color-mix(in srgb, var(--wa) 18%, transparent); color: var(--wa); }
.fg-rank-good { background: color-mix(in srgb, var(--success, #16a34a) 16%, transparent); color: var(--success, #16a34a); }
.fg-rank-avoid { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
/* Book-class teacher quality (2026-07-06 redesign) — Morad's review rating + a
   prominent SCORE box, plus a quality heatmap tint on the whole card so the grid
   reads at a glance. Token-based, both themes, green --wa brand. */
.fg-q-hi  { --fg-q: var(--success, #16a34a); }
.fg-q-mid { --fg-q: var(--warning); }
.fg-q-lo  { --fg-q: var(--danger, #dc2626); }
.fg-card.fg-q-hi, .fg-card.fg-q-mid, .fg-card.fg-q-lo {
  border-left-width: 4px; border-left-color: var(--fg-q);
  background: color-mix(in srgb, var(--fg-q) 5%, var(--surface-elevated));
}
.fg-card.fg-q-hi:hover, .fg-card.fg-q-mid:hover, .fg-card.fg-q-lo:hover { border-color: var(--fg-q); border-left-color: var(--fg-q); }
.fg-teacher-rev { flex-shrink: 0; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.fg-rev-very_good { background: color-mix(in srgb, var(--wa) 20%, transparent); color: var(--wa); }
.fg-rev-good { background: color-mix(in srgb, #06b6d4 22%, transparent); color: #0891b2; }
.fg-rev-average { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.fg-rev-not_good_enough { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.fg-teacher-score { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 46px; padding: 5px 9px; border-radius: 12px; color: #fff; line-height: 1; box-shadow: 0 2px 6px color-mix(in srgb, var(--fg-q, #16a34a) 45%, transparent); }
.fg-ts-num { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fg-ts-cap { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .85; margin-top: 2px; }
.fg-ts-hi { background: var(--success, #16a34a); }
.fg-ts-mid { background: var(--warning); }
.fg-ts-lo { background: var(--danger, #dc2626); }

/* ═══════════════════════════════════════════════════════════════════════════
   GROUPS IN PROCESS — creation workspace (2026-07-10)
   CRM table: KPI filter tiles (+ shared .mpd-kpi), sortable sticky header,
   inline-editable cells (PATCH write-through), Create-group modal.
   Tokens only (gotcha #14) so both themes come for free.
   ═══════════════════════════════════════════════════════════════════════════ */
.gip-kpis { padding: 6px 20px 12px; }
.gip-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  isolation: isolate;        /* sticky header without clipping rounded corners */
  overflow: visible;
  min-width: 1560px;         /* 13 columns — horizontal scroll in .tickets-table-wrap */
}
.gipt-row {
  display: grid;
  grid-template-columns:
    minmax(170px, 1.5fr)   /* name + action icons */
    64px                   /* students */
    106px                  /* schedule time */
    minmax(110px, 1fr)     /* schedule days */
    72px                   /* level */
    minmax(120px, 1.1fr)   /* teacher */
    92px                   /* start */
    92px                   /* end */
    88px                   /* schedule time 2 */
    minmax(110px, 1fr)     /* type of groups */
    104px                  /* status */
    92px                   /* created */
    minmax(110px, 1fr);    /* events report */
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.gipt-row:last-child {
  border-bottom: 0;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.gipt-row:not(.gipt-head):hover { background: var(--surface-hover); }
.gipt-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-strong);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.gipt-h {
  background: transparent; border: 0; padding: 6px 0; text-align: left; cursor: pointer;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary); font-family: inherit; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.gipt-h:hover, .gipt-h.active { color: var(--accent); }
.gipt-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gipt-num { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
/* Editable cells: quiet by default, dashed affordance on hover. */
.gip-editable { cursor: text; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; }
.gip-editable:hover { box-shadow: inset 0 0 0 1px var(--border-strong); background: var(--surface-sunken); }
.gip-inline-input { height: 26px; font-size: 12px; }
select.gip-inline-input { padding: 0 4px; }
/* Status chips — semantic colour per HubSpot group_status. */
.gip-status {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700;
  border: 1px solid transparent; white-space: nowrap;
}
.gip-st-inprocess { background: var(--accent-soft); color: var(--accent); }
.gip-st-active { background: color-mix(in oklab, var(--success, #047857) 14%, transparent); color: var(--success, #047857); }
.gip-st-closed { background: color-mix(in oklab, var(--danger, #dc2626) 12%, transparent); color: var(--danger, #dc2626); }
.gip-st-other { background: var(--surface-sunken); color: var(--text-secondary); }
.gip-st-none { background: transparent; color: var(--text-muted, var(--text-tertiary)); }
/* Name cell: editable text + hover action icons (WA group / HubSpot record). */
.gip-name-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gip-name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.gip-acts { display: inline-flex; gap: 4px; flex: 0 0 auto; opacity: 0; transition: opacity var(--motion-fast, 120ms) var(--ease, ease); }
.gipt-row:hover .gip-acts { opacity: 1; }
.gip-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary); cursor: pointer; text-decoration: none;
}
.gip-act:hover { border-color: var(--accent); color: var(--accent); }
/* The chat shortcut wears the WhatsApp green so it reads as "go talk to them",
   not as one more generic row action. */
.gip-act-wa { border-color: var(--wa); color: var(--wa); }
.gip-act-wa:hover { border-color: var(--wa); background: var(--wa); color: #fff; }
.gip-act svg { width: 13px; height: 13px; }
/* New-row flash after create. Reduced-motion contract: opacity/background only
   in from{}, fill-mode both → rest state is fully visible. */
@keyframes gipRowNew { from { background: var(--accent-soft); } }
.gip-row-new { animation: gipRowNew 2.4s var(--ease, ease) both; }
/* Create-group modal form. */
.gip-create-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.gip-create-field { display: flex; flex-direction: column; gap: 5px; }
.gip-create-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.gip-name-suggest { display: flex; gap: 6px; margin-top: 2px; }
.gip-suggest-chip {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: var(--radius-pill); border: 1px dashed var(--border-strong);
  background: var(--surface-sunken); color: var(--text-secondary);
  font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.gip-suggest-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gip-dup-warn {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid color-mix(in oklab, var(--warning, #b45309) 45%, transparent);
  background: color-mix(in oklab, var(--warning, #b45309) 10%, transparent);
  color: var(--text); border-radius: var(--radius-md, 8px); font-size: 12.5px;
}

/* ════════ INDIVIDUAL STUDENTS TRACKING (Management → Individual Students) ════════
   1-on-1 classes: Zoom-computed consumed/remaining hours + missed sessions.
   Data-dense dashboard treatment (ui-ux-pro-max): scannable rows, semantic
   status colors, progressive disclosure in the modal. Tokens only (gotcha #14). */

/* — KPI strip: clickable stat cards with a semantic accent spine — */
/* 5 cards since "Over pack" joined; auto-fit keeps them on one row on a laptop
   and folds to 2-3 per row on a narrow window instead of leaving one orphan. */
.it-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 14px; }
.it-kpi {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px); padding: 14px 16px 14px 18px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  overflow: hidden;
}
.it-kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--wa); border-radius: 3px 0 0 3px;
}
.it-kpi:hover { border-color: var(--border-strong); box-shadow: var(--elevation-card, 0 2px 8px rgba(0,0,0,.06)); transform: translateY(-1px); }
.it-kpi:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--wa)); outline-offset: var(--focus-offset, 2px); }
.it-kpi.active { border-color: color-mix(in oklab, var(--wa) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--wa) 35%, transparent); }
.it-kpi-ic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm, 8px);
  background: color-mix(in oklab, var(--wa) 12%, transparent); color: var(--wa);
}
.it-kpi-ic svg { width: 17px; height: 17px; }
.it-kpi-num { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.it-kpi-label { font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 2px; }
/* Second line under a KPI: the figure the headline deliberately leaves out
   (dormant hours, hours given over the pack). Quiet by design. */
.it-kpi-sub { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.it-kpi-sub:empty { display: none; }
.it-kpi-warn::before { background: var(--warning); }
.it-kpi-warn .it-kpi-ic { background: var(--warning-soft); color: var(--warning); }
.it-kpi-warn .it-kpi-num { color: var(--warning); }
.it-kpi-danger::before { background: var(--danger); }
.it-kpi-danger .it-kpi-ic { background: var(--danger-soft); color: var(--danger); }
.it-kpi-danger .it-kpi-num { color: var(--danger); }

/* — Table: 11 visual columns, hairline rows, generous scan rhythm — */
.it-table { display: flex; flex-direction: column; min-width: 1240px; }
.it-row {
  display: grid;
  grid-template-columns: 1.65fr 1.15fr 1.25fr 1.05fr 1.25fr 1fr .75fr .6fr .95fr .95fr 1.1fr 40px;
  gap: 10px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; min-height: 46px;
}
.it-row:hover { background: var(--surface-hover); }
.it-row:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--wa)); outline-offset: -2px; }
.it-row-head {
  position: sticky; top: 0; z-index: 2; cursor: default; min-height: 0;
  background: var(--surface); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-strong); padding-top: 8px; padding-bottom: 8px;
}
.it-row-head:hover { background: var(--surface); }
.it-cell { min-width: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-name { font-weight: 650; font-size: 13px; }
.it-sub { font-size: 10.5px; color: var(--text-tertiary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.it-sub2 { color: var(--text-secondary); font-size: 11.5px; }
.it-num { font-variant-numeric: tabular-nums; }

/* Hours cell: consumed/pack progress bar */
.it-hours-bar { height: 5px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; margin-top: 4px; }
.it-hours-fill { height: 100%; border-radius: 3px; background: var(--wa); }
.it-hours-fill.over { background: var(--danger); }
.it-hours-txt { font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Remaining cell: the visual anchor of the row */
.it-rem { display: block; font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.it-rem-ok { color: var(--success); }
.it-rem-warn { color: var(--warning); }
.it-rem-danger { color: var(--danger); }
.it-rem-none { color: var(--text-tertiary); font-weight: 600; }
.it-method {
  display: inline-block; margin-top: 2px; padding: 0 6px;
  border-radius: var(--radius-pill, 999px); border: 1px solid var(--border);
  background: var(--surface-sunken); color: var(--text-tertiary);
  font-size: 9px; font-weight: 650; letter-spacing: .02em; line-height: 15px;
}
.it-method-warn { border-color: color-mix(in oklab, var(--warning) 45%, transparent); color: var(--warning); background: color-mix(in oklab, var(--warning) 10%, transparent); }

/* Sessions / missed cells */
.it-sess-done { color: var(--success); font-weight: 700; }
.it-sess-sep { color: var(--text-tertiary); margin: 0 3px; }
.it-sess-noshow { color: var(--danger); font-weight: 700; }
.it-sess-zero { color: var(--text-tertiary); }
.it-missed { display: inline-block; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: var(--radius-pill, 999px); background: var(--danger-soft); color: var(--danger); font-weight: 750; font-size: 11.5px; }
.it-missed-zero { color: var(--text-tertiary); }

/* Status chip: dot + label */
.it-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill, 999px); font-size: 10.5px; font-weight: 700; }
.it-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.it-badge-active { background: var(--success-soft); color: var(--success); }
.it-badge-almost { background: var(--warning-soft); color: var(--warning); }
.it-badge-stale { background: var(--surface-sunken); color: var(--text-secondary); border: 1px solid var(--border); }
.it-badge-ended { background: var(--danger-soft); color: var(--danger); }
.it-act { display: flex; justify-content: flex-end; overflow: visible; }
.it-chat-btn { width: 28px; height: 28px; }
.it-chat-btn svg { width: 14px; height: 14px; }

/* Loading skeleton rows */
.it-skel-row { display: grid; grid-template-columns: 1.65fr 1.15fr 1.25fr 1.05fr 1.25fr 1fr .75fr .6fr .95fr .95fr 1.1fr 40px; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
/* Agent note cell — clamp long notes, same idea as .closing-cell-note. */
.it-cell-note {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
/* "Why no data" mini-chip in the Sessions cell. */
.it-warnchip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: color-mix(in oklab, var(--warning) 14%, transparent);
  color: var(--warning);
  white-space: nowrap;
}
/* Health chip + trend + runway (PRO, 2026-07-17) */
.it-health { font-weight: 700; }
/* The health chip leads with its own 🔴/🟠/🟢 emoji — suppress the generic
   .it-badge::before status dot that would double it. */
#itTable .it-health::before, #itModalBody .it-health::before { display: none; }
.it-health-good { background: color-mix(in oklab, var(--wa) 14%, transparent); color: var(--wa); }
.it-health-risk { background: color-mix(in oklab, var(--warning) 16%, transparent); color: var(--warning); }
.it-health-crit { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); }
.it-trend { font-weight: 700; }
.it-trend-up { color: var(--wa); }
.it-trend-down { color: var(--danger); }
.it-trend-flat { color: var(--text-tertiary); }
.it-runway { white-space: nowrap; }
.it-runway-low { color: var(--warning); font-weight: 600; }
/* Attendee name (raw Zoom display name) under Last class + in the timeline. */
.it-attendee { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.it-tl-attendee { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.it-skel { height: 12px; border-radius: 6px; background: var(--surface-sunken); position: relative; overflow: hidden; }
.it-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--surface-hover), transparent); animation: itShimmer 1.4s infinite; }
@keyframes itShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .it-skel::after { animation: none; } }

/* — Detail modal — */
.it-detail-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 14px; margin-bottom: 14px; }
.it-kv-k { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); align-self: center; }
.it-kv-v { font-size: 13px; color: var(--text); }

/* Hero stat strip */
.it-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.it-hero-stat { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md, 10px); padding: 10px 14px; }
.it-hero-num { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.15; }
.it-hero-label { font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 2px; }
.it-hero-bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--surface-sunken); border: 1px solid var(--border); overflow: hidden; }
.it-hero-bar-fill { height: 100%; border-radius: 4px; background: var(--wa); }
.it-hero-bar-fill.over { background: var(--danger); }

.it-math, .it-missed-box, .it-timeline {
  border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
  background: var(--surface); padding: 12px 14px; margin-bottom: 12px;
}
.it-math { border-left: 3px solid var(--wa); }
.it-math-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.it-math-title svg { width: 13px; height: 13px; color: var(--text-tertiary); }
.it-note-raw {
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface-sunken); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm, 6px); padding: 8px 10px; margin-bottom: 8px;
  font-size: 12px; color: var(--text-secondary); font-style: italic;
}
.it-math-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text); padding: 3px 0; font-variant-numeric: tabular-nums; border-bottom: 1px dashed var(--border); }
.it-math-line:last-of-type { border-bottom: none; }
.it-math-line strong { font-weight: 750; }
.it-math-foot { color: var(--text-tertiary); font-size: 11px; margin-top: 6px; }
.it-zoom-src { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.it-zoom-src svg { width: 13px; height: 13px; color: var(--lougha, var(--accent)); flex: 0 0 auto; }

/* Missed dates: collapsed chip cloud */
.it-missed-box { border-left: 3px solid var(--danger); }
.it-missed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.it-missed-chip { padding: 2px 9px; border-radius: var(--radius-pill, 999px); background: var(--danger-soft); color: var(--danger); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
/* Missed days as decisions: one row per date + the four rules. The charged one
   is the only red state — everything else is free, which is the default. */
.it-missed-hint { margin: 2px 0 8px; color: var(--text-tertiary); font-size: 11.5px; }
.it-missed-tag { margin-left: auto; padding: 1px 8px; border-radius: var(--radius-pill, 999px); background: var(--surface-2, var(--surface-hover)); color: var(--text-secondary); font-size: 10.5px; font-weight: 650; }
.it-missed-list { display: flex; flex-direction: column; gap: 5px; }
.it-missed-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.it-missed-row.is-charged { border-color: var(--danger); background: var(--danger-soft); }
.it-missed-date { min-width: 120px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.it-missed-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.it-mark-btn {
  padding: 3px 9px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 650;
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.it-mark-btn:hover:not(:disabled) { border-color: var(--wa); color: var(--wa); }
.it-mark-btn.active { border-color: var(--wa); background: var(--wa); color: #fff; }
.it-mark-btn.is-charge.active { border-color: var(--danger); background: var(--danger); color: #fff; }
.it-mark-btn:disabled { opacity: .5; cursor: default; }
.it-missed-more {
  padding: 2px 10px; border-radius: var(--radius-pill, 999px);
  border: 1px dashed var(--border-strong); background: transparent;
  color: var(--text-secondary); font-size: 11px; font-weight: 650;
  cursor: pointer; font-family: inherit;
}
.it-missed-more:hover { border-color: var(--danger); color: var(--danger); }

/* Session timeline */
.it-tl-row {
  display: grid; grid-template-columns: 96px 1fr 110px minmax(130px, auto);
  gap: 10px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.it-tl-row:last-child { border-bottom: none; }
.it-tl-date { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.it-tl-wd { display: block; font-size: 10px; color: var(--text-tertiary); text-transform: capitalize; }
.it-tl-bar { height: 8px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.it-tl-bar-fill { height: 100%; border-radius: 4px; background: var(--wa); }
.it-tl-noshow .it-tl-bar-fill { background: var(--danger); min-width: 3px; }
.it-tl-min { color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.it-tl-flags { display: inline-flex; align-items: center; gap: 8px; color: var(--text-tertiary); font-size: 11px; }
.it-tl-flags svg { width: 13px; height: 13px; }
.it-tl-teach { color: var(--success); display: inline-flex; align-items: center; }
.it-tl-slot { color: var(--lougha, var(--accent)); display: inline-flex; align-items: center; }
.it-tl-noshow-txt { color: var(--danger); font-weight: 650; }
/* PRO profile sections */
.it-wchart { display: flex; align-items: flex-end; gap: 4px; height: 52px; padding: 4px 0; }
.it-wcol { flex: 1; display: flex; align-items: flex-end; }
.it-wbar { width: 100%; border-radius: 3px 3px 0 0; background: var(--wa); opacity: .85; }
.it-wbar-zero { background: var(--surface-sunken); }
.it-tl-gap { font-size: 11px; font-weight: 600; color: var(--warning); padding: 2px 0 2px 8px; }
.it-health-box .it-badge { margin-left: 8px; }
@media (max-width: 1280px) {
  .it-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Students popup (Groups-in-process) — list + search-to-add. */
.gip-stu-pill { border: 0; cursor: pointer; font-family: inherit; }
.gip-stu-pill:hover { box-shadow: 0 0 0 2px var(--accent-soft); }
.gip-stu-addbox { position: relative; display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.gip-stu-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  max-height: 260px; overflow: auto; margin-top: 4px;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--border-strong); border-radius: var(--radius-md, 8px);
  box-shadow: var(--elevation-overlay, 0 8px 24px rgba(0,0,0,.18));
}
.gip-stu-result {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px; border: 0; background: transparent;
  color: var(--text); font-size: 12.5px; font-family: inherit; cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}
.gip-stu-result:last-child { border-bottom: 0; }
.gip-stu-result:hover { background: var(--surface-hover); }
.gip-stu-noresult { padding: 10px 12px; font-size: 12px; }
.gip-stu-count { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); padding: 2px 0 8px; }
.gip-stu-empty { font-size: 12.5px; padding: 6px 0; }
.gip-stu-list { display: flex; flex-direction: column; }
.gip-stu-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--border-subtle, var(--border));
}
.gip-stu-row:last-child { border-bottom: 0; }
.gip-stu-info { min-width: 0; }
.gip-stu-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gip-stu-phone { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.gip-stu-acts { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.gip-stu-rm:hover { border-color: var(--danger, #dc2626); color: var(--danger, #dc2626); }
.gip-rm-armed { width: auto; padding: 0 8px; font-size: 11px; font-weight: 700; border-color: var(--danger, #dc2626); color: var(--danger, #dc2626); }

/* ===== Renew — Archive (out-of-window wide-search) section ===== */
.renew-archive-divider { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; margin-top: 8px; border-top: 1px dashed var(--border-strong); color: var(--text-secondary); font-size: 12.5px; font-weight: 700; }
.renew-row-archive { opacity: 0.96; }
.renew-row-archive .renew-name::after { content: 'archive'; margin-left: 8px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; vertical-align: 1px; }
.renew-archive-missing { padding: 8px 12px; font-size: 12.5px; color: var(--warning, #b45309); }

/* Renew — Agent column (the student's CHAT assignment, avatar like the inbox) */
.renew-agent-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 3px 6px; border-radius: 10px; cursor: pointer; color: var(--text); max-width: 100%; }
.renew-agent-btn:hover { background: var(--surface-hover); }
.renew-agent-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renew-agent-empty { color: var(--text-secondary); font-weight: 600; }
.renew-agent-plus { width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--border-strong); border-radius: 50%; font-size: 13px; color: var(--text-secondary); }
.renew-agent-btn:hover .renew-agent-plus { border-color: var(--wa); color: var(--wa); }
.renew-agent-none { color: var(--text-secondary); }
.renew-assign-pop-row { display: flex; align-items: center; gap: 9px; }
.renew-assign-pop-name { flex: 1; text-align: left; }
.renew-assign-cur { color: var(--wa); font-weight: 800; }

/* ═══════════════ FIRST SESSIONS — calendar-leaf timeline ═══════════════
   Rows reuse .sched-row from Today's Classes; this layer styles the page
   chrome: header + stat tiles, segmented range control, and the per-day
   date leaf on a vertical rail (today = green leaf). Token-driven → both
   themes for free; the dark emerald layer supplies --glow-green-sm. */
/* Scroll contract: #firstSessionsView is an app-shell flex column with
   overflow hidden — the wrap MUST be the scroll container, same as
   #scheduleView/#clubsView .bulk-body. Without flex:1 + min-height:0 +
   overflow:auto the day timeline clips at the viewport height and the
   page "won't scroll down" (Ayoub 2026-07-13). */
.fsn-wrap { flex: 1; min-height: 0; overflow: auto; padding: 20px 26px 48px; }
.fsn-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
}
.fsn-title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
}
.fsn-title i, .fsn-title svg { width: 22px; height: 22px; color: var(--wa); }
.fsn-sub { margin: 5px 0 0; font-size: 12.5px; color: var(--text-muted); }
.fsn-stats { display: flex; gap: 10px; }
.fsn-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 92px; padding: 8px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--elevation-card, none);
}
.fsn-stat b { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.15; }
.fsn-stat small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.fsn-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.fsn-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 12px;
}
.fsn-seg-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 7px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.fsn-seg-btn:hover { color: var(--text); }
.fsn-seg-btn.active {
  background: var(--surface); color: var(--wa-dark, var(--wa));
  box-shadow: var(--elevation-card, 0 1px 2px rgba(15, 23, 42, .10));
}
.fsn-between { display: inline-flex; align-items: center; gap: 8px; }
.fsn-between .input { width: 150px; }
.fsn-between-arrow { color: var(--text-muted); font-size: 13px; }
.fsn-range-chip {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; font-variant-numeric: tabular-nums;
}
/* Day groups: leaf rail on the left, rows on the right. */
.fsn-list { display: flex; flex-direction: column; gap: 26px; }
.fsn-day { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 16px; }
.fsn-day:not(:last-child)::before {
  content: ''; position: absolute; left: 31px; top: 78px; bottom: -26px;
  width: 2px; background: var(--border); border-radius: 1px;
}
.fsn-leaf {
  position: relative; z-index: 1; align-self: start;
  display: flex; flex-direction: column; align-items: center;
  width: 64px; padding: 7px 0 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--elevation-card, none);
}
.fsn-leaf-dow { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; color: var(--danger, #dc2626); }
.fsn-leaf-num { font-size: 23px; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.fsn-leaf-mon { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; color: var(--text-muted); }
.fsn-day.is-today .fsn-leaf {
  background: var(--wa); border-color: var(--wa);
  box-shadow: var(--glow-green-sm, 0 0 0 3px var(--wa-soft, rgba(34, 197, 94, .18)));
}
.fsn-day.is-today .fsn-leaf-dow,
.fsn-day.is-today .fsn-leaf-num,
.fsn-day.is-today .fsn-leaf-mon { color: #fff; }
.fsn-day-main { min-width: 0; }
.fsn-day-label { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.fsn-day-name { font-size: 14px; font-weight: 700; color: var(--text); }
.fsn-today-chip {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--wa-dark, #15803d); background: var(--wa-soft, #dcfce7);
  border-radius: 999px; padding: 2px 9px;
}
.fsn-day-count {
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-sunken); border-radius: 999px; padding: 2px 10px;
}
.fsn-day-main .sched-row { margin-bottom: 10px; }
/* Empty / loading / error states. */
.fsn-empty { text-align: center; padding: 64px 20px; color: var(--text-muted); }
.fsn-empty i, .fsn-empty svg { width: 38px; height: 38px; color: var(--text-muted); opacity: .55; }
.fsn-empty-title { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--text); }
.fsn-empty-hint { margin-top: 5px; font-size: 12.5px; }
.fsn-empty-plain { padding: 44px 20px; font-size: 13.5px; }
@media (max-width: 860px) {
  .fsn-day { grid-template-columns: 1fr; }
  .fsn-leaf { display: none; }
  .fsn-day:not(:last-child)::before { display: none; }
}

/* ═══ HubSpot write-through editing (2026-07-13) — modal KV editors ═══ */
.lc-kv-v.lc-editable { cursor: pointer; border-radius: 6px; }
.lc-kv-v.lc-editable:hover { background: var(--surface-hover, var(--surface-sunken)); }
.lc-kv-derived .lc-kv-v { opacity: .8; }
.lc-kv-derived { cursor: help; }
.lc-kv-multi { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.lc-kv-multi-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.lc-kv-multi-bar { display: inline-flex; gap: 6px; margin-left: 8px; }

/* Suivi (Leads7) 24h customer-service-window banner — sits above the composer
   like the reply pill. Shown when the client is outside Meta's 24h window;
   free-form sends are blocked (they'd silently fail), template only. */
.leads7-window-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px;
  background: var(--warning-soft); color: var(--warning);
  border-top: 1px solid color-mix(in oklab, var(--warning) 40%, transparent);
  font-size: 12.5px; line-height: 1.35;
}
.leads7-window-banner.hidden { display: none; }
.leads7-window-banner-txt { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.leads7-window-banner-btn {
  flex-shrink: 0; padding: 5px 12px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--wa); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.leads7-window-banner-btn:hover { filter: brightness(0.96); }

/* Failed outbound (Leads7 mirror status:'failed' — Meta rejected, e.g. outside
   the 24h window). Replaces the ✓✓ so the team sees WHICH message never reached
   the client and must be re-sent via a template. */
.meta-failed { display: inline-flex; align-items: center; gap: 3px; color: var(--danger); font-weight: 700; font-size: 10.5px; }
.meta-failed svg { width: 13px; height: 13px; color: var(--danger); flex-shrink: 0; }

/* Inbox date filter (last-activity) — preset select + custom Between range.
   Sits between the "All conversations" filter dropdown and the search box. */
.inbox-datefilter { padding: 0 12px 8px; }
.inbox-datefilter-row { display: flex; align-items: center; gap: 6px; }
.inbox-datefilter-ic { width: 15px; height: 15px; color: var(--text-secondary); flex-shrink: 0; }
.inbox-datefilter-select {
  flex: 1; min-width: 0; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 12.5px; cursor: pointer;
}
.inbox-datefilter-select.is-set { border-color: var(--wa); color: var(--wa); font-weight: 600; }
.inbox-datefilter-between { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-left: 21px; }
.inbox-datefilter-between.hidden { display: none; }
.inbox-datefilter-date {
  flex: 1; min-width: 0; height: 28px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 12px;
}
.inbox-datefilter-arrow { color: var(--text-secondary); font-size: 12px; flex-shrink: 0; }
.inbox-datefilter-row + .inbox-datefilter-row { margin-top: 6px; }
.inbox-datefilter-row-2 { padding-left: 21px; }

/* ═══ Unified Calls reception (Management → Calls) ═══ */
.calls-shell { max-width: 1540px; margin: 0 auto; padding: 26px 30px 34px; color: var(--text); }
.calls-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.calls-title-wrap { display:flex; align-items:center; gap:14px; min-width:0; }
.calls-title-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(145deg,#6855f7,#4b38d5); box-shadow:0 10px 24px rgba(88,69,226,.24); }
.calls-title-icon svg { width:22px; height:22px; }
.calls-title-wrap h2 { margin:0; font-size:25px; letter-spacing:-.025em; }
.calls-title-wrap p { margin:4px 0 0; color:var(--text-secondary); font-size:13.5px; }
.calls-refresh { height:38px; padding:0 14px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); display:inline-flex; align-items:center; gap:7px; font-weight:650; cursor:pointer; }
.calls-refresh:hover { background:var(--surface-hover); }
.calls-refresh svg { width:16px; }
.calls-refresh.is-loading svg { animation:spin 1s linear infinite; }
.calls-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; margin-bottom:14px; }
.calls-kpi { min-width:0; height:78px; padding:13px 15px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; transition:border-color .15s,box-shadow .15s,transform .15s; }
.calls-kpi:hover { transform:translateY(-1px); box-shadow:0 7px 20px rgba(20,25,45,.07); }
.calls-kpi.is-active { border-color:#6b5cf2; box-shadow:0 0 0 2px rgba(107,92,242,.12); }
.calls-kpi-icon { width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; color:#6b5cf2; background:rgba(107,92,242,.1); }
.calls-kpi-icon svg { width:18px; }
.calls-kpi-danger { color:#dc3d58; background:rgba(220,61,88,.11); }
.calls-kpi-warning { color:#d97706; background:rgba(217,119,6,.11); }
.calls-kpi-info { color:#2563eb; background:rgba(37,99,235,.1); }
.calls-kpi-success { color:#168554; background:rgba(22,133,84,.11); }
.calls-kpi-recording { color:#7c3aed; background:rgba(124,58,237,.11); }
.calls-kpi strong,.calls-kpi small { display:block; }
.calls-kpi strong { font-size:21px; line-height:1.1; }
.calls-kpi small { margin-top:4px; color:var(--text-secondary); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calls-filters { display:flex; align-items:end; gap:9px; padding:12px; border:1px solid var(--border); border-radius:14px 14px 0 0; background:var(--surface); }
.calls-search { flex:1 1 260px; min-width:190px; height:39px; padding:0 11px; display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:10px; background:var(--surface-sunken); }
.calls-search:focus-within { border-color:#7567ed; box-shadow:0 0 0 3px rgba(117,103,237,.1); }
.calls-search svg { width:16px; color:var(--text-secondary); }
.calls-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:13px; }
.calls-filter-field { display:grid; gap:4px; min-width:126px; }
.calls-filter-field span { padding-left:2px; color:var(--text-secondary); font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.055em; }
.calls-filter-field input,.calls-filter-field select { height:39px; padding:0 10px; border:1px solid var(--border); border-radius:10px; outline:0; background:var(--surface-sunken); color:var(--text); font:inherit; font-size:12.5px; }
.calls-inbox { height:min(680px,calc(100vh - 325px)); min-height:480px; display:grid; grid-template-columns:minmax(390px,42%) minmax(420px,1fr); border:1px solid var(--border); border-top:0; border-radius:0 0 16px 16px; overflow:hidden; background:var(--surface); box-shadow:0 12px 34px rgba(25,31,55,.06); }
.calls-list-pane { min-width:0; min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--border); }
.calls-list-head { height:54px; flex:0 0 auto; padding:0 15px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.calls-list-head strong { display:block; font-size:13.5px; }
.calls-list-head span:not(.calls-live-dot) { margin-top:2px; display:block; color:var(--text-secondary); font-size:11px; }
.calls-live-dot { display:inline-flex; align-items:center; gap:6px; color:#178559; font-size:10.5px; font-weight:700; }
.calls-live-dot i { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.calls-list { min-height:0; flex:1; overflow:auto; }
.calls-row { width:100%; padding:13px 14px; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); text-align:left; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:11px; cursor:pointer; }
.calls-row:hover { background:var(--surface-hover); }
.calls-row.is-selected { background:rgba(107,92,242,.075); box-shadow:inset 3px 0 #6b5cf2; }
.calls-row-avatar { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:14px; font-weight:800; background:linear-gradient(145deg,#7a6bf2,#5543d8); }
.calls-row-avatar.is-missed { background:linear-gradient(145deg,#ef6a78,#cc334e); }
.calls-row-main { min-width:0; }
.calls-row-line1,.calls-row-line2 { display:flex; align-items:center; min-width:0; }
.calls-row-line1 { gap:7px; }
.calls-row-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:750; }
.calls-source-pill { flex:0 0 auto; padding:2px 6px; border-radius:6px; background:var(--surface-sunken); color:var(--text-secondary); font-size:9.5px; font-weight:750; text-transform:uppercase; }
.calls-source-pill.lane-support2 { color:#5143d8; background:rgba(93,75,225,.11); }
.calls-source-pill.lane-leads7 { color:#b32372; background:rgba(219,39,119,.11); }
.calls-source-pill.lane-teachers { color:#b95b08; background:rgba(245,139,31,.13); }
.calls-source-pill.lane-team { color:#087e8e; background:rgba(8,145,164,.11); }
.calls-source-pill.transport-3cx { color:#1763b8; background:rgba(37,114,200,.11); }
.calls-source-pill.transport-whatsapp { color:#118052; background:rgba(25,160,99,.11); }
.calls-source-pill.transport-team { color:#087e8e; background:rgba(8,145,164,.11); }
.calls-source-pill.calls-recording-pill { color:#7138c7; background:rgba(124,58,237,.11); }
.calls-row-avatar.channel-support2 { background:linear-gradient(145deg,#7566ef,#5240d3); }
.calls-row-avatar.channel-leads7 { background:linear-gradient(145deg,#e14b9a,#b72473); }
.calls-row-avatar.channel-teachers { background:linear-gradient(145deg,#f3a13f,#d66a16); }
.calls-row-avatar.channel-team { background:linear-gradient(145deg,#20a9b7,#087b91); }
.calls-row.channel-support2.is-selected { box-shadow:inset 3px 0 #6553e7; }
.calls-row.channel-leads7.is-selected { box-shadow:inset 3px 0 #d42b82; background:rgba(218,43,130,.055); }
.calls-row.channel-teachers.is-selected { box-shadow:inset 3px 0 #e27c1d; background:rgba(226,124,29,.055); }
.calls-row-line2 { margin-top:5px; gap:6px; color:var(--text-secondary); font-size:11.5px; }
.calls-row-line2 svg { width:13px; height:13px; }
.calls-row-line2 .is-missed { color:#d13d56; font-weight:700; }
.calls-row-time { padding-top:2px; text-align:right; color:var(--text-secondary); font-size:10.5px; white-space:nowrap; }
.calls-follow-dot { width:8px; height:8px; margin:8px 1px 0 auto; border-radius:50%; background:#ef445e; box-shadow:0 0 0 3px rgba(239,68,94,.12); }
.calls-load-more { margin:10px; height:36px; flex:0 0 auto; border:1px solid var(--border); border-radius:9px; background:var(--surface-sunken); color:var(--text); font-weight:650; cursor:pointer; }
.calls-detail { min-width:0; overflow:auto; background:color-mix(in srgb,var(--surface) 96%,#7667ee 4%); }
.calls-detail-empty { height:100%; min-height:360px; display:grid; place-content:center; justify-items:center; padding:30px; text-align:center; color:var(--text-secondary); }
.calls-detail-empty>div { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:rgba(107,92,242,.1); color:#6b5cf2; }
.calls-detail-empty svg { width:28px; }
.calls-detail-empty h3 { margin:15px 0 5px; color:var(--text); font-size:17px; }
.calls-detail-empty p { max-width:300px; margin:0; font-size:12.5px; }
.calls-detail-card { min-height:100%; padding:25px 27px; }
.calls-detail-top { display:flex; justify-content:space-between; gap:15px; }
.calls-detail-contact { display:flex; align-items:center; gap:13px; min-width:0; }
.calls-detail-avatar { width:52px; height:52px; flex:0 0 auto; border-radius:16px; display:grid; place-items:center; background:linear-gradient(145deg,#7667ee,#4d3bd2); color:#fff; font-size:17px; font-weight:800; }
.calls-detail-avatar.channel-leads7 { background:linear-gradient(145deg,#e14b9a,#b72473); }
.calls-detail-avatar.channel-teachers { background:linear-gradient(145deg,#f3a13f,#d66a16); }
.calls-detail-avatar.channel-team { background:linear-gradient(145deg,#20a9b7,#087b91); }
.calls-detail-contact h3 { margin:0; font-size:18px; overflow-wrap:anywhere; }
.calls-detail-contact p { margin:4px 0 0; color:var(--text-secondary); font-size:12.5px; }
.calls-detail-status { align-self:flex-start; padding:6px 9px; border-radius:999px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; background:var(--surface-sunken); color:var(--text-secondary); }
.calls-detail-status.is-missed { background:rgba(220,61,88,.1); color:#cf334f; }
.calls-detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.calls-action { height:36px; padding:0 12px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-size:12px; font-weight:700; cursor:pointer; }
.calls-action:hover { background:var(--surface-hover); }
.calls-action.primary { border-color:#6251e6; background:#6251e6; color:#fff; }
.calls-action svg { width:15px; }
.calls-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px; border:1px solid var(--border); border-radius:13px; background:var(--surface); }
.calls-meta-item small,.calls-meta-item strong { display:block; }
.calls-meta-item small { color:var(--text-secondary); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.calls-meta-item strong { margin-top:4px; font-size:12.5px; overflow-wrap:anywhere; }
.calls-audio { width:100%; margin-top:14px; height:38px; }
.calls-follow { margin-top:18px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.calls-follow h4 { margin:0; font-size:13.5px; }
.calls-follow-hint { margin:4px 0 12px; color:var(--text-secondary); font-size:11.5px; }
.calls-follow-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.calls-follow-option { min-height:37px; padding:6px; border:1px solid var(--border); border-radius:9px; background:var(--surface-sunken); color:var(--text-secondary); font-size:10.5px; font-weight:700; cursor:pointer; }
.calls-follow-option.is-active { border-color:#6a59ed; background:rgba(106,89,237,.1); color:#5948d7; }
.calls-follow textarea { width:100%; min-height:74px; margin-top:10px; padding:10px; resize:vertical; border:1px solid var(--border); border-radius:10px; outline:0; background:var(--surface-sunken); color:var(--text); font:inherit; font-size:12.5px; }
.calls-follow textarea:focus { border-color:#7567ed; }
.calls-follow-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:9px; }
.calls-follow-saved { color:var(--text-secondary); font-size:10.5px; }
.calls-save { height:35px; padding:0 14px; border:0; border-radius:9px; background:#6251e6; color:#fff; font-weight:750; cursor:pointer; }
.calls-empty { min-height:280px; display:grid; place-content:center; justify-items:center; gap:7px; padding:24px; color:var(--text-secondary); text-align:center; }
.calls-empty svg { width:28px; height:28px; opacity:.65; }
.calls-empty .lucide-loader-circle { animation:spin 1s linear infinite; }
.calls-empty strong { color:var(--text); font-size:13px; }
.calls-empty span { max-width:260px; font-size:11.5px; }
@media (max-width:1100px) {
  .calls-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .calls-filters { flex-wrap:wrap; }
  .calls-search { flex-basis:100%; }
  .calls-inbox { height:auto; min-height:600px; grid-template-columns:minmax(330px,43%) minmax(380px,1fr); }
}
@media (max-width:760px) {
  .calls-shell { padding:18px 12px 25px; }
  .calls-title-wrap p,.calls-refresh span { display:none; }
  .calls-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calls-kpi { height:66px; padding:10px; }
  .calls-filter-field { flex:1 1 130px; }
  .calls-inbox { display:block; min-height:0; }
  .calls-list-pane { border-right:0; }
  .calls-list { max-height:480px; }
  .calls-detail { border-top:1px solid var(--border); }
  .calls-detail-card { padding:20px 15px; }
  .calls-follow-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ==========================================================================
   Substitution control center — CRM pipeline + Zoom automation
   ========================================================================== */
#substitutesView {
  --subs-blue:#3157d5;
  --subs-blue-soft:#eef3ff;
  --subs-ink:#172033;
  --subs-line:color-mix(in srgb,var(--border,#dfe4ec) 86%,transparent);
  /* .bulk-view is a flex column. Its children consequently shrink to the
     viewport and .subs-tracking-card clips the remaining rows with
     overflow:hidden, leaving the outer view with nothing to scroll. A normal
     block flow preserves the full CRM height while this view owns scrolling. */
  display:block;
  min-height:0;
  padding:22px clamp(16px,2.1vw,32px) 56px !important;
  overflow-x:hidden;
  overflow-y:auto;
  background:
    radial-gradient(circle at 92% 2%,rgba(76,104,220,.08),transparent 27rem),
    var(--app-bg,#f7f8fb);
}
.subs-crm-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 15px; }
.subs-crm-title { max-width:690px; }
.subs-crm-eyebrow { display:inline-flex; align-items:center; gap:6px; margin-bottom:7px; color:var(--subs-blue); font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.subs-crm-eyebrow svg { width:14px; height:14px; }
.subs-crm-title h2 { margin:0; color:var(--text,#172033); font-size:clamp(24px,2.1vw,32px); line-height:1.08; letter-spacing:-.035em; }
.subs-crm-title h2 .small { font-size:12px; letter-spacing:0; vertical-align:middle; }
.subs-crm-title p { margin:8px 0 0; color:var(--text-secondary,#687086); font-size:12.5px; line-height:1.5; }
.subs-crm-toolbar { display:flex; align-items:flex-end; gap:8px; flex:0 1 650px; justify-content:flex-end; }
.subs-toolbar-field { display:grid; gap:5px; color:var(--text-secondary,#687086); font-size:9.5px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }
.subs-toolbar-field select { min-width:130px; height:39px; }
.subs-toolbar-search { flex:1 1 260px; max-width:340px; }
.subs-search-control { position:relative; display:block; }
.subs-search-control>svg { position:absolute; z-index:1; top:11px; left:11px; width:16px; height:16px; color:var(--text-muted,#98a0b2); }
.subs-search-control .input { width:100%; height:39px; padding-left:35px; font-size:12px; text-transform:none; letter-spacing:0; }
.subs-refresh-btn { height:39px; padding:0 13px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--subs-line); border-radius:10px; background:var(--surface,#fff); color:var(--text,#172033); font:inherit; font-size:11.5px; font-weight:750; cursor:pointer; box-shadow:0 1px 2px rgba(18,27,45,.03); }
.subs-refresh-btn:hover { border-color:#b8c3df; background:var(--surface-hover,#f8faff); }
.subs-refresh-btn svg { width:15px; height:15px; }
.subs-agent-strip { display:flex; align-items:center; gap:11px; min-height:56px; margin:0 0 13px; padding:9px 13px; border:1px solid rgba(78,102,205,.18); border-radius:13px; background:linear-gradient(110deg,rgba(237,242,255,.96),rgba(250,251,255,.94)); box-shadow:0 5px 18px rgba(54,75,160,.06); }
.subs-agent-mark { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; background:linear-gradient(145deg,#516fdc,#2d4fcb); color:#fff; box-shadow:0 6px 13px rgba(49,87,213,.22); }
.subs-agent-mark svg { width:18px; height:18px; }
.subs-agent-copy { display:grid; gap:2px; min-width:0; }
.subs-agent-copy strong { color:var(--text,#172033); font-size:12px; }
.subs-agent-copy span { overflow:hidden; color:var(--text-secondary,#687086); font-size:10.8px; text-overflow:ellipsis; white-space:nowrap; }
.subs-agent-live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid rgba(19,164,99,.18); border-radius:999px; background:rgba(19,164,99,.08); color:#128250; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.045em; white-space:nowrap; }
.subs-agent-live>span { width:6px; height:6px; border-radius:50%; background:#19a463; box-shadow:0 0 0 3px rgba(25,164,99,.12); }
.subs-kpi-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-bottom:13px; }
.subs-kpi { min-width:0; height:69px; padding:10px 11px; display:flex; align-items:center; gap:10px; text-align:left; border:1px solid var(--subs-line); border-radius:13px; background:var(--surface,#fff); color:var(--text,#172033); font:inherit; cursor:pointer; box-shadow:0 3px 12px rgba(20,30,55,.035); transition:border-color .15s,box-shadow .15s,transform .15s; }
.subs-kpi:hover { border-color:#bec8df; transform:translateY(-1px); }
.subs-kpi.is-active { border-color:rgba(49,87,213,.42); box-shadow:0 0 0 2px rgba(49,87,213,.08),0 5px 15px rgba(49,87,213,.07); }
.subs-kpi-icon { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; }
.subs-kpi-icon svg { width:17px; height:17px; }
.subs-kpi-icon.is-blue { background:#edf2ff; color:#3157d5; }
.subs-kpi-icon.is-orange { background:#fff0e6; color:#d35b18; }
.subs-kpi-icon.is-violet { background:#f2edff; color:#7655d9; }
.subs-kpi-icon.is-amber { background:#fff5d9; color:#af7600; }
.subs-kpi-icon.is-green { background:#e9f8f0; color:#148252; }
.subs-kpi>span:last-child { min-width:0; display:grid; }
.subs-kpi strong { color:var(--text,#172033); font-size:20px; line-height:1; letter-spacing:-.03em; }
.subs-kpi small { margin-top:5px; overflow:hidden; color:var(--text-secondary,#687086); font-size:9.5px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
#substitutesView .subs-dispatch-card { margin:0 0 13px; padding:0; border:1px solid var(--subs-line); border-radius:13px; background:var(--surface,#fff); box-shadow:0 3px 12px rgba(20,30,55,.035); overflow:visible; }
.subs-dispatch-summary,.subs-registry-card>summary { min-height:62px; padding:11px 14px; display:flex; align-items:center; gap:11px; list-style:none; cursor:pointer; user-select:none; }
.subs-dispatch-summary::-webkit-details-marker,.subs-registry-card>summary::-webkit-details-marker { display:none; }
.subs-dispatch-summary-icon,.subs-registry-summary-icon { width:35px; height:35px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; background:var(--subs-blue-soft); color:var(--subs-blue); }
.subs-dispatch-summary-icon svg,.subs-registry-summary-icon svg { width:17px; height:17px; }
.subs-dispatch-summary>span:nth-child(2),.subs-registry-card>summary>span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.subs-dispatch-summary strong,.subs-registry-card summary strong { color:var(--text,#172033); font-size:12.5px; }
.subs-dispatch-summary small,.subs-registry-card summary small { color:var(--text-secondary,#687086); font-size:10.5px; }
.subs-summary-action { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--subs-blue); font-size:10.5px; font-weight:800; white-space:nowrap; }
.subs-summary-action svg { width:14px; height:14px; transition:transform .16s; }
details[open]>.subs-dispatch-summary .subs-summary-action svg,details[open]>summary .subs-summary-action svg { transform:rotate(180deg); }
.subs-dispatch-body { padding:16px; border-top:1px solid var(--subs-line); background:color-mix(in srgb,var(--surface,#fff) 97%,#edf2ff 3%); }
#substitutesView .subs-dispatch-head h3 { color:var(--text,#172033); font-size:12.5px; }
.subs-tracking-card { margin:0 0 13px; border:1px solid var(--subs-line); border-radius:15px; background:var(--surface,#fff); box-shadow:0 6px 22px rgba(20,30,55,.045); overflow:hidden; }
.subs-tracking-head { min-height:63px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--subs-line); }
.subs-tracking-head h3 { margin:0; display:flex; align-items:center; gap:7px; color:var(--text,#172033); font-size:13.5px; }
.subs-tracking-head h3 svg { width:16px; height:16px; color:var(--subs-blue); }
.subs-tracking-head p { margin:4px 0 0; color:var(--text-secondary,#687086); font-size:10.5px; }
.subs-stage-tabs { display:flex; gap:3px; padding:3px; border:1px solid var(--subs-line); border-radius:10px; background:var(--surface-sunken,#f5f7fa); }
.subs-stage-tabs button { height:28px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:var(--text-secondary,#687086); font:inherit; font-size:9.8px; font-weight:750; cursor:pointer; }
.subs-stage-tabs button.is-active { background:var(--surface,#fff); color:var(--subs-blue); box-shadow:0 1px 4px rgba(20,30,55,.1); }
#subsTable { min-width:1080px; }
.subs-alert-banner { margin:10px 12px 2px; padding:8px 10px; display:flex; align-items:center; gap:8px; border:1px solid rgba(220,105,37,.22); border-radius:9px; background:#fff7ef; color:#9a4716; font-size:10.8px; }
.subs-alert-banner svg { width:15px; height:15px; flex:0 0 auto; }
.subs-table-row { display:grid; grid-template-columns:112px minmax(160px,1.12fr) minmax(168px,1.05fr) 145px minmax(180px,1.2fr) 90px 65px 42px; gap:10px; align-items:center; }
.subs-table-head { min-height:39px; padding:0 13px; border-bottom:1px solid var(--subs-line); background:color-mix(in srgb,var(--surface-sunken,#f6f7f9) 88%,transparent); color:var(--text-muted,#8c95a8); font-size:9px; font-weight:800; letter-spacing:.065em; text-transform:uppercase; }
.subs-case-row { min-height:64px; padding:8px 13px; border-bottom:1px solid var(--subs-line); color:var(--text,#172033); font-size:11.5px; cursor:pointer; transition:background .12s; }
.subs-case-row:hover { background:color-mix(in srgb,var(--surface-hover,#f7f9fd) 76%,transparent); }
.subs-case-row.is-stuck { box-shadow:inset 3px 0 #e87a2e; background:linear-gradient(90deg,rgba(255,243,232,.72),transparent 30%); }
.subs-session-cell,.subs-class-cell,.subs-teacher-cell>span:last-child { min-width:0; display:grid; gap:3px; }
.subs-session-cell strong,.subs-class-cell strong,.subs-teacher-cell strong { overflow:hidden; font-size:11.5px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.subs-session-cell small,.subs-class-cell small,.subs-teacher-cell small { overflow:hidden; color:var(--text-secondary,#687086); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.subs-teacher-cell { min-width:0; display:flex; align-items:center; gap:8px; }
.subs-teacher-avatar { width:29px; height:29px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; background:linear-gradient(145deg,#eef2ff,#e4eaff); color:#3d5ac1; font-size:9px; font-weight:850; }
.subs-status-pill { width:max-content; max-width:100%; padding:4px 8px; display:inline-flex; align-items:center; gap:5px; border-radius:999px; font-size:9.5px; font-weight:800; white-space:nowrap; }
.subs-status-pill svg { width:12px; height:12px; }
.subs-status-pill.is-warning { background:#fff0e2; color:#bd5517; }
.subs-status-pill.is-danger { background:#fdebed; color:#c33e52; }
.subs-status-pill.is-violet { background:#f1edff; color:#6e50c7; }
.subs-status-pill.is-amber { background:#fff4d5; color:#a86f00; }
.subs-status-pill.is-success { background:#e5f7ed; color:#148052; }
.subs-status-pill.is-muted { background:var(--surface-sunken,#f1f3f6); color:var(--text-secondary,#687086); }
.subs-automation-cell { min-width:0; display:flex; align-items:flex-start; gap:6px; color:var(--text-secondary,#687086); font-size:9.7px; line-height:1.35; }
.subs-automation-cell svg { width:13px; height:13px; flex:0 0 auto; margin-top:1px; color:#71809a; }
.subs-automation-cell span { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.subs-automation-cell.is-alert { color:#a44a18; }
.subs-automation-cell.is-alert svg { color:#d56b2a; }
.subs-delivery { display:flex; align-items:center; gap:6px; }
.subs-delivery-dot { min-width:34px; height:24px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; gap:3px; border-radius:7px; }
.subs-delivery-dot>svg:first-child { width:12px; height:12px; }
.subs-delivery-dot>svg:last-child { width:10px; height:10px; }
.subs-delivery-dot.is-ok { background:#e8f7ef; color:#178251; }
.subs-delivery-dot.is-off { background:var(--surface-sunken,#f2f4f7); color:#9aa2b1; }
.subs-attendance-cell { text-align:center; font-size:13px; font-weight:800; }
.subs-action-cell { text-align:right; }
.subs-row-action { width:29px; height:29px; display:inline-grid; place-items:center; border:1px solid var(--subs-line); border-radius:8px; background:var(--surface,#fff); color:var(--text-secondary,#687086); cursor:pointer; }
.subs-row-action:hover { border-color:#b7c2de; color:var(--subs-blue); }
.subs-row-action svg { width:14px; height:14px; }
.subs-case-detail { padding:15px 16px 16px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.72fr); gap:18px; border-bottom:1px solid var(--subs-line); background:linear-gradient(120deg,rgba(240,244,255,.9),rgba(251,252,255,.96)); box-shadow:inset 3px 0 #5170d9; }
.subs-case-detail-title { display:flex; align-items:flex-start; gap:9px; }
.subs-agent-mini { width:29px; height:29px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; background:#3157d5; color:#fff; }
.subs-agent-mini svg { width:15px; height:15px; }
.subs-case-detail-title strong { font-size:11.5px; }
.subs-case-detail-title p { margin:3px 0 0; color:var(--text-secondary,#687086); font-size:10.3px; line-height:1.45; }
.subs-mini-timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:14px; }
.subs-mini-timeline>div { position:relative; min-width:0; display:grid; grid-template-columns:17px 1fr; grid-template-rows:auto auto; gap:2px 5px; }
.subs-mini-timeline>div:not(:last-child)::after { content:""; position:absolute; top:8px; left:16px; right:0; height:1px; background:#d6dcec; }
.subs-mini-timeline>div>span { z-index:1; width:17px; height:17px; grid-row:1/3; display:grid; place-items:center; border-radius:50%; background:#e8ebf2; color:#929bad; }
.subs-mini-timeline>div.is-done>span { background:#dff4e9; color:#158151; }
.subs-mini-timeline svg { width:10px; height:10px; }
.subs-mini-timeline small { color:var(--text-muted,#8c95a8); font-size:8.8px; font-weight:700; text-transform:uppercase; }
.subs-mini-timeline strong { overflow:hidden; padding-right:8px; color:var(--text,#172033); font-size:9.6px; text-overflow:ellipsis; white-space:nowrap; }
.subs-case-detail-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-content:start; }
.subs-case-detail-side>div:not(.subs-agent-action) { min-width:0; padding:8px; border:1px solid rgba(80,101,168,.12); border-radius:8px; background:rgba(255,255,255,.66); }
.subs-case-detail-side small,.subs-case-detail-side strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subs-case-detail-side small { color:var(--text-muted,#8c95a8); font-size:8.5px; font-weight:750; text-transform:uppercase; }
.subs-case-detail-side strong { margin-top:3px; font-size:9.5px; }
.subs-agent-action { grid-column:1/-1; display:flex; gap:7px; }
.subs-agent-select { min-width:0; height:34px; flex:1; font-size:10px; }
.subs-agent-run { height:34px; padding:0 11px; display:inline-flex; align-items:center; gap:6px; border:0; border-radius:9px; background:#3157d5; color:#fff; font:inherit; font-size:9.8px; font-weight:800; cursor:pointer; box-shadow:0 4px 10px rgba(49,87,213,.2); white-space:nowrap; }
.subs-agent-run:disabled { opacity:.55; cursor:wait; }
.subs-agent-run svg { width:13px; height:13px; }
.subs-leaderboard { padding:0 14px 14px; }
.subs-leaderboard h3 { margin:13px 0 8px; color:var(--text-secondary,#687086); font-size:9.5px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }
.subs-leader-grid { display:flex; flex-wrap:wrap; gap:6px; }
.subs-leader-chip { min-width:140px; padding:6px 9px; display:flex; align-items:center; gap:7px; border:1px solid var(--subs-line); border-radius:9px; background:var(--surface-sunken,#f7f8fa); }
.subs-leader-chip .subs-teacher-avatar { width:24px; height:24px; border-radius:7px; font-size:8px; }
.subs-leader-chip>span:last-child { display:grid; gap:1px; }
.subs-leader-chip strong { font-size:9.8px; }
.subs-leader-chip small { color:var(--text-secondary,#687086); font-size:8.5px; }
.subs-registry-card { margin:0; border:1px solid var(--subs-line); border-radius:13px; background:var(--surface,#fff); box-shadow:0 3px 12px rgba(20,30,55,.035); overflow:hidden; }
.subs-registry-summary-icon { background:#e8f7f3; color:#13806a; }
.subs-registry-body { padding:14px; border-top:1px solid var(--subs-line); }
.subs-registry-list { max-height:260px; margin-bottom:13px; overflow:auto; border:1px solid var(--subs-line); border-radius:10px; }
.subs-registry-row { min-height:52px; padding:7px 9px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:9px; border-bottom:1px solid var(--subs-line); }
.subs-registry-row:last-child { border-bottom:0; }
.subs-registry-person { min-width:0; display:flex; align-items:center; gap:8px; }
.subs-registry-person>span:last-child { min-width:0; display:grid; gap:2px; }
.subs-registry-person strong,.subs-registry-person small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subs-registry-person strong { font-size:10.5px; }
.subs-registry-person small { color:var(--text-secondary,#687086); font-size:9px; }
.subs-room-health { padding:4px 7px; display:inline-flex; align-items:center; gap:4px; border-radius:999px; font-size:8.8px; font-weight:800; white-space:nowrap; }
.subs-room-health svg { width:11px; height:11px; }
.subs-room-health.is-ready { background:#e8f7ef; color:#178251; }
.subs-room-health.is-missing { background:#fff0e2; color:#bd5517; }
.subs-registry-edit { height:27px; padding:0 8px; display:inline-flex; align-items:center; gap:4px; border:1px solid var(--subs-line); border-radius:7px; background:var(--surface,#fff); color:var(--text-secondary,#687086); font:inherit; font-size:9px; font-weight:750; cursor:pointer; }
.subs-registry-edit svg { width:11px; height:11px; }
.subs-registry-form-title { margin-bottom:8px; color:var(--text,#172033); font-size:11px; font-weight:800; }
@media (max-width:1200px) {
  .subs-crm-hero { align-items:flex-start; flex-direction:column; gap:14px; }
  .subs-crm-toolbar { width:100%; flex:1; justify-content:flex-start; }
  .subs-toolbar-search { max-width:none; }
  .subs-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px) {
  #substitutesView { padding:16px 10px 40px !important; }
  .subs-crm-toolbar { align-items:stretch; flex-wrap:wrap; }
  .subs-toolbar-field { flex:1 1 125px; }
  .subs-toolbar-search { flex-basis:100%; order:-1; }
  .subs-refresh-btn { align-self:flex-end; }
  .subs-agent-live { display:none; }
  .subs-agent-copy span { white-space:normal; }
  .subs-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .subs-stage-tabs { max-width:100%; overflow:auto; }
  .subs-tracking-head { align-items:flex-start; flex-direction:column; }
  .subs-case-detail { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .subs-crm-title p,.subs-summary-action>span { display:none; }
  .subs-kpi { height:61px; padding:8px; }
  .subs-kpi-icon { width:30px; height:30px; }
  .subs-kpi strong { font-size:17px; }
  .subs-dispatch-summary small,.subs-registry-card summary small { white-space:normal; }
  .subs-mini-timeline { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 0; }
  .subs-agent-action { align-items:stretch; flex-direction:column; }
}

/* ═══ Students7 — app-activity dashboard (Attendance ▸ Students7) ═══════════ */
.s7-kpi-online .attendance-kpi-big { color: var(--wa); }
.s7-autorefresh { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-secondary); white-space:nowrap; }
.s7-autorefresh input { accent-color: var(--wa); }

/* Filter chips */
.s7-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.s7-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface);
  color:var(--text-secondary); font-size:12.5px; font-weight:500; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.s7-chip:hover { background:var(--surface-hover); }
.s7-chip.active { background:var(--wa-soft); border-color:var(--wa); color:var(--wa-dark); }

/* Online dot */
.s7-online-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--border-strong); flex-shrink:0; vertical-align:middle;
}
.s7-online-dot.on { background:var(--wa); box-shadow:0 0 0 3px var(--wa-soft); animation:s7pulse 2s ease-in-out infinite; }
@keyframes s7pulse { 0%,100% { box-shadow:0 0 0 2px var(--wa-soft); } 50% { box-shadow:0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { .s7-online-dot.on { animation:none; } }
.s7-seen-online { display:inline-flex; align-items:center; gap:6px; color:var(--wa-dark); font-weight:600; }

/* HubSpot-style dense table */
.s7-tbl-wrap { position:relative; border:1px solid var(--border); border-radius:var(--radius-lg); overflow-x:auto; background:var(--surface); box-shadow:var(--elevation-card); }
.s7-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.s7-tbl thead th {
  position:sticky; top:0; z-index:2;
  background:var(--surface-sunken); color:var(--text-tertiary);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  text-align:left; padding:10px 14px; white-space:nowrap;
  border-bottom:1px solid var(--border); cursor:pointer; user-select:none;
}
.s7-tbl thead th[data-s7-sort]:hover { color:var(--text-secondary); background:var(--surface-hover); }
.s7-tbl thead th.s7-tnum, .s7-tbl td.s7-tnum { text-align:right; font-variant-numeric:tabular-nums; }
.s7-tbl thead th.s7-tc, .s7-tbl td.s7-tc { text-align:center; }
.s7-tbl thead th.s7-sorted { color:var(--accent); }
.s7-tbl thead th.s7-sorted::after { content:' ▾'; font-size:9px; }
.s7-tbl thead th.s7-sorted[data-dir="asc"]::after { content:' ▴'; }
.s7-tbl tbody td { padding:10px 14px; border-bottom:1px solid var(--border-subtle); color:var(--text); white-space:nowrap; vertical-align:middle; }
.s7-tbl tbody tr.s7-tr { cursor:pointer; transition:background .1s; }
.s7-tbl tbody tr.s7-tr:hover { background:var(--accent-soft); }
.s7-tbl tbody tr.s7-tr:last-child td { border-bottom:0; }
.s7-muted { color:var(--text-tertiary); }
/* name cell */
.s7-td-name { display:flex; align-items:center; gap:9px; }
.s7-dot { width:8px; height:8px; border-radius:50%; background:var(--border-strong); flex-shrink:0; }
.s7-dot.on { background:var(--wa); box-shadow:0 0 0 3px var(--wa-soft); }
.s7-td-nwrap { min-width:0; }
.s7-td-nm { font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.s7-td-ph { font-size:11px; color:var(--text-tertiary); }
.s7-td-grp { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.s7-on { color:var(--wa-dark); font-weight:650; }
.s7-chip2 { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent); font-size:11.5px; font-weight:600; }
.s7-chip2 i { width:12px; height:12px; }
/* pager */
.s7-pager { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; padding:12px; border-top:1px solid var(--border); background:var(--surface-sunken); }
.s7-pg { min-width:30px; padding:5px 9px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-sm); font-size:12.5px; color:var(--text-secondary); cursor:pointer; transition:background .1s,border-color .1s; }
.s7-pg:hover:not(.disabled):not(.active) { background:var(--surface-hover); }
.s7-pg.active { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); font-weight:600; }
.s7-pg.disabled { opacity:.4; cursor:default; }
.s7-pg-gap { color:var(--text-tertiary); padding:0 2px; }
.s7-pg-total { margin-left:10px; font-size:12px; color:var(--text-tertiary); }

/* Detail drawer */
.s7-detail-meta { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.s7-detail-status { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text); }
.s7-detail-actions { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.s7-detail-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }
.s7-stat { background:var(--surface-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:8px 6px; text-align:center; }
.s7-stat-num { font-size:17px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.s7-stat-label { font-size:10.5px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
.s7-detail-section { margin-bottom:16px; }
.s7-detail-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); margin-bottom:8px; }
.s7-timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.s7-timeline li {
  display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--border-subtle); font-size:12.5px;
}
.s7-timeline li:last-child { border-bottom:0; }
.s7-tl-icon { display:inline-flex; color:var(--text-tertiary); flex-shrink:0; }
.s7-tl-icon i { width:15px; height:15px; }
.s7-tl-txt { flex:1; min-width:0; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s7-tl-time { color:var(--text-tertiary); font-size:11.5px; white-space:nowrap; flex-shrink:0; }

/* ---------------------------------------------------------------------------
   Internal team notes (2026-07-24) — team-only annotations inline in a chat.
   Amber card, centered, clearly NOT a client message. Tokens only (gotcha #14)
   so it themes correctly in light + dark.
   --------------------------------------------------------------------------- */
.note-compose-btn { color: var(--warning); }
.note-compose-btn:hover { background: var(--surface-hover); }

.note-row { justify-content: center; }
.note-bubble {
  max-width: min(76%, 560px);
  margin: 4px auto;
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-left: 3px solid var(--warning);
  border-radius: 10px;
  padding: 8px 10px 6px;
  box-shadow: var(--elevation-card);
}
.note-bubble-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--warning); text-transform: uppercase;
}
.note-bubble-head i { width: 14px; height: 14px; }
.note-bubble-tag { flex: 1; }
.note-bubble-del {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); opacity: .7;
  padding: 2px; border-radius: 5px; display: inline-flex;
}
.note-bubble-del:hover { opacity: 1; background: var(--surface-hover); }
.note-bubble-del i { width: 13px; height: 13px; }
.note-bubble-body {
  margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--text); font-size: 13.5px; line-height: 1.4;
}
.note-bubble-meta { margin-top: 4px; font-size: 10.5px; color: var(--text-muted); }

/* Composer popover */
.note-popover {
  position: absolute; bottom: 64px; left: 12px; z-index: 40;
  width: min(340px, calc(100vw - 40px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--elevation-overlay);
  padding: 10px;
}
.note-popover.hidden { display: none; }
.note-popover-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--warning);
  margin-bottom: 6px;
}
.note-popover-head i { width: 15px; height: 15px; }
.note-popover-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 62px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px;
  font: inherit; background: var(--surface); color: var(--text);
}
.note-popover-input:focus {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 var(--focus-w) var(--focus-ring);
}
.note-popover-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.note-btn-cancel, .note-btn-add {
  border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid transparent;
}
.note-btn-cancel { background: transparent; color: var(--text-muted); border-color: var(--border); }
.note-btn-cancel:hover { background: var(--surface-hover); }
.note-btn-add { background: var(--warning); color: #1a1206; font-weight: 700; }
.note-btn-add:hover { filter: brightness(1.05); }
.note-btn-add:disabled { opacity: .6; cursor: default; }

/* ==========================================================================
   TEAM PULSE (Rapport ▸ Activity) — 2026-07-24
   Durable platform telemetry: who is online, what each agent did, which pages
   they use, full audit timeline. Tokens only (gotcha #14) → themes for free.
   ========================================================================== */
.team-pulse { display: flex; flex-direction: column; gap: var(--gap-airy, 16px); width: 100%; margin-bottom: 24px; }
.tp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tp-head-main h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.tp-head-main h2 i { width: 20px; height: 20px; color: var(--wa); }
.tp-sub { display: block; margin-top: 2px; }
.tp-head-right { display: flex; align-items: center; gap: 8px; }
.tp-range { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.tp-range .tp-date { flex: 0 0 auto; }
.tp-chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.tp-chip:hover { background: var(--surface-hover); }
.tp-chip-active { background: var(--wa); border-color: var(--wa); color: #06210f; }
.tp-date { padding: 5px 8px; font-size: 12px; max-width: 138px; }
.tp-date-sep { color: var(--text-muted); }
.tp-refresh { padding: 6px 10px; }

.tp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: var(--pad-card, 16px);
  box-shadow: var(--elevation-card, 0 1px 2px rgb(0 0 0 / .04));
}
.tp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tp-card-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .03em; }
.tp-card-head h3 i { width: 15px; height: 15px; color: var(--text-tertiary); }
.tp-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ── Live strip ── */
.tp-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tp-live-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-sunken);
}
.tp-live-item.is-online { border-color: var(--wa); background: var(--wa-soft); }
.tp-live-meta { display: flex; flex-direction: column; min-width: 0; }
.tp-live-name { font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-live-sub { font-size: 11.5px; color: var(--text-tertiary); }
.tp-live-item.is-online .tp-live-sub { color: var(--wa-dark); font-weight: 600; }
.tp-surface { width: 14px; height: 14px; margin-left: auto; color: var(--text-muted); }
.tp-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px;
}
.tp-live-item.is-online .tp-avatar { background: var(--wa); color: #06210f; }
.tp-avatar-sm { width: 24px; height: 24px; font-size: 11px; }

/* ── Work table (dense CRM) ── */
.tp-table-wrap { overflow-x: auto; }
.tp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tp-table th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  padding: 8px 10px; text-align: right; font-size: 11px; font-weight: 700;
  color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tp-table th.tp-col-name { text-align: left; }
.tp-sortable { cursor: pointer; user-select: none; }
.tp-sortable:hover { color: var(--text); }
.tp-sorted { color: var(--wa); }
.tp-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.tp-row { cursor: pointer; transition: background .12s; }
.tp-row:hover { background: var(--surface-hover); }
.tp-row-idle { opacity: .55; }
.tp-col-name { display: flex; align-items: center; gap: 9px; min-width: 200px; }
.tp-name-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tp-name-txt strong { font-size: 13.5px; color: var(--text); font-weight: 650; }
.tp-bar { display: block; height: 3px; border-radius: 2px; background: var(--surface-active); overflow: hidden; }
.tp-bar-fill { display: block; height: 100%; background: var(--wa); border-radius: 2px; }
.tp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-total { font-weight: 700; color: var(--text); }
.tp-zero { color: var(--text-muted); opacity: .5; }
.tp-last { color: var(--text-tertiary); font-size: 12px; }

/* ── Feature usage ── */
.tp-usage { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tp-usage-card { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px; background: var(--surface-sunken); }
.tp-usage-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tp-usage-head strong { font-size: 13px; color: var(--text); }
.tp-usage-head .muted { margin-left: auto; }
.tp-usage-list { display: flex; flex-direction: column; gap: 5px; }
.tp-usage-row { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 8px; }
.tp-usage-view { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-usage-bar { height: 6px; border-radius: 3px; background: var(--surface-active); overflow: hidden; }
.tp-usage-fill { display: block; height: 100%; background: var(--lougha); border-radius: 3px; }
.tp-usage-n { font-size: 11.5px; color: var(--text-tertiary); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Timeline drawer ── */
.tp-drawer { position: fixed; inset: 0; z-index: 1200; }
.tp-drawer.hidden { display: none; }
/* No backdrop-filter here: a full-viewport blurred scrim makes Chromium
   re-composite the whole page (visible as a washed-out backdrop in headless
   captures) for no visual gain over a plain dim. */
.tp-drawer-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .45); }
.tp-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 94vw);
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; box-shadow: var(--elevation-overlay, -8px 0 30px rgb(0 0 0 / .18));
  animation: tpSlideIn .18s ease both;
}
@keyframes tpSlideIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tp-drawer-panel { animation: none; } }
.tp-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.tp-drawer-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.tp-drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px 26px; }
.tp-daily { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin-bottom: 16px; padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }
.tp-daily-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 0; }
.tp-daily-bar { width: 100%; max-width: 16px; background: var(--wa); border-radius: 3px 3px 0 0; }
.tp-daily-lbl { font-size: 9.5px; color: var(--text-muted); }
.tp-timeline { display: flex; flex-direction: column; }
.tp-tl-day { margin: 14px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.tp-tl-row { display: grid; grid-template-columns: 46px 150px 1fr; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; }
.tp-tl-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tp-tl-what { color: var(--text); font-weight: 600; }
.tp-tl-target { color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-tl-page { opacity: .62; }
.tp-tl-page .tp-tl-what { font-weight: 500; font-style: italic; }
.tp-more { margin-top: 14px; width: 100%; }

/* ── Score explainer: the arithmetic behind each drill tile + the "how is the
   score computed" card at the top of Barème (built from the live config). ── */
.score-tile-calc {
  margin-top: 3px; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--text-muted); letter-spacing: .01em;
}
.tsb-note-link {
  background: none; border: 0; padding: 0; margin-left: 4px;
  color: var(--wa-dark); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline;
}
.tsb-note-link:hover { color: var(--wa); }
.bareme-exp-body { display: flex; flex-direction: column; gap: 14px; }
.bareme-formula {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  font-size: 13.5px; font-weight: 650;
}
.bareme-formula-pos { color: var(--wa-dark); }
.bareme-formula-op { color: var(--text-muted); font-weight: 800; }
.bareme-formula-neg { color: var(--danger); }
.bareme-exp-rows { display: flex; flex-direction: column; gap: 10px; }
.bareme-exp-row { display: flex; gap: 10px; align-items: flex-start; }
.bareme-exp-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
}
.bareme-exp-ico svg { width: 14px; height: 14px; }
.bareme-exp-main { min-width: 0; }
.bareme-exp-title { font-size: 13px; font-weight: 700; color: var(--text); }
.bareme-exp-how { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.bareme-exp-foot { margin: 0; font-size: 12px; color: var(--text-muted); font-style: italic; }

/* ── Justificatif: the items behind each score tile (click a tile) ── */
.score-tile-clickable { cursor: pointer; }
.score-tile-clickable:hover { border-color: var(--wa); }
.score-tile-open { border-color: var(--wa); box-shadow: 0 0 0 2px var(--wa-soft); }
.justif-box:empty { display: none; }
.justif-box {
  margin-top: 12px; padding: 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-sunken);
}
/* Popup variant (one per tile): the table gets the room, so drop the inner
   card chrome and let it scroll to the viewport instead of a fixed 420px. */
#justifModalBody .justif-table-wrap { max-height: min(62vh, 620px); }
#justifModalBody .justif-head { position: sticky; top: 0; background: var(--surface); z-index: 2; padding-bottom: 6px; }
#justifModal .modal-card { width: min(920px, 94vw); }
.justif-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.justif-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.justif-pts { font-size: 13px; font-weight: 800; color: var(--wa-dark); font-variant-numeric: tabular-nums; }
.justif-pts.neg { color: var(--danger); }
.justif-flag {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--warning-soft); color: var(--warning);
}
.justif-csv { margin-left: auto; }
.justif-note { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }
.justif-table-wrap { overflow-x: auto; max-height: 420px; overflow-y: auto; border-radius: 8px; }
.justif-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.justif-table th {
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  padding: 7px 9px; text-align: left; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.justif-table td {
  padding: 6px 9px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.justif-table td.justif-wide { max-width: 460px; }
/* Linkable row (ticket → HubSpot record) */
.justif-row-link { cursor: pointer; }
.justif-row-link:hover td { background: var(--surface-hover); color: var(--text); }
.justif-row-link:hover td.justif-wide { text-decoration: underline; text-decoration-color: var(--border-strong); }
.justif-table th.justif-num, .justif-table td.justif-num { text-align: right; font-variant-numeric: tabular-nums; }
.justif-table tbody tr:hover { background: var(--surface-hover); }
.justif-recon {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px;
  border-radius: 8px; background: var(--success-soft); color: var(--success);
  font-size: 12.5px; font-weight: 600;
}
.justif-recon.bad { background: var(--danger-soft); color: var(--danger); }
.justif-recon svg { width: 15px; height: 15px; }

/* Team Pulse — effective data window + "history starts here" note */
.tp-window { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tp-window:empty { display: none; }
.tp-win-range,
.tp-win-warn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; }
.tp-win-range { background: var(--surface-sunken); color: var(--text-secondary); border: 1px solid var(--border-subtle); font-weight: 600; }
.tp-win-warn { background: var(--warning-soft); color: var(--warning); font-weight: 500; }
.tp-win-range svg, .tp-win-warn svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Justificatif: expand a row to read the whole summary in place */
.justif-row-expandable { cursor: pointer; }
.justif-row-expandable:hover td { background: var(--surface-hover); }
.justif-row-open td { background: var(--surface-hover); vertical-align: top; }
.justif-row-open td.justif-wide {
  max-width: 640px; white-space: normal; overflow: visible;
  text-overflow: clip; line-height: 1.5; padding-top: 9px; padding-bottom: 9px; color: var(--text);
}
.justif-ext { display: inline-flex; margin-left: 6px; color: var(--text-muted); vertical-align: middle; }
.justif-ext:hover { color: var(--accent); }
.justif-ext svg { width: 12px; height: 12px; }

/* Tickets table: mark cells whose value is clipped + a taller reader textarea */
.tickets-cell-haslong { position: relative; }
.tickets-cell-expand { display: inline-flex; margin-left: 5px; color: var(--text-muted); vertical-align: middle; opacity: .55; }
.tickets-cell-haslong:hover .tickets-cell-expand { opacity: 1; color: var(--accent); }
.tickets-cell-expand svg { width: 11px; height: 11px; }
#ticketEditTextArea { min-height: 220px; line-height: 1.55; }

/* Barème — Leads7 collector → support2 agent mapping */
.bareme-map-total { font-size: 13px; font-weight: 700; color: var(--wa-dark); margin-bottom: 10px; }
.bareme-map-row { display: grid; grid-template-columns: 1fr 240px; gap: 10px; align-items: center; }
.bareme-map-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bareme-map-amt { font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.bareme-map-amt.is-unmapped { color: var(--warning); font-weight: 700; }
.bareme-map-sel { font-size: 12.5px; padding: 6px 8px; }

/* Barème — scoreboard roster picker */
.bareme-roster-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.bareme-roster-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--surface-sunken); cursor: pointer; font-size: 13px; }
.bareme-roster-row:hover { background: var(--surface-hover); }
.bareme-roster-name { font-weight: 650; color: var(--text); }
.bareme-roster-cb { accent-color: var(--wa); width: 15px; height: 15px; }

/* Justificatif — inline audio proof for voice-note feedback */
.justif-audio { height: 30px; max-width: 260px; vertical-align: middle; }

/* Contacts table — name opens the history, pencil renames */
.contacts-name-cell { position: relative; }
.contacts-name-cell .contacts-name:hover strong { text-decoration: underline; text-decoration-color: var(--border-strong); }
.contacts-name-edit {
  opacity: 0; background: none; border: 0; padding: 2px 4px; margin-left: 4px;
  color: var(--text-muted); cursor: pointer; vertical-align: middle; transition: opacity .12s, color .12s;
}
.contacts-name-cell:hover .contacts-name-edit { opacity: 1; }
.contacts-name-edit:hover { color: var(--accent); }
.contacts-name-edit svg { width: 13px; height: 13px; }


/* ── One Chat: same number = one conversation (2026-07-25) ────────────────
   The channel is carried by colour, not by repeating a word on every row:
   a thin edge on the bubble + one small tag. Tokens only (gotcha #14). */
.oc-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.oc-dot { width: 7px; height: 7px; border-radius: 50%; display: block; background: currentColor; flex: 0 0 auto; }
.bubble.oc-msg { border-left: 3px solid var(--oc); }
.oc-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 3px; color: var(--oc);
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.oc-tag .oc-dot { background: var(--oc); }
/* SMS carries a delivery status the other channels don't — queued/sending/failed
   ride on the same tag so the agent never reads an unsent SMS as delivered. */
.oc-tag-st { font-style: normal; font-weight: 700; opacity: .75; text-transform: none; letter-spacing: 0; }
/* "Leads7 · via Support2" — the line the message actually travelled on. Bigger
   than the lane name and green, because that is the part the team acts on. The
   colour is a token so it stays readable on both bubble backgrounds (gotcha #14). */
.oc-tag-line {
  font-style: normal; font-weight: 800; text-transform: none; letter-spacing: 0;
  font-size: 12.5px; color: var(--success);
}
.oc-send-pick {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 8px 0 2px; padding: 5px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-pill, 999px);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.oc-send-pick:hover { border-color: var(--wa); }
.oc-send-pick-wrap { position: relative; display: inline-flex; }
.oc-send-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 190px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px); box-shadow: var(--elevation-overlay, 0 8px 24px rgba(0,0,0,.14));
}
.oc-send-menu.hidden { display: none; }
.oc-send-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 7px; background: transparent;
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 650;
  cursor: pointer; text-align: left;
}
.oc-send-item:hover { background: var(--surface-hover); }
.oc-send-item.active { background: var(--wa-soft, var(--surface-hover)); color: var(--wa); }
.oc-send-item.is-off { opacity: .45; cursor: not-allowed; }
.oc-send-name { display: flex; flex-direction: column; line-height: 1.2; }
.oc-send-num { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.oc-send-item em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); }
.oc-send-item .oc-send-known { color: var(--wa); }

/* Family line on a HubSpot search row — the other people who share this
   number (a parent's children). Tokens only, so it themes in both modes. */
.hs-search-family {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  min-width: 0;
}
.hs-search-family span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-search-family svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Drag a file onto a conversation ──────────────────────────────────────
   Cmd+V and drag-and-drop stage files the same way the paperclip does. While
   a file is being dragged, outline the surface it will land in — the team pane
   and the client conversation sit side by side, and dropping into the wrong
   one would message the wrong person. Tokens only, so it themes in dark. */
#convView.drop-files,
#teamchatActiveChat.drop-files {
  outline: 2px dashed var(--wa);
  outline-offset: -6px;
  background: var(--wa-soft);
}

/* ── Attendance ▸ Session limits ──────────────────────────────────────────
   Ch7al dyal hissa LIVE f l'semana kay-9der y-dkhol l'student. L'aham 7aja
   bassariyan: row li l'team 7ettat l'raqm dyalha b l'yed KHASSHA t-farre9 3la
   l'rows li ghir werto l'pack — bla hadchi, l'wa7ed kay-3awed y-7ett raqm
   deja mektoub. Tokens ghir → kay-flippi f dark majjanan. */
.sl-banner {
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--warning);
  background: var(--warning-soft);
  color: var(--warning);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  line-height: 1.5;
}
/* `!important` + the .tickets-row prefix on purpose: the table's zebra rule
   `.tickets-row:nth-child(even)` is (0,3,0) and would otherwise repaint every
   OTHER team-set row back to plain, so the tint appeared on half of them and
   read like a rendering glitch. Same shape as the existing `.tickets-row
   .is-selected` rule a few thousand lines up, which fights the same zebra. */
.tickets-row.sl-row-team,
.tickets-row.sl-row-team:hover {
  background: var(--accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
/* (The #slTable name-colour patch that used to live here is gone: the same bug
   hit Club points, Groups, Students and Low attendance, so it is now fixed at
   its source in the [data-theme="dark"] attendance block above.) */
.sl-rate {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Three buttons in an 82px grid column that clips (`.tickets-cell` is
   overflow:hidden). At the default .btn padding they measure 105px, so the
   third one — "back to the pack", the only way to UNDO an override — was
   sliced in half and looked like a rendering artefact. Square them off:
   3×22 + 2×3 = 72px, comfortably inside the column. */
.sl-actions { display: flex; align-items: center; justify-content: flex-start; gap: 3px; }
.sl-actions .btn {
  padding: 0;
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.sl-actions i, .sl-actions svg { width: 13px; height: 13px; }
.sl-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.sl-bulkbar .sl-bulk-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.sl-bulkbar .sl-bulk-note i { width: 15px; height: 15px; }
/* ========================================================================
   Institute Calendar — operational month board
   ======================================================================== */
#instituteCalendarView {
  overflow: auto;
  background:
    radial-gradient(circle at 9% -5%, oklch(0.78 0.12 282 / .16), transparent 30rem),
    radial-gradient(circle at 96% 4%, oklch(0.80 0.10 220 / .11), transparent 27rem),
    var(--bg);
}
.ic-shell {
  width: min(1580px, 100%);
  margin: 0 auto;
  padding: clamp(22px, 2.5vw, 38px);
  color: var(--text);
}
.ic-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.ic-eyebrow,
.ic-toolbar-label,
.ic-modal-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.ic-eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgb(34 197 94 / .11);
}
.ic-hero h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 7px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 630;
  letter-spacing: -.045em;
}
.ic-hero h1 svg {
  width: 34px;
  height: 34px;
  color: #6d5ce8;
  stroke-width: 1.75;
}
.ic-hero p {
  max-width: 740px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.ic-hero-actions,
.ic-calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ic-hero-actions { justify-content: flex-end; }
.ic-next-holiday {
  appearance: none;
  min-width: 250px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgb(245 158 11 / .24);
  border-radius: 15px;
  background: linear-gradient(135deg, rgb(245 158 11 / .10), rgb(251 191 36 / .04)), var(--surface-elevated);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: 0 7px 22px rgb(146 64 14 / .07);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ic-next-holiday:hover {
  transform: translateY(-1px);
  border-color: rgb(245 158 11 / .46);
  box-shadow: 0 10px 27px rgb(146 64 14 / .11);
}
.ic-next-holiday:disabled { cursor: default; opacity: .65; transform: none; }
.ic-next-holiday-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgb(245 158 11 / .14);
  color: #d97706;
}
.ic-next-holiday-icon svg { width: 17px; height: 17px; }
.ic-next-holiday-copy { min-width: 0; display: grid; gap: 1px; }
.ic-next-holiday-copy > span {
  color: #b45309;
  font-size: 8.5px;
  font-weight: 820;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ic-next-holiday-copy strong,
.ic-next-holiday-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ic-next-holiday-copy strong { font-size: 11.5px; line-height: 1.25; }
.ic-next-holiday-copy small { color: var(--text-tertiary); font-size: 9.5px; }
.ic-next-holiday-countdown {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgb(245 158 11 / .13);
  color: #b45309;
  font-size: 9px;
  font-weight: 780;
  white-space: nowrap;
}
.ic-btn,
.ic-nav-today,
.ic-nav-icon {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-elevated);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 680;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ic-btn {
  min-height: 42px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ic-btn svg { width: 16px; height: 16px; }
.ic-btn:hover,
.ic-nav-today:hover,
.ic-nav-icon:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.ic-btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #6756e8, #5143ce);
  color: #fff;
  box-shadow: 0 9px 24px rgb(85 70 210 / .22);
}
.ic-btn-secondary { box-shadow: 0 5px 16px rgb(15 23 42 / .05); }
.ic-today-alert,
.schedule-calendar-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid rgb(244 63 94 / .22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(244 63 94 / .10), rgb(251 146 60 / .07));
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.ic-today-alert svg,
.schedule-calendar-alert svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #e11d48;
  margin-top: 1px;
}
.ic-today-alert strong,
.schedule-calendar-alert strong { display: block; font-size: 13.5px; }
.schedule-calendar-alert { margin: 0 0 14px; }
.ic-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 14px;
}
.ic-kpi {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  box-shadow: 0 5px 22px rgb(15 23 42 / .035);
}
.ic-kpi-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}
.ic-kpi-icon svg { width: 18px; height: 18px; }
.ic-kpi-icon.is-violet { color: #6d5ce8; background: rgb(109 92 232 / .11); }
.ic-kpi-icon.is-blue { color: #2563eb; background: rgb(37 99 235 / .10); }
.ic-kpi-icon.is-cyan { color: #0891b2; background: rgb(8 145 178 / .10); }
.ic-kpi-icon.is-amber { color: #d97706; background: rgb(217 119 6 / .11); }
.ic-kpi-icon.is-rose { color: #e11d48; background: rgb(225 29 72 / .10); }
.ic-kpi div { min-width: 0; display: grid; }
.ic-kpi strong { font-size: 20px; line-height: 1.05; letter-spacing: -.03em; }
.ic-kpi div span { margin-top: 3px; color: var(--text-tertiary); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-roster-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -4px 2px 14px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  line-height: 1.4;
}
.ic-roster-note svg { width: 13px; height: 13px; color: #2563eb; }
.ic-roster-note strong { color: var(--text-secondary); font-weight: 730; }
.ic-roster-note span { min-width: 0; }
.ic-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
  gap: 14px;
}
.ic-calendar-card,
.ic-agenda-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-elevated);
  box-shadow: 0 14px 42px rgb(15 23 42 / .065);
  overflow: hidden;
}
.ic-calendar-toolbar,
.ic-agenda-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 12px;
}
.ic-calendar-toolbar h2,
.ic-agenda-head h2 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 710;
  letter-spacing: -.025em;
}
.ic-nav-today { height: 34px; padding: 0 12px; }
.ic-nav-icon { width: 34px; height: 34px; display: grid; place-items: center; }
.ic-nav-icon svg { width: 16px; height: 16px; }
.ic-legend {
  display: flex;
  gap: 17px;
  padding: 0 20px 15px;
  color: var(--text-tertiary);
  font-size: 11px;
}
.ic-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ic-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 99px;
  background: var(--text-muted);
}
.ic-dot.is-group { background: #6366f1; }
.ic-dot.is-individual { background: #06b6d4; }
.ic-dot.is-club { background: #f59e0b; }
.ic-dot.is-closed { background: #f43f5e; }
.ic-weekdays,
.ic-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ic-weekdays {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.ic-weekdays span {
  padding: 9px 8px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.ic-day {
  position: relative;
  min-height: 118px;
  padding: 9px;
  border: 0;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: background .16s ease, box-shadow .16s ease;
}
.ic-day:nth-child(7n) { border-right: 0; }
.ic-day:hover { z-index: 1; background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ic-day.is-outside { background: color-mix(in oklab, var(--surface-sunken) 62%, transparent); color: var(--text-muted); }
.ic-day.is-selected { z-index: 2; background: rgb(99 102 241 / .075); box-shadow: inset 0 0 0 2px rgb(99 102 241 / .58); }
.ic-day.is-closed {
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 8px, rgb(244 63 94 / .025) 8px, rgb(244 63 94 / .025) 16px),
    rgb(244 63 94 / .035);
}
.ic-day-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ic-day-number {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 740;
}
.ic-day.is-today .ic-day-number { background: #6756e8; color: white; box-shadow: 0 5px 12px rgb(103 86 232 / .25); }
.ic-day-total { color: var(--text-muted); font-size: 10px; font-weight: 680; }
.ic-day-holiday {
  display: block;
  margin: 5px 0 4px;
  color: #e11d48;
  font-size: 9.5px;
  font-weight: 790;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ic-day-chips { display: grid; gap: 3px; }
.ic-day-chip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1.2;
}
.ic-day-chip::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 99px; }
.ic-day-chip.is-group { color: #4f46e5; background: rgb(99 102 241 / .08); }
.ic-day-chip.is-group::before { background: #6366f1; }
.ic-day-chip.is-individual { color: #0e7490; background: rgb(6 182 212 / .09); }
.ic-day-chip.is-individual::before { background: #06b6d4; }
.ic-day-chip.is-club { color: #b45309; background: rgb(245 158 11 / .10); }
.ic-day-chip.is-club::before { background: #f59e0b; }
.ic-day.is-closed .ic-day-chip { opacity: .56; text-decoration: line-through; }
.ic-status-pill {
  padding: 6px 9px;
  border-radius: 999px;
  color: #15803d;
  background: rgb(34 197 94 / .10);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ic-status-pill.is-closed { color: #be123c; background: rgb(244 63 94 / .11); }
.ic-status-pill.is-partial { color: #b45309; background: rgb(245 158 11 / .12); }
.ic-selected-events { display: grid; gap: 7px; padding: 0 16px 12px; }
.ic-event-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface-sunken);
}
.ic-event-banner.is-closed { border-color: rgb(244 63 94 / .18); background: rgb(244 63 94 / .07); }
.ic-event-banner.is-open { border-color: rgb(34 197 94 / .18); background: rgb(34 197 94 / .07); }
.ic-event-banner svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; color: var(--text-tertiary); }
.ic-event-banner div { min-width: 0; display: grid; gap: 2px; }
.ic-event-banner strong { font-size: 11.5px; }
.ic-event-banner span { color: var(--text-secondary); font-size: 10.5px; line-height: 1.35; }
.ic-event-banner button { margin-left: auto; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 10px; font-weight: 740; }
.ic-day-controls {
  display: grid;
  gap: 10px;
  margin: 0 14px 12px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgb(99 102 241 / .055), transparent 65%),
    var(--surface-sunken);
}
.ic-day-controls-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ic-day-controls-head > div { min-width: 0; display: grid; gap: 2px; }
.ic-day-controls-head strong { color: var(--text); font-size: 11.5px; }
.ic-day-controls-head span { color: var(--text-tertiary); font-size: 9.5px; line-height: 1.35; }
.ic-day-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 9.5px;
  font-weight: 730;
}
.ic-day-more:hover { background: var(--surface-hover); }
.ic-day-more svg { width: 12px; height: 12px; }
.ic-day-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ic-day-choice {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface-elevated);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ic-day-choice:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgb(15 23 42 / .06); }
.ic-day-choice > svg { width: 13px; height: 13px; color: var(--text-muted); }
.ic-day-choice-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}
.ic-day-choice-icon svg { width: 14px; height: 14px; }
.ic-day-choice.is-open .ic-day-choice-icon { color: #15803d; background: rgb(34 197 94 / .11); }
.ic-day-choice.is-closed .ic-day-choice-icon { color: #be123c; background: rgb(244 63 94 / .10); }
.ic-day-choice.is-open:not(:disabled):hover { border-color: rgb(34 197 94 / .38); }
.ic-day-choice.is-closed:not(:disabled):hover { border-color: rgb(244 63 94 / .35); }
.ic-day-choice.is-active.is-open { border-color: rgb(34 197 94 / .24); background: rgb(34 197 94 / .075); }
.ic-day-choice.is-active.is-closed { border-color: rgb(244 63 94 / .22); background: rgb(244 63 94 / .065); }
.ic-day-choice:disabled { cursor: default; opacity: 1; }
.ic-day-choice-copy { min-width: 0; display: grid; gap: 1px; }
.ic-day-choice-copy strong,
.ic-day-choice-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-day-choice-copy strong { font-size: 10.5px; }
.ic-day-choice-copy small { color: var(--text-tertiary); font-size: 8.5px; }
.ic-day-choice-active {
  padding: 3px 5px;
  border-radius: 999px;
  color: #15803d;
  background: rgb(34 197 94 / .11);
  font-size: 7.5px;
  font-weight: 820;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.ic-day-choice.is-closed .ic-day-choice-active { color: #be123c; background: rgb(244 63 94 / .11); }
.ic-day-controls-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--text-tertiary);
  font-size: 8.5px;
  line-height: 1.35;
}
.ic-day-controls-note svg { width: 11px; height: 11px; flex: 0 0 auto; }
.ic-agenda-card { position: sticky; top: 14px; max-height: calc(100vh - 145px); }
.ic-agenda { max-height: calc(100vh - 275px); overflow: auto; padding: 0 14px 16px; }
.ic-agenda-empty {
  min-height: 250px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 11px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.ic-agenda-empty svg { width: 25px; height: 25px; opacity: .65; }
.ic-slot {
  margin-top: 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  overflow: hidden;
  background: var(--surface);
}
.ic-slot-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.ic-slot-button strong { font-size: 12px; }
.ic-slot-button span { color: var(--text-tertiary); font-size: 10px; }
.ic-session {
  position: relative;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--border-subtle);
}
.ic-session:last-child { border-bottom: 0; }
.ic-slot-more {
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 720;
  text-align: left;
}
.ic-slot-more:hover { background: var(--surface-hover); }
.ic-session.is-cancelled { opacity: .67; }
.ic-session.is-cancelled .ic-session-name { text-decoration: line-through; }
.ic-session-kind {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #4f46e5;
  background: rgb(99 102 241 / .10);
}
.ic-session-kind.is-individual { color: #0e7490; background: rgb(6 182 212 / .10); }
.ic-session-kind.is-club { color: #b45309; background: rgb(245 158 11 / .11); }
.ic-session-kind svg { width: 14px; height: 14px; }
.ic-session-main { min-width: 0; }
.ic-session-title-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ic-session-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 710; }
.ic-session-off { flex: 0 0 auto; padding: 2px 5px; border-radius: 5px; color: #be123c; background: rgb(244 63 94 / .11); font-size: 8.5px; font-weight: 820; text-transform: uppercase; }
.ic-session-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 3px; color: var(--text-tertiary); font-size: 9.5px; }
.ic-source-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px 0;
  color: var(--text-tertiary);
  font-size: 10.5px;
}
.ic-source-note > svg { width: 15px; height: 15px; color: #16a34a; }
.ic-source-note a { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 690; text-decoration: none; }
.ic-source-note a svg { width: 12px; height: 12px; }

/* Calendar modals */
#icEventModal,
#icSlotModal,
#icHistoryModal { z-index: 1260; }
.ic-modal-card { width: min(620px, calc(100vw - 28px)); max-width: 620px; border-radius: 20px; }
.ic-slot-modal-card { max-width: 700px; }
.ic-history-modal-card { max-width: 760px; }
.ic-modal-head { align-items: flex-start; background: linear-gradient(135deg, rgb(99 102 241 / .07), transparent); }
.ic-modal-head > div { display: grid; gap: 5px; }
.ic-modal-kicker { color: #6d5ce8; }
.ic-event-form { display: grid; gap: 14px; }
.ic-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ic-field { min-width: 0; display: grid; gap: 6px; }
.ic-field > span { color: var(--text-secondary); font-size: 11px; font-weight: 690; }
.ic-event-form .input { width: 100%; }
.ic-decision-help {
  display: flex;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgb(99 102 241 / .17);
  border-radius: 11px;
  background: rgb(99 102 241 / .07);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}
.ic-decision-help svg { width: 17px; height: 17px; flex: 0 0 auto; color: #6d5ce8; }
.ic-modal-spacer { flex: 1; }
.ic-slot-body,
.ic-history-list { display: grid; gap: 9px; }
.ic-slot-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface);
}
.ic-slot-row.is-cancelled { opacity: .7; }
.ic-slot-row .ic-session-kind { width: 34px; height: 34px; }
.ic-slot-row-main { min-width: 0; display: grid; gap: 3px; }
.ic-slot-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; }
.ic-slot-row-main span { color: var(--text-tertiary); font-size: 10.5px; }
.ic-slot-row-state { color: #15803d; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.ic-slot-row.is-cancelled .ic-slot-row-state { color: #be123c; }
.ic-history-item {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  background: var(--surface);
}
.ic-history-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: #6d5ce8; background: rgb(99 102 241 / .09); }
.ic-history-icon svg { width: 16px; height: 16px; }
.ic-history-copy { min-width: 0; display: grid; gap: 3px; }
.ic-history-copy strong { color: var(--text); font-size: 12px; }
.ic-history-copy span { color: var(--text-tertiary); font-size: 10.5px; }
.ic-history-copy p { margin: 2px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }

@media (max-width: 1180px) {
  .ic-hero { flex-wrap: wrap; }
  .ic-hero-actions { width: 100%; }
  .ic-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ic-workspace { grid-template-columns: minmax(0, 1fr) 330px; }
  .ic-day { min-height: 105px; padding: 7px; }
}
@media (max-width: 900px) {
  .ic-shell { padding: 18px 14px 28px; }
  .ic-workspace { grid-template-columns: 1fr; }
  .ic-agenda-card { position: static; max-height: none; scroll-margin-top: 76px; }
  .ic-agenda { max-height: none; }
  .ic-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ic-hero { align-items: stretch; flex-direction: column; }
  .ic-hero-actions { width: 100%; flex-wrap: wrap; }
  .ic-next-holiday { min-width: 0; flex: 1 0 100%; }
  .ic-hero-actions .ic-btn { flex: 1; justify-content: center; }
  .ic-kpis { grid-template-columns: 1fr 1fr; }
  .ic-kpi { padding: 11px; }
  .ic-kpi-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .ic-roster-note { align-items: flex-start; flex-wrap: wrap; gap: 3px 6px; }
  .ic-roster-note span { flex-basis: calc(100% - 20px); margin-left: 19px; margin-top: -2px; }
  .ic-calendar-toolbar { align-items: flex-start; }
  .ic-legend { gap: 9px; flex-wrap: wrap; }
  .ic-day { min-height: 82px; padding: 5px; }
  .ic-day-total, .ic-day-holiday { display: none; }
  .ic-day-chip { padding: 2px 3px; font-size: 0; }
  .ic-day-chip::before { width: 7px; height: 7px; flex-basis: 7px; }
  .ic-form-grid { grid-template-columns: 1fr; }
  .ic-source-note { align-items: flex-start; flex-wrap: wrap; }
  .ic-source-note a { margin-left: 23px; }
}

/* Payments — ported from Leads7 (2026-08-06). Same stylesheet rules as
   leads7.lougha.app → Payments, so the two pages stay one page. */
/* ════ Virements — payment verification (2026-06-12) ════
   Clones the Rest view conventions: .bulk-view shell, tickets-view-header,
   tickets-filter-chips account selector, tickets-table grids. Semantic soft
   fills only (--warning/--success/--info/--danger + *-soft); amounts in
   tabular-nums. Two stacked panels scroll together inside .vp-body. */

/* Pipeline-bar verification chip — shared with the inbox (every agent). */
.pv-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; flex-shrink: 0;
  cursor: default;
}
/* Outcome dashboard — status first, filter second. Each card answers what the
   state means instead of exposing the matcher's internal certainty jargon. */
.vp-status-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  padding: 4px 20px 16px;
}
.vp-state-card {
  min-width: 0; min-height: 78px;
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 12px 13px;
  border: 1px solid var(--border-subtle); border-radius: 13px;
  background: var(--surface); color: var(--text);
  text-align: left; cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease, background .14s ease;
}
.vp-state-card:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
.vp-state-card:active { transform: scale(.985); }
.vp-state-card.active { border-color: var(--text-secondary); box-shadow: 0 0 0 1px var(--text-secondary); }
.vp-state-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); color: var(--text-secondary);
}
.vp-state-icon [data-lucide] { width: 18px; height: 18px; }
.vp-state-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vp-state-title { font-size: 13px; font-weight: 750; color: var(--text); }
.vp-state-help { font-size: 11px; line-height: 1.3; color: var(--text-tertiary); }
.vp-state-count {
  min-width: 31px; font-size: 22px; font-weight: 750; line-height: 1;
  color: var(--text); text-align: right; font-variant-numeric: tabular-nums;
}
.vp-state-verified .vp-state-icon { background: var(--success-soft); color: var(--success); }
.vp-state-verified .vp-state-count { color: var(--success); }
.vp-state-cash .vp-state-icon { background: var(--info-soft); color: var(--info); }
.vp-state-cash .vp-state-count { color: var(--info); }
.vp-state-ambiguous .vp-state-icon { background: var(--warning-soft); color: var(--warning); }
.vp-state-ambiguous .vp-state-count { color: var(--warning); }
.vp-state-none .vp-state-icon { background: var(--surface-sunken); color: var(--text-tertiary); }
.vp-state-problem .vp-state-icon { background: var(--danger-soft); color: var(--danger); }
.vp-state-problem .vp-state-count { color: var(--danger); }
.vp-state-sure .vp-state-icon { background: var(--success-soft); color: var(--success); }
.vp-state-sure .vp-state-count { color: var(--success); }
.vp-state-card.active.vp-state-ambiguous { border-color: var(--warning); box-shadow: 0 0 0 1px var(--warning); background: var(--warning-soft); }
.vp-state-card.active.vp-state-cash { border-color: var(--info); box-shadow: 0 0 0 1px var(--info); background: var(--info-soft); }
.vp-state-card.active.vp-state-none { border-color: var(--text-tertiary); box-shadow: 0 0 0 1px var(--text-tertiary); background: var(--surface-sunken); }
.vp-state-card.active.vp-state-problem { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); background: var(--danger-soft); }
.vp-state-card.active.vp-state-sure { border-color: var(--success); box-shadow: 0 0 0 1px var(--success); background: var(--success-soft); }
/* Shell — header + chips are fixed, the two panels scroll as one column. */
.vp-month-input { width: 150px; font-variant-numeric: tabular-nums; }
.vp-body {
  flex: 1; overflow: auto;
  padding: 0 20px 16px;
  display: flex; flex-direction: column; gap: 20px;
  min-height: 0;
}
.vp-panel { display: flex; flex-direction: column; min-height: 0; }
.vp-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 8px;
}
.vp-panel-title {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 7px;
}
.vp-panel-title [data-lucide] { width: 14px; height: 14px; color: var(--text-tertiary); }
.vp-panel-count { color: var(--text-tertiary); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Wide tables scroll horizontally on 13" instead of squishing columns. */
.vp-table-wrap { overflow-x: auto; }
/* À vérifier queue — 8 columns. */
.vp-queue-table .tickets-row {
  grid-template-columns:
    minmax(140px, 1.2fr)  /* Client */
    80px                  /* Agent */
    100px                 /* Montant */
    92px                  /* Date */
    84px                  /* Compte */
    56px                  /* Reçu */
    minmax(270px, 1.8fr)  /* Diagnostic */
    minmax(260px, auto);  /* Actions */
  align-items: center;
  padding: 12px 16px;
}
/* Relevé bancaire — 7 columns. */
.vp-bank-table .tickets-row {
  grid-template-columns:
    92px                  /* Date */
    minmax(200px, 2fr)    /* Libellé */
    minmax(80px, 0.7fr)   /* Réf */
    90px                  /* Débit */
    100px                 /* Crédit */
    84px                  /* Compte */
    110px;                /* Statut */
  align-items: center;
  padding: 9px 16px;
}
.vp-queue-table .tickets-row-header,
.vp-bank-table .tickets-row-header {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 600;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
}
.vp-queue-row { position: relative; transition: background .12s ease, box-shadow .12s ease; }
.vp-queue-row:hover, .vp-bank-row:hover { background: var(--surface-hover); }
.vp-queue-row.vp-row-sure { box-shadow: inset 3px 0 0 var(--success); }
.vp-queue-row.vp-row-cash { box-shadow: inset 3px 0 0 var(--info); }
.vp-queue-row.vp-row-ambiguous { box-shadow: inset 3px 0 0 var(--warning); }
.vp-queue-row.vp-row-problem { box-shadow: inset 3px 0 0 var(--danger); }
.vp-queue-row.vp-row-none { box-shadow: inset 3px 0 0 var(--border); }
.vp-client { min-width: 0; }
.vp-agent { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-amount { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-amount.vp-debit { font-weight: 400; color: var(--text-muted); }
.vp-amount.vp-credit { color: var(--success); }
.vp-date { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-label { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-ref { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-muted { color: var(--text-tertiary); font-size: 12.5px; }
/* Plain-language row diagnosis. The title is the decision; the second line is
   the reason; the third line is the concrete candidate shown without jargon. */
.vp-sugg-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.vp-outcome { display: flex; align-items: flex-start; gap: 9px; min-width: 0; width: 100%; }
.vp-outcome-icon {
  width: 28px; height: 28px; flex: none; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--surface-sunken); color: var(--text-tertiary);
}
.vp-outcome-icon [data-lucide] { width: 15px; height: 15px; }
.vp-outcome-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vp-outcome-title { font-size: 12.5px; line-height: 1.3; font-weight: 750; color: var(--text); }
.vp-outcome-reason { font-size: 11.5px; line-height: 1.35; color: var(--text-secondary); }
.vp-outcome-bank {
  max-width: 100%; margin-top: 1px;
  font-size: 10.5px; font-weight: 650; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-outcome-sure .vp-outcome-icon { background: var(--success-soft); color: var(--success); }
.vp-outcome-cash .vp-outcome-icon { background: var(--info-soft); color: var(--info); }
.vp-outcome-ambiguous .vp-outcome-icon { background: var(--warning-soft); color: var(--warning); }
.vp-outcome-problem .vp-outcome-icon { background: var(--danger-soft); color: var(--danger); }
.vp-outcome-none .vp-outcome-icon { background: var(--surface-sunken); color: var(--text-tertiary); }
/* "Payé par" inline edit — a ghost input under the client name. Quiet at
   rest (placeholder dimmed, no chrome), reveals a hairline + ring on hover /
   focus so it reads as editable without cluttering the row. */
.vp-payer-edit {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px; min-width: 0;
}
.vp-payer-label {
  flex: none;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.vp-payer-input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  font-size: 12px; color: var(--text-secondary);
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 2px 6px;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, color .12s ease;
}
.vp-payer-input::placeholder { color: var(--text-tertiary); }
.vp-payer-edit:hover .vp-payer-input { border-color: var(--border-subtle); background: var(--surface-sunken); }
.vp-payer-input:focus {
  outline: none; color: var(--text);
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.vp-payer-input:disabled { opacity: 0.55; cursor: progress; }
.vp-account-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); white-space: nowrap;
}
/* Reçu cell — image thumbnail (click → lightbox) / pdf-file / text glyph. */
.vp-proof { display: flex; align-items: center; }
.vp-proof-thumb {
  width: 36px; height: 36px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border-subtle);
  cursor: zoom-in; display: block;
  transition: transform .08s ease, box-shadow .15s ease;
}
.vp-proof-thumb:hover { transform: scale(1.06); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.vp-proof-file {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
a.vp-proof-file:hover { background: var(--surface-hover); color: var(--accent); }
.vp-proof-file [data-lucide] { width: 14px; height: 14px; }
.vp-proof-text { color: var(--text-tertiary); }
/* Detach ✕ on the receipt (swat:B14) — corner chip, revealed on hover so the
   thumbnail stays clean; keyboard focus also reveals it. */
.vp-proof-media { position: relative; display: inline-flex; flex: none; }
.vp-proof-detach {
  position: absolute; top: -6px; right: -6px; z-index: 1;
  width: 16px; height: 16px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-elevated); color: var(--text-tertiary);
  font-size: 9px; line-height: 1; cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.vp-proof-media:hover .vp-proof-detach,
.vp-proof-detach:focus-visible { opacity: 1; }
.vp-proof-detach:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.vp-proof-detach:disabled { opacity: 0.5; cursor: not-allowed; }
@media (pointer: coarse) { .vp-proof-detach { opacity: 1; width: 18px; height: 18px; } }
/* Manual receipt upload — quiet ghost icon next to the no-media glyph.
   Low opacity at rest for discoverability without shouting; full on hover. */
.vp-upload-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-left: 6px;
  border-radius: 8px; border: 1px dashed var(--border-subtle);
  background: transparent; color: var(--text-secondary);
  cursor: pointer; opacity: 0.45;
  transition: opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.vp-upload-btn:hover {
  opacity: 1; background: var(--surface-hover);
  color: var(--accent); border-color: var(--accent);
}
.vp-upload-btn [data-lucide] { width: 14px; height: 14px; }
/* Inline montant editor (swat:B8a) — same ghost-input pattern as the payer
   editor. Placeholder rows (montant non lu) get a warning tint until fixed. */
.vp-amount-edit { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.vp-amount-input {
  width: 74px; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; text-align: right;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 2px 5px;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.vp-amount-input::placeholder { color: var(--warning); font-weight: 600; font-size: 11.5px; }
.vp-amount-edit:hover .vp-amount-input { border-color: var(--border-subtle); background: var(--surface-sunken); }
.vp-amount-input:focus {
  outline: none;
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.vp-amount-input:disabled { opacity: 0.55; cursor: progress; }
.vp-amount-pending .vp-amount-input { background: var(--warning-soft); border-color: transparent; }
.vp-amount-unit { font-size: 11px; font-weight: 600; color: var(--text-tertiary); flex: none; }
/* Warning badge in the Suggestion slot (swat:B8b/B13) — replaces the
   suggestion pill on rows whose amount was never read / extraction failed. */
.vp-flag-badge {
  display: inline-block; max-width: 100%;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: var(--warning-soft); color: var(--warning);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-flag-badge.vp-flag-failed { background: var(--danger-soft); color: var(--danger); }
/* Suggestion pill — the matcher's top candidate, score first. */
.vp-suggestion {
  display: inline-block; max-width: 100%;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: var(--info-soft); color: var(--info);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* (swat:V3) Certainty tiers — SURE is the only green, one-click state;
   ambiguous is deliberately neutral (an explanation, not an invitation). */
.vp-suggestion.vp-sugg-sure { background: var(--success-soft); color: var(--success); }
.vp-suggestion.vp-sugg-ambi {
  background: var(--surface-sunken); color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
/* Row actions — small labelled pills, hover lifts the semantic color. */
.vp-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vp-act-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); cursor: pointer;
  transition: transform .08s ease, background .12s ease, color .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.vp-act-btn [data-lucide] { width: 12px; height: 12px; }
.vp-act-btn:active { transform: scale(0.96); }
.vp-act-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vp-act-confirm { color: var(--success); }
.vp-act-confirm:hover { background: var(--success-soft); border-color: transparent; }
.vp-act-reject { color: var(--danger); }
.vp-act-reject:hover { background: var(--danger-soft); border-color: transparent; }
.vp-act-link:hover { background: var(--surface-hover); color: var(--text); }
.vp-act-details { color: var(--info); }
.vp-act-details:hover { background: var(--info-soft); border-color: transparent; }
/* ─── Per-payment evidence drawer ─── */
body.vp-detail-open { overflow: hidden; }
.vp-detail-drawer { position: fixed; inset: 0; z-index: 1400; }
.vp-detail-backdrop {
  position: absolute; inset: 0; border: 0; padding: 0;
  background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px);
  cursor: default; animation: vpDetailFade .16s ease;
}
.vp-detail-panel {
  position: absolute; top: 0; right: 0;
  width: min(620px, 96vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface-elevated, var(--surface));
  border-left: 1px solid var(--border-subtle);
  box-shadow: -18px 0 48px rgba(15, 23, 42, .18);
  animation: vpDetailSlide .22s cubic-bezier(.2,.8,.2,1);
}
.vp-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid var(--border-subtle);
}
.vp-detail-eyebrow {
  margin-bottom: 4px;
  font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.vp-detail-head h3 { margin: 0; font-size: 20px; line-height: 1.25; color: var(--text); }
.vp-detail-subtitle { margin-top: 5px; font-size: 12px; color: var(--text-tertiary); }
.vp-detail-close {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: transparent; color: var(--text-tertiary); cursor: pointer;
}
.vp-detail-close:hover { background: var(--surface-hover); color: var(--text); }
.vp-detail-close [data-lucide] { width: 18px; height: 18px; }
.vp-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 30px; }
.vp-detail-verdict {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px; border: 1px solid var(--border-subtle); border-radius: 12px;
  background: var(--surface-sunken);
}
.vp-detail-verdict-icon {
  width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--surface); color: var(--text-secondary);
}
.vp-detail-verdict-icon [data-lucide] { width: 18px; height: 18px; }
.vp-detail-verdict-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vp-detail-verdict-copy strong { font-size: 14px; color: var(--text); }
.vp-detail-verdict-copy span { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.vp-detail-verdict-sure { background: var(--success-soft); border-color: transparent; }
.vp-detail-verdict-sure .vp-detail-verdict-icon { color: var(--success); }
.vp-detail-verdict-ambiguous { background: var(--warning-soft); border-color: transparent; }
.vp-detail-verdict-ambiguous .vp-detail-verdict-icon { color: var(--warning); }
.vp-detail-verdict-problem { background: var(--danger-soft); border-color: transparent; }
.vp-detail-verdict-problem .vp-detail-verdict-icon { color: var(--danger); }
.vp-detail-section { margin-top: 22px; }
.vp-detail-section-title {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase;
  color: var(--text-secondary);
}
.vp-detail-section-title [data-lucide] { width: 14px; height: 14px; color: var(--text-tertiary); }
.vp-detail-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border-subtle); border-radius: 11px; overflow: hidden;
  background: var(--surface);
}
.vp-detail-fact {
  min-width: 0; display: flex; flex-direction: column; gap: 4px;
  padding: 11px 12px;
  border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.vp-detail-fact:nth-child(2n) { border-right: 0; }
.vp-detail-fact:nth-last-child(-n+2) { border-bottom: 0; }
.vp-detail-fact-wide { grid-column: 1 / -1; border-right: 0; }
.vp-detail-fact-wide:nth-last-child(-n+2) { border-bottom: 0; }
.vp-detail-fact-label {
  font-size: 9.5px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.vp-detail-fact-value {
  min-width: 0; font-size: 12.5px; line-height: 1.4; font-weight: 620; color: var(--text);
  overflow-wrap: anywhere;
}
.vp-detail-fact-muted { font-weight: 500; color: var(--text-tertiary); }
.vp-detail-receipt { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.vp-detail-receipt-image {
  width: 116px; height: 132px; object-fit: cover;
  border: 1px solid var(--border-subtle); border-radius: 11px;
  cursor: zoom-in; background: var(--surface-sunken);
}
.vp-detail-file, .vp-detail-no-proof {
  min-height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--border); border-radius: 11px;
  background: var(--surface-sunken); color: var(--text-secondary);
  font-size: 12px; font-weight: 650; text-decoration: none;
}
.vp-detail-file:hover { border-color: var(--accent); color: var(--accent); }
.vp-detail-file [data-lucide], .vp-detail-no-proof [data-lucide] { width: 24px; height: 24px; }
.vp-detail-grid-receipt { min-width: 0; }
.vp-detail-checks {
  display: flex; flex-direction: column; margin-top: 10px;
  border: 1px solid var(--border-subtle); border-radius: 11px; overflow: hidden;
}
.vp-detail-check {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
}
.vp-detail-check:last-child { border-bottom: 0; }
.vp-detail-check-icon {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--surface-sunken); color: var(--text-tertiary);
}
.vp-detail-check-icon [data-lucide] { width: 12px; height: 12px; }
.vp-detail-check-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vp-detail-check-copy strong { font-size: 12px; color: var(--text); }
.vp-detail-check-copy span { font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); }
.vp-detail-check-ok .vp-detail-check-icon { background: var(--success-soft); color: var(--success); }
.vp-detail-check-warn .vp-detail-check-icon { background: var(--warning-soft); color: var(--warning); }
.vp-detail-check-bad .vp-detail-check-icon { background: var(--danger-soft); color: var(--danger); }
.vp-detail-bank-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border: 1px solid var(--border-subtle); border-radius: 11px;
  background: var(--surface-sunken); color: var(--text-secondary);
  font-size: 12.5px; line-height: 1.45;
}
.vp-detail-bank-empty [data-lucide] { width: 18px; height: 18px; flex: none; color: var(--text-tertiary); }
.vp-detail-actions {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 13px 18px; border-top: 1px solid var(--border-subtle);
  background: var(--surface);
}
.vp-detail-actions .btn { min-height: 36px; }
.vp-detail-reject { color: var(--danger); }
/* Bank statut pills. */
.vp-status-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.vp-st-matched  { background: var(--success-soft); color: var(--success); }
.vp-st-open     { background: var(--info-soft); color: var(--info); }
.vp-st-suspect  { background: var(--warning-soft); color: var(--warning); }
.vp-st-excluded { background: var(--surface-sunken); color: var(--text-tertiary); }
.vp-st-debit    { color: var(--text-muted); background: transparent; }
/* Designed empty / loading / error state (mirrors .rest-empty). */
.vp-empty {
  padding: 28px 16px; text-align: center;
  color: var(--text-secondary); font-size: 13px;
}
/* One-line notice above the queue when an account chip is active: claims
   with no detected account stay visible on every chip. */
.vp-account-notice {
  padding: 8px 16px;
  font-size: 12px; color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle);
}
/* ─── Vérifiés / Rejetés — collapsible undo sections (swat:B6) ─── */
.vp-decided-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  padding: 4px 2px 8px; margin: 0;
  background: transparent; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: color .12s ease;
}
.vp-decided-toggle:hover { color: var(--text); }
.vp-decided-toggle [data-lucide] { width: 14px; height: 14px; color: var(--text-tertiary); }
.vp-decided-chev { transition: transform .15s ease; }
.vp-decided-toggle[aria-expanded="true"] .vp-decided-chev { transform: rotate(90deg); }
/* 7 columns: Client / Montant / Date / Crédit bancaire / Note / Décidé / Rouvrir */
.vp-decided-table .tickets-row {
  grid-template-columns:
    minmax(130px, 1.1fr)  /* Client */
    96px                  /* Montant */
    88px                  /* Date */
    minmax(160px, 1.5fr)  /* Crédit bancaire / Compte */
    minmax(110px, 1fr)    /* Note */
    minmax(110px, auto)   /* Décidé par */
    96px;                 /* Actions */
  align-items: center;
  padding: 8px 16px;
}
.vp-decided-bank { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vp-decided-bank-label {
  font-size: 12px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-decided-note {
  font-size: 12px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-decided-by { font-size: 12px; color: var(--text-secondary); min-width: 0; }
.vp-act-reopen { color: var(--info); }
.vp-act-reopen:hover { background: var(--info-soft); border-color: transparent; }
/* ─── Import modal ─── */
.vp-import-tabs {
  display: inline-flex; gap: 2px;
  padding: 3px; border-radius: 10px;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  margin: 4px 0 12px;
}
.vp-import-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  background: transparent; border: 0; color: var(--text-secondary);
  cursor: pointer; transition: background .12s ease, color .12s ease, transform .08s ease;
}
.vp-import-tab [data-lucide] { width: 14px; height: 14px; }
.vp-import-tab:active { transform: scale(0.97); }
.vp-import-tab.active {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.vp-import-pane { display: flex; flex-direction: column; gap: 8px; }
.vp-import-textarea { resize: vertical; font-size: 12.5px; font-family: inherit; }
.vp-import-hint { margin: 0; font-size: 11.5px; color: var(--text-tertiary); }
.vp-manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.vp-manual-wide { grid-column: 1 / -1; }
/* Dry-run preview — counts strip + ignored lines + first-rows mini-table. */
.vp-import-preview {
  margin-top: 14px; padding: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.vp-import-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; }
.vp-import-count {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 4px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border-subtle);
}
.vp-import-count-num { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.vp-import-count-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
.vp-cnt-ok .vp-import-count-num { color: var(--success); }
.vp-cnt-dup .vp-import-count-num { color: var(--text-tertiary); }
.vp-cnt-sus .vp-import-count-num { color: var(--warning); }
.vp-import-notice {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.4;
}
.vp-import-notice > [data-lucide] {
  width: 17px; height: 17px; flex: none; margin-top: 1px;
}
.vp-import-notice-copy { display: flex; flex-direction: column; gap: 2px; }
.vp-import-notice-copy strong { font-size: 12.5px; }
.vp-import-notice-copy span { color: var(--text-secondary); }
.vp-import-notice-duplicate {
  background: var(--warning-soft); color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
}
.vp-import-errors {
  padding: 8px 10px; border-radius: 8px;
  background: var(--danger-soft); color: var(--danger);
  font-size: 12px; display: flex; flex-direction: column; gap: 3px;
}
.vp-import-errors-title { font-weight: 700; }
.vp-prev-table {
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--surface); overflow: hidden;
  font-size: 12px;
}
.vp-prev-row {
  display: grid;
  grid-template-columns: 86px minmax(120px, 1fr) 80px 80px 58px;
  gap: 8px; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid var(--border-subtle);
}
.vp-prev-row:last-child { border-bottom: 0; }
.vp-prev-head {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary); background: var(--surface-sunken);
}
.vp-prev-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.vp-prev-flag { font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: var(--warning); }
.vp-prev-more { padding: 6px 10px; font-size: 11.5px; color: var(--text-tertiary); font-style: italic; }
/* ─── "Lier…" picker ─── */
.vp-link-card { width: min(560px, 92vw); }
.vp-link-claim {
  padding: 8px 12px; margin-bottom: 10px;
  background: var(--info-soft); color: var(--info);
  border-radius: 8px; font-size: 12.5px;
}
.vp-link-claim-name { font-weight: 700; }
.vp-link-claim-meta { font-variant-numeric: tabular-nums; }
.vp-link-list {
  margin-top: 10px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--surface);
}
.vp-link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 9px 12px; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--border-subtle);
  cursor: pointer; transition: background .1s ease;
}
.vp-link-row:last-child { border-bottom: 0; }
.vp-link-row:hover { background: var(--surface-hover); }
.vp-link-row:disabled { opacity: 0.5; cursor: wait; }
.vp-link-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vp-link-row-label { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-link-row-meta { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* (swat:V3) Credit also suggested for other pending claims — warn before linking. */
.vp-link-row-competition { font-size: 11px; font-weight: 600; color: var(--warning); }
.vp-link-row-amount { font-size: 13px; font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-link-row-amountwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
/* Partially consumed credit (swat:B7a) — the still-available slice. */
.vp-link-row-rest { font-size: 10.5px; font-weight: 600; color: var(--warning); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 13" laptops — tighter padding; tables already scroll via .vp-table-wrap. */
@media (max-width: 1280px) {
  .vp-body { padding: 0 12px 12px; gap: 16px; }
  .vp-status-overview { padding: 4px 12px 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .vp-queue-table .tickets-row, .vp-bank-table .tickets-row { padding: 9px 12px; }
}
@media (max-width: 720px) {
  .vp-status-overview { grid-template-columns: 1fr; }
  .vp-state-card { min-height: 68px; }
  .vp-detail-panel { width: 100vw; }
  .vp-detail-head { padding: 16px; }
  .vp-detail-body { padding: 14px 16px 24px; }
  .vp-detail-receipt { grid-template-columns: 1fr; }
  .vp-detail-receipt-image { width: 100%; height: 180px; }
  .vp-detail-file, .vp-detail-no-proof { min-height: 96px; }
  .vp-detail-actions { justify-content: stretch; }
  .vp-detail-actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-act-btn, .vp-import-tab, .vp-proof-thumb, .vp-state-card, .bubble .bubble-receipt-trigger { transition: none; }
  .vp-detail-backdrop, .vp-detail-panel { animation: none; }
}

/* Note @mentions (2026-08-04) — chips on the amber note card + the @ autocomplete in the popover */
.note-mentions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.note-mention-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--warning-soft);color:var(--text);border:1px solid var(--warning)}
.note-mention-chip.me{box-shadow:0 0 0 1px var(--wa) inset;border-color:var(--wa)}
.note-mention-chip.clickable{cursor:pointer}
.note-mention-chip.clickable:hover{background:var(--surface-hover)}
.note-mention-chip.done .note-mention-name{opacity:.55;text-decoration:line-through}
.note-mention-tick{color:var(--wa);font-weight:800}
.note-mention-ac{position:absolute;left:10px;right:10px;bottom:calc(100% - 8px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--elevation-overlay);overflow:hidden;z-index:41}
.note-mention-ac-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:0;cursor:pointer;font-size:13px;color:var(--text);text-align:left}
.note-mention-ac-item:hover{background:var(--surface-hover)}
.note-mention-ac-name{font-weight:600}
.note-mention-ac-sub{color:var(--muted);font-size:12px}

/* ── Moved session ─────────────────────────────────────────────────────────
   A club date that belongs to another teacher for that day only. Violet is the
   platform's "parked / scheduled elsewhere" colour (see the substitution
   pills) — deliberately NOT amber, which the team reads as "something is
   wrong". The club itself is untouched, so the row also says who it usually
   belongs to. */
.club-moved-chip {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600;
  background: #f1edff; color: #6e50c7; white-space: nowrap;
}
.club-usually-chip {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 500;
  background: var(--surface-sunken); color: var(--text-muted); white-space: nowrap;
}
[data-theme="dark"] .club-moved-chip { background: rgb(140 118 240 / .20); color: #b9a9f7; }

/* ── Payment-link picker (Whop) — ported from Leads7 PR #306 ─────────────
   Anchored above the 💳 button inside .compose (position:relative). Two
   stacked panes (list → message preview); only one is visible at a time so
   the popover keeps one fixed footprint. Every colour is a token so it
   themes in dark for free (gotcha #14) — the brand purple is the one
   deliberate constant, identical to Leads7. */
/* Provider brand colours (2026-09-23, Stripe + Whop) — the only constants
   here; they tint the small provider pill, never the chrome. */
:root {
  --brand-stripe: #635bff;
  --brand-whop: #fa4616;
  --brand-stripe-ink: #4f46e5;
  --brand-whop-ink: #c2410c;
}
[data-theme="dark"] {
  --brand-stripe-ink: #a5a1ff;
  --brand-whop-ink: #ff8a65;
}
.compose-pay-btn i { color: var(--brand-stripe); }
.compose-pay-btn.active { background: color-mix(in oklch, var(--brand-stripe) 14%, transparent); }
.paylink-pop {
  position: absolute;
  bottom: 56px;
  left: 12px;
  width: min(470px, calc(100% - 24px));
  max-height: 400px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 220;
  overflow: hidden;
}
.paylink-pop.hidden { display: none; }
.paylink-pane { display: flex; flex-direction: column; max-height: 400px; }
.paylink-pane.hidden { display: none; }
.paylink-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 9px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.paylink-brand {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--surface-sunken); color: var(--text-secondary);
  border: 1px solid var(--border);
  display: grid; place-items: center;
}
.paylink-brand i, .paylink-brand svg { width: 13px; height: 13px; }
.paylink-count {
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.paylink-x, .paylink-back {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 15px; line-height: 1;
  padding: 2px 4px;
}
.paylink-x { margin-left: auto; }
.paylink-search {
  display: flex; align-items: center; gap: 7px;
  margin: 9px 12px 0;
  height: 33px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.paylink-search i, .paylink-search svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.paylink-search input {
  flex: 1; border: 0; background: transparent; outline: 0;
  font: inherit; font-size: 13px; color: var(--text);
}
.paylink-chips { display: flex; gap: 5px; flex-wrap: wrap; padding: 8px 12px 0; }
.paylink-chips button {
  font-size: 11.5px; font-weight: 650;
  padding: 3.5px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary); cursor: pointer; font-family: inherit;
}
.paylink-chips button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.paylink-rows { overflow-y: auto; padding: 5px; }
.paylink-sec {
  font-size: 10.5px; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 9px 9px 5px;
}
.paylink-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: var(--radius-sm);
}
.paylink-row:hover { background: var(--surface-hover); }
.paylink-star { border: 0; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 0; }
.paylink-star.on { color: var(--warning); }
.paylink-star.locked { cursor: default; }
/* Provider pill — fixed min width so the price column stays aligned. */
.paylink-prov {
  flex-shrink: 0;
  min-width: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 20px; padding: 0 7px;
  border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.paylink-prov::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.paylink-prov.stripe {
  color: var(--brand-stripe-ink);
  background: color-mix(in oklab, var(--brand-stripe) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-stripe) 28%, transparent);
}
.paylink-prov.whop {
  color: var(--brand-whop-ink);
  background: color-mix(in oklab, var(--brand-whop) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-whop) 26%, transparent);
}
.paylink-prov.stripe::before { background: var(--brand-stripe); }
.paylink-prov.whop::before { background: var(--brand-whop); }
/* Stripe rows: hairline accent on the left so the favorite provider reads
   as one block while scrolling. */
.paylink-row[data-provider="stripe"] { box-shadow: inset 2px 0 0 color-mix(in oklab, var(--brand-stripe) 55%, transparent); }
@media (max-width: 1024px) {
  .paylink-prov { min-width: 0; padding: 0 6px; }
}
.paylink-name { flex: 1; min-width: 0; }
.paylink-name b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paylink-name small { display: block; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paylink-flag {
  font-size: 9.5px; font-weight: 800; border-radius: 4px;
  padding: 1px 4px; margin-left: 5px;
  background: var(--danger-soft); color: var(--danger);
}
.paylink-price { font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 62px; text-align: right; }
.paylink-btn {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); height: 28px; padding: 0 10px;
  font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; color: var(--text-secondary);
}
.paylink-btn:hover { background: var(--surface-hover); }
.paylink-btn.primary { background: var(--wa); border-color: var(--wa); color: #fff; }
.paylink-btn.primary:hover { background: var(--wa-dark); }
.paylink-foot {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border);
  padding: 8px 12px;
  background: var(--surface-sunken);
  font-size: 11.5px; color: var(--text-tertiary);
}
.paylink-foot > span:first-child { flex: 1; min-width: 0; }
.paylink-langs { display: flex; gap: 3px; }
.paylink-langs button {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); height: 23px; padding: 0 7px;
  font-size: 10.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; color: var(--text-secondary);
}
.paylink-langs button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.paylink-preview-body { padding: 10px 12px; overflow-y: auto; }
.paylink-text {
  width: 100%; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--text);
  font: inherit; font-size: 13px; line-height: 1.5;
  padding: 9px 11px;
}
.paylink-text.rtl { direction: rtl; text-align: right; }
.paylink-empty { padding: 18px 12px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

/* ---- Group delivery receipts (2026-09-05) — ✓✓ N/M chip + names popover ---- */
.meta-receipt { margin-left: 4px; font-size: 10.5px; font-weight: 600; opacity: .85; cursor: pointer; white-space: nowrap; }
.meta-receipt:hover { text-decoration: underline; }
.meta-receipt-pending { opacity: .45; }
.meta-receipt-none { color: var(--warning); opacity: 1; }
.rcpt-pop { position: fixed; z-index: 10050; width: 280px; max-height: 60vh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--elevation-overlay, 0 8px 24px rgba(0,0,0,.18)); padding: 8px 10px; font-size: 12.5px; }
.rcpt-pop-title { font-weight: 700; margin-bottom: 6px; }
.rcpt-sec { margin-top: 6px; }
.rcpt-sec-h { font-weight: 600; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.rcpt-row { padding: 2px 0; }
.rcpt-empty { color: var(--muted); }
.rcpt-none .rcpt-row:not(.rcpt-empty) { color: var(--danger); font-weight: 600; }
.rcpt-note { margin-top: 6px; font-size: 11px; color: var(--muted); }

/* ─── CRM state strip (2026-09-07) ──────────────────────────────────────
   The second line under the source chips. That row answers "which platform
   is this conversation on"; this one answers "what is this person to us":
   Active · Pending · Renew · Ticket · New.

   Deliberately ONE SIZE DOWN from .one-inbox-source — same shape, same
   tokens, smaller type and a smaller dot — so the sources stay the primary
   read and five chips never shout over four. Colour lives on the dot and on
   the pressed state only; every value is a token, so dark mode flips for
   free (app.css gotcha #14: never hardcode a colour here). */
.one-inbox-sources:has(+ .one-inbox-states) { margin-bottom: 4px; }
.one-inbox-states {
  /* Content-sized tracks, not five equal columns: the sidebar gives this
     strip 287px and "Pending" needs more room than "New". Equal columns
     truncated three of the labels into "Act…" / "Pend…". SIX chips at 9px do
     not fit that 287px at all — measured, every label clipped — so this row
     sits at 8.5px with a 4px dot. Dropping the dots would have bought 9.5px,
     but the dots are what make it read as the same family as the row above. */
  display: grid; grid-template-columns: repeat(6, minmax(0, auto)); gap: 2px;
  margin: 0 0 10px;
}
.one-inbox-state {
  min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 3px 4px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-tertiary); font-size: 8.5px; white-space: nowrap;
  overflow: hidden; width: 100%; appearance: none; font-family: inherit; line-height: 1.5; cursor: pointer;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.one-inbox-state:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.one-inbox-state:active { background: var(--surface-active); }
.one-inbox-state[aria-pressed="true"] { color: var(--text); font-weight: 650; box-shadow: inset 0 0 0 1px currentColor; }
.one-inbox-state[aria-pressed="true"] .one-inbox-state-dot { transform: scale(1.25); }
.one-inbox-state-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.one-inbox-state strong { flex: 0 0 auto; font-size: 8px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.one-inbox-state[aria-pressed="true"] strong { color: var(--text); }
.one-inbox-state-dot { width: 4px; height: 4px; border-radius: 50%; flex: 0 0 auto; background: var(--text-muted); }
.one-inbox-state-active  .one-inbox-state-dot { background: var(--success); }
.one-inbox-state-pending .one-inbox-state-dot { background: var(--warning); }
.one-inbox-state-in_process .one-inbox-state-dot { background: var(--lougha); }
.one-inbox-state-renew   .one-inbox-state-dot { background: var(--info); }
.one-inbox-state-ticket  .one-inbox-state-dot { background: var(--danger); }
.one-inbox-state-new     .one-inbox-state-dot { background: var(--violet-500); }
.one-inbox-state-active[aria-pressed="true"]  { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 58%, var(--border)); }
.one-inbox-state-pending[aria-pressed="true"] { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 58%, var(--border)); }
.one-inbox-state-in_process[aria-pressed="true"] { background: var(--lougha-soft); border-color: color-mix(in oklab, var(--lougha) 58%, var(--border)); }
.one-inbox-state-renew[aria-pressed="true"]   { background: var(--info-soft); border-color: color-mix(in oklab, var(--info) 58%, var(--border)); }
.one-inbox-state-ticket[aria-pressed="true"]  { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 58%, var(--border)); }
.one-inbox-state-new[aria-pressed="true"]     { background: color-mix(in oklab, var(--violet-500) 12%, transparent); border-color: color-mix(in oklab, var(--violet-500) 58%, var(--border)); }

/* Same breakpoint the source chips use: below ~1140px the sidebar is too
   narrow for five words, so each label falls back to its short form instead
   of truncating into "Pend…". */
@media (min-width: 769px) and (max-width: 1140px) {
  .one-inbox-state-label { font-size: 0; }
  .one-inbox-state-label::after { content: attr(data-short); font-size: 8.5px; }
}

/* Counts off the chips — Ayoub, 2026-09-07: "la da3i ibano jouj marrat".
   The filter pill directly underneath already prints the size of whatever is
   selected (`countPill.textContent = chats.length`, and it is set AFTER both
   the source and the state filter have run), so a number on the chip was the
   same figure twice. Hidden, not deleted: the value still feeds each chip's
   tooltip and aria-label, and one line brings it back.
   ONE exception, his: "Mes notes" keeps its 31 — that count is not a filter
   size, it is how many chats are still waiting on YOU, and it has to be
   readable without selecting anything. Dropping the rest also bought the top
   row enough width to stop truncating into "Suppor…". */
.one-inbox-source:not(.one-inbox-source-notes) strong { display: none; }
.one-inbox-state strong { display: none; }

/* Cold chat opens keep the conversation layout visible while history arrives. */
.chat-open-loading { display: flex; flex-direction: column; gap: 18px; width: 100%; margin-top: auto; padding: 20px 0; }
.chat-open-loading-label { align-self: center; color: var(--text-muted); font-size: 12px; }
.chat-open-loading-line { display: block; width: 44%; max-width: 340px; height: 48px; border-radius: 12px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.chat-open-loading-line:nth-child(odd) { align-self: flex-end; width: 32%; }
.chat-open-loading-line:last-child { height: 70px; width: 52%; }

/* Independent Inbox reads keep available channels usable during an outage. */
.inbox-read-status { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; flex:0 0 auto; padding:7px 12px; font-size:12px; color:var(--text-muted); background:var(--surface-sunken); border-bottom:1px solid var(--border-subtle); }
.inbox-read-retry { font:inherit; cursor:pointer; border:1px solid var(--border-subtle); border-radius:6px; padding:3px 7px; background:var(--surface); color:var(--text-primary); }
.inbox-read-retry:focus-visible { outline:2px solid var(--brand, #2563eb); outline-offset:2px; }

/* header pencil → name + phone (HubSpot) in one form */
.profile-name-edit-form{flex-wrap:wrap}
.profile-phone-edit-input{font-variant-numeric:tabular-nums}
.profile-phone-edit-input:disabled{opacity:.55;cursor:not-allowed}

/* Header pencil edit form (2026-09-12): lives under the name in the chat header */
.chat-header-edit-form{justify-content:flex-start;margin:0;gap:6px}
.chat-header-edit-form .profile-name-edit-input{font-size:14px;font-weight:500;padding:3px 8px;max-width:200px}
.profile-phone-link-btn{font-size:12px;padding:3px 10px}

/* ─── Inbox group picker ────────────────────────────────────────────────
   Student-first enrolment: launched from Contact Profile → Groups. */
.inbox-group-picker-modal {
  max-width: 880px;
  max-height: min(90vh, 820px);
}
.inbox-group-picker-head { align-items: flex-start; }
.inbox-group-picker-head > div:first-child { min-width: 0; }
.inbox-group-picker-head p {
  margin: 5px 0 0 28px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.35;
}
.inbox-group-picker-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
}
.igp-notice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-elevated));
}
.igp-notice > [data-lucide] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--accent);
}
.igp-notice div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.igp-notice strong { color: var(--text); font-size: 12px; }
.igp-notice span { color: var(--text-tertiary); font-size: 11px; }
.igp-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(110px, 1fr));
  gap: 10px;
  align-items: end;
}
.igp-filters label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.igp-filters label > span {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.igp-filters .input { width: 100%; height: 38px; font-size: 12px; }
.igp-input-icon {
  display: flex;
  align-items: center;
  height: 38px;
  padding-left: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  transition: border-color .15s, box-shadow .15s;
}
.igp-input-icon:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}
.igp-input-icon > [data-lucide] { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-tertiary); }
.igp-input-icon .input {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}
.igp-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: var(--surface-sunken);
}
.igp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.igp-tab [data-lucide] { width: 13px; height: 13px; }
.igp-tab:hover { color: var(--text); }
.igp-tab.active {
  color: var(--accent);
  background: var(--surface-elevated);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.igp-result-meta {
  min-height: 16px;
  margin-bottom: -6px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 550;
}
/* Class cards, same anatomy as the Book class grid: the agent reads a class
   the same way wherever they are. Two up at 880px, one up when the modal
   narrows — never squeezed columns. */
.igp-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 130px;
  /* Cards are taller than the old rows — keep two rows visible on a 13"
     without letting the modal outgrow its own max-height. */
  max-height: min(46vh, 430px);
  overflow-y: auto;
  padding: 1px 3px 2px 1px;
}
.igp-results > .igp-loading,
.igp-results > .igp-empty,
.igp-results > .igp-scope { grid-column: 1 / -1; }
.igp-group-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: stretch;
  padding: 11px 12px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-elevated);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.igp-group-row:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 3%, var(--surface-elevated));
  transform: translateY(-1px);
}
.igp-group-row.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-elevated));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}
.igp-group-row.igp-needs-selection {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-elevated));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 16%, transparent);
}
/* Card head — name, status, "already in it", and the fit badge. */
.igp-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.igp-card-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.igp-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-tertiary) 12%, var(--surface-elevated));
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .035em;
  white-space: nowrap;
}
.igp-status-open {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-elevated));
  color: var(--success);
}
.igp-status-active {
  background: color-mix(in srgb, var(--info) 13%, var(--surface-elevated));
  color: var(--info);
}
.igp-status-linked {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-elevated));
  color: var(--accent);
}
/* Fit badge — the share of the filters you set that this class satisfies. */
.igp-match {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 2px 6px 3px;
  border-radius: 9px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.igp-match-num { font-size: 12.5px; font-weight: 750; }
.igp-match-cap { font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.igp-match-hi { background: color-mix(in srgb, var(--success) 15%, var(--surface-elevated)); color: var(--success); }
.igp-match-mid { background: color-mix(in srgb, var(--warning) 16%, var(--surface-elevated)); color: var(--warning); }
.igp-match-lo { background: color-mix(in srgb, var(--text-tertiary) 13%, var(--surface-elevated)); color: var(--text-tertiary); }
/* Fact grid — same fields, same order as the Book class card. */
/* Fixed 3 columns rather than auto-fit, so the two long values (a two-day
   schedule, "~6 mo · 19 Mar 2027") can claim the width they need instead of
   ellipsing at every card size. */
.igp-card-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 12px;
}
.igp-kv-wide { grid-column: span 2; }
.igp-kv { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.igp-k {
  color: var(--text-tertiary);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.igp-v {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.igp-v-num { font-variant-numeric: tabular-nums; }
/* A 4-day week reads in full on the picker card. */
.igp-kv-wide .igp-v { white-space: normal; overflow: visible; line-height: 1.35; }
.igp-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid var(--border-subtle);
}
.igp-card-linked { border-style: dashed; }
.igp-select-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 72px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 650;
}
.igp-select-indicator [data-lucide] { width: 16px; height: 16px; }
.igp-group-row.selected .igp-select-indicator { color: var(--accent); }
/* Scope chooser — opens directly under the group you just selected, so the
   "one class / next two / always" decision is read against that row. */
.igp-scope {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 11px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-elevated));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}
.igp-scope-note { font-size: 11px; color: var(--text-tertiary); }
.igp-scope-note-warn { color: var(--warning); }
.igp-scope-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.igp-scope-choice:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.igp-scope-choice.selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.igp-scope-choice input { margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.igp-scope-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.igp-scope-copy strong { color: var(--text); font-size: 11.5px; }
.igp-scope-copy small { color: var(--text-tertiary); font-size: 10px; line-height: 1.45; }
/* The class week + "choose the days" (2026-09-28): a 4-day class offers every
   upcoming class as a tickable chip, each with its own day and time. */
.igp-scope-week { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.igp-scope-week [data-lucide] { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; }
.igp-pick-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 9px 4px 33px; }
.igp-pick-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-elevated); color: var(--text); font-size: 11px;
  font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, border-color .15s;
}
.igp-pick-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.igp-pick-chip.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.igp-pick-chip.disabled { opacity: .45; cursor: not-allowed; }
.igp-pick-chip input { margin: 0; accent-color: var(--accent); cursor: inherit; }
@media (max-width: 640px) { .igp-pick-list { padding-left: 9px; } }
/* Trial = how many classes + which day(s) (2026-09-28). */
.igp-trial-picker { display: flex; flex-direction: column; gap: 8px; padding: 2px 9px 6px 33px; }
.igp-trial-picker .igp-pick-list { padding: 0; }
.igp-trial-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.igp-trial-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.igp-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface-elevated); }
.igp-seg-btn { min-width: 34px; padding: 4px 10px; border: 0; background: transparent; color: var(--text); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.igp-seg-btn + .igp-seg-btn { border-left: 1px solid var(--border); }
.igp-seg-btn.active { background: var(--accent); color: var(--accent-fg); }
.igp-pick-chip:disabled { cursor: not-allowed; }
.igp-pick-tag { padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 640px) { .igp-trial-picker { padding-left: 9px; } }
.igp-loading, .igp-empty {
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-tertiary);
  font-size: 12px;
}
.igp-loading [data-lucide] { width: 16px; height: 16px; animation: spin 1s linear infinite; }
.igp-empty { flex-direction: column; text-align: center; padding: 24px; }
.igp-empty > [data-lucide] { width: 24px; height: 24px; color: var(--text-tertiary); }
.igp-empty strong { color: var(--text); font-size: 13px; }
.igp-empty span { font-size: 11px; }
.inbox-group-picker-foot { align-items: center; }
.igp-selected-summary {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 11px;
}
.igp-selected-summary > [data-lucide] { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.igp-selected-summary div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.igp-selected-summary strong, .igp-selected-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.igp-selected-summary strong { color: var(--text); font-size: 11px; }
.inbox-group-picker-foot .btn { flex: 0 0 auto; }
.inbox-group-picker-foot .btn [data-lucide] { width: 14px; height: 14px; }
#igpConfirmBtn.igp-awaiting-selection {
  border-color: color-mix(in srgb, var(--warning) 52%, var(--border));
  background: var(--warning-soft);
  color: var(--warning);
}
#igpConfirmBtn.igp-awaiting-selection:hover {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
}

/* CTA inside the Contact Profile Groups accordion. */
.profile-group-add-cta {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin-bottom: 9px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-elevated));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.profile-group-add-cta:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-elevated));
  transform: translateY(-1px);
}
.profile-group-add-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--accent);
  color: white;
}
.profile-group-add-icon [data-lucide] { width: 15px; height: 15px; }
.profile-group-add-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile-group-add-copy strong { color: var(--text); font-size: 11.5px; }
.profile-group-add-copy small { color: var(--text-tertiary); font-size: 9.5px; }
.profile-group-add-cta > [data-lucide] { width: 14px; height: 14px; color: var(--accent); }
/* Booking a trial is the lighter-weight of the two doors — same shape, a
   quieter surface, so "Add to a group" stays the primary action. */
.profile-group-book-cta {
  border-color: var(--border);
  background: var(--surface-elevated);
}
.profile-group-book-cta:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-elevated));
}
.profile-group-book-cta .profile-group-add-icon {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-elevated));
  color: var(--accent);
}
.profile-group-remove-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.profile-group-remove-btn:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: var(--danger-soft);
}
.profile-group-remove-btn:disabled { opacity: .5; cursor: wait; }
.profile-group-remove-btn [data-lucide] { width: 14px; height: 14px; }

@media (max-width: 760px) {
  .inbox-group-picker-modal { max-height: 96vh; margin: 8px; }
  .igp-filters { grid-template-columns: 1fr 1fr; }
  .igp-search-field { grid-column: 1 / -1; }
  .igp-results { max-height: 290px; }
  .inbox-group-picker-foot { flex-wrap: wrap; }
  .igp-selected-summary { flex-basis: 100%; }
}

@media (max-width: 480px) {
  .igp-filters { grid-template-columns: 1fr; }
  .igp-search-field { grid-column: auto; }
  .igp-results { grid-template-columns: 1fr; }
  .igp-card-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Inbox person filter — "Assigned to" is its own dimension
 * The chip sits between the filter label and the count, so the button reads
 * "Awaiting reply · Maryam · 12": both filters, and what they leave. */
.filter-btn.has-assignee { justify-content: flex-start; }
.filter-btn.has-assignee #filterLabel {
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-assignee-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0;
  padding: 1px 4px 1px 2px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600; line-height: 1;
}
.filter-assignee-dot {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
}
.filter-assignee-name {
  min-width: 0; max-width: 84px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-assignee-x {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; cursor: pointer; opacity: 0.7;
  transition: opacity var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.filter-assignee-x:hover { opacity: 1; background: var(--surface-hover); }

/* A person row is a toggle, not a choice among the rows above it — so it gets
 * a tick instead of the single-choice highlight. */
#filterMenu .dropdown-item.asg-on { color: var(--accent); font-weight: 600; }
#filterMenu .dropdown-item.asg-on::after {
  content: "✓"; flex: 0 0 auto; margin-left: 6px; font-size: 12px; font-weight: 700;
}
#filterMenu .dropdown-item[data-filter="assigned-me"].asg-on { display: flex; align-items: center; justify-content: space-between; }

/* The counts are repainted on every render now (they follow the main filter),
 * so their colours cannot stay frozen in the inline style they were built
 * with — and the inline indigo was unreadable in dark. */
#filterAssignedList .assigned-count-pill {
  background: var(--surface-hover) !important; color: var(--text-tertiary) !important;
}
#filterAssignedList .assigned-count-pill.has-chats {
  background: var(--accent-soft) !important; color: var(--accent) !important;
}
/* ── /Inbox person filter */
/* ── CRM views — one button, one menu (2026-09-18) ──────────────────────────
   The row used to be a 7-track grid of chips. Ayoub emptied it: it now holds a
   single control, so it is a flex row and the button sizes to its content —
   three dots when nothing is picked, dot + label once something is.
   Every colour is a token; dark mode needs no rules of its own. */
.one-inbox-states {
  display: flex; grid-template-columns: none; gap: 4px;
  align-items: center; margin: 0 0 10px;
}
.one-inbox-states .one-inbox-state-more {
  width: auto; gap: 5px; padding: 3px 7px; font-size: 9.5px;
  color: var(--text-secondary);
}
.one-inbox-state-more:hover { background: var(--surface-hover); color: var(--text); }
.one-inbox-state-more[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }
/* The dots are drawn as one element so the button keeps a single flex child
   when it also has to carry a label. */
.one-inbox-more-dots {
  flex: 0 0 auto; width: 13px; height: 3px; border-radius: 999px;
  background:
    radial-gradient(circle 1.5px at 1.5px 50%, currentColor 99%, transparent 0),
    radial-gradient(circle 1.5px at 6.5px 50%, currentColor 99%, transparent 0),
    radial-gradient(circle 1.5px at 11.5px 50%, currentColor 99%, transparent 0);
  color: var(--text-tertiary);
}
.one-inbox-state-more:hover .one-inbox-more-dots,
.one-inbox-state-more[aria-expanded="true"] .one-inbox-more-dots { color: var(--text); }
.one-inbox-more-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.one-inbox-more-current:empty { display: none; }
.one-inbox-state-more:not([aria-pressed="true"]) .one-inbox-more-current { font-weight: 500; color: var(--text-tertiary); }
/* Picked view → the button wears its colour, so the row answers "what am I
   looking at" without opening the menu. */
.one-inbox-state-more[aria-pressed="true"] { color: var(--text); box-shadow: inset 0 0 0 1px currentColor; }
.one-inbox-state-more[data-more-view="active"]       { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 58%, var(--border)); }
.one-inbox-state-more[data-more-view="pending"]      { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 58%, var(--border)); }
.one-inbox-state-more[data-more-view="in_process"]   { background: var(--lougha-soft); border-color: color-mix(in oklab, var(--lougha) 58%, var(--border)); }
.one-inbox-state-more[data-more-view="renew"]        { background: var(--info-soft); border-color: color-mix(in oklab, var(--info) 58%, var(--border)); }
.one-inbox-state-more[data-more-view="ticket"]       { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 58%, var(--border)); }
.one-inbox-state-more[data-more-view="new"]          { background: color-mix(in oklab, var(--violet-500) 12%, transparent); border-color: color-mix(in oklab, var(--violet-500) 58%, var(--border)); }
.one-inbox-state-more[data-more-view="first_today"]  { background: var(--info-soft); border-color: color-mix(in oklab, var(--info) 58%, var(--border)); }
.one-inbox-state-more[data-more-view="live_now"]     { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 58%, var(--border)); }
.one-inbox-state-more[data-more-view="unread"]       { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 58%, var(--border)); }
.one-inbox-state-more[data-more-view="active"]      .one-inbox-more-dots { color: var(--success); }
.one-inbox-state-more[data-more-view="pending"]     .one-inbox-more-dots { color: var(--warning); }
.one-inbox-state-more[data-more-view="in_process"]  .one-inbox-more-dots { color: var(--lougha); }
.one-inbox-state-more[data-more-view="renew"]       .one-inbox-more-dots { color: var(--info); }
.one-inbox-state-more[data-more-view="ticket"]      .one-inbox-more-dots { color: var(--danger); }
.one-inbox-state-more[data-more-view="new"]         .one-inbox-more-dots { color: var(--violet-500); }
.one-inbox-state-more[data-more-view="first_today"] .one-inbox-more-dots { color: var(--info); }
.one-inbox-state-more[data-more-view="live_now"]    .one-inbox-more-dots { color: var(--danger); }
.one-inbox-state-more[data-more-view="unread"]      .one-inbox-more-dots { color: var(--warning); }

.dropdown-menu.one-inbox-more-menu {
  position: fixed; left: 0; top: 0; right: auto; z-index: 9999;
  width: 238px; max-height: min(70vh, 520px); overflow-y: auto; padding: 4px;
}
.one-inbox-more-title {
  padding: 7px 8px 4px; font-size: 10px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.one-inbox-more-title + .one-inbox-more-item { margin-top: 0; }
.dropdown-menu.one-inbox-more-menu > .one-inbox-more-title:not(:first-child) {
  margin-top: 4px; border-top: 1px solid var(--border-subtle); padding-top: 8px;
}
.dropdown-item.one-inbox-more-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.one-inbox-more-item .one-inbox-state-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--text-muted); }
.one-inbox-more-active      .one-inbox-state-dot { background: var(--success); }
.one-inbox-more-pending     .one-inbox-state-dot { background: var(--warning); }
.one-inbox-more-in_process  .one-inbox-state-dot { background: var(--lougha); }
.one-inbox-more-renew       .one-inbox-state-dot { background: var(--info); }
.one-inbox-more-ticket      .one-inbox-state-dot { background: var(--danger); }
.one-inbox-more-new         .one-inbox-state-dot { background: var(--violet-500); }
.one-inbox-more-first_today .one-inbox-state-dot { background: var(--info); }
.one-inbox-more-live_now    .one-inbox-state-dot { background: var(--danger); }
.one-inbox-more-unread      .one-inbox-state-dot { background: var(--warning); }
/* Green = really in the room; red = the class runs and they are not. Same two
   colours as the pills on the rows, so the menu and the list agree. */
.one-inbox-more-in_class     .one-inbox-state-dot { background: var(--success); }
.one-inbox-more-live_missing .one-inbox-state-dot { background: var(--danger); }
/* ── Groups views (2026-09-22, Ayoub) ───────────────────────────────
   The bar sits where the Inbox's does — between the source chips and the
   "All conversations" dropdown — so it inherits that column's gutter and
   needs no padding of its own. Two rows: the three questions of the day wear
   their number, the button under them opens the five that describe what a
   group is. Reusing .one-inbox-state means a restyle of one strip restyles
   both, and every colour is a token, so dark mode needs no rules here. */
#grpStates {
  /* 2x2, not a single row of four. Ayoub asked for bigger chips, and at any
     size above 8.5px the three full labels need 306px of the 267 the sidebar
     gives this column — so they wrap whatever we do. Wrapping into a grid
     with the button in the fourth cell costs ONE extra row instead of two,
     and every chip gets a 131px cell to breathe in. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px; margin: 0 0 8px;
}
/* ~30% up from the Inbox strip's 8.5px: still a secondary row, but a number
   you can read without leaning in. */
#grpStates .one-inbox-state {
  width: 100%; min-width: 0; font-size: 11px; padding: 4px 7px; gap: 5px;
}
#grpStates .one-inbox-state-dot { width: 5px; height: 5px; }
#grpStates .one-inbox-state strong { font-size: 10px; }
#grpStates .one-inbox-state-more { width: 100%; justify-content: flex-start; font-size: 11px; }
#grpStates .one-inbox-more-dots { width: 15px; }
/* app.css hides the count on the Inbox chips — Ayoub, 2026-09-07: "la da3i
   ibano jouj marrat", because the filter pill under them prints the size of
   whatever is selected. Here three different views are on screen at once and
   the pill can only speak for one, so the numbers come back — for this bar
   only, and his Inbox decision stands untouched. */
#grpStates .one-inbox-state strong { display: inline-block; }
/* Between 769 and 1140px app.css swaps every chip label for its short form,
   because the Inbox strip puts six of them on ONE 267px row. This bar gives
   each chip half that row — 131px, where "Tsennaw jawab" measures 122 — so
   the full word stays. data-short is still set on the element: it is the
   fallback the moment anyone lays this bar out in a single row again. */
@media (min-width: 769px) and (max-width: 1140px) {
  #grpStates .one-inbox-state-label { font-size: 11px; }
  #grpStates .one-inbox-state-label::after { content: none; }
}
#grpStates .one-inbox-state-grp-live_now .one-inbox-state-dot { background: var(--danger); }
#grpStates .one-inbox-state-grp-today    .one-inbox-state-dot { background: var(--info); }
#grpStates .one-inbox-state-grp-waiting  .one-inbox-state-dot { background: var(--warning); }
#grpStates .one-inbox-state-grp-live_now[aria-pressed="true"] { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 58%, var(--border)); }
#grpStates .one-inbox-state-grp-today[aria-pressed="true"]    { background: var(--info-soft); border-color: color-mix(in oklab, var(--info) 58%, var(--border)); }
#grpStates .one-inbox-state-grp-waiting[aria-pressed="true"]  { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 58%, var(--border)); }
/* A chip reading 0 has nothing behind it: keep it legible and clickable, but
   stop it competing with the two that do have rows. */
#grpStates .one-inbox-state[data-empty="1"]:not([aria-pressed="true"]) { opacity: .55; }
/* Dots in the menu — the five "what a group is" views. M-seddin keeps the
   muted default: a view that hides nothing urgent should not be the loudest
   line in the menu. */
.one-inbox-more-grp-open   .one-inbox-state-dot { background: var(--success); }
.one-inbox-more-grp-kids   .one-inbox-state-dot { background: var(--violet-500); }
.one-inbox-more-grp-adults .one-inbox-state-dot { background: var(--lougha); }
.one-inbox-more-grp-app    .one-inbox-state-dot { background: var(--accent); }
#grpStates .one-inbox-state-more[data-more-view="open"]   { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 58%, var(--border)); }
#grpStates .one-inbox-state-more[data-more-view="kids"]   { background: color-mix(in oklab, var(--violet-500) 12%, transparent); border-color: color-mix(in oklab, var(--violet-500) 58%, var(--border)); }
#grpStates .one-inbox-state-more[data-more-view="adults"] { background: var(--lougha-soft); border-color: color-mix(in oklab, var(--lougha) 58%, var(--border)); }
#grpStates .one-inbox-state-more[data-more-view="app"]    { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 58%, var(--border)); }
#grpStates .one-inbox-state-more[data-more-view="open"]   .one-inbox-more-dots { color: var(--success); }
#grpStates .one-inbox-state-more[data-more-view="kids"]   .one-inbox-more-dots { color: var(--violet-500); }
#grpStates .one-inbox-state-more[data-more-view="adults"] .one-inbox-more-dots { color: var(--lougha); }
#grpStates .one-inbox-state-more[data-more-view="app"]    .one-inbox-more-dots { color: var(--accent); }
.one-inbox-more-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.one-inbox-more-item strong {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.one-inbox-more-item.active strong { color: inherit; }
/* The pulse says "this is happening right now", so it belongs on the button
   while the view is on — in the menu a fading dot just read as disabled. */
@media (prefers-reduced-motion: no-preference) {
  .one-inbox-state-more[data-more-view="live_now"] .one-inbox-more-dots { animation: oneInboxLivePulse 1.8s var(--ease) infinite; }
}
@keyframes oneInboxLivePulse { 50% { opacity: .35; } }

/* ── The conversation row wears its CRM state (2026-09-18, Ayoub) ───────────
   Two axes that must not fight. The TINT + the 4px rail say who this person is
   to us — Active · Pending · In process · Renew · New — a slow fact that turns
   over once a month. The pill at the end of line 2 says what has to happen
   TODAY. When nothing is urgent the pill falls back to the state's own name.

   Every colour is a token, so dark mode needs no rules of its own; only the
   tint STRENGTH changes, because 5% over white reads and 5% over #131a1f does
   not. */
:root { --crm-tint-a: 5%; --crm-tint-hover-a: 10%; --crm-tint-sel-a: 13%; }
[data-theme="dark"] { --crm-tint-a: 10%; --crm-tint-hover-a: 16%; --crm-tint-sel-a: 22%; }

.conv-item[data-crm-state="active"]     { --crm-c: var(--success); }
.conv-item[data-crm-state="pending"]    { --crm-c: var(--warning); }
.conv-item[data-crm-state="in_process"] { --crm-c: var(--lougha); }
.conv-item[data-crm-state="renew"]      { --crm-c: var(--info); }
.conv-item[data-crm-state="new"]        { --crm-c: var(--violet-500); }

/* background-COLOR, not the shorthand: a pinned row's yellow gradient lives in
   background-image and has to survive the tint underneath it. */
.conv-item[data-crm-state]        { background-color: color-mix(in oklab, var(--crm-c) var(--crm-tint-a), transparent); }
.conv-item[data-crm-state]:hover  { background-color: color-mix(in oklab, var(--crm-c) var(--crm-tint-hover-a), transparent); }
.conv-item.active[data-crm-state] {
  background-color: color-mix(in oklab, var(--crm-c) var(--crm-tint-sel-a), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--crm-c) 42%, transparent);
}

/* A real element, not a pseudo: ::before is the selection bar and ::after
   belongs to the synthetic-team row. */
.conv-crm-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--crm-c, transparent); pointer-events: none;
}
.conv-item.active .conv-crm-rail { width: 5px; }
/* The selection bar sat on the same 3px and would paint over the state. The
   deeper tint, the thicker rail and the inset ring carry "this one is open"
   instead. Rows with no CRM state (groups, team, rooms) keep it untouched. */
.conv-item.active[data-crm-state]::before { display: none; }

.conv-crm-pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--crm-pc);
  background: color-mix(in oklab, var(--crm-pc) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--crm-pc) 28%, transparent);
}
.conv-crm-pill .conv-crm-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.crm-state-active     { --crm-pc: var(--success); }
.crm-state-pending    { --crm-pc: var(--warning); }
.crm-state-in_process { --crm-pc: var(--lougha); }
.crm-state-renew      { --crm-pc: var(--info); }
.crm-state-new        { --crm-pc: var(--violet-500); }
/* Red is only ever "act now". Amber is "we owe them an answer". Cyan is
   something happening today. */
.crm-flag-ticket      { --crm-pc: var(--danger); }
.crm-flag-live_now    { --crm-pc: var(--danger); }
.crm-flag-unread      { --crm-pc: var(--warning); }
.crm-flag-first_today { --crm-pc: var(--lougha); }
/* Green is the only pill that reports a FACT about the room rather than a
   state on a record: this person is inside the class right now. It reads in
   both themes for free — --success is redefined under dark. */
.crm-flag-in_class    { --crm-pc: var(--success); }

/* Below 1280px the sidebar drops to 255px and a row that also carries the
   agent's pill leaves the preview ~33px — three characters of the message.
   The state pill is the one that can go: the tint and the rail already say it,
   and the open conversation's header names it in full. The flags stay, because
   a colour alone cannot tell "ticket" from "live". */
@media (max-width: 1280px) {
  #conversationList .conv-crm-pill[class*="crm-state-"] { display: none; }
}

/* Even with the state pill gone, a flag next to a long agent name ("Administrati…",
   90px of a 287px bar) left the message 33px — three characters. The message is
   the reason the row exists, so it gets a floor and the agent's pill is the one
   that gives way; it truncates, which it was already built to do. */
#conversationList .conv-row2 .conv-preview { min-width: 76px; }
#conversationList .conv-row2 .conv-assignee-pill { flex-shrink: 1; min-width: 0; overflow: hidden; }
#conversationList .conv-row2 .conv-assignee-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: no-preference) {
  .crm-flag-live_now .conv-crm-dot,
  .crm-flag-in_class .conv-crm-dot { animation: crmLivePulse 1.8s var(--ease) infinite; }
}
@keyframes crmLivePulse { 50% { opacity: .3; } }

/* The open conversation carries the same two facts in its header. The canvas
   stays untinted — the bubbles already own their colours and a wash over them
   only costs legibility. */
.chat-crm-pills { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chat-crm-pills .conv-crm-pill { height: 20px; font-size: 11px; }
.chat-header[data-crm-state="active"]     { --crm-c: var(--success); }
.chat-header[data-crm-state="pending"]    { --crm-c: var(--warning); }
.chat-header[data-crm-state="in_process"] { --crm-c: var(--lougha); }
.chat-header[data-crm-state="renew"]      { --crm-c: var(--info); }
.chat-header[data-crm-state="new"]        { --crm-c: var(--violet-500); }
.chat-header[data-crm-state] { box-shadow: inset 0 -3px 0 0 var(--crm-c); }

/* ==========================================================================
   Website Tests (2026-09-19) — the Leads7 placement test on this desk.
   Tokens only (gotcha #14: the gray scale INVERTS in dark, so never a raw
   hex for a surface). The CEFR pills reuse the level palette from .cefr-*
   as tints so a level reads the same here as everywhere else.
   ========================================================================== */
.wt-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.wt-chip:hover { background: var(--surface-hover); }
.wt-chip-on { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }
.wt-chip-n {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-secondary);
  font-size: 11px; font-weight: 600; text-align: center;
}
.wt-chip-on .wt-chip-n { background: rgba(255, 255, 255, .22); color: var(--text-inverse); }

.wt-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wt-filter { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.wt-filter > span { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.wt-filter-grow { flex: 1 1 220px; }

.wt-table tbody tr { cursor: pointer; }
.wt-table .wt-td-lvl { text-align: center; }
.wt-student-name { font-weight: 600; color: var(--text-primary); }
.wt-student-sub { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.wt-td-agent, .wt-td-teacher { color: var(--text-secondary); }

.wt-pill {
  display: inline-block; min-width: 34px; padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; text-align: center;
  background: var(--surface-sunken); color: var(--text-tertiary);
}
.wt-lvl-a { background: var(--warning-soft); color: var(--warning); }
.wt-lvl-b { background: var(--info-soft); color: var(--info); }
.wt-lvl-c { background: var(--success-soft); color: var(--success); }
.wt-pill-wait { border: 1px dashed var(--border-strong); background: transparent; }

.wt-status { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.wt-status-warning { background: var(--warning-soft); color: var(--warning); }
.wt-status-info { background: var(--info-soft); color: var(--info); }
.wt-status-success { background: var(--success-soft); color: var(--success); }
.wt-status-muted { background: var(--surface-sunken); color: var(--text-tertiary); }

/* ── drawer ─────────────────────────────────────────────────────────── */
.wt-drawer { position: fixed; inset: 0; z-index: 1200; }
.wt-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
.wt-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
}
.wt-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-weight: 700; color: var(--text-primary);
}
.wt-drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.wt-muted { color: var(--text-tertiary); font-size: 13px; }

.wt-d-name { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.wt-d-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.wt-d-levels {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0; padding: 14px; border-radius: var(--radius-md);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
}
.wt-d-level { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1 1 110px; }
.wt-d-level-cap { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.wt-d-level-note { font-size: 11px; color: var(--text-tertiary); text-align: center; }
.wt-d-arrow { color: var(--text-tertiary); font-size: 16px; }

.wt-d-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.wt-kv { display: flex; flex-direction: column; gap: 3px; }
.wt-kv-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); }
.wt-kv-value { font-size: 13px; color: var(--text-primary); }

.wt-d-sec {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 18px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border-subtle);
}
.wt-d-skills { display: flex; flex-direction: column; gap: 6px; }
.wt-skill { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.wt-skill-name { flex: 1; text-transform: capitalize; }
.wt-skill-score { font-variant-numeric: tabular-nums; color: var(--text-tertiary); font-size: 12px; }

.wt-d-summary { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.wt-d-listcap { font-weight: 600; color: var(--text-primary); margin-top: 8px; }
.wt-d-list { margin: 4px 0 0 18px; padding: 0; }
.wt-d-reco { margin-top: 10px; font-weight: 600; color: var(--text-primary); }

.wt-d-questions, .wt-d-writing, .wt-d-speaking { display: flex; flex-direction: column; gap: 10px; }
.wt-q { padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface); }
.wt-q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wt-q-num { font-size: 11px; font-weight: 700; color: var(--text-tertiary); }
.wt-q-skill { flex: 1; font-size: 11px; color: var(--text-tertiary); text-transform: capitalize; }
.wt-q-mark { font-weight: 700; }
.wt-q-ok { color: var(--success); }
.wt-q-ko { color: var(--danger); }
.wt-q-prompt { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.wt-q-answer { display: flex; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--text-secondary); }
.wt-q-answer-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 2px; }
.wt-q-answer.is-wrong { color: var(--danger); }
.wt-q-answer.is-right { color: var(--success); }
.wt-audio { width: 100%; margin-top: 8px; }

/* ── "Send website test" modal ──────────────────────────────────────── */
.wt-modal-overlay {
  position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .42); padding: 20px;
}
.wt-modal {
  width: min(560px, 100%); background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden;
}
.wt-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border-subtle); }
.wt-modal-head > div:first-child { flex: 1; }
.wt-modal-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.wt-modal-sub { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.wt-modal-x { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 4px; border-radius: var(--radius-xs); }
.wt-modal-x:hover { background: var(--surface-hover); color: var(--text-primary); }
.wt-modal-body { padding: 18px 20px 20px; }
.wt-person {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--surface-sunken); margin-bottom: 16px;
}
.wt-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font-weight: 700;
}
.wt-person-copy { flex: 1; display: flex; flex-direction: column; }
.wt-person-copy strong { color: var(--text-primary); }
.wt-person-copy span { font-size: 12px; color: var(--text-tertiary); }
.wt-ready {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success);
  font-size: 12px; font-weight: 600;
}
.wt-ready i { width: 14px; height: 14px; }
.wt-flabel { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.wt-link-row { display: flex; gap: 8px; align-items: center; }
.wt-url { flex: 1; color: var(--primary); }
.wt-note {
  display: flex; gap: 8px; margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--info-soft); color: var(--text-secondary);
  font-size: 13px; line-height: 1.5;
}
.wt-note i { flex: 0 0 auto; width: 16px; height: 16px; color: var(--info); }
.wt-actions { display: flex; gap: 10px; margin-top: 18px; }
.wt-actions .btn-primary { flex: 1; justify-content: center; }

@media (max-width: 760px) {
  .wt-filters { gap: 8px; }
  .wt-filter { min-width: 130px; }
  .wt-drawer-panel { width: 100%; }
}

/* ==========================================================================
   Family ring (2026-09-19, Ayoub) — one number, several people.
   The header avatar wears a segmented ring: one arc per person on the phone,
   colour = role. Roles map onto the app's own semantic pairs, which already
   flip per theme, so nothing here hardcodes a hex and the inverted dark gray
   scale (gotcha #14) is never an issue. Colour is never the only channel:
   every row also spells the role out.
   ========================================================================== */
:root {
  --fr-parent: var(--accent);
  --fr-parent-soft: var(--accent-soft);
  --fr-adult: var(--success);
  --fr-adult-soft: var(--success-soft);
  --fr-kid: var(--warning);
  --fr-kid-soft: var(--warning-soft);
  --fr-unknown: var(--text-tertiary);
  --fr-unknown-soft: var(--surface-sunken);
}

#chatAvatarRing.fr-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  overflow: visible;
}
#chatAvatarRing.fr-ring.is-on { width: 52px; height: 52px; }
#chatAvatarRing.fr-ring > #chatAvatar { flex: 0 0 auto; }
.fr-ring-svg {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.fr-arc { opacity: .34; transition: opacity var(--motion-fast, 120ms) var(--ease, ease); }
.fr-arc.is-active { opacity: 1; }
.fr-arc.fr-role-parent { stroke: var(--fr-parent); }
.fr-arc.fr-role-adult { stroke: var(--fr-adult); }
.fr-arc.fr-role-kid { stroke: var(--fr-kid); }
.fr-arc.fr-role-unknown { stroke: var(--fr-unknown); opacity: .6; }

.fr-badge {
  position: absolute;
  right: -3px; bottom: -3px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: var(--radius-pill, 999px);
  background: var(--text);
  color: var(--bg);
  border: 2px solid var(--surface);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
}

/* A real <button> over the avatar: Tab reaches it, and it never disturbs the
   avatar's own layout. 44px is the minimum touch target. */
.fr-hit {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.fr-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- the popover ---- */
.fr-pop {
  position: fixed;
  z-index: 3000;
  width: 364px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
.fr-pop-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--border-subtle, var(--border)); }
.fr-pop-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.fr-pop-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.fr-pop-body { padding: 8px 8px 4px; overflow-y: auto; }
.fr-pop-foot {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px 11px;
  border-top: 1px solid var(--border-subtle, var(--border));
  background: var(--surface-sunken);
  font-size: 11px;
  color: var(--text-tertiary);
}
.fr-pop-foot i, .fr-pop-foot svg { width: 13px; height: 13px; flex: 0 0 auto; }

.fr-group {
  padding: 7px 6px 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.fr-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  margin-bottom: 4px;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: var(--radius, 10px);
  background: var(--surface-sunken);
}
.fr-row.is-active { background: var(--accent-soft); border-color: var(--accent); }

/* The initials keep the app's own text/surface pairing; the ROLE is the ring
   around them, so no role colour ever has to carry small text. */
.fr-row-av {
  position: relative;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 2px currentColor;
}
.fr-row-av.fr-role-parent { color: var(--fr-parent); }
.fr-row-av.fr-role-adult { color: var(--fr-adult); }
.fr-row-av.fr-role-kid { color: var(--fr-kid); }
.fr-row-av.fr-role-unknown { color: var(--fr-unknown); }
.fr-row-av-in {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.fr-row-meta { flex: 1 1 auto; min-width: 0; }
.fr-row-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--text); }
.fr-row-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Soft fill + strong ink: the same pairing the rest of support2 uses for
   status pills, so the chip is legible in both themes. */
.fr-chip {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid transparent;
  cursor: pointer;
}
.fr-chip.is-guess { border-style: dashed; border-color: currentColor; }
.fr-chip.fr-role-parent { color: var(--fr-parent); background: var(--fr-parent-soft); }
.fr-chip.fr-role-adult { color: var(--fr-adult); background: var(--fr-adult-soft); }
.fr-chip.fr-role-kid { color: var(--fr-kid); background: var(--fr-kid-soft); }
.fr-chip.fr-role-unknown { color: var(--fr-unknown); background: var(--fr-unknown-soft); }
.fr-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fr-owner-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  border-bottom: 1px dotted var(--border-strong, var(--border));
}

.fr-row-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.fr-pin {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 7px);
  background: var(--surface);
  color: var(--text-tertiary);
  cursor: pointer;
}
.fr-pin i, .fr-pin svg { width: 14px; height: 14px; }
.fr-pin.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, var(--bg)); }
.fr-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fr-switch {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  min-height: 28px;
  border: 0;
  border-radius: var(--radius-sm, 7px);
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
}
.fr-switch:hover { opacity: .88; }
.fr-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fr-active-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--radius-pill, 999px);
  background: var(--accent);
  color: var(--accent-fg, var(--bg));
}

.fr-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: -1px 0 6px;
  padding: 7px 8px 8px 51px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: var(--radius, 10px);
  background: var(--surface);
}
.fr-pick-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 9px;
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 7px);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  cursor: pointer;
}
.fr-pick-btn.fr-role-parent { color: var(--fr-parent); }
.fr-pick-btn.fr-role-adult { color: var(--fr-adult); }
.fr-pick-btn.fr-role-kid { color: var(--fr-kid); }
.fr-pick-btn.is-on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.fr-pick-btn.fr-pick-clear { color: var(--danger); }
.fr-pick-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fr-age { display: inline-flex; align-items: center; gap: 5px; }
.fr-age input {
  width: 64px;
  min-height: 28px;
  font-family: inherit;
  font-size: 11.5px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 7px);
  background: var(--surface-sunken);
  color: var(--text);
}

@media (max-width: 760px) {
  .fr-pop { width: calc(100vw - 20px); }
}

/* ---- "Zid wa7ed 3la had r-ra9m" (2026-09-19) ---- */
.fr-addbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  margin: 6px 0 6px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: var(--radius, 10px);
  cursor: pointer;
}
.fr-addbtn:hover { color: var(--accent); border-color: var(--accent); }
.fr-addbtn:disabled { opacity: .45; cursor: default; }
.fr-addbtn i, .fr-addbtn svg { width: 14px; height: 14px; }
.fr-addbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fr-add {
  margin: 0 0 6px;
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius, 10px);
  background: var(--surface);
}
.fr-add-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.fr-add input {
  font-family: inherit;
  font-size: 12.5px;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 7px);
  background: var(--surface-sunken);
  color: var(--text);
}
.fr-add-name { width: 100%; box-sizing: border-box; }
.fr-add-roles { display: flex; gap: 6px; margin-top: 7px; }
.fr-add-roles .fr-pick-btn { flex: 1 1 0; justify-content: center; }
.fr-add-line { display: flex; gap: 6px; align-items: center; margin-top: 7px; }
.fr-add-age { width: 70px; flex: 0 0 auto; }
.fr-add-save {
  flex: 1 1 auto;
  min-height: 30px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  border: 0;
  border-radius: var(--radius-sm, 7px);
  background: var(--accent);
  color: var(--accent-fg, var(--bg));
  cursor: pointer;
}
.fr-add-save:disabled { opacity: .6; cursor: default; }
.fr-add-save:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.fr-add-err {
  margin-top: 7px;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 7px);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 11.5px;
  line-height: 1.45;
}
.fr-add-err.hidden { display: none; }
.fr-add-note { margin-top: 7px; font-size: 10.5px; line-height: 1.45; color: var(--text-tertiary); }

/* ---- One person on the number (2026-09-23) ----
   No ring, no count: the avatar only reveals it is a door on hover/focus —
   a dashed halo and a "+" badge — and opens the same popover. */
#chatAvatarRing.fr-ring.is-solo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed var(--border-strong, var(--border));
  opacity: 0;
  transition: opacity var(--motion-fast, 120ms) var(--ease, ease);
  pointer-events: none;
}
.fr-badge.fr-badge-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  padding: 0;
  background: var(--accent);
  color: var(--accent-fg, var(--bg));
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--motion-fast, 120ms) var(--ease, ease), transform var(--motion-fast, 120ms) var(--ease, ease);
}
.fr-badge-add i, .fr-badge-add svg { width: 11px; height: 11px; stroke-width: 3; }
#chatAvatarRing.fr-ring.is-solo:hover::before,
#chatAvatarRing.fr-ring.is-solo:focus-within::before,
#chatAvatarRing.fr-ring.is-solo:has(.fr-hit[aria-expanded="true"])::before { opacity: 1; }
#chatAvatarRing.is-solo:hover .fr-badge-add,
#chatAvatarRing.is-solo:focus-within .fr-badge-add,
#chatAvatarRing.is-solo:has(.fr-hit[aria-expanded="true"]) .fr-badge-add { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #chatAvatarRing.fr-ring.is-solo::before, .fr-badge.fr-badge-add { transition: none; }
}

/* ---- Family tags (2026-10-02) — Parent 1 · Parent 2 · Kid 1-4 · Not set ----
   A human tag is a SOLID badge (role colour fill), a guess stays the dashed
   soft chip, "Not set" is a plain outline. The caret says "you can change me".
   Inks flip per theme so the fill never carries low-contrast text. */
:root {
  --fr-parent-ink: var(--accent-fg);
  --fr-adult-ink: var(--accent-fg);
  --fr-kid-ink: var(--text);
}
[data-theme="dark"] {
  --fr-parent-ink: var(--bg);
  --fr-adult-ink: var(--bg);
  --fr-kid-ink: var(--bg);
}
.fr-chip.fr-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  padding: 3px 5px 3px 8px;
  min-height: 20px;
}
.fr-chip.fr-tag i, .fr-chip.fr-tag svg { width: 11px; height: 11px; stroke-width: 2.6; opacity: .8; flex: 0 0 auto; }
.fr-chip.fr-tag.is-sure.fr-role-parent { background: var(--fr-parent); border-color: var(--fr-parent); color: var(--fr-parent-ink); }
.fr-chip.fr-tag.is-sure.fr-role-kid { background: var(--fr-kid); border-color: var(--fr-kid); color: var(--fr-kid-ink); }
.fr-chip.fr-tag.is-sure.fr-role-adult { background: var(--fr-adult); border-color: var(--fr-adult); color: var(--fr-adult-ink); }
.fr-chip.fr-tag.is-unset {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong, var(--border));
}
.fr-chip.fr-tag:hover { filter: brightness(1.06); }
/* Saved here, not in the markaz yet: a small neutral dot, tooltip explains. */
.fr-chip.fr-tag.is-pending { position: relative; }
.fr-chip.fr-tag.is-pending::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-tertiary);
  border: 1.5px solid var(--surface);
}

/* The picker: Parents on one line, Kids on the next, Not set (+ age) last. */
.fr-pick { flex-direction: column; align-items: stretch; gap: 6px; }
.fr-pick.is-busy { opacity: .6; pointer-events: none; }
.fr-tagpick { display: flex; flex-direction: column; gap: 6px; }
.fr-tagpick-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fr-tagpick-row .fr-tag-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.fr-tag-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  font-weight: 700;
}
.fr-tag-btn.is-on.fr-role-parent { background: var(--fr-parent); border-color: var(--fr-parent); color: var(--fr-parent-ink); box-shadow: none; }
.fr-tag-btn.is-on.fr-role-kid { background: var(--fr-kid); border-color: var(--fr-kid); color: var(--fr-kid-ink); box-shadow: none; }
.fr-tag-btn.is-taken {
  cursor: not-allowed;
  color: var(--text-tertiary);
  background: var(--surface);
  border-style: dashed;
}
.fr-tag-btn.is-taken > span:first-child { text-decoration: line-through; text-decoration-thickness: 1px; }
.fr-taken-by {
  font-size: 9px;
  font-weight: 600;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-pick-btn.fr-pick-clear.is-on { color: var(--text-secondary); border-style: solid; box-shadow: none; cursor: default; }
.fr-pick-btn:disabled { cursor: not-allowed; }
.fr-tagpick.fr-add-roles { display: flex; flex-direction: column; margin-top: 7px; }


/* ── Contact profile — compact header (2026-09-22) ──────────────────────
   The panel opened with a 48px avatar, a 20px display name, the phone and
   five wrapped pills: about 270px of chrome before the first fact, and the
   identity half of it repeats what the chat header two inches to the left
   already says. The identity goes; the actions stay, on one line.

   Done in CSS rather than markup on purpose: index.html differs between the
   engine and the s2 container, so a markup edit would have to be made twice
   and would be lost on the next Coolify rebuild. Scoped to #profilePanel so
   the Email view's own contact panel is untouched. */
#profilePanel .profile-head-v2 {
  align-items: stretch;
  gap: 0;
  padding: 9px 12px 10px;
}
#profilePanel .profile-head-v2 .profile-head-top { margin-bottom: 0; }
#profilePanel .profile-avatar-big,
#profilePanel .profile-name-row,
#profilePanel .profile-phone-big { display: none; }

/* Link to HubSpot and Lougha AI have no job in this panel any more. */
#profilePanel #profileLinkBtn,
#profilePanel #aiSummaryToggleBtn { display: none !important; }

/* One left-aligned rail that scrolls, instead of pills wrapping to four rows. */
#profilePanel .profile-head-pills {
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 5px;
  margin-top: 7px;
  padding-bottom: 1px;
}
#profilePanel .profile-head-pills::-webkit-scrollbar { display: none; }
#profilePanel .profile-head-pills > button { flex: 0 0 auto; }
/* Three plainly named actions do not need glyphs, and dropping them is what
   lets all three sit in the panel at once: the rail measured 361px of content
   in a 315px track, and the icons were 46px of it. */
#profilePanel .profile-head-pills > button > svg,
#profilePanel .profile-head-pills > button > [data-lucide] { display: none; }
#profilePanel .profile-head-pills > button { padding-inline: 10px; }

/* ── Empty fields fold away ─────────────────────────────────────────────
   Student Info carries 14+ HubSpot properties and, on a contact who is not
   a student, most of them read "—". They are still one click away; they
   just no longer push the fields that DO have a value below the fold. */
.profile-card-body.hide-empty-fields .field-row:has(.field-val.empty) { display: none; }
.field-empty-toggle {
  display: block; margin: 8px 0 0; padding: 0 0 2px;
  font: inherit; font-size: 11.5px;
  background: none; border: 0; border-bottom: 1px dashed var(--border);
  color: var(--text-tertiary); cursor: pointer; text-align: left;
}
.field-empty-toggle:hover { color: var(--accent); border-bottom-color: var(--accent); }
.field-empty-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* TAB-BOTMARK 2026-09-23 — bot replies (Mr.Bot to students, Teachers Assistant
   to teachers) share one violet bubble, readable in both themes. The older
   `.bubble.fromMe.is-bot { background }` kept dark-mode text light-on-light. */
:root {
  --bot-bubble-bg: #ede9fe; --bot-bubble-text: oklch(0.26 0.07 295); --bot-bubble-meta: oklch(0.46 0.07 295);
  --bot-tag-bg: #ddd6fe; --bot-tag-text: #6d28d9;
}
[data-theme="dark"] {
  --bot-bubble-bg: oklch(0.34 0.09 295); --bot-bubble-text: oklch(0.96 0.02 295); --bot-bubble-meta: oklch(0.80 0.05 295);
  --bot-tag-bg: oklch(0.47 0.14 295); --bot-tag-text: oklch(0.98 0.01 295);
}
.bubble.fromMe.is-bot,
#teamChatInboxView .tcinbox-msgs .bubble.fromMe.is-bot {
  --bubble-bg: var(--bot-bubble-bg); --bubble-text: var(--bot-bubble-text); --bubble-meta: var(--bot-bubble-meta);
  background: var(--bot-bubble-bg);
}
.bubble .bot-tag { background: var(--bot-tag-bg); color: var(--bot-tag-text); }


/* ── Platform status banner (2026-09-24) ────────────────────────────────────
   Team-wide outage alert (first: students7), injected by app.js as the first
   child of #app so it pushes the whole shell down instead of covering the
   topbar. Visual only: a pulsing ring, never a sound. Same red in both themes
   on purpose — an alarm must not soften in dark mode. */
:root {
  --platform-alert-red: oklch(0.50 0.20 27);
  --platform-alert-amber: oklch(0.56 0.13 62);
  --platform-alert-fg: var(--accent-fg);
  --platform-alert-halo: oklch(1 0 0 / 0.55);
}
.s2-platform-alert {
  --s2pa-bg: var(--platform-alert-red);
  flex-shrink: 0; position: relative; z-index: 60;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 16px; background: var(--s2pa-bg); color: var(--platform-alert-fg);
  font-size: 13.5px; line-height: 1.35;
  animation: s2pa-edge 1.6s ease-in-out infinite;
}
.s2-platform-alert--restarting { --s2pa-bg: var(--platform-alert-amber); }
.s2-pa-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.s2-pa-ring {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--platform-alert-fg);
  animation: s2pa-ring 1.2s ease-out infinite;
}
.s2-pa-title { font-weight: 700; overflow-wrap: anywhere; }
.s2-pa-meta { font-weight: 600; }
.s2-pa-detail { overflow-wrap: anywhere; }
.s2-pa-since {
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
  padding: 1px 8px; border-radius: 999px;
  background: color-mix(in oklch, var(--platform-alert-fg) 18%, transparent);
}
@keyframes s2pa-ring {
  0%   { box-shadow: 0 0 0 0 var(--platform-alert-halo); }
  75%  { box-shadow: 0 0 0 11px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes s2pa-edge {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  50%      { box-shadow: inset 0 0 0 3px var(--platform-alert-halo); }
}
@media (prefers-reduced-motion: reduce) {
  .s2-platform-alert, .s2-pa-ring { animation: none; }
  .s2-pa-ring { box-shadow: 0 0 0 3px var(--platform-alert-halo); }
}
@media (max-width: 640px) {
  .s2-platform-alert { padding: 6px 12px; font-size: 13px; }
}

/* "Call (3CX)" line picker (2026-09-24, port of Leads7 #461) */
.cx-line-picker {
  position: fixed; z-index: 9850;
  background: var(--surface-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 6px; max-height: min(460px, calc(100vh - 24px)); overflow-y: auto;
  font-size: 13px; line-height: 1.35;
}
.cx-lp-head { padding: 8px 10px 6px; }
.cx-lp-title { font-weight: 650; font-size: 13.5px; }
.cx-lp-sub { color: var(--text-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-lp-sub:empty { display: none; }
.cx-lp-note { padding: 8px 10px; color: var(--text-secondary); font-size: 12px; }
.cx-lp-warn { color: var(--warning); }
.cx-lp-fallback { margin: 2px 10px 10px; }
.cx-lp-row {
  --cx-lp-tone: var(--success);
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.cx-lp-row:hover:not(:disabled), .cx-lp-row:focus-visible { background: var(--surface-hover); }
.cx-lp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cx-lp-row:disabled { cursor: not-allowed; }
.cx-lp-row:disabled .cx-lp-main { opacity: .55; }
.cx-lp-busy { --cx-lp-tone: var(--danger); }
.cx-lp-offline, .cx-lp-blocked { --cx-lp-tone: var(--text-tertiary); }
.cx-lp-unknown { --cx-lp-tone: var(--warning); }
.cx-lp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-lp-tone); }
.cx-lp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cx-lp-num { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.cx-lp-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-secondary); font-size: 12px; }
.cx-lp-mine, .cx-lp-tag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; }
.cx-lp-mine { color: var(--accent-strong); background: var(--accent-soft); }
.cx-lp-tag { color: var(--text-secondary); background: transparent; border: 1px solid var(--border); padding: 0 5px; }
.cx-lp-status { flex: none; max-width: 48%; text-align: right; font-size: 12px; font-weight: 600; color: var(--cx-lp-tone); }

/* <propose-groups:begin> */
/* ── Propose groups (composer) — 2026-10-08 ──────────────────────────────
   Same chrome as the payment-link picker (.paylink-*) so the composer's two
   pickers read as one family; this block only adds the wider footprint, the
   filter row, the multi-pick rows and the preview options. Tokens only
   (gotcha #14) — dark mode flips for free. */
.compose-gofr-btn i { color: var(--wa); }
.compose-gofr-btn.active { background: color-mix(in oklch, var(--wa) 14%, transparent); }
.gofr-pop { width: min(660px, calc(100% - 24px)); max-height: min(560px, calc(100vh - 140px)); }
.gofr-pop .paylink-pane { max-height: min(560px, calc(100vh - 140px)); }
.gofr-for {
  padding: 8px 12px 0;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.gofr-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 2px; align-items: center; }
.gofr-filters .gofr-search { margin: 0; flex: 1 1 120px; min-width: 110px; }
.gofr-select {
  height: 33px; padding: 0 4px; max-width: 94px; flex: 0 1 auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.gofr-rows { flex: 1; min-height: 120px; }
.gofr-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 9px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
}
.gofr-row:hover { background: var(--surface-hover); }
.gofr-row:focus-visible { outline: 2px solid var(--wa); outline-offset: 1px; }
.gofr-row.on { background: color-mix(in oklab, var(--wa) 10%, transparent); border-color: color-mix(in oklab, var(--wa) 40%, transparent); }
.gofr-row-nosched .gofr-sched { color: var(--warning); }
.gofr-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums;
}
.gofr-row.on .gofr-check { background: var(--wa); border-color: var(--wa); }
.gofr-row .paylink-name small { white-space: normal; }
.gofr-sched { color: var(--text-secondary) !important; font-weight: 600; }
.gofr-status {
  font-style: normal; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: var(--radius-pill); margin-left: 5px; vertical-align: 1px;
  background: var(--surface-sunken); color: var(--text-muted);
}
.gofr-status.gofr-st-open { background: var(--accent-soft); color: var(--accent); }
.gofr-status.gofr-st-live { background: color-mix(in oklab, var(--wa) 16%, transparent); color: var(--wa); }
.gofr-status.gofr-st-grow { background: color-mix(in oklab, var(--warning) 16%, transparent); color: var(--warning); }
.gofr-langs button { white-space: nowrap; }
.gofr-opts {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 9px 12px 0; font-size: 12px; color: var(--text-secondary);
}
.gofr-opts label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.gofr-abroad { font-weight: 700; color: var(--accent); }
/* Two messages, one language each: Arabic (rtl) then English. */
.gofr-two { display: flex; flex-direction: column; gap: 6px; }
.gofr-msg-label {
  font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 4px;
}
.gofr-text { min-height: 150px; flex-shrink: 0; }
#gofrBoxAr.hidden, #gofrBoxEn.hidden { display: none; }
#gofrBoxAr, #gofrBoxEn { display: flex; flex-direction: column; gap: 6px; }
#gofrNext:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) {
  .gofr-select { max-width: none; flex: 1 1 calc(50% - 6px); }
}
/* <propose-groups:end> */

/* ===========================================================================
   Sécurité & accès (2026-10-09) — team access tracking page + the Connexions
   block in the Edit-user modal. Tokens only (dark-safe: the gray scale is
   inverted in dark, so never hardcode a colour). Additive; appended last.
   =========================================================================== */
#securityView { padding: 16px; max-width: 1100px; margin: 0 auto; }
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sec-title { font-size: 20px; font-weight: 800; margin: 0; color: var(--text); }
.sec-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.sec-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--radius-md); background: var(--accent-soft, var(--bg-secondary)); color: var(--text-secondary); font-size: 13px; }
.sec-banner i { width: 16px; height: 16px; flex: 0 0 auto; }
.sec-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sec-counter { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.sec-counter i { width: 20px; height: 20px; color: var(--text-tertiary); }
.sec-counter-val { font-size: 22px; font-weight: 800; line-height: 1; color: var(--text); }
.sec-counter-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.sec-counter.ok i { color: var(--green-600, var(--green-500)); }
.sec-counter.warn i { color: var(--amber-600, var(--amber-500)); }
.sec-counter.danger i { color: var(--danger); }
.sec-section { margin-bottom: 18px; }
.sec-h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 8px; }
.sec-team { display: flex; flex-direction: column; gap: 6px; }
.sec-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: background .12s; }
.sec-row:hover { background: var(--row-hover, var(--bg-secondary)); }
.sec-row.flagged { border-color: var(--danger); }
.sec-row-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-tertiary); flex: 0 0 auto; }
.sec-row-dot.online { background: var(--green-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 25%, transparent); }
.sec-row-main { flex: 1 1 auto; min-width: 0; }
.sec-row-name { display: flex; align-items: center; gap: 8px; }
.sec-row-name strong { font-size: 14px; color: var(--text); }
.sec-row-role { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
.sec-row-where { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.sec-row-where i { width: 14px; height: 14px; flex: 0 0 auto; color: var(--text-tertiary); }
.sec-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sec-row-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sec-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-pill, 999px); background: var(--bg-secondary); color: var(--text-secondary); }
.sec-flag i { width: 12px; height: 12px; }
.sec-flag.warn { background: color-mix(in srgb, var(--amber-500) 18%, transparent); color: var(--amber-600, var(--amber-500)); }
.sec-flag.danger { background: var(--danger-soft); color: var(--danger); }
.sec-row-when { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sec-row-when-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.sec-row-detail { background: none; border: none; cursor: pointer; color: var(--text-tertiary); padding: 2px; }
.sec-row-detail i { width: 16px; height: 16px; }
.sec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sec-alerts, .sec-failures { display: flex; flex-direction: column; gap: 6px; }
.sec-alert, .sec-fail { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.sec-alert i, .sec-fail i { width: 15px; height: 15px; flex: 0 0 auto; color: var(--danger); margin-top: 1px; }
.sec-alert-body, .sec-fail-body { flex: 1 1 auto; min-width: 0; }
.sec-alert-msg { font-size: 13px; color: var(--text); }
.sec-alert-when, .sec-fail-when { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sec-fail-who { font-size: 13px; color: var(--text); }
.sec-fail-where { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sec-fail-when { white-space: nowrap; }
.sec-empty { font-size: 13px; color: var(--text-muted); padding: 10px 2px; }
@media (max-width: 760px) { .sec-cols { grid-template-columns: 1fr; } }

/* Connexions block inside the Edit-user modal */
.ue-access-section { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.ue-access-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.ue-access-empty { font-size: 12px; color: var(--text-muted); padding: 6px 2px; }
.ue-access-subhead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-top: 8px; }
.ue-access-alert { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--danger); padding: 6px 8px; border-radius: var(--radius-sm); background: var(--danger-soft); }
.ue-access-alert i { width: 14px; height: 14px; flex: 0 0 auto; }
.ue-access-alert .ue-access-when { margin-left: auto; color: var(--text-muted); }
.ue-access-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.ue-access-row.off { border-color: var(--amber-500); }
.ue-access-row.vpn { border-color: var(--danger); }
.ue-access-row.fail i, .ue-access-row.device i { width: 14px; height: 14px; color: var(--text-tertiary); }
.ue-access-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ue-access-where { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.ue-access-dev { font-size: 11px; color: var(--text-muted); }
.ue-access-meta { display: flex; flex-direction: column; gap: 2px; text-align: right; font-size: 11px; color: var(--text-muted); flex: 0 0 auto; }
.ue-access-when { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Teacher presence pills in the chat header (2026-10-10) — the same pill as the
   CRM flags, so the header reads as one system. Green = a fact about right now
   (in the app / in the room), red = class time but not in Zoom, grey = nothing. */
.tp-online,
.tp-inclass  { --crm-pc: var(--success); }
.tp-notlive  { --crm-pc: var(--danger); }
.tp-classnow,
.tp-covered  { --crm-pc: var(--info); }
.tp-offline,
.tp-noclass  { --crm-pc: var(--text-muted); }
.tc-presence-pills:empty { display: none; }
.tc-presence-pills .conv-crm-pill { max-width: 220px; }
.tc-presence-pills .conv-crm-pill > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .tp-inclass .conv-crm-dot,
  .tp-notlive .conv-crm-dot { animation: crmLivePulse 1.8s var(--ease) infinite; }
}
@media (max-width: 768px) {
  .tc-presence-pills .tp-noclass { display: none; }
}