/* ============================================================
   HomeSquare Call-Pop — Dark Theme
   Translates the HomeSquare Pro brand palette to a dark surface
   for the in-call agent context.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=Roboto+Mono:wght@400;500&display=swap");

:root {
  /* surfaces — light, brand cream canvas */
  --bg-0:        #F6F4EF;   /* page — HSP cream */
  --bg-1:        #FFFFFF;   /* card */
  --bg-2:        #FAF9F4;   /* raised */
  --bg-3:        #F0EBDD;   /* hover */
  --border:      #E5E7EB;
  --border-2:    #D9D5C8;

  /* text */
  --text:        #1F2937;   /* HSP ink */
  --text-dim:    #374151;
  --muted:       #6B7280;
  --faint:       #9CA3AF;

  /* brand — HomeSquare Pro */
  --hsp-green:   #3F9D46;   /* HomeSquare green */
  --hsp-green-d: #2F7A36;
  --hsp-db:      #18428F;
  --hsp-eg:      #F2692D;
  --hsp-hm:      #3F9D46;
  --hsp-pec:     #B8923A;

  /* tweakable accent (default = green) */
  --accent:        var(--hsp-green);
  --accent-d:      var(--hsp-green-d);
  --accent-soft:   #E8F4E9;
  --accent-border: rgba(63,157,70,0.32);
  --accent-fg-on:  #FFFFFF;

  /* semantic */
  --danger:      #C0392B;
  --warn:        #B7791F;
  --info:        var(--hsp-db);
  --success:     var(--hsp-green);

  /* density (tweakable) */
  --d-card-pad-y:  12px;
  --d-card-pad-x:  16px;
  --d-row-pad-y:   11px;
  --d-row-pad-x:   16px;
  --d-gap:         14px;
  --d-name-size:   32px;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.06);
  --shadow-2: 0 10px 30px rgba(15,23,42,0.12);
}

/* ==== accent palettes ==== */
html[data-accent="navy"] {
  --accent: var(--hsp-db); --accent-d: #0F2E66;
  --accent-soft: #E6ECF5; --accent-border: rgba(24,66,143,0.32);
  --accent-fg-on: #FFFFFF;
}
html[data-accent="orange"] {
  --accent: var(--hsp-eg); --accent-d: #C24E1B;
  --accent-soft: #FCE7DA; --accent-border: rgba(242,105,45,0.34);
  --accent-fg-on: #FFFFFF;
}
html[data-accent="gold"] {
  --accent: var(--hsp-pec); --accent-d: #8C6E26;
  --accent-soft: #F0EBDD; --accent-border: rgba(184,146,58,0.34);
  --accent-fg-on: #FFFFFF;
}

/* ==== density ==== */
html[data-density="compact"] {
  --d-card-pad-y: 8px;  --d-card-pad-x: 14px;
  --d-row-pad-y:  7px;  --d-row-pad-x:  14px;
  --d-gap: 10px; --d-name-size: 26px;
}
html[data-density="spacious"] {
  --d-card-pad-y: 18px; --d-card-pad-x: 22px;
  --d-row-pad-y:  16px; --d-row-pad-x:  22px;
  --d-gap: 22px; --d-name-size: 38px;
}

/* ==== surface mode ==== */
html[data-surface="paper"] {
  --bg-0: #FFFFFF; --bg-2: #FAFAF7; --bg-3: #F2F0EA;
}
html[data-surface="banner"] #caller-header {
  background:
    linear-gradient(180deg, var(--accent-soft) 0%, transparent 78%);
  margin: 0 -24px;
  padding: 28px 24px 22px;
  border-radius: 0;
  border-bottom: 1px solid var(--accent-border);
}
html[data-surface="banner"] .caller-name { color: var(--accent-d); }

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
a:hover { color: var(--text); }

button { font: inherit; }

