/* ══════════════════════════════════════════════════
   Front Desk Assist, Front Desk Operations Dashboard
   Receptionist-first: compact, dense, gamified
   ══════════════════════════════════════════════════ */

:root {
  --fd-bg: #0d1413;
  --fd-surface: #131c1a;
  --fd-surface-alt: #1a2624;
  --fd-row-alt: rgba(255,255,255,0.02);
  --fd-heading: #f0f7f4;
  --fd-body: #c6d4cf;
  --fd-muted: #6b7f78;
  --fd-border: #223330;
  --fd-accent: #14b8a6;
  --fd-accent-glow: rgba(20, 184, 166, 0.15);
  --fd-green: #22c55e;
  --fd-green-dim: rgba(34, 197, 94, 0.12);
  --fd-amber: #f59e0b;
  --fd-amber-dim: rgba(245, 158, 11, 0.12);
  --fd-red: #ef4444;
  --fd-red-dim: rgba(239, 68, 68, 0.12);
  --fd-purple: #8b5cf6;
  --fd-purple-dim: rgba(139, 92, 246, 0.12);
  --fd-cyan: #38bdf8;
  --fd-cyan-dim: rgba(56, 189, 248, 0.12);
  --fd-font: 'Manrope', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --fd-radius: 6px;
  --fd-transition: 0.15s ease;
  color-scheme: dark;
}

html:not(.dark-mode) {
  --fd-bg: #f0f5f3;
  --fd-surface: #ffffff;
  --fd-surface-alt: #f7faf9;
  --fd-row-alt: rgba(0,0,0,0.02);
  --fd-heading: #0e1f1b;
  --fd-body: #32443f;
  --fd-muted: #64748b;
  --fd-border: #dde8e4;
  --fd-accent-glow: rgba(20, 184, 166, 0.08);
  --fd-green-dim: rgba(34, 197, 94, 0.08);
  --fd-amber-dim: rgba(245, 158, 11, 0.08);
  --fd-red-dim: rgba(239, 68, 68, 0.08);
  --fd-purple-dim: rgba(139, 92, 246, 0.08);
  --fd-cyan-dim: rgba(56, 189, 248, 0.08);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100vh;
  overflow: hidden;
  font-family: var(--fd-font);
  background: var(--fd-bg);
  color: var(--fd-body);
  font-size: 14px;
  line-height: 1.4;
}

body {
  display: grid;
  /* Was: auto auto 1fr (header / kpi-strip / main). The kpi-strip
     is display:none at runtime so the middle row was always empty
     but still consumed a slot in the auto-placement order, which
     dropped .fd-main into the auto row above instead of the 1fr
     row below. That left the work-queue and selected-contact
     cards short of the viewport bottom. Collapsing to a 2-row
     template (header / main 1fr) makes .fd-main auto-place into
     the 1fr row. All other top-level views (statsView, logsView,
     etc.) are display:none unless their nav button is active, so
     they don't compete for the row. */
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 10px;
}

/* ── Header (compact) ── */

.fd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
}

.fd-header-left { display: flex; align-items: center; gap: 10px; }

/* ── Global contact search ─────────────────────────────────────── */
.fd-header-search { position: relative; }
#globalSearch {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: var(--fd-font);
  font-size: 12px;
  color: var(--fd-heading);
  width: 210px;
  transition: border-color var(--fd-transition), width 0.2s ease;
}
#globalSearch:focus { outline: none; border-color: var(--fd-accent); width: 260px; }
.fd-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 300px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 300;
}
.fd-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--fd-border);
  padding: 8px 12px;
  font-family: var(--fd-font);
  cursor: pointer;
}
.fd-search-result:last-child { border-bottom: none; }
.fd-search-result:hover, .fd-search-result.active { background: var(--fd-surface-alt); }
.fd-search-result .fd-work-avatar { width: 26px; height: 26px; font-size: 10px; flex: 0 0 auto; }
.fd-search-result-body { flex: 1; min-width: 0; }
.fd-search-result-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fd-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-search-result-meta {
  font-size: 10px;
  color: var(--fd-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-search-empty { padding: 12px; font-size: 12px; color: var(--fd-muted); text-align: center; }
.fd-header-center { display: none !important; }
.fd-logo { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--fd-heading); }
.fd-logo-accent { color: var(--fd-accent); }
.fd-location { font-size: 14px; font-weight: 600; color: var(--fd-heading); }
.fd-header-right { display: flex; align-items: center; gap: 10px; }
/* Clock, system monospace + tabular nums + reserved width so the
   header tabs to its left don't shift each second as the digits
   roll. font-variant-numeric alone wasn't enough; the UI font's
   tabular variant doesn't lock the width tightly. */
.fd-clock {
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-heading);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  min-width: 8ch;
  text-align: right;
  display: inline-block;
}
.fd-updated { font-size: 9px; color: var(--fd-muted); }
/* Open/Closed chip next to the clock, from the location's configured
   business hours. Absent entirely when no hours are set. */
.fd-hours-chip {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
}
.fd-hours-chip.open { color: var(--fd-green); background: var(--fd-green-dim); border: 1px solid var(--fd-green); }
.fd-hours-chip.closed { color: var(--fd-muted); background: var(--fd-surface-alt); border: 1px solid var(--fd-border); }
.fd-status { color: var(--fd-green); font-size: 9px; animation: pulse-green 2s ease-in-out infinite; }
/* ── Header toolbar iconography ──
   Shared treatment for every icon-only header button: 28px rounded
   square, quiet border, muted stroke icon that lifts to the accent on
   hover. Icons are inline SVGs (16px, stroke currentColor) so they
   render crisply at any DPI and follow theme colours automatically. */
.fd-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}
.fd-icon-btn {
  background: none;
  border: 1px solid var(--fd-border);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  color: var(--fd-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--fd-transition), border-color var(--fd-transition), background var(--fd-transition);
}
.fd-icon-btn:hover {
  color: var(--fd-accent);
  border-color: var(--fd-accent);
  background: var(--fd-accent-dim, rgba(20, 184, 166, 0.08));
}

/* Emergency-sound toggle. Sits next to the help button. Visual
   state mirrors the localStorage preference (fd-emergency-sound):
     undefined  pulsing bell with slash; prompts the receptionist
                to make a choice on first visit
     "on"       solid bell, green border
     "off"      static bell with slash, muted border
   Browser autoplay policy needs a user gesture before audio will
   actually play, so the click on this button doubles as that
   gesture and primes the AudioContext for subsequent bells. */
.fd-sound-toggle.fd-sound-on {
  color: var(--fd-green);
  border-color: var(--fd-green);
}
.fd-sound-toggle.fd-sound-prompt {
  animation: fd-sound-prompt-pulse 1.8s ease-in-out infinite;
}
@keyframes fd-sound-prompt-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45); }
  50%      { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0); }
}

.fd-error {
  background: var(--fd-red-dim); border: 1px solid var(--fd-red);
  color: var(--fd-red); padding: 4px 10px; border-radius: var(--fd-radius); font-size: 12px;
}

/* Front desk workbench */

.fd-workbench {
  grid-column: 1 / -1;
  display: grid;
  /* Right pane is CAPPED at 500px: on wide monitors an uncapped
     0.65fr let it balloon past 800px, stretching every section card
     and pushing action buttons to the horizon. The queue takes the
     remaining space (itself capped by .fd-main's max-width). */
  grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
  /* Explicit single-row track so the two panels stretch to fill
     the workbench height. Without this the row is auto-sized to
     content, leaving empty background below the cards on screens
     taller than the queue. */
  grid-template-rows: 1fr;
  gap: 10px;
  min-height: 0;
}

.fd-work-panel {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  min-height: 0;
  overflow: hidden;
}

.fd-work-primary {
  display: flex;
  flex-direction: column;
  /* Without min-height:0 the flex column fills its content
     height instead of being bounded by the parent grid cell
     which prevented .fd-work-list from ever overflowing and
     scrolling when the queue grew past one screenful. */
  min-height: 0;
}

.fd-work-side {
  /* Same shape as .fd-work-primary so the selected-card inside
     can flex to fill the full grid-cell height. Without this
     the panel fits its content and the bottom got cut off
     when the contact had a lot of sections. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fd-work-side > .fd-work-panel { flex: 1; min-height: 0; }

.fd-work-header,
.fd-work-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--fd-border);
}

.fd-work-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Queue reach selector: sits opposite the Work Queue title and filters
   both tabs plus every count to the chosen window. */
.fd-period-select {
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-muted);
  background: transparent;
  border: 1px solid var(--fd-border);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
}
.fd-period-select:hover,
.fd-period-select:focus {
  border-color: var(--fd-accent);
  color: var(--fd-heading);
  outline: none;
}

.fd-work-header h2,
.fd-work-mini-head h3,
.fd-selected-head h3 {
  color: var(--fd-heading);
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fd-selected-head h3 .fd-selected-name-edit {
  flex: 1;
  min-width: 0;
}

.fd-work-header p,
.fd-selected-head p {
  color: var(--fd-muted);
  font-size: 12px;
  margin-top: 2px;
}

.fd-work-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 6px;
}

/* Primary view tabs (Active leads / Callbacks) sit on the left
   of the tab row, the existing Needs-action / All filter sits on
   the right. The KPI summary that used to live here was removed
   per user feedback ("doesn't help") — counts now live on the
   tabs themselves. */
.fd-work-tab-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Communication streams bar ──
   Chip-styled tabs above Unread/All. One consolidated "All" plus the
   five streams; each shows its unread count. Colors identify streams
   at a glance and match the card badges below.
   (2026-07-04: this file's hash was deliberately bumped once — browsers
   that fetched during the two-instance rollout had the previous
   stylesheet immutable-cached under this version's URL; a content
   change rotates the URL and evicts it on a normal reload.) */
/* Stream chips + Unread/All toggle on one row (chips left, toggle
   right) to save vertical space. Wraps gracefully when narrow. */
