/* ===================================================================
   pds Tech CRM — styled to match the pds Tech Brand Guidelines v1.4

   Theming. Colours are tokens (CSS variables), defined twice:
     1. :root                    the dark theme (the default)
     2. html[data-theme="light"] the light theme (Paper #F7F6F2 / Ink #12203A / Teal #1E9E8C)
   theme.js sets data-theme on <html>. Write new rules with the tokens, never a bare
   colour, and they work in both. A few components are deliberately dark "scenes" in either
   theme (toasts, deal celebrations, the video room): they re-declare the dark tokens (see
   the island selectors below), so their rules need no light variant.
   ========================================================================== */

:root {
  /* Brand constants — the same in both themes. --fg (below) is the text colour. */
  --ink: #12203a;
  --paper: #f7f6f2;
  --accent: #1e9e8c;
  --accent-dark: #147567;

  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --crm-sidebar-width: 196px;
  --crm-sidebar-collapsed-width: 64px;
}

body.sidebar-collapsed {
  --crm-sidebar-width: var(--crm-sidebar-collapsed-width);
}

@media (max-width: 768px) {
  :root {
    --crm-sidebar-width: 0px;
  }
}

/* ---- Dark theme (default), also re-applied inside the dark "scenes" in light mode ---- */
:root,
html[data-theme="light"] .toast,
html[data-theme="light"] .celebration-overlay,
html[data-theme="light"] .rickroll-overlay,
html[data-theme="light"] .meeting-modal-box,
html[data-theme="light"] .camera-preview-wrapper {

  /* Text, lines and cards */
  --fg: #f7f6f2;
  --accent-text: #2bb8a3;
  --muted: #c3c9d6;
  --line: rgba(247, 246, 242, 0.14);
  --line-soft: rgba(247, 246, 242, 0.16);
  --card: rgba(247, 246, 242, 0.045);
  --card-strong: rgba(247, 246, 242, 0.06);
  --accent-ink: #1e9e8c;
  --accent-hover: #3dd9c4;
  --danger: #f87171;
  --card-shadow: none;
  --surf-row: #141b2d;
  --border-row: #222f4c;
  --chart-axis: #8b909c;
  --chart-grid: #2a2e38;

  /* Page */
  --page-bg: radial-gradient(ellipse 140% 40% at 50% 0%, #123a3f 0%, rgba(18, 58, 63, 0) 60%),
    linear-gradient(180deg, #060c18 0%, #0a1c2e 30%, #0b2830 62%, #0e332f 100%);
  --page-edge: #060c18;
  --scrim: rgba(4, 8, 16, 0.88);
  --color-scheme: dark;

  /* Channels: rgba(var(--x-rgb), alpha) keeps each rule's own alpha */
  --fg-rgb: 247, 246, 242;
  --hi-rgb: 255, 255, 255;
  --surf-rgb: 6, 12, 24;
  --shade-rgb: 0, 0, 0;
  --shadow-rgb: 0, 0, 0;
  --shadow-k: 1;
  --shade-k: 1;

  /* Surfaces */
  --surf-modal: #0d1522;
  --surf-pop-a: #0b1424;
  --surf-pop-b: #0b1628;
  --surf-raised-a: #111a29;
  --surf-raised-b: #101926;
  --surf-raised-c: #161b26;
  --surf-raised-d: #131d31;
  --surf-inset: #080e18;
  --surf-teal: #0d2226;
  --surf-calhead: #0a1726;
  --surf-expanded: rgba(10, 24, 38, 0.65);
  --surf-select: rgba(15, 23, 42, 0.85);
  --surf-select-hover: rgba(15, 23, 42, 0.98);
  --surf-unread: rgba(14, 23, 42, 0.9);
  --surf-action-hover: rgba(14, 23, 42, 0.85);
  --surf-afr-head: rgba(13, 21, 34, 0.95);
  --surf-afr-notes: rgba(13, 21, 34, 0.9);
  --surf-afr-notes-hover: rgba(19, 30, 48, 0.98);
  --surf-afr-new: rgba(14, 30, 42, 0.55);
  --surf-ai-card: rgba(8, 16, 32, 0.75);
  --surf-ghost: rgba(10, 18, 30, 0.45);
  --surf-note: rgba(30, 41, 59, 0.4);
  --ev-base: #0b1626;
  --ev-pct: 32%;

  /* Text colours chosen for the background they sit on (pills, badges, status) */
  --tx-slate-50: #f8fafc;
  --tx-slate-100: #f1f5f9;
  --tx-slate-200: #e2e8f0;
  --tx-slate-300: #cbd5e1;
  --tx-red-200: #fecaca;
  --tx-red-300: #fca5a5;
  --tx-red-400: #f87171;
  --tx-red-500: #ef4444;
  --tx-rose: #f2879e;
  --tx-emerald-200: #a7f3d0;
  --tx-green-300: #86efac;
  --tx-emerald-400: #34d399;
  --tx-emerald-500: #10b981;
  --tx-teal-300: #5eead4;
  --tx-teal-400: #2dd4bf;
  --tx-teal-500: #4fd1c5;
  --tx-sky-300: #7dd3fc;
  --tx-sky-400: #38bdf8;
  --tx-blue-300: #93c5fd;
  --tx-blue-400: #60a5fa;
  --tx-indigo-100: #e0e7ff;
  --tx-indigo-300: #a5b4fc;
  --tx-indigo-400: #818cf8;
  --tx-purple-300: #d8b4fe;
  --tx-amber-400: #fbbf24;
  --tx-amber-500: #f59e0b;
  --tx-yellow-300: #fde047;
  --tx-yellow-200: #fef08a;
  --tx-gold-300: #f6c065;
  --tx-gold-400: #e0a13c;
  --tx-orange-300: #fdba74;
  --tx-orange-200: #fed7aa;
  --tx-soft: #cfd4e0;
  --tx-gray-300: #d1d5db;
  --tx-msg: rgba(241, 245, 249, 0.95);
  --tx-faint: rgba(154, 163, 181, 0.45);
  --tx-on-danger-hover: #ffffff;
}

/* ---- Light theme ---- */
html[data-theme="light"] {

  /* Text, lines and cards */
  --fg: #12203a;
  --accent-text: #147567;
  --muted: #5a667b;
  --line: rgba(18, 32, 58, 0.12);
  --line-soft: rgba(18, 32, 58, 0.18);
  --card: rgba(255, 255, 255, 0.72);
  --card-strong: #ffffff;
  --accent-ink: #147567;
  --accent-hover: #27b3a0;
  --danger: #b91c1c;
  --card-shadow: 0 1px 2px rgba(18, 32, 58, 0.05), 0 10px 28px -14px rgba(18, 32, 58, 0.16);
  --surf-row: #ffffff;
  --border-row: rgba(18, 32, 58, 0.14);
  --chart-axis: #6b7488;
  --chart-grid: #d6dbe3;

  /* Page */
  --page-bg: radial-gradient(ellipse 140% 40% at 50% 0%, rgba(30, 158, 140, 0.14) 0%, rgba(30, 158, 140, 0) 60%),
    linear-gradient(180deg, #f7f6f2 0%, #f1f4f1 42%, #e7f1ee 100%);
  --page-edge: #f7f6f2;
  --scrim: rgba(18, 32, 58, 0.5);
  --color-scheme: light;

  /* Channels: rgba(var(--x-rgb), alpha) keeps each rule's own alpha */
  --fg-rgb: 18, 32, 58;
  --hi-rgb: 18, 32, 58;
  --surf-rgb: 255, 255, 255;
  --shade-rgb: 18, 32, 58;
  --shadow-rgb: 18, 32, 58;
  --shadow-k: 0.22;
  --shade-k: 0.3;

  /* Surfaces */
  --surf-modal: #ffffff;
  --surf-pop-a: #ffffff;
  --surf-pop-b: #ffffff;
  --surf-raised-a: #f3f5f7;
  --surf-raised-b: #eceff3;
  --surf-raised-c: #eceff3;
  --surf-raised-d: #eef1f4;
  --surf-inset: #fbfbf9;
  --surf-teal: #e6f3f0;
  --surf-calhead: #f3f5f6;
  --surf-expanded: #ffffff;
  --surf-select: rgba(255, 255, 255, 0.9);
  --surf-select-hover: #ffffff;
  --surf-unread: rgba(30, 158, 140, 0.1);
  --surf-action-hover: rgba(255, 255, 255, 0.95);
  --surf-afr-head: rgba(238, 241, 244, 0.97);
  --surf-afr-notes: rgba(238, 241, 244, 0.95);
  --surf-afr-notes-hover: #e6eaef;
  --surf-afr-new: rgba(30, 158, 140, 0.08);
  --surf-ai-card: rgba(255, 255, 255, 0.8);
  --surf-ghost: rgba(18, 32, 58, 0.06);
  --surf-note: rgba(30, 158, 140, 0.06);
  --ev-base: #ffffff;
  --ev-pct: 26%;

  /* Text colours chosen for the background they sit on (pills, badges, status) */
  --tx-slate-50: #12203a;
  --tx-slate-100: #12203a;
  --tx-slate-200: #243350;
  --tx-slate-300: #44516a;
  --tx-red-200: #991b1b;
  --tx-red-300: #b91c1c;
  --tx-red-400: #b91c1c;
  --tx-red-500: #c62828;
  --tx-rose: #be123c;
  --tx-emerald-200: #065f46;
  --tx-green-300: #166534;
  --tx-emerald-400: #047857;
  --tx-emerald-500: #047857;
  --tx-teal-300: #0f766e;
  --tx-teal-400: #0f766e;
  --tx-teal-500: #0f766e;
  --tx-sky-300: #075985;
  --tx-sky-400: #0369a1;
  --tx-blue-300: #1d4ed8;
  --tx-blue-400: #1d4ed8;
  --tx-indigo-100: #3730a3;
  --tx-indigo-300: #4338ca;
  --tx-indigo-400: #4f46e5;
  --tx-purple-300: #7e22ce;
  --tx-amber-400: #92400e;
  --tx-amber-500: #b45309;
  --tx-yellow-300: #854d0e;
  --tx-yellow-200: #713f12;
  --tx-gold-300: #92400e;
  --tx-gold-400: #92400e;
  --tx-orange-300: #9a3412;
  --tx-orange-200: #9a3412;
  --tx-soft: #3a4760;
  --tx-gray-300: #3a4760;
  --tx-msg: rgba(18, 32, 58, 0.92);
  --tx-faint: rgba(90, 102, 123, 0.5);
  --tx-on-danger-hover: #7f1d1d;
}

/* The dark scenes also need the dark text colour: tokens alone don't change what they inherit. */
html[data-theme="light"] .toast,
html[data-theme="light"] .celebration-overlay,
html[data-theme="light"] .rickroll-overlay,
html[data-theme="light"] .meeting-modal-box,
html[data-theme="light"] .camera-preview-wrapper {
  color: var(--fg);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
}

/* Backstop for iOS rubber-band overscroll, which can reveal a sliver of
   html's own background beyond body's box — without this it's the
   browser's default white, since only body has the themed gradient. */
html {
  background: var(--page-edge);
  /* Always reserve the scrollbar's width: otherwise the centred header (and
     page) shifted sideways whenever a page was too short to scroll, e.g.
     going from the Funnel to the Calendar's month view. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    var(--page-bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; color: var(--fg); margin: 0; }
h2 { font-size: clamp(22px, 3vw, 28px); }
h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
p { color: var(--muted); margin: 0; }

.hidden { display: none !important; }
/* Controls only an administrator may use: the server refuses everyone else (403), so they are not shown. body.is-admin is set from the signed-in user. */
body:not(.is-admin) .admin-only { display: none !important; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: 0.01em;
  margin: 14px 0 4px;
}

.muted { color: var(--muted); font-size: 0.85em; }
.error { color: var(--tx-rose); font-size: 0.9em; min-height: 1.2em; }
.success { color: var(--accent-text); font-size: 0.9em; min-height: 1.2em; }

/* --------------------------------- Modal ---------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.modal-box,
.card.modal-box {
  width: min(680px, 94vw);
  max-width: 100%;
  box-sizing: border-box;
  background: var(--surf-modal) !important;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb), calc(0.8 * var(--shadow-k)));
  padding: 24px 28px;
}

/* Phones: an open modal becomes the page itself (app.js _syncModalPageMode
   adds .modal-page-mode). The page behind is hidden and the modal flows in
   the document, so there's one scroll — the page — instead of a scroll box
   inside a fixed overlay, and the browser's toolbar can hide on scroll. The
   !importants beat inline max-height/overflow on individual modal boxes. */
@media (max-width: 768px) {
  html.modal-page-mode body > :not(.modal-overlay):not(#toast-container):not(:has(.modal-page-active)),
  html.modal-page-mode #app-view > :not(.modal-overlay) {
    display: none !important;
  }

  html.modal-page-mode .modal-overlay:not(.modal-page-active):not(.confirm-overlay) {
    display: none !important;
  }

  html.modal-page-mode .modal-overlay.confirm-overlay:not(.hidden) {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 3500 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.modal-page-mode .modal-overlay.modal-page-active {
    position: relative;
    inset: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    align-items: flex-start;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html.modal-page-mode .modal-page-active .modal-box,
  html.modal-page-mode .modal-page-active .recommended-actions-list,
  html.modal-page-mode .modal-page-active .ai-output {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .form-grid-2col { grid-template-columns: 1fr; }
}

.modal-box input,
.modal-box select,
.modal-box textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  margin: 8px 0;
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
}

.modal-box textarea {
  resize: vertical;
  min-height: 90px;
  max-height: 50vh;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.modal-box input:focus-visible,
.modal-box select:focus-visible,
.modal-box textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.modal-box select { cursor: pointer; }

.modal-box .sm-picker-combo {
  position: relative;
  margin-bottom: 6px;
}
.modal-box .sm-picker-search {
  margin: 0;
  padding: 8px 12px;
  width: 100%;
}
.modal-box .sm-picker-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surf-modal);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px -10px rgba(var(--shadow-rgb), calc(0.6 * var(--shadow-k)));
  z-index: 1200;
  padding: 4px 0;
}
.modal-box .sm-picker-dropdown-item {
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  background: none;
  border: none;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  display: block;
}
.modal-box .sm-picker-dropdown-item:hover,
.modal-box .sm-picker-dropdown-item:focus-visible {
  background: var(--card-strong);
  color: var(--accent-text);
}
.modal-box .sm-picker-dropdown-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12.5px;
}
.modal-box .sm-picker-search + select { margin-top: 0; }

input[type="datetime-local"],
input[type="date"],
input[type="time"] {
  color-scheme: var(--color-scheme);
  cursor: pointer;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  /* No invert filter: color-scheme: dark above already makes the browser
     draw a light icon — inverting it again turned it dark-on-dark. */
  opacity: 0.9;
  padding: 4px;
  border-radius: 4px;
  transition: opacity 0.15s, background-color 0.15s;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(30, 158, 140, 0.25);
}

.btn-time-chip {
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

/* The chosen chip of a set (Today's Actions filters, the Tasks tab) looks like the hovered one. */
.btn-time-chip.active,
.btn-time-chip:hover {
  background: rgba(30, 158, 140, 0.18);
  color: var(--accent-text);
  border-color: var(--accent);
}

.textarea-resize-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 2px;
  gap: 8px;
}
.text-xs { font-size: 11.5px; }

.resize-pill-group {
  display: flex;
  gap: 4px;
}

.btn-pill {
  background: rgba(var(--fg-rgb), 0.08);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  padding: 3px 9px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
  font-family: var(--font-body);
}

.btn-pill:hover,
.btn-pill.active {
  background: var(--accent);
  color: #060c18;
  border-color: var(--accent);
  font-weight: 600;
}

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

/* --------------------------------- Card ---------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--card-shadow);
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.attribution-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 12px; }
.attribution-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.attribution-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--fg); }
.attribution-table tr:last-child td { border-bottom: none; }

/* Phone: five columns can't fit, so each source becomes a small block —
   name and channel on top, then Deals / Pipeline / Won as labelled values
   side by side (labels come from each cell's data-label, see
   renderAttributionBreakdown). */
@media (max-width: 640px) {
  .attribution-table thead { display: none; }
  .attribution-table,
  .attribution-table tbody { display: block; }
  .attribution-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .attribution-table tr:last-child { border-bottom: none; }
  .attribution-table td {
    padding: 0;
    border-bottom: none;
    min-width: 0;
    font-variant-numeric: tabular-nums;
  }
  .attribution-table .attr-source {
    grid-column: 1 / 3;
    font-weight: 600;
  }
  .attribution-table .attr-channel {
    text-align: right;
    font-size: 11.5px;
    color: var(--muted);
    text-transform: capitalize;
  }
  .attribution-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* -------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #0a1220; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--line-soft); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-ink); }
/* Destructive actions (delete/discard) — same red as .error, so "this removes
   something" reads consistently everywhere rather than looking identical to
   a safe action like Edit. */
.btn-danger { background: transparent; color: var(--tx-rose); border-color: rgba(242, 135, 158, 0.35); }
.btn-danger:hover { background: rgba(242, 135, 158, 0.12); border-color: #f2879e; }
.btn-block { width: 100%; margin-top: 14px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

.link-btn {
  display: inline-block;
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-text);
  font-size: 0.85em;
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--font-body);
}
.link-btn:hover { color: var(--accent-ink); }

/* ---------------------------------- Login --------------------------------- */
#login-view, #reset-password-view, #accept-invite-view {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.login-box { width: 340px; text-align: left; }
.login-box .logo-img { margin-bottom: 4px; }

.login-box input {
  width: 100%;
  padding: 11px 12px;
  margin: 8px 0;
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: var(--font-body);
}
.login-box input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* -------------------------------- Left Sidebar ----------------------------- */
.crm-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--crm-sidebar-width);
  background: #090e1d;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 550;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), left 0.25s ease-in-out;
  user-select: none;
  box-sizing: border-box;
}

.sidebar-top-bar {
  display: flex;
  align-items: center;
  padding: 10px 10px 4px;
}

.sidebar-collapse-btn {
  background: transparent;
  border: none;
  color: #8e9ab5;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, transform 0.2s;
}

.sidebar-collapse-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

body.sidebar-collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

.sidebar-brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 12px;
  box-sizing: border-box;
}

.sidebar-brand-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  background: #141a2f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.sidebar-brand-avatar-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.sidebar-brand-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.sidebar-brand-title {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}

.sidebar-brand-title .logo-img {
  height: 20px;
  width: 38px;
  object-fit: cover;
  object-position: right center;
}

.sidebar-brand-title .app-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
}

.sidebar-brand-subtitle {
  font-size: 10px;
  color: #8e9ab5;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #8fa0bd;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.sidebar-nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-nav-item.active {
  background: #1c223c;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.sidebar-nav-item.active .sidebar-nav-icon {
  color: #38bdf8;
}

.sidebar-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
}

.sidebar-nav-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #64748b;
  font-size: 11px;
  line-height: 1;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  user-select: none;
  flex-shrink: 0;
  border-radius: 3px;
  margin-left: auto;
}

.sidebar-nav-item:hover .sidebar-drag-handle {
  opacity: 0.65;
}

.sidebar-drag-handle:hover {
  opacity: 1 !important;
  color: #38bdf8;
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-drag-handle:active {
  cursor: grabbing;
}

.sidebar-nav > .sidebar-nav-item.is-dragging,
.sidebar-nav > .sidebar-group.is-dragging {
  opacity: 0.35;
  transform: scale(0.98);
}

.sidebar-nav > .sidebar-nav-item.drop-target-above,
.sidebar-nav > .sidebar-group.drop-target-above {
  position: relative;
}
.sidebar-nav > .sidebar-nav-item.drop-target-above::before,
.sidebar-nav > .sidebar-group.drop-target-above::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 4px;
  right: 4px;
  height: 2.5px;
  background: var(--accent, #38bdf8);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--accent, #38bdf8);
  pointer-events: none;
  z-index: 10;
}

.sidebar-nav > .sidebar-nav-item.drop-target-below,
.sidebar-nav > .sidebar-group.drop-target-below {
  position: relative;
}
.sidebar-nav > .sidebar-nav-item.drop-target-below::after,
.sidebar-nav > .sidebar-group.drop-target-below::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 4px;
  right: 4px;
  height: 2.5px;
  background: var(--accent, #38bdf8);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--accent, #38bdf8);
  pointer-events: none;
  z-index: 10;
}

.sidebar-group {
  display: flex;
  flex-direction: column;
}

.sidebar-badge {
  margin-left: auto;
  background: #6366f1;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.4;
}

.sidebar-caret {
  font-size: 10px;
  margin-left: auto;
  margin-right: 4px;
  transition: transform 0.2s ease;
  color: #8fa0bd;
}

.sidebar-group-toggle .sidebar-drag-handle {
  margin-left: 0;
}

.sidebar-group-toggle.expanded .sidebar-caret {
  transform: rotate(180deg);
}

.sidebar-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 0 4px 8px;
  margin-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}

.sidebar-subitem {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  font-size: 12px;
  color: #8fa0bd;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  width: 100%;
  transition: all 0.15s;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-subitem:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-subitem.active {
  color: #38bdf8;
  background: #1c223c;
  font-weight: 600;
}

.sidebar-footer {
  margin-top: auto;
  padding: 10px 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}

.sidebar-user-email {
  font-size: 11px;
  color: #8fa0bd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

.sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8fa0bd;
  font-size: 12.5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 6px;
  width: 100%;
  text-align: left;
  transition: color 0.15s;
  box-sizing: border-box;
}

.sidebar-footer-link:hover {
  color: #ffffff;
}

.sidebar-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.sidebar-theme-btn {
  background: transparent;
  border: none;
  color: #8fa0bd;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.sidebar-theme-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8fa0bd;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: color 0.15s;
  box-sizing: border-box;
}

.sidebar-logout-btn:hover {
  color: #f87171;
}

/* Sidebar collapsed state */
body.sidebar-collapsed .sidebar-brand-meta,
body.sidebar-collapsed .sidebar-nav-label,
body.sidebar-collapsed .sidebar-drag-handle,
body.sidebar-collapsed .sidebar-caret,
body.sidebar-collapsed .sidebar-badge,
body.sidebar-collapsed .sidebar-submenu,
body.sidebar-collapsed .sidebar-user-email,
body.sidebar-collapsed .sidebar-footer-link span,
body.sidebar-collapsed .sidebar-logout-btn span {
  display: none !important;
}

body.sidebar-collapsed .sidebar-brand-lockup {
  justify-content: center;
  padding: 8px 0 16px;
}

body.sidebar-collapsed .sidebar-nav {
  padding: 0 8px;
}

body.sidebar-collapsed .sidebar-nav-item {
  justify-content: center;
  padding: 10px 0;
}

body.sidebar-collapsed .sidebar-footer {
  padding: 12px 6px;
}

body.sidebar-collapsed .sidebar-footer-link {
  justify-content: center;
  padding: 6px 0;
}

body.sidebar-collapsed .sidebar-footer-row {
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

/* Light theme overrides */
html[data-theme="light"] .crm-sidebar {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

html[data-theme="light"] .sidebar-brand-avatar {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .sidebar-brand-subtitle,
html[data-theme="light"] .sidebar-collapse-btn,
html[data-theme="light"] .sidebar-nav-item,
html[data-theme="light"] .sidebar-user-email,
html[data-theme="light"] .sidebar-footer-link,
html[data-theme="light"] .sidebar-theme-btn,
html[data-theme="light"] .sidebar-logout-btn,
html[data-theme="light"] .sidebar-subitem {
  color: #64748b;
}

html[data-theme="light"] .sidebar-nav-item:hover,
html[data-theme="light"] .sidebar-subitem:hover,
html[data-theme="light"] .sidebar-collapse-btn:hover,
html[data-theme="light"] .sidebar-theme-btn:hover {
  color: #0f172a;
  background: #e2e8f0;
}

html[data-theme="light"] .sidebar-nav-item.active {
  background: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .sidebar-nav-item.active .sidebar-nav-icon {
  color: #0284c7;
}

html[data-theme="light"] .sidebar-submenu {
  border-left-color: #cbd5e1;
}

html[data-theme="light"] .sidebar-footer {
  border-top-color: #e2e8f0;
}

@media (max-width: 768px) {
  .crm-sidebar {
    position: fixed;
    left: -260px;
    width: 260px;
    z-index: 999;
    box-shadow: none;
    transition: left 0.25s ease-in-out;
  }

  .crm-sidebar.mobile-open {
    left: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 998;
  }

  .crm-sidebar.mobile-open ~ .sidebar-backdrop {
    display: block;
  }

  .nav {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .wrap {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 16px;
  }

  .sidebar-top-bar {
    display: none;
  }
}

/* ----------------------------------- Nav ---------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(var(--surf-rgb), 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  margin-left: var(--crm-sidebar-width);
  width: calc(100% - var(--crm-sidebar-width));
  box-sizing: border-box;
  transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-left-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--fg);
  padding: 6px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

@media (max-width: 768px) {
  .sidebar-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.nav-inner {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-brand:hover {
  opacity: 0.88;
}

.nav-brand:active {
  transform: scale(0.97);
}

.nav-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* ------------------------------ Global search ------------------------------ */
.global-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 560px;
  min-width: 180px;
}

.nav-user-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-xs);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.nav-btn-icon {
  font-size: 14px;
  line-height: 1;
}

/* -------------------------- User Profile Dropdown ------------------------- */
.user-menu-wrap {
  position: relative;
  display: inline-block;
}

.user-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 5px;
  background: rgba(var(--fg-rgb), 0.05);
  border: 1px solid var(--line-soft);
  border-radius: 9999px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  user-select: none;
}

.user-profile-btn:hover,
.user-profile-btn:focus-visible {
  background: rgba(var(--fg-rgb), 0.1);
  border-color: var(--accent);
  outline: none;
}

.user-avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #060c18;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(30, 158, 140, 0.35);
  flex-shrink: 0;
}

.user-profile-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-chevron {
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s var(--ease);
  margin-left: 1px;
}

.user-menu-wrap.open .user-profile-chevron {
  transform: rotate(180deg);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  background: var(--surf-pop-a);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(var(--shadow-rgb), calc(0.75 * var(--shadow-k))), 0 0 0 1px rgba(var(--hi-rgb), 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 8px 0;
  z-index: 650;
  transform-origin: top right;
  animation: userDropdownAnim 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes userDropdownAnim {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.user-dropdown-header {
  padding: 10px 16px 12px;
}

.user-dropdown-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
}

.user-dropdown-email {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  word-break: break-all;
}

.badge-role {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(30, 158, 140, 0.15);
  color: var(--accent-text);
  border: 1px solid rgba(30, 158, 140, 0.35);
  margin-top: 6px;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}

.user-dropdown-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-xs);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: rgba(var(--fg-rgb), 0.08);
  color: var(--fg);
  outline: none;
}

.user-menu-item-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.user-menu-danger {
  color: var(--tx-red-300);
}

.user-menu-danger:hover,
.user-menu-danger:focus-visible {
  background: rgba(239, 68, 68, 0.15);
  color: var(--tx-red-400);
}
.global-search input {
  width: 100%;
  padding: 9px 12px;
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
}
.global-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 360px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surf-modal);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px -20px rgba(var(--shadow-rgb), calc(0.6 * var(--shadow-k)));
  z-index: 600;
  padding: 6px 0;
}
.global-search-group-label {
  padding: 8px 14px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.global-search-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
}
.global-search-item:hover, .global-search-item:focus-visible { background: var(--card-strong); }
.global-search-item .gs-sub { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.global-search-empty { padding: 12px 14px; color: var(--muted); font-size: 13px; }

.company-search-combo { position: relative; }
.company-search-dropdown {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surf-modal);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px -20px rgba(var(--shadow-rgb), calc(0.6 * var(--shadow-k)));
  z-index: 1100;
  padding: 6px 0;
}
.company-search-dropdown .global-search-item { font-size: 14px; }