/* division strip — the brand's signature, kept at the very top */
.division-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 50;
}
.division-strip > i { display: block; }
.division-strip > i:nth-child(1) { background: var(--hsp-db); }
.division-strip > i:nth-child(2) { background: var(--hsp-eg); }
.division-strip > i:nth-child(3) { background: var(--hsp-hm); }
.division-strip > i:nth-child(4) { background: var(--hsp-pec); }

/* layout shell */
#app {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 24px 120px;
}

/* ============================================================
   CALLER HEADER
   ============================================================ */
#caller-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--border);
}
.caller-id {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.caller-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.caller-eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-border);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   var(--accent-border); }
  100% { box-shadow: 0 0 0 10px rgba(0,0,0,0);       }
}
.caller-name {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 700;
  font-size: var(--d-name-size);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  transition: font-size 200ms cubic-bezier(0.22,0.61,0.36,1), color 200ms;
}
.caller-name.error { color: var(--danger); }
.caller-line {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-dim);
  font-size: 13.5px;
  flex-wrap: wrap;
}
.caller-line .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--faint);
  flex: 0 0 auto;
}
.caller-line a { text-decoration: none; }
.caller-line a:hover { text-decoration: underline; text-underline-offset: 3px; }
.caller-line .phone { font-family: "Roboto Mono", monospace; font-size: 13px; color: var(--text); white-space: nowrap; }

.caller-meta {
  display: grid;
  grid-auto-flow: column;
  gap: 24px;
  text-align: right;
  align-self: end;
  padding-bottom: 2px;
}
.caller-meta .stat-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.caller-meta .stat-value {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.caller-meta .stat-value.dim { color: var(--muted); }

/* Billing + secondary-contact block under the caller name */
.contact-extras {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.contact-extra {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.contact-extra-label {
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 auto;
  min-width: 110px;
}
.contact-extra-value { color: var(--text); }
.contact-extra-value .phone {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
}
.contact-extra-value a { text-decoration: none; }
.contact-extra-value a:hover { text-decoration: underline; text-underline-offset: 3px; }

.rpm-link {
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.rpm-link:hover { color: var(--text-dim); text-decoration: underline; }

/* ============================================================
   STATUS STRIP
   ============================================================ */
#status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 22px;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px 7px 9px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.status-chip .icon {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--text-dim);
  flex: 0 0 auto;
}
.status-chip .icon svg { width: 14px; height: 14px; stroke-width: 2; }
.status-chip strong { color: var(--text); font-weight: 600; }
.status-chip.active   { color: var(--text); border-color: var(--accent-border); background: var(--accent-soft); }
.status-chip.active   .icon { color: var(--accent); }
.status-chip.upcoming { color: var(--text); border-color: rgba(24,66,143,0.28); background: #E6ECF5; }
.status-chip.upcoming .icon { color: var(--hsp-db); }
.status-chip.gen      { color: var(--text); border-color: rgba(242,105,45,0.28); background: #FCE7DA; }
.status-chip.gen      .icon { color: var(--hsp-eg); }
.status-chip.ticket   .icon { color: var(--text-dim); }
.status-chip.warn     { border-color: rgba(184,146,58,0.34); background: #F4ECD8; color: var(--text); }
.status-chip.warn     .icon { color: var(--warn); }
.status-chip.muted    { color: var(--muted); }
.status-chip.muted    .icon { color: var(--muted); }

/* ============================================================
   ACTIONS — sticky bottom bar
   ============================================================ */
#actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(246,244,239,0) 0%, var(--bg-0) 40%);
  padding: 28px 24px 18px;
  z-index: 40;
}
.actions-inner {
  max-width: 960px;
  margin: 0 auto;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  box-shadow: var(--shadow-2);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.22,0.61,0.36,1),
              border-color 120ms cubic-bezier(0.22,0.61,0.36,1),
              transform 120ms cubic-bezier(0.22,0.61,0.36,1);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-3); border-color: var(--border-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn .icon { width: 16px; height: 16px; display: grid; place-items: center; }
.btn .icon svg { width: 16px; height: 16px; stroke-width: 2; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg-on);
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent-d); border-color: var(--accent-d); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: rgba(192,57,43,0.06); border-color: rgba(192,57,43,0.45); color: var(--danger); }

/* archive menu (popover) */
.menu-wrap { position: relative; }
.menu-trigger { padding-left: 12px; padding-right: 10px; }
.menu-trigger .caret { width: 12px; height: 12px; opacity: 0.7; }
.menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 220px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow-2);
  display: none;
}
.menu.open { display: block; }
.menu .menu-label {
  padding: 6px 10px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.menu button:hover { background: var(--bg-3); }
.menu button .icon { width: 16px; color: var(--text-dim); }
.menu button.danger { color: var(--danger); }
.menu button.danger:hover { background: rgba(192,57,43,0.07); }
.menu button.danger .icon { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* ============================================================
   SUMMARY CARDS
   ============================================================ */
#client-summary {
  display: grid;
  gap: var(--d-gap);
}
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--d-card-pad-y) var(--d-card-pad-x);
  cursor: pointer;
  user-select: none;
}
.card-head .icon { width: 16px; height: 16px; color: var(--text-dim); display: grid; place-items: center; }
.card-head .icon svg { width: 16px; height: 16px; stroke-width: 2; }
.card-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: "Inter", sans-serif;
}
.card-head .count {
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  padding: 1px 7px;
  background: var(--bg-2);
  border-radius: var(--r-pill);
  font-weight: 500;
}
.card-head .chev {
  margin-left: auto;
  color: var(--muted);
  transition: transform 200ms;
}
.card.closed .chev { transform: rotate(-90deg); }
.card-body {
  border-top: 1px solid var(--border);
  padding: 8px 0;
}
.card.closed .card-body { display: none; }
.card.empty .card-head { cursor: default; }
.card.empty .card-head .count { color: var(--faint); }
.card.empty .chev { display: none; }