.fd-stream-tab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin: 2px 0 8px;
}
.fd-stream-tab-row .fd-stream-bar { margin: 0; flex: 1 1 auto; min-width: 0; }
.fd-stream-tab-row .fd-work-tab-row { flex: 0 0 auto; }
.fd-stream-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 8px;
}
.fd-stream-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--fd-border);
  background: transparent;
  color: var(--fd-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.fd-stream-chip:hover { border-color: var(--fd-accent); color: var(--fd-text); }
.fd-stream-chip.active {
  background: var(--fd-accent-dim, rgba(20, 184, 166, 0.15));
  border-color: var(--fd-accent);
  color: var(--fd-accent);
}
.fd-stream-count {
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  min-width: 16px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 8px;
  background: var(--fd-border);
  color: var(--fd-text);
}
/* Per-stream identity colors: active chip + its count pill. Ads run
   hot (amber); pipeline blue; customers purple; unknown neutral. */
.fd-stream-chip.stream-ad.active       { background: rgba(239, 159, 39, 0.15);  border-color: #ba7517; color: #ba7517; }
.fd-stream-chip.stream-pipeline.active { background: rgba(55, 138, 221, 0.15);  border-color: #378add; color: #185fa5; }
.fd-stream-chip.stream-customer.active { background: rgba(127, 119, 221, 0.15); border-color: #7f77dd; color: #534ab7; }
.fd-stream-chip.stream-unknown.active  { background: rgba(136, 135, 128, 0.15); border-color: #888780; color: #5f5e5a; }
.fd-stream-chip.stream-ad .fd-stream-count { background: rgba(239, 159, 39, 0.25); color: #854f0b; }

/* New-activity alert: the chip takes its stream color and pulses until
   clicked. Color persists (motion stops) under reduced-motion. */
@keyframes fd-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(20, 184, 166, 0); }
}
.fd-stream-chip.fd-stream-chip-new {
  border-color: var(--fd-accent);
  color: var(--fd-accent);
  animation: fd-chip-pulse 1.6s ease-in-out infinite;
}
.fd-stream-chip.stream-ad.fd-stream-chip-new       { border-color: #ba7517; color: #ba7517; }
.fd-stream-chip.stream-pipeline.fd-stream-chip-new { border-color: #378add; color: #185fa5; }
.fd-stream-chip.stream-customer.fd-stream-chip-new { border-color: #7f77dd; color: #534ab7; }
.fd-stream-chip.stream-unknown.fd-stream-chip-new  { border-color: #888780; color: #5f5e5a; }
.fd-stream-chip.fd-stream-chip-new .fd-stream-count {
  background: var(--fd-accent);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .fd-stream-chip.fd-stream-chip-new { animation: none; }
}

/* ── Loading states (2026-07-04 design, user-approved) ──
   A: skeleton queue on first paint. B2: inbox-tray pulse for
   panel-sized loads. C: slim "refresh whisper" bar for background
   updates. All respect prefers-reduced-motion. */
@keyframes fd-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.fd-sk {
  display: inline-block;
  background: linear-gradient(90deg, var(--fd-border) 25%, var(--fd-surface-alt) 50%, var(--fd-border) 75%);
  background-size: 200% 100%;
  animation: fd-shimmer 1.6s ease-in-out infinite;
  opacity: 0.7;
}
.fd-sk-streams { display: flex; gap: 6px; margin: 2px 0 12px; }
.fd-sk-chip { height: 24px; border-radius: 999px; }
.fd-sk-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--fd-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.fd-sk-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.fd-sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.fd-sk-bar { height: 11px; border-radius: 6px; }
.fd-sk-btn { width: 96px; height: 30px; border-radius: 8px; flex: none; }

.fd-pulse-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px;
}
.fd-pulse { position: relative; width: 76px; height: 76px; margin-bottom: 18px; }
.fd-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--fd-accent);
  opacity: 0;
  animation: fd-ripple 2.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.fd-pulse-ring:nth-child(2) { animation-delay: 0.55s; }
.fd-pulse-ring:nth-child(3) { animation-delay: 1.1s; }
@keyframes fd-ripple {
  0% { transform: scale(0.42); opacity: 0.75; }
  100% { transform: scale(1.15); opacity: 0; }
}
.fd-pulse-core {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: var(--fd-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-pulse-core svg { display: block; }
.fd-pulse-label { font-size: 13px; font-weight: 600; color: var(--fd-muted); }
.fd-pulse-wrap.compact { padding: 22px 12px; }
.fd-pulse-wrap.compact .fd-pulse { width: 52px; height: 52px; margin-bottom: 12px; }
.fd-pulse-wrap.compact .fd-pulse-core { inset: 16px; }

.fd-refresh-track {
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0 6px;
  background: transparent;
}
.fd-refresh-track.active { background: var(--fd-accent-dim, rgba(20, 184, 166, 0.15)); }
.fd-refresh-track .fd-refresh-fill {
  display: none;
  height: 100%;
  width: 34%;
  border-radius: 2px;
  background: var(--fd-accent);
}
.fd-refresh-track.active .fd-refresh-fill {
  display: block;
  animation: fd-slide 1.3s cubic-bezier(0.45, 0, 0.4, 1) infinite;
}
@keyframes fd-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

@media (prefers-reduced-motion: reduce) {
  .fd-sk, .fd-pulse-ring, .fd-refresh-track.active .fd-refresh-fill { animation: none; }
}

/* Deep-lead "Load more" on the All tab. */
.fd-loadmore {
  display: block;
  width: 100%;
  margin: 8px 0 4px;
  padding: 10px;
  border: 1px dashed var(--fd-border);
  border-radius: 10px;
  background: transparent;
  color: var(--fd-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.fd-loadmore:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
.fd-loadmore:disabled { opacity: .6; cursor: default; }

/* ── Contact-pane accordion (2026-07-04) ──
   Lightweight collapsible summary strips above the existing section
   cards. Uses only the app's own --fd-* tokens so the sections keep
   their exact look; the accordion only adds the strip + collapse. */
.fd-acc-list { display: flex; flex-direction: column; }
.fd-acc { border-top: 1px solid var(--fd-border); }
.fd-acc:last-child { border-bottom: 1px solid var(--fd-border); }
.fd-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.fd-acc-head:hover .fd-acc-sum { color: var(--fd-accent); }
.fd-acc-ic {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--fd-surface-alt); color: var(--fd-muted);
}
.fd-acc.open .fd-acc-ic { background: var(--fd-accent-glow, rgba(20,184,166,.1)); color: var(--fd-accent); }
.fd-acc-ic-svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fd-acc-sum {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 700; color: var(--fd-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-acc-badge {
  flex: none; font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 6px; background: var(--fd-surface-alt); color: var(--fd-muted); letter-spacing: .02em;
}
.fd-acc-badge-open, .fd-acc-badge-due { background: var(--fd-amber-dim, rgba(245,158,11,.1)); color: var(--fd-amber); }
.fd-acc-badge-won, .fd-acc-badge-showed, .fd-acc-badge-confirmed { background: var(--fd-green-dim, rgba(34,197,94,.1)); color: var(--fd-green); }
.fd-acc-badge-lost, .fd-acc-badge-abandoned, .fd-acc-badge-noshow { background: var(--fd-red-dim, rgba(239,68,68,.1)); color: var(--fd-red); }
.fd-acc-chev { width: 14px; height: 14px; flex: none; stroke: var(--fd-muted); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.fd-acc.open .fd-acc-chev { transform: rotate(180deg); }
/* Pin: keep a section open on every contact. Subtle until hovered or
   active; a pinned row shows a filled pin and dims its (inert) chevron. */
.fd-acc-pin {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px;
  background: transparent; color: var(--fd-muted); cursor: pointer;
  opacity: .5; transition: opacity .15s, color .15s, background .15s;
}
.fd-acc-head:hover .fd-acc-pin { opacity: .9; }
.fd-acc-pin:hover { background: var(--fd-surface-alt); color: var(--fd-heading); opacity: 1; }
.fd-acc-pin.active { color: var(--fd-accent); opacity: 1; }
.fd-acc-pin-svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fd-acc.pinned .fd-acc-pin-svg { fill: currentColor; }
.fd-acc.pinned .fd-acc-chev { opacity: .3; }
/* Drag handle + reorder feedback. */
.fd-acc-grip {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 16px; height: 22px; margin: 0 -2px 0 -2px;
  color: var(--fd-border); cursor: grab; opacity: .55;
  transition: opacity .15s, color .15s;
}
.fd-acc-head:hover .fd-acc-grip { opacity: 1; color: var(--fd-muted); }
.fd-acc-grip:active { cursor: grabbing; }
.fd-acc-grip-svg { width: 13px; height: 13px; fill: currentColor; }
.fd-acc-dragging { opacity: .4; }
.fd-acc-drop-before { box-shadow: inset 0 2px 0 0 var(--fd-accent); }
.fd-acc-drop-after { box-shadow: inset 0 -2px 0 0 var(--fd-accent); }
/* Bodies hold the existing section cards untouched (own borders, the
   appointment's green tint, all of it). Collapsed = hidden; open =
   the same cards, spaced, exactly as they look today. */
.fd-acc-body { display: none; padding: 2px 0 12px; }
.fd-acc.open .fd-acc-body { display: flex; flex-direction: column; gap: 8px; }

/* Voice AI call summary block on the right pane. */
.fd-ai-call .fd-ai-call-meta {
  font-weight: 400;
  font-size: 11px;
  color: var(--fd-muted);
  margin-left: 6px;
}
.fd-ai-call .fd-ai-call-summary {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fd-text);
  white-space: pre-wrap;
}

/* Stream badge on cards (consolidated view only). */
.fd-stream-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
}
.fd-stream-badge.stream-ad       { background: rgba(239, 159, 39, 0.18);  color: #ba7517; }
.fd-stream-badge.stream-pipeline { background: rgba(55, 138, 221, 0.15);  color: #185fa5; }
.fd-stream-badge.stream-customer { background: rgba(127, 119, 221, 0.16); color: #534ab7; }
.fd-stream-badge.stream-unknown  { background: rgba(136, 135, 128, 0.16); color: #5f5e5a; }

.fd-work-tabs-primary {
  font-size: 13px;
}

.fd-work-tabs-primary button {
  font-size: 13px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.fd-tab-count {
  background: var(--fd-surface);
  color: var(--fd-muted);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 1px 7px;
  border: 1px solid var(--fd-border);
}

.fd-work-tabs-primary button.active .fd-tab-count {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  border-color: transparent;
}

.fd-tab-count-alert {
  background: var(--fd-red-dim);
  color: var(--fd-red);
  border-color: transparent;
}

.fd-work-tabs-primary button.active .fd-tab-count-alert {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Subline on an active-lead card — treatment interest · phone ·
   submitted-at. Replaces the previous reason / appointment /
   workflow-chip stack. */
.fd-work-subline {
  color: var(--fd-muted);
  font-size: 12px;
  margin-top: 3px;
  line-height: 1.4;
}

/* Task chip — the "what to do next" hint that sits beside the
   name on every queue row (active leads + callbacks). Subtle
   gray pill with an accent arrow, NOT a button. Tells reception
   the physical task ("call them back") without competing with
   the Action CTA on the right. */
.fd-task-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--fd-surface-alt);
  color: var(--fd-muted);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--fd-border);
}
.fd-task-arrow {
  font-size: 12px;
  line-height: 1;
  color: var(--fd-accent);
}

/* Actioned-by-click state on an active-lead row. Visible only
   in the All filter (Needs action hides actioned items). Row
   dims, name strikes through, avatar gets a small green ✓,
   and the primary Action button is swapped for a quiet Undo
   outline so a mistake-click is recoverable. */
.fd-work-item.fd-work-actioned {
  opacity: 0.62;
  background: var(--fd-surface-alt);
}
.fd-work-item.fd-work-actioned .fd-work-title-row strong {
  text-decoration: line-through;
  text-decoration-color: var(--fd-muted);
}
.fd-work-item.fd-work-actioned .fd-work-avatar {
  position: relative;
}
.fd-work-item.fd-work-actioned .fd-work-avatar::after {
  content: "✓";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background: var(--fd-green);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--fd-surface);
}

/* Undo button — wins specificity over .fd-work-actions
   button:first-child by adding a class selector. */
.fd-work-actions button.fd-undo-btn {
  background: transparent;
  color: var(--fd-muted);
  border-color: var(--fd-border);
}
.fd-work-actions button.fd-undo-btn:hover {
  color: var(--fd-heading);
  border-color: var(--fd-heading);
}

/* Hide the row-overlay urgency labels (CONTACT NOW / WITHIN 1HR /
   UNREACHABLE). User feedback: "I don't want any of those badges".
   The row background gradients stay as a subtle ambient cue;
   EMERGENCY is kept intentionally because it's medical, not a
   sales-funnel signal. */
.fd-work-item.urgency-lead-now::before,
.fd-work-item.urgency-lead-hour::before,
.fd-work-item.urgency-unreachable::before {
  content: none;
}

.fd-work-tabs button {
  border: 0;
  background: transparent;
  color: var(--fd-muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}

/* Active state on tabs and filter pills — inverted (accent
   background, white text) so reception can see at a glance which
   tab + filter combination they're on. Same treatment for primary
   tabs (Active leads / Callbacks) and filter buttons (Needs action
   / All); the badge inside primary tabs gets a light-on-dark
   adjustment below so the count stays legible against the accent
   fill. */
.fd-work-tabs button.active {
  background: var(--fd-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.fd-work-list,
.fd-live-list {
  overflow: auto;
  min-height: 0;
  /* flex:1 inside .fd-work-primary so the list fills the
     remaining vertical space below the header + live banner
     and overflows to scroll when the queue's longer than
     one screenful. */
  flex: 1;
  padding: 8px;
}

/* ── Missed calls section ──
   Pinned above the work queue list. Calls are a primary lead
   source and time-sensitive, so this section sits above the
   normal queue regardless of which tab the receptionist's on. */
/* ── Unified inbox: missed-call context on queue rows ── */
/* Reason chip: WHY this card is in Unread ("Missed call",
   "Follow-up due", "New message", "Appointment", "New lead",
   "Task due"). Sits beside the name in the title row. */
.fd-reason-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  background: var(--fd-accent-dim, rgba(20, 184, 166, 0.15));
  color: var(--fd-accent);
  white-space: nowrap;
}
/* Missed-call subline on a queue row (☎ / voicemail marker, repeat
   count, number, time since). */
.fd-work-missed-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--fd-red);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-missed-repeat {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  background: var(--fd-red);
  color: white;
}

/* Right-pane "unknown caller" create-contact action card */
.fd-missed-action-card {
  padding: 12px;
  border: 1px solid var(--fd-border);
  border-radius: 8px;
  background: var(--fd-surface-alt);
}
.fd-missed-action-title {
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--fd-heading);
}
.fd-missed-action-hint {
  font-size: 12px;
  color: var(--fd-muted);
  margin: 0 0 12px;
}
.fd-missed-create-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-missed-create-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--fd-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fd-missed-create-form input {
  padding: 6px 8px;
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  background: var(--fd-surface);
  color: var(--fd-body);
  font-size: 13px;
}
.fd-missed-create-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.fd-missed-create-actions .primary {
  background: var(--fd-accent);
  color: white;
  border-color: var(--fd-accent);
}
.fd-missed-create-status {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
}
.fd-missed-create-status.ok  { background: var(--fd-green-dim, rgba(20, 200, 80, 0.12)); color: var(--fd-green); }
.fd-missed-create-status.err { background: var(--fd-red-dim);  color: var(--fd-red); }

.fd-work-item {
  display: grid;
  grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--fd-border);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--fd-surface);
  cursor: pointer;
  margin-bottom: 8px;
  transition: background var(--fd-transition), border-color var(--fd-transition), box-shadow var(--fd-transition);
}

.fd-work-item:hover {
  background: var(--fd-surface-alt);
  border-color: var(--fd-accent);
}

/* Selected work item, bigger visual handshake so the
   receptionist can spot which card the right panel is showing.
   Accent-tinted background, beefier left stripe, soft lift. */
.fd-work-item.selected {
  background: var(--fd-accent-glow);
  border-color: var(--fd-accent);
  border-left-width: 6px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18);
}

/* Left-edge stripe communicates completion state, not signal
   priority. Default amber means "needs action"; green means the
   receptionist has actioned this contact already (real call on file
   or future booked appointment). Red is intentionally absent so it
   does not double up with the urgency-lead-now row wash / ribbon
   for fresh leads, which is where real urgency lives now. */
.fd-work-item.priority-high { border-left-color: var(--fd-amber); }
.fd-work-item.priority-medium { border-left-color: var(--fd-amber); }
.fd-work-item.priority-low { border-left-color: var(--fd-green); }
.fd-work-item.state-handled { border-left-color: var(--fd-green); }
.fd-work-item.starred { box-shadow: inset 0 0 0 1px var(--fd-amber); }

/* Right-edge flair stripes removed, competed with the left-edge
   priority stripe for the receptionist's eye. Patient-type signal
   is now carried by the inline "NEW" / "EXISTING" chip in the
   title row (renderPatientTypeChip), which sits next to name and
   day-counter / next-action chips. Emergency / urgent contacts
   surface via the priority stripe and the next-action chip tone. */

/* Existing-patient row tint. New patients are the default queue
   resident, so the implicit no-tint state represents new. Existing
   patients get a soft full-card background wash so the receptionist
   can spot a returning patient at a glance when scanning a column
   of cards, without forcing them to read the inline EXISTING chip
   on every row.
   Implementation note: background-color only (not the shorthand)
   so urgency-state background gradients (urgency-lead-now,
   urgency-lead-hour, urgency-unreachable) override the tint
   cleanly via the normal cascade when both classes are present.
   flair-emergency is intentionally left unstyled here; emergency
   contacts should keep the existing priority and next-action
   treatment until we redesign that signal in its own pass. */
.fd-work-item.flair-existing-customer {
  background-color: var(--fd-accent-glow);
}
.fd-work-item.flair-existing-customer:hover {
  background-color: var(--fd-surface-alt);
}

/* Last-call chip on the work-queue card title row + the panel
   header's contact-meta strip. Compact "← 14 May" or "→ 14 May"
   with the arrow indicating call direction. */
.fd-work-last-call {
  font-size: 10px;
  color: var(--fd-muted);
  font-weight: 600;
  padding: 1px 6px;
  border: 1px solid var(--fd-border);
  border-radius: 3px;
  background: var(--fd-surface-alt);
  white-space: nowrap;
}
/* Attempts chip, outbound non-connects since last conversation.
   Amber tint to flag "we keep trying and not getting through". */
.fd-work-attempts {
  font-size: 10px;
  color: #fff;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--fd-amber, #f59e0b);
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* Day counter chip for new patients, visualises the 6-day
   nurture window. Solid coloured background + white text for
   high-contrast prominence (the user flagged the previous
   tinted-background style as "not bright enough"). Colour
   shifts as the contact ages toward the Day-7 cutoff. */
/* Acquisition-channel chip, shows where the lead came from
   (Google Ads / Google Business / TikTok / Facebook / Facebook
   Ads / Instagram / Website Form). Brand-coloured backgrounds
   with white text, sized to sit alongside the day-counter and
   last-call chips on the work-queue card title row. */
.fd-channel-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  color: #fff;
  background: var(--fd-muted);
  text-transform: uppercase;
}
.fd-channel-google-ads     { background: #4285f4; }  /* Google blue */
.fd-channel-google-business { background: #34a853; }  /* Google green */
.fd-channel-tiktok          { background: #000;     border: 1px solid #25f4ee; }
.fd-channel-facebook        { background: #1877f2; }  /* Facebook blue */
.fd-channel-facebook-ads    { background: #0967d2; border: 1px solid #1877f2; }
.fd-channel-instagram       { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.fd-channel-form            { background: var(--fd-purple, #8b5cf6); }
.fd-channel-manual          { background: var(--fd-muted); }
.fd-channel-api             { background: var(--fd-muted); }

/* Next-action chip, replaces the channel chip on the card title
   row. Tells the receptionist what to do next; tones map to
   urgency. Solid background + white text for high contrast. */
.fd-next-action {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  color: #fff;
  text-transform: uppercase;
}
.fd-next-action-red   { background: var(--fd-red,   #ef4444); }
.fd-next-action-amber { background: var(--fd-amber, #f59e0b); }
.fd-next-action-blue  { background: var(--fd-accent); }
.fd-next-action-grey  { background: var(--fd-muted); }

.fd-work-day-counter {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.4px;
  color: #fff;
  text-transform: uppercase;
}
.fd-work-day-fresh { background: var(--fd-accent); }
.fd-work-day-early { background: var(--fd-green); }
.fd-work-day-mid   { background: var(--fd-amber, #f59e0b); }
.fd-work-day-late  { background: var(--fd-red,   #ef4444); }
.fd-work-day-stale { background: var(--fd-muted); }

/* Lead-urgency flair: brand-new leads we haven't reached yet
   bubble to the top with a visible CTA pulse. lead-now is the
   "5-minute window", the receptionist should ring them right
   now. lead-hour is the looser "1-hour acceptable" window.
   unreachable demotes contacts after 5+ failed outbound attempts
   so the queue stays useful. */
.fd-work-item.urgency-lead-now {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), transparent 40%);
  position: relative;
}
.fd-work-item.urgency-lead-now::before {
  content: "CONTACT NOW";
  position: absolute;
  top: -8px;
  left: 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  background: var(--fd-red);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 2;
  animation: fd-urgent-pulse 1.6s ease-in-out infinite;
}
.fd-work-item.urgency-lead-hour {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.06), transparent 40%);
  position: relative;
}
.fd-work-item.urgency-lead-hour::before {
  content: "WITHIN 1HR";
  position: absolute;
  top: -8px;
  left: 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  background: var(--fd-amber, #f59e0b);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 2;
}
.fd-work-item.urgency-unreachable {
  opacity: 0.55;
}
.fd-work-item.urgency-unreachable::before {
  content: "UNREACHABLE";
  position: absolute;
  top: -8px;
  left: 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  background: var(--fd-muted);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 2;
}
@keyframes fd-urgent-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.04); }
}

/* Emergency flair. Wins over every other urgency tier visually
   and in the sort order (-300 weight in workItemUrgencyWeight).
   Defined after the urgency-lead-* rules so the cascade resolves
   in its favour when an emergency contact also happens to be
   inside the 5-minute speed-to-lead window. Source is a contact
   tag containing "emergency" or "urgent", applied by the
   qualification workflow. */
.fd-work-item.flair-emergency {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), transparent 50%);
  position: relative;
  border-left-color: var(--fd-red);
  box-shadow: inset 0 0 0 1px var(--fd-red);
}
.fd-work-item.flair-emergency::before {
  content: "EMERGENCY";
  position: absolute;
  top: -8px;
  left: 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  background: var(--fd-red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  z-index: 3;
  animation: fd-urgent-pulse 1.8s ease-in-out infinite;
}

/* Age-based urgency tiers on the work-queue card. Used past the
   first hour, when a lead is still uncalled but the speed-to-lead
   window has closed. The day-counter chip in the title row carries
   the explicit "Day N" label; the row treatment here is the ambient
   signal you catch while scanning, paired with the urgency sort
   weight so older uncalled leads bubble back toward the top of the
   Needs Action list on Day 3 and Day 5 before fading out at Day 7. */
.fd-work-item.urgency-lead-day3 {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent 40%);
}
.fd-work-item.urgency-lead-day5 {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.10), transparent 40%);
}
.fd-work-item.urgency-lead-stale {
  opacity: 0.65;
}

/* Attempts chip in the right-panel meta strip. */
.fd-contact-meta-attempts em {
  font-style: normal;
  color: var(--fd-amber, #f59e0b);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-right: 2px;
}
.fd-contact-meta-call em {
  font-style: normal;
  color: var(--fd-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-right: 2px;
}

.fd-work-star {
  border: 0;
  background: transparent;
  color: var(--fd-amber);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.fd-work-avatar,
.fd-live-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fd-accent-glow);
  color: var(--fd-accent);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.fd-work-avatar.large {
  width: 34px;
  height: 34px;
  font-size: 11px;
}

.fd-work-body { min-width: 0; }

.fd-work-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fd-work-title-row strong {
  color: var(--fd-heading);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Plain-span styling removed, used to target the old item.type
   label ("Unread message") that was dropped in PR #82. Today every
   span inside the title row carries a class of its own
   (.fd-channel-chip / .fd-work-day-counter / .fd-work-last-call /
   .fd-work-attempts) and brings its own colour, so the generic
   rule was just bleeding muted-grey text onto the channel chip
   and making "WEBSITE FORM" read as faint blue on purple. */

.fd-work-reason {
  color: var(--fd-heading);
  font-size: 13px;
  margin-top: 2px;
}

.fd-work-detail,
.fd-work-meta {
  color: var(--fd-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-work-meta {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.fd-work-meta span:not(:last-child)::after {
  content: "";
}

.fd-work-actions,
.fd-selected-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Pin the right-pane action row (Contact / Messaging / Done) to
   the bottom of the panel. The ID-trace block sits below it in
   DOM order so it lands at the very bottom edge. If the content
   exceeds the panel height, margin-top: auto degrades to 0 and
   the layout falls back to natural flow (no scrollbar wrestle). */
.fd-selected-card .fd-selected-body > .fd-selected-actions {
  margin-top: auto;
}

.fd-work-actions button,
.fd-selected-actions button {
  border: 1px solid var(--fd-border);
  background: var(--fd-surface-alt);
  color: var(--fd-heading);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
}

.fd-work-actions button:first-child,
.fd-selected-actions button:first-child {
  background: var(--fd-accent);
  border-color: var(--fd-accent);
  color: #fff;
}

/* Done is the primary CTA regardless of position (a Text back button
   may sit before it, taking :first-child). Declared after the
   :first-child rule so source order settles the tie for Text back. */
.fd-work-actions button.fd-done-btn {
  background: var(--fd-accent);
  border-color: var(--fd-accent);
  color: #fff;
}
.fd-work-actions button.fd-textback-btn {
  background: var(--fd-surface-alt);
  border-color: var(--fd-border);
  color: var(--fd-heading);
}
.fd-work-actions button.fd-textback-btn:hover {
  border-color: var(--fd-accent);
  color: var(--fd-accent);
}

.fd-selected-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Anchor for the absolutely-positioned .fd-panel-loading-overlay */
  position: relative;
}
.fd-selected-card .fd-selected-head {
  /* Sticky header, name, chip, phone/email/last-inbound stay
     visible while the receptionist scrolls through the rest of
     the panel sections (matches the behaviour of the opportunity
     modal where the title row stays put). Compact padding so the
     header doesn't dominate higher-resolution displays. */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--fd-surface);
  border-bottom: 1px solid var(--fd-border);
  padding: 10px 12px;
  margin-bottom: 0;
  gap: 8px;
  align-items: flex-start;
}
.fd-selected-card .fd-selected-body {
  overflow-y: auto;
  flex: 1;
  padding: 10px 12px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-last-activity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--fd-surface-alt);
  border-left: 3px solid var(--fd-accent);
  border-radius: 4px;
  font-size: 12px;
  color: var(--fd-heading);
}
.fd-last-activity-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fd-muted);
}
.fd-last-activity-icon { font-size: 13px; }
.fd-last-activity-text { flex: 1; font-weight: 600; }
.fd-last-activity-when { color: var(--fd-muted); font-size: 11px; }

/* Latest inbound message line at the top of the selected pane. Shows a
   snippet of what the contact last said; emphasised when the thread is
   unread so a "I need to cancel" text is impossible to miss. */
.fd-latest-msg {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--fd-border);
  border-radius: 6px;
  background: var(--fd-surface);
  font-size: 12px;
}
.fd-latest-msg.unread {
  border-color: var(--fd-accent);
  background: var(--fd-accent-glow);
}
.fd-latest-msg-icon { color: var(--fd-accent); font-weight: 700; flex: none; }
.fd-latest-msg-channel {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fd-muted);
}
.fd-latest-msg-body {
  flex: 1;
  min-width: 0;
  color: var(--fd-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-latest-msg.unread .fd-latest-msg-body { font-weight: 600; }
.fd-latest-msg-when { flex: none; color: var(--fd-muted); font-size: 11px; }
.fd-selected-card .fd-selected-body::-webkit-scrollbar { width: 4px; }
.fd-selected-card .fd-selected-body::-webkit-scrollbar-thumb {
  background: var(--fd-border); border-radius: 2px;
}

/* Contact-meta strip under the name: phone, email, last-inbound
   chips. Compact, single-line on wide panels, wraps on narrow. */
.fd-contact-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--fd-muted);
}
.fd-contact-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fd-text);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background 0.12s;
}
.fd-contact-meta-item:hover {
  background: var(--fd-surface-alt);
}
.fd-contact-meta-icon {
  font-size: 10px;
  opacity: 0.7;
  font-style: normal;
}
.fd-contact-meta-inbound em {
  font-style: normal;
  color: var(--fd-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-right: 2px;
}

.fd-selected-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.fd-selected-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.fd-selected-grid div {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 6px;
  padding: 8px;
}

.fd-selected-grid span {
  display: block;
  color: var(--fd-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.fd-selected-grid strong {
  display: block;
  color: var(--fd-heading);
  font-size: 13px;
  margin-top: 2px;
}

.fd-selected-note {
  color: var(--fd-body);
  font-size: 13px;
  margin-bottom: 12px;
}

.fd-stage-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--fd-accent);
  border-radius: 999px;
  background: var(--fd-accent-glow);
  color: var(--fd-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 8px;
}

.fd-stage-pill.large {
  font-size: 12px;
  white-space: normal;
}

.fd-queue-appt {
  width: fit-content;
  background: var(--fd-green-dim);
  border: 1px solid var(--fd-green);
  border-radius: 5px;
  color: var(--fd-green);
  font-size: 11px;
  font-weight: 800;
  margin-top: 6px;
  padding: 4px 7px;
}

.fd-selected-appt {
  /* Green-tinted background pairs with the blue-tinted opportunity
     card above. Border-left accent matches the colour-coded section
     pattern (opp → blue, appt → green). */
  background: var(--fd-green-dim);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-left: 3px solid var(--fd-green);
  border-radius: 6px;
  color: var(--fd-heading);
  margin-bottom: 12px;
  padding: 9px;
}
.fd-selected-appt > span {
  color: var(--fd-green);
}
/* Top row: section label on the left, Edit Booking button on
   the right. Same layout as the Opportunity card's title row
   so the two cards feel like siblings. */
/* Single-column appointment card layout. Modal content (outcome
   prompt / future choice / outcome done) now lives directly on
   the green-tinted card. Buttons keep their modal-style neutral
   backgrounds with coloured outlines so they stand out against
   the green tint. */
.fd-selected-appt-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(16, 185, 129, 0.35);
  margin-bottom: 8px;
}
.fd-selected-appt-prompt {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fd-green);
  margin-bottom: 8px;
}
.fd-selected-appt-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.fd-selected-appt-action-row.three {
  grid-template-columns: repeat(3, 1fr);
}
/* On the green card the modal buttons need a slightly more solid
   background so they read clearly against the green tint. */
.fd-selected-appt .fd-amend-btn,
.fd-selected-appt .fd-outcome-btn {
  background: #fff;
  padding: 10px 8px;
  font-size: 12px;
}
.fd-selected-appt .fd-amend-btn:hover:not(:disabled),
.fd-selected-appt .fd-outcome-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.85);
}
.fd-selected-appt .fd-outcome-btn.selected {
  background: var(--fd-accent);
  color: #fff;
  border-color: var(--fd-accent);
}
.fd-selected-appt .fd-outcome-btn.fd-outcome-showed.selected {
  background: var(--fd-green); border-color: var(--fd-green); color: #fff;
}
.fd-selected-appt .fd-outcome-btn.fd-outcome-noshow.selected {
  background: var(--fd-red, #ef4444); border-color: var(--fd-red, #ef4444); color: #fff;
}

/* Confirmation slot, appears beneath the buttons once one is
   clicked. Holds the optional notes textarea + Save row + any
   validation warnings. */
.fd-selected-appt-outcome-confirm:empty { display: none; }
.fd-selected-appt-outcome-confirm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(16, 185, 129, 0.25);
}
.fd-selected-appt-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid var(--fd-amber, #f59e0b);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11px;
  color: var(--fd-heading);
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.fd-selected-appt-warning span { color: var(--fd-amber, #f59e0b); font-weight: 800; }
.fd-selected-appt-note-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fd-muted);
}
.fd-selected-appt-note-label textarea {
  font-size: 12px;
  padding: 6px;
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.7);
  color: var(--fd-heading);
  font-family: inherit;
}
.fd-selected-appt-confirm-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.fd-selected-appt-cancel-confirm,
.fd-selected-appt-save {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.fd-selected-appt-cancel-confirm {
  background: transparent;
  border: 1px solid var(--fd-border);
  color: var(--fd-muted);
}
.fd-selected-appt-save {
  background: var(--fd-green);
  border: 1px solid var(--fd-green);
  color: #fff;
}
.fd-selected-appt-save:disabled { opacity: 0.55; cursor: not-allowed; }

/* Outcome-done summary inside the right column. */
.fd-selected-appt-outcome-summary {
  font-size: 12px;
  color: var(--fd-heading);
}
.fd-selected-appt-col-right .fd-selected-appt-undo {
  align-self: flex-start;
  margin-top: 2px;
}

.fd-selected-appt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
/* "Outcome needed" pill in the card header for past appointments
   that haven't had their outcome recorded yet. Solid red with
   white text, same chip-style as the next-action chip on the
   work-queue card so the visual language is consistent. */
.fd-selected-appt-action-needed {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  background: var(--fd-red, #ef4444);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.fd-selected-appt-edit {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--fd-green);
  background: transparent;
  color: var(--fd-green);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fd-selected-appt-edit:hover { background: rgba(16, 185, 129, 0.12); }

/* Inline status row, mirrors the Opportunity quick-card's
   editable field shape. Pre-loaded select; status pip
   announces save state next to it. */
/* Outcome buttons for past/today appointments, replaces the
   inline status dropdown for the day-of follow-up. Three
   explicit buttons sized equally; click triggers both the
   appointment status update AND the chained opportunity status
   change via /api/appointment. */
/* Read-only status row on the simplified right-panel card. */
.fd-selected-appt-status-readonly {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fd-heading);
}
.fd-selected-appt-status-readonly b { font-weight: 700; }

/* Appointment status pill, tone-coded so confirmed/cancelled/
   showed/noshow are visually distinct against the green appointment
   card. The card's green tint is "section identity"; the pill is
   "current state of this booking" and needs its own palette so
   cancelled doesn't read the same as confirmed. */
.fd-appt-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--fd-heading);
  border: 1px solid;
  line-height: 1.5;
}
.fd-appt-status-confirmed { background: var(--fd-accent-glow);              border-color: var(--fd-accent); }
.fd-appt-status-showed    { background: var(--fd-green-dim);                border-color: var(--fd-green);  }
.fd-appt-status-cancelled { background: var(--fd-red-dim, rgba(239,68,68,0.14));   border-color: var(--fd-red);    }
.fd-appt-status-noshow    { background: var(--fd-amber-dim, rgba(245,158,11,0.14)); border-color: var(--fd-amber);  }
.fd-appt-status-new       { background: var(--fd-surface-alt);              border-color: var(--fd-border); color: var(--fd-muted); }
.fd-appt-status-invalid   { background: var(--fd-surface-alt);              border-color: var(--fd-border); color: var(--fd-muted); }
.fd-selected-appt-prev-cancelled {
  margin-top: 6px;
  font-size: 11px;
  color: var(--fd-muted);
  font-style: italic;
}
/* Compact appointment empty state, single-row label + status,
   button beneath. Replaces the older three-stack layout. */
.fd-selected-appt.empty .fd-selected-appt-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.fd-selected-appt-empty-status {
  font-style: normal;
  font-size: 12px;
  color: var(--fd-muted);
  font-weight: 600;
}

/* Amend modal buttons, base class shared by the reschedule, cancel
   and undo variants below. Enterprise look: clean borders, subtle
   shadow that lifts on hover, no fuzzy filter brightness. */
.fd-amend-btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  padding: 10px 14px;
  border-radius: 5px;
  border: 1px solid var(--fd-border);
  background: var(--fd-surface);
  color: var(--fd-heading);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.04s;
}
.fd-amend-btn:hover:not(:disabled) {
  background: var(--fd-surface-alt);
  border-color: var(--fd-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.fd-amend-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
.fd-amend-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fd-amend-reschedule {
  border-color: var(--fd-accent);
  color: var(--fd-accent);
}
.fd-amend-reschedule:hover:not(:disabled) {
  background: var(--fd-accent-glow);
}
.fd-amend-cancel-choice {
  border-color: var(--fd-red, #ef4444);
  color: var(--fd-red, #ef4444);
}
.fd-amend-cancel-choice:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.08);
}
.fd-selected-appt-outcome-prompt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--fd-green);
  margin-top: 8px;
  margin-bottom: 4px;
}
.fd-selected-appt-outcome-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.fd-outcome-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 4px;
  border: 1px solid var(--fd-border);
  background: var(--fd-surface);
  color: var(--fd-heading);
  cursor: pointer;
  transition: filter 0.15s, background 0.15s;
}
.fd-outcome-btn:hover:not(:disabled) { filter: brightness(0.96); }
.fd-outcome-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.fd-outcome-showed    { border-color: var(--fd-green); color: var(--fd-green); }
.fd-outcome-showed:hover:not(:disabled)    { background: rgba(16, 185, 129, 0.10); }
.fd-outcome-noshow    { border-color: var(--fd-red, #ef4444); color: var(--fd-red, #ef4444); }
.fd-outcome-noshow:hover:not(:disabled)    { background: rgba(239, 68, 68, 0.10); }
.fd-outcome-cancelled { border-color: var(--fd-muted); color: var(--fd-muted); }
.fd-outcome-cancelled:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); }

/* Outcome-done summary row, replaces the buttons once the
   receptionist has marked the result. Shows the label + Undo
   link. */
.fd-selected-appt-outcome-done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
}
.fd-selected-appt-outcome-label { flex: 1; color: var(--fd-heading); }
.fd-selected-appt-outcome-label strong { font-weight: 700; }
.fd-selected-appt-undo {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border: 1px solid var(--fd-border);
  background: transparent;
  color: var(--fd-muted);
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fd-selected-appt-undo:hover { background: var(--fd-surface-alt); }

.fd-selected-appt-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.fd-selected-appt-status-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fd-green);
  margin: 0;
}
.fd-selected-appt-status {
  flex: 1;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--fd-green);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  color: var(--fd-heading);
  cursor: pointer;
}
.fd-selected-appt-status-pip {
  font-size: 10px;
  font-weight: 600;
  min-width: 40px;
}
.fd-selected-appt-status-pip.saving { color: var(--fd-muted); }
.fd-selected-appt-status-pip.saved  { color: var(--fd-green); }
.fd-selected-appt-status-pip.err    { color: var(--fd-red, #ef4444); }

.fd-selected-appt.empty {
  background: var(--fd-surface-alt);
  border-color: var(--fd-border);
  color: var(--fd-muted);
}

.fd-selected-appt span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.fd-selected-appt strong {
  display: block;
  color: inherit;
  font-size: 14px;
}

.fd-selected-appt em {
  display: block;
  font-size: 12px;
  font-style: normal;
  margin-top: 2px;
}

.fd-selected-appt button {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  margin-top: 8px;
  padding: 5px 8px;
}

.fd-tag-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.fd-tag-badge {
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  color: var(--fd-heading);
  background: var(--fd-surface-alt);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1px;
  padding: 2px 6px;
}

/* Tone variants, tinted background keeps the colour signal, but
   text stays in the heading (dark) tone so labels are easy to read.
   Avoids the high-saturation "screaming chip" look. */
.fd-tag-badge.tag-priority { background: var(--fd-red-dim); border-color: var(--fd-red); }
.fd-tag-badge.tag-warning { background: var(--fd-amber-dim); border-color: var(--fd-amber); }
.fd-tag-badge.tag-source { background: var(--fd-cyan-dim); border-color: var(--fd-cyan); }
.fd-tag-badge.tag-workflow { background: var(--fd-purple-dim); border-color: var(--fd-purple); }
.fd-tag-badge.tag-status { background: var(--fd-green-dim); border-color: var(--fd-green); }
.fd-tag-badge.fd-tag-lifecycle {
  background: var(--fd-cyan-dim);
  border-color: var(--fd-cyan);
}

/* Workflow chip on the work-card: borrows the purple-tinted workflow
   tag colour so it reads as workflow-related context. The loading
   state ("🔁 …") fades while the fetch is in-flight. */
.fd-workflow-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--fd-purple-dim);
  border: 1px solid var(--fd-purple);
  color: var(--fd-purple);
  margin: 2px 0;
  width: max-content;
}
.fd-workflow-chip[data-loading="1"] { opacity: 0.6; }

/* Live-activity banner, sits above the work-queue list, shows the
   most recent webhook event. Clickable to jump to the contact's card. */
#workQueueLiveBanner:empty { display: none; }
.fd-live-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 8px;
  background: linear-gradient(90deg, var(--fd-amber-dim), var(--fd-surface-alt));
  border: 1px solid var(--fd-amber);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  animation: fdLiveBannerIn 0.4s ease-out;
}
.fd-live-banner:hover { background: var(--fd-amber-dim); }
.fd-live-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fd-amber);
  animation: fdLiveDotPulse 1.4s ease-in-out infinite;
}
.fd-live-banner strong { color: var(--fd-amber); font-size: 11px; letter-spacing: 0.5px; }
.fd-live-banner-contact { font-weight: 700; color: var(--fd-heading); }
.fd-live-banner-summary { flex: 1; color: var(--fd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-live-banner-dismiss {
  background: transparent;
  border: none;
  color: var(--fd-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.fd-live-banner-dismiss:hover { color: var(--fd-text); }

@keyframes fdLiveBannerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fdLiveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Brief flash on a work-card whose contact just had a live event.
   Fades over ~2.5s; class is removed when the animation finishes. */
.fd-work-item.fd-live-flash {
  animation: fdLiveFlash 2.5s ease-out;
}
@keyframes fdLiveFlash {
  0%   { box-shadow: 0 0 0 0 var(--fd-amber); background: var(--fd-amber-dim); }
  50%  { box-shadow: 0 0 0 4px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}

/* Right-hand selected panel, list of workflow names with optional
   status. Mirrors the .fd-selected-tags / .fd-selected-warning look
   so the panel stays visually consistent. */
.fd-selected-workflows {
  border-top: 1px solid var(--fd-border);
  padding: 10px 0 0;
  margin-bottom: 12px;
  font-size: 12px;
}
.fd-selected-workflows > span {
  color: var(--fd-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}
.fd-selected-workflows-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fd-selected-workflows-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: var(--fd-purple-dim);
  border-left: 2px solid var(--fd-purple);
  border-radius: 2px;
}
.fd-selected-workflows-list strong { font-weight: 600; }
.fd-selected-workflows-list em {
  font-style: normal;
  font-size: 10px;
  color: var(--fd-muted);
  padding: 1px 4px;
  background: var(--fd-surface);
  border-radius: 3px;
}

.fd-selected-tags {
  border-top: 1px solid var(--fd-border);
  padding: 10px 0 0;
  margin-bottom: 12px;
}

.fd-selected-tags > span {
  display: block;
  color: var(--fd-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.fd-selected-warning {
  background: var(--fd-amber-dim);
  border: 1px solid var(--fd-amber);
  border-radius: 6px;
  color: var(--fd-amber);
  margin-bottom: 12px;
  padding: 9px;
}

.fd-selected-warning strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.fd-selected-warning p {
  font-size: 12px;
}

.fd-associated-opps {
  border-top: 1px solid var(--fd-border);
  padding-top: 10px;
  margin-bottom: 12px;
}

.fd-associated-opps > span {
  display: block;
  color: var(--fd-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.fd-opp-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-left: 4px solid var(--fd-accent);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  margin-bottom: 6px;
  padding: 8px;
  text-align: left;
}

.fd-opp-card:hover {
  border-color: var(--fd-accent);
}

.fd-opp-card.selected {
  background: var(--fd-accent-glow);
  border-color: var(--fd-accent);
}

.fd-opp-card strong {
  color: var(--fd-heading);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-opp-card em {
  grid-column: 1 / -1;
  color: var(--fd-muted);
  font-size: 12px;
  font-style: normal;
}

/* Contact name reads a little firmer than the pipeline summary so the
   eye can pick out "who is this opportunity for" at a glance. */
.fd-opp-card em.fd-opp-contact {
  color: var(--fd-text);
  font-weight: 500;
}

.fd-opp-card b {
  color: var(--fd-green);
  font-size: 12px;
}

.fd-empty.small {
  padding: 8px;
  font-size: 12px;
}

.fd-opp-update {
  border-top: 1px solid var(--fd-border);
  padding-top: 10px;
  margin-bottom: 12px;
}

.fd-appt-book {
  border-top: 1px solid var(--fd-border);
  padding-top: 10px;
  margin-bottom: 12px;
}

/* 2-column row for paired form fields (Calendar + Date), keeps
   the booking modal tight horizontally instead of one full-width
   row per input. Drops to single column on narrow screens. */
.fd-appt-book-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin-bottom: 8px;
}

/* Modal-footer action row, Cancel booking on the left, primary
   Save on the right. Amend mode only; book mode has just the
   primary submit. */
.fd-appt-book-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.fd-appt-book-actions > button { margin: 0; }
.fd-appt-cancel-btn {
  background: transparent;
  border: 1px solid var(--fd-red, #ef4444);
  color: var(--fd-red, #ef4444);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
}
.fd-appt-cancel-btn:hover { background: rgba(239, 68, 68, 0.08); }
.fd-appt-cancel-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.fd-appt-book-2col > label { margin: 0; }
@media (max-width: 520px) {
  .fd-appt-book-2col { grid-template-columns: 1fr; }
}

.fd-opp-update-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.fd-opp-update-head span {
  color: var(--fd-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.fd-opp-update-head em {
  color: var(--fd-accent);
  font-size: 11px;
  font-style: normal;
}

.fd-opp-edit-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 6px;
  margin-bottom: 8px;
  padding: 8px;
}

.fd-opp-edit-title strong {
  color: var(--fd-heading);
  font-size: 12px;
}

.fd-opp-edit-title span {
  color: var(--fd-accent);
  font-size: 12px;
  font-weight: 800;
}

.fd-opp-update label,
.fd-appt-book label {
  display: block;
  color: var(--fd-muted);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 7px;
}

.fd-opp-update input,
.fd-opp-update select,
.fd-opp-update textarea,
.fd-appt-book input,
.fd-appt-book select,
.fd-appt-book textarea {
  width: 100%;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 5px;
  color: var(--fd-heading);
  font: inherit;
  font-size: 12px;
  margin-top: 3px;
  padding: 7px;
}

.fd-opp-update textarea,
.fd-appt-book textarea {
  resize: vertical;
}

.fd-appt-book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fd-appt-slots-wrap {
  margin-top: 4px;
}

.fd-appt-slots-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fd-muted);
  margin-bottom: 6px;
}

.fd-appt-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  padding: 6px;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 6px;
}

.fd-appt-slot {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  color: var(--fd-body);
  font-family: var(--fd-font);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--fd-transition), border-color var(--fd-transition), color var(--fd-transition);
}

.fd-appt-slot:hover {
  border-color: var(--fd-accent);
  color: var(--fd-heading);
}

.fd-appt-slot.selected {
  /* Persist the dark hover-style text once a time is picked, with a
     subtle tint + accent border + bold so the chosen slot stays
     obviously selected (rather than a white-on-blue fill that read as
     "reverted" next to the hover state). --fd-heading keeps it black in
     light mode and light in dark mode, matching hover in both. */
  background: var(--fd-accent-glow);
  border-color: var(--fd-accent);
  color: var(--fd-heading);
  font-weight: 600;
}

.fd-appt-slot.current {
  border-color: var(--fd-amber);
}
.fd-appt-slot-tag {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.fd-empty.small {
  font-size: 11px;
  padding: 8px;
  grid-column: 1 / -1;
  text-align: center;
}

.fd-qual-section {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--fd-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-qual-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fd-muted);
  margin-bottom: 2px;
}
.fd-qual-multi { display: flex; flex-direction: column; gap: 4px; }
.fd-qual-multi-label {
  font-size: 11px;
  color: var(--fd-muted);
  font-weight: 600;
}
.fd-qual-multi-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fd-qual-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 999px;
  cursor: pointer;
}
.fd-qual-check input { margin: 0; }
.fd-qual-check:has(input:checked) {
  background: var(--fd-accent);
  border-color: var(--fd-accent);
  color: white;
}

.fd-opp-update-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}

.fd-opp-update button,
.fd-appt-book button {
  width: 100%;
  border: 1px solid var(--fd-accent);
  background: var(--fd-accent);
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
}

.fd-opp-update button[type="button"] {
  width: auto;
  background: var(--fd-surface-alt);
  border-color: var(--fd-border);
  color: var(--fd-heading);
}

.fd-opp-update button:disabled,
.fd-appt-book button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.fd-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.46);
}

.fd-opportunity-modal {
  position: fixed;
  z-index: 1001;
  left: 50%;
  top: 50%;
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 48px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
  overflow: hidden;
}

.fd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--fd-border);
}

.fd-modal-header h2 {
  color: var(--fd-heading);
  font-size: 18px;
}

.fd-modal-header p {
  color: var(--fd-muted);
  font-size: 13px;
  margin-top: 3px;
}

.fd-modal-body {
  overflow: auto;
  padding: 16px 18px 18px;
}

.fd-modal-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.fd-modal-summary div,
.fd-modal-fields div {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 6px;
  padding: 10px;
}

.fd-modal-summary span,
.fd-modal-fields span {
  display: block;
  color: var(--fd-muted);
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.fd-modal-summary strong,
.fd-modal-fields strong {
  color: var(--fd-heading);
  font-size: 14px;
  line-height: 1.25;
}

.fd-modal-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.fd-modal-loading {
  padding: 28px 8px;
  text-align: center;
  color: var(--fd-muted);
  font-size: 13px;
}

.fd-modal-age {
  color: var(--fd-muted);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
}

.fd-modal-empty {
  grid-column: 1 / -1;
  padding: 16px;
  text-align: center;
  color: var(--fd-muted);
  font-size: 12px;
  border: 1px dashed var(--fd-border);
  border-radius: 6px;
  background: rgba(0,0,0,0.02);
}
.dark-mode .fd-modal-empty { background: rgba(255,255,255,0.02); }
.fd-modal-empty em {
  display: inline-block;
  margin-left: 4px;
  font-style: normal;
  color: var(--fd-heading);
}

.fd-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ID trace, a small monospace readout of the GHL object IDs an
   opportunity modal / right pane is bound to. Low-key, sits at the
   bottom-left. Click an item to copy the ID. For tracing data issues
   back to the exact object/field. */
.fd-id-trace {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--fd-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--fd-muted);
}
.fd-id-trace-item {
  cursor: pointer;
  white-space: nowrap;
}
.fd-id-trace-item em {
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.7;
}
.fd-id-trace-item:hover {
  color: var(--fd-accent);
}

.fd-modal-actions button {
  border: 1px solid var(--fd-border);
  background: var(--fd-surface-alt);
  color: var(--fd-heading);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 9px 12px;
}

.fd-modal-actions button:first-child {
  background: var(--fd-accent);
  border-color: var(--fd-accent);
  color: #fff;
}

.fd-modal-edit-form label {
  display: block;
}

.fd-modal-edit-form input {
  width: 100%;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 5px;
  color: var(--fd-heading);
  font: inherit;
  font-size: 13px;
  padding: 8px;
}

.fd-confirm-box {
  background: var(--fd-accent-glow);
  border: 1px solid var(--fd-accent);
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 12px;
}

.fd-confirm-box h3 {
  color: var(--fd-heading);
  font-size: 15px;
}

.fd-confirm-box p {
  color: var(--fd-muted);
  font-size: 12px;
  margin-top: 3px;
}

.fd-confirm-list {
  display: grid;
  gap: 8px;
}

.fd-confirm-list div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 6px;
  padding: 9px;
}

.fd-confirm-list span {
  color: var(--fd-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.fd-confirm-list strong {
  color: var(--fd-heading);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.fd-confirm-list em {
  color: var(--fd-accent);
  font-style: normal;
  font-weight: 900;
}

.fd-logs-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  overflow: hidden;
}

.fd-logs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--fd-border);
}

.fd-logs-header h2 {
  color: var(--fd-heading);
  font-size: 17px;
}

.fd-logs-header p {
  color: var(--fd-muted);
  font-size: 12px;
  margin-top: 2px;
}

.fd-logs-clear {
  border: 1px solid var(--fd-border);
  background: var(--fd-surface-alt);
  color: var(--fd-heading);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
}

.fd-logs-table-wrap {
  overflow: auto;
  min-height: 0;
}

.fd-logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.fd-logs-table th,
.fd-logs-table td {
  border-bottom: 1px solid var(--fd-border);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

.fd-logs-table th {
  position: sticky;
  top: 0;
  background: var(--fd-surface);
  color: var(--fd-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.fd-log-method,
.fd-log-status {
  display: inline-flex;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 5px;
}

.fd-log-method {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  color: var(--fd-heading);
}

.fd-log-status.ok {
  background: var(--fd-green-dim);
  color: var(--fd-green);
}

.fd-log-status.bad {
  background: var(--fd-red-dim);
  color: var(--fd-red);
}

.fd-log-url {
  color: var(--fd-heading);
  max-width: 520px;
  word-break: break-all;
}

.fd-log-error {
  color: var(--fd-red);
}

.fd-logs-empty {
  color: var(--fd-muted);
  text-align: center !important;
  padding: 28px !important;
}

/* Dev-only upstream call detail. The URL cell becomes a button when the
   server attached a _diag block; clicking it expands a row below with
   the full request/response from GHL. Only visible to the developer. */
.fd-log-url-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0;
  font: inherit; color: var(--fd-heading);
  text-align: left; cursor: pointer; word-break: break-all;
}
.fd-log-url-toggle:hover { color: var(--fd-accent); }

/* Stable log-detail viewer. A fixed overlay so the background dashboard
   refresh re-rendering the logs table never disturbs what's being read. */
.fd-logdetail-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); padding: 32px;
}
.fd-logdetail-modal {
  background: var(--fd-bg, #0a0f1a);
  border: 1px solid var(--fd-border);
  border-radius: 12px;
  width: min(900px, 100%); max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.fd-logdetail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--fd-border);
  flex: 0 0 auto;
}
.fd-logdetail-title {
  font: 600 12px/1.4 var(--fd-mono, ui-monospace, monospace);
  color: var(--fd-heading); word-break: break-all;
}
.fd-logdetail-close {
  background: none; border: none; cursor: pointer;
  color: var(--fd-muted); font-size: 22px; line-height: 1; padding: 0 4px;
}
.fd-logdetail-close:hover { color: var(--fd-heading); }
.fd-logdetail-body {
  padding: 14px 16px; overflow: auto; flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.fd-logdetail-empty { color: var(--fd-muted); font-size: 13px; }
.fd-log-caret { color: var(--fd-muted); font-size: 10px; }
.fd-log-diag-pill {
  display: inline-block; margin-left: 4px;
  padding: 0 6px; border-radius: 8px;
  background: var(--fd-amber-dim); color: var(--fd-amber);
  font-size: 10px; font-weight: 700; line-height: 16px;
}
.fd-log-diag-row td { background: rgba(0,0,0,0.03); }
.dark-mode .fd-log-diag-row td { background: rgba(255,255,255,0.04); }
.fd-log-diag-wrap { display: flex; flex-direction: column; gap: 10px; }
.fd-log-diag-call {
  border: 1px solid var(--fd-border); border-radius: 6px;
  overflow: hidden; background: var(--fd-panel, transparent);
}
.fd-log-diag-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 11px;
  background: rgba(0,0,0,0.03); border-bottom: 1px solid var(--fd-border);
}
.dark-mode .fd-log-diag-head { background: rgba(255,255,255,0.03); }
.fd-log-diag-url { font-family: var(--fd-mono, ui-monospace, monospace); color: var(--fd-heading); word-break: break-all; }
.fd-log-diag-version { color: var(--fd-muted); font-size: 10px; }
.fd-log-diag-body {
  margin: 0; padding: 10px 12px;
  font: 11px/1.5 var(--fd-mono, ui-monospace, monospace);
  color: var(--fd-text);
  white-space: pre-wrap; word-break: break-word;
  max-height: 380px; overflow: auto;
}

@media (max-width: 720px) {
  .fd-modal-summary,
  .fd-modal-fields {
    grid-template-columns: 1fr;
  }
}

.fd-live-item {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--fd-border);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 9px 4px;
}

.fd-live-item:hover { background: var(--fd-surface-alt); }
.fd-live-item strong { display: block; color: var(--fd-heading); font-size: 13px; }
.fd-live-item em {
  display: block;
  color: var(--fd-muted);
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-live-item b,
.fd-work-mini-head span {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fd-red);
  color: #fff;
  font-size: 11px;
}

.fd-appt-mini {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--fd-border);
}