/* Contact/company info that opens something (email client, dialer, site,
   Google Meet) reads as a link — same accent used for LinkedIn badges. */
.info-link { color: var(--accent-text); text-decoration: none; }
.info-link:hover { text-decoration: underline; }

.app-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-text);
}

.wrap {
  width: calc(100% - var(--crm-sidebar-width));
  max-width: 100%;
  margin-left: var(--crm-sidebar-width);
  padding: 18px 28px;
  box-sizing: border-box;
  transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

#funnel-section .section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 16px;
  flex-wrap: nowrap;
}

#funnel-section .funnel-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

#funnel-section .funnel-title-row h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
}

.button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Funnel toolbar — section tabs on the left, then "+ New" (Deal/Company/
   Contact) and the utilities on the right. Nothing ever scrolls sideways or
   gets cut off: when the tabs and the actions don't fit side by side the
   actions drop to a second row (right-aligned), and if the tabs alone are
   wider than the screen they wrap onto a second line. At 1080px and below
   Sync/Trash fold into the ⋯ menu. Phones get their own grid, further down. */
.funnel-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.toolbar-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}
.toolbar-tabs .btn {
  flex: none;
  white-space: nowrap;
}
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
}
/* The divider only makes sense when the actions sit beside the tabs. */
@media (min-width: 1400px) {
  .toolbar-actions {
    padding-left: 12px;
    border-left: 1px solid var(--line-soft);
  }
}
.toolbar-menu-wrap { position: relative; }
.toolbar-caret { font-size: 10px; margin-left: 2px; opacity: 0.8; }

.toolbar-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 600;
  min-width: 190px;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--surf-pop-b);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(var(--shadow-rgb), calc(0.45 * var(--shadow-k)));
}
.toolbar-menu.open { display: flex; }
.toolbar-menu-item,
.toolbar-more-menu .btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--fg);
  font: 600 13.5px var(--font-body);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.toolbar-menu-item:hover,
.toolbar-menu-item:focus-visible,
.toolbar-more-menu .btn:hover,
.toolbar-more-menu .btn:focus-visible {
  background: rgba(30, 158, 140, 0.16);
  outline: none;
}

.toolbar-more-btn {
  min-width: 36px;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

/* Desktop has room for Sync/Trash as ordinary buttons, so the ⋯ trigger
   goes and its menu renders inline instead of as a dropdown. */
@media (min-width: 1081px) {
  .toolbar-more-btn { display: none; }
  .toolbar-more-menu {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 8px;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .toolbar-more-menu .btn {
    width: auto;
    padding: 6px 12px;
    font-size: 12.5px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-xs);
    background: transparent;
    opacity: 0.85;
  }
}

@media (max-width: 768px) {
  /* .section-head-row is a wrapping column here, which sizes each line to
     its widest item's content rather than the container — without an
     explicit width the toolbar never shrinks and its tabs never scroll. */
  .funnel-toolbar { gap: 8px; width: 100%; }
  .toolbar-tabs { gap: 6px; }
  .toolbar-actions { gap: 6px; }
  .toolbar-tabs .btn,
  .toolbar-actions > .toolbar-menu-wrap > .btn { min-height: 36px; }
}
/* Tab icons only show on phones (below); Admin keeps its gear everywhere. */
.toolbar-tabs .tab-icon { display: none; }
.toolbar-tabs .tab-icon-always { display: inline; }

/* Phones: one scrolling row only fitted two and a half tabs next to + New and
   ⋯, hiding Leads/Dashboard/Calendar off-screen. Instead, + New and ⋯ move
   up beside the funnel selector, and every tab is visible at once as an
   evenly spaced, icon-over-label tab bar with thumb-sized targets. Scoped
   to #funnel-section so it outranks the later generic mobile header rules. */
@media (max-width: 640px) {
  #funnel-section .section-head-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title actions" "tabs tabs";
    align-items: center;
    gap: 12px 8px;
  }
  #funnel-section .funnel-title-row {
    grid-area: title;
    width: auto;
    min-width: 0;
    gap: 8px;
    justify-content: flex-start;
  }
  #funnel-section .funnel-toolbar { display: contents; }
  #funnel-section .toolbar-actions {
    grid-area: actions;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  #funnel-section .toolbar-tabs {
    grid-area: tabs;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    overflow: visible;
    padding-right: 0;
  }
  #funnel-section .toolbar-tabs .btn {
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    padding: 6px 2px;
    font-size: 10.5px;
    line-height: 1.2;
  }
  /* Seven tabs (eight for administrators, who also get Admin) no longer fit one
     row with whole labels on a 375px phone, so they sit in a grid of four
     across, two rows. */
  #funnel-section .toolbar-tabs {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  #funnel-section .toolbar-tabs .tab-icon { display: block; font-size: 18px; line-height: 1; }
  #funnel-section .toolbar-tabs .tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Very narrow phones: "💼 + Deal" no longer fits beside the "Funnel" heading,
   so it shrinks to "💼 +" (its title and aria-label still say "New deal"). */
@media (max-width: 359px) {
  #toolbar-deal-btn .deal-btn-text { display: none; }
  #toolbar-deal-btn { min-width: 44px; justify-content: center; }
}

/* Header back/forward — permanent, on every page. */
.nav-history {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.nav-history-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.nav-history-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-text);
}
.nav-history-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-history-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* --------------------------------- Funnel --------------------------------- */
.funnel-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.funnel-col {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  min-height: 220px;
}

.funnel-col h3 {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.deal-card .pill-chip { max-width: 100%; }
.deal-card {
  overflow-wrap: anywhere;
  background: rgba(var(--surf-rgb), 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.deal-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.deal-card .amount { color: var(--accent-text); font-size: 0.85em; margin-top: 4px; }

/* Dashboard drill-down (click a chart) -- dim non-matching cards rather
   than hide them, so the whole pipeline's shape stays visible. */
.deal-card.drill-dimmed { opacity: 0.25; }
.deal-card.drill-highlight { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* --------------------------------- Deal view -------------------------------- */
#deal-section h2 { margin: 6px 0 18px; }

.deal-layout {
  --deal-left-fr: 1fr;
  --deal-right-fr: 1fr;
  --deal-col-height: auto;
  display: grid;
  grid-template-columns: minmax(0, var(--deal-left-fr)) 10px minmax(0, var(--deal-right-fr));
  grid-template-rows: auto auto;
  gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 24px;
}

.deal-layout.has-one-minimized {
  grid-template-columns: minmax(0, var(--deal-left-fr)) 10px minmax(0, var(--deal-right-fr));
}

.deal-layout.both-minimized {
  grid-template-columns: 56px 10px 56px;
}

.deal-col {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: min-width 0.18s ease, max-width 0.18s ease, padding 0.18s ease;
}

.deal-col-head {
  flex-shrink: 0;
}

.deal-col-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  transition: opacity 0.15s ease, max-height 0.2s ease;
}

.deal-layout[data-has-custom-height="true"] .deal-col-body {
  max-height: var(--deal-col-height, 650px);
}

.deal-col.is-minimized {
  padding: 10px 8px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  background: rgba(var(--surf-rgb), 0.35);
}

.deal-col.is-minimized:hover {
  background: rgba(var(--surf-rgb), 0.6);
}

.deal-col.is-minimized .deal-col-body {
  display: none !important;
}

.deal-col.is-minimized .deal-col-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

.deal-col.is-minimized .deal-col-head .deal-tabs,
.deal-col.is-minimized .deal-col-head #deal-interactions-actions button:not(.deal-pane-toggle),
.deal-col.is-minimized .deal-col-head .brief-status-pill {
  display: none !important;
}

.deal-col.is-minimized .deal-col-head h3 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 10px 0 !important;
  white-space: nowrap;
}

.deal-col.is-minimized .deal-col-head::after {
  content: attr(data-minimized-title);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin: 10px 0;
  white-space: nowrap;
}

.deal-pane-toggle {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--text-muted);
  border-radius: var(--radius-xs, 4px);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.deal-pane-toggle:hover {
  color: var(--text);
  border-color: var(--line-medium, #cbd5e1);
  background: rgba(var(--surf-rgb), 0.6);
}

.deal-splitter-col {
  grid-column: 2;
  grid-row: 1;
  width: 10px;
  margin: 0;
  z-index: 2;
}

.deal-splitter-row {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 12px;
  margin-top: 6px;
  z-index: 2;
}

@media (max-width: 900px) {
  .deal-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .deal-splitter-col,
  .deal-splitter-row {
    display: none !important;
  }
  .deal-col.is-minimized {
    padding: 12px !important;
    flex-direction: row;
    justify-content: space-between;
  }
  .deal-col.is-minimized .deal-col-head {
    flex-direction: row !important;
  }
  .deal-col.is-minimized .deal-col-head h3,
  .deal-col.is-minimized .deal-col-head::after {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

/* Quick Note Composer */
.quick-note-composer {
  background: rgba(var(--surf-rgb), 0.45);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.quick-note-row {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.quick-note-row select {
  width: 110px;
  flex-shrink: 0;
  padding: 7px 10px;
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  box-sizing: border-box;
}

.quick-note-row input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  box-sizing: border-box;
}

.quick-note-composer textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  max-height: 320px;
  padding: 8px 10px;
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.quick-note-composer textarea:focus-visible,
.quick-note-row input:focus-visible,
.quick-note-row select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.quick-note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.quick-note-msg {
  font-size: 11.5px;
  color: var(--accent-text);
  min-height: 14px;
}

#interaction-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.interaction-item,
#interaction-list li {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.interaction-item:last-child,
#interaction-list li:last-child {
  margin-bottom: 0;
}
/* Collapsed cards show a short preview; "Show more" expands the full text. */
.interaction-item .interaction-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.interaction-item.expanded .interaction-body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.interaction-toggle {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.interaction-toggle:hover {
  text-decoration: underline;
}

/* "Open the meeting" / "Open the transcript" under a timeline entry that belongs to a meeting. */
.interaction-meeting-link {
  display: inline-block;
  margin-top: 6px;
  margin-right: 14px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.interaction-meeting-link:hover {
  text-decoration: underline;
}

@keyframes liveSyncHighlight {
  0% { background: rgba(30, 158, 140, 0.32); border-radius: var(--radius-xs); }
  100% { background: transparent; }
}

.interaction-item-live {
  animation: liveSyncHighlight 3s ease-out;
}

/* Deal page tabs (Interactions / History) — same pill bar as the
   directory toggle, but it sits in the card header row. */
.directory-toggle-bar.deal-tabs {
  margin-bottom: 0;
}

.deal-history-intro {
  margin: 0 0 8px;
}

.deal-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.deal-history-item {
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--line-soft);
  padding: 10px 0 10px 12px;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.deal-history-item:last-child {
  border-bottom: none;
}
.deal-history-created { border-left-color: var(--accent); }
.deal-history-deleted { border-left-color: #f2879e; }
.deal-history-restored { border-left-color: #8fd3a8; }
.deal-history-merged { border-left-color: #b39ddb; }

/* Clipped notes in a history entry; the full text is in the tooltip. */
.history-long-value {
  cursor: help;
}

/* History in the lead details window */
.ld-history-section {
  margin-top: 12px;
}

/* History in the meeting details window */
/* Meeting Details: the Join link is a brand outline button, not a browser link. */
#md-links-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
#md-links-row:empty { display: none; }
.btn.md-join-link {
  color: var(--accent-ink);
  border-color: var(--accent);
  text-decoration: none;
}
.btn.md-join-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a1220; /* as .btn-primary */
}

/* Meeting Details: who an invite is from and to. */
.md-people {
  margin-bottom: 12px;
  background: rgba(var(--fg-rgb), 0.02);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px 14px;
}
.md-people-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 10px 0;
}
.md-people-row + .md-people-row { border-top: 1px solid var(--line); }
.md-people-label {
  padding-top: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.md-people-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-height: 168px;
  overflow-y: auto;
}
.md-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.md-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-text);
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid var(--line);
}
.md-person-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.35;
}
.md-person-text strong { color: var(--fg); font-weight: 600; }
.md-person-text span { color: var(--muted); overflow-wrap: anywhere; }
.md-people-empty {
  margin: 0;
  padding: 10px 0;
  font-size: 12px;
  color: var(--muted);
}
/* .modal-box input would stretch this checkbox across the row. */
.modal-box input.ram-dont-show-check {
  flex: none;
  width: 16px;
  max-width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.modal-box input.md-share-check {
  flex: none;
  width: 16px;
  max-width: 16px;
  height: 16px;
  padding: 0;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Wider, more comfortable layout for Meeting Details modal */
#meeting-detail-modal .modal-box,
.card.modal-box.meeting-detail-modal-box {
  width: min(880px, 95vw) !important;
  max-width: 880px !important;
  max-height: 90vh;
  padding: 16px 20px !important;
  overflow-y: auto;
}

.md-two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 16px;
  align-items: stretch;
}

.md-col-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.md-col-attendees {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Under both columns: call recording & notes and history, so a transcript gets the window's full width. */
.md-full-row {
  min-width: 0;
}

#md-status,
#md-response-status,
.md-attendee-status-select {
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#md-status.md-status-scheduled,
#md-status.md-status-active,
#md-response-status.md-resp-accepted,
.md-attendee-status-select.md-resp-accepted {
  background-color: rgba(34, 197, 94, 0.16) !important;
  color: var(--tx-green-300, #4ade80) !important;
  border-color: rgba(34, 197, 94, 0.48) !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18);
}

#md-status.md-status-cancelled,
#md-response-status.md-resp-declined,
.md-attendee-status-select.md-resp-declined {
  background-color: rgba(239, 68, 68, 0.18) !important;
  color: var(--tx-red-300, #f87171) !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.22);
}

#md-response-status.md-resp-pending,
.md-attendee-status-select.md-resp-pending {
  background-color: rgba(251, 191, 36, 0.15) !important;
  color: var(--tx-yellow-300, #fcd34d) !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.16);
}

#md-status.md-status-completed {
  background-color: rgba(59, 130, 246, 0.16) !important;
  color: var(--tx-blue-300, #93c5fd) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
}

#md-status option,
#md-response-status option,
.md-attendee-status-select option {
  background-color: var(--surf-modal, #0f172a);
  color: var(--fg, #f8fafc);
  font-weight: 600;
}

@media (max-width: 768px) {
  #meeting-detail-modal .modal-box,
  .card.modal-box.meeting-detail-modal-box {
    width: min(440px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
  }
  .md-two-column-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.md-history-section {
  margin-bottom: 12px;
}

.deal-history-title {
  font-weight: 600;
  color: var(--fg);
}

.deal-history-changes {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.deal-history-changes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.deal-history-field {
  color: var(--muted);
  min-width: 120px;
}
.deal-history-value {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.deal-history-arrow {
  color: var(--muted);
}
.deal-history-note {
  margin: 6px 0 0;
}

.interaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
  flex-wrap: wrap;
}

.interaction-badge {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-text);
}

.interaction-subject {
  font-weight: 600;
  color: var(--fg);
  font-size: 13.5px;
  margin-bottom: 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.interaction-body {
  white-space: pre-wrap;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  box-sizing: border-box;
}

.ai-output {
  white-space: pre-wrap;
  font-family: var(--font-body);
  background: rgba(var(--surf-rgb), 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 14px;
  min-height: 100px;
  max-height: 550px;
  overflow-y: auto;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
  resize: vertical;
}

/* Structured rendering for AI Deal Intelligence — the brief prompt asks
   Gemini for "### Section Header" markdown, but it used to just get
   dumped as flat text with the literal #'s and *'s showing. renderAiRichText()
   in app.js turns that into real headings/lists/bold; these rules give
   them actual visual hierarchy instead of looking identical to a paragraph. */
.ai-output p { margin: 0 0 10px; white-space: normal; }
.ai-output p:last-child { margin-bottom: 0; }
.ai-output ul, .ai-output ol { margin: 0 0 12px; padding-left: 22px; white-space: normal; }
.ai-output li { margin-bottom: 5px; line-height: 1.5; }
.ai-output li:last-child { margin-bottom: 0; }
.ai-output strong { color: var(--accent-text); font-weight: 700; }
.ai-output-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-text);
}
.ai-output-heading:first-child { margin-top: 0; }
.ai-output-heading::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-text);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent-text);
}

/* AI Deal Intelligence in deal view: show full content without inner scrolling */
#brief-output {
  max-height: none !important;
  overflow-y: visible !important;
  resize: none !important;
}

/* Used by the assistant modal's header and the meeting sidebar's — the
   latter had this class with no matching rule anywhere, so it's been
   rendering as an unstyled default <button> until now. */
.close-x-btn {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--muted);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.close-x-btn:hover { background: rgba(var(--hi-rgb), 0.08); color: var(--fg); }

.assistant-modal-box {
  width: min(560px, 100%);
  max-width: 100%;
  height: min(680px, 85vh);
  display: flex;
  flex-direction: column;
  background: var(--surf-modal);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px -20px rgba(var(--shadow-rgb), calc(0.6 * var(--shadow-k)));
  padding: 20px;
  box-sizing: border-box;
}
.assistant-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.assistant-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}
.assistant-empty-state {
  margin: auto;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  max-width: 320px;
  padding: 20px;
}
.assistant-message { display: flex; }
.assistant-message-user { justify-content: flex-end; }
.assistant-message-bot { justify-content: flex-start; }
.assistant-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.assistant-message-user .assistant-bubble {
  background: var(--accent);
  color: #06251f;
  border-bottom-right-radius: 4px;
}
.assistant-message-bot .assistant-bubble {
  background: rgba(var(--hi-rgb), 0.05);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 4px;
}
.assistant-message-bot .assistant-bubble p { margin: 0 0 8px; }
.assistant-message-bot .assistant-bubble p:last-child { margin-bottom: 0; }
.assistant-message-bot .assistant-bubble ul,
.assistant-message-bot .assistant-bubble ol { margin: 0 0 8px; padding-left: 20px; }
.assistant-message-bot .assistant-bubble li { margin-bottom: 3px; }
.assistant-message-bot .assistant-bubble strong { color: var(--accent-text); }
.assistant-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}
.assistant-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: assistantTypingBounce 1.2s infinite ease-in-out;
}
.assistant-typing span:nth-child(2) { animation-delay: 0.15s; }
.assistant-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes assistantTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.assistant-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.assistant-input-row textarea {
  flex: 1;
  resize: none;
  max-height: 120px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  padding: 9px 12px;
}

@media (max-width: 640px) {
  .assistant-modal-box {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }
  .assistant-bubble { max-width: 92%; }
}

.brief-status-pill {
  font-size: 11.5px;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s ease;
}

.brief-status-pill.loading {
  color: var(--tx-sky-400);
  animation: pulse-brief-status 1.4s infinite ease-in-out;
}

@keyframes pulse-brief-status {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

#back-btn, .back-link {
  background: transparent;
  border: none;
  color: var(--accent-text);
  cursor: pointer;
  padding: 0 0 14px 0;
  font-size: 0.95em;
  font-weight: 600;
  display: block;
  width: fit-content;
}

#leads-section > p { margin-bottom: 18px; }

.lead-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
  cursor: pointer;
  position: relative;
}
.lead-card:hover {
  border-color: rgba(30, 158, 140, 0.45);
  box-shadow: 0 4px 20px rgba(var(--shadow-rgb), calc(0.3 * var(--shadow-k)));
}
.lead-card.lead-card-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(30, 158, 140, 0.4), 0 8px 24px rgba(30, 158, 140, 0.25);
  animation: leadCardPulse 2s ease-in-out infinite;
}
@keyframes leadCardPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(30, 158, 140, 0.4), 0 8px 24px rgba(30, 158, 140, 0.25);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(30, 158, 140, 0.65), 0 12px 32px rgba(30, 158, 140, 0.45);
  }
}
.lead-card .lead-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.lead-header-left { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1 1 480px; }
.lead-check-host { flex-shrink: 0; display: flex; align-items: center; padding-top: 6px; }
.lead-check-host input.bulk-check { margin: 0; width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
.lead-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-display);
  flex-shrink: 0;
  background: rgba(30, 158, 140, 0.15);
  border: 1px solid rgba(30, 158, 140, 0.35);
  color: var(--accent-text);
  letter-spacing: 0.02em;
}
.lead-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.lead-card .lead-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lead-card .lead-who { font-size: 15.5px; font-weight: 700; color: var(--fg); word-break: break-word; overflow-wrap: anywhere; }
.lead-card .lead-email { color: var(--accent-text); font-size: 13px; word-break: break-word; overflow-wrap: anywhere; margin-top: 1px; }
.lead-card .lead-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.4;
}
.lead-attribution-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(var(--hi-rgb), 0.04);
  border: 1px solid rgba(var(--hi-rgb), 0.12);
  border-radius: 12px;
  padding: 1px 6px 1px 8px;
  font-size: 11px;
  color: var(--muted);
}
.lead-attr-label { font-size: 11px; color: var(--muted); font-weight: 500; }
.lead-attribution-pill select.lead-attribution-select {
  background: transparent;
  color: var(--fg);
  border: none;
  font-size: 11px;
  padding: 1px 2px;
  cursor: pointer;
  outline: none;
  max-width: 140px;
}
.lead-attribution-pill select.lead-attribution-select option {
  background: var(--surf-modal);
  color: var(--fg);
}
.lead-card .lead-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
.lead-more-wrap { position: relative; display: inline-block; }
.lead-more-btn { padding: 5px 10px; font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0.05em; }
.lead-more-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 30;
  min-width: 165px;
  background: var(--surf-modal);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb), calc(0.4 * var(--shadow-k)));
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lead-more-menu.hidden { display: none; }
.lead-more-item {
  background: none;
  border: none;
  text-align: left;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--fg);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  transition: background 0.15s ease, color 0.15s ease;
}
.lead-more-item:hover { background: rgba(var(--hi-rgb), 0.08); color: var(--fg); }
.lead-more-item.lead-more-danger { color: var(--danger); }
.lead-more-item.lead-more-danger:hover { background: rgba(220, 53, 69, 0.12); color: var(--danger); }
.lead-more-divider { height: 1px; background: var(--line); margin: 4px 0; }
.lead-card .lead-message-box {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(var(--hi-rgb), 0.025);
  border: 1px solid rgba(var(--hi-rgb), 0.08);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lead-card:hover .lead-message-box {
  background: rgba(var(--hi-rgb), 0.04);
  border-color: rgba(var(--hi-rgb), 0.12);
}
.lead-message-subject {
  font-size: 13.5px;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  word-break: break-word;
}
.lead-message-icon { font-size: 13px; opacity: 0.85; flex-shrink: 0; }
.lead-card .lead-preview {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
  max-height: 3.4em;
  overflow: hidden;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  transition: max-height 0.3s ease;
}
.lead-card.expanded .lead-preview {
  max-height: 600px;
  overflow-y: auto;
  color: var(--fg);
}
.lead-card-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(var(--hi-rgb), 0.08);
  font-size: 12px;
}
.lead-card-click-hint {
  color: var(--accent-text);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lead-card-click-hint:hover {
  text-decoration: underline;
}
.lead-expand-inline-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.lead-expand-inline-btn:hover {
  color: var(--fg);
  background: rgba(var(--hi-rgb), 0.08);
}
.lead-card .lead-enrichment {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  background: rgba(30, 158, 140, 0.08);
  font-size: 13px;
  color: var(--fg);
}
.lead-card .lead-enrichment strong { color: var(--accent-text); display: block; margin-bottom: 3px; }

/* Lead Details Modal & Auto-Sync UI */
.lead-details-modal-box,
.card.lead-details-modal-box {
  width: min(840px, 95vw);
  max-width: 840px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surf-modal) !important;
  border: 1px solid rgba(30, 158, 140, 0.4) !important;
  box-shadow: 0 25px 80px rgba(var(--shadow-rgb), calc(0.9 * var(--shadow-k))), 0 0 0 1px rgba(var(--hi-rgb), 0.08) !important;
}
.lead-details-modal-box > * {
  flex-shrink: 0;
}
.lead-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lead-details-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  background: var(--surf-raised-a);
  border: 1px solid rgba(var(--hi-rgb), 0.1);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.ld-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ld-meta-item.ld-meta-full {
  grid-column: span 2;
}
.ld-meta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ld-meta-val {
  font-size: 13.5px;
  color: var(--fg);
  word-break: break-word;
}
.ld-subject-box {
  background: var(--surf-teal);
  border: 1px solid rgba(30, 158, 140, 0.35);
  border-left: 4px solid var(--accent);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.ld-subject-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.ld-subject-text {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
  word-break: break-word;
}
.ld-message-box-wrap {
  background: var(--surf-inset);
  border: 1px solid rgba(var(--hi-rgb), 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.ld-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px;
  background: var(--surf-raised-b);
  border-bottom: 1px solid rgba(var(--hi-rgb), 0.1);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ld-message-body {
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 260px;
  max-height: 480px;
  overflow-y: auto;
  font-family: inherit;
  resize: vertical;
}
.ld-message-body.has-iframe {
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  display: flex;
  flex-direction: column;
}
.lead-body-frame {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: none;
  display: block;
  background: #ffffff;
}
.ld-message-box-wrap.is-expanded .ld-message-body {
  max-height: none;
  min-height: 520px;
}
.ld-message-box-wrap.is-expanded .ld-message-body.has-iframe {
  max-height: none;
  min-height: 580px;
}
.ld-message-box-wrap.is-expanded .lead-body-frame {
  min-height: 580px;
}
.leads-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent-text);
  background: rgba(30, 158, 140, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(30, 158, 140, 0.25);
  transition: opacity 0.2s ease;
}
.leads-sync-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(30, 158, 140, 0.3);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: leadsSpin 0.8s linear infinite;
}
@keyframes leadsSpin {
  to { transform: rotate(360deg); }
}
.lead-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(30, 158, 140, 0.15);
  color: var(--accent-text);
}
.lead-status.discarded { background: rgba(var(--fg-rgb), 0.08); color: var(--muted); }
.lead-status.converted { background: rgba(30, 158, 140, 0.3); }