/* row — generic summary list item */
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px;
  padding: var(--d-row-pad-y) var(--d-row-pad-x);
  border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: 0; }
.row-main { min-width: 0; }
.row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.row-title .title-text {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
}
.row-title a.title-text { text-decoration: none; }
.row-title a.title-text:hover { color: var(--accent); }
.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.row-meta .field { display: inline-flex; align-items: baseline; gap: 6px; }
.row-meta .field-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.row-meta .field-value { color: var(--text-dim); }
.row-meta .field-value.money { font-family: "Roboto Mono", monospace; color: var(--text); }
.row-meta .field-value.empty { color: var(--faint); font-style: italic; font-weight: 400; }

.row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

/* badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--text-dim);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex: 0 0 auto;
}
.badge .icon { width: 11px; height: 11px; display: grid; place-items: center; }
.badge .icon svg { width: 11px; height: 11px; stroke-width: 2.4; }
.badge.upcoming { background: rgba(102,148,224,0.12); color: #a5c2ee; border-color: rgba(102,148,224,0.35); text-transform: none; letter-spacing: 0; font-weight: 600; }
.badge.done     { background: rgba(69,176,78,0.10); color: #88d18f; border-color: rgba(69,176,78,0.30); }
.badge.archived { background: rgba(112,123,142,0.12); color: var(--muted); }
.badge.spam     { background: rgba(232,85,77,0.12); color: #f08a84; border-color: rgba(232,85,77,0.30); }
.badge.open     { background: rgba(240,179,64,0.10); color: #f0c976; border-color: rgba(240,179,64,0.28); }
.badge.active   { background: rgba(69,176,78,0.10); color: #88d18f; border-color: rgba(69,176,78,0.28); }
.badge.expired  { background: rgba(232,85,77,0.10); color: #f08a84; border-color: rgba(232,85,77,0.28); }
.badge.warranty { background: rgba(255,132,68,0.10); color: #ffb085; border-color: rgba(255,132,68,0.28); }
.badge.warranty.expired { background: rgba(112,123,142,0.10); color: var(--muted); border-color: transparent; }
.badge.inactive { opacity: 0.7; }

.row.inactive { opacity: 0.55; }
.row.archived { opacity: 0.7; }
.row.archived .row-title .title-text { color: var(--text-dim); }

/* property-pill (left-edge accent showing division color when relevant) */
.row.with-accent { padding-left: 13px; border-left: 3px solid transparent; }
.row.accent-eg  { border-left-color: var(--hsp-eg); }
.row.accent-hm  { border-left-color: var(--hsp-hm); }
.row.accent-db  { border-left-color: var(--hsp-db); }
.row.accent-pec { border-left-color: var(--hsp-pec); }