.fd-appt-mini strong { color: var(--fd-accent); font-size: 13px; }
.fd-appt-mini span {
  color: var(--fd-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-appt-mini em {
  grid-column: 2;
  color: var(--fd-muted);
  font-size: 11px;
  font-style: normal;
}

@media (max-width: 980px) {
  .fd-workbench { grid-template-columns: 1fr; overflow: auto; }
  .fd-work-item { grid-template-columns: 26px 34px minmax(0, 1fr); }
  .fd-work-actions { grid-column: 2 / -1; justify-content: flex-start; }
}

/* Legacy operations scaffold (KPI strip, stats bar, channel queues, schedule
   column, activity drawer) is replaced at runtime by #workbench, which is
   injected into .fd-main by dashboard.js → initWorkbench. Hidden here so
   it never flashes on first paint between the browser parsing index.html
   and dashboard.js running. */
#kpiStrip,
#statsBar,
.fd-left-col,
.fd-right-col,
#activityDrawer { display: none; }

/* ── KPI Bar (compact status bar) ── */

.fd-kpi-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.fd-kpi {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  padding: 10px 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--fd-transition), box-shadow var(--fd-transition);
}

.fd-kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}

.fd-kpi[data-color="accent"]::before { background: var(--fd-accent); }
.fd-kpi[data-color="green"]::before { background: var(--fd-green); }
.fd-kpi[data-color="amber"]::before { background: var(--fd-amber); }
.fd-kpi[data-color="red"]::before { background: var(--fd-red); }
.fd-kpi[data-color="purple"]::before { background: var(--fd-purple); }
.fd-kpi[data-color="cyan"]::before { background: var(--fd-cyan); }