.lead-inbox-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(30, 158, 140, 0.15);
  color: var(--tx-teal-500);
  border: 1px solid rgba(79, 209, 197, 0.28);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.inline-new-company {
  display: flex;
  gap: 6px;
  margin: -4px 0 10px;
}
.inline-new-company input {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}
.inline-new-company select {
  flex: 1;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
}
.inline-new-company button {
  flex-shrink: 0;
  margin: 0 !important;
}
@media (max-width: 480px) {
  .inline-new-company {
    flex-direction: column;
  }
}

/* -------------------- Inline New Attribution Source ------------------- */
.inline-new-attribution {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 12px;
  background: rgba(var(--surf-rgb), 0.65);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(var(--shadow-rgb), calc(0.35 * var(--shadow-k)));
}

.inline-new-attribution-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-text);
  margin-bottom: 2px;
}

.inline-new-attribution input {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  font-size: 13.5px;
  padding: 10px 12px;
}

.inline-new-attribution-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inline-new-attribution-row select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  font-size: 13px;
  padding: 9px 10px;
  box-sizing: border-box;
}

.inline-new-attribution-row button {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .inline-new-attribution-row {
    flex-direction: column;
    align-items: stretch;
  }
  .inline-new-attribution-row select,
  .inline-new-attribution-row button {
    width: 100% !important;
  }
}

.brief-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#suggested-matches-section {
  background: rgba(224, 161, 60, 0.06);
  border: 1px solid rgba(224, 161, 60, 0.25);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
}
#suggested-matches-section h3 { color: var(--tx-gold-400); margin-top: 0; }

.suggestion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.suggestion-row:first-of-type { border-top: none; }
.suggestion-row .suggestion-actions { display: flex; gap: 8px; flex-shrink: 0; }

.funnel-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.promote-stage-select {
  color-scheme: var(--color-scheme);
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--accent-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 5px 8px;
}

/* Directory navigation tabs */
.directory-toggle-bar {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 6px;
  background: rgba(var(--surf-rgb), 0.6);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
.dir-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s var(--ease);
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dir-tab-btn:hover {
  color: var(--fg);
  background: rgba(var(--fg-rgb), 0.05);
}
.dir-tab-btn.active {
  background: rgba(30, 158, 140, 0.2);
  border-color: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 2px 8px rgba(30, 158, 140, 0.2);
}

/* Expandable Master-Detail Lists */
.expandable-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.expandable-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  overflow: hidden;
}
.expandable-card:hover {
  border-color: var(--line-soft);
  background: var(--card-strong);
}
.expandable-card.expanded {
  border-color: rgba(30, 158, 140, 0.45);
  background: var(--surf-expanded);
  box-shadow: 0 8px 24px -6px rgba(var(--shadow-rgb), calc(0.45 * var(--shadow-k)));
}

.expandable-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.expandable-header:hover .expandable-name {
  color: var(--accent-text);
}

.expandable-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.expandable-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.company-avatar {
  background: rgba(30, 158, 140, 0.15);
  border: 1px solid rgba(30, 158, 140, 0.35);
  color: var(--accent-text);
}
.contact-avatar {
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: var(--tx-indigo-300);
  font-size: 13.5px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.expandable-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
  flex: 1;
}
.expandable-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.expandable-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
  transition: color 0.15s ease;
}

.expandable-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.expand-chevron {
  font-size: 15px;
  color: var(--muted);
  transition: transform 0.25s var(--ease), color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: rgba(var(--fg-rgb), 0.04);
  flex-shrink: 0;
}
.expandable-card.expanded .expand-chevron {
  transform: rotate(180deg);
  color: var(--accent-text);
  background: rgba(30, 158, 140, 0.18);
}

