:root {
  color-scheme: dark;
  --bg: #0f1115;
  --bg-2: #14171e;
  --panel: #171a21;
  --panel-2: #1d212b;
  --ink: #e7e9ee;
  --ink-soft: #c2c8d2;
  --muted: #868e9e;
  --line: #262b35;
  --line-strong: #343b48;
  --accent: #7c5cff;
  --accent-strong: #6a49f2;
  --accent-soft: rgba(124,92,255,.16);
  --accent-ink: #ffffff;
  --link: #a99cff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 2px 4px rgba(0,0,0,.3), 0 12px 28px -10px rgba(0,0,0,.6);
  --shadow-lg: 0 20px 50px -16px rgba(0,0,0,.72);
  --radius: 12px;
  --radius-sm: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(920px 520px at 88% -12%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(760px 520px at -5% 0%, rgba(56,120,255,.07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { letter-spacing: -.01em; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* Sticky "on a call" bar — always visible while a call is live, across pages. */
.call-bar { position: sticky; top: 0; z-index: 200; text-align: center; cursor: pointer;
  font-weight: 700; font-size: 13px; letter-spacing: .2px; padding: 8px 12px; color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.25); }
.call-bar.on-call { background: #16a34a; }   /* green — connected */
.call-bar.calling { background: #d97706; }   /* amber — dialing/ringing out */
.call-bar.incoming { background: #2563eb; animation: callbar-pulse 1.2s ease-in-out infinite; } /* blue — ringing in */
@keyframes callbar-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
body.pjax-busy { cursor: progress; }
.sm { font-size: 12px; }
.nowrap { white-space: nowrap; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #2c3340; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3a4250; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(18,21,28,.72); backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line); padding: 11px 24px;
}
.topbar .brand a { color: var(--ink); font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.topbar nav { display: flex; align-items: center; gap: 2px; }
.topbar nav a { margin-left: 2px; color: var(--muted); font-weight: 600; padding: 6px 12px; border-radius: 8px; transition: background .12s, color .12s; }
.topbar nav a:hover { color: var(--ink); background: var(--bg-2); text-decoration: none; }
.topbar nav a.active { color: #fff; background: var(--accent-soft); }
.topbar nav a.logout { color: var(--muted); }

.container { max-width: 1240px; margin: 26px auto 64px; padding: 0 24px; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 18px;
}

/* Buttons + inputs */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--panel-2);
  color: var(--ink); padding: 8px 14px; border-radius: 9px; cursor: pointer;
  font-weight: 600; font-size: 13px; line-height: 1.1;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .04s;
}
.btn:hover { border-color: #414a59; background: #232834; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(124,92,255,.4), 0 10px 22px -8px rgba(124,92,255,.75); }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--bg-2); }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 7px; }
.btn.danger { background: transparent; border-color: rgba(239,68,68,.5); color: #ff9b9b; }
.btn.danger:hover { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.75); color: #ffb0b0; }
.btn.disabled { opacity: .4; pointer-events: none; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 4px; }

/* Calls performance dashboard */
.dash-title { font-size: 15px; margin: 0 0 12px; }
.dash-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1000px) { .dash-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .dash-tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.tile-n { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.tile-pct { font-size: 15px; font-weight: 700; opacity: .9; }
.tile-l { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 3px; }
.tile-sub { font-size: 11px; color: var(--muted); }
.tile-good .tile-n, .tile-good .tile-pct { color: #86efac; }
.tile-bad .tile-n, .tile-bad .tile-pct { color: #ff9b9b; }
.dash-secondary { margin-top: 12px; }
.dash-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.dash-range .rng-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.dash-range input { padding: 5px 7px; font-size: 12px; }
.dash-range .rng-sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px; }
.dash-range .btn.active { background: var(--accent-soft); border-color: var(--accent); color: #fff; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 10px;
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: #5f6775; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { width: 100%; resize: vertical; }
label { display: block; font-weight: 600; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
label input, label select, label textarea { display: block; width: 100%; margin-top: 4px; font-weight: 400; color: var(--ink); }

/* Login */
.login-wrap { display: flex; justify-content: center; align-items: center; min-height: 84vh; }
.login-card { width: 360px; text-align: center; padding: 34px 30px; box-shadow: var(--shadow-lg); }
.login-card h1 { margin: 6px 0 4px; font-size: 23px; }
.login-card label { text-align: left; margin-top: 18px; }
.login-card .btn { width: 100%; margin-top: 18px; justify-content: center; }

/* Alerts */
.alert { border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-weight: 600; border: 1px solid transparent; }
.alert.error { background: rgba(239,68,68,.14); color: #fca5a5; border-color: rgba(239,68,68,.3); }
.alert.ok { background: rgba(34,197,94,.14); color: #86efac; border-color: rgba(34,197,94,.3); }
.warn-alert { background: rgba(245,158,11,.13); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); border-radius: 8px; padding: 10px 12px; margin-top: 12px; }

/* Filters */
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filters .search { flex: 1; min-width: 200px; }
.filters .count { margin-left: auto; }
.filters .range { display: inline-flex; align-items: center; gap: 6px; }
.filters .range-lbl { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.filters .range input[type="date"] { padding: 6px 8px; }
.filters .range-dash { color: var(--muted); }
.chk-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.chk-filter input { cursor: pointer; }

/* Date urgency — "glowing" cells (list) and inputs (detail) by how close the date is. */
.date-cell { font-weight: 800; border-radius: 6px; }
.date-cell.overdue { background: rgba(239,68,68,.24); color: #ff9b9b; text-shadow: 0 0 10px rgba(239,68,68,.6); box-shadow: inset 0 0 0 1px rgba(239,68,68,.55); }
.date-cell.soon    { background: rgba(245,158,11,.24); color: #ffd166; text-shadow: 0 0 10px rgba(245,158,11,.55); box-shadow: inset 0 0 0 1px rgba(245,158,11,.5); }
.date-cell.ok      { background: rgba(34,197,94,.22); color: #97f3b4; box-shadow: inset 0 0 0 1px rgba(34,197,94,.45); }

.date-input { transition: box-shadow .12s, border-color .12s; }
.date-input.overdue { border-color: rgba(239,68,68,.75); background: rgba(239,68,68,.16); box-shadow: 0 0 0 3px rgba(239,68,68,.22); }
.date-input.soon    { border-color: rgba(245,158,11,.75); background: rgba(245,158,11,.16); box-shadow: 0 0 0 3px rgba(245,158,11,.22); }
.date-input.ok      { border-color: rgba(34,197,94,.7); background: rgba(34,197,94,.13); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.date-input:disabled { background: #171a21; color: var(--muted); box-shadow: none; border-color: var(--line); cursor: not-allowed; }

/* Clickable rows (list + Today board) */
tr[data-href] { cursor: pointer; }

/* Date field with a clear (✕) button */
.date-field { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.date-field input { flex: 1; width: auto; margin-top: 0; }
.date-clear { flex: none; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--muted);
  border-radius: 6px; width: 32px; height: 34px; cursor: pointer; font-size: 12px; line-height: 1; }
.date-clear:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.date-clear:disabled { opacity: .4; cursor: not-allowed; }
.date-hint { display: block; margin-top: 4px; }

/* Last-status-update line */
.status-updated-line { margin: -4px 0 12px; }

/* Notes log */
.notes-block { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.notes-title { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.notes-log { white-space: pre-wrap; word-break: break-word; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px; margin-top: 10px; font-size: 13px; max-height: 320px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-soft); }
.no-notes { margin-top: 10px; }

/* Multi-select dropdown */
.ms { position: relative; }
.ms-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.ms-caret { color: var(--muted); font-size: 10px; }
.ms-panel {
  position: absolute; z-index: 30; top: calc(100% + 5px); left: 0;
  background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px; min-width: 190px;
  display: flex; flex-direction: column; gap: 4px;
}
.ms-panel[hidden] { display: none; }
.ms-opt {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 5px 9px; border-radius: 8px; font-size: 13px; font-weight: 600;
  text-transform: capitalize; cursor: pointer;
}
.ms-opt input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.ms-opt span { color: inherit; }

/* Table */
.table-wrap { padding: 0; overflow-x: auto; }
table.agents { width: 100%; border-collapse: collapse; font-size: 13px; }
table.agents th, table.agents td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.agents th { background: var(--bg-2); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; position: sticky; top: 0; z-index: 1; }
table.agents tr:last-child td { border-bottom: none; }
table.agents tbody tr { transition: background .1s; }
table.agents tbody tr:hover { background: rgba(124,92,255,.08); }
.empty { text-align: center; padding: 34px; }
.sort { margin-left: 4px; white-space: nowrap; }
.sort a { color: #4a5262; font-size: 11px; }
.sort a:hover { color: var(--muted); }
.sort a.on { color: var(--accent); }

/* AI-outcome badge */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.badge.ai { background: rgba(255,255,255,.06); color: var(--ink-soft); border: 1px solid var(--line); }
.badge.is-connected { background: rgba(34,197,94,.16); color: #86efac; border: 1px solid rgba(34,197,94,.3); }
.badge.is-noanswer { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid var(--line); }
.dir-in { color: #86efac; font-weight: 800; }
.dir-out { font-weight: 800; }

/* Operational status — dark chips per workflow stage. */
.status-select { font-weight: 600; }
.status-tint { font-weight: 600; border-radius: 8px; border: 1px solid transparent; }
.status-tint.status-new           { background: rgba(148,163,184,.20); color: #d6dce7; border-color: rgba(148,163,184,.5); }
.status-tint.status-no_answer     { background: rgba(113,113,122,.30); color: #d4d4d8; border-color: rgba(113,113,122,.6); }
.status-tint.status-voicemail     { background: rgba(20,184,166,.28); color: #7ff2df; border-color: rgba(20,184,166,.65); }
.status-tint.status-contacted     { background: rgba(56,189,248,.28); color: #ace3fd; border-color: rgba(56,189,248,.65); }
.status-tint.status-follow_up     { background: rgba(245,158,11,.28); color: #ffdd8a; border-color: rgba(245,158,11,.65); }
.status-tint.status-to_schedule   { background: rgba(129,140,248,.34); color: #d0d6ff; border-color: rgba(129,140,248,.72); }
.status-tint.status-meeting_booked{ background: rgba(217,70,239,.28); color: #f3c0fb; border-color: rgba(217,70,239,.65); }
.status-tint.status-follow_up_after_meeting { background: rgba(34,211,238,.26); color: #a5eefb; border-color: rgba(34,211,238,.62); }
.status-tint.status-no_show       { background: rgba(251,146,60,.30); color: #fdc088; border-color: rgba(251,146,60,.62); }
.status-tint.status-ns_follow_up  { background: rgba(234,88,12,.34); color: #ffcaa0; border-color: rgba(234,88,12,.7); }
.status-tint.status-meeting_lost  { background: rgba(190,75,110,.34); color: #f4abc2; border-color: rgba(190,75,110,.66); }
.status-tint.status-cancelled     { background: rgba(120,113,108,.30); color: #d9d4cf; border-color: rgba(120,113,108,.6); }
.status-tint.status-won           { background: rgba(34,197,94,.28); color: #97f3b4; border-color: rgba(34,197,94,.65); }
.status-tint.status-call_lost     { background: rgba(239,68,68,.28); color: #ffb0b0; border-color: rgba(239,68,68,.65); }
.status-tint.status-wrong_number  { background: rgba(184,132,92,.30); color: #f0cba4; border-color: rgba(184,132,92,.62); }

/* Follow-up priority */
.prio-select { font-weight: 600; }
.prio-tint { font-weight: 600; border-radius: 8px; border: 1px solid transparent; }
.prio-tint.prio-none   { background: rgba(148,163,184,.18); color: #c6cdd8; border-color: rgba(148,163,184,.45); }
.prio-tint.prio-low    { background: rgba(34,197,94,.26); color: #97f3b4; border-color: rgba(34,197,94,.6); }
.prio-tint.prio-medium { background: rgba(245,158,11,.26); color: #ffdd8a; border-color: rgba(245,158,11,.6); }
.prio-tint.prio-high   { background: rgba(239,68,68,.30); color: #ffb0b0; border-color: rgba(239,68,68,.65); }

.has-date { color: var(--ink); }
.play-btn {
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink); border-radius: 999px;
  width: 30px; height: 30px; cursor: pointer; font-size: 12px; line-height: 1;
}
.play-btn:hover { border-color: var(--accent); color: var(--accent); }
.rec-btn { border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink-soft);
  border-radius: 999px; width: 22px; height: 22px; cursor: pointer; font-size: 10px; line-height: 1;
  padding: 0; margin-left: 6px; vertical-align: middle; }
.rec-btn:hover { border-color: var(--accent); color: var(--accent); }
.rec-btn.playing { border-color: var(--accent); color: var(--accent); background: rgba(124,92,255,.16); }
/* Recording playback: full-width native player expanded under the call row */
tr.rec-row td { background: var(--panel-2); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.rec-audio { width: 100%; height: 38px; display: block; }
.flash { box-shadow: 0 0 0 3px rgba(124,92,255,.5); transition: box-shadow .1s; }

/* Copy-phone button */
.phone-cell { display: inline-flex; align-items: center; gap: 7px; }
dl.fields dd.phone-cell { display: flex; }
.copy-btn {
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--muted);
  border-radius: 6px; width: 24px; height: 24px; padding: 0; cursor: pointer;
  font-size: 12px; line-height: 1; flex: 0 0 auto;
}
.copy-btn:hover { border-color: var(--accent); color: var(--ink); }
.copy-btn.copied { border-color: #22c55e; color: #86efac; background: rgba(34,197,94,.14); }

/* Copy confirmation toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  z-index: 1000; max-width: 90vw; padding: 11px 18px; border-radius: 10px;
  font-weight: 700; font-size: 14px; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-ok  { background: #16a34a; }
.toast-err { background: #dc2626; }

/* Detail */
.detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.detail-head h1 { margin: 0; font-size: 24px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }
.card h2 { margin: 0 0 16px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: rgba(255,255,255,.06); padding: 2px 7px; border-radius: 6px; }
.tag.editable { color: #86efac; background: rgba(34,197,94,.14); }
dl.fields { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; margin: 0; }
dl.fields dt { color: var(--muted); font-weight: 600; }
dl.fields dd { margin: 0; }
audio { width: 100%; margin-bottom: 4px; }
.transcript-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.transcript-box summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.transcript { white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
/* Per-client call history log (under the transcript). */
.call-log { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; }
.call-log td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.call-log tr:last-child td { border-bottom: none; }
/* Day separator in the Calls table: date + how many attempts that day. */
tr.day-row td { background: var(--panel-2); color: var(--ink-soft); font-weight: 600;
  font-size: 12px; padding: 7px 12px; border-top: 1px solid var(--line-strong); }
tr.day-row strong { color: var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }

/* Area code + city */
.area-code { display: inline-block; font-weight: 700; background: rgba(255,255,255,.06); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; margin-right: 6px; }
.area-place { font-weight: 600; }

/* Add-note box */
.note-add { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.note-add textarea { margin-bottom: 8px; }

/* Import summary + stat tiles */
.import-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; text-align: center; }
.stat .num { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .lbl { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 5px; font-weight: 600; }
/* Durations ("2h 41m") are wider than a count — keep them inside the tile. */
.stat .num.time { font-size: 22px; }
.stat.warn { background: rgba(245,158,11,.20); border-color: rgba(245,158,11,.5); }
.stat.warn .num { color: #ffd166; }
.stat.danger { background: rgba(239,68,68,.20); border-color: rgba(239,68,68,.5); }
.stat.danger .num { color: #ff9b9b; }
.stat.accent { background: rgba(124,92,255,.24); border-color: rgba(124,92,255,.55); }
.stat.accent .num { color: #b7a6ff; }

/* "Needs an email" flag button — active (flagged) state */
.flag-email-btn.on { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.35); color: #fcd34d; }

/* Auto-save indicator (detail Workflow form) */
.autosave-row { display: flex; align-items: center; gap: 12px; margin-top: 2px; min-height: 20px; }
.autosave { font-size: 12px; font-weight: 600; transition: color .12s; }
.autosave.idle { color: var(--muted); }
.autosave.saving { color: #fcd34d; }
.autosave.ok { color: #86efac; }
.autosave.err { color: #fca5a5; }

/* Meeting invitation (detail) */
.invite-block { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.invite-block .notes-title { margin: 0 0 10px; }
.notes-block { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.note-form { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.note-form textarea { flex: 1; resize: vertical; }
.notes-log { white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; line-height: 1.5; margin: 0; }
.invite-sent { font-size: 13px; color: #97f3b4; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.35); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
/* Each stage of the workflow is its own panel: a hairline rule was not enough
   to tell "send the invite" apart from "take the money" at a glance. Panel +
   its own accent colour on the heading bar, so the eye lands on a section
   rather than on one long scroll of controls. */
.wf-block { position: relative; margin-top: 22px; padding: 16px 18px 18px 20px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong); border-radius: 12px; }
.wf-block > .notes-title { margin: 0 0 12px; font-size: 15px; font-weight: 800;
  letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf-block > .notes-title::before { content: ''; width: 8px; height: 8px; border-radius: 2px;
  background: var(--line-strong); flex: 0 0 auto; }
.wf-invite   { border-left-color: #38bdf8; }
.wf-invite   > .notes-title::before { background: #38bdf8; }
.wf-remind   { border-left-color: #f59e0b; }
.wf-remind   > .notes-title::before { background: #f59e0b; }
.wf-audio    { border-left-color: #a78bfa; }
.wf-audio    > .notes-title::before { background: #a78bfa; }
.wf-debrief  { border-left-color: #22d3ee; }
.wf-debrief  > .notes-title::before { background: #22d3ee; }
.wf-rebook   { border-left-color: #ec4899; }
.wf-rebook   > .notes-title::before { background: #ec4899; }
.rebooked { font-size: 13px; color: #fbcfe8; background: rgba(236,72,153,.14);
  border: 1px solid rgba(236,72,153,.45); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.wf-pay      { border-left-color: #22c55e; }
.wf-pay      > .notes-title::before { background: #22c55e; }
.wf-notes    { border-left-color: #64748b; }
.wf-notes    > .notes-title::before { background: #64748b; }

/* Meeting audio */
.mrec-audio { width: 100%; margin-bottom: 6px; }
.mrec-meta { margin-bottom: 10px; }
.mrec-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mrec-controls input[type="file"] { flex: 1 1 240px; padding: 6px 8px; font-size: 12px; }
.mrec-bar { height: 6px; border-radius: 999px; background: var(--panel-2);
  overflow: hidden; margin-bottom: 8px; }
.mrec-bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
.rec-none { margin-bottom: 10px; }

/* Client type: old = handled before the new process, new = held to it. The
   badge has to read at a glance the moment the card opens, hence the strong
   amber; .badge capitalizes by default, which would ruin "OLD CLIENT". */
.badge.client-old { background: rgba(245,158,11,.22); color: #ffd894;
  border: 1px solid rgba(245,158,11,.6); text-transform: none; }
.badge.client-new { background: rgba(34,197,94,.16); color: #9ff0bb;
  border: 1px solid rgba(34,197,94,.45); text-transform: none; }
.badge.sm-badge { font-size: 10.5px; padding: 1px 7px; font-weight: 600; }
.ct-tint { font-weight: 600; border-radius: 8px; }
.ct-tint.ct-old { background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.55); color: #ffd894; }
.ct-tint.ct-new { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.45); color: #9ff0bb; }
.ct-tint:disabled { opacity: .85; cursor: not-allowed; }

/* ---- Outstanding questionnaire answers, made impossible to miss ---- */
/* The banner is the first thing inside the Workflow card. */
.todo-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  padding: 13px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  color: #ffd9d9; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.5);
  border-left: 4px solid #ef4444; box-shadow: 0 6px 18px -12px rgba(239,68,68,.9); }
.todo-banner:hover { text-decoration: none; background: rgba(239,68,68,.2); }
.todo-banner strong { font-size: 16px; }
.todo-ico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #ef4444;
  color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.todo-done { margin: 0 0 16px; padding: 9px 14px; border-radius: 10px; font-size: 12.5px;
  font-weight: 600; color: #9ff0bb; background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.4); }
/* Per-section counter chip in the heading. */
.todo-chip { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #ffd9d9; background: rgba(239,68,68,.2); border: 1px solid rgba(239,68,68,.55);
  padding: 2px 8px; border-radius: 999px; }
/* A section that still owes answers announces itself — hard to mistake for the
   ordinary fields around it. */
.wf-block.incomplete { border: 2px solid rgba(239,68,68,.6);
  border-left: 5px solid #ef4444; background: rgba(239,68,68,.07);
  box-shadow: 0 0 0 1px rgba(239,68,68,.15), 0 10px 30px -18px rgba(239,68,68,.9); }
.wf-block.incomplete > .notes-title { color: #ffd0d0; }
.wf-block.incomplete > .notes-title::before { background: #ef4444; }
/* And the unanswered question itself is the loudest thing on the row. */
[data-req][data-missing="1"] { position: relative; padding: 10px 12px 8px 14px;
  margin: 0 -2px 12px; border: 1px solid rgba(239,68,68,.45);
  border-left: 4px solid #ef4444; background: rgba(239,68,68,.13); border-radius: 8px;
  color: #ffc9c9; }
[data-req][data-missing="1"] select, [data-req][data-missing="1"] input[type="number"],
[data-req][data-missing="1"] input[type="text"], [data-req][data-missing="1"] textarea {
  background: rgba(239,68,68,.1); }
[data-req][data-missing="1"]::after { content: 'required'; display: inline-block; margin-left: 8px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #ffd9d9; background: rgba(239,68,68,.25); border: 1px solid rgba(239,68,68,.55);
  padding: 1px 6px; border-radius: 999px; vertical-align: 1px; }
[data-req][data-missing="1"] select, [data-req][data-missing="1"] input,
[data-req][data-missing="1"] textarea { border-color: rgba(239,68,68,.65); }
[data-req][data-missing="0"]::after { content: '✓'; margin-left: 6px; color: #86efac;
  font-weight: 800; }

/* Questions read as a numbered run, one per line — the two-column grid made the
   sequence jump left/right and there was no telling how many were left. */
.q-num { display: inline-block; min-width: 20px; font-weight: 800; color: var(--ink-soft); }
[data-req][data-missing="1"] .q-num { color: #ff9b9b; }
/* Named for the questionnaire that used to own it; now only #debrief-missing. */
.qual-missing { font-size: 12px; font-weight: 600; color: #ffd0a8; background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.4); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.qual-missing.hidden { display: none; }
.debrief-recap { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 14px; }
.debrief-recap dt { font-size: 11px; }
.pitch-note { font-size: 13px; color: #ace3fd; background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.4); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
.asks-group { margin-bottom: 12px; }
.asks-legend { display: block; font-weight: 600; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.asks-opt { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 6px 0;
  font-weight: 500; color: var(--ink-soft); }
.asks-opt input { width: auto; display: inline-block; margin: 0; }
.rem-when { margin-bottom: 12px; }
.click-hit { color: #a5c8ff; font-size: 13px; white-space: nowrap; }
.pay-click { font-size: 13px; color: #a5c8ff; background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.35); border-radius: 8px; padding: 8px 12px; margin-top: 10px; }
.pay-noclick { font-size: 13px; color: var(--muted, #8a95ac); border: 1px dashed rgba(255,255,255,.16); border-radius: 8px; padding: 8px 12px; margin-top: 10px; }
.pay-sent { font-size: 13px; color: #97f3b4; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.35); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.invite-sent.hidden, .invite-form.hidden, .invite-hint.hidden { display: none; }
.invite-form label { margin-bottom: 8px; }
#invite-status { margin-left: 10px; }
.invite-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(34,197,94,.20); color: #97f3b4; border: 1px solid rgba(34,197,94,.45); }

/* Numbers — caller-ID per-carrier spam-check board */
.numbers-summary { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.numbers-help { margin: -6px 0 14px; max-width: 78ch; }
.numbers-table td { vertical-align: middle; }
.numbers-table .sm { font-size: 11px; margin-top: 2px; }
.nf-carrier-col { text-align: center; }
.numflag-select { font-weight: 600; border-radius: 8px; border: 1px solid transparent; padding: 5px 9px; }
.numflag-select.nf-unknown { background: rgba(148,163,184,.16); color: #b9c1cd; border-color: rgba(148,163,184,.35); }
.numflag-select.nf-ok      { background: rgba(34,197,94,.24);  color: #97f3b4; border-color: rgba(34,197,94,.55); }
.numflag-select.nf-spam    { background: rgba(239,68,68,.26);  color: #ffb0b0; border-color: rgba(239,68,68,.6); }
/* Call-a-number cell: destination input + a wide text handset button. */
.nf-call-cell { white-space: nowrap; }
.nf-callto { width: 150px; padding: 6px 9px; vertical-align: middle; }
.nf-callbtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; margin-left: 6px;
  font-size: 13px; font-weight: 600; line-height: 1; border-radius: 8px; cursor: pointer; vertical-align: middle;
  border: 1px solid rgba(34,197,94,.5); background: rgba(34,197,94,.16); color: #86efac; }
.nf-callbtn:hover { background: rgba(34,197,94,.28); border-color: rgba(34,197,94,.62); }
.nf-callbtn:active { transform: translateY(1px); }
.badge.nf-ok      { background: rgba(34,197,94,.20);  color: #97f3b4; border: 1px solid rgba(34,197,94,.45); text-transform: none; }
.badge.nf-spam    { background: rgba(239,68,68,.22);  color: #ffb0b0; border: 1px solid rgba(239,68,68,.5);  text-transform: none; }
.badge.nf-unknown { background: rgba(148,163,184,.16); color: #c7cfdb; border: 1px solid rgba(148,163,184,.4); text-transform: none; }
.badge.nf-retired { background: rgba(120,113,108,.28); color: #d9d4cf; border: 1px solid rgba(120,113,108,.55); text-transform: none; }
/* Rotation config card */
.nf-config { margin-bottom: 14px; }
.nf-config-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nf-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.nf-toggle input { width: auto; }
.nf-range { display: inline-flex; align-items: center; gap: 14px; }
.nf-range label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 13px; }
.nf-range input { width: 62px; padding: 5px 7px; }
.nf-config-help { margin: 10px 0 0; max-width: 82ch; }
/* Today usage + retire button */
.nf-today-col { text-align: center; white-space: nowrap; }
.nf-retired-row { opacity: .5; }
.nf-retirebtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; font-size: 12px; font-weight: 600;
  border-radius: 8px; cursor: pointer; white-space: nowrap; vertical-align: middle;
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink-soft); }
.nf-retirebtn:hover { background: var(--bg-2); border-color: #414a59; }

/* Today dashboard */
.today-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.today-head h1 { margin: 0; font-size: 26px; }
.today-tiles { margin-bottom: 20px; }
.today-tiles a.stat { display: block; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
  transition: box-shadow .14s, transform .08s, border-color .12s; }
.today-tiles a.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.today-tiles a.stat:active { transform: translateY(0); }
.today-section h2 .open-in-list { margin-left: auto; font-weight: 600; }
.today-section .empty-line { padding: 6px 2px; }
.today-zero { text-align: center; }

/* Calendar (month view) */
.cal-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-toolbar h1 { margin: 0; font-size: 22px; }
.cal-nav { display: inline-flex; gap: 6px; }
.cal-legend { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--muted); }
.cal-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cal-legend .dot.meet { background: #d946ef; }
.cal-legend .dot.due { background: transparent; border: 1px solid var(--line-strong); }
.cal { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.cal-weekdays div { padding: 8px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { min-height: 120px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-grid > .cal-cell:nth-last-child(-n+7) { border-bottom: none; }
.cal-cell.other { background: rgba(255,255,255,.014); }
.cal-cell.other .cal-daynum { color: #4b5262; }
.cal-daynum { font-size: 12px; font-weight: 700; color: var(--ink-soft); align-self: flex-start; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.cal-cell.today .cal-daynum { background: var(--accent); color: #fff; border-radius: 999px; box-shadow: 0 0 0 3px var(--accent-soft); }
.cal-chip { display: block; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
  background: rgba(217,70,239,.30); color: #f5cbfb; border: 1px solid rgba(217,70,239,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip:hover { text-decoration: none; border-color: rgba(217,70,239,.9); background: rgba(217,70,239,.42); }
.cal-more { font-size: 11px; color: var(--muted); padding-left: 2px; }
.cal-due { font-size: 11px; color: var(--muted); margin-top: auto; padding-top: 2px; }
@media (max-width: 720px) { .cal-cell { min-height: 84px; } .cal-chip { font-size: 11px; padding: 2px 6px; } }

/* Calendar view toggle (Week / Month) */
.cal-viewtoggle { margin-left: auto; display: inline-flex; gap: 6px; }
.cal-viewtoggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: #fff; }

/* Calendar — week view (hourly time grid) */
.wk { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.wk-head { display: grid; grid-template-columns: 56px repeat(7, 1fr); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.wk-corner { border-right: 1px solid var(--line); }
.wk-dh { text-align: center; padding: 8px 6px; border-left: 1px solid var(--line); }
.wk-dh .wd { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.wk-dh .dn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; font-size: 15px; font-weight: 700; margin-top: 2px; border-radius: 999px; }
.wk-dh.today .dn { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.wk-dh .wk-due { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.wk-allday { display: grid; grid-template-columns: 56px repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.wk-allday .lbl { font-size: 10px; color: var(--muted); text-align: right; padding: 6px 8px; border-right: 1px solid var(--line); }
.wk-allday .cell { border-left: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-height: 28px; }
.wk-chip { display: block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px;
  background: rgba(217,70,239,.30); border: 1px solid rgba(217,70,239,.6); color: #f5cbfb;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-chip:hover { text-decoration: none; background: rgba(217,70,239,.42); }
.wk-body { display: grid; grid-template-columns: 56px repeat(7, 1fr); }
.wk-gutter { position: relative; border-right: 1px solid var(--line); }
.wk-hour { font-size: 10px; color: var(--muted); text-align: right; padding: 2px 8px 0 0; box-sizing: border-box; line-height: 1.15; }
.wk-hour-wwa { display: block; font-size: 8px; opacity: .6; }
.wk-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #ef4444; z-index: 4; pointer-events: none; }
.wk-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.25); }
.wk-day { position: relative; border-left: 1px solid var(--line);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 48px); }
.wk-day.today { background-color: rgba(124,92,255,.05); }
.wk-event { position: absolute; left: 3px; right: 3px; height: 42px; padding: 3px 8px; overflow: hidden; display: block;
  border-radius: 6px; background: rgba(217,70,239,.30); border: 1px solid rgba(217,70,239,.6); color: #f7d6fc; }
.wk-event:hover { text-decoration: none; background: rgba(217,70,239,.44); z-index: 2; box-shadow: var(--shadow-sm); }
.wk-event .t { display: block; font-size: 10px; font-weight: 700; opacity: .85; }
.wk-event .n { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Calendar chip colour by meeting outcome (default = meeting_booked fuchsia) */
.cal-chip.cal-no_show, .wk-chip.wk-no_show, .wk-event.wk-no_show { background: rgba(82,82,91,.18); border-color: rgba(113,113,122,.42); color: #a1a1aa; }
.cal-chip.cal-no_show:hover, .wk-chip.wk-no_show:hover, .wk-event.wk-no_show:hover { background: rgba(82,82,91,.3); border-color: rgba(113,113,122,.6); }
.cal-chip.cal-meeting_lost, .wk-chip.wk-meeting_lost, .wk-event.wk-meeting_lost { background: rgba(220,38,38,.34); border-color: rgba(220,38,38,.68); color: #fecaca; }
.cal-chip.cal-cancelled, .wk-chip.wk-cancelled, .wk-event.wk-cancelled { background: rgba(120,113,108,.24); border-color: rgba(120,113,108,.5); color: #cbc7c2; text-decoration: line-through; }
/* Follow-up / to-schedule leads shown as short calendar events (by due date). */
.cal-chip.cal-follow_up, .wk-chip.wk-follow_up, .wk-event.wk-follow_up { background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.55); color: #ffdd8a; }
.cal-chip.cal-to_schedule, .wk-chip.wk-to_schedule, .wk-event.wk-to_schedule { background: rgba(129,140,248,.26); border-color: rgba(129,140,248,.6); color: #d0d6ff; }
/* Post-meeting follow-ups: cyan = met, still in play; orange = no-show we chase. */
.cal-chip.cal-follow_up_after_meeting, .wk-chip.wk-follow_up_after_meeting, .wk-event.wk-follow_up_after_meeting
  { background: rgba(34,211,238,.24); border-color: rgba(34,211,238,.6); color: #a5eefb; }
.cal-chip.cal-follow_up_after_meeting:hover, .wk-chip.wk-follow_up_after_meeting:hover, .wk-event.wk-follow_up_after_meeting:hover
  { background: rgba(34,211,238,.4); }
.cal-chip.cal-ns_follow_up, .wk-chip.wk-ns_follow_up, .wk-event.wk-ns_follow_up
  { background: rgba(234,88,12,.28); border-color: rgba(234,88,12,.62); color: #ffcaa0; }
.cal-chip.cal-ns_follow_up:hover, .wk-chip.wk-ns_follow_up:hover, .wk-event.wk-ns_follow_up:hover
  { background: rgba(234,88,12,.44); }
/* The meeting slot a post-meeting lead came FROM — kept on the calendar as a
   record of what was booked there, drawn faded with a dashed edge so it reads
   as history, not as an appointment still to be worked. */
.cal-chip.cal-trace, .wk-chip.wk-trace, .wk-event.wk-trace
  { opacity: .62; border-style: dashed; }
.cal-chip.cal-trace:hover, .wk-chip.wk-trace:hover, .wk-event.wk-trace:hover { opacity: 1; }
.wk-event.wk-short { height: 19px; padding: 1px 8px; }
.wk-event.wk-short .n { font-size: 10.5px; line-height: 17px; }
.cal-chip.cal-meeting_lost:hover, .wk-chip.wk-meeting_lost:hover, .wk-event.wk-meeting_lost:hover { background: rgba(220,38,38,.5); }

/* Meeting time input beside the meeting date */
.date-field .appt-time { flex: 0 0 auto; width: 112px; margin-top: 0; }
@media (max-width: 720px) { .wk-event .n { font-size: 11px; } }

/* ===================== Dialer (click-to-call) ===================== */
/* Operator picker in the nav */
.op-picker { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.op-picker .op-lbl { color: var(--muted); }
.op-picker select { padding: 5px 8px; font-size: 12px; font-weight: 600; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--ink); max-width: 210px; }
/* Current-user calling identity (fixed by login) */
.op-me { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--ink-soft);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; white-space: nowrap; }
/* Inline caller-ID picker inside the top-right operator badge. */
.op-cid-sel { font: inherit; font-weight: 700; color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 4px; margin-left: 2px; cursor: pointer; }
.op-cid-sel:disabled { opacity: .7; cursor: default; }
/* Auto / Manual caller-ID mode toggle in the operator badge. */
.dial-mode { margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  cursor: pointer; vertical-align: middle; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink-soft); }
.dial-mode.is-auto { background: rgba(34,197,94,.20); color: #97f3b4; border-color: rgba(34,197,94,.5); }
.dial-mode.is-manual { background: rgba(148,163,184,.16); color: #c7cfdb; border-color: rgba(148,163,184,.42); }
.dial-mode:hover { filter: brightness(1.15); }

/* Call button injected next to each phone number */
.call-btn { display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: rgba(34,197,94,.14); color: #86efac;
  border-radius: 7px; width: 26px; height: 26px; line-height: 1; cursor: pointer;
  font-size: 12px; padding: 0; margin-left: 4px; vertical-align: middle; }
.call-btn:hover { background: rgba(34,197,94,.28); border-color: rgba(34,197,94,.5); }
/* Second, distinct handset: call back from the number we originally dialed. */
.callback-btn { width: auto; padding: 0 8px; gap: 4px; font-weight: 600;
  background: rgba(56,189,248,.16); color: #ace3fd; }
.callback-btn:hover { background: rgba(56,189,248,.30); border-color: rgba(56,189,248,.5); }

/* Floating launcher */
.dl-launch { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 52px; height: 52px;
  border-radius: 50%; border: none; cursor: pointer; font-size: 22px; color: #fff;
  background: var(--accent); box-shadow: 0 8px 24px -6px rgba(124,92,255,.8); }
.dl-launch:hover { background: var(--accent-strong); }

/* Call panel */
.dialer { position: fixed; right: 22px; bottom: 22px; z-index: 61; width: 290px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 14px; color: var(--ink); }
.dialer.hidden { display: none; }
.dl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dl-title { font-weight: 800; }
.dl-op { color: var(--muted); font-size: 11px; margin-left: auto; text-align: right; }
.dl-x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
.dl-badge { display: none; }
.dl-badge.on { display: block; background: rgba(245,158,11,.14); color: #fcd34d;
  border: 1px solid rgba(245,158,11,.3); border-radius: 8px; padding: 6px 8px; font-size: 11px; margin-bottom: 8px; }
.dl-num { width: 100%; text-align: center; font-size: 20px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: 9px; padding: 8px; margin-bottom: 6px; }
.dl-status { text-align: center; color: var(--muted); font-size: 13px; min-height: 18px; margin-bottom: 10px; }
.dl-from { width: 100%; text-align: center; font-size: 13px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: 9px; padding: 7px; margin-bottom: 10px; }
.dl-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.dl-key { padding: 10px 0; font-size: 16px; font-weight: 700; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.dl-key:hover { border-color: var(--line-strong); background: #232834; }
.dl-actions { display: flex; gap: 8px; }
.dl-act { flex: 1; padding: 10px; border-radius: 10px; border: none; cursor: pointer;
  font-weight: 700; font-size: 14px; color: #fff; }
.dl-act.call { background: #1f9d55; } .dl-act.call:hover { background: #1a8449; }
.dl-act.hang { background: #c0392b; } .dl-act.hang:hover { background: #a83226; }
.dl-act.mute { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-strong); }
/* Incoming call — pulse the panel */
.dialer.ringing { border-color: rgba(34,197,94,.7); animation: dl-pulse 1.2s ease-in-out infinite; }
@keyframes dl-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.30), var(--shadow-lg); }
  50%      { box-shadow: 0 0 0 7px rgba(34,197,94,.10), var(--shadow-lg); }
}

/* Payment links per lead (deposit / $500 / full fee) — keep them apart so
   nobody clicks the wrong one. */
.pay-row, .rem-row { margin-bottom: 16px; }
.pay-row + .pay-row, .rem-row + .rem-row { border-top: 1px dashed var(--line); padding-top: 14px; }

/* Lead still owes questionnaire answers — visible from the board, not only from
   inside the card, because "easy to forget" is the whole problem it solves. */
.badge.todo-badge { background: rgba(239,68,68,.18); color: #ffc9c9;
  border: 1px solid rgba(239,68,68,.55); text-transform: none;
  font-size: 10.5px; padding: 1px 7px; font-weight: 700; }

/* The city filter lists every city in the base — 142 of them on the real data —
   so the options scroll under a search box that stays put. Without the cap the
   panel ran the length of the page. */
.ms-panel-city { width: 300px; }
.ms-search { width: 100%; padding: 7px 10px; font-size: 13px; margin-bottom: 4px; }
.ms-options { display: flex; flex-direction: column; gap: 4px;
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.ms-empty { padding: 10px 9px; font-size: 12px; color: var(--muted); }