/* Highlight non-zero KPIs */
.fd-kpi.has-value[data-color="red"] { background: var(--fd-red-dim); }
.fd-kpi.has-value[data-color="amber"] { background: var(--fd-amber-dim); }

.fd-kpi-value {
  font-size: 30px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fd-kpi[data-color="accent"] .fd-kpi-value { color: var(--fd-accent); }
.fd-kpi[data-color="green"] .fd-kpi-value { color: var(--fd-green); }
.fd-kpi[data-color="amber"] .fd-kpi-value { color: var(--fd-amber); }
.fd-kpi[data-color="red"] .fd-kpi-value { color: var(--fd-red); }
.fd-kpi[data-color="purple"] .fd-kpi-value { color: var(--fd-purple); }
.fd-kpi[data-color="cyan"] .fd-kpi-value { color: var(--fd-cyan); }

.fd-kpi-label {
  font-size: 10px; font-weight: 600; color: var(--fd-muted);
  text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px;
}

.fd-kpi-clickable { cursor: pointer; }
.fd-kpi-clickable:hover, .fd-kpi-clickable.active {
  border-color: var(--fd-accent); box-shadow: 0 0 8px var(--fd-accent-glow);
}

.fd-kpi-value.changed { animation: kpi-bump 0.4s ease; }

/* ── Main: 2 equal columns ── */

.fd-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Single 1fr row so the workbench inside fills the remaining
     viewport height (body row 3 is already 1fr at 100vh). Without
     this the workbench's grid row is auto-sized and stops at the
     content height — see the "empty space below the cards" bug. */
  grid-template-rows: 1fr;
  gap: 10px;
  min-height: 0;
  /* Cap + centre on very wide monitors so queue rows stay scannable
     instead of stretching edge to edge. */
  max-width: 1760px;
  margin: 0 auto;
  width: 100%;
}