.pill-chip {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
button.pill-chip,
a.pill-chip {
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
button.pill-chip:active,
a.pill-chip:active {
  transform: translateY(1px);
}
.pill-company {
  background: rgba(30, 158, 140, 0.12);
  border-color: rgba(30, 158, 140, 0.28);
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
}
button.pill-company,
a.pill-company {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button.pill-company:hover,
button.pill-company:focus-visible,
a.pill-company:hover,
a.pill-company:focus-visible {
  background: rgba(30, 158, 140, 0.24);
  border-color: rgba(30, 158, 140, 0.45);
  color: var(--accent-light, #2dd4bf);
  text-decoration: none;
}
button.pill-company-clickable:hover,
button.pill-company-clickable:focus-visible {
  background: rgba(30, 158, 140, 0.24);
  border-color: rgba(30, 158, 140, 0.5);
  color: var(--accent-text);
}
.pill-website {
  color: var(--tx-blue-300);
}
a.pill-website:hover,
a.pill-website:focus-visible {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.45);
  color: #bfdbfe;
  text-decoration: none;
}
.pill-count {
  color: var(--tx-slate-300);
}
button.pill-count-clickable:hover,
button.pill-count-clickable:focus-visible {
  background: rgba(var(--fg-rgb), 0.12);
  border-color: rgba(var(--fg-rgb), 0.25);
  color: var(--fg);
}
.pill-email {
  color: var(--tx-slate-200);
  text-decoration: none;
}
a.pill-email {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
a.pill-email:hover,
a.pill-email:focus-visible {
  background: rgba(var(--fg-rgb), 0.12);
  border-color: rgba(var(--fg-rgb), 0.25);
  color: var(--fg);
  text-decoration: none;
}
a.pill-email:hover,
a.pill-email:focus-visible {
  background: rgba(var(--fg-rgb), 0.14);
  border-color: rgba(var(--fg-rgb), 0.28);
  color: var(--fg);
  text-decoration: none;
}
.pill-location {
  color: var(--tx-orange-300);
  background: rgba(251, 146, 60, 0.1);
  border-color: rgba(251, 146, 60, 0.25);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
a.pill-location:hover,
a.pill-location:focus-visible {
  background: rgba(251, 146, 60, 0.22);
  border-color: rgba(251, 146, 60, 0.45);
  color: var(--tx-orange-200);
  text-decoration: none;
}
.pill-phone {
  color: var(--tx-emerald-200);
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.25);
  text-decoration: none;
}
a.pill-phone {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
a.pill-phone:hover,
a.pill-phone:focus-visible {
  background: rgba(52, 211, 153, 0.22);
  border-color: rgba(52, 211, 153, 0.45);
  color: var(--tx-emerald-200);
  text-decoration: none;
}
a.pill-phone:hover,
a.pill-phone:focus-visible {
  background: rgba(52, 211, 153, 0.22);
  border-color: rgba(52, 211, 153, 0.45);
  color: #a7f3d0;
  text-decoration: none;
}
.pill-industry {
  color: var(--tx-indigo-100);
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.25);
}
button.pill-industry:hover,
button.pill-industry:focus-visible {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.45);
  color: #e0e7ff;
}
.pill-partner {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  border-color: rgba(192, 132, 252, 0.28);
  text-decoration: none;
  cursor: pointer;
}
a.pill-partner:hover,
a.pill-partner:focus-visible {
  background: rgba(192, 132, 252, 0.24);
  border-color: rgba(192, 132, 252, 0.5);
  color: #e9d5ff;
  text-decoration: none;
}

.badge-ai-indicator {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(224, 161, 60, 0.16);
  border: 1px solid rgba(224, 161, 60, 0.38);
  color: var(--tx-gold-300);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
button.badge-ai-clickable {
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
button.badge-ai-clickable:hover,
button.badge-ai-clickable:focus-visible {
  background: rgba(224, 161, 60, 0.28);
  border-color: rgba(224, 161, 60, 0.6);
  color: #fef08a;
}
button.badge-ai-clickable:active {
  transform: translateY(1px);
}
.badge-active-deal {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.38);
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
button.badge-active-clickable,
button.pill-active-clickable {
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
button.badge-active-clickable:hover,
button.badge-active-clickable:focus-visible,
button.pill-active-clickable:hover,
button.pill-active-clickable:focus-visible {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.55);
  color: #7dd3fc;
}
button.badge-active-clickable:active,
button.pill-active-clickable:active {
  transform: translateY(1px);
}
.pill-active-deal {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
  font-weight: 600;
}

@keyframes targetHighlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(30, 158, 140, 0.65); outline: 2px solid var(--accent); }
  35% { box-shadow: 0 0 0 6px rgba(30, 158, 140, 0.4); outline: 2px solid var(--accent); }
  100% { box-shadow: 0 0 0 0 rgba(30, 158, 140, 0); outline: 2px solid transparent; }
}
.highlight-pulse {
  animation: targetHighlightPulse 1.6s ease-out;
  border-radius: 8px;
}
.badge-in-indicator {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #0077b5;
  color: #fff;
  line-height: 1.3;
  text-decoration: none;
}
a.badge-in-indicator {
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
a.badge-in-indicator:hover,
a.badge-in-indicator:focus-visible {
  opacity: 0.88;
  color: #fff;
  text-decoration: none;
}

/* Expanded body layout */
.expandable-body {
  border-top: 1px solid var(--line);
  background: rgba(var(--surf-rgb), 0.38);
  animation: expandSlide 0.22s var(--ease);
}
@keyframes expandSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.expandable-body-inner {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.expandable-actions-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.expandable-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.expandable-details-grid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* A row that needs the whole width, such as the Companies House record. */
.expandable-details-grid > .detail-wide {
  grid-column: 1 / -1;
}
.detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.detail-val {
  font-size: 13.5px;
  color: var(--fg);
  font-weight: 500;
  word-break: break-word;
}

.detail-notes-box {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.detail-notes-text {
  background: rgba(var(--surf-rgb), 0.45);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--fg);
  white-space: pre-wrap;
  line-height: 1.5;
}

/* AI Research block in expanded view */
.ai-research-block {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid #e0a13c;
  background: rgba(224, 161, 60, 0.08);
  font-size: 13px;
  color: var(--fg);
  white-space: pre-wrap;
}
.ai-research-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.ai-badge-label {
  color: var(--tx-gold-300);
  font-weight: 700;
  font-size: 12px;
}
.ai-research-block .ai-disclaimer {
  color: var(--tx-gold-400);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ai-research-sources {
  margin-top: 8px;
  font-size: 12px;
  word-break: break-all;
}
.ai-research-sources a {
  color: var(--accent-text);
  margin-right: 10px;
  text-decoration: underline;
}
.ai-research-updated {
  color: var(--muted);
  font-size: 11px;
  margin-top: 6px;
}

/* LinkedIn block in expanded view */
.contact-linkedin-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.linkedin-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #0077b5;
  color: #ffffff !important;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
  width: fit-content;
}
.linkedin-badge-btn:hover {
  background: #005f93;
}
.google-search-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: var(--tx-indigo-300) !important;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
  width: fit-content;
}
.google-search-badge-btn:hover {
  background: rgba(99, 102, 241, 0.24);
}
/* Linked Items (Contacts & Deals inside company/contact) */
.linked-section {
  background: rgba(var(--fg-rgb), 0.02);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.linked-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.linked-section-header h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}
.link-btn-accent {
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.link-btn-accent:hover {
  text-decoration: underline;
}

.linked-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.mini-card {
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mini-card:hover {
  border-color: var(--line-soft);
  background: rgba(var(--surf-rgb), 0.85);
}
.mini-card-deal,
.mini-card-contact {
  cursor: pointer;
}
.mini-card-deal:hover,
.mini-card-contact:hover {
  border-color: var(--accent);
}
.mini-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.mini-card-name {
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mini-card-meta {
  color: var(--muted);
  font-size: 11.5px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.muted-loading {
  color: var(--muted);
  font-size: 12.5px;
  font-style: italic;
  margin: 4px 0;
}

/* Stage badges for deals */
.badge-stage {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: capitalize;
  white-space: nowrap;
}
.badge-stage-prospecting { background: rgba(148, 163, 184, 0.15); color: var(--tx-slate-300); border: 1px solid rgba(148, 163, 184, 0.3); }
.badge-stage-qualified { background: rgba(56, 189, 248, 0.15); color: var(--tx-sky-300); border: 1px solid rgba(56, 189, 248, 0.3); }
.badge-stage-proposal { background: rgba(168, 85, 247, 0.15); color: var(--tx-purple-300); border: 1px solid rgba(168, 85, 247, 0.3); }
.badge-stage-negotiation { background: rgba(251, 191, 36, 0.15); color: var(--tx-yellow-300); border: 1px solid rgba(251, 191, 36, 0.3); }
.badge-stage-won { background: rgba(34, 197, 94, 0.15); color: var(--tx-green-300); border: 1px solid rgba(34, 197, 94, 0.3); }
.badge-stage-lost { background: rgba(239, 68, 68, 0.15); color: var(--tx-red-300); border: 1px solid rgba(239, 68, 68, 0.3); }

/* RSVP badges for scheduled meetings on the calendar */
.badge-rsvp { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; text-transform: capitalize; white-space: nowrap; }
.badge-rsvp-pending { background: rgba(251, 191, 36, 0.15); color: var(--tx-yellow-300); border: 1px solid rgba(251, 191, 36, 0.3); }
.badge-rsvp-accepted { background: rgba(34, 197, 94, 0.15); color: var(--tx-green-300); border: 1px solid rgba(34, 197, 94, 0.3); }
.badge-rsvp-declined { background: rgba(239, 68, 68, 0.15); color: var(--tx-red-300); border: 1px solid rgba(239, 68, 68, 0.3); }
.badge-rsvp-tentative { background: rgba(59, 130, 246, 0.15); color: var(--tx-blue-300); border: 1px solid rgba(59, 130, 246, 0.3); }
.md-person .badge-rsvp { margin-left: auto; flex: none; }

.calendar-row-clickable { cursor: pointer; }
.calendar-row-clickable:hover { background: rgba(var(--hi-rgb), 0.04); }

.cal-day-group {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cal-day-group:first-child { padding-top: 0; }
.cal-day-group:last-child { border-bottom: none; }
.cal-day-group-today .cal-day-num {
  color: var(--accent-light, #14b8a6);
}
.cal-day-group-today .cal-day-dow {
  color: var(--accent-light, #14b8a6);
  font-weight: 700;
}
.cal-day-badge {
  flex: 0 0 54px;
  text-align: center;
  padding-top: 2px;
}
.cal-day-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
  line-height: 1;
}
.cal-day-dow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 4px;
}
.cal-day-events {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* flex-basis of 220px (not 0%) means the row's own flex-wrap pushes the
   actions (Details/Join/delete) onto their own line below once the window
   is too narrow for both side by side, instead of flex:1 shrinking this
   down to a sliver and crushing the title/badges/meta inside it. */
.cal-agenda-row-main { flex: 1 1 220px; min-width: 0; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-check-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cal-agenda-time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cal-agenda-body { flex: 1; min-width: 0; }
.cal-title-done { text-decoration: line-through; color: var(--muted); }
.cal-agenda-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 100%;
}
@media (max-width: 640px) {
  .cal-day-group {
    gap: 10px;
  }
  .cal-day-badge {
    flex: 0 0 42px;
  }
  .cal-agenda-row {
    padding: 10px !important;
  }
  .cal-agenda-actions {
    width: 100%;
    gap: 6px;
  }
  .cal-agenda-actions .btn {
    padding: 5px 8px;
    font-size: 11.5px;
  }
}

/* ---- Calendar week / month grids ---- */
/* A grid, not wrapping flex: the ‹ Today › buttons get their own column
   pinned to the right edge, and the dates label (plus "Loading…") sits in
   the flexible column beside them. A label that changes width then only
   moves itself, so the buttons stay exactly where they are and you can click
   through weeks/months without moving the mouse. */
.cal-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "modes range nav";
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
}
#calendar-mode-tabs { grid-area: modes; display: inline-flex; gap: 4px; }
.cal-range {
  grid-area: range;
  justify-self: end;
  display: flex;
  flex-direction: row-reverse; /* "Loading…" grows leftward, away from the buttons */
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.cal-nav { grid-area: nav; display: flex; align-items: center; gap: 6px; }
.cal-nav .btn { margin: 0; }
.cal-range-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-range-status { font-size: 12px; color: var(--muted); white-space: nowrap; }/* A month grid's height varies (5 or 6 weeks, busier days), so the page
   scrollbar can come and go as you page through — reserve its space while the
   Calendar is open, or it'd nudge the right-edge buttons sideways each time. */
html:has(#calendar-section:not(.hidden)) { scrollbar-gutter: stable; }
/* The tab counts change as you page through weeks/months; fixed-width digits
   stop the filter tabs above from reflowing and pushing this row down. */
#calendar-view-tabs [id^="cal-count-"] { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .cal-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "modes modes" "range nav";
  }
  .cal-range { justify-self: start; flex-direction: row; }
  .cal-range-label { font-size: 14px; }
}

/* Shared event "chip" look: tinted fill in the event's colour (--ev) with a
   solid left edge. Past events fade, like Google Calendar's. */
.cal-ev, .cal-month-ev { cursor: pointer; }
.cal-ev-past { opacity: 0.55; }
.cal-ev-done .cal-ev-title,
.cal-ev-done .cal-month-ev-title { text-decoration: line-through; }

/* No fixed height: renderCalendarWeek sizes --hour so the shown hours fit
   the window, and only sets a max-height (so it scrolls) when they can't. */
.cal-week {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(var(--surf-rgb), 0.35);
}
.cal-week-inner { min-width: 720px; }
.cal-week-head,
.cal-week-allday,
.cal-week-body {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
}
/* All-day / multi-day events: one-line chips under the day headers. */
.cal-week-allday { border-bottom: 1px solid var(--line); }
.cal-week-allday-label {
  align-self: center;
  padding-right: 8px;
  text-align: right;
  font-size: 10px;
  color: var(--muted);
}
.cal-week-allday-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 3px 2px;
  border-left: 1px solid var(--line);
}
.cal-ev.cal-ev-allday {
  position: static;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cal-week-head {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--surf-calhead);
  border-bottom: 1px solid var(--line);
}
.cal-week-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 6px;
  border-left: 1px solid var(--line);
}
.cal-week-dow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-week-daynum {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  color: var(--fg);
}
.cal-week-dayhead.is-today .cal-week-dow { color: var(--accent-text); }
.cal-week-dayhead.is-today .cal-week-daynum { background: var(--accent); color: #fff; }

.cal-week-gutter,
.cal-week-col {
  position: relative;
  height: calc(var(--hour) * var(--hours));
}
.cal-week-hour {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}
.cal-week-col {
  border-left: 1px solid var(--line);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hour));
  cursor: cell;
}
.cal-week-col.is-today { background-color: rgba(30, 158, 140, 0.05); }

.cal-ev {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  padding: 3px 6px;
  border-radius: 6px;
  border-left: 3px solid var(--ev);
  background: color-mix(in srgb, var(--ev) var(--ev-pct), var(--ev-base));
  color: var(--fg);
  font-size: 11.5px;
  line-height: 1.3;
  transition: filter 0.12s ease;
}
.cal-ev:hover { filter: brightness(1.2); z-index: 2; }
.cal-ev-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-short .cal-ev-title { white-space: nowrap; }
.cal-ev-time { font-weight: 400; color: rgba(var(--fg-rgb), 0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  background: #ef4444;
  pointer-events: none;
}
.cal-now-line::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
}

.cal-month {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(var(--surf-rgb), 0.35);
}
.cal-month-inner {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 720px;
}
.cal-month-dow {
  padding: 8px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.cal-month-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 4px 4px 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cal-month-cell:nth-child(7n + 7) { border-right: none; } /* 7 header cells come first */
.cal-month-cell.is-outside { background: rgba(var(--shade-rgb), calc(0.18 * var(--shade-k))); }
.cal-month-cell.is-outside .cal-month-daynum,
.cal-month-cell.is-outside .cal-month-ev { opacity: 0.5; }
.cal-month-daynum {
  align-self: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  margin-bottom: 2px;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: var(--fg);
  font: 600 12px var(--font-body);
  cursor: pointer;
}
.cal-month-daynum:hover { background: rgba(var(--fg-rgb), 0.08); }
.cal-month-cell.is-today .cal-month-daynum { background: var(--accent); color: #fff; }
.cal-month-ev {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1.5;
}
.cal-month-ev:hover { background: rgba(var(--fg-rgb), 0.07); }
.cal-month-ev .cal-dot { width: 7px; height: 7px; }
.cal-month-ev-time { color: var(--muted); white-space: nowrap; }
.cal-month-ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.cal-month-more {
  align-self: flex-start;
  margin-top: 1px;
  padding: 1px 4px;
  border: none;
  background: transparent;
  color: var(--accent-text);
  font: 600 11px var(--font-body);
  cursor: pointer;
}
.cal-month-more:hover { text-decoration: underline; }

/* Tablet and phone: all 7 days fit on screen, no sideways scroll, and the
   five filter tabs become one dropdown on the same line as + Schedule
   Meeting (the generic mobile .dir-tab-btn rule, width: 100%, stacked them
   one per line). */
.cal-view-select {
  display: none;
  /* Same look as the draft promote picker (.promote-stage-select); color-scheme keeps
     the list it opens dark too. */
  color-scheme: var(--color-scheme);
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--accent-text);
  font-family: var(--font-body);
  font-weight: 600;
  padding: 7px 10px;
  min-height: 38px;
}
@media (max-width: 768px) {
  .cal-week-inner,
  .cal-month-inner { min-width: 0; }

  #calendar-view-tabs { display: none; }
  .calendar-tabs-bar { flex-wrap: nowrap !important; }
  .cal-view-select {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  #calendar-schedule-btn { flex: none; white-space: nowrap; }
}
/* Phone: compact like Google Calendar's app — month events become solid
   colour chips showing just the title, week events drop their times, and
   headers, day numbers and hour labels tighten up to leave room for them. */
@media (max-width: 640px) {
  #calendar-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .cal-week-head,
  .cal-week-allday,
  .cal-week-body { grid-template-columns: 30px repeat(7, minmax(0, 1fr)); }
  .cal-week-allday-label { padding-right: 2px; font-size: 7.5px; }
  .cal-ev.cal-ev-allday { padding: 0 2px; font-size: 9px; text-overflow: clip; }

  /* A short header, so the week grid starts high enough to fit on screen. */
  #calendar-section .section-head-row .muted { display: none; }
  #calendar-section .calendar-tabs-bar { margin: 8px 0 !important; }
  .cal-week-dayhead { padding: 6px 0 4px; }
  .cal-week-dow { font-size: 9px; letter-spacing: 0; }
  .cal-week-daynum { font-size: 13px; width: 24px; height: 24px; line-height: 24px; }
  .cal-week-hour { right: 3px; font-size: 8.5px; }
  .cal-ev {
    padding: 1px 2px;
    border-left-width: 2px;
    border-radius: 3px;
    font-size: 9.5px;
    line-height: 1.2;
  }
  .cal-ev-time { display: none; }

  .cal-month-dow { padding: 6px 0; font-size: 9.5px; letter-spacing: 0; }
  .cal-month-cell { gap: 2px; min-height: 84px; padding: 2px 1px 4px; }
  .cal-month-daynum {
    min-width: 20px;
    height: 20px;
    padding: 0 3px;
    margin-bottom: 1px;
    border-radius: 10px;
    font-size: 11px;
  }
  .cal-month-ev {
    gap: 0;
    padding: 0 3px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ev) 80%, #0b1626);
    font-size: 9.5px;
    line-height: 1.6;
  }
  .cal-month-ev:hover { background: var(--ev); }
  .cal-month-ev .cal-dot,
  .cal-month-ev-time { display: none; }
  .cal-month-ev-title { color: #fff; font-weight: 600; text-overflow: clip; }
  .cal-month-more { padding: 0 2px; font-size: 9.5px; }
  .cal-more-word { display: none; } /* "+2 more" → "+2" */
}

.calendar-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid var(--line);
}
.calendar-select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.calendar-row-checkbox {
  margin-right: 10px;
  cursor: pointer;
}

.deal-meeting-row {
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.deal-meeting-row:hover {
  background: rgba(var(--hi-rgb), 0.05) !important;
  border-color: var(--accent, #1e9e8c) !important;
}

.pill-completed {
  background: rgba(34, 197, 94, 0.15) !important;
  color: var(--tx-green-300) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}
.pill-cancelled {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--tx-red-300) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
.pill-active {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--tx-blue-300) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
.pill-funnel {
  background: rgba(168, 85, 247, 0.15) !important;
  color: var(--tx-purple-300) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.btn-text-link {
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
  text-decoration: underline;
}
.btn-text-link:hover {
  color: var(--fg);
}

/* Prospect a Company: the people the research found, one tick each. */
.aip-exec-pick { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.aip-exec-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}
.aip-exec-row input { flex: none; margin: 2px 0 0; width: 18px; height: 18px; }

/* Schedule Meeting attendee chips (deliberately not .pill-chip, which forces one
   line and clips overflow, hiding the ✕). The label may be long ("Name <email>"), so it
   shrinks and wraps inside the chip; the ✕ never shrinks, so it is always on
   screen, and it has a finger-sized tap target on a phone. */
.sm-attendee-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  padding: 2px 2px 2px 8px;
  font-size: 12px;
  white-space: normal;
  color: var(--muted);
  background: var(--surf-modal);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.sm-attendee-label {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.sm-remove-attendee {
  flex: none;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.sm-remove-attendee:hover,
.sm-remove-attendee:focus-visible {
  color: var(--fg);
  background: rgba(30, 158, 140, 0.16);
}
@media (max-width: 640px) {
  .sm-remove-attendee { min-width: 36px; min-height: 36px; font-size: 15px; }
}

.company-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 10px;
}
.company-row .company-name { font-weight: 700; color: var(--fg); }
.company-row .company-meta { color: var(--muted); font-size: 0.85em; margin-top: 4px; }
.company-row .company-notes { color: var(--muted); font-size: 0.85em; margin-top: 6px; max-width: 480px; word-break: break-word; overflow-wrap: anywhere; }

.list-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.list-controls input,
.list-controls select {
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 10px;
}
.list-controls input { min-width: 220px; }

/* Companies and Contacts: the title and the controls share one row. Companies has
   the most controls, and the page is at most 1440px wide, so they don't all fit
   beside the title; they wrap onto a second line in the space to its right
   instead of the whole group dropping underneath it. */
@media (min-width: 769px) {
  .list-head-row { flex-wrap: nowrap; align-items: flex-start; }
  /* The controls are 35px tall: a title of the same height sits level with the first line. */
  .list-head-row > h2 { flex: none; margin: 0; line-height: 35px; }
  .list-head-row > .list-controls { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat-tiles.stat-tiles-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat-tiles.stat-tiles-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.stat-tiles.stat-tiles-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.stat-tile { text-align: left; min-width: 0; }
.stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
}
.stat-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 5px;
  font-weight: normal;
  font-family: var(--font-body);
}

.dash-panel { display: block; }
.dash-panel.hidden { display: none; }

.funnel-conversion-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.conv-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--surf-rgb), 0.5);
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-size: 11.5px;
  color: var(--fg);
}
.conv-step-rate {
  font-weight: 700;
  color: var(--accent-text);
}
.conv-stage-dwell {
  color: var(--muted);
  font-size: 10.5px;
}

.stalled-idle-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-top: 12px;
}
.dash-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.dash-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}
.dash-table tr:last-child td {
  border-bottom: none;
}
.dash-table tr.clickable-row:hover {
  background: rgba(var(--fg-rgb), 0.03);
  cursor: pointer;
}

.dashboard-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.chart-legend .swatch { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend .dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

@media (max-width: 1440px) {
  .stat-tiles.stat-tiles-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .stat-tiles.stat-tiles-5,
  .stat-tiles.stat-tiles-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stat-tiles.stat-tiles-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .nav-pill-btn .nav-btn-label {
    display: none;
  }
  .user-profile-name {
    max-width: 65px;
  }
  .global-search {
    min-width: 130px;
  }
  .dir-tab-btn {
    padding: 6px 12px;
    font-size: 12.5px;
  }
}

@media (max-width: 960px) {
  .stat-tiles,
  .stat-tiles.stat-tiles-4,
  .stat-tiles.stat-tiles-5,
  .stat-tiles.stat-tiles-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .stat-tiles,
  .stat-tiles.stat-tiles-4,
  .stat-tiles.stat-tiles-5,
  .stat-tiles.stat-tiles-6 {
    grid-template-columns: 1fr;
  }
  .dashboard-charts {
    grid-template-columns: 1fr;
  }
}
/* Phone: tighter cards, each stat tile a single label / value line, and
   chart text scaled up — the charts are 480-unit SVGs shrunk to ~290px, so
   their 10-unit labels otherwise render at about 6px. */
@media (max-width: 640px) {
  #dashboard-section .card { padding: 16px; }
  #dashboard-section .stat-tiles { gap: 10px; margin-bottom: 14px; }
  #dashboard-section .stat-tile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  #dashboard-section .stat-label { margin-bottom: 0; font-size: 11px; }
  #dashboard-section .stat-value { font-size: 22px; }
  #dashboard-section .dashboard-charts { gap: 14px; }
  #dashboard-section .chart-card svg text { font-size: 14px; }
}

.deal-info-card { margin-bottom: 20px; }
.deal-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.deal-info-grid > div { display: flex; flex-direction: column; }
.deal-info-grid .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 3px;
}
.deal-info-grid > div > span:last-child { font-size: 14px; color: var(--fg); font-weight: 600; text-transform: capitalize; }

.deal-info-grid .deal-company-link {
  font-size: 14px;
  text-align: left;
  text-transform: none;
}

.deal-stage-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.deal-stage-control #di-stage {
  display: inline-flex;
}

.deal-stage-control select.di-stage-select {
  background: var(--surf-select);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  height: 28px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.deal-stage-control select.di-stage-select:hover {
  border-color: var(--accent);
  background: var(--surf-select-hover);
}

.deal-stage-control select.di-stage-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(30, 158, 140, 0.25);
}

.callout {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  border-left: 3px solid var(--accent);
  background: rgba(30, 158, 140, 0.08);
}
.callout strong { color: var(--accent-text); display: block; margin-bottom: 4px; }
.callout p { color: var(--fg); margin: 0; }

.deal-contact-chip {
  display: inline-block;
  background: rgba(var(--surf-rgb), 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin: 0 8px 8px 0;
  font-size: 13px;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.deal-contact-chip:hover {
  border-color: var(--accent, #1e9e8c);
  background: rgba(30, 158, 140, 0.1);
}

.mailbox-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.mailbox-row:last-child { border-bottom: none; }

.brief-controls select {
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 10px;
}

/* ==========================================================================
   Responsive & Mobile Ergonomics
   ========================================================================== */

@media (max-width: 1250px) and (min-width: 769px) {
  .funnel-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }
  .deal-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wrap {
    padding: 20px 16px;
    width: calc(100% - var(--crm-sidebar-width));
  }
  .nav-inner {
    padding: 12px 18px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100vw;
  }

  body {
    /* background-attachment:fixed is well-documented as unreliable on
       mobile Safari/Chrome during fast/momentum scroll — it can fail to
       repaint in time, flashing the page's raw white beneath it before
       the gradient catches up. "scroll" paints it as part of the normal
       page content instead, which doesn't have this failure mode. */
    background-attachment: scroll;
  }

  #app-view {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Prevent automatic iOS/Android text zoom on inputs */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* The per-attendee status menu on the meeting detail is a compact badge, not a form
     field: at 16px it grew oversized and clipped "Pending" to "Pend". 13px is below the
     16px that stops iOS zooming in when a field is focused, so on an iPhone tapping it
     zooms the page slightly; Android is unaffected. */
  .md-attendee-status-select {
    font-size: 13px !important;
    font-weight: 600;
    width: 140px !important;
    min-width: 140px !important;
    flex: 0 0 140px;
    padding: 2px 26px 2px 8px !important;
    height: 28px !important;
    text-overflow: clip;
  }

  .wrap {
    padding: 12px 10px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Header Layout on Mobile:
     Row 1: Brand (left) and compact action pills (right)
     Row 2: Full-width search bar
  */
  .nav {
    padding: 0;
    width: 100%;
  }

  .nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 8px 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .nav-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .nav-brand .logo-img {
    width: 95px;
    height: auto;
  }

  .nav-brand .app-title {
    font-size: 14px;
  }

  .nav-user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .nav-user-actions .btn-sm,
  .nav-pill-btn {
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 6px;
    gap: 4px;
    white-space: nowrap;
  }

  .nav-pill-btn .nav-btn-icon {
    font-size: 13px;
  }

  .user-profile-btn {
    padding: 3px 8px 3px 4px;
    gap: 6px;
    font-size: 12px;
  }

  .user-avatar-circle {
    width: 25px;
    height: 25px;
    font-size: 11px;
  }

  .user-profile-name {
    max-width: 85px;
  }

  .user-menu-dropdown {
    right: 0;
    max-width: calc(100vw - 20px);
    width: 260px;
    z-index: 700;
  }

  @media (max-width: 520px) {
    .nav-pill-btn .nav-btn-label {
      display: none;
    }
    .user-profile-name {
      display: none;
    }
    .user-profile-btn {
      padding: 3px 6px 3px 3px;
      gap: 4px;
    }
  }

  .global-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    order: 3;
    margin: 4px 0 0 0;
    flex: 1 1 100%;
  }

  .global-search input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    box-sizing: border-box;
  }

  .global-search-results {
    width: 100%;
    left: 0;
    right: 0;
  }

  /* Funnel Header:
     Row 1: Title + Selector
     Row 2: the toolbar — one row of scrolling tabs + New + ⋯ (.funnel-toolbar)
  */
  .section-head-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
  }

  .funnel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .button-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }

  /* A deal's actions: two to a row (Won/Lost, Instant/Schedule Meeting, Edit/Delete)
     rather than six full-width lines. A hidden button leaves its row, so an open
     deal's four fit in two rows. */
  #deal-section .section-head-row > .button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  /* Smaller text and tighter padding, and a label wraps onto a second line rather
     than being cut off (the longest, "Schedule Meeting", needs it on narrow phones). */
  #deal-section .section-head-row > .button-group > .btn {
    min-width: 0;
    padding: 7px 4px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
  #deal-section .section-head-row > .button-group > .promote-control { grid-column: 1 / -1; }

  /* Funnel Pipeline Board:
     2-column grid that fills the full available mobile width
  */
  .funnel-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .funnel-col {
    width: 100%;
    min-width: 0;
    padding: 10px 8px;
    min-height: 160px;
    box-sizing: border-box;
  }

  .funnel-col h3 {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .deal-card {
    padding: 8px 10px;
    margin-bottom: 6px;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word;
  }

  .deal-card .amount {
    font-size: 12px;
    font-weight: 600;
  }

  /* Lists & Filters (Contacts, Companies, Leads) */
  /* Two columns, so the filters and buttons pair up instead of each taking a full
     line: the search box, the layout toggle and the main "+ New" button (the
     primary one) span both columns; selects and the other buttons sit two to a row. */
  .list-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }
  .list-controls > input,
  .list-controls > .view-toggle,
  .list-controls > .btn-primary {
    grid-column: 1 / -1;
  }

  .list-controls input,
  .list-controls select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 7px 9px;
    font-size: 12.5px;
  }

  .list-controls button {
    width: 100%;
    min-width: 0;
    padding: 7px 6px;
    font-size: 12px;
  }
  .list-controls .view-toggle-btn { padding: 6px 4px; }

  /* Directory navigation on mobile */
  .directory-toggle-bar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-sizing: border-box;
  }
  .dir-tab-btn {
    justify-content: center;
    padding: 8px 4px;
    font-size: 12.5px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Expandable Cards on mobile */
  .expandable-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .expandable-header {
    padding: 12px 10px;
    gap: 10px;
  }
  .expandable-summary {
    gap: 10px;
  }
  .expandable-avatar {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .expandable-body-inner {
    padding: 12px 10px;
    gap: 12px;
  }
  .expandable-actions-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }
  .expandable-actions-bar .btn {
    width: 100%;
    padding: 7px 4px;
    font-size: 11.5px;
    text-align: center;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Instant / Schedule Meeting are one wrapper (.meeting-btn-group); left alone it
     was a single grid cell with both buttons squeezed in, clipping their labels.
     It takes the full row and each button half of it, wrapping if it has to. */
  .expandable-actions-bar .meeting-btn-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    overflow: visible;
  }
  .expandable-actions-bar .meeting-btn-group .btn {
    border-radius: var(--radius-xs, 8px);
    border-left-width: 1px;
    padding: 7px 4px;
    line-height: 1.2;
    white-space: normal;
  }
  .expandable-details-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .linked-cards-grid {
    grid-template-columns: 1fr;
  }
  .pill-chip {
    max-width: 180px;
  }

  .company-row, .lead-card {
    padding: 12px 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .lead-card .lead-actions {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
  }

  .lead-card .lead-actions button {
    flex: 1;
    padding: 7px 6px;
    font-size: 12px;
  }

  .lead-card .lead-actions .lead-more-wrap {
    flex: 0 0 auto;
  }

  .lead-card .lead-actions .lead-more-btn {
    flex: 0 0 38px;
    padding: 7px 0;
    text-align: center;
  }

  /* Deal Detail Screen */
  .deal-info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
  }

  .deal-layout {
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    max-width: 100%;
  }

  .deal-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .quick-note-row {
    flex-direction: column;
    gap: 6px;
  }
  .quick-note-row select {
    width: 100%;
    font-size: 15px;
  }
  .quick-note-row input {
    font-size: 15px;
  }
  .quick-note-composer textarea {
    font-size: 15px;
    min-height: 70px;
  }

  /* Modals */
  .modal-overlay {
    align-items: flex-start;
    padding: 14px 10px;
  }

  .modal-box {
    width: min(440px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: 92vh;
    overflow-y: auto;
    padding: 18px 14px;
    margin: 8px auto;
    box-sizing: border-box;
  }

  .modal-box input,
  .modal-box select,
  .modal-box textarea {
    font-size: 16px; /* Prevents mobile browser auto-zoom */
    padding: 10px 12px;
  }

  .modal-box textarea {
    min-height: 100px;
  }

  .modal-actions {
    gap: 6px;
  }

  /* Login / Password Reset View */
  .login-box {
    width: min(340px, calc(100vw - 24px));
    padding: 24px 18px;
    margin: 16px auto;
  }
}

/* ==========================================================================
   Back to Top
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: var(--accent);
  color: #0a1220;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(var(--shadow-rgb), calc(0.6 * var(--shadow-k)));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.back-to-top:hover { background: var(--accent-hover); transform: translateY(-2px); }

@media (max-width: 640px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* ==========================================================================
   Toast Notification System
   ========================================================================== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

@media (max-width: 640px) {
  .toast-container {
    top: 14px;
    right: 14px;
    left: 14px;
    max-width: none;
  }
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(13, 20, 36, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--text, #f1f5f9);
  font-size: 13px;
  line-height: 1.45;
  animation: toast-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.25s ease, transform 0.25s ease;
  border-left: 4px solid var(--accent, #6366f1);
}

.toast.toast-hiding {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-icon {
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.toast-message {
  font-size: 12.5px;
  color: rgba(241, 245, 249, 0.95);
}

.toast-close {
  background: none;
  border: none;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  padding: 0 4px;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.toast-close:hover {
  color: #ffffff;
}

.toast-success {
  border-left-color: #10b981;
}
.toast-success .toast-icon {
  color: #10b981;
}

.toast-info {
  border-left-color: #6366f1;
}
.toast-info .toast-icon {
  color: #818cf8;
}

.toast-error {
  border-left-color: #ef4444;
}
.toast-error .toast-icon {
  color: #ef4444;
}

.toast-warning {
  border-left-color: #f59e0b;
}
.toast-warning .toast-icon {
  color: #f59e0b;
}

/* ------- Notifications log (the toasts, kept in the Today's Actions window) ------- */
.nav-notif-badge,
.ram-tab-count {
  min-width: 16px;
  padding: 1px 5px;
  border-radius: 9999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.ram-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.ram-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ram-tab:hover {
  color: var(--fg);
}

.ram-tab.active {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

.ram-notif-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ram-notif-toolbar .btn {
  padding: 4px 10px;
  font-size: 12px;
}

.notif-day {
  margin: 8px 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
}

.notif-day:first-child {
  margin-top: 0;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line, rgba(var(--hi-rgb), 0.08));
  border-left: 3px solid #6366f1;
  border-radius: var(--radius-sm, 8px);
  font-size: 12.5px;
  line-height: 1.45;
}

.notif-item.unread {
  background: var(--surf-unread);
}

.notif-item.unread .notif-message {
  font-weight: 600;
}

.notif-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.3;
}

.notif-message {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  color: var(--tx-msg);
}

.notif-time {
  flex-shrink: 0;
  font-size: 11px;
  white-space: nowrap;
  color: var(--muted, #94a3b8);
}

.notif-success { border-left-color: #10b981; }
.notif-success .notif-icon { color: var(--tx-emerald-500); }
.notif-info { border-left-color: #6366f1; }
.notif-info .notif-icon { color: var(--tx-indigo-400); }
.notif-error { border-left-color: #ef4444; }
.notif-error .notif-icon { color: var(--tx-red-500); }
.notif-warning { border-left-color: #f59e0b; }
.notif-warning .notif-icon { color: var(--tx-amber-500); }

/* -------------------- Home Priority Row (Actions & Dashboard) -------------------- */
.home-priority-row {
  display: grid;
  grid-template-columns: minmax(260px, var(--priority-left-fr, 56.5fr)) 14px minmax(250px, var(--priority-right-fr, 43.5fr));
  column-gap: 0;
  row-gap: 0;
  margin: 16px 0 18px;
  align-items: stretch;
  position: relative;
}

.home-priority-row.has-one-minimized {
  grid-template-columns: 1fr;
  row-gap: 10px;
}

.home-priority-row.has-one-minimized .priority-splitter-col {
  display: none;
}

.home-priority-row.both-minimized {
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 10px;
  margin-bottom: 14px;
}

.home-priority-row.both-minimized .priority-splitter {
  display: none;
}

.priority-panel,
.dashboard-mini-panel {
  display: flex;
  flex-direction: column;
  background: var(--card, #121824);
  border: 1px solid var(--line, rgba(var(--hi-rgb), 0.08));
  border-radius: var(--radius-md, 12px);
  padding: 16px 18px;
  box-shadow: 0 4px 20px rgba(var(--shadow-rgb), calc(0.25 * var(--shadow-k)));
  min-width: 0;
}

.home-priority-row.has-custom-height .priority-panel:not(.is-minimized),
.home-priority-row.has-custom-height .dashboard-mini-panel:not(.is-minimized) {
  height: var(--priority-panel-height, 440px);
  max-height: var(--priority-panel-height, 440px);
  overflow: hidden;
}

.priority-panel.is-minimized,
.dashboard-mini-panel.is-minimized {
  padding: 10px 16px;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  justify-content: center;
}

.priority-panel.is-minimized .priority-panel-header,
.dashboard-mini-panel.is-minimized .priority-panel-header {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
  cursor: pointer;
}

.priority-panel.is-minimized .priority-subheading,
.dashboard-mini-panel.is-minimized .priority-subheading {
  display: none;
}

.priority-panel.is-minimized .priority-icon,
.dashboard-mini-panel.is-minimized .priority-icon {
  width: 28px;
  height: 28px;
  font-size: 16px;
}

.priority-panel.is-minimized .recommended-actions-list,
.dashboard-mini-panel.is-minimized .dashboard-mini-body {
  display: none !important;
}

/* Splitters for horizontal width & vertical height resizing */
.priority-splitter {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
  position: relative;
  z-index: 2;
  transition: background 0.15s ease;
}

.priority-splitter:focus-visible {
  outline: 2px solid var(--accent, #1E9E8C);
  outline-offset: 2px;
  border-radius: 6px;
}

.priority-splitter-col {
  cursor: col-resize;
  width: 14px;
  min-inline-size: 14px;
  align-self: stretch;
}

.priority-splitter-row {
  grid-column: 1 / -1;
  cursor: row-resize;
  height: 14px;
  min-block-size: 14px;
  width: 100%;
  margin-top: 2px;
}

.home-priority-row.has-one-minimized .priority-splitter-row {
  margin-top: -6px;
}

.priority-splitter-grip {
  border-radius: 999px;
  background: rgba(var(--hi-rgb), 0.16);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.priority-splitter-col .priority-splitter-grip {
  width: 4px;
  height: 44px;
}

.priority-splitter-row .priority-splitter-grip {
  width: 56px;
  height: 4px;
}

.priority-splitter:hover .priority-splitter-grip,
.priority-splitter:focus-visible .priority-splitter-grip,
.priority-splitter.is-dragging .priority-splitter-grip {
  background: var(--accent, #1E9E8C);
  box-shadow: 0 0 8px rgba(30, 158, 140, 0.45);
}

.priority-splitter-col:hover .priority-splitter-grip,
.priority-splitter-col.is-dragging .priority-splitter-grip {
  height: 68px;
}

.priority-splitter-row:hover .priority-splitter-grip,
.priority-splitter-row.is-dragging .priority-splitter-grip {
  width: 88px;
}

body.priority-resizing-col,
body.priority-resizing-col * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.priority-resizing-row,
body.priority-resizing-row * {
  cursor: row-resize !important;
  user-select: none !important;
}

body.priority-resizing-col iframe,
body.priority-resizing-row iframe {
  pointer-events: none !important;
}

.priority-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft, rgba(var(--hi-rgb), 0.06));
  margin-bottom: 14px;
}

.priority-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.priority-title-wrap > div {
  /* .priority-subheading below is white-space:nowrap with ellipsis
     overflow — that only actually engages if this flex item is allowed
     to shrink below its unbroken text's natural width. Without this,
     the subheading's full sentence forces the whole title area wide
     regardless of viewport, pushing into/overlapping priority-header-
     badges (the "N Actions" pill + refresh button) on narrow screens. */
  min-width: 0;
}

.priority-icon {
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs, 6px);
  background: rgba(var(--hi-rgb), 0.05);
  border: 1px solid var(--line-soft, rgba(var(--hi-rgb), 0.08));
  flex-shrink: 0;
}

.priority-heading {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.priority-subheading {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.priority-header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.badge-priority-count {
  background: rgba(57, 135, 229, 0.18);
  border: 1px solid rgba(57, 135, 229, 0.4);
  color: var(--tx-blue-400);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.btn-icon-refresh,
.btn-icon-collapse {
  background: rgba(var(--hi-rgb), 0.05);
  border: 1px solid var(--line-soft, rgba(var(--hi-rgb), 0.1));
  color: var(--muted, #94a3b8);
  border-radius: 6px;
  min-inline-size: 28px;
  min-block-size: 28px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.btn-icon-refresh:hover {
  color: var(--fg);
  background: rgba(var(--hi-rgb), 0.1);
  transform: rotate(45deg);
}

.btn-icon-collapse:hover {
  color: var(--fg);
  background: rgba(var(--hi-rgb), 0.12);
  border-color: rgba(var(--hi-rgb), 0.22);
}

.btn-icon-refresh:focus-visible,
.btn-icon-collapse:focus-visible {
  outline: 2px solid var(--accent, #1E9E8C);
  outline-offset: 2px;
}

.dashboard-mini-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.home-priority-row.has-custom-height .dashboard-mini-panel:not(.is-minimized) .dashboard-mini-body {
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* Recommended actions list */
.recommended-actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.home-priority-row.has-custom-height .priority-panel:not(.is-minimized) .recommended-actions-list {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}

.recommended-actions-list::-webkit-scrollbar {
  width: 5px;
}
.recommended-actions-list::-webkit-scrollbar-thumb {
  background: rgba(var(--hi-rgb), 0.15);
  border-radius: 4px;
}

.action-list-loading,
.action-list-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted, #94a3b8);
  font-size: 13px;
}

.action-item-card {
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line, rgba(var(--hi-rgb), 0.08));
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.action-item-card:hover {
  background: var(--surf-action-hover);
  border-color: rgba(57, 135, 229, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(var(--shadow-rgb), calc(0.3 * var(--shadow-k)));
}

.action-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.action-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.action-tag.urgent {
  background: rgba(239, 68, 68, 0.18);
  color: var(--tx-red-400);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.action-tag.high,
.action-tag.ai {
  background: rgba(57, 135, 229, 0.18);
  color: var(--tx-blue-400);
  border: 1px solid rgba(57, 135, 229, 0.4);
}

.action-tag.warning {
  background: rgba(245, 158, 11, 0.18);
  color: var(--tx-amber-400);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.action-tag.lead {
  background: rgba(20, 184, 166, 0.18);
  color: var(--tx-teal-400);
  border: 1px solid rgba(20, 184, 166, 0.4);
}

.action-date-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #94a3b8);
}

.action-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.action-entity-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.action-entity-company {
  font-size: 12px;
  color: var(--muted, #94a3b8);
  margin-left: 6px;
  font-weight: normal;
}

.action-entity-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text, #38bdf8);
  flex-shrink: 0;
}

.action-item-detail {
  font-size: 12px;
  line-height: 1.45;
  color: var(--tx-slate-300);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(var(--hi-rgb), 0.04);
}

.action-stage-badge {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  text-transform: capitalize;
}

.action-btn-link {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tx-sky-400);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.action-item-card:hover .action-btn-link {
  text-decoration: underline;
}

/* Home Pipeline Dashboard Panel */
.home-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.home-stat-box {
  background: rgba(var(--surf-rgb), 0.55);
  border: 1px solid var(--line, rgba(var(--hi-rgb), 0.07));
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #94a3b8);
  margin-bottom: 4px;
}

.home-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--fg);
  font-family: var(--font-display, 'Poppins', sans-serif);
  line-height: 1.15;
}

.home-stat-grid.home-stat-grid-5 {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.text-success { color: var(--tx-emerald-500) !important; }
.text-accent { color: var(--tx-sky-400) !important; }
.text-partner { color: var(--tx-teal-300, #2dd4bf) !important; }

/* Admin AI Usage: every stat tile is a button that opens its detail */
.ai-usage-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.ai-stat-tile {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ai-stat-tile:hover,
.ai-stat-tile:focus-visible {
  border-color: var(--accent, #1E9E8C);
  outline: none;
}

/* AI Usage on a phone: no sideways scrolling. Tiles two to a row, and each
   table row becomes a card of label/value lines (app.js _labelAiTableCells
   copies each column heading onto its cells as data-label). */
@media (max-width: 640px) {
  #admin-ai-usage-section .section-head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #admin-ai-usage-section .section-head-row .button-group,
  #admin-ai-usage-period,
  #admin-ai-usage-from,
  #admin-ai-usage-to,
  #admin-ai-usage-date {
    width: 100%;
  }
  .ai-usage-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ai-usage-stat-grid .ai-stat-tile {
    min-width: 0;
    padding: 10px 12px;
  }
  .ai-usage-stat-grid .home-stat-val {
    font-size: 18px;
    overflow-wrap: anywhere;
  }
  #admin-ai-drilldown > div:first-child {
    flex-wrap: wrap;
  }
  #admin-ai-usage-section .admin-table-responsive {
    overflow-x: visible;
  }
  #admin-ai-usage-section .admin-users-table,
  #admin-ai-usage-section .admin-users-table tbody,
  #admin-ai-usage-section .admin-users-table tr,
  #admin-ai-usage-section .admin-users-table td {
    display: block;
    width: 100%;
  }
  #admin-ai-usage-section .admin-users-table thead {
    display: none;
  }
  #admin-ai-usage-section .admin-users-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft, rgba(var(--hi-rgb), 0.06));
  }
  #admin-ai-usage-section .admin-users-table tr:last-child {
    border-bottom: none;
  }
  #admin-ai-usage-section .admin-users-table td {
    padding: 0;
    border-bottom: none;
    overflow-wrap: anywhere;
    /* The clickable error cells are underlined inline; that would underline the label too. */
    text-decoration: none !important;
  }
  #admin-ai-usage-section .admin-users-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted, #94a3b8);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
  }
  /* Free text (a switch's or paid key's reason) gets the card's full width. */
  #admin-ai-usage-section .admin-users-table td[data-label^="Why"],
  #admin-ai-usage-section .admin-users-table td[data-label="Reason"],
  #admin-ai-usage-section .admin-users-table td[data-label="Switch"] {
    grid-column: 1 / -1;
  }
  #admin-ai-usage-section .admin-users-table td[colspan] {
    grid-column: 1 / -1;
  }
  #admin-ai-usage-section .admin-users-table td[colspan]::before {
    content: none;
  }
  #admin-ai-usage-section .admin-users-table tbody tr:hover td {
    background: none;
  }
}

.ai-stat-tile.is-active {
  border-color: var(--accent, #1E9E8C);
  background: rgba(30, 158, 140, 0.12);
}

.ai-stat-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
}

.ai-stat-tile:hover .ai-stat-hint,
.ai-stat-tile.is-active .ai-stat-hint {
  color: var(--accent-text, #5eead4);
}

/* Keeps a scrolled-to panel's title clear of the sticky top bar */
#admin-ai-drilldown,
#admin-ai-errors-card {
  scroll-margin-top: 90px;
}

.ai-model-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.ai-model-link:hover {
  color: var(--accent-text, #5eead4);
}

/* Stage Distribution bar */
.home-stage-distribution {
  background: rgba(var(--surf-rgb), 0.4);
  border: 1px solid var(--line, rgba(var(--hi-rgb), 0.06));
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
}

.home-stage-label {
  font-weight: 600;
  color: var(--fg);
}

.home-stage-sub {
  color: var(--muted, #94a3b8);
}

.home-stage-bar {
  height: 10px;
  background: rgba(var(--hi-rgb), 0.05);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  width: 100%;
}

.home-stage-segment {
  height: 100%;
  transition: width 0.3s ease;
  position: relative;
}

.home-stage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.home-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
}

.home-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Boards Below Wrapper */
.funnel-board-wrapper {
  margin-top: 8px;
}

.board-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

.board-header-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.board-header-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}

.board-header-hint {
  font-size: 12px;
}

/* Drafts tray above the board: same cards, laid out in a wrapping row. */
.drafts-tray {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.drafts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.drafts-list .deal-card {
  margin-bottom: 0;
  border-style: dashed;
}
.draft-meta {
  font-size: 0.8em;
  margin-top: 2px;
}
.draft-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.draft-actions .promote-stage-select {
  flex: 1 1 auto;
  min-width: 0;
}

/* Deal page: title plus the Draft chip, and the stage picker + Promote. */
.deal-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.pill-draft {
  border-style: dashed;
  color: var(--fg);
  font-weight: 600;
}
.promote-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 768px) {
  /* The header buttons stack full width here; the button fills the rest. */
  .promote-control > .btn { flex: 1 1 auto; }
}

/* Responsive queries */
@media (max-width: 959px) {
  .home-priority-row,
  .home-priority-row.both-minimized {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 14px 0 20px;
  }
  .priority-splitter-col {
    display: none;
  }
}

@media (max-width: 540px) {
  .home-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .home-stat-val {
    font-size: 17px;
  }
}

/* -------------------- AI Field Review / Diff Modal -------------------- */
.afr-modal-box {
  width: min(1100px, 94vw) !important;
  max-width: 1100px !important;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.afr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.afr-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.afr-header-icon {
  font-size: 26px;
  line-height: 1;
}

.afr-intro-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg);
  margin: 0 0 12px;
  flex-shrink: 0;
}

.afr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(var(--surf-rgb), 0.5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs, 6px);
  padding: 8px 14px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.afr-select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}

.afr-select-all-label input[type="checkbox"],
.afr-diff-table input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}

.afr-count-badge {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}

.afr-table-wrap {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(var(--surf-rgb), 0.4);
  flex-shrink: 0;
}

.afr-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.afr-diff-table th {
  text-align: left;
  background: var(--surf-afr-head);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 2;
}

.afr-diff-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg);
  vertical-align: middle;
  word-break: break-word;
}

.afr-diff-table tr:last-child td {
  border-bottom: none;
}

.afr-diff-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.afr-diff-row:hover {
  background: rgba(var(--hi-rgb), 0.03);
}

.afr-diff-row.afr-row-checked {
  background: rgba(30, 158, 140, 0.08);
}

.afr-field-name {
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.afr-current-val {
  color: var(--muted);
  font-size: 13px;
  word-break: break-word;
  line-height: 1.45;
}

.afr-discovered-val {
  color: var(--tx-teal-300);
  font-weight: 500;
  font-size: 13px;
  word-break: break-word;
  line-height: 1.45;
}

.afr-val-empty {
  color: var(--tx-faint);
  font-style: italic;
}

.afr-tag-new {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.2);
  color: var(--tx-emerald-400);
  letter-spacing: 0.03em;
}

.afr-tag-changed {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.2);
  color: var(--tx-amber-400);
  letter-spacing: 0.03em;
}

.afr-tag-match {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(154, 163, 181, 0.15);
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* AFR Notes Diff & Expandable Previews */
.afr-notes-diff-block {
  margin: 12px 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(var(--surf-rgb), 0.45);
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.afr-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--surf-afr-notes);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}

.afr-notes-header:hover {
  background: var(--surf-afr-notes-hover);
}

.afr-notes-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
}

.afr-notes-body {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .afr-modal-box {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 16px 12px;
  }
  /* A 4-column table (Apply/Field/Current/AI Discovered) has no room to
     breathe under ~400px — table-layout:auto alone still squeezes the two
     value columns into a sliver, wrapping "Changed" one letter per line.
     Turn each row into a self-labeled stacked card instead: checkbox +
     field name on one line, then each value full-width below it. */
  .afr-diff-table thead {
    display: none;
  }
  .afr-diff-table, .afr-diff-table tbody {
    display: block;
    width: 100%;
  }
  .afr-diff-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
  }
  .afr-diff-table td {
    display: block;
    padding: 0;
    border-bottom: none;
    width: auto;
  }
  .afr-diff-row > td:first-child { flex: 0 0 auto; }
  .afr-diff-row > td:nth-child(2) { flex: 1 1 auto; min-width: 0; }
  .afr-current-val, .afr-discovered-val {
    flex: 1 1 100%;
    margin-top: 4px;
  }
  .afr-current-val::before, .afr-discovered-val::before {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .afr-current-val::before { content: "Current Value"; }
  .afr-discovered-val::before { content: "AI Discovered Value"; }
  .afr-notes-body {
    grid-template-columns: 1fr;
    gap: 12px;
    max-height: 380px;
    overflow-y: auto;
  }
}

.afr-notes-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.afr-pane-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.afr-pane-content {
  background: rgba(var(--surf-rgb), 0.65);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
  min-height: 180px;
  max-height: 360px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}

.afr-pane-content.new-notes {
  border-color: rgba(94, 234, 212, 0.45);
  background: var(--surf-afr-new);
  color: var(--tx-slate-100);
}

.afr-val-preview {
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 90px;
  overflow-y: auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* -------------------- Disapprove / Delete AI Research -------------------- */
.btn-outline-danger {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: var(--tx-red-400);
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: var(--tx-on-danger-hover);
}

.btn-disapprove-ai {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

.ai-research-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.disapprove-options-box {
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.merge-candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.merge-candidate-card {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}

.merge-candidate-card:hover {
  border-color: var(--line-soft);
}

.merge-candidate-card.selected {
  border-color: var(--accent);
  background: rgba(45, 212, 191, 0.08);
}

.merge-candidate-card input[type="radio"] {
  width: 16px;
  max-width: 16px;
  height: 16px;
  margin-top: 3px;
  flex: 0 0 auto;
  cursor: pointer;
}

.merge-candidate-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  word-break: break-word;
}

.merge-candidate-company {
  color: var(--muted);
  font-size: 12px;
}

.merge-suggested-badge {
  align-self: flex-start;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.18);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 600;
}

.merge-suggested-badge.weak {
  background: rgba(148, 163, 184, 0.15);
  color: var(--muted);
}

.merge-candidate-note {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.merge-recommendation {
  color: var(--accent-ink);
}

.merge-recommendation.weak {
  color: var(--muted);
}

.merge-ai-check {
  padding: 7px 10px;
  border-left: 3px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--fg);
  line-height: 1.4;
}

.merge-ai-check.weak,
.merge-ai-check.unsure {
  color: var(--muted);
}

.merge-ai-check.same {
  border-left-color: var(--accent);
}

.merge-ai-check.different,
.merge-ai-check.related {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

.merge-ai-check a {
  color: var(--accent-text);
}

.merge-expanded-details {
  user-select: text;
  cursor: default;
}

.merge-contact-row,
.merge-deal-row {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.merge-contact-row:hover,
.merge-deal-row:hover {
  background: rgba(var(--surf-rgb), 1) !important;
  border-color: var(--line) !important;
}

.merge-expand-toggle {
  font-size: 11px;
  padding: 2px 8px;
}

.merge-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 4px;
}

.merge-role-badge.primary {
  background: rgba(45, 212, 191, 0.22);
  color: var(--accent-ink);
  border: 1px solid rgba(45, 212, 191, 0.4);
}

.merge-role-badge.merge-in {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
  border: 1px solid var(--line-soft);
}

.merge-candidate-card.merge-excluded {
  opacity: 0.6;
  border-style: dashed;
  background: rgba(var(--surf-rgb), 0.3);
}

.merge-include-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  user-select: none;
  transition: all 0.15s ease;
}

.merge-include-label:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line);
}