/* ============================================================
   EMPTY / LOADING STATES
   ============================================================ */
.loading {
  padding: 20px 16px;
  color: var(--muted);
  font-size: 13px;
}
.skeleton {
  height: 14px;
  background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton.w-60 { width: 60%; }
.skeleton.w-40 { width: 40%; }
.skeleton.w-30 { width: 30%; }
.empty-line {
  padding: 14px 16px;
  color: var(--muted);
  font-size: 12.5px;
  font-style: italic;
}

/* ============================================================
   CALL DETAILS STRIP
   ============================================================ */
/* Skeleton placeholders rendered inside summary cards while
   /bootstrap is in flight. Same .card/.row markup as the real
   renderer, so the swap is layout-stable — when the real data
   arrives the only visual change is contents fading in via the
   existing hs-fade-in animation. */
.skeleton-row { opacity: 0.55; pointer-events: none; }
.skel {
  display: block;
  background: linear-gradient(90deg,
    var(--bg-3, #F0EBDD) 0%,
    var(--bg-2, #FAF9F4) 50%,
    var(--bg-3, #F0EBDD) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.2s ease-in-out infinite;
  border-radius: 4px;
}
.skel-title  { height: 14px; width: 60%;  margin-bottom: 8px; }
.skel-meta   { height: 11px; width: 80%; }
.skel-pill   { height: 18px; width: 90px; border-radius: 999px; }
.skel-summary{ height: 16px; width: 80px; border-radius: 4px; margin-left: auto; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Card-footer "Load more" button — appended to .card-body when the
   server returns total > loaded for a paginated list. */
.load-more-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--border-2, #D9D5C8);
  background: transparent;
  border-radius: var(--r-sm, 4px);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #6B7280);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.load-more-btn:hover {
  background: var(--bg-2, #FAF9F4);
  border-color: var(--text-dim, #374151);
  color: var(--text, #1F2937);
}
.load-more-btn:disabled { opacity: 0.6; cursor: progress; }
.load-more-btn .lm-meta {
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted, #6B7280);
}

/* Whole-row click target — any row carrying data-row-href is
   clickable to open the QB record in a new tab. Hover feedback
   confirms the affordance. Inline children with their own
   handlers (a, button, .spec-toggle, .load-more-btn) keep working
   because the JS click delegate short-circuits on those. */
[data-row-href] { cursor: pointer; }
[data-row-href]:hover { background: var(--bg-2, #FAF9F4); }
[data-row-href] a, [data-row-href] button { cursor: default; }
[data-row-href] a:hover, [data-row-href] button:hover { cursor: pointer; }

/* Note row body — wraps and shows the actual note content. */
.note-row .note-body {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px 10px;
  background: var(--bg-2);
  border-left: 2px solid var(--border-2);
  border-radius: 2px;
}

/* Smooth-load: anything emerging from `hidden` fades in over 280ms
   so the SPA doesn't pop together piece-by-piece as fetches resolve. */
#status-strip:not([hidden]),
#client-summary:not([hidden]),
#call-details:not([hidden]),
#actions:not([hidden]) {
  animation: hs-fade-in 280ms ease-out;
}
@keyframes hs-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Caller name skeleton → real name is a same-element swap, so add a
   direct opacity transition on .caller-name for the second render
   (when summary resolves and we re-render with stats). */
#caller-header .caller-name,
#caller-header .caller-meta,
.properties-rail-card { transition: opacity 200ms ease-out; }

#call-details[hidden] { display: none !important; }
#call-details {
  position: fixed;
  bottom: 96px;
  left: 0; right: 0;
  z-index: 55;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  flex-wrap: wrap;
}
#call-details[data-status="ended"] { background: rgba(183, 121, 31, 0.08); border-color: var(--warn); }
#call-details .cd-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#call-details .cd-cell + .cd-cell { padding-left: 14px; border-left: 1px solid var(--border-2); }
#call-details .cd-label {
  text-transform: uppercase;
  color: var(--faint);
  letter-spacing: 0.14em;
}
#call-details .cd-value {
  color: var(--text);
  font-weight: 600;
}
#call-details .cd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  background: var(--accent-soft);
  color: var(--accent-d);
  border: 1px solid var(--accent-border);
}
#call-details[data-status="ended"] .cd-pill {
  background: rgba(183, 121, 31, 0.12);
  color: var(--warn);
  border-color: rgba(183, 121, 31, 0.40);
}
#call-details[data-status="stale"] .cd-pill {
  background: rgba(120, 113, 95, 0.18);
  color: var(--muted);
  border-color: var(--border-2);
}
#call-details .cd-pill .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.6s ease-out infinite;
}
#call-details[data-status="ended"] .cd-pill .live-dot,
#call-details[data-status="stale"] .cd-pill .live-dot { animation: none; background: currentColor; }
#call-details .cd-copy {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  padding: 0;
}
#call-details .cd-copy:hover { color: var(--text); }

/* Actions bar sits ~64px tall; with #call-details above, push #app
   bottom padding so cards don't hide behind it. */
#app { padding-bottom: 160px !important; }

/* ============================================================
   TOAST
   ============================================================ */
#toast[hidden] { display: none !important; }
#toast {
  position: fixed;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-2);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 90vw;
}
#toast[data-kind="error"] { border-color: rgba(192,57,43,0.5); color: var(--danger); }
#toast[data-kind="success"] { border-color: var(--accent-border); }
#toast .toast-label { flex: 0 1 auto; }
#toast .toast-undo {
  background: transparent;
  border: 1px solid var(--text-dim);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