/* ── Left Column: Urgent Queues ── */

.fd-left-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.fd-queue {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.fd-queue[data-channel="phone"] { border-left: 3px solid var(--fd-red); }
.fd-queue[data-channel="sms"] { border-left: 3px solid var(--fd-amber); }
.fd-queue[data-channel="email"] { border-left: 3px solid var(--fd-purple); }

/* Highlight queues with items */
.fd-queue.has-items[data-channel="phone"] { border-color: var(--fd-red); border-left: 3px solid var(--fd-red); }

.fd-queue-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--fd-border); flex-shrink: 0;
  cursor: pointer; user-select: none;
  transition: background var(--fd-transition);
}
.fd-queue-header:hover { background: var(--fd-surface-alt); }

.fd-queue-icon { font-size: 11px; }
.fd-queue-title { font-size: 11px; font-weight: 700; color: var(--fd-heading); letter-spacing: 1px; flex: 1; }

.fd-queue-count {
  font-size: 9px; font-weight: 700; color: #fff;
  background: var(--fd-red); border-radius: 7px; padding: 0 5px; min-width: 16px; text-align: center;
}
.fd-queue[data-channel="sms"] .fd-queue-count { background: var(--fd-amber); }
.fd-queue[data-channel="email"] .fd-queue-count { background: var(--fd-purple); }

/* Collapse/Expand */
.fd-collapse-chevron {
  font-size: 10px; color: var(--fd-muted); margin-left: auto;
  transition: transform 0.2s ease;
}
.fd-collapsible.collapsed .fd-collapse-chevron { transform: rotate(-90deg); }
.fd-collapsible .fd-collapse-body {
  transition: max-height 0.3s ease, opacity 0.2s ease;
  overflow: hidden;
}
.fd-collapsible.collapsed .fd-collapse-body {
  max-height: 0 !important; opacity: 0; padding: 0 !important;
}
.fd-collapsible.collapsed { flex: 0 0 auto; min-height: 0; }
.fd-collapsible.collapsed .fd-queue-progress { display: none; }
.fd-collapsible.collapsed .fd-queue-header { border-bottom: none; }

.fd-queue-items {
  flex: 1; overflow-y: auto; padding: 4px 6px;
}
.fd-queue-items::-webkit-scrollbar { width: 3px; }
.fd-queue-items::-webkit-scrollbar-thumb { background: var(--fd-border); border-radius: 2px; }

/* Queue Item (dense) */

.fd-qi {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--fd-transition);
  border-left: 3px solid transparent;
  border-radius: 4px;
}

.fd-qi:nth-child(even) { background: var(--fd-row-alt); }
.fd-qi:hover { background: var(--fd-accent-glow); }

/* Urgency edge color */
.fd-qi.urgency-red { border-left-color: var(--fd-red); }
.fd-qi.urgency-amber { border-left-color: var(--fd-amber); }
.fd-qi.urgency-grey { border-left-color: var(--fd-muted); }

.fd-qi-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--fd-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}

.fd-qi-body { flex: 1; min-width: 0; }

.fd-qi-name {
  font-weight: 600; color: var(--fd-heading); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fd-qi-desc {
  font-size: 12px; color: var(--fd-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fd-qi-channel {
  font-size: 10px; color: var(--fd-muted); border: 1px solid var(--fd-border);
  border-radius: 3px; padding: 1px 4px; flex-shrink: 0;
}

.fd-qi-time {
  font-size: 12px; color: var(--fd-muted); text-align: right;
  white-space: nowrap; flex-shrink: 0; min-width: 24px;
}

.fd-qi-badge {
  font-size: 8px; font-weight: 700; padding: 0 5px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.fd-qi-badge.red { background: var(--fd-red-dim); color: var(--fd-red); }
.fd-qi-badge.amber { background: var(--fd-amber-dim); color: var(--fd-amber); }

/* ── Right Column: Schedule + Pipeline ── */

.fd-right-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

/* Schedule (tall, takes ~70% of right column) */

.fd-schedule-area {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  display: flex; flex-direction: column;
  flex: 3;
  min-height: 0;
  overflow: hidden;
}

.fd-schedule-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--fd-border); flex-shrink: 0;
  cursor: pointer; user-select: none;
  transition: background var(--fd-transition);
}
.fd-schedule-header:hover { background: var(--fd-surface-alt); }
.fd-collapsible.collapsed .fd-schedule-header { border-bottom: none; }

.fd-schedule-summary {
  font-size: 10px; color: var(--fd-muted);
}

.fd-schedule-divider {
  border-top: 1px solid var(--fd-border);
  margin-top: 2px;
}

.fd-schedule-list {
  overflow-y: auto; padding: 4px 6px;
  flex: 1;
}
.fd-schedule-list::-webkit-scrollbar { width: 3px; }
.fd-schedule-list::-webkit-scrollbar-thumb { background: var(--fd-border); border-radius: 2px; }

.fd-sched {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; font-size: 13px;
  cursor: pointer;
  transition: background var(--fd-transition);
  border-radius: 4px;
}

.fd-sched:nth-child(even) { background: var(--fd-row-alt); }
.fd-sched:hover { background: var(--fd-accent-glow); }

.fd-sched-time {
  font-size: 14px; font-weight: 700; color: var(--fd-heading);
  font-variant-numeric: tabular-nums; min-width: 40px; flex-shrink: 0;
}

.fd-sched-body { flex: 1; min-width: 0; }

.fd-sched-name {
  font-weight: 600; color: var(--fd-heading); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fd-sched-detail {
  font-size: 12px; color: var(--fd-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fd-sched-status {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.3px;
}

.fd-sched-status.confirmed { background: var(--fd-green-dim); color: var(--fd-green); }
.fd-sched-status.arrived { background: var(--fd-green-dim); color: var(--fd-green); }
.fd-sched-status.unconfirmed { background: var(--fd-amber-dim); color: var(--fd-amber); }
.fd-sched-status.noshow { background: var(--fd-red-dim); color: var(--fd-red); }
.fd-sched-status.cancelled { background: var(--fd-red-dim); color: var(--fd-red); }

/* Pipeline (slim, ~30% of right column) */

.fd-pipeline-slim {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.fd-pipeline-slim-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--fd-border); flex-shrink: 0;
  cursor: pointer; user-select: none;
  transition: background var(--fd-transition);
}
.fd-pipeline-slim-header:hover { background: var(--fd-surface-alt); }
.fd-collapsible.collapsed .fd-pipeline-slim-header { border-bottom: none; }

.fd-pipeline-select {
  background: var(--fd-surface-alt); border: 1px solid var(--fd-border);
  color: var(--fd-heading); font-size: 9px; font-family: var(--fd-font);
  padding: 1px 4px; border-radius: 3px; cursor: pointer;
}

.fd-pipeline-slim-list {
  overflow-y: auto; padding: 4px 8px;
}
.fd-pipeline-slim-list::-webkit-scrollbar { width: 3px; }
.fd-pipeline-slim-list::-webkit-scrollbar-thumb { background: var(--fd-border); border-radius: 2px; }

.fd-pipe-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; font-size: 13px;
  cursor: pointer; border-radius: 4px;
  transition: background var(--fd-transition);
}
.fd-pipe-row:hover { background: var(--fd-accent-glow); }
.fd-pipe-name { color: var(--fd-body); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-pipe-count { font-weight: 700; color: var(--fd-purple); min-width: 20px; text-align: right; flex-shrink: 0; }

/* ── Mini Calendar ── */

.fd-mini-cal {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.fd-mini-cal-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--fd-border); flex-shrink: 0;
  cursor: pointer; user-select: none;
  transition: background var(--fd-transition);
}
.fd-mini-cal-header:hover { background: var(--fd-surface-alt); }
.fd-mini-cal-header .fd-section-title { flex: 1; text-align: center; }
.fd-collapsible.collapsed .fd-mini-cal-header { border-bottom: none; }

.fd-mini-cal-nav {
  background: var(--fd-surface-alt); border: 1px solid var(--fd-border);
  color: var(--fd-body); font-size: 10px; font-family: var(--fd-font);
  padding: 1px 6px; border-radius: 3px; cursor: pointer;
  line-height: 1;
}
.fd-mini-cal-nav:hover { color: var(--fd-heading); background: var(--fd-accent-glow); }

.fd-mini-cal-grid {
  padding: 8px 10px;
  overflow-y: auto;
}

.fd-mini-cal-row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}

.fd-mini-cal-dow {
  font-size: 9px; font-weight: 700; color: var(--fd-muted);
  text-align: center; padding: 4px 0; letter-spacing: 0.5px;
}

.fd-mini-cal-day {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--fd-body);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: default;
  transition: background var(--fd-transition), border-color var(--fd-transition);
}
.fd-mini-cal-day.empty { visibility: hidden; }
.fd-mini-cal-day.other-month { color: var(--fd-muted); opacity: 0.4; }
.fd-mini-cal-day.today { border-color: var(--fd-accent); font-weight: 700; }
.fd-mini-cal-day.has-appts {
  cursor: pointer;
  background: var(--fd-amber-dim);
  color: var(--fd-heading);
  font-weight: 600;
}
.fd-mini-cal-day.has-appts.heavy { background: var(--fd-amber); color: #1f1300; }
.fd-mini-cal-day.has-appts:hover { border-color: var(--fd-amber); }

.fd-mini-cal-count {
  position: absolute; top: 2px; right: 3px;
  font-size: 8px; font-weight: 700; color: var(--fd-amber);
  line-height: 1;
}
.fd-mini-cal-day.has-appts.heavy .fd-mini-cal-count { color: #1f1300; }

/* ── Section Title ── */

.fd-section-title {
  font-size: 11px; font-weight: 700; color: var(--fd-muted);
  letter-spacing: 1.2px; text-transform: uppercase;
}

/* ── Bottom Drawer (collapsible) ── */

.fd-drawer {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius);
  overflow: hidden;
}

.fd-drawer-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 14px;
  background: none; border: none; cursor: pointer;
  font-family: var(--fd-font); color: var(--fd-muted);
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.fd-drawer-toggle:hover { color: var(--fd-heading); }
.fd-drawer-arrow { font-size: 10px; transition: transform 0.2s; }
.fd-drawer-arrow.open { transform: rotate(180deg); }

.fd-drawer-content {
  border-top: 1px solid var(--fd-border);
  max-height: 120px; overflow-y: auto;
}
.fd-drawer-content::-webkit-scrollbar { width: 3px; }
.fd-drawer-content::-webkit-scrollbar-thumb { background: var(--fd-border); border-radius: 2px; }

.fd-feed-list { padding: 2px 8px; }

.fd-feed-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; font-size: 12px;
  cursor: pointer; transition: background var(--fd-transition);
  border-radius: 4px;
}
.fd-feed-item:nth-child(even) { background: var(--fd-row-alt); }
.fd-feed-item:hover { background: var(--fd-accent-glow); }

.fd-feed-dir { font-size: 11px; flex-shrink: 0; width: 14px; text-align: center; }
.fd-feed-dir.inbound { color: var(--fd-green); }
.fd-feed-dir.outbound { color: var(--fd-purple); }

.fd-feed-name {
  font-weight: 600; color: var(--fd-heading); font-size: 13px;
  white-space: nowrap; min-width: 80px; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}

.fd-feed-channel {
  font-size: 8px; color: var(--fd-muted); border: 1px solid var(--fd-border);
  border-radius: 3px; padding: 0 3px; flex-shrink: 0;
}

.fd-feed-preview {
  flex: 1; color: var(--fd-muted); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fd-feed-time { font-size: 9px; color: var(--fd-muted); white-space: nowrap; flex-shrink: 0; }

.fd-feed-unread {
  background: var(--fd-red); color: #fff; font-size: 8px; font-weight: 700;
  border-radius: 5px; padding: 0 4px; flex-shrink: 0;
}

/* ── Empty State ── */

.fd-empty { text-align: center; padding: 16px; color: var(--fd-muted); font-size: 13px; }

/* ── Panels (slide-out) ── */

.fd-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; }

.fd-panel {
  position: fixed; top: 0; right: 0; width: 420px; max-width: 90vw; height: 100vh;
  background: var(--fd-surface); border-left: 1px solid var(--fd-border);
  z-index: 101; display: flex; flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,0.3); animation: panel-slide-in 0.2s ease;
}

@keyframes panel-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.fd-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--fd-border); flex-shrink: 0;
}
.fd-panel-contact { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fd-panel-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--fd-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.fd-panel-name { font-size: 13px; font-weight: 600; color: var(--fd-heading); }
.fd-panel-section-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--fd-muted);
  margin-bottom: 2px;
}
.fd-panel-meta { font-size: 10px; color: var(--fd-muted); }
.fd-panel-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fd-panel-ghl-link {
  font-size: 9px; color: var(--fd-accent); text-decoration: none;
  padding: 2px 6px; border: 1px solid var(--fd-accent); border-radius: 3px;
}
.fd-panel-ghl-link:hover { background: var(--fd-accent-glow); }
.fd-panel-close { background: none; border: none; color: var(--fd-muted); font-size: 18px; cursor: pointer; padding: 0 3px; line-height: 1; }
.fd-panel-close:hover { color: var(--fd-heading); }

.fd-panel-messages {
  flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 10px;
}
.fd-panel-messages::-webkit-scrollbar { width: 3px; }
.fd-panel-messages::-webkit-scrollbar-thumb { background: var(--fd-border); border-radius: 2px; }

.fd-msg { max-width: 85%; padding: 6px 8px; border-radius: 8px; font-size: 12px; line-height: 1.35; word-wrap: break-word; }
/* Inbound messages from the contact, green bubble with white text,
   matching HighLevel's native messaging UI so the receptionist's
   eye trains on the same visual language across both apps. */