.disapprove-option-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}

.disapprove-option-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: #ef4444;
  cursor: pointer;
  width: 15px;
  height: 15px;
}

.disapprove-fields-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* -------------------- Contact AI Intelligence & Confidence -------------------- */
.contact-ai-card {
  background: var(--surf-ai-card);
  border: 1px solid rgba(30, 158, 140, 0.35);
  border-radius: var(--radius-sm, 8px);
  padding: 14px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 18px rgba(var(--shadow-rgb), calc(0.25 * var(--shadow-k)));
  position: relative;
}

.contact-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--hi-rgb), 0.07);
}

.contact-ai-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contact-ai-badge-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--tx-teal-300);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.confidence-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2.5px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

.confidence-pill.confidence-high {
  background: rgba(16, 185, 129, 0.18);
  color: var(--tx-emerald-400);
  border: 1px solid rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.confidence-pill.confidence-medium {
  background: rgba(245, 158, 11, 0.18);
  color: var(--tx-amber-400);
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.confidence-pill.confidence-low {
  background: rgba(239, 68, 68, 0.18);
  color: var(--tx-red-400);
  border: 1px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.contact-ai-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-ai-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--tx-slate-200);
  word-break: break-word;
}

.contact-ai-body h3,
.contact-ai-body h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tx-teal-300);
  margin: 10px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.contact-ai-body p {
  margin: 0 0 8px;
}

.contact-ai-body ul {
  margin: 4px 0 8px 18px;
  padding: 0;
}

.contact-ai-body li {
  margin-bottom: 3px;
}

.contact-ai-sources {
  font-size: 11.5px;
  color: var(--muted);
  border-top: 1px solid rgba(var(--hi-rgb), 0.06);
  padding-top: 8px;
  margin-top: 4px;
}

.contact-ai-sources a {
  color: var(--tx-sky-400);
  text-decoration: underline;
  margin-right: 8px;
}

.contact-ai-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ==========================================================================
   pds Tech Laser Scan Design for Searching / Loading Buttons
   Grounded directly in pds-tech.ai identity (teal laser sweep + ptPulse)
   ========================================================================== */

@keyframes ptPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(30, 158, 140, 0.7), 0 0 10px rgba(30, 158, 140, 0.35);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(30, 158, 140, 0), 0 0 18px rgba(30, 158, 140, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(30, 158, 140, 0), 0 0 8px rgba(30, 158, 140, 0);
  }
}

@keyframes pdsLaserSweep {
  0% {
    left: -80%;
    opacity: 0.1;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 140%;
    opacity: 0.1;
  }
}

@keyframes pdsTextGlow {
  0%, 100% {
    text-shadow: 0 0 6px rgba(30, 158, 140, 0.5);
    color: var(--tx-slate-100);
  }
  50% {
    text-shadow: 0 0 12px rgba(94, 234, 212, 0.95), 0 0 20px rgba(30, 158, 140, 0.8);
    color: #ffffff;
  }
}

/* Active searching state on any button */
.btn.is-searching,
.btn.btn-searching,
button.is-searching,
button[data-searching="true"] {
  position: relative !important;
  overflow: hidden !important;
  pointer-events: none !important;
  cursor: wait !important;
  border-color: rgba(30, 158, 140, 0.9) !important;
  background: rgba(8, 16, 32, 0.95) !important;
  color: #ffffff !important;
  animation: ptPulse 2s infinite !important;
  box-shadow: 0 0 16px rgba(30, 158, 140, 0.55), inset 0 0 12px rgba(30, 158, 140, 0.3) !important;
}

/* The glowing laser gradient band sweeping across (pds-tech.ai ptScanGrad inspired) */
.btn.is-searching::before,
.btn.btn-searching::before,
button.is-searching::before,
button[data-searching="true"]::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: 50%;
  left: -50%;
  background: linear-gradient(
    90deg,
    rgba(30, 158, 140, 0) 0%,
    rgba(30, 158, 140, 0.18) 25%,
    rgba(30, 158, 140, 0.55) 50%,
    rgba(94, 234, 212, 0.95) 52%,
    rgba(30, 158, 140, 0.55) 54%,
    rgba(30, 158, 140, 0.18) 75%,
    rgba(30, 158, 140, 0) 100%
  );
  transform: skewX(-20deg);
  animation: pdsLaserSweep 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 1;
  pointer-events: none;
}

/* The intense razor laser line at core of beam */
.btn.is-searching::after,
.btn.btn-searching::after,
button.is-searching::after,
button[data-searching="true"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5px;
  left: -50%;
  margin-left: 25%;
  background: #ffffff;
  box-shadow: 
    0 0 4px #ffffff,
    0 0 10px #5eead4,
    0 0 18px #1e9e8c,
    0 0 28px rgba(30, 158, 140, 0.9);
  transform: skewX(-20deg);
  animation: pdsLaserSweep 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 2;
  pointer-events: none;
}

.btn-searching-text {
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.02em;
  animation: pdsTextGlow 2s infinite;
}

.laser-dot {
  position: relative;
  z-index: 3;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2dd4bf;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px #2dd4bf;
  animation: ptPulse 1.4s infinite;
}

/* Global search bar laser scan (position:relative for this already set
   where .global-search is first declared, near the top of this file) */
.global-search.is-searching::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -40%;
  height: 2.5px;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(30, 158, 140, 0.4) 20%,
    #5eead4 50%,
    rgba(30, 158, 140, 0.4) 80%,
    transparent 100%
  );
  box-shadow: 0 0 8px #1e9e8c, 0 0 14px #5eead4;
  animation: pdsLaserSweep 1.6s ease-in-out infinite;
  border-radius: 2px;
  z-index: 10;
  pointer-events: none;
}

.btn-icon-refresh.is-searching {
  width: auto !important;
  padding: 0 10px !important;
  height: 28px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

/* ==========================================================================
   8x8 Jitsi as a Service (JaaS) Video Meeting Interface
   ========================================================================== */
.meeting-modal-box {
  width: min(1280px, 96vw);
  height: min(860px, 92vh);
  max-width: 98vw;
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #090e17;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 24px rgba(30, 158, 140, 0.15);
  transition: width 0.2s ease, height 0.2s ease, border-radius 0.2s ease;
}

.meeting-modal-box.is-fullwindow {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.meeting-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(14, 21, 37, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.meeting-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.meeting-live-pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: ptPulse 1.8s infinite;
  flex-shrink: 0;
}

.meeting-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* The Record button in a meeting window (meeting-recorder.js): red and pulsing while recording. */
#meeting-record-btn.is-recording {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(248, 113, 113, 0.65);
  color: #f87171;
  font-weight: 600;
  animation: recordPulse 1.6s ease-in-out infinite;
}

/* The strip under a meeting window's title bar that says the call is being recorded (app.js paintMeetingRecBanner). */
.meeting-rec-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.1);
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.meeting-rec-banner.hidden { display: none; }
.meeting-rec-banner.is-live {
  background: rgba(239, 68, 68, 0.12);
  border-bottom-color: rgba(248, 113, 113, 0.45);
}
.meeting-rec-banner.is-warning {
  background: rgba(245, 158, 11, 0.12);
  border-bottom-color: rgba(251, 191, 36, 0.45);
}
.meeting-rec-banner-time {
  font-weight: 700;
  color: #f87171;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  animation: recordBlink 1.6s ease-in-out infinite;
}
.meeting-rec-banner-text { flex: 1 1 260px; min-width: 0; }
.meeting-rec-banner-actions { display: flex; gap: 8px; margin-left: auto; }

@keyframes recordBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes recordPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

/* Call recording & notes in the meeting details window. */
.md-rec-transcript {
  max-height: min(340px, 40vh);
  overflow: auto;
  margin: 0 0 6px;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font: 11.5px/1.5 var(--font-body, system-ui, sans-serif);
  background: var(--surf-row);
  border: 1px solid var(--border-row);
  border-radius: 6px;
}

.md-rec-paste summary {
  color: var(--accent-text);
}

.meeting-modal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #000;
}

.jaas-video-container {
  flex: 1;
  min-width: 0;
  height: 100%;
  position: relative;
  background: #05080f;
  display: flex;
  flex-direction: column;
}

.jaas-video-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

.jaas-loading-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #070d18;
  z-index: 2;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.jaas-loading-state.fade-out {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Meeting Camera Alert Banner */
.meeting-camera-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(234, 88, 12, 0.15);
  border-bottom: 1px solid rgba(234, 88, 12, 0.4);
  padding: 8px 16px;
  color: #fed7aa;
  font-size: 12px;
  flex-shrink: 0;
  z-index: 10;
  animation: slideDownAlert 0.2s ease-out;
}

.meeting-camera-alert.error-theme {
  background: rgba(239, 68, 68, 0.16);
  border-bottom-color: rgba(239, 68, 68, 0.4);
  color: #fecaca;
}

.meeting-camera-alert.success-theme {
  background: rgba(16, 185, 129, 0.16);
  border-bottom-color: rgba(16, 185, 129, 0.4);
  color: #a7f3d0;
}

@keyframes slideDownAlert {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.meeting-camera-alert .mca-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.meeting-camera-alert .mca-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.meeting-camera-alert .mca-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Popped-out meeting placeholder in window */
.jaas-popped-out-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #080d19;
  padding: 30px;
  text-align: center;
  z-index: 5;
}

.jaas-popped-out-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.meeting-sidebar {
  width: 340px;
  max-width: 90vw;
  background: #0e1525;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.meeting-sidebar.hidden {
  display: none !important;
}

.meeting-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.meeting-sidebar-content {
  padding: 14px;
  overflow-y: auto;
  flex: 1;
}

.duration-pills-row {
  display: flex;
  gap: 6px;
}

.btn-duration-pill {
  flex: 1;
  padding: 6px 8px;
  background: var(--surf-raised-d);
  border: 1px solid var(--line, rgba(var(--hi-rgb), 0.1));
  border-radius: 6px;
  color: var(--tx-slate-100);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-duration-pill:hover {
  border-color: var(--accent, #1e9e8c);
  background: rgba(30, 158, 140, 0.12);
}

.btn-duration-pill.active {
  background: var(--accent, #1e9e8c);
  border-color: #5eead4;
  color: #fff;
  box-shadow: 0 0 10px rgba(30, 158, 140, 0.4);
}

/* Split meeting button for cards */
.meeting-btn-group {
  display: inline-flex;
  align-items: stretch;
  border-radius: 6px;
  overflow: hidden;
}

.meeting-btn-group .btn {
  border-radius: 0;
}

.meeting-btn-group .btn:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.meeting-btn-group .btn:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-left: 1px solid rgba(var(--hi-rgb), 0.15);
  padding-left: 8px;
  padding-right: 8px;
}

@media (max-width: 768px) {
  .meeting-modal-box {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .meeting-modal-header {
    padding: 8px 12px;
    gap: 8px;
  }
  .meeting-title-wrap h3 {
    font-size: 13.5px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .meeting-header-actions {
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .meeting-header-actions .btn {
    padding: 4px 8px;
    font-size: 11px;
  }
  .meeting-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85vw;
    z-index: 20;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.6);
  }
  .meeting-camera-alert {
    padding: 6px 10px;
    font-size: 11px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .camera-test-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Deal Won Celebration Overlay & Animation Styles
   ========================================================================== */

.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(10, 28, 46, 0.78) 0%, rgba(6, 12, 24, 0.92) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  user-select: none;
  animation: celebrationFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes celebrationFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.celebration-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.celebration-card {
  position: relative;
  z-index: 10;
  background: rgba(18, 32, 58, 0.88);
  border: 1.5px solid rgba(43, 184, 163, 0.55);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(30, 158, 140, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 40px 48px;
  text-align: center;
  max-width: 520px;
  width: 90%;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: celebrationCardEnter 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes celebrationCardEnter {
  0% {
    opacity: 0;
    transform: scale(0.65) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.celebration-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 184, 163, 0.25) 0%, rgba(30, 158, 140, 0.08) 100%);
  border: 2px solid rgba(43, 184, 163, 0.6);
  box-shadow: 0 0 24px rgba(43, 184, 163, 0.4);
  margin-bottom: 16px;
  position: relative;
  animation: celebrationBadgePulse 2s infinite ease-in-out;
}

@keyframes celebrationBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 24px rgba(43, 184, 163, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 38px rgba(52, 211, 153, 0.65);
  }
}

.celebration-trophy {
  font-size: 34px;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5));
}

.celebration-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2bb8a3;
  margin-bottom: 8px;
}

.celebration-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #ffffff 30%, #a7f3d0 70%, #fde047 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(43, 184, 163, 0.3);
}

.celebration-deal-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.celebration-deal-amount {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  color: #10b981;
  margin-bottom: 14px;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.celebration-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.8), transparent);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.8);
  animation: cardScanSweep 2.8s ease-in-out infinite alternate;
}

@keyframes cardScanSweep {
  0% { top: 0%; opacity: 0.2; }
  50% { opacity: 0.9; }
  100% { top: 100%; opacity: 0.2; }
}

.celebration-hint {
  font-size: 11px;
  color: rgba(247, 246, 242, 0.45);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 18px;
}

.celebration-tier-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  background: rgba(43, 184, 163, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.5);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #34d399;
  margin-bottom: 10px;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.25);
}

.celebration-quote-box-won {
  background: rgba(30, 158, 140, 0.08);
  border-left: 3px solid #10b981;
  border-radius: 8px;
  padding: 12px 18px;
  margin: 12px 0 16px 0;
  text-align: center;
}

.celebration-quote-box-won .celebration-quote {
  font-size: 13.5px;
  font-style: italic;
  color: #f7f6f2;
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.01em;
}

.celebration-currency-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 16px 0;
}

.celebration-currency-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.6);
  color: #fef08a;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
  animation: currencyPillPulse 2s infinite ease-in-out;
}

@keyframes currencyPillPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(245, 158, 11, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 24px rgba(253, 224, 71, 0.7); }
}

.celebration-controls {
  margin: 14px 0 4px 0;
}

.celebration-escalate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 26px;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #060c18;
  background: linear-gradient(135deg, #f59e0b 0%, #10b981 100%);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.celebration-escalate-btn:hover {
  transform: translateY(-2px) scale(1.04);
  background: linear-gradient(135deg, #fbbf24 0%, #34d399 100%);
  box-shadow: 0 0 36px rgba(251, 191, 36, 0.85), 0 6px 16px rgba(0, 0, 0, 0.5);
}

.celebration-escalate-btn:active {
  transform: translateY(0) scale(0.98);
}

.celebration-escalate-btn-max {
  background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 50%, #8b5cf6 100%);
  color: #ffffff;
  box-shadow: 0 0 32px rgba(245, 158, 11, 0.75), 0 0 50px rgba(244, 63, 94, 0.5);
  animation: maxOverdrivePulse 1.8s infinite alternate;
}

@keyframes maxOverdrivePulse {
  0% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.7), 0 0 40px rgba(244, 63, 94, 0.4); }
  100% { box-shadow: 0 0 45px rgba(251, 191, 36, 0.95), 0 0 70px rgba(244, 63, 94, 0.75); }
}

/* Tier 10 Holographic & Golden Finale Aura */
.celebration-overlay-tier-10 {
  background: radial-gradient(circle at 50% 50%, rgba(35, 20, 10, 0.84) 0%, rgba(6, 12, 24, 0.96) 100%) !important;
}