#toast .toast-undo:hover { background: var(--bg-3); color: var(--text); border-color: var(--text); }
#toast .toast-undo:disabled { opacity: 0.5; cursor: wait; }

/* ============================================================
   MODAL (minimal — actual modal logic lives in modals/)
   ============================================================ */
#modal-root .modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: grid; place-items: center;
  z-index: 70;
}
#modal-root .modal {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 22px;
  width: min(520px, calc(100% - 32px));
  box-shadow: var(--shadow-2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  #app { padding: 16px 14px 140px; }
  #caller-header { grid-template-columns: 1fr; gap: 14px; }
  .caller-meta { grid-auto-flow: column; justify-content: start; gap: 18px; text-align: left; }
  .caller-name { font-size: 26px; }
  .actions-inner { grid-template-columns: 1fr 1fr; }
  .actions-inner .btn.primary { grid-column: 1 / -1; }
  .row { grid-template-columns: 1fr; }
  .row-side { align-items: flex-start; text-align: left; }
}

/* New Client page — rendered when SPA opens without contactId. */
.new-client-page {
  max-width: 720px;
  margin: 8px auto 24px;
  padding: 0 16px;
}
.new-client-page .ncp-head h2 {
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--d-text, #E8E2D4);
}
.new-client-page .ncp-sub {
  font-size: 12px;
  color: var(--d-muted, #8A8474);
  margin: 0 0 16px;
  line-height: 1.5;
}
.new-client-page .ncp-form { display: flex; flex-direction: column; gap: 14px; }
.new-client-page .ncp-section {
  border: 1px solid var(--d-divider, #2A2722);
  border-radius: 6px;
  padding: 12px 14px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.new-client-page .ncp-section > legend {
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--d-muted, #8A8474);
  padding: 0 6px;
}
.new-client-page .ncp-optional {
  color: var(--d-muted, #8A8474);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.new-client-page .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.new-client-page .field-row.threes { grid-template-columns: 2fr 1fr 1fr; }
.new-client-page .field-label {
  display: flex;
  gap: 4px;
  font-size: 11px;
  color: var(--d-muted, #8A8474);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.new-client-page .field-label .req { color: var(--d-danger, #E26659); }
.new-client-page .field-help {
  margin-top: 4px;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 10px;
  color: var(--d-muted, #8A8474);
  letter-spacing: 0.04em;
}
.new-client-page .input,
.new-client-page .select {
  width: 100%;
  background: var(--d-input-bg, #1F1D17);
  border: 1px solid var(--d-divider, #2A2722);
  color: var(--d-text, #E8E2D4);
  padding: 8px 10px;
  font: inherit;
  border-radius: 4px;
  box-sizing: border-box;
}
.new-client-page .input:focus,
.new-client-page .select:focus {
  outline: none;
  border-color: var(--d-accent, #B89968);
}
.new-client-page .select-wrap { position: relative; }
.new-client-page .select-wrap::after {
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--d-muted, #8A8474);
  font-size: 10px;
}
.new-client-page .ncp-error {
  background: rgba(226, 102, 89, 0.1);
  border: 1px solid var(--d-danger, #E26659);
  color: var(--d-danger, #E26659);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
}
.new-client-page .ncp-actions {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 560px) {
  .new-client-page .field-row,
  .new-client-page .field-row.threes { grid-template-columns: 1fr; }
}

/* Phone siblings warning banner — renders above #caller-header when
   /bootstrap reports other Clients records share a phone number with
   the loaded contact. Amber, prominent, but non-blocking. */
.phone-siblings-banner {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 6px;
  margin: 10px 16px 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
  position: relative;
  z-index: 5;
}
.phone-siblings-banner .psb-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.phone-siblings-banner .psb-icon {
  color: #F59E0B;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.phone-siblings-banner .psb-text {
  flex: 1 1 auto;
  color: var(--d-text, #E8E2D4);
  min-width: 200px;
}
.phone-siblings-banner .psb-actions {
  position: relative;
  flex-shrink: 0;
}
.phone-siblings-banner .psb-trigger {
  background: transparent;
  border: 1px solid rgba(245, 158, 11, 0.55);
  color: #F59E0B;
  padding: 6px 12px;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.phone-siblings-banner .psb-trigger:hover {
  background: rgba(245, 158, 11, 0.18);
}
.phone-siblings-banner .psb-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  max-width: 380px;
  background: var(--d-bg, #1A1916);
  border: 1px solid var(--d-divider, #2A2722);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 50;
  overflow: hidden;
}
.phone-siblings-banner .psb-menu-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--d-text, #E8E2D4);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid var(--d-divider, #2A2722);
}
.phone-siblings-banner .psb-menu-row:last-child { border-bottom: 0; }
.phone-siblings-banner .psb-menu-row:hover:not(.psb-menu-current) {
  background: rgba(245, 158, 11, 0.10);
}
.phone-siblings-banner .psb-menu-current {
  cursor: default;
  color: var(--d-muted, #8A8474);
  background: rgba(255, 255, 255, 0.02);
}
.phone-siblings-banner .psb-menu-name {
  font-weight: 600;
}
.phone-siblings-banner .psb-menu-id {
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11px;
  color: var(--d-muted, #8A8474);
}
html[data-theme="light"] .phone-siblings-banner {
  background: rgba(245, 158, 11, 0.10);
}
html[data-theme="light"] .phone-siblings-banner .psb-text {
  color: #1A1916;
}
html[data-theme="light"] .phone-siblings-banner .psb-menu {
  background: #FFFFFF;
  border-color: #DDD;
}
html[data-theme="light"] .phone-siblings-banner .psb-menu-row {
  color: #1A1916;
  border-bottom-color: #EEE;
}