.fd-msg.inbound {
  background: var(--fd-green);
  color: #fff;
  border: 1px solid var(--fd-green);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.fd-msg.outbound { background: var(--fd-accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 2px; }

/* Automated / AI-driven outbound (source !== "app"). Visually
   distinct from human-sent outbound so the receptionist can spot
   what was sent by a workflow / AI agent at a glance. Purple-tinted
   per the existing palette's --fd-purple. */
.fd-msg.outbound.automated {
  background: var(--fd-purple-dim);
  color: var(--fd-text);
  border: 1px solid var(--fd-purple);
  border-bottom-right-radius: 2px;
}
.fd-msg.outbound.automated .fd-msg-meta { color: var(--fd-purple); opacity: 0.85; }
/* Email card automated variant: card stays neutral but gets a
   purple left border + Auto badge in meta. */
.fd-msg.fd-msg-email.automated {
  border-left: 3px solid var(--fd-purple) !important;
}
.fd-msg-meta { font-size: 9px; color: var(--fd-muted); margin-top: 2px; }
.fd-msg.outbound .fd-msg-meta { color: rgba(255,255,255,0.7); }
/* Inbound bubble is now green, so the previously muted-grey meta
   line needs the same translucent-white treatment as outbound. */
.fd-msg.inbound .fd-msg-meta { color: rgba(255,255,255,0.8); }

/* Body text wraps on whatever the original used, preserve newlines from
   plainTextFromHtml so paragraph structure survives. */
.fd-msg .fd-msg-body { white-space: pre-wrap; }

/* Call card, slimmer, dedicated head row + recording playback. */
.fd-msg-call { max-width: 92%; }
.fd-msg-call .fd-msg-call-head { font-weight: 600; font-size: 12px; margin-bottom: 2px; }
.fd-msg-call .fd-msg-call-row  { font-size: 11px; color: var(--fd-muted); }
.fd-msg.outbound.fd-msg-call .fd-msg-call-row { color: rgba(255,255,255,0.75); }
.fd-msg-call-audio { width: 100%; margin-top: 4px; height: 28px; }

/* Activity / workflow / system rows, not a bubble. Centred, italic,
   smaller text, neutral colour. */
.fd-msg-system {
  display: flex; align-items: center; gap: 6px;
  align-self: center; max-width: 95%;
  font-size: 10px; color: var(--fd-muted);
  font-style: italic; padding: 4px 6px;
  border-top: 1px dashed var(--fd-border);
  border-bottom: 1px dashed var(--fd-border);
  margin: 4px 0;
}
.fd-msg-system-dot   { opacity: 0.6; }
.fd-msg-system-label { flex: 1; }
.fd-msg-system-time  { opacity: 0.75; white-space: nowrap; }

/* Form submission card, bordered, key/value rows. */
.fd-msg-form { max-width: 92%; background: var(--fd-surface-alt); border: 1px solid var(--fd-border); }
.fd-msg.outbound.fd-msg-form { background: var(--fd-surface-alt); color: var(--fd-text); border: 1px solid var(--fd-border); }
.fd-msg.outbound.fd-msg-form .fd-msg-meta { color: var(--fd-muted); }
.fd-msg-form-head { font-weight: 600; font-size: 12px; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fd-msg-form-row  { display: flex; gap: 6px; font-size: 11px; padding: 2px 0; }
.fd-msg-form-k    { color: var(--fd-muted); min-width: 80px; }
.fd-msg-form-v    { flex: 1; word-break: break-word; }
.fd-msg-form-body { font-size: 11px; white-space: pre-wrap; }

/* Clickable variant: hovers like a button so the receptionist
   knows the row opens the full-submission modal. */
.fd-msg-form-clickable { cursor: pointer; transition: border-color 0.15s, transform 0.05s; }
.fd-msg-form-clickable:hover { border-color: var(--fd-accent); }
.fd-msg-form-clickable:active { transform: scale(0.995); }
.fd-msg-form-clickable:focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 2px; }
.fd-msg-form-open { font-size: 10px; font-weight: 700; color: var(--fd-accent); text-transform: uppercase; letter-spacing: 0.5px; }

/* Form-submission modal body */
.fd-form-modal-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}
.fd-form-row {
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  background: var(--fd-surface-alt);
  border-radius: 4px;
  border: 1px solid var(--fd-border);
  font-size: 12px;
}
.fd-form-k { flex: 0 0 160px; color: var(--fd-muted); font-weight: 600; }
.fd-form-v { flex: 1; word-break: break-word; color: var(--fd-text); }
.fd-form-other-head {
  margin-top: 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--fd-muted);
  font-weight: 700;
}
.fd-form-other-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.fd-form-other-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 10px;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  color: var(--fd-text);
}
.fd-form-other-row:hover { border-color: var(--fd-accent); }
.fd-form-other-row strong { font-weight: 600; }
.fd-form-other-row em { font-style: normal; color: var(--fd-muted); }

/* Email card, distinct from chat bubbles. Always neutral background
   regardless of direction (emails aren't a quick chat snippet). */
.fd-msg-email {
  max-width: 96%;
  background: var(--fd-surface-alt) !important;
  color: var(--fd-text) !important;
  border: 1px solid var(--fd-border) !important;
  border-radius: 8px !important;
  padding: 8px 10px;
}
.fd-msg-email .fd-msg-meta {
  color: var(--fd-muted);
  font-size: 11px;
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px dashed var(--fd-border);
}

/* Day divider between conversation messages, "-- 12 May 2026 --".
   Slim, low-key, just enough to break up long histories. */
.fd-msg-day-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 10px;
  color: var(--fd-muted);
  align-self: stretch;
}
.fd-msg-day-divider::before,
.fd-msg-day-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fd-border);
}
.fd-msg-day-divider span { padding: 0 6px; white-space: nowrap; }
.fd-msg-email-head    { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.fd-msg-email-party   { font-size: 11px; color: var(--fd-muted); margin-bottom: 1px; }
.fd-msg-email-party span { display: inline-block; min-width: 36px; opacity: 0.8; }
.fd-msg-email-preview { font-size: 12px; margin: 6px 0; white-space: pre-wrap; }
.fd-msg-email-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.fd-msg-email-expand  {
  background: var(--fd-surface); border: 1px solid var(--fd-border);
  color: var(--fd-text); font-size: 11px; padding: 3px 8px;
  border-radius: 4px; cursor: pointer;
}
.fd-msg-email-expand:hover    { background: var(--fd-accent-subtle); }
.fd-msg-email-expand:disabled { opacity: 0.6; cursor: wait; }
.fd-msg-email-link    { font-size: 11px; color: var(--fd-accent); text-decoration: none; }
.fd-msg-email-link:hover { text-decoration: underline; }
.fd-msg-email-full    {
  margin-top: 8px; padding: 8px; border: 1px solid var(--fd-border);
  border-radius: 4px; background: var(--fd-surface);
  font-size: 12px; line-height: 1.4;
  max-height: 400px; overflow-y: auto;
}
.fd-msg-email-full img { max-width: 100%; height: auto; }
.fd-msg-email-full a   { color: var(--fd-accent); }
.fd-msg-email-text     { white-space: pre-wrap; margin: 0; font: inherit; }

.fd-panel-compose { border-top: 1px solid var(--fd-border); padding: 6px 12px; flex-shrink: 0; }
/* Email subject line — hidden unless the Email channel is selected */
.fd-compose-subject {
  display: block;
  width: 100%;
  background: var(--fd-surface-alt); border: 1px solid var(--fd-border);
  color: var(--fd-heading); font-size: 12px; font-family: var(--fd-font);
  padding: 5px 7px; border-radius: 3px; outline: none;
  margin-bottom: 4px;
}
.fd-compose-subject:focus { border-color: var(--fd-accent); }
.fd-compose-row { display: flex; gap: 4px; align-items: flex-end; }
.fd-compose-channel {
  background: var(--fd-surface-alt); border: 1px solid var(--fd-border);
  color: var(--fd-heading); font-size: 10px; font-family: var(--fd-font);
  padding: 3px 5px; border-radius: 3px; cursor: pointer; flex-shrink: 0; align-self: stretch;
}
.fd-compose-input {
  flex: 1; background: var(--fd-surface-alt); border: 1px solid var(--fd-border);
  color: var(--fd-heading); font-size: 12px; font-family: var(--fd-font);
  padding: 5px 7px; border-radius: 3px; resize: none; outline: none;
}
.fd-compose-input:focus { border-color: var(--fd-accent); }
.fd-compose-send {
  background: var(--fd-accent); color: #fff; border: none;
  padding: 5px 12px; border-radius: 3px; font-size: 11px; font-weight: 600;
  font-family: var(--fd-font); cursor: pointer; flex-shrink: 0; align-self: stretch;
}
.fd-compose-send:hover { background: #2563eb; }
.fd-compose-send:disabled { opacity: 0.5; cursor: not-allowed; }
.fd-compose-status { font-size: 10px; margin-top: 3px; min-height: 12px; }
.fd-compose-status.success { color: var(--fd-green); }
.fd-compose-status.error { color: var(--fd-red); }
.fd-compose-status.sending { color: var(--fd-amber); }

/* Detail Panel */
.fd-detail-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.fd-detail-icon.accent { background: var(--fd-accent-glow); color: var(--fd-accent); }
.fd-detail-icon.green { background: var(--fd-green-dim); color: var(--fd-green); }
.fd-detail-icon.amber { background: var(--fd-amber-dim); color: var(--fd-amber); }
.fd-detail-icon.red { background: var(--fd-red-dim); color: var(--fd-red); }
.fd-detail-icon.purple { background: var(--fd-purple-dim); color: var(--fd-purple); }
.fd-detail-icon.cyan { background: var(--fd-cyan-dim); color: var(--fd-cyan); }

.fd-detail-list { flex: 1; overflow-y: auto; padding: 4px 8px; }
.fd-detail-list::-webkit-scrollbar { width: 3px; }
.fd-detail-list::-webkit-scrollbar-thumb { background: var(--fd-border); border-radius: 2px; }

.fd-detail-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  border-bottom: 1px solid var(--fd-border); cursor: pointer;
  transition: background var(--fd-transition); font-size: 12px;
}
.fd-detail-item:last-child { border-bottom: none; }
.fd-detail-item:hover { background: var(--fd-accent-glow); }

.fd-detail-item-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--fd-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.fd-detail-item-body { flex: 1; min-width: 0; }
.fd-detail-item-name { font-weight: 600; color: var(--fd-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-detail-item-meta { font-size: 10px; color: var(--fd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-detail-item-badge {
  font-size: 8px; font-weight: 600; padding: 1px 6px; border-radius: 3px; white-space: nowrap; flex-shrink: 0;
}
.fd-detail-item-badge.green { background: var(--fd-green-dim); color: var(--fd-green); }
.fd-detail-item-badge.amber { background: var(--fd-amber-dim); color: var(--fd-amber); }
.fd-detail-item-badge.red { background: var(--fd-red-dim); color: var(--fd-red); }
.fd-detail-item-badge.accent { background: var(--fd-accent-glow); color: var(--fd-accent); }
.fd-detail-item-badge.purple { background: var(--fd-purple-dim); color: var(--fd-purple); }
.fd-detail-item-badge.cyan { background: var(--fd-cyan-dim); color: var(--fd-cyan); }
.fd-detail-item-time { font-size: 10px; color: var(--fd-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Stats Bar ── */

.fd-stats-bar {
  display: flex; gap: 6px;
  background: var(--fd-surface); border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius); padding: 6px 12px;
}

.fd-stat {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; font-size: 13px;
}

.fd-stat-label {
  color: var(--fd-muted); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}

.fd-stat-value {
  font-weight: 700; color: var(--fd-heading);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.fd-stat-value.good { color: var(--fd-green); }
.fd-stat-value.ok { color: var(--fd-amber); }
.fd-stat-value.bad { color: var(--fd-red); }

.fd-stat-clickable {
  cursor: pointer; border-radius: 8px; padding: 6px 10px;
  transition: background 0.15s, transform 0.1s;
}
.fd-stat-clickable:hover {
  background: var(--fd-surface); transform: translateY(-1px);
}
.fd-stat-clickable.active {
  background: var(--fd-surface); box-shadow: 0 0 0 1px var(--fd-accent);
}

/* ── Quick Action Buttons ── */

.fd-qi-actions {
  display: flex; gap: 3px; flex-shrink: 0;
}

.fd-qi-action {
  background: var(--fd-accent); color: #fff; border: none;
  padding: 2px 8px; border-radius: 3px; font-size: 10px;
  font-weight: 600; font-family: var(--fd-font); cursor: pointer;
  white-space: nowrap; transition: background var(--fd-transition);
}

.fd-qi-action:hover { background: #2563eb; }
.fd-qi-action.call { background: var(--fd-green); }
.fd-qi-action.call:hover { background: #059669; }
.fd-qi-action.reply { background: var(--fd-amber); }
.fd-qi-action.reply:hover { background: #d97706; }

/* ── Logo ── */

.fd-logo-img {
  height: 24px; width: auto; object-fit: contain; flex-shrink: 0;
}

.fd-logo {
  font-size: 16px; font-weight: 900; letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--fd-accent), var(--fd-cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fd-header-center {
  display: flex; align-items: center; gap: 12px;
}

/* ── Score Ring ── */

.fd-score-ring {
  position: relative; width: 40px; height: 40px; cursor: default;
}

.fd-score-svg {
  width: 40px; height: 40px; transform: rotate(-90deg);
}

.fd-score-track {
  fill: none; stroke: var(--fd-border); stroke-width: 4;
}

.fd-score-fill {
  fill: none; stroke: var(--fd-green); stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 125.66; /* 2 * PI * 20 */
  stroke-dashoffset: 125.66;
  transition: stroke-dashoffset 1s ease, stroke 0.3s ease;
}

.fd-score-value {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--fd-heading);
}

/* ── Streak ── */

.fd-streak {
  display: flex; align-items: center; gap: 3px;
  font-size: 12px; color: var(--fd-heading);
}

.fd-streak-flame { font-size: 16px; }
.fd-streak-count { font-weight: 800; font-size: 16px; }
.fd-streak-label { font-size: 9px; color: var(--fd-muted); }

/* ── Badges ── */

.fd-badges {
  display: flex; gap: 4px; align-items: center;
}

.fd-badge {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 14px; cursor: default;
  border: 2px solid var(--fd-border);
  opacity: 0.3;
  transition: opacity 0.3s, border-color 0.3s, transform 0.3s;
}

.fd-badge.earned {
  opacity: 1;
  border-color: var(--fd-green);
  animation: badge-pop 0.5s ease;
}

.fd-badge.earned.gold { border-color: var(--fd-amber); }

/* ── Queue Progress Bars ── */

.fd-queue-progress {
  height: 3px; background: var(--fd-border); flex-shrink: 0;
}

.fd-queue-progress-fill {
  height: 100%;
  background: var(--fd-green);
  width: 100%;
  transition: width 0.5s ease, background 0.3s ease;
  border-radius: 0 2px 2px 0;
}

/* ── Animations ── */
@keyframes pulse-green { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes kpi-bump { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes badge-pop { 0% { transform: scale(0.5); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ══════════════════════════════════════════
   View Toggle
   ══════════════════════════════════════════ */

.fd-view-toggle {
  display: flex; gap: 2px;
  background: var(--fd-surface-alt); border-radius: 6px; padding: 2px;
  border: 1px solid var(--fd-border);
}
.fd-view-btn {
  padding: 4px 12px; border: none; border-radius: 4px;
  font-family: var(--fd-font); font-size: 12px; font-weight: 600;
  color: var(--fd-muted); background: transparent; cursor: pointer;
  transition: all var(--fd-transition);
  display: inline-flex; align-items: center; gap: 6px;
}
.fd-view-btn .fd-icon { width: 14px; height: 14px; }
.fd-view-btn:hover { color: var(--fd-heading); }
.fd-view-btn.active {
  background: var(--fd-accent); color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}


/* ── Responsive ── */
@media (max-width: 800px) {
  .fd-main { grid-template-columns: 1fr; }
  .fd-kpi-bar { grid-template-columns: repeat(3, 1fr); }
  body { overflow-y: auto; height: auto; }
}

/* ── Install Prompt (shown when this location has no oauth_tokens row) ── */

.fd-install-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--fd-bg, #0a0f1a);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fd-install-card {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 14px;
  padding: 40px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.fd-install-logo {
  font-size: 13px;
  font-weight: 800;
  color: var(--fd-heading);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.fd-install-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fd-heading);
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}

.fd-install-message {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fd-body);
  margin: 0 0 28px 0;
}

.fd-install-button {
  display: inline-block;
  background: var(--fd-accent);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 8px;
  cursor: pointer;
}
.fd-install-button:hover { filter: brightness(1.1); }

.fd-install-after {
  font-size: 12px;
  color: var(--fd-muted);
  margin: 22px 0 0 0;
}

.fd-install-location {
  font-size: 11px;
  color: var(--fd-muted);
  margin: 16px 0 0 0;
  font-family: monospace;
  opacity: 0.5;
}

body.fd-not-installed > *:not(.fd-install-screen) { display: none !important; }

/* Lightweight toast notifications, surfaces soft-fail signals
   (e.g. GHL sync warnings on mark-read). Bottom-right corner so
   they don't obscure the workbench. */
#fd-toast-host {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
/* Action toasts carry a button, so they must accept clicks. */
.fd-toast-action {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fd-toast-btn {
  background: var(--fd-accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.fd-toast-btn:hover { filter: brightness(1.08);
}
.fd-toast {
  background: var(--fd-surface);
  color: var(--fd-text);
  border: 1px solid var(--fd-border);
  border-left: 3px solid var(--fd-accent);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
  max-width: 360px;
}
.fd-toast-warn { border-left-color: var(--fd-amber, #f59e0b); }
.fd-toast-err  { border-left-color: var(--fd-red,   #ef4444); }
.fd-toast-out  { opacity: 0; transform: translateY(8px); }

/* ── Right-hand contact-panel additions ──────────────────────────── */

/* Contact-type chip on the right edge of the name row, small
   "NEW" / "EXISTING" badge sourced from the account's contact-type
   custom field (falling back to the opportunity's same field, then
   tags). Solid-colour background with white text for high contrast,
   matching the chip-style elsewhere on the workbench. */
.fd-ctype-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--fd-surface-alt);
  color: var(--fd-muted);
  border: 1px solid var(--fd-border);
  white-space: nowrap;
}
.fd-ctype-chip-new {
  background: var(--fd-green);
  color: #fff;
  border-color: var(--fd-green);
}
.fd-ctype-chip-existing {
  background: var(--fd-accent);
  color: #fff;
  border-color: var(--fd-accent);
}

/* Inline contact-type setter. Sits under the contact's name when no
   contact type is on file. Two pill buttons, low-key visual weight so
   it does not steal attention from the action buttons below; reads as
   a quick repair tool the receptionist can use to keep the queue's
   classification accurate. */
.fd-ctype-set {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px 0;
  font-size: 11px;
  color: var(--fd-muted);
}
.fd-ctype-set-label {
  font-weight: 500;
  letter-spacing: 0.2px;
}
.fd-ctype-set-btn {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fd-heading);
  cursor: pointer;
  transition: background var(--fd-transition), border-color var(--fd-transition), color var(--fd-transition);
}
.fd-ctype-set-btn:hover {
  background: var(--fd-surface-alt);
  border-color: var(--fd-accent);
  color: var(--fd-accent);
}

/* Editable Opportunity quick-card at the top of the contact panel.
   Two fields side-by-side: Interest (text) and Estimated value
   (number). Click to edit, Enter or blur saves through
   /api/opportunity. */
.fd-opp-quick {
  border: 1px solid var(--fd-border);
}

/* ── Follow-up cadence ─────────────────────────────────────────── */

/* Cadence chip on the work-queue card title row: the contact's place
   in the in-app follow-up schedule. Colour = state. */
.fd-cadence-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  background: var(--fd-surface-alt);
  color: var(--fd-muted);
  border: 1px solid var(--fd-border);
}
.fd-cadence-upcoming { color: var(--fd-green); border-color: var(--fd-green); background: var(--fd-green-dim); }
.fd-cadence-due      { color: var(--fd-amber); border-color: var(--fd-amber); background: var(--fd-amber-dim); }
.fd-cadence-overdue  { color: #fff; border-color: var(--fd-red); background: var(--fd-red); }
/* Overdue but the business is closed right now: amber until opening. */
.fd-cadence-overdue-soft { color: #fff; border-color: var(--fd-amber); background: var(--fd-amber); }
.fd-cadence-snoozed  { color: var(--fd-muted); border-color: var(--fd-border); background: var(--fd-surface-alt); }
.fd-cadence-replied  { color: var(--fd-cyan); border-color: var(--fd-cyan); background: var(--fd-cyan-dim); }

/* Right-pane follow-up card. */
.fd-cadence-card .fd-section-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fd-cadence-status-line { font-size: 10px; font-style: normal; font-weight: 600; color: var(--fd-amber); }
.fd-cadence-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--fd-muted);
  padding: 6px 0;
}
.fd-cadence-replied-line {
  font-size: 11px;
  color: var(--fd-cyan);
  background: var(--fd-cyan-dim);
  border-radius: 4px;
  padding: 5px 8px;
  margin-bottom: 6px;
}
.fd-cadence-steps { list-style: none; margin: 0 0 8px 0; padding: 0; }
.fd-cadence-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--fd-body);
}
.fd-cadence-step em { width: 14px; text-align: center; font-style: normal; color: var(--fd-muted); flex: 0 0 auto; }
.fd-cadence-step span { color: var(--fd-muted); font-size: 11px; width: 44px; flex: 0 0 auto; }
.fd-cadence-step strong { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-cadence-step i { font-style: normal; font-size: 9px; letter-spacing: 0.5px; color: var(--fd-muted); flex: 0 0 auto; }
.fd-cadence-step-done { opacity: 0.55; }
.fd-cadence-step-done em { color: var(--fd-green); }
.fd-cadence-step-current strong { color: var(--fd-heading); font-weight: 700; }
.fd-cadence-step-current em { color: var(--fd-accent); }
.fd-cadence-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fd-cadence-btn {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--fd-font);
  font-size: 11px;
  font-weight: 600;
  color: var(--fd-heading);
  cursor: pointer;
  transition: background var(--fd-transition), border-color var(--fd-transition), color var(--fd-transition);
}
.fd-cadence-btn:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
.fd-cadence-btn.primary {
  background: var(--fd-accent);
  border-color: var(--fd-accent);
  color: #fff;
}
.fd-cadence-btn.primary:hover { filter: brightness(1.1); color: #fff; }
.fd-cadence-stop:hover { border-color: var(--fd-red); color: var(--fd-red); }
.fd-cadence-channel, .fd-cadence-snooze {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 4px 6px;
  font-family: var(--fd-font);
  font-size: 11px;
  color: var(--fd-body);
}
.fd-cadence-action-status { font-size: 11px; color: var(--fd-muted); min-height: 14px; margin-top: 4px; }
.fd-cadence-action-status.err { color: var(--fd-red); }
.fd-cadence-action-status.saving { color: var(--fd-amber); }

/* ── Editable tags section ─────────────────────────────────────── */
.fd-tags-card .fd-section-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fd-tags-quick { display: inline-flex; gap: 6px; }
.fd-tag-toggle {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 10px;
  padding: 2px 10px;
  font-family: var(--fd-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--fd-muted);
  cursor: pointer;
  transition: all var(--fd-transition);
}
.fd-tag-toggle:hover { border-color: var(--fd-amber); color: var(--fd-amber); }
.fd-tag-toggle.on { background: var(--fd-amber); border-color: var(--fd-amber); color: #fff; }
.fd-tag-toggle-danger:hover { border-color: var(--fd-red); color: var(--fd-red); }
.fd-tag-toggle-danger.on { background: var(--fd-red); border-color: var(--fd-red); color: #fff; }
.fd-tags-status { font-size: 11px; color: var(--fd-muted); min-height: 14px; margin-top: 4px; }
.fd-tags-status.err { color: var(--fd-red); }
.fd-tags-status.saving { color: var(--fd-amber); }

/* ── Composer quick-reply templates ────────────────────────────── */
.fd-compose-templates { position: relative; align-self: flex-start; }
.fd-compose-templates-btn {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: var(--fd-font);
  font-size: 11px;
  font-weight: 600;
  color: var(--fd-body);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--fd-transition), color var(--fd-transition);
}
.fd-compose-templates-btn:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
.fd-compose-templates-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 300;
}
.fd-compose-template-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--fd-border);
  padding: 8px 12px;
  font-family: var(--fd-font);
  cursor: pointer;
}
.fd-compose-template-row:last-child { border-bottom: none; }
.fd-compose-template-row:hover { background: var(--fd-surface-alt); }
.fd-compose-template-row strong { font-size: 12px; color: var(--fd-heading); }
.fd-compose-template-row em { font-style: normal; font-size: 10px; color: var(--fd-muted); }

/* Assignee select in the add-task form. */
.fd-task-add-form select {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 5px 6px;
  font-family: var(--fd-font);
  font-size: 12px;
  color: var(--fd-heading);
  max-width: 130px;
}

/* Settings modal sections (branding + cadence editor). */
.fd-settings-section { margin-bottom: 20px; }
.fd-settings-section h3 { font-size: 13px; color: var(--fd-heading); margin: 0 0 4px 0; }
.fd-settings-hint { font-size: 11px; color: var(--fd-muted); margin: 0 0 10px 0; }
.fd-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.fd-settings-grid label, .fd-cadence-edit-row label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--fd-muted);
}
.fd-settings-grid input, .fd-cadence-edit-row input, .fd-cadence-edit-row select {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--fd-font);
  font-size: 12px;
  color: var(--fd-heading);
}
/* A step row is now a column: the day/channel/label controls on top
   (.fd-cadence-edit-main keeps the old flex layout) and the optional
   message editors underneath (.fd-step-msg). */
.fd-cadence-edit-row {
  padding: 8px;
  border: 1px solid var(--fd-border);
  border-radius: 6px;
  margin-bottom: 8px;
  background: var(--fd-surface);
}
.fd-cadence-edit-main {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.fd-cadence-edit-row input[name="step_day"] { width: 56px; }
.fd-cadence-edit-row .fd-cadence-edit-label { flex: 1; }
.fd-step-msg { margin-top: 6px; }
.fd-msg-call-hint { margin: 4px 0 0 0; }
.fd-cadence-row-remove {
  background: none;
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  width: 26px;
  height: 28px;
  color: var(--fd-muted);
  font-size: 14px;
  cursor: pointer;
  flex: 0 0 auto;
}
.fd-cadence-row-remove:hover { border-color: var(--fd-red); color: var(--fd-red); }
#settingsAddStep { margin: 4px 0 10px 0; }
.fd-settings-toggles { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px 0; }
.fd-settings-toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fd-body);
  cursor: pointer;
}
.fd-settings-status { font-size: 11px; color: var(--fd-muted); margin-left: 8px; font-style: normal; }

/* ── Contact-edit Business section ── */
.fd-biz-create {
  display: flex;
  gap: 6px;
  align-items: center;
}
.fd-biz-create input {
  flex: 1;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--fd-font);
  font-size: 12px;
  color: var(--fd-heading);
}
.fd-biz-btn {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fd-body);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.fd-biz-btn:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
.fd-biz-automatch {
  background: var(--fd-accent-dim, rgba(20, 184, 166, 0.12));
  border: 1px solid var(--fd-accent);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fd-body);
}
.fd-biz-status {
  font-size: 12px;
  color: var(--fd-muted);
  min-height: 14px;
}
.fd-biz-details {
  border: 1px solid var(--fd-border);
  border-radius: 8px;
  padding: 10px;
  background: var(--fd-surface-alt);
}
.fd-biz-details .fd-settings-hint { margin: 8px 0; }

/* ── Setup view (full-page, admin-only) ── */
.fd-setup-view {
  padding: 20px;
  overflow-y: auto;
  height: calc(100vh - var(--fd-header-h, 64px));
}
.fd-setup-inner {
  max-width: 860px;
  margin: 0 auto;
}
.fd-setup-header h2 {
  font-size: 20px;
  color: var(--fd-heading);
  margin: 0 0 2px 0;
}
.fd-setup-inner .fd-settings-section {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.fd-settings-subhead {
  font-size: 12px;
  color: var(--fd-heading);
  margin: 16px 0 4px 0;
  padding-top: 12px;
  border-top: 1px solid var(--fd-border);
}
/* Message-editor fields (textareas weren't covered by the input rule) */
.fd-msg-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--fd-muted);
  margin-top: 8px;
}
.fd-msg-label textarea,
.fd-msg-label input,
.fd-msg-label select,
.fd-settings-textarea-label textarea {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--fd-font);
  font-size: 12px;
  color: var(--fd-heading);
  resize: vertical;
}
.fd-msg-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  position: relative;
}
.fd-msg-tool {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fd-body);
  cursor: pointer;
  font-family: inherit;
}
.fd-msg-tool:hover { border-color: var(--fd-accent); color: var(--fd-accent); }
.fd-var-menu {
  position: absolute;
  z-index: 40;
  margin-top: 2px;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-height: 260px;
  overflow-y: auto;
  min-width: 320px;
}
.fd-var-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  color: var(--fd-body);
  text-align: left;
}
.fd-var-menu-item:hover { background: var(--fd-surface-alt); }
.fd-var-menu-item code {
  color: var(--fd-accent);
  font-size: 11px;
  white-space: nowrap;
}
/* Appointment message cards */
.fd-appt-card {
  border: 1px solid var(--fd-border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--fd-surface-alt);
}
.fd-appt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fd-appt-card-head h4 { margin: 0; font-size: 13px; color: var(--fd-heading); }
.fd-appt-default-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--fd-accent-dim, rgba(20, 184, 166, 0.15));
  color: var(--fd-accent);
  vertical-align: middle;
}
.fd-appt-enabled {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fd-body);
  cursor: pointer;
}
.fd-msg-preview-label {
  font-size: 11px;
  color: var(--fd-muted);
  margin: 10px 0 4px 0;
}
.fd-msg-preview {
  background: var(--fd-bg);
  border: 1px dashed var(--fd-border);
  border-radius: 6px;
  padding: 10px;
  font-family: var(--fd-font);
  font-size: 12px;
  color: var(--fd-body);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
/* Send-mode radios */
.fd-send-mode { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.fd-send-mode label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--fd-body);
  cursor: pointer;
  line-height: 1.45;
}
.fd-send-mode input { margin-top: 2px; }
/* Theme picker (Settings → Branding). */
.fd-theme-picker-label {
  font-size: 11px;
  color: var(--fd-muted);
  margin: 10px 0 6px;
}
.fd-settings-hint-inline { font-weight: 400; opacity: 0.8; }
.fd-theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.fd-theme-swatch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--fd-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--fd-body);
  cursor: pointer;
  transition: border-color var(--fd-transition);
}
.fd-theme-swatch:hover { border-color: var(--fd-muted); }
.fd-theme-swatch.active { border-color: var(--fd-accent); color: var(--fd-heading); }
.fd-theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.fd-settings-textarea-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--fd-muted);
  margin-top: 4px;
}
.fd-settings-textarea-label textarea {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--fd-font);
  font-size: 12px;
  color: var(--fd-heading);
  resize: vertical;
}