.celebration-card-tier-10 {
  border: 2px solid rgba(245, 158, 11, 0.85) !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.85),
    0 0 80px rgba(245, 158, 11, 0.55),
    0 0 140px rgba(30, 158, 140, 0.4),
    inset 0 0 40px rgba(245, 158, 11, 0.25) !important;
  animation: celebrationTier10Enter 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes celebrationTier10Enter {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(40px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Quick "Mark as Won" button on deal details */
.btn-won {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff !important;
  border: 1px solid rgba(52, 211, 153, 0.6);
  font-weight: 700;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-won:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 0 22px rgba(52, 211, 153, 0.65);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Deal Lost — Resilient Momentum Styles
   -------------------------------------------------------------------------- */

.celebration-overlay-lost {
  background: radial-gradient(circle at 50% 50%, rgba(26, 18, 14, 0.82) 0%, rgba(6, 10, 18, 0.94) 100%);
}

.celebration-card-lost {
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.75),
    0 0 50px rgba(234, 88, 12, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.celebration-badge-lost {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(234, 88, 12, 0.08) 100%);
  border: 2px solid rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
}

.celebration-tag-lost {
  color: #fbbf24;
}

.celebration-title-lost {
  font-size: 32px;
  background: linear-gradient(135deg, #ffffff 25%, #fed7aa 65%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(245, 158, 11, 0.25);
}

.celebration-deal-amount-lost {
  color: #f59e0b;
  font-size: 26px;
  text-decoration: line-through;
  opacity: 0.8;
}

.celebration-quote-box {
  background: rgba(247, 246, 242, 0.045);
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0;
  text-align: left;
}

.celebration-quote {
  font-size: 14px;
  font-style: italic;
  color: var(--paper);
  line-height: 1.55;
  margin: 0;
}

/* Quick "Mark as Lost" button on deal details */
.btn-lost {
  background: rgba(242, 135, 158, 0.08);
  color: var(--tx-red-300) !important;
  border: 1px solid rgba(242, 135, 158, 0.3);
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-lost:hover {
  background: rgba(242, 135, 158, 0.2);
  border-color: #f87171;
  color: var(--tx-on-danger-hover) !important;
  transform: translateY(-1px);
}

.funnel-col.drag-over {
  border-color: var(--accent) !important;
  background: rgba(30, 158, 140, 0.12) !important;
  box-shadow: inset 0 0 20px rgba(30, 158, 140, 0.25);
}

.deal-card.is-dragging {
  opacity: 0.4;
  transform: scale(0.96);
}

.badge-won-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: var(--tx-emerald-400);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.badge-won-tag:hover {
  background: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   "do not click" Easter Egg & Rickroll Modal
   -------------------------------------------------------------------------- */
.btn-do-not-click {
  position: fixed;
  bottom: 8px;
  right: 80px;
  z-index: 999;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(var(--fg-rgb), 0.28);
  background: var(--surf-ghost);
  border: 1px solid rgba(var(--hi-rgb), 0.08);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  opacity: 0.4;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

@media (max-width: 640px) {
  /* .back-to-top only appears once scrolled, and sits in this same corner —
     without this it visually collides with/hides behind this button. */
  .btn-do-not-click {
    right: auto;
    left: 12px;
  }
}

.btn-do-not-click:hover {
  opacity: 0.95;
  color: var(--tx-red-400);
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3);
  transform: translateY(-1px);
}

.rickroll-overlay {
  position: fixed;
  inset: 0;
  z-index: 100005;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(20, 10, 30, 0.85) 0%, rgba(6, 6, 12, 0.96) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 20px;
  animation: celebrationFadeIn 0.3s ease forwards;
}

.rickroll-card {
  position: relative;
  background: rgba(18, 22, 38, 0.94);
  border: 1.5px solid rgba(239, 68, 68, 0.55);
  border-radius: 20px;
  padding: 28px 32px;
  max-width: 640px;
  width: 100%;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.8),
    0 0 45px rgba(239, 68, 68, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-align: center;
}

.rickroll-alert-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f87171;
  margin-bottom: 12px;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.rickroll-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #ffffff 30%, #fca5a5 70%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.rickroll-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px 0;
  line-height: 1.45;
}

.rickroll-subtitle em {
  color: #f87171;
  font-style: normal;
  font-weight: 700;
}

.rickroll-email-pill {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(30, 158, 140, 0.12);
  border: 1px solid rgba(43, 184, 163, 0.35);
  border-radius: 8px;
  font-size: 12px;
  color: #a7f3d0;
  margin-bottom: 18px;
}

.rickroll-video-container {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
  margin-bottom: 18px;
}

.rickroll-video-container iframe {
  display: block;
  width: 100%;
  height: 350px;
}

.rickroll-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Admin & User Management Section
   ========================================================================== */
.admin-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.admin-users-table th {
  padding: 12px 18px;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line, rgba(var(--hi-rgb), 0.1));
  background: rgba(var(--hi-rgb), 0.02);
}

.admin-users-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft, rgba(var(--hi-rgb), 0.06));
  vertical-align: middle;
}

.admin-users-table tr:last-child td {
  border-bottom: none;
}

.admin-users-table tbody tr:hover td {
  background: rgba(var(--hi-rgb), 0.02);
}

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  border: 1.5px solid rgba(var(--hi-rgb), 0.15);
}

.admin-avatar.admin-avatar-super {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
  border-color: rgba(251, 191, 36, 0.4);
}

.admin-user-info {
  display: flex;
  flex-direction: column;
}

.admin-user-name {
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-user-email {
  font-size: 12px;
  color: var(--muted, #94a3b8);
  margin-top: 1px;
}

.badge-you-pill {
  background: rgba(56, 189, 248, 0.18);
  color: var(--tx-sky-400);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 9999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-role-admin {
  background: rgba(245, 158, 11, 0.15);
  color: var(--tx-amber-400);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 9999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-role-member {
  background: rgba(57, 135, 229, 0.15);
  color: var(--tx-blue-400);
  border: 1px solid rgba(57, 135, 229, 0.35);
  border-radius: 9999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-perm-granted {
  background: rgba(16, 185, 129, 0.15);
  color: var(--tx-emerald-400);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-perm-restricted {
  background: rgba(var(--hi-rgb), 0.05);
  color: var(--muted, #94a3b8);
  border: 1px solid var(--line, rgba(var(--hi-rgb), 0.1));
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-status-active {
  background: rgba(16, 185, 129, 0.12);
  color: var(--tx-emerald-400);
  border-radius: 9999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-status-inactive {
  background: rgba(239, 68, 68, 0.12);
  color: var(--tx-red-400);
  border-radius: 9999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-actions-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}



/* Narrow phones (e.g. 360px): shave the header's back/forward buttons and
   logo so the arrows, logo and action icons still share one row — without
   this the icons dropped onto a second row of their own. */
@media (max-width: 400px) {
  .nav-history { gap: 3px; }
  .nav-history-btn { width: 28px; height: 30px; }
  .nav-brand .logo-img { width: 76px; }
  .nav-brand .app-title { font-size: 12px; }
  .nav-user-actions { gap: 4px; }
}
@media (max-width: 350px) {
  .nav-brand .app-title { display: none; }
}

/* --- AI Prospect modal: Research vs Find Prospects (ICP search) --- */
.aip-mode-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 3px;
  background: rgba(var(--shade-rgb), calc(0.2 * var(--shade-k)));
  border-radius: var(--radius-sm);
}
.aip-mode-tab {
  flex: 1;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  opacity: 0.7;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.aip-mode-tab.active {
  background: rgba(43, 184, 163, 0.18);
  color: var(--accent-text);
  opacity: 1;
}
.aip-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.7;
}
.aip-icp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.aip-icp-grid input,
.aip-icp-grid select {
  width: 100%;
}
.aip-prospect-table-wrap {
  max-height: 62vh;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.aip-prospect-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.aip-prospect-table th {
  position: sticky;
  top: 0;
  background: var(--surf-raised-c);
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
  padding: 7px 8px;
  z-index: 1;
}
.aip-prospect-table td {
  padding: 8px;
  vertical-align: top;
  border-top: 1px solid var(--line-soft);
  line-height: 1.4;
}
/* Column widths: give the free-text "Why they fit" column the most room. */
.aip-prospect-table th:nth-child(1) { width: 17%; }
.aip-prospect-table th:nth-child(2) { width: 11%; }
.aip-prospect-table th:nth-child(3) { width: 9%; }
.aip-prospect-table th:nth-child(4) { width: 22%; }
.aip-prospect-table th:nth-child(6) { width: 1%; }
.aip-prospect-table td a {
  color: var(--accent-text);
  text-decoration: none;
  font-size: 11px;
  word-break: break-all;
}
.aip-title-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(43, 184, 163, 0.12);
  color: var(--accent-text);
  border: 1px solid rgba(43, 184, 163, 0.3);
}
/* Research a Person: one card per candidate. */
.aip-person-candidates {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 55vh;
  overflow: auto;
  margin-bottom: 12px;
}
.aip-person-card {
  background: rgba(var(--hi-rgb), 0.02);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12px;
}
.aip-person-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.aip-person-name {
  font-size: 14.5px;
  color: var(--fg);
  margin-right: 4px;
}
.aip-person-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
  display: inline-block;
  margin-left: 2px;
}
.aip-person-badge.aip-in-crm {
  background: rgba(251, 191, 36, 0.15);
  color: var(--tx-yellow-300);
}
.aip-person-role {
  font-size: 12.5px;
  color: var(--fg);
  margin-bottom: 2px;
}
.aip-person-card a {
  color: var(--accent-text);
  text-decoration: none;
}
.aip-person-summary-text {
  margin: 8px 0 4px;
  line-height: 1.5;
  color: var(--tx-soft);
}
.aip-person-reason {
  margin: 0;
  font-style: italic;
}
.aip-person-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.aip-person-add-btn {
  font-size: 11px;
  padding: 4px 10px;
  white-space: nowrap;
}
.aip-person-deep {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  margin: 0 0 8px;
  cursor: pointer;
}
.aip-person-deep input {
  margin-top: 2px;
  width: auto;
}
@media (max-width: 640px) {
  .aip-icp-grid {
    grid-template-columns: 1fr;
  }
  #ai-prospect-modal .modal-box {
    padding: 16px;
  }
  #ai-prospect-modal {
    padding: 8px;
  }
  .aip-ingest-row-btn {
    width: 100%;
    margin-top: 4px;
    padding: 8px !important;
    font-size: 12px !important;
  }
}
/* The shared <=768px modal rule pins every .modal-box to 440px; this modal
   holds a results list, so let it use the full screen width instead. */
@media (max-width: 768px) {
  #ai-prospect-modal .modal-box {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}
/* Tablets and phones: a 6-column table is too cramped, so stack each
   prospect as a card instead. */
@media (max-width: 900px) {
  /* One scroll area (the modal), not a table scrolling inside it. */
  .aip-prospect-table-wrap {
    max-height: none;
  }
  .aip-prospect-table thead {
    display: none;
  }
  .aip-prospect-table tr,
  .aip-prospect-table td {
    display: block;
  }
  .aip-prospect-table tr {
    border-top: 1px solid var(--line-soft);
    padding: 6px 0;
  }
  .aip-prospect-table tbody tr:first-child {
    border-top: none;
  }
  .aip-prospect-table td {
    border-top: none;
    padding: 3px 10px;
  }
  .aip-prospect-table td[data-label]::before {
    content: attr(data-label) ": ";
    opacity: 0.6;
    font-weight: 600;
  }
}

/* ==========================================================================
   Theme toggle and the per-theme logo (theme.js sets data-theme on <html>)
   ========================================================================== */

/* Both lockups are in the markup; only the one for the active theme shows. */
.logo-img--light { display: none; }
html[data-theme="light"] .logo-img--dark { display: none; }
html[data-theme="light"] .logo-img--light { display: inline; }

/* A tenant with no logo of its own: its name stands where the logo would (backend/app/branding.py). */
.logo-wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  color: var(--fg);
  margin-bottom: 4px;
}
.nav-brand .logo-wordmark { font-size: 18px; margin-bottom: 0; }
@media (max-width: 400px) {
  .nav-brand .logo-wordmark { font-size: 14px; }
}

.theme-toggle {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shows the icon of the theme you'd switch to: a sun in dark mode, a moon in light. */
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }

/* Login / reset-password screens have no header, so the toggle floats in the corner. */
.theme-toggle--floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 5;
}

/* The phone header is already full, so there the same switch is an item in the user menu. */
.user-menu-theme-item { display: none; }

@media (max-width: 768px) {
  .theme-toggle { width: 30px; height: 30px; }
  .theme-toggle svg { width: 16px; height: 16px; }
  .nav-user-actions .theme-toggle { display: none; }
  .user-menu-theme-item { display: flex; }
}

/* ---- Light-theme touch-ups for controls that have no styling of their own ---- */
/* The Assistant's message box is a bare textarea (a white, square-cornered box in either theme). */
html[data-theme="light"] .assistant-input-row textarea {
  background: #ffffff;
  color: var(--fg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
}
html[data-theme="light"] .assistant-input-row textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ==========================================================================
   Layout toggles: Cards/Compact on Companies and Contacts, and the Deals
   views (Board, List, Tiles, Timeline). Colours are theme tokens only.
   ========================================================================== */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs, 8px);
  overflow: hidden;
  flex-shrink: 0;
}
.view-toggle-btn {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 10px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-right: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
}
.view-toggle-btn:last-child { border-right: none; }
.view-toggle-btn:hover { color: var(--fg); background: rgba(var(--fg-rgb), 0.04); }
.view-toggle-btn.active { color: var(--accent-text); background: rgba(var(--fg-rgb), 0.08); font-weight: 600; }
.board-header-row #deals-view-toggle { margin-left: auto; }
@media (max-width: 768px) {
  .deals-header-row { flex-wrap: wrap; gap: 8px; }
  .deals-header-row .board-header-title { flex: 1 1 100%; }
  .deals-header-row #deals-view-toggle { margin-left: 0; width: 100%; }
  .deals-header-row .view-toggle-btn { flex: 1; padding: 7px 4px; }
}

/* Compact Companies/Contacts: one line per record; expanding still works. */
.compact-list { gap: 4px; }
.compact-list .expandable-card { border-radius: var(--radius-xs, 8px); }
.compact-list .expandable-header { padding: 7px 12px; gap: 10px; }
.compact-list .expandable-summary { gap: 10px; min-width: 0; flex: 1; }
.compact-list .expandable-avatar { width: 26px; height: 26px; font-size: 12px; border-radius: 7px; flex-shrink: 0; }
.compact-list .contact-avatar { font-size: 10.5px; }
.compact-list .expandable-titles { flex-direction: row; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.compact-list .expandable-title-row { flex-wrap: nowrap; flex: 0 0 auto; max-width: 32%; min-width: 0; gap: 6px; align-items: center; }
.compact-list .expandable-name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.compact-list .badge-ai-indicator,
.compact-list .badge-active-deal,
.compact-list .badge-in-indicator { flex-shrink: 0; font-size: 10.5px; padding: 1px 6px; }

.compact-list .expandable-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  flex: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.compact-list .expandable-meta .pill-chip {
  white-space: nowrap;
  font-size: 11px;
  padding: 2px 7px;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.compact-list .expandable-meta .pill-location {
  max-width: 220px;
  flex-shrink: 2;
}
.compact-list .expandable-meta .pill-phone,
.compact-list .expandable-meta .pill-count,
.compact-list .expandable-meta .pill-active-deal,
.compact-list .expandable-meta .pill-partner {
  flex-shrink: 0;
  max-width: none;
}
.compact-list .expandable-meta .pill-website {
  max-width: 140px;
  flex-shrink: 1;
}
.compact-list .expandable-meta .pill-industry {
  max-width: 120px;
  flex-shrink: 1;
}
.compact-list .expand-chevron { width: 22px; height: 22px; font-size: 12px; flex-shrink: 0; }

@media (max-width: 860px) {
  .compact-list .expandable-title-row { max-width: 40%; }
  .compact-list .expandable-meta .pill-location { max-width: 150px; }
  .compact-list .expandable-meta .pill-website { max-width: 110px; }
}

@media (max-width: 640px) {
  .compact-list .expandable-titles { flex-direction: column; align-items: stretch; gap: 3px; }
  .compact-list .expandable-title-row { max-width: none; }
  /* Two lines at most: the name (with its badges), then one row of the key pills,
     fading out at the edge instead of wrapping. The location, phone, website and
     email pills are left to Cards view and the expanded record, which on a phone
     is what made Compact look much the same as Cards. */
  .compact-list .expandable-meta { flex-wrap: nowrap; overflow: hidden; }
  .compact-list .expandable-meta .pill-chip { max-width: none; }
  .compact-list .expandable-meta .pill-location,
  .compact-list .expandable-meta .pill-phone,
  .compact-list .expandable-meta .pill-website,
  .compact-list .expandable-meta .pill-email { display: none; }
  .compact-list .expandable-header { padding: 6px 10px; }
}

/* Stage pills, shared by the List, Tiles and Timeline views */
.stage-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.stage-pill.stage-prospecting, .deal-tile.stage-prospecting { --stage: var(--tx-slate-300); }
.stage-pill.stage-qualified, .deal-tile.stage-qualified { --stage: var(--tx-sky-400); }
.stage-pill.stage-proposal, .deal-tile.stage-proposal { --stage: var(--tx-indigo-300); }
.stage-pill.stage-negotiation, .deal-tile.stage-negotiation { --stage: var(--tx-amber-400); }
.stage-pill.stage-won, .deal-tile.stage-won { --stage: var(--tx-emerald-500); }
.stage-pill.stage-lost, .deal-tile.stage-lost { --stage: var(--tx-red-400); }
.stage-pill { color: var(--stage, var(--fg)); }
.deal-overdue { color: var(--tx-red-400) !important; }
.deal-item { cursor: pointer; }
.deal-item.drill-dimmed { opacity: 0.35; }
.deal-item.drill-highlight { outline: 2px solid var(--accent-text); outline-offset: -2px; }

/* List view */
.deals-list-view { overflow-x: auto; }
.deals-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.deals-table th { text-align: left; padding: 0; border-bottom: 1px solid var(--line); }
.deals-sort-btn {
  font: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); background: none; border: none; padding: 10px 12px; cursor: pointer; width: 100%; text-align: left; white-space: nowrap;
}
.deals-sort-btn:hover { color: var(--fg); }
.deals-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft, var(--line)); vertical-align: middle; }
.deals-table tbody tr:hover td { background: rgba(var(--fg-rgb), 0.03); }
.deals-table tfoot td { font-weight: 700; border-bottom: none; color: var(--muted); }
@media (max-width: 640px) {
  .deals-list-view { overflow-x: visible; }
  .deals-table, .deals-table tbody, .deals-table tr, .deals-table td, .deals-table tfoot { display: block; width: 100%; }
  .deals-table thead { display: block; }
  .deals-table thead tr { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 6px; }
  .deals-table thead th { border: none; }
  .deals-sort-btn { width: auto; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; }
  .deals-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
  .deals-table td { padding: 0; border: none; overflow-wrap: anywhere; }
  .deals-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
  .deals-table td[data-label="Deal"] { grid-column: 1 / -1; font-size: 14.5px; }
  .deals-table td[data-label="Deal"]::before { content: none; }
  .deals-table tfoot tr { display: flex; justify-content: space-between; gap: 8px; padding: 10px 4px; }
  .deals-table tfoot td { width: auto; padding: 0; }
  .deals-table tfoot td:empty { display: none; }
}

/* Tiles view */
.deal-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.deal-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--stage, var(--line));
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.deal-tile:hover { transform: translateY(-2px); border-color: var(--stage, var(--line)); }
.deal-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.deal-tile-name { font-weight: 700; overflow-wrap: anywhere; }
.deal-tile-company { font-size: 12.5px; overflow-wrap: anywhere; }
.deal-tile-amount { font-size: 20px; font-weight: 800; font-family: var(--font-display, inherit); margin-top: 4px; }
.deal-tile-bar { height: 5px; border-radius: 999px; background: rgba(var(--fg-rgb), 0.08); overflow: hidden; }
.deal-tile-bar span { display: block; height: 100%; background: var(--stage, var(--accent-text)); }
.deal-tile-close { font-size: 12px; }
@media (max-width: 640px) {
  .deal-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .deal-tile { padding: 10px; }
  .deal-tile-amount { font-size: 17px; }
}

/* Timeline view */
.deal-timeline-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.deal-timeline-summary > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md, 12px); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deal-timeline-summary strong { font-size: 18px; font-family: var(--font-display, inherit); }
.deal-timeline-month { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md, 12px); padding: 12px 14px; margin-bottom: 10px; }
.deal-timeline-month.is-overdue { border-color: var(--tx-red-400); }
.deal-timeline-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.deal-timeline-totals { display: flex; gap: 8px; align-items: baseline; font-weight: 700; }
.deal-timeline-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(var(--fg-rgb), 0.05); margin: 8px 0 6px; overflow: hidden; }
.deal-timeline-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.deal-timeline-bar .total { background: rgba(var(--fg-rgb), 0.14); }
.deal-timeline-bar .weighted { background: var(--accent-text); }
.deal-timeline-deals { display: flex; flex-direction: column; }
.deal-timeline-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--line-soft, var(--line)); }
.deal-timeline-row:hover { background: rgba(var(--fg-rgb), 0.03); }
.deal-timeline-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-timeline-amount { white-space: nowrap; font-weight: 600; }
@media (max-width: 640px) {
  .deal-timeline-summary { grid-template-columns: minmax(0, 1fr); }
  .deal-timeline-row { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .deal-timeline-row .stage-pill { display: none; }
  .deal-timeline-name { white-space: normal; overflow-wrap: anywhere; }
}

/* In-app confirm dialog (app.js confirmDialog) */
.confirm-overlay { z-index: 3000; }
.confirm-box { width: min(420px, 100%); }
.confirm-message { margin: 0 0 20px; line-height: 1.5; white-space: pre-line; font-size: 14px; }
.confirm-box .modal-actions { margin-top: 0; }

/* ------------------------------- Partners -------------------------------- */
/* Partner tracking (app.js "Partners page", backend partners.py): the
   partner block in the company modal and on company cards, and the
   Partners page board. Stage colours follow the deal-stage badges above. */
.partner-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 10px;
  padding: 10px 12px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: rgba(var(--surf-rgb), 0.35);
}
.partner-fields-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-text);
}
.partner-fields select,
.partner-fields input,
.partner-fields textarea { margin: 0 !important; width: 100% !important; box-sizing: border-box; }
.partner-details { display: flex; flex-direction: column; gap: 8px; }

.pill-partner {
  color: var(--tx-teal-300);
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.3);
  font-weight: 600;
}
.badge-partner-stage { text-transform: none; }
.badge-partner-stage-identified { background: rgba(148, 163, 184, 0.15); color: var(--tx-slate-300); border: 1px solid rgba(148, 163, 184, 0.3); }
.badge-partner-stage-intro_made { background: rgba(56, 189, 248, 0.15); color: var(--tx-sky-300); border: 1px solid rgba(56, 189, 248, 0.3); }
.badge-partner-stage-discovery_call { background: rgba(99, 102, 241, 0.15); color: var(--tx-indigo-100); border: 1px solid rgba(99, 102, 241, 0.3); }
.badge-partner-stage-commercial_terms { background: rgba(168, 85, 247, 0.15); color: var(--tx-purple-300); border: 1px solid rgba(168, 85, 247, 0.3); }
.badge-partner-stage-pilot { background: rgba(251, 191, 36, 0.15); color: var(--tx-yellow-300); border: 1px solid rgba(251, 191, 36, 0.3); }
.badge-partner-stage-live { background: rgba(34, 197, 94, 0.15); color: var(--tx-green-300); border: 1px solid rgba(34, 197, 94, 0.3); }
.badge-partner-stage-parked { background: rgba(251, 146, 60, 0.15); color: var(--tx-orange-300); border: 1px solid rgba(251, 146, 60, 0.3); }
.badge-partner-stage-lost { background: rgba(239, 68, 68, 0.15); color: var(--tx-red-300); border: 1px solid rgba(239, 68, 68, 0.3); }

.partner-quiet-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
  background: rgba(251, 146, 60, 0.15);
  color: var(--tx-orange-300);
  border: 1px solid rgba(251, 146, 60, 0.35);
}
.partner-overdue { color: var(--tx-red-300); font-weight: 600; }