/* Consolidated opportunity card: editable fields up top, summary
   chips below. The summary chips reuse .fd-opp-card styling so
   they look like the standalone list did before. */
/* Outcome workflow on the Opportunity card, moved here from the
   appointment card. Shown when there's a past appointment AND
   the opportunity is still open. Same shape as the appointment-
   card buttons used to have: three coloured-outline buttons, then
   a confirm slot with notes + Save when one is clicked. */
.fd-opp-outcome-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--fd-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fd-opp-outcome-prompt {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fd-accent);
}
.fd-opp-outcome-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.fd-opp-outcome-confirm:empty { display: none; }
.fd-opp-outcome-confirm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--fd-border);
}
.fd-opp-outcome-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid var(--fd-amber, #f59e0b);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11px;
  color: var(--fd-heading);
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.fd-opp-outcome-warning span { color: var(--fd-amber, #f59e0b); font-weight: 800; }
.fd-opp-outcome-note-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fd-muted);
}
.fd-opp-outcome-note-label textarea {
  font-size: 12px;
  padding: 6px;
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  resize: vertical;
  background: var(--fd-surface);
  color: var(--fd-heading);
  font-family: inherit;
}
.fd-opp-outcome-stage-select {
  font-size: 12px;
  padding: 6px;
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  background: var(--fd-surface);
  color: var(--fd-heading);
  cursor: pointer;
}
.fd-opp-outcome-confirm-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.fd-opp-outcome-back,
.fd-opp-outcome-save {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.fd-opp-outcome-back {
  background: transparent;
  border: 1px solid var(--fd-border);
  color: var(--fd-muted);
}
.fd-opp-outcome-save {
  background: var(--fd-accent);
  border: 1px solid var(--fd-accent);
  color: #fff;
}
.fd-opp-outcome-save:disabled { opacity: 0.55; cursor: not-allowed; }
.fd-opp-summary-rows {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fd-opp-summary-rows:empty { display: none; }

/* Inline Add Note form at the bottom of the panel body. */
.fd-add-note-form textarea {
  width: 100%;
  font-size: 12px;
  padding: 8px;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  color: var(--fd-text);
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}
.fd-add-note-form textarea:focus {
  outline: none;
  border-color: var(--fd-accent);
  box-shadow: 0 0 0 2px var(--fd-accent-glow);
}
.fd-add-note-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.fd-add-note-form button {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 4px;
  border: 1px solid var(--fd-accent);
  background: var(--fd-accent);
  color: #fff;
  cursor: pointer;
}
.fd-add-note-form button:hover:not(:disabled) { filter: brightness(1.08); }
.fd-add-note-form button:disabled {
  opacity: 0.6; cursor: not-allowed;
}
.fd-add-note-status {
  font-size: 10px;
  font-weight: 600;
}
.fd-add-note-status.saved { color: var(--fd-green); }
.fd-add-note-status.err   { color: var(--fd-red, #ef4444); }
.fd-opp-quick-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.fd-opp-quick-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.fd-opp-quick-field > label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fd-muted);
  font-weight: 700;
}
.fd-opp-quick-input-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.fd-opp-quick-input-row > .fd-opp-quick-money { flex: 1; min-width: 0; }
.fd-opp-quick-input-row > input,
.fd-opp-quick-input-row > select { flex: 1; min-width: 0; }
.fd-opp-quick-save {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 0 14px;
  border-radius: 5px;
  border: 1px solid var(--fd-accent);
  background: var(--fd-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.25);
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.04s;
}
.fd-opp-quick-save:hover:not(:disabled) {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}
.fd-opp-quick-save:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 2px rgba(59, 130, 246, 0.25); }
.fd-opp-quick-save:disabled {
  background: var(--fd-surface-alt);
  color: var(--fd-muted);
  border-color: var(--fd-border);
  box-shadow: none;
  cursor: not-allowed;
}
/* Highlight when the Estimated Value hasn't been set yet, amber
   ring around the money-input + a "needs setting" flag next to the
   label so reception is prompted to enter a value before pipeline
   reports turn out wrong. Clears the moment the input gets a
   non-zero value. */
/* Panel-wide loading overlay, replaces the per-field shimmer.
   Sits on top of the freshly-rendered right panel until every
   async fetch (opp detail, last note) resolves. User preferred
   one clean spinner over the whole side rather than per-field
   shimmer states (which could leave some fields populated while
   others looked broken). */
.fd-panel-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  /* Solid surface, anything rendered behind us is fully masked so
     the receptionist never sees stale data peek through while the
     real values are still loading. */
  background: var(--fd-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s ease-out;
}
.fd-panel-loading-fade { opacity: 0; }
.fd-panel-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--fd-muted);
  font-size: 12px;
}
.fd-panel-loading-label { letter-spacing: 0.2px; }
.fd-panel-loading-slow { color: var(--fd-amber); }
.fd-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--fd-border);
  border-top-color: var(--fd-accent);
  border-radius: 50%;
  animation: fd-spin 0.8s linear infinite;
}
@keyframes fd-spin {
  to { transform: rotate(360deg); }
}