.partner-details-block {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(45, 212, 191, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.partner-details-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 13px;
  color: var(--fg);
}
.partner-details-head .link-btn-accent { margin-left: auto; font-size: 12px; }

.partners-intro { margin: 0 0 14px; font-size: 13px; line-height: 1.5; }
.partners-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.partners-stat {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.partners-stat-value { font-size: 20px; font-weight: 700; color: var(--fg); }
.partners-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.partners-stat-warn { border-color: rgba(251, 146, 60, 0.45); }
.partners-stat-warn .partners-stat-value { color: var(--tx-orange-300); }

/* Eight stages as two rows of four (Identified to Commercial terms, then
   Pilot to Lost), so the whole pipeline is on screen with no sideways
   scrolling; two columns on a tablet, one on a phone. */
.partners-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 8px;
}
@media (max-width: 1100px) {
  .partners-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.partner-col {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
  min-height: 200px;
}
.partner-col h3 {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
}
.partner-col-count {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(var(--fg-rgb), 0.08);
  color: var(--muted);
}
.partner-col-parked, .partner-col-lost { background: rgba(var(--surf-rgb), 0.35); }
.partner-col-empty { margin: 0; text-align: center; opacity: 0.5; }

.partner-card {
  background: rgba(var(--surf-rgb), 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.partner-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.partner-card-quiet { border-style: dashed; }
.partner-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.partner-card-name { font-weight: 700; font-size: 14px; color: var(--fg); overflow-wrap: anywhere; }
.partner-card-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.partner-card-line { font-size: 12.5px; color: var(--fg); }
.partner-card-reason { color: var(--muted); font-style: italic; }
.partner-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  margin-top: 2px;
}
.partner-card-foot .link-btn-accent { font-size: 12px; }
.partner-contact-link { font-size: 13px; text-align: left; }

.inline-new-attribution-hint { font-size: 12px; color: var(--muted); line-height: 1.45; }

@media (max-width: 720px) {
  .partners-board { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Campaign Builder Wide Modal & Sequence Editor Styling
   ========================================================================== */
.campaign-builder-modal,
.card.modal-box.campaign-builder-modal {
  width: min(1560px, 97vw) !important;
  max-width: 1560px !important;
  max-height: 94vh !important;
  height: 94vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 24px !important;
  border: 1px solid rgba(30, 158, 140, 0.4) !important;
  box-shadow: 0 25px 80px rgba(var(--shadow-rgb), calc(0.9 * var(--shadow-k))), 0 0 0 1px rgba(var(--hi-rgb), 0.08) !important;
  overflow: hidden !important;
}

.campaign-builder-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.campaign-builder-body {
  overflow: hidden !important;
  padding: 14px 2px 4px 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.campaign-builder-split-container {
  display: grid;
  grid-template-columns: minmax(460px, 50%) minmax(480px, 50%);
  gap: 20px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.campaign-builder-split-container.preview-hidden,
.campaign-builder-split-container:has(#cmp-template-preview-panel.hidden) {
  grid-template-columns: 1fr !important;
}

.campaign-builder-config-col {
  overflow-y: auto;
  padding-right: 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campaign-builder-preview-col {
  overflow-y: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.campaign-builder-split-container.preview-hidden .campaign-builder-preview-col,
.campaign-builder-split-container:has(#cmp-template-preview-panel.hidden) .campaign-builder-preview-col {
  display: none !important;
}

.campaign-builder-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cmp-senders-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surf-raised-a);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  min-height: 44px;
  max-height: 120px;
  overflow-y: auto;
}

.cmp-step-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--surf-modal);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: border-color 0.15s ease;
}

.cmp-step-card:hover {
  border-color: rgba(30, 158, 140, 0.45);
}

.cmp-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-soft);
}

.cmp-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-text);
  background: rgba(30, 158, 140, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(30, 158, 140, 0.3);
}

.cmp-step-body-textarea {
  width: 100%;
  min-height: 140px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
}

/* Campaign Template Live Preview Panel */
.cmp-template-preview-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surf-raised-a);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cmp-preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surf-modal);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.cmp-preview-style-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cmp-preview-tab {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cmp-preview-tab:hover {
  color: var(--fg);
  border-color: rgba(30, 158, 140, 0.45);
  background: rgba(30, 158, 140, 0.08);
}

.cmp-preview-tab.active {
  background: var(--accent, #1e9e8c);
  color: #ffffff;
  border-color: var(--accent, #1e9e8c);
  box-shadow: 0 2px 8px rgba(30, 158, 140, 0.35);
}

.cmp-preview-meta-bar {
  padding: 8px 14px;
  background: rgba(var(--fg-rgb), 0.02);
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 12px;
}

.cmp-preview-meta-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmp-preview-meta-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex-shrink: 0;
}

.cmp-preview-meta-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmp-preview-viewport-wrap {
  background: var(--surf-base, #0d131f);
  padding: 12px 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 320px;
  border-bottom-left-radius: var(--radius-sm, 6px);
  border-bottom-right-radius: var(--radius-sm, 6px);
}

.cmp-preview-scaler {
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  transition: height 0.15s ease;
}

.cmp-preview-iframe {
  width: 600px;
  min-width: 600px;
  border: 1px solid rgba(18, 32, 58, 0.14);
  border-radius: 8px;
  background: #ffffff;
  display: block;
  transform-origin: top center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}

@media (max-width: 768px) {
  .cmp-preview-meta-bar {
    grid-template-columns: 1fr;
  }
  .cmp-preview-viewport-wrap {
    padding: 8px 4px;
  }
  .campaign-builder-modal,
  .card.modal-box.campaign-builder-modal,
  .campaign-audience-modal,
  .card.modal-box.campaign-audience-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 16px 14px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .campaign-builder-meta-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Phones: one column instead of the side-by-side split (whose fixed minimum widths pushed the preview off the
     right edge). The form's sections and the preview flow together so the preview sits straight under Template
     Style, above the Sequence Steps, and the page itself scrolls. */
  .campaign-builder-split-container,
  .campaign-builder-split-container.preview-hidden,
  .campaign-builder-split-container:has(#cmp-template-preview-panel.hidden) {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
  }
  .campaign-builder-config-col {
    display: contents;
  }
  .campaign-builder-preview-col {
    order: 1;
    overflow: visible;
  }
  #cmp-steps-section {
    order: 2;
  }
  .cmp-template-preview-panel {
    height: auto;
  }
  .cmp-preview-viewport-wrap {
    min-height: 0;
  }
  .campaign-builder-body {
    overflow-y: visible !important;
    max-height: none !important;
    padding-right: 0 !important;
  }
  .cmp-senders-picker {
    max-height: 180px;
  }
  .cmp-step-card {
    padding: 12px;
  }
  .cmp-step-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .cmp-step-body-textarea {
    font-size: 16px; /* Prevents auto-zoom on mobile focus */
  }
  #camp-view-detail .home-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #camp-view-detail .home-stat-box {
    padding: 10px 12px;
  }
  .campaign-audience-modal {
    max-height: none !important;
  }
  #aud-pane-filter > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Campaign Live Lookup Dropdown & Audience Staged Chips
   ========================================================================== */
.camp-lookup-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1200;
  background: var(--surf-modal);
  border: 1px solid rgba(30, 158, 140, 0.45);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}

.camp-lookup-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 6px 10px 4px;
}

.camp-lookup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  border: 1px solid transparent;
}

.camp-lookup-item:hover {
  background: rgba(30, 158, 140, 0.1);
  border-color: rgba(30, 158, 140, 0.28);
}

.camp-lookup-item.is-selected {
  background: rgba(30, 158, 140, 0.14);
  border-color: rgba(30, 158, 140, 0.45);
}

.camp-lookup-item.is-disabled {
  opacity: 0.55;
  cursor: default;
}

.aud-staged-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(30, 158, 140, 0.18);
  color: var(--fg);
  border: 1px solid rgba(30, 158, 140, 0.4);
}

.aud-staged-chip button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
}

.aud-staged-chip button:hover {
  color: var(--danger-text, #ef4444);
}

/* Campaign Template Style Editor */
.template-style-modal-card {
  padding: 22px 24px;
}

.style-section-box {
  background: var(--surf-inset);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.style-color-swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}

.style-color-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}

.style-color-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
}

.style-color-input {
  width: 82px;
  margin: 0 !important;
  padding: 5px 8px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px !important;
  text-transform: lowercase;
}

.style-preset-step-card {
  background: var(--surf-modal);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 10px;
}

.style-editor-tabs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 0;
  overflow: visible;
  flex-shrink: 0;
}

.style-editor-tabs-bar.preview-maximized {
  display: none !important;
}

.style-tab-btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.style-tab-btn.active {
  background: var(--accent);
  color: var(--surf-base, #ffffff);
  border-color: var(--accent);
  font-weight: 600;
}

.style-nav-link-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 6px;
  align-items: center;
}

.style-nav-link-row input {
  min-width: 0;
}

.style-editor-controls-col {
  overflow-x: hidden;
}

.style-editor-controls-col.preview-maximized {
  display: none !important;
}

.style-editor-split-container.preview-maximized {
  grid-template-columns: 1fr !important;
}

/* Fullscreen Preview Mode for Template Style Editor */
.style-preview-fs-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 6px;
  flex-shrink: 0;
}

.style-preview-fs-close-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: rgba(239, 68, 68, 0.7);
  color: #ffffff;
  transform: scale(1.08);
}

#template-style-modal.is-fullscreen-preview {
  padding: 0 !important;
  background: #0b0f17 !important;
  z-index: 100000 !important;
}

#template-style-modal.is-fullscreen-preview .template-style-modal-card {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100001 !important;
  background: #0b0f17 !important;
  display: flex !important;
  flex-direction: column !important;
}

#template-style-modal.is-fullscreen-preview .campaign-builder-header,
#template-style-modal.is-fullscreen-preview .style-editor-tabs-bar,
#template-style-modal.is-fullscreen-preview .style-editor-controls-col,
#template-style-modal.is-fullscreen-preview .modal-actions,
#template-style-modal.is-fullscreen-preview #style-error,
#template-style-modal.is-fullscreen-preview #style-success {
  display: none !important;
}

#template-style-modal.is-fullscreen-preview .style-editor-split-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  min-height: 0 !important;
}

#template-style-modal.is-fullscreen-preview .style-editor-preview-col {
  flex: 1 1 0% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0b0f17 !important;
  min-height: 0 !important;
}

#template-style-modal.is-fullscreen-preview .style-preview-top-bar {
  padding: 6px 14px;
  background: #111827 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  flex-shrink: 0;
  z-index: 10;
}

#template-style-modal.is-fullscreen-preview #style-preview-template-select {
  background: #1f2937 !important;
  color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

#template-style-modal.is-fullscreen-preview .style-preview-top-bar label {
  color: #9ca3af !important;
}

#template-style-modal.is-fullscreen-preview .style-preview-fs-close-btn {
  display: inline-flex !important;
}

#template-style-modal.is-fullscreen-preview #style-preview-canvas-wrap {
  flex: 1 1 0% !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 16px;
  background: #0b0f17 !important;
  overflow: hidden !important;
  align-items: flex-start !important;
}

/* Full preview is scaled to fit by adjustStylePreviewScale(): never scroll. */
#template-style-modal.is-fullscreen-preview,
#template-style-modal.is-fullscreen-preview .modal-content,
#template-style-modal.is-fullscreen-preview .style-editor-preview-col {
  overflow: hidden !important;
}

#template-style-modal.is-fullscreen-preview #style-preview-frame-container {
  flex-shrink: 0;
  min-height: 0 !important;
}

#template-style-modal.is-fullscreen-preview #style-live-preview-iframe {
  min-height: 0 !important;
}

@media (max-width: 600px) {
  #template-style-modal.is-fullscreen-preview .style-preview-top-bar {
    padding: 6px 10px;
  }
  #template-style-modal.is-fullscreen-preview .style-preview-title-wrap {
    display: none !important;
  }
  #template-style-modal.is-fullscreen-preview #style-preview-canvas-wrap {
    padding: 0 !important;
    background: #ffffff !important;
  }
  #template-style-modal.is-fullscreen-preview #style-preview-frame-container {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #template-style-modal.is-fullscreen-preview #style-live-preview-iframe {
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 0 !important;
  }
}

.style-device-btn.active {
  background: var(--accent, #1e9e8c) !important;
  color: #ffffff !important;
  border-color: var(--accent, #1e9e8c) !important;
}

.style-tag-insert-btn {
  font-size: 11px;
  padding: 2px 7px;
  background: rgba(30, 158, 140, 0.08);
  border-color: rgba(30, 158, 140, 0.25);
  color: var(--tx-teal-300, #2dd4bf);
  cursor: pointer;
  border-radius: 4px;
}

.style-tag-insert-btn:hover {
  background: rgba(30, 158, 140, 0.2);
  color: #ffffff;
}

.cmp-step-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--surf-inset);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-bottom: 8px;
}

.cmp-step-toolbar .btn {
  font-size: 11px;
  padding: 2px 7px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .style-editor-split-container {
    grid-template-columns: 1fr !important;
  }
  .style-editor-preview-col {
    min-height: 420px;
  }
}

/* Instant Record Jump Target Highlight */
.record-jump-highlight {
  position: relative;
  outline: 2px solid var(--accent, #1e9e8c) !important;
  outline-offset: 2px !important;
  animation: recordJumpPulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
}

@keyframes recordJumpPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.75), 0 0 20px rgba(45, 212, 191, 0.5);
    border-color: #2dd4bf !important;
  }
  30% {
    box-shadow: 0 0 0 6px rgba(45, 212, 191, 0.3), 0 0 25px rgba(45, 212, 191, 0.4);
    border-color: #2dd4bf !important;
  }
  100% {
    outline-color: transparent !important;
    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0), 0 0 0 transparent;
  }
}

/* Rich email signature editor (looks like the pasted Outlook signature) */
.usig-editor {
  width: 100%;
  box-sizing: border-box;
  min-height: 220px;
  max-height: 380px;
  overflow: auto;
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px;
  padding: 12px;
  font-family: Calibri, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
}
.usig-editor:focus {
  border-color: #1e9e8c !important;
  box-shadow: 0 0 0 2px rgba(30, 158, 140, 0.25) !important;
}
.usig-editor:empty::before {
  content: attr(data-placeholder);
  color: #64748b !important;
  pointer-events: none;
}
.usig-editor img {
  max-width: 100%;
  height: auto;
}
.usig-editor a {
  color: #1e9e8c;
}
html[data-theme="dark"] .usig-editor {
  background: #ffffff !important;
  color: #1e293b !important;
}



/* ----------------------- Full-screen windows --------------------------------
   Every pop-up window fills the screen. Left small on purpose: the Yes/No and
   alert pop-ups (.confirm-overlay), the two Disapprove dialogs and the video
   meeting window (which has its own full-window switch). The two template
   editors were already ~full screen, so they keep their own padding. Content
   is centred in a readable column (the centring padding is 50% minus 600px,
   with a 28px floor) instead of stretching a form across a wide monitor. */
.modal-overlay:not(.confirm-overlay):not(#disapprove-ai-modal):not(#disapprove-contact-ai-modal):not(#meeting-modal) {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal-overlay:not(.confirm-overlay):not(#disapprove-ai-modal):not(#disapprove-contact-ai-modal):not(#meeting-modal) > * {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  padding-left: max(28px, calc(50% - 600px));
  padding-right: max(28px, calc(50% - 600px));
}

.modal-overlay:is(#template-style-modal, #custom-template-modal) > * {
  padding-left: 24px;
  padding-right: 24px;
}

#recommended-actions-modal #ram-actions-scroll,
#recommended-actions-modal #ram-notif-list {
  max-height: calc(100vh - 250px) !important;
}

/* Phones: the page-mode rules above already turn an open window into the page
   itself, so let it grow with its content instead of pinning it to 100vh. */
@media (max-width: 768px) {
  .modal-overlay:not(.confirm-overlay):not(#disapprove-ai-modal):not(#disapprove-contact-ai-modal):not(#meeting-modal) > * {
    height: auto !important;
    min-height: 100dvh;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* An empty error/success line still reserved ~1.2em plus its margin, which
   left a blank band above the buttons of a full-screen window. */
.modal-overlay:not(.confirm-overlay) .error:empty,
.modal-overlay:not(.confirm-overlay) .success:empty {
  display: none;
}

/* A deal's scheduled meetings on a phone: title on one line, status and date beside each other, and the
   three buttons on a single row (Forward shrinks to its icon) so each meeting takes about half the height. */
@media (max-width: 600px) {
  .deal-meeting-row {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .deal-meeting-row .dmr-main {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    flex-basis: 100% !important;
  }
  .deal-meeting-row .dmr-head {
    display: contents !important;
  }
  .deal-meeting-row .dmr-title {
    grid-column: 1 / -1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .deal-meeting-row .dmr-meta {
    grid-column: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .deal-meeting-row .dmr-actions {
    flex-wrap: nowrap !important;
    flex-basis: 100% !important;
    width: 100%;
    gap: 6px !important;
  }
  .deal-meeting-row .dmr-actions .js-join-link {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .deal-meeting-row .dmr-actions .btn {
    padding-left: 10px;
    padding-right: 10px;
  }
  .deal-meeting-row .dmr-fwd-label {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------------
   Mail page (frontend/mail.js): folders | message list | reading pane. On a phone it is one pane
   at a time: the list, and the message once one is opened (.mail-layout.reading). */
.mail-header-card {
  margin-bottom: 12px;
}
.mail-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}
.mail-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.mail-back-link {
  background: rgba(var(--hi-rgb), 0.05) !important;
  border: 1px solid var(--line-soft) !important;
  color: var(--accent-text) !important;
  cursor: pointer;
  padding: 5px 12px !important;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.2;
}
.mail-back-link:hover {
  background: rgba(var(--hi-rgb), 0.1) !important;
  color: var(--fg) !important;
}
.mail-head-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
}
.mail-mailbox-select {
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  max-width: 320px;
}
.mail-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.mail-info-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  background: transparent;
  transition: all 0.15s ease;
}
.mail-info-toggle:hover,
.mail-info-toggle.active {
  color: var(--accent-text);
  border-color: var(--accent-text);
  background: rgba(var(--hi-rgb), 0.05);
}
.mail-info-callout {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(var(--surf-rgb), 0.45);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.mail-info-callout p {
  margin: 0;
}
.mail-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.mail-bar input,
.mail-bar select,
.mail-bulk select,
.mail-actions select {
  background: rgba(var(--surf-rgb), 0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 10px;
}
.mail-bulk select, .mail-actions select { padding: 3px 8px; font-size: 12px; }
/* .btn-xs has no style of its own, so the Mail page's small buttons are sized here. */
.mail-bulk .btn, .mail-actions .btn, .mail-pager .btn, .mail-attachments .btn { padding: 4px 10px; font-size: 12px; }
.mail-bar input[type="search"] { flex: 1 1 200px; max-width: 420px; min-width: 140px; }
.mail-folder-select { display: none; }

@media (max-width: 960px) {
  .mail-head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .mail-bar {
    justify-content: flex-start;
  }
  .mail-bar input[type="search"] {
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .mail-head-left {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .mail-mailbox-select {
    width: 100%;
    max-width: 100%;
  }
}
.mail-layout {
  display: grid;
  grid-template-columns: var(--mail-folders-col, 190px) var(--mail-split-1, 12px) var(--mail-list-col, minmax(260px, 380px)) var(--mail-split-2, 12px) var(--mail-reader-col, minmax(260px, 1fr));
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
}
.mail-folders-pane,
.mail-list-pane,
.mail-reader-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mail-folders-pane {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 6px;
  background: rgba(var(--surf-rgb), 0.25);
}
.mail-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft, rgba(var(--hi-rgb), 0.06));
  background: rgba(var(--hi-rgb), 0.025);
  flex-shrink: 0;
}
.mail-folders-pane .mail-pane-head {
  padding: 4px 6px 6px;
  margin-bottom: 4px;
  background: transparent;
}
.mail-pane-head-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-pane-toggle {
  width: 24px;
  height: 24px;
  min-inline-size: 24px;
  min-block-size: 24px;
  font-size: 12px;
  flex-shrink: 0;
}
.mail-folders-pane.is-minimized,
.mail-list-pane.is-minimized,
.mail-reader-pane.is-minimized {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  padding: 6px 4px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(var(--surf-rgb), 0.35);
  align-items: center;
  cursor: pointer;
  overflow: hidden;
}
.mail-folders-pane.is-minimized .mail-pane-head,
.mail-list-pane.is-minimized .mail-pane-head,
.mail-reader-pane.is-minimized .mail-pane-head {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  margin: 0;
  border-bottom: none;
  background: transparent;
  height: 100%;
}
.mail-folders-pane.is-minimized .mail-pane-head-label,
.mail-list-pane.is-minimized .mail-pane-head-label,
.mail-reader-pane.is-minimized .mail-pane-head-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.mail-folders-pane.is-minimized .mail-folders,
.mail-list-pane.is-minimized #mail-bulk,
.mail-list-pane.is-minimized .mail-list,
.mail-list-pane.is-minimized .mail-pager,
.mail-reader-pane.is-minimized .mail-reader {
  display: none !important;
}
.mail-splitter-col.is-disabled {
  pointer-events: none;
  cursor: default;
}
.mail-splitter-col.is-disabled .priority-splitter-grip {
  opacity: 0;
}
.mail-folders { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.mail-folder {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; border-radius: var(--radius-xs); padding: 8px 10px; color: var(--fg);
  font: inherit; text-align: left; cursor: pointer;
}
.mail-folder-row { display: flex; align-items: center; gap: 2px; }
.mail-folder-row .mail-folder { flex: 1; min-width: 0; }
.mail-folder-tool { background: none; border: 0; padding: 4px 5px; border-radius: var(--radius-xs); cursor: pointer; font-size: 12px; opacity: 0.55; }
.mail-folder-tool:hover, .mail-folder-tool:focus-visible { opacity: 1; background: rgba(var(--hi-rgb), 0.08); }
.mail-folder:hover { background: rgba(var(--hi-rgb), 0.06); }
.mail-folder.active { background: rgba(43, 184, 163, 0.16); font-weight: 700; }
.mail-count {
  background: var(--accent-text); color: #0a1220; border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700;
}
.mail-list-pane { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; min-width: 0; }
.mail-list { max-height: 68vh; overflow-y: auto; flex: 1 1 auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.mail-list.mail-busy { opacity: 0.6; }
.mail-row {
  display: flex; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); cursor: pointer; align-items: flex-start;
}
.mail-row:hover { background: rgba(var(--hi-rgb), 0.05); }
.mail-row.active { background: rgba(43, 184, 163, 0.12); }
.mail-row.unread .mail-from, .mail-row.unread .mail-subject { font-weight: 700; }
.mail-row.unread { border-left: 3px solid var(--accent-text); padding-left: 7px; }
.mail-pick { margin-top: 3px; flex: none; accent-color: var(--accent-text); }
.mail-row-main { min-width: 0; flex: 1; }
.mail-row-top { display: flex; justify-content: space-between; gap: 8px; }
.mail-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-when { flex: none; color: var(--muted); font-size: 12px; }
.mail-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.mail-bulk { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); background: rgba(var(--hi-rgb), 0.05); }
.mail-bulk select, .mail-actions select { max-width: 150px; }
.mail-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 8px 10px; font-size: 12px; }
.mail-empty-note { padding: 18px 12px; }
.mail-error { color: #ff9d9d; padding: 12px; }
.mail-reader-pane {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 0;
}
.mail-reader { padding: 14px; min-width: 0; min-height: 200px; flex: 1 1 auto; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.mail-layout.has-custom-height .mail-folders-pane:not(.is-minimized),
.mail-layout.has-custom-height .mail-list-pane:not(.is-minimized),
.mail-layout.has-custom-height .mail-reader-pane:not(.is-minimized) {
  height: var(--mail-pane-height, 560px);
  max-height: var(--mail-pane-height, 560px);
}
.mail-layout.has-custom-height .mail-list {
  max-height: none;
  min-height: 0;
}
.mail-layout.has-custom-height .mail-reader {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mail-layout.has-custom-height .mail-frame {
  flex: 1 1 auto;
  height: auto;
  min-height: 220px;
}
.mail-back { display: none; }
.mail-title { margin: 0 0 8px; font-size: 18px; overflow-wrap: anywhere; }
.mail-meta { font-size: 13px; color: var(--muted); display: grid; gap: 2px; margin-bottom: 10px; overflow-wrap: anywhere; }
.mail-meta strong { color: var(--fg); display: inline-block; min-width: 42px; }
.mail-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mail-images-bar { font-size: 12.5px; margin-bottom: 8px; padding: 6px 10px; border-radius: var(--radius-xs); background: rgba(var(--hi-rgb), 0.07); }
.mail-frame { width: 100%; height: min(62vh, 760px); border: 1px solid var(--line-soft); border-radius: var(--radius-xs); background: #fff; display: block; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 14px; margin: 0; padding: 4px 2px; }
.mail-attachments { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
/* Writing a message: it takes the reading pane, so the list stays where it was. */
.mail-compose { display: grid; gap: 8px; }
.mail-compose-from { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.mail-compose-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; }
.mail-compose-row > span { color: var(--muted); }
.mail-compose input[type="text"], .mail-compose select, .mail-compose textarea {
  width: 100%; box-sizing: border-box; background: rgba(var(--surf-rgb), 0.6); border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs); color: var(--fg); font-family: var(--font-body); font-size: 14px; padding: 7px 10px;
}
.mail-compose textarea { min-height: 280px; resize: vertical; line-height: 1.45; }
.mail-compose-links { display: flex; gap: 12px; justify-content: flex-end; font-size: 12px; }
.mail-compose-files { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.mail-file-chip {
  display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 2px 4px 2px 10px; font-size: 12px; max-width: 100%; overflow-wrap: anywhere;
}
.mail-file-chip button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 4px; }
.mail-compose-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.mail-compose-actions .btn { padding: 6px 14px; font-size: 13px; }
.mail-compose-note { font-size: 12px; color: var(--muted); }
.mail-log-scroll { overflow-x: auto; }
.mail-log-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mail-log-table th, .mail-log-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; overflow-wrap: anywhere; }
.mail-log-table th { color: var(--muted); font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) {
  .mail-compose-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mail-compose textarea { min-height: 220px; }
}
.mail-view-menu { right: auto; left: 0; min-width: 220px; max-height: 80vh; overflow-y: auto; }
.mail-view-head { padding: 8px 12px 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mail-view-tick { display: inline-block; width: 14px; color: var(--accent-text); font-weight: 700; }
.mail-suggest {
  position: absolute; left: 72px; right: 0; top: calc(100% + 2px); z-index: 30; display: flex; flex-direction: column;
  background: var(--surf-pop-b); border: 1px solid var(--line-soft); border-radius: var(--radius-xs);
  box-shadow: 0 12px 30px rgba(var(--shadow-rgb), calc(0.4 * var(--shadow-k))); overflow: hidden;
}
.mail-suggest-item { background: none; border: 0; padding: 7px 10px; text-align: left; color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }
.mail-suggest-item:hover, .mail-suggest-item.active { background: rgba(30, 158, 140, 0.16); }
@media (max-width: 760px) { .mail-suggest { left: 0; } }
.mail-name-input {
  width: 100%; box-sizing: border-box; margin: 6px 0 12px; background: rgba(var(--surf-rgb), 0.6); border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs); color: var(--fg); font-family: var(--font-body); font-size: 14px; padding: 8px 10px;
}
/* Full view (double-click a message): the reader takes the whole width, with a way back to the list. */
.mail-layout.full { grid-template-columns: minmax(0, 1fr) !important; }
.mail-layout.full .mail-folders-pane,
.mail-layout.full .mail-list-pane,
.mail-layout.full .mail-splitter-col { display: none !important; }
.mail-layout.full .mail-reader-pane { display: flex !important; grid-column: 1 / -1; width: auto; max-width: none; }
.mail-layout.full .mail-reader { display: block !important; }
.mail-layout.full .mail-back { display: inline-block; margin-bottom: 8px; }
@media (max-width: 1100px) {
  .mail-layout { grid-template-columns: 170px minmax(0, 1fr) !important; gap: 12px; }
  .mail-splitter-col { display: none !important; }
  .mail-reader-pane { grid-column: 1 / -1; }
  .mail-layout.reading .mail-list-pane { display: none !important; }
}
@media (max-width: 760px) {
  .mail-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
  .mail-folders-pane,
  .mail-splitter-col,
  .mail-splitter-row,
  .mail-pane-head { display: none !important; }
  .mail-folder-select { display: block; }
  .mail-reader-pane { display: none; }
  .mail-reader { padding: 10px; }
  .mail-layout.reading .mail-reader-pane { display: flex !important; }
  .mail-layout.reading .mail-list-pane { display: none !important; }
  .mail-back { display: inline-block; margin-bottom: 8px; }
  .mail-list { max-height: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .mail-folder-select { display: none; }
}

/* The registers panel on a company card (Companies House, Gambling Commission, registered abroad). */
.registry-pick .rp-section { border-top: 1px solid var(--line-soft); padding: 8px 0; margin-top: 8px; }
.registry-pick .rp-title { display: block; margin-bottom: 4px; }
.registry-pick .rp-item { margin: 6px 0; }
.registry-pick .rp-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.registry-pick .rp-input {
  flex: 1 1 200px; min-width: 0; box-sizing: border-box; background: rgba(var(--surf-rgb), 0.6); border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs); color: var(--fg); font-family: var(--font-body); font-size: 13px; padding: 6px 9px;
}
.registry-pick .rp-country { flex: 0 1 160px; }

/* Compact companies list: only Active Deal, Priority, open deals, deals and contacts show on the row;
   everything else (AI Intel, type, segment, industry, address, phone, website) is in the opened card. */
#companies-list.compact-list .badge-ai-indicator,
#companies-list.compact-list .expandable-meta > :not(.pill-priority):not(.pill-count):not(.pill-active-deal) { display: none; }

/* Tickets page (tickets.js) */
.tk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.tk-bar input, .tk-bar select, .tk-controls select, .tk-note textarea, .tk-bulk-select, .tk-reply-input, .tk-reply-select, .tk-composer-textarea {
  background: rgba(var(--surf-rgb), 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-xs);
  color: var(--fg); font-family: var(--font-body); font-size: 13px; padding: 7px 10px;
}
.tk-bar input[type="search"] { flex: 1 1 200px; min-width: 0; }
.tk-select-all-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-xs); border: 1px solid var(--line-soft); background: rgba(var(--surf-rgb), 0.35); user-select: none; }
.tk-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin: 0 0 10px; background: rgba(30, 158, 140, 0.12); border: 1px solid rgba(30, 158, 140, 0.45); border-radius: var(--radius-xs); }
.tk-bulk-count { font-size: 13px; font-weight: 600; color: var(--accent-text, #1e9e8c); margin-right: 4px; }
.tk-list { display: flex; flex-direction: column; gap: 6px; }
.tk-row-wrap { display: flex; align-items: stretch; gap: 8px; background: var(--surf-pop-b); border: 1px solid var(--line-soft); border-radius: var(--radius-xs); padding: 10px 12px; transition: border-color 0.15s ease, background 0.15s ease; }
.tk-row-wrap:hover { border-color: rgba(30, 158, 140, 0.6); }
.tk-row-selected { border-color: rgba(30, 158, 140, 0.75); background: rgba(30, 158, 140, 0.08); }
.tk-row-check { display: flex; align-items: flex-start; padding-top: 3px; cursor: pointer; }
.tk-row { display: flex; flex: 1; justify-content: space-between; gap: 12px; text-align: left; padding: 0; background: transparent; border: none; color: var(--fg); font: inherit; cursor: pointer; min-width: 0; }
.tk-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tk-row-title-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tk-row-id { font-family: var(--font-mono, monospace); font-size: 12px; flex-shrink: 0; }
.tk-row-main strong, .tk-row-from, .tk-row-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row-from, .tk-row-snippet { font-size: 13px; }
.tk-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; flex: none; }
.tk-row-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.tk-row-actions { display: flex; align-items: center; gap: 6px; margin-left: 4px; }
.tk-company-pill { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 11px; background: rgba(var(--surf-rgb), 0.7); border: 1px solid var(--line-soft); margin-left: 4px; }
.tk-empty { padding: 16px 0; }
.tk-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--line-soft); text-transform: capitalize; }
.tk-badge.tk-open { background: rgba(30, 158, 140, 0.16); color: var(--accent-text, #2dd4bf); border-color: rgba(30, 158, 140, 0.4); }
.tk-badge.tk-waiting { background: rgba(200, 150, 40, 0.18); color: #fbbf24; border-color: rgba(200, 150, 40, 0.4); }
.tk-badge.tk-solved { opacity: 0.7; }
.tk-prio-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--line-soft); }
.tk-prio-low { opacity: 0.75; }
.tk-prio-normal { background: rgba(var(--surf-rgb), 0.5); }
.tk-prio-high { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border-color: rgba(245, 158, 11, 0.4); }
.tk-prio-urgent { background: rgba(239, 68, 68, 0.18); color: #f87171; border-color: rgba(239, 68, 68, 0.45); }
.tk-cat-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: rgba(99, 102, 241, 0.12); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.3); }
.tk-jira-pill { background: rgba(0, 82, 204, 0.16); color: #60a5fa; border: 1px solid rgba(0, 82, 204, 0.4); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tk-jira-pill:hover { background: rgba(0, 82, 204, 0.28); text-decoration: underline; }
.tk-jira-badge-link { color: #60a5fa !important; border-color: rgba(96, 165, 250, 0.4) !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.tk-jira-badge-link:hover { background: rgba(96, 165, 250, 0.12) !important; text-decoration: none !important; }
.tk-wait-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: rgba(var(--surf-rgb), 0.6); border: 1px solid var(--line-soft); }
.tk-wait-warn { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.4); }
.tk-wait-overdue { background: rgba(239, 68, 68, 0.18); color: #f87171; border-color: rgba(239, 68, 68, 0.45); font-weight: 600; }
.tk-draft { font-size: 12px; color: var(--accent, #1e9e8c); }
.tk-trash-banner { padding: 10px 12px; margin-bottom: 10px; border-radius: var(--radius-xs); background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); font-size: 13px; }
.tk-detail-topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tk-detail-top-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tk-detail-grid { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.tk-detail-main { width: 100%; min-width: 0; }
.tk-detail-sidebar { position: sticky; top: 14px; }
.tk-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.tk-head h3 { margin: 0; overflow-wrap: anywhere; font-size: 18px; }
.tk-requester-line { margin: 2px 0 10px; font-size: 13px; }
.tk-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 14px; padding: 10px 12px; background: var(--surf-pop-b); border: 1px solid var(--line-soft); border-radius: var(--radius-xs); }
.tk-controls label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.tk-thread { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.tk-msg, .tk-suggest { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-xs); background: var(--surf-pop-b); }
.tk-msg-out { border-left: 3px solid rgba(30, 158, 140, 0.85); }
.tk-msg-note { border-style: dashed; background: rgba(200, 150, 40, 0.1); }
.tk-msg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.tk-suggest { border-style: dashed; margin: 10px 0; }
.tk-suggest-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-suggest-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
.tk-msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.tk-att-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; font-size: 12px; border-radius: var(--radius-xs); border: 1px solid var(--line-soft); background: rgba(var(--surf-rgb), 0.7); color: var(--fg); cursor: pointer; }
.tk-att-btn:hover { border-color: rgba(30, 158, 140, 0.65); }
.tk-composer-card { border: 1px solid var(--line-soft); border-radius: var(--radius-xs); background: var(--surf-pop-b); padding: 14px 16px; margin-top: 14px; width: 100%; box-sizing: border-box; }
.tk-composer-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); padding-bottom: 10px; margin-bottom: 12px; }
.tk-comp-tab { background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs); padding: 6px 13px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.tk-comp-tab:hover { color: var(--fg); }
.tk-comp-tab.active { background: rgba(30, 158, 140, 0.16); border-color: rgba(30, 158, 140, 0.45); color: var(--accent-text, #2dd4bf); }
.tk-composer-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tk-reply-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tk-reply-field { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; }
.tk-reply-field label, .tk-reply-field span { color: var(--muted); font-weight: 600; font-size: 12px; }
.tk-reply-field input, .tk-reply-field select {
  width: 100%; box-sizing: border-box; background: rgba(var(--surf-rgb), 0.6); border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs); color: var(--fg); font-family: var(--font-body); font-size: 13.5px; padding: 7px 10px;
}
.tk-reply-field input:focus, .tk-reply-field select:focus { outline: none; border-color: rgba(30, 158, 140, 0.7); }
.tk-reply-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 10px; }
.tk-reply-toolbar select { background: rgba(var(--surf-rgb), 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-xs); color: var(--fg); font-size: 12.5px; padding: 5px 8px; }
.tk-composer-textarea, #tk-reply-body, #tk-note-text {
  width: 100% !important; box-sizing: border-box !important; display: block;
  min-height: 280px; resize: vertical; line-height: 1.55;
  background: rgba(var(--surf-rgb), 0.65) !important; border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius-xs); color: var(--fg) !important;
  font-family: var(--font-body); font-size: 14px; padding: 12px 14px;
  margin: 10px 0;
}
.tk-composer-textarea:focus, #tk-reply-body:focus, #tk-note-text:focus {
  outline: none; border-color: rgba(30, 158, 140, 0.85) !important; box-shadow: 0 0 0 2px rgba(30, 158, 140, 0.2);
}
.tk-note-textarea, #tk-note-text { min-height: 160px; }
.tk-reply-file-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tk-att-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tk-att-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 12px; background: rgba(30, 158, 140, 0.14); border: 1px solid rgba(30, 158, 140, 0.4); }
.tk-att-remove { background: transparent; border: none; color: var(--fg); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.tk-reply-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.tk-reply-send-btns, .tk-reply-send-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.tk-file-btn { cursor: pointer; }
.tk-context-card { border: 1px solid var(--line-soft); border-radius: var(--radius-xs); background: var(--surf-pop-b); padding: 10px 14px; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.tk-context-card h4 { margin: 0; font-size: 11.5px; }
.tk-ctx-header { display: flex; justify-content: space-between; align-items: center; }
.tk-ctx-header h4 { margin: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.tk-ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; align-items: stretch; }
.tk-ctx-block { display: flex; flex-direction: column; gap: 4px; padding: 8px 11px; background: rgba(var(--surf-rgb), 0.4); border: 1px solid var(--line-soft); border-radius: var(--radius-xs); font-size: 12.5px; }
.tk-ctx-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 2px; }
.tk-ctx-title { font-weight: 600; font-size: 13px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ctx-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.tk-ctx-link { background: none; border: none; padding: 0; color: var(--accent-text, #2dd4bf); font-weight: 600; font-size: 13px; text-align: left; cursor: pointer; text-decoration: underline dotted; }
.tk-ctx-list { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; max-height: 120px; overflow-y: auto; }
.tk-ctx-item { display: flex; align-items: center; gap: 6px; justify-content: space-between; width: 100%; text-align: left; padding: 4px 7px; border-radius: var(--radius-xs); border: 1px solid var(--line-soft); background: rgba(var(--surf-rgb), 0.5); color: var(--fg); font-size: 12px; cursor: pointer; transition: border-color 0.15s ease; }
.tk-ctx-item:hover { border-color: rgba(30, 158, 140, 0.65); }
.tk-ctx-item-subj { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ctx-ticket-item { display: flex; align-items: center; gap: 6px; justify-content: space-between; width: 100%; text-align: left; padding: 5px 7px; border-radius: var(--radius-xs); border: 1px solid var(--line-soft); background: rgba(var(--surf-rgb), 0.45); color: var(--fg); font-size: 12px; cursor: pointer; }
.tk-ctx-ticket-item:hover { border-color: rgba(30, 158, 140, 0.55); }
.tk-ctx-ticket-subj { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ctx-deal-item { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 0; font-size: 12px; }
.tk-canned-list, .tk-merge-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; margin: 8px 0; }
.tk-canned-row { padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-xs); background: rgba(var(--surf-rgb), 0.45); }
.tk-canned-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tk-canned-row-btns { display: flex; gap: 6px; }
.tk-canned-row-body { font-size: 12px; margin-top: 4px; white-space: pre-wrap; max-height: 60px; overflow: hidden; }
.tk-merge-pick { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-xs); background: rgba(var(--surf-rgb), 0.45); color: var(--fg); cursor: pointer; }
.tk-merge-pick:hover { border-color: rgba(30, 158, 140, 0.65); }
.tk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.tk-note { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 14px; }
.tk-note textarea { width: 100%; }
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(30, 158, 140, 0.22); color: var(--accent-text, #2dd4bf); border: 1px solid rgba(30, 158, 140, 0.45); }
.badge-role-support { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(56, 189, 248, 0.14); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.35); }
@media (max-width: 920px) { .tk-detail-grid { grid-template-columns: 1fr; } .tk-detail-sidebar { position: static; } .tk-ctx-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .tk-row { flex-direction: column; } .tk-row-side { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.tk-actions .btn, .tk-note .btn { padding: 6px 12px; font-size: 13px; }

/* Support-only role (.is-support-only on <body>): hides sales/pipeline navigation,
   deal/partner metadata, and write/enrichment actions on Companies and Contacts. */
body.is-support-only #view-partners-btn,
body.is-support-only #view-leads-btn,
body.is-support-only #view-dashboard-btn,
body.is-support-only #view-campaigns-btn,
body.is-support-only #view-calendar-btn,
body.is-support-only #view-mail-btn,
body.is-support-only #toolbar-new-btn,
body.is-support-only #toolbar-more-btn,
body.is-support-only #rec-actions-nav-btn,
body.is-support-only #notif-nav-btn,
body.is-support-only #mailbox-menu-btn,
body.is-support-only #companies-back-btn,
body.is-support-only #contacts-back-btn,
body.is-support-only #dir-partners-tab-1,
body.is-support-only #dir-partners-tab-2,
body.is-support-only #add-company-from-list-btn,
body.is-support-only #find-duplicate-companies-btn,
body.is-support-only #companies-trash-toggle-btn,
body.is-support-only #companies-partner-filter,
body.is-support-only #add-contact-from-list-btn,
body.is-support-only #find-duplicate-contacts-btn,
body.is-support-only #contacts-trash-toggle-btn,
body.is-support-only #contacts-deal-filter,
body.is-support-only .open-prospecting-btn,
body.is-support-only #companies-list .expandable-actions-bar,
body.is-support-only #contacts-list .expandable-actions-bar,
body.is-support-only #companies-list [data-action="view-deals"],
body.is-support-only #contacts-list [data-action="view-deals"],
body.is-support-only #companies-list .linked-section[data-section="deals"],
body.is-support-only #companies-list .linked-section[data-section="activity"],
body.is-support-only #companies-list .linked-section[data-section="tasks"],
body.is-support-only #companies-list [data-action="quick-add-contact"],
body.is-support-only #contacts-list .linked-section[data-section="deals"],
body.is-support-only #contacts-list .linked-section[data-section="meetings"],
body.is-support-only #contacts-list .linked-section[data-section="tasks"],
body.is-support-only #contacts-list [data-action="toggle-quick-linkedin"],
body.is-support-only #contacts-list .contact-ai-actions,
body.is-support-only #companies-list .btn-disapprove-ai,
body.is-support-only .record-history-section {
  display: none !important;
}

/* Prospecting page */
.pr-group { margin: 18px 0 8px; font-size: 14px; letter-spacing: 0.02em; opacity: 0.85; }
.pr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pr-card { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--surf-pop-b); border: 1px solid var(--line-soft); border-radius: var(--radius-xs); }
.pr-card-text p { margin: 4px 0 0; font-size: 13px; }
.pr-card-action { display: flex; }

/* Colour dots on the campaign preview's Template Style tabs */
.cmp-style-swatches { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: -1px; }
.cmp-style-swatches i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border-row); display: inline-block; }

/* ---- Tasks (tasks.js, audit F2): the box on a deal, lead, company or contact, and the Tasks tab ---- */
.task-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.task-panel-head h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--fg); display: flex; align-items: center; gap: 8px; }
#deal-tasks-card .task-panel-head h4 { font-size: 16px; }
.task-list { display: flex; flex-direction: column; gap: 6px; }
.task-empty { margin: 4px 0; font-size: 13px; }
.task-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: rgba(var(--fg-rgb), 0.02); }
.task-row.task-done .task-title { text-decoration: line-through; color: var(--muted); }
/* Specific enough to beat `.modal-box input` (100% wide), since the Tasks tab sits in the Today's Actions window. */
.task-row input.task-check { margin: 3px 0 0; padding: 0; width: 16px; max-width: 16px; height: 16px; flex: none; accent-color: var(--accent); cursor: pointer; }
.task-main { flex: 1 1 auto; min-width: 0; }
.task-title { color: var(--fg); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.task-notes { font-size: 12.5px; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; }
.task-due { color: var(--muted); font-weight: 600; }
.task-due.task-today { color: var(--tx-amber-400); }
.task-due.task-overdue { color: var(--tx-red-400); }
.task-actions { display: flex; gap: 2px; flex: none; }
.task-icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.task-icon-btn:hover { color: var(--fg); background: rgba(var(--fg-rgb), 0.06); }
.task-link { background: none; border: none; padding: 0; color: var(--accent-text); font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
.task-link:hover { text-decoration: underline; }
.task-toggle-done { margin-top: 4px; }
.task-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: rgba(var(--fg-rgb), 0.03); }
.task-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.task-form-row label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.task-form input[type="text"], .task-form textarea { width: 100%; box-sizing: border-box; margin: 0; }
.task-form .task-form-row input, .task-form .task-form-row select { width: auto; max-width: 100%; margin: 0; padding: 6px 8px; }
.task-form-buttons { justify-content: flex-end; }
.task-tab-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.task-seg { display: flex; gap: 6px; }
.action-item-footer .action-task-done { padding: 4px 10px; font-size: 12px; margin-left: auto; margin-right: 8px; }
@media (max-width: 600px) {
  .task-form-row label { flex: 1 1 140px; }
  .task-tab-bar { justify-content: flex-start; }
}

/* ---- Bulk actions (bulk.js, audit F5): the tick boxes and the bar above Deals (list view), Leads and Contacts ---- */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(var(--fg-rgb), 0.03); font-size: 13px; }
.bulk-bar.bulk-bar-active { position: sticky; top: 0; z-index: 5; border-color: var(--accent); background: var(--surf-row); }
.bulk-all { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; user-select: none; }
.bulk-count { color: var(--fg); font-weight: 600; }
.bulk-bar:not(.bulk-bar-active) .bulk-count { color: var(--muted); font-weight: 400; }
.bulk-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bulk-actions .btn { padding: 5px 12px; font-size: 12.5px; }
.bulk-bar input[type="checkbox"], input.bulk-check { width: 17px; height: 17px; margin: 0; padding: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.lead-check-host > input.bulk-check,
.lead-top > input.bulk-check { margin: 0; align-self: flex-start; }
.expandable-summary > input.bulk-check { margin-right: 10px; }
.deals-table .bulk-cell { width: 34px; text-align: center; }
.bulk-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Select mode on a contact's or deal's Meetings card (calendar.js attachMeetingSelectMode). */
.meeting-select-toggle { padding: 4px 10px; font-size: 12px; }
.deal-meetings-card .meeting-select-toggle { margin-left: auto; }
.mini-card-title-row > input.bulk-check, .dmr-head > input.bulk-check { margin-right: 2px; }
.mini-card-title-row > input.bulk-check + .mini-card-name { flex: 1; min-width: 0; }   /* keep the title beside its box, not centred */
.bulk-pick-box { max-width: 420px; }
.bulk-pick-title { margin: 0 0 10px; font-size: 16px; color: var(--fg); }
.bulk-pick-box .bulk-pick-select { width: 100%; margin: 6px 0 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .bulk-bar { gap: 6px 8px; }
  .bulk-actions { width: 100%; }
}

/* ---- The Dashboard's period picker (audit F3) ---- */
.dash-range-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -6px 0 16px; }
.dash-range-label { font-size: 13px; font-weight: 600; color: var(--fg); }
.dash-range-bar select, .dash-range-bar input[type="date"] { width: auto; margin: 0; padding: 6px 10px; }
.dash-range-custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dash-range-custom.hidden { display: none; }
.dash-range-note { flex: 1 1 280px; }

/* ---- Client Assessments, KYC Due Diligence & Security Questionnaires (assessments.js) ---- */
.as-summary-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.as-stat-card {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.as-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.as-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.1;
}
.as-stat-sub {
  font-size: 11.5px;
  color: var(--muted);
}

.as-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surf-row);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.as-card:hover {
  border-color: var(--accent);
}
.as-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.as-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.as-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin: 6px 0;
  font-size: 12px;
  color: var(--muted);
}
.as-progress-bar-wrap {
  margin: 10px 0 6px;
}
.as-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(var(--hi-rgb), 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.as-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.as-progress-fill.fill-complete {
  background: #10b981;
}

/* Confidence badges */
.as-badge-high {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.as-badge-med {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.as-badge-gap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.as-badge-approved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #3b82f6;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

/* Review Workspace Responsive Table */
.as-review-table-container {
  overflow-x: auto;
  position: relative;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.as-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
  table-layout: fixed;
}
.as-review-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surf-pop-b, #1e293b);
  color: var(--fg);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.as-review-table tbody tr.as-item-row {
  border-bottom: 1px solid var(--border-row, rgba(255, 255, 255, 0.06));
  transition: background-color 0.12s ease;
}
.as-review-table tbody tr.as-item-row:hover {
  background: rgba(var(--hi-rgb), 0.035);
}
.as-review-table tbody tr.as-row-is-approved {
  background: rgba(16, 185, 129, 0.04);
}
.as-review-table tbody tr.as-row-is-approved:hover {
  background: rgba(16, 185, 129, 0.07);
}
.as-review-table td {
  padding: 11px 14px;
  vertical-align: top;
  box-sizing: border-box;
}

.as-col-num {
  width: 52px;
  text-align: center;
}
.as-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(var(--hi-rgb), 0.05);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}

.as-col-question {
  width: 32%;
  min-width: 250px;
  max-width: 460px;
}
.as-q-text {
  color: var(--fg);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.as-q-note {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
  background: rgba(var(--hi-rgb), 0.03);
  border-left: 2px solid var(--accent, #1e9e8c);
  padding: 3px 8px;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.as-col-answer {
  width: 44%;
  min-width: 340px;
}
.as-ans-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.as-short-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-text, #2dd4bf);
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.3);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}
.as-short-input {
  flex: 1;
  max-width: 260px;
  height: 27px;
  padding: 3px 8px;
  font-size: 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  background: var(--input-bg, rgba(var(--hi-rgb), 0.04));
  color: var(--fg);
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.as-short-input:focus {
  border-color: var(--accent);
  background: var(--input-focus-bg, rgba(var(--hi-rgb), 0.08));
  outline: none;
}
.as-short-empty .as-short-input {
  max-width: 280px;
  opacity: 0.75;
}
.as-short-empty .as-short-input:focus {
  opacity: 1;
}

.as-answer-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.48;
  padding: 8px 11px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  background: var(--input-bg, rgba(var(--hi-rgb), 0.04));
  color: var(--fg);
  field-sizing: content;
  min-block-size: 60px;
  max-block-size: 380px;
  resize: vertical;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.as-answer-textarea:focus {
  border-color: var(--accent);
  outline: none;
  background: var(--input-focus-bg, rgba(var(--hi-rgb), 0.08));
}

.as-col-conf {
  width: 135px;
}
.as-conf-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.as-conf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  width: fit-content;
}
.as-conf-high {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
}
.as-conf-medium {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
}
.as-conf-low {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
}
.as-conf-unanswered {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: var(--muted);
}
.as-rev-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  width: fit-content;
}
.as-rev-approved {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
}
.as-rev-edited {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #3b82f6;
}
.as-rev-pending {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: var(--muted);
}
.as-rev-flagged {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
}

.as-cites-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 3px;
}
.as-cite-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--muted);
  background: rgba(var(--hi-rgb), 0.05);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}
.as-cite-chip:hover {
  border-color: var(--accent);
  color: var(--fg);
}
.as-cite-more {
  font-weight: 600;
  color: var(--accent-text, #2dd4bf);
}

.as-col-actions {
  width: 125px;
  text-align: right;
}
.as-action-row {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.as-action-row .btn {
  padding: 4px 7px;
  font-size: 11.5px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.as-btn-approved {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #10b981 !important;
  font-weight: 600;
}
.as-btn-approved:hover {
  background: rgba(16, 185, 129, 0.28) !important;
}
.as-btn-kb-saved {
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #10b981 !important;
}

/* Section Divider Rows */
.as-sec-row td {
  padding: 0 !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.as-sec-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: rgba(var(--hi-rgb), 0.04);
  border-left: 3px solid var(--accent, #1e9e8c);
}
.as-sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--fg);
  letter-spacing: 0.02em;
}
.as-sec-icon {
  font-size: 13.5px;
}
.as-sec-name {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.as-sec-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(var(--hi-rgb), 0.06);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.as-kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}
.as-kb-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.as-kb-q {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.35;
}
.as-kb-a {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  white-space: pre-wrap;
  max-height: 160px;
  overflow-y: auto;
}
.as-kb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.as-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.as-tpl-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.as-tpl-card h4 {
  margin: 0;
  font-size: 15px;
  color: var(--fg);
}
.as-tpl-card p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .as-review-table thead {
    display: none;
  }
  .as-review-table,
  .as-review-table tbody,
  .as-review-table tr,
  .as-review-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .as-review-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    padding: 10px;
  }
  .as-col-actions {
    text-align: left;
    margin-top: 8px;
    width: 100%;
  }
}

/* Customize Sidebar modal */
.csm-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(var(--surf-rgb), 0.5);
  border: 1px solid var(--line-soft);
  transition: all 0.15s;
}

.csm-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  flex: 1 1 auto;
}

.csm-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.csm-arrow-btn {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--muted);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}

.csm-arrow-btn:hover:not(:disabled) {
  color: var(--fg);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.06);
}

.csm-arrow-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}