.fd-opp-quick-needs-value .fd-opp-quick-money {
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
  border-radius: 4px;
}
.fd-opp-quick-needs-value .fd-opp-quick-money input {
  border-color: var(--fd-amber, #f59e0b);
  background: rgba(245, 158, 11, 0.04);
}
/* Small "?" help icon next to the Estimated Value label when the
   field is unset / £0. Hover for the explanation tooltip, keeps
   the label row tight (the previous text badge crowded the
   layout). */
.fd-opp-needs-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--fd-amber, #f59e0b);
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
  cursor: help;
  line-height: 1;
}

.fd-opp-quick-field input,
.fd-opp-quick-field select {
  width: 100%;
  font-size: 13px;
  padding: 6px 8px;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  color: var(--fd-text);
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.fd-opp-quick-field select {
  cursor: pointer;
}
.fd-opp-quick-field input::placeholder { color: var(--fd-muted); opacity: 0.5; }
.fd-opp-quick-field input:hover,
.fd-opp-quick-field select:hover { border-color: var(--fd-accent); }
.fd-opp-quick-field input:focus,
.fd-opp-quick-field select:focus {
  outline: none;
  border-color: var(--fd-accent);
  background: var(--fd-surface);
  box-shadow: 0 0 0 2px var(--fd-accent-glow);
}
.fd-opp-quick-money {
  position: relative;
  display: flex;
  align-items: center;
}
.fd-opp-quick-money em {
  position: absolute;
  left: 8px;
  font-style: normal;
  font-weight: 700;
  color: var(--fd-muted);
  font-size: 13px;
  pointer-events: none;
}
.fd-opp-quick-money input { padding-left: 22px; }
.fd-opp-quick-status {
  font-size: 10px;
  margin-top: 4px;
  min-height: 14px;
  font-weight: 600;
}
.fd-opp-quick-status.saving { color: var(--fd-muted); }
.fd-opp-quick-status.saved  { color: var(--fd-green); }
.fd-opp-quick-status.err    { color: var(--fd-red, #ef4444); }

/* Last-note section: replaces the previous Last Message card. Shows
   the single most-recent note for this contact, lazily fetched from
   /api/contact-notes and cached per contact. */
.fd-last-note .fd-section-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fd-section-card-meta {
  font-style: normal;
  font-weight: 400;
  color: var(--fd-muted);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}
.fd-section-card-link {
  background: none;
  border: none;
  color: var(--fd-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: auto;
}
.fd-section-card-link:hover { text-decoration: underline; }
/* All-notes modal list */
.fd-contact-notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fd-contact-note { background: var(--fd-surface-alt); border-left: 3px solid var(--fd-accent); padding: 10px 12px; border-radius: 4px; }
.fd-contact-note-meta { font-size: 11px; color: var(--fd-muted); margin-bottom: 6px; }
.fd-contact-note-body { font-size: 13px; line-height: 1.45; color: var(--fd-heading); white-space: pre-wrap; }
.fd-last-note-body {
  background: var(--fd-surface-alt);
  border-left: 3px solid var(--fd-accent);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  margin-top: 6px;
}
.fd-last-note-empty {
  font-size: 12px;
  color: var(--fd-muted);
  font-style: italic;
  padding: 4px 0;
}

/* AI summary card: contact.qual_last_ai_summary. Hidden entirely
   when the field is empty so we don't show a stale placeholder. */
.fd-ai-summary-body {
  background: var(--fd-surface-alt);
  border-left: 3px solid var(--fd-purple);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Tasks section in the right panel. */
.fd-tasks-card .fd-tasks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fd-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--fd-surface-alt);
  border-left: 2px solid var(--fd-amber);
  border-radius: 2px;
  font-size: 12px;
}
.fd-task-row strong { flex: 1; font-weight: 600; }
.fd-task-row em {
  font-style: normal;
  font-size: 10px;
  color: var(--fd-muted);
}
.fd-task-row.overdue {
  border-left-color: var(--fd-red);
}
.fd-task-row.overdue em {
  color: var(--fd-red);
}
.fd-task-row.fd-task-done {
  opacity: 0.45;
}
.fd-task-row.fd-task-done strong {
  text-decoration: line-through;
}
.fd-task-done-btn {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  background: var(--fd-surface);
  color: var(--fd-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--fd-transition);
}
.fd-task-done-btn:hover { border-color: var(--fd-green); color: var(--fd-green); }
.fd-task-done-btn:disabled { opacity: 0.5; cursor: default; }
.fd-tasks-card .fd-section-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fd-task-add-toggle {
  background: none;
  border: none;
  color: var(--fd-accent);
  font-family: var(--fd-font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.fd-task-add-toggle:hover { text-decoration: underline; }
.fd-tasks-empty { font-size: 11px; color: var(--fd-muted); padding: 2px 0 6px; }
.fd-task-add-form {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.fd-task-add-form input {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: var(--fd-font);
  font-size: 12px;
  color: var(--fd-heading);
}
.fd-task-add-form input[name="task_title"] { flex: 1; }
.fd-task-add-form input[name="task_due"] { width: 130px; }
.fd-tasks-status { font-size: 11px; color: var(--fd-muted); min-height: 14px; margin-top: 4px; }
.fd-tasks-status.err { color: var(--fd-red); }
.fd-tasks-status.saving { color: var(--fd-amber); }

/* The selected-head's name + reason + pills column needs to flex
   properly under the avatar. */
.fd-selected-head-body { flex: 1; min-width: 0; }

/* ── Contact edit modal + clickable name ──────────────────────── */

.fd-selected-name-edit {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fd-selected-name-edit .fd-edit-icon {
  opacity: 0;
  font-size: 12px;
  color: var(--fd-muted);
  transition: opacity 0.15s;
}
.fd-selected-name-edit:hover { text-decoration: underline; }
.fd-selected-name-edit:hover .fd-edit-icon { opacity: 1; }

/* The contact-edit modal uses .fd-modal-edit-form already styled
   elsewhere, but its fields layout is different from the opportunity
   modal's grid, stack vertically with labelled rows. */
.fd-modal-edit-form .fd-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-template-columns: none;
}
.fd-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
}
.fd-modal-field > span {
  display: block;
  color: var(--fd-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fd-modal-field input,
.fd-modal-field select,
.fd-modal-field textarea,
.fd-modal-add-note-label textarea {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 5px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--fd-text);
}
.fd-modal-field input:focus,
.fd-modal-field select:focus,
.fd-modal-field textarea:focus,
.fd-modal-add-note-label textarea:focus {
  outline: 2px solid var(--fd-accent);
  outline-offset: -1px;
}
.fd-modal-readonly .fd-modal-readonly-value {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-left: 3px solid var(--fd-muted);
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--fd-text);
  font-size: 13px;
  white-space: pre-wrap;
}
.fd-modal-section-head {
  margin: 8px 0 2px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--fd-border);
}
.fd-modal-section-head span {
  color: var(--fd-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fd-modal-add-note-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.fd-modal-add-note-label span {
  color: var(--fd-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fd-modal-notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.fd-modal-note {
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 12px;
}
.fd-modal-note-meta {
  color: var(--fd-muted);
  font-size: 10px;
  margin-bottom: 2px;
}
.fd-modal-note-body { white-space: pre-wrap; }
.fd-modal-status {
  font-size: 11px;
  margin-top: 8px;
  min-height: 1em;
}
.fd-modal-status.sending { color: var(--fd-amber); }
.fd-modal-status.success { color: var(--fd-green); }
.fd-modal-status.error   { color: var(--fd-red); }

/* ── Contact-edit modal: section cards + 2-col grid + sticky save ── */

.fd-section-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fd-section-card {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 6px;
  padding: 8px 10px 10px;
  /* Hair-of-elevation shadow, separates stacked cards from each
     other so a dense panel reads as "cards" rather than "lines of
     rectangles". Subtle enough not to feel skeuomorphic. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Opportunity card sits at the top of the right panel and is the
   receptionist's primary anchor. Tinted blue background + accent
   border-left make it visually distinct from the neutral section
   cards beneath. Pairs with the green-tinted appointment card to
   colour-code the two operative workflows. */
.fd-opp-card-section {
  background: var(--fd-accent-glow);
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-left: 3px solid var(--fd-accent);
}

.fd-section-card-head {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fd-muted);
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--fd-border);
}
/* Opportunity-card head: small uppercase label on top, primary opp
   name as a prominent title below. The receptionist's anchor for
   the contact. */
.fd-opp-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.fd-section-card-head-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fd-muted);
}
.fd-opp-card-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fd-heading);
  line-height: 1.25;
}
/* Stage + status row beneath the opp title, quick lifecycle context
   before the receptionist scrolls into the editable inputs. */
.fd-opp-card-stagestatus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.fd-opp-card-stage,
.fd-opp-card-status {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid;
}
.fd-opp-card-stage {
  background: var(--fd-surface-alt);
  color: var(--fd-heading);
  border-color: var(--fd-border);
}
/* Status pills now use the same soft pattern as the appointment
   status, tinted background, tone-coloured border, dark text. The
   solid-colour-with-white-text "screaming chip" look was high-
   saturation and clashed with the surrounding card hues. */
.fd-opp-card-status { color: var(--fd-heading); }
.fd-opp-card-status-open       { background: var(--fd-accent-glow);                          border-color: var(--fd-accent); }
.fd-opp-card-status-won        { background: var(--fd-green-dim);                            border-color: var(--fd-green);  }
.fd-opp-card-status-lost       { background: var(--fd-red-dim,   rgba(239,68,68,0.14));      border-color: var(--fd-red);    }
.fd-opp-card-status-abandoned  { background: var(--fd-amber-dim, rgba(245,158,11,0.14));     border-color: var(--fd-amber);  }

/* Inline status that sits next to the OPPORTUNITY label, e.g.
   "OPPORTUNITY · ABANDONED". Inherits the small-caps style of the
   label and tones the status word so the lifecycle state is
   readable at a glance without a separate pill. */
.fd-opp-card-head-status {
  font-weight: 800;
  letter-spacing: 0.4px;
}
.fd-opp-card-head-status-open       { color: var(--fd-accent); }
.fd-opp-card-head-status-won        { color: var(--fd-green,  #22c55e); }
.fd-opp-card-head-status-lost       { color: var(--fd-red,    #ef4444); }
.fd-opp-card-head-status-abandoned  { color: var(--fd-amber,  #f59e0b); }
.fd-opp-card-head-status-none       { color: var(--fd-muted); }

/* Create-opportunity flow (callbacks with no opp on file). Mirrors
   the edit toggle: a red "create" word in the header, and a form
   hidden until the card has .fd-opp-creating. */
.fd-opp-create-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fd-red);
  cursor: pointer;
}
.fd-opp-create-toggle:hover { text-decoration: underline; }

.fd-opp-create .fd-opp-create-form { display: none; }
.fd-opp-create.fd-opp-creating .fd-opp-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(37, 99, 235, 0.18);
}
.fd-opp-create-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.fd-opp-create-actions button {
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  font-family: inherit;
}
.fd-opp-create-cancel {
  border: 1px solid var(--fd-border);
  background: var(--fd-surface-alt);
  color: var(--fd-heading);
}
.fd-opp-create-submit {
  border: 1px solid var(--fd-accent);
  background: var(--fd-accent);
  color: #fff;
}
.fd-opp-create-submit:hover { filter: brightness(1.08); }
.fd-opp-create-submit:disabled { opacity: 0.6; cursor: default; }

/* Edit toggle in the opportunity header — sits inline with the
   "OPPORTUNITY · OPEN" label, red so it reads as an action rather
   than another status. Click flips the card between the compact
   read-only Stage · Value display and the full editable form. */
.fd-opp-edit-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fd-red);
  cursor: pointer;
}
.fd-opp-edit-toggle:hover { text-decoration: underline; }

/* Read-only display of Stage and Value. Compact: each pair sits
   on the same line, separated by a thin vertical bar. Wraps if
   the right pane gets narrow. */
.fd-opp-readonly {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(37, 99, 235, 0.18);
}
.fd-opp-ro-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.fd-opp-ro-row + .fd-opp-ro-row::before {
  content: "|";
  color: var(--fd-border-strong, #cbd5e1);
  margin-right: 6px;
  font-weight: 400;
}
.fd-opp-ro-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fd-muted);
  white-space: nowrap;
}
.fd-opp-ro-value {
  font-size: 13px;
  color: var(--fd-heading);
  font-weight: 600;
}

/* Editable form — hidden by default, revealed when the card has
   the .fd-opp-editing class (set by the edit toggle in the header).
   The reverse rule hides the read-only display while editing. */
.fd-opp-quick .fd-opp-edit-form { display: none; }
.fd-opp-quick.fd-opp-editing .fd-opp-readonly { display: none; }
.fd-opp-quick.fd-opp-editing .fd-opp-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(37, 99, 235, 0.18);
}

/* Clickable opp-card header, looks like a plain header but the
   whole title block is one big hit target for "open full opp".  */
.fd-opp-card-head-click {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.fd-opp-card-head-click:hover .fd-opp-card-title { text-decoration: underline; }
.fd-opp-card-head-click:focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 2px; border-radius: 4px; }

.fd-field-grid {
  display: grid;
  /* minmax(0,…): a bare 1fr track's MINIMUM is the content's
     intrinsic width, so a <select> with long option text (business
     names + domains) silently expands its column and squeezes the
     neighbour. Zero-minimum tracks stay a true 50/50. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 12px;
}
.fd-field-grid select,
.fd-field-grid input { min-width: 0; max-width: 100%; }

/* Full-width fields span both columns. Always applies to textareas
   and read-only blocks regardless of declared width. */
.fd-field-wide { grid-column: 1 / -1; }

/* Tighten the contact-edit field labels inside the new grid (they
   were declared in the earlier general .fd-modal-field block; here
   we just remove any vestigial bottom margin so the grid gap is
   the only spacing). */
.fd-section-card .fd-modal-field { margin: 0; }

/* Notes inside the section card use the existing .fd-modal-note
   styles but the surrounding card already provides the border so
   the inner notes can be flatter. */
.fd-section-card .fd-modal-notes-list { gap: 6px; }
.fd-section-card .fd-modal-note {
  background: var(--fd-surface-alt);
}
.fd-modal-notes-empty {
  font-size: 11px;
  color: var(--fd-muted);
  font-style: italic;
  padding: 4px 0;
}

/* Add-note label sits flush below the recent notes inside the
   Notes card, no extra top margin. */
.fd-section-card .fd-modal-add-note-label { margin-top: 10px; }

/* Sticky save bar at the bottom of the modal body. Keeps Save /
   Cancel visible without scrolling, on top of a subtle backdrop so
   it floats above scrolled content. */
.fd-modal-sticky-actions {
  position: sticky;
  bottom: 0;
  margin: 14px -14px -14px;   /* extend to modal-body edges */
  padding: 10px 14px;
  background: var(--fd-surface-alt);
  border-top: 1px solid var(--fd-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fd-modal-sticky-actions .fd-modal-status {
  margin: 0;
  min-height: 0;
  flex: 1;
}
.fd-modal-sticky-actions .fd-modal-actions {
  margin: 0;
}

/* Primary save button gets the accent colour so the affirmative
   action is unambiguous. Cancel keeps the neutral treatment. */
.fd-modal-actions button.primary {
  background: var(--fd-accent);
  color: #fff;
  border-color: var(--fd-accent);
}
.fd-modal-actions button.primary:hover { filter: brightness(1.08); }
.fd-modal-actions button.primary:disabled {
  opacity: 0.55;
  cursor: wait;
  filter: none;
}

/* Sub-header used inside section cards for the two notes blocks
   ("Recent" / "Add a note"). Smaller than a section header. */
.fd-subheader {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fd-muted);
  margin: 0 0 6px;
}

.fd-notes-recent { margin-bottom: 8px; }
.fd-notes-divider {
  height: 1px;
  background: var(--fd-border);
  margin: 8px 0 12px;
  opacity: 0.7;
}
.fd-notes-add textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--fd-surface-alt);
  border: 1px solid var(--fd-border);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--fd-text);
  resize: vertical;
  min-height: 90px;
}
.fd-notes-add textarea:focus {
  outline: 2px solid var(--fd-accent);
  outline-offset: -1px;
}


/* ── Install Prompt (shown when this location has no oauth_tokens row) ── */

.fd-install-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--fd-bg, #0a0f1a);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fd-install-card {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 14px;
  padding: 40px;
  max-width: 460px;
  width: 100