/* ═════════════════════════════════════════════════════════════════════════════
   js/comms-dock.css — WIP-UI-COMMS-HUB-01 (mockup-exact)
   Global Comms Dock — fixed bottom-right bubbles + inbox panel + SMS thread.

   Classes match `spartancommshubredesign_1.html` verbatim where they don't
   collide with the global CSS namespace. The dock container scopes all child
   selectors so `.bubble`, `.timer`, `.msg` etc. only apply inside the dock.

   prefers-reduced-motion: reduce gates the four pulse animations.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens local to the dock (mirror spartan-tokens.css with fallbacks) ── */
.comms-dock,
.thread-panel,
.inbox-panel {
  --cdh-red: #C41230;
  --cdh-red-dark: #A60F28;
  --cdh-pale-red: #FBF3F4;
  --cdh-ink: #0A0A0A;
  --cdh-s50: #FAFAF9;
  --cdh-s100: #F5F5F4;
  --cdh-s200: #E7E5E4;
  --cdh-s300: #D6D3D1;
  --cdh-s400: #A8A29E;
  --cdh-s500: #78716C;
  --cdh-s600: #57534E;
  --cdh-s700: #44403C;
  --cdh-s900: #1C1917;
  --cdh-q-hot: #15803D;
  --cdh-q-warm: #D97706;
  --cdh-info-bg: #DBEAFE;
  --cdh-info-fg: #1D4ED8;
  --cdh-shadow-bubble: 0 8px 24px -4px rgba(10,10,10,.28), 0 2px 6px rgba(10,10,10,.08);
  --cdh-shadow-bubble-hover: 0 12px 32px -4px rgba(10,10,10,.38), 0 3px 8px rgba(10,10,10,.12);
  --cdh-shadow-panel: 0 24px 60px -12px rgba(10,10,10,.35), 0 6px 16px rgba(10,10,10,.12);
  --cdh-shadow-rest: 0 1px 2px rgba(10,10,10,.03), 0 1px 1px rgba(10,10,10,.02);
  --cdh-ease: cubic-bezier(.4,0,.2,1);
  --cdh-t: 180ms var(--cdh-ease);
}

/* ── Pulse keyframes (mockup-exact rgba + ring radii) ─────────────────── */
@keyframes cdh-pulse-call   { 0%, 100% { box-shadow: var(--cdh-shadow-bubble), 0 0 0 0  rgba(196,18,48,.5); }  70% { box-shadow: var(--cdh-shadow-bubble), 0 0 0 16px rgba(196,18,48,0); } }
@keyframes cdh-pulse-unread { 0%, 100% { box-shadow: var(--cdh-shadow-bubble), 0 0 0 0  rgba(21,128,61,.5); }  70% { box-shadow: var(--cdh-shadow-bubble), 0 0 0 14px rgba(21,128,61,0); } }
@keyframes cdh-pulse-missed { 0%, 100% { box-shadow: var(--cdh-shadow-bubble), 0 0 0 0  rgba(196,18,48,.45); } 70% { box-shadow: var(--cdh-shadow-bubble), 0 0 0 14px rgba(196,18,48,0); } }
@keyframes cdh-pulse-badge  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes cdh-fade-in-up   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .comms-dock .bubble-call,
  .comms-dock .bubble-inbox.has-unread,
  .comms-dock .bubble-inbox.has-missed,
  .comms-dock .bubble-badge {
    animation: none !important;
  }
  .thread-panel, .inbox-panel { animation: none !important; }
}

/* ── Dock container ───────────────────────────────────────────────────── */
.comms-dock {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 60;
  align-items: flex-end;
  font-family: var(--ff-sans, 'Archivo', system-ui, sans-serif);
}

/* ── Bubble base + variants ───────────────────────────────────────────── */
.comms-dock .bubble {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all var(--cdh-t);
  box-shadow: var(--cdh-shadow-bubble);
  border: none;
  color: #fff;
  padding: 0;
  font-family: inherit;
}
.comms-dock .bubble:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--cdh-shadow-bubble-hover);
}
.comms-dock .bubble .ico {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.comms-dock .bubble-inbox { background: var(--cdh-ink); }
.comms-dock .bubble-inbox:hover { background: var(--cdh-s900); }
.comms-dock .bubble-inbox.has-unread { animation: cdh-pulse-unread 1.8s infinite; }
.comms-dock .bubble-inbox.has-missed { animation: cdh-pulse-missed 1.8s infinite; }
/* When both: missed (red) wins visually */
.comms-dock .bubble-inbox.has-unread.has-missed { animation: cdh-pulse-missed 1.8s infinite; }

/* Phone bubble — dark ink background, red pulse ring when missed. */
.comms-dock .bubble-phone { background: var(--cdh-ink); }
.comms-dock .bubble-phone:hover { background: var(--cdh-s900); }
.comms-dock .bubble-phone.has-missed { animation: cdh-pulse-missed 1.8s infinite; }
.comms-dock .bubble-phone .bubble-badge { background: var(--cdh-red); }

/* Messages bubble — dark ink background, green pulse ring when unread.
   The mockup screenshot shows this as a black bubble with a green badge
   below the active-call bubble. */
.comms-dock .bubble-messages { background: var(--cdh-ink); }
.comms-dock .bubble-messages:hover { background: var(--cdh-s900); }
.comms-dock .bubble-messages.has-unread { animation: cdh-pulse-unread 1.8s infinite; }
.comms-dock .bubble-messages .bubble-badge { background: var(--cdh-q-hot); }

/* Email bubble — per-user inbox; pulses blue when unread.
   Same ink background + hover treatment as phone + messages so the three
   bubbles stack visually consistent. Blue accent because it sits
   alongside the red (phone) + green (messages) family already in use.
   Active state (.active = aria-current="page") draws a thin blue ring
   so the rep can tell at a glance they're already on the email page.
   Focus-visible adds the same ring for keyboard nav.
   WIP-V2.1-PAGES-POLISH-02. */
@keyframes cdh-pulse-email { 0%, 100% { box-shadow: var(--cdh-shadow-bubble), 0 0 0 0 rgba(29,78,216,.5); } 70% { box-shadow: var(--cdh-shadow-bubble), 0 0 0 14px rgba(29,78,216,0); } }
.comms-dock .bubble-email { background: var(--cdh-ink); }
.comms-dock .bubble-email:hover { background: var(--cdh-s900); }
.comms-dock .bubble-email.has-unread-email { animation: cdh-pulse-email 1.8s infinite; }
.comms-dock .bubble-email.active {
  box-shadow: var(--cdh-shadow-bubble), 0 0 0 2px var(--cdh-info-fg);
}
.comms-dock .bubble-email:focus-visible {
  outline: none;
  box-shadow: var(--cdh-shadow-bubble), 0 0 0 3px rgba(29,78,216,.5);
}
.comms-dock .bubble-email .bubble-badge { background: var(--cdh-info-fg); }
.comms-dock .bubble-badge.blue { background: var(--cdh-info-fg); }

@media (prefers-reduced-motion: reduce) {
  .comms-dock .bubble-phone.has-missed,
  .comms-dock .bubble-messages.has-unread,
  .comms-dock .bubble-email.has-unread-email {
    animation: none !important;
  }
}

.comms-dock .bubble-call {
  background: var(--cdh-red);
  animation: cdh-pulse-call 1.4s infinite;
}
.comms-dock .bubble-call:hover { background: var(--cdh-red-dark); }
.comms-dock .bubble-call .timer {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cdh-ink);
  color: #fff;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px -2px rgba(10,10,10,.3);
}
.comms-dock .bubble-call .timer::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--cdh-ink);
  transform: translateX(-50%);
}

.comms-dock .bubble-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--cdh-red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 3px solid var(--cdh-s50);
  letter-spacing: -0.005em;
  animation: cdh-pulse-badge 2s ease-in-out infinite;
}
.comms-dock .bubble-badge.green { background: var(--cdh-q-hot); }
.comms-dock .bubble-inbox .bubble-badge { background: var(--cdh-q-hot); }
.comms-dock .bubble-inbox.has-missed .bubble-badge { background: var(--cdh-red); }

.comms-dock .bubble-tooltip {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--cdh-ink);
  color: #fff;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px -2px rgba(10,10,10,.3);
  pointer-events: none;
  opacity: 0;
  transition: all var(--cdh-t);
}
.comms-dock .bubble:hover .bubble-tooltip { opacity: 1; right: 70px; }
.comms-dock .bubble-tooltip::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid var(--cdh-ink);
  transform: translateY(-50%);
}

/* ── Identity chip ────────────────────────────────────────────────────── */
.comms-dock .dock-identity {
  background: #fff;
  border: 1px solid var(--cdh-s200);
  border-radius: 14px;
  padding: 8px 12px 8px 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: var(--cdh-shadow-bubble);
  margin-top: 4px;
  cursor: pointer;
  transition: all var(--cdh-t);
  font-family: inherit;
  color: var(--cdh-ink);
}
.comms-dock .dock-identity:hover {
  border-color: var(--cdh-ink);
  transform: translateY(-1px);
  box-shadow: var(--cdh-shadow-bubble-hover);
}
.comms-dock .dock-id-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cdh-red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.005em;
}
.comms-dock .dock-id-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
}
.comms-dock .dock-id-name {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--cdh-ink);
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.comms-dock .dock-id-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--cdh-s500);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.comms-dock .dock-id-num.warn { color: var(--cdh-red); }

/* ── Inbox panel (rendered when dock open) ────────────────────────────── */
.inbox-panel {
  position: fixed;
  bottom: 24px;
  right: 96px;
  width: 400px;
  height: 580px;
  background: #fff;
  border: 1px solid var(--cdh-s200);
  border-radius: 18px;
  box-shadow: var(--cdh-shadow-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 59;
  animation: cdh-fade-in-up .22s var(--cdh-ease);
  font-family: var(--ff-sans, 'Archivo', system-ui, sans-serif);
}
.inbox-panel .ip-h {
  padding: 14px 16px;
  border-bottom: 1px solid var(--cdh-s100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
}
.inbox-panel .ip-h-l { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.inbox-panel .ip-h-l .ico { color: var(--cdh-s500); width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.inbox-panel .ip-title { font-size: 14px; font-weight: 800; color: var(--cdh-ink); letter-spacing: -0.015em; }
.inbox-panel .ip-title b { color: var(--cdh-red); font-weight: 800; }
.inbox-panel .ip-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--cdh-s200);
  color: var(--cdh-s500);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all var(--cdh-t);
}
.inbox-panel .ip-close:hover { background: var(--cdh-s100); color: var(--cdh-ink); }

.inbox-panel .ip-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--cdh-s100);
  background: var(--cdh-s50);
}
.inbox-panel .ip-tab {
  flex: 1;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cdh-s500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all var(--cdh-t);
  font-family: inherit;
}
.inbox-panel .ip-tab:hover { color: var(--cdh-ink); }
.inbox-panel .ip-tab.on {
  background: #fff;
  color: var(--cdh-ink);
  box-shadow: var(--cdh-shadow-rest);
}
.inbox-panel .ip-tab-c {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--cdh-s200);
  color: var(--cdh-s700);
}
.inbox-panel .ip-tab.on .ip-tab-c { background: var(--cdh-ink); color: #fff; }

.inbox-panel .ip-body {
  flex: 1;
  overflow-y: auto;
  background: #fff;
}
.inbox-panel .ip-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--cdh-s500);
  font-weight: 600;
  line-height: 1.5;
}
.inbox-panel .ip-empty-sub {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--cdh-s400);
  font-weight: 500;
}

/* Inbox row — clickable, with inline call + text quick-action buttons */
.inbox-panel .ip-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--cdh-s100);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background var(--cdh-t);
  position: relative;
  cursor: pointer;
}
.inbox-panel .ip-row:hover { background: var(--cdh-s50); }
.inbox-panel .ip-row.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cdh-q-hot);
}
.inbox-panel .ip-row.missed::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cdh-red);
}
.inbox-panel .ip-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cdh-s200);
  color: var(--cdh-s700);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.inbox-panel .ip-mid { flex: 1; min-width: 0; }
.inbox-panel .ip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.inbox-panel .ip-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--cdh-ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.inbox-panel .ip-name .ico {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}
.inbox-panel .ip-name .missed-ico { color: var(--cdh-red); }
.inbox-panel .ip-name .sms-ico    { color: var(--cdh-q-hot); }
.inbox-panel .ip-name .vm-ico     { color: var(--cdh-info-fg); }
.inbox-panel .ip-time {
  font-size: 10px;
  color: var(--cdh-s400);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.inbox-panel .ip-snippet {
  font-size: 11px;
  color: var(--cdh-s500);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}
.inbox-panel .ip-snippet b { color: var(--cdh-s700); font-weight: 700; }

/* Per-row quick actions — pulse-out call/text buttons for missed/unread */
.inbox-panel .ip-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.inbox-panel .ip-qa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid var(--cdh-s200);
  background: #fff;
  color: var(--cdh-s700);
  transition: all var(--cdh-t);
  font-family: inherit;
}
.inbox-panel .ip-qa:hover {
  border-color: var(--cdh-ink);
  color: var(--cdh-ink);
  transform: translateY(-1px);
  box-shadow: var(--cdh-shadow-rest);
}
.inbox-panel .ip-qa .ico {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.inbox-panel .ip-qa.call-back {
  background: var(--cdh-red);
  color: #fff;
  border-color: var(--cdh-red);
  box-shadow: 0 1px 2px rgba(196,18,48,.2), 0 4px 10px -3px rgba(196,18,48,.4);
}
.inbox-panel .ip-qa.call-back:hover {
  background: var(--cdh-red-dark);
  box-shadow: 0 2px 4px rgba(196,18,48,.3), 0 8px 16px -4px rgba(196,18,48,.5);
}
.inbox-panel .ip-qa.reply-text {
  background: var(--cdh-ink);
  color: #fff;
  border-color: var(--cdh-ink);
  box-shadow: 0 1px 2px rgba(10,10,10,.15), 0 4px 10px -3px rgba(10,10,10,.3);
}
.inbox-panel .ip-qa.reply-text:hover {
  background: var(--cdh-s900);
}

/* ── Thread panel (SMS) ───────────────────────────────────────────────── */
.thread-panel {
  position: fixed;
  bottom: 24px;
  right: 96px;
  width: 400px;
  height: 580px;
  background: #fff;
  border: 1px solid var(--cdh-s200);
  border-radius: 18px;
  box-shadow: var(--cdh-shadow-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 59;
  animation: cdh-fade-in-up .22s var(--cdh-ease);
  font-family: var(--ff-sans, 'Archivo', system-ui, sans-serif);
}
.thread-panel .tp-h {
  padding: 13px 16px;
  background: linear-gradient(135deg, #1A0E12 0%, #0A0A0A 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  overflow: hidden;
}
.thread-panel .tp-h::before {
  content: '';
  position: absolute;
  left: -30%;
  top: -50%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(196,18,48,.25) 0%, transparent 60%);
  pointer-events: none;
}
.thread-panel .tp-back {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--cdh-t);
  position: relative;
  z-index: 1;
  border: none;
  font-family: inherit;
}
.thread-panel .tp-back:hover { background: rgba(255,255,255,.16); }
.thread-panel .tp-back .ico { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.thread-panel .tp-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #7C3AED;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.thread-panel .tp-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.thread-panel .tp-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 7px;
}
.thread-panel .tp-name .stage-badge {
  font-size: 8.5px;
  padding: 2px 6px;
  background: var(--cdh-red);
  color: #fff;
  letter-spacing: 0.1em;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 800;
}
.thread-panel .tp-phone {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  margin-top: 2px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 5px;
}
.thread-panel .tp-phone .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
}
.thread-panel .tp-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.thread-panel .tp-action {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--cdh-t);
  border: none;
  font-family: inherit;
}
.thread-panel .tp-action:hover { background: rgba(255,255,255,.16); }
.thread-panel .tp-action .ico { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }

.thread-panel .tp-linked {
  padding: 9px 16px;
  background: var(--cdh-s50);
  border-bottom: 1px solid var(--cdh-s100);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--cdh-s600);
  font-weight: 700;
  letter-spacing: 0.01em;
  flex-wrap: wrap;
}
.thread-panel .tp-linked .ico {
  width: 11px;
  height: 11px;
  color: var(--cdh-s400);
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}
.thread-panel .tp-linked b { color: var(--cdh-ink); font-weight: 800; }

/* AUTO-ATTACH pill — small red rectangle next to the linked entity label
   indicating the comm will auto-attach to that stage on save. Matches the
   mockup screenshot Phoenix sent on 2026-05-22. */
.thread-panel .auto-attach-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--cdh-red);
  color: #fff;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 4px;
}

/* JOB / DEAL / LEAD stage badge inside the thread header — small coloured
   rectangle next to the customer name. The colour is set inline by the
   hydrate step so each stage stays distinct (red for JOB, purple for DEAL,
   blue for LEAD). */
.thread-panel .stage-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--cdh-red);
  color: #fff;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 6px;
}

.thread-panel .tp-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--cdh-s50);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-image: radial-gradient(circle at 20% 20%, rgba(196,18,48,.02) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(21,128,61,.02) 0%, transparent 50%);
}
.thread-panel .tp-date-divider {
  align-self: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--cdh-s400);
  background: #fff;
  padding: 3px 10px;
  border-radius: 11px;
  border: 1px solid var(--cdh-s200);
  letter-spacing: 0.04em;
  margin: 8px 0 4px;
}
.thread-panel .msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  animation: cdh-fade-in-up .2s var(--cdh-ease);
}
.thread-panel .msg.in  { align-self: flex-start; align-items: flex-start; }
.thread-panel .msg.out { align-self: flex-end;   align-items: flex-end;   }
.thread-panel .msg-bubble {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(10,10,10,.04);
}
.thread-panel .msg.in .msg-bubble {
  background: #fff;
  color: var(--cdh-ink);
  border: 1px solid var(--cdh-s200);
  border-bottom-left-radius: 5px;
}
.thread-panel .msg.out .msg-bubble {
  background: var(--cdh-red);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 1px 2px rgba(196,18,48,.2);
}
.thread-panel .msg-meta {
  font-size: 9.5px;
  color: var(--cdh-s400);
  font-weight: 600;
  margin-top: 3px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.02em;
}
.thread-panel .msg-meta.delivered { color: var(--cdh-info-fg); }
.thread-panel .msg-meta.read      { color: var(--cdh-q-hot); }

.thread-panel .tp-compose {
  padding: 12px 14px;
  border-top: 1px solid var(--cdh-s100);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.thread-panel .tp-input-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.thread-panel .tp-input {
  flex: 1;
  padding: 10px 12px;
  background: var(--cdh-s50);
  border: 1px solid var(--cdh-s200);
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.4;
  min-height: 42px;
  color: var(--cdh-ink);
  resize: none;
  transition: all var(--cdh-t);
  font-family: inherit;
}
.thread-panel .tp-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--cdh-ink);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.thread-panel .tp-send {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--cdh-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--cdh-t);
  flex-shrink: 0;
  border: none;
  font-family: inherit;
}
.thread-panel .tp-send:hover {
  background: var(--cdh-red);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(196,18,48,.5);
}
.thread-panel .tp-send .ico { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Telephony provisioning panel — reuses .inbox-panel chrome with a centred
   body of form controls. Mounted when the rep clicks "Set up Twilio number"
   on the identity chip. */
.inbox-panel.telephony-panel { height: auto; max-height: 460px; }
.inbox-panel.telephony-panel select:focus {
  outline: none;
  border-color: var(--cdh-ink) !important;
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.inbox-panel.telephony-panel code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  background: var(--cdh-s100);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--cdh-s700);
}

/* Inbox row aliases — the WIP-UI-COMMS-FIX-01 prompt uses these class names
   for the delegated handler. Aliased onto the existing .ip-* rules so the
   inline onclick + the delegated handler both find the same buttons. */
.inbox-panel .inbox-row { /* alias of .ip-row */ }
.inbox-panel .inbox-row-actions { /* alias of .ip-actions */ }
.inbox-panel .comm-btn {
  /* identical to .ip-qa — already styled above via shared selector */
}

/* Small screens — full-width panels */
@media (max-width: 540px) {
  .inbox-panel, .thread-panel {
    right: 16px;
    bottom: 16px;
    width: calc(100vw - 32px);
  }
}

/* ── Collapse / expand controls ─────────────────────────────────────────────
   The full bubble stack covered invoice totals + form footers, so users can
   hide it. `.comms-dock-mini` is the tiny floating chip shown when collapsed;
   `.comms-dock-collapse` is the small chevron on the expanded dock.
   ─────────────────────────────────────────────────────────────────────────── */

.comms-dock-mini {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.12);
  z-index: 60;
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  font-family: inherit;
}
.comms-dock-mini:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.15);
  background: #c41230;
}
.comms-dock-mini .ico { width: 18px; height: 18px; }
.comms-dock-mini.has-activity { background: #c41230; }
.comms-dock-mini.has-activity::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #c41230;
  opacity: 0.6;
  animation: comms-dock-mini-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes comms-dock-mini-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0;   }
}
.comms-dock-mini-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #c41230;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Chevron handle on the expanded dock — top-right of the .comms-dock aside.
   IMPORTANT: don't re-declare `position` here. The base .comms-dock rule
   above uses `position: fixed` to pin the dock to the viewport's bottom-
   right corner; overriding it back to relative drops the dock into normal
   flow and it lands at the bottom of the document body instead of the
   bottom of the viewport. We only add padding-top here to make room for
   the absolutely-positioned chevron. */
.comms-dock { padding-top: 22px; }
.comms-dock-collapse {
  position: absolute;
  top: -4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(26,26,26,0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  opacity: 0.7;
  transition: opacity .15s ease, background-color .15s ease, transform .15s ease;
}
.comms-dock-collapse:hover { opacity: 1; background: #c41230; transform: scale(1.06); }
.comms-dock-collapse .ico { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phone-page dialpad — matches the Comms dock action language.
   Call pulses RED (the action reps should take first), Text pulses GREEN.
   Self-contained box-shadows (no --cdh-* vars) so the pulse works on the Phone
   page, which isn't inside a .comms-dock container.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes spk-pulse-red {
  0%, 100% { box-shadow: 0 1px 2px rgba(196,18,48,.25), 0 6px 16px -4px rgba(196,18,48,.45), 0 0 0 0  rgba(196,18,48,.55); }
  70%      { box-shadow: 0 1px 2px rgba(196,18,48,.25), 0 6px 16px -4px rgba(196,18,48,.45), 0 0 0 13px rgba(196,18,48,0); }
}
@keyframes spk-pulse-green {
  0%, 100% { box-shadow: 0 1px 2px rgba(21,128,61,.25), 0 6px 16px -4px rgba(21,128,61,.45), 0 0 0 0  rgba(21,128,61,.55); }
  70%      { box-shadow: 0 1px 2px rgba(21,128,61,.25), 0 6px 16px -4px rgba(21,128,61,.45), 0 0 0 13px rgba(21,128,61,0); }
}

/* Number display — big, bold, monospace; turns red on focus. */
.spartan-dialpad .spk-num {
  flex: 1;
  font-family: 'SF Mono', ui-monospace, 'Roboto Mono', monospace;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #0A0A0A;
  padding: 11px 13px;
  border: 2px solid #E7E5E4;
  border-radius: 12px;
  outline: none;
  background: #fff;
  transition: border-color 140ms cubic-bezier(.4,0,.2,1);
}
.spartan-dialpad .spk-num:focus { border-color: #C41230; }
.spartan-dialpad .spk-num::placeholder { color: #D6D3D1; font-weight: 600; letter-spacing: .5px; }

/* Keys — bold, with a tactile press (scale + red tint) on click. */
.spartan-dialpad .spk-key {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 16px 0;
  min-height: 58px;
  background: #fff;
  border: 1px solid #E7E5E4;
  border-radius: 14px;
  color: #1C1917;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
  transition: transform 90ms cubic-bezier(.4,0,.2,1), background 120ms, border-color 120ms, box-shadow 120ms;
}
.spartan-dialpad .spk-key:hover { background: #FAFAF9; border-color: #D6D3D1; }
.spartan-dialpad .spk-key:active {
  transform: scale(.93);
  background: #FBF3F4;
  border-color: #C41230;
  box-shadow: inset 0 0 0 1.5px rgba(196,18,48,.35);
}

/* Call / Text — pulsing action buttons (red / green). */
.spartan-dialpad .spk-action {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  transition: transform 120ms cubic-bezier(.4,0,.2,1), filter 120ms;
}
.spartan-dialpad .spk-action .ico { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.spartan-dialpad .spk-call { background: #C41230; animation: spk-pulse-red 1.5s infinite; }
.spartan-dialpad .spk-text { background: #15803D; animation: spk-pulse-green 1.5s infinite; }
.spartan-dialpad .spk-action:hover  { transform: translateY(-1px); filter: brightness(1.05); }
.spartan-dialpad .spk-action:active { transform: translateY(0) scale(.99); }

@media (prefers-reduced-motion: reduce) {
  .spartan-dialpad .spk-call,
  .spartan-dialpad .spk-text { animation: none !important; }
  .spartan-dialpad .spk-key  { transition: none !important; }
}

/* In-dock dialpad layout (the 'Dial' tab). Reuses the .spk-* button visuals
   above; this only lays out the input row, key grid, and action row to fit
   the dock panel. */
.cdh-dialpad { padding: 14px 16px 18px; }
.cdh-dialpad .cdh-dial-input-row { display: flex; gap: 6px; align-items: stretch; margin-bottom: 12px; }
.cdh-dialpad .spk-num { flex: 1; min-width: 0; }
.cdh-dialpad .cdh-dial-back {
  padding: 0 14px;
  background: #F5F5F4;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #44403C;
  transition: background 120ms;
}
.cdh-dialpad .cdh-dial-back:hover { background: #E7E5E4; }
.cdh-dialpad .cdh-dial-back .ico { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.cdh-dialpad .cdh-dial-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.cdh-dialpad .cdh-dial-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Header right cluster (minimise + close). Harmless on desktop — wraps the
   existing close button; the close stays right-aligned via .ip-h space-between. */
.ip-h-r { display: inline-flex; align-items: center; gap: 8px; }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE (native sales app only — gated on .cd-mobile, set by comms-dock.js
   via isNativeWrapper()). The open panel becomes an 80vh bottom sheet and the
   dock buttons relocate into an iOS-style tab bar in its footer. The desktop
   CRM dock is completely unaffected (it never gets the .cd-mobile class).
   ════════════════════════════════════════════════════════════════════════ */
.cd-mobile .cd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, .45);
  z-index: 60;
  animation: cd-backdrop-in .18s var(--cdh-ease);
}
@keyframes cd-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* 80vh bottom sheet — full width, rounded top, slides up. */
.cd-mobile .inbox-panel,
.cd-mobile .thread-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100vw;
  height: 80vh;
  max-height: 80vh;
  border-radius: 18px 18px 0 0;
  z-index: 61;
  animation: cd-sheet-up .26s var(--cdh-ease);
}
@keyframes cd-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Minimise chevron in the header (collapses the dock to the floating chip). */
.cd-mobile .ip-min {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--cdh-s200);
  color: var(--cdh-s500);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all var(--cdh-t);
}
.cd-mobile .ip-min:hover { background: var(--cdh-s100); color: var(--cdh-ink); }
.cd-mobile .ip-min .ico { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* iOS-style bottom tab bar — the relocated dock buttons. */
.cd-tabbar {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  border-top: 1px solid var(--cdh-s200);
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}
.cd-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 7px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cdh-s500);
  font-family: inherit;
  transition: color var(--cdh-t);
}
.cd-tab:active { opacity: .55; }
.cd-tab.on { color: var(--cdh-red); }
.cd-tab .ico { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.cd-tab-ico { position: relative; display: inline-flex; }
.cd-tab-l { font-size: 10px; font-weight: 700; letter-spacing: .01em; }
.cd-tab-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cdh-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}
.cd-tab-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cdh-s500);
}
.cd-tab-badge.red { background: var(--cdh-red); }
.cd-tab-badge.green { background: var(--cdh-q-hot); }
.cd-tab-badge.blue { background: var(--cdh-info-fg); }

/* Active-call timer floats top-right above the sheet (keeps the live call). */
.cd-mobile .cd-call-float {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 12px;
  bottom: auto;
  z-index: 62;
}

/* Profile header (name + mobile number) at the top of the mobile sheet —
   replaces the old "Santosh's inbox" title; tap = telephony settings. */
.cd-mobile .cd-prof-h { gap: 10px; }
.cd-prof {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.cd-prof-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cdh-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.cd-prof-meta { min-width: 0; }
.cd-prof-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--cdh-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-prof-num { font-size: 12px; color: var(--cdh-s500); }
.cd-prof-num.warn { color: var(--cdh-red); font-weight: 700; }

/* 6-tab bar: keep icons + labels compact so all six fit on a phone. */
.cd-mobile .cd-tab { padding: 8px 2px 6px; gap: 2px; }
.cd-mobile .cd-tab .ico { width: 21px; height: 21px; }
.cd-mobile .cd-tab-l { font-size: 9px; }

/* Scroll isolation — the sheet's body scrolls; nothing chains to the page.
   Paired with the JS body-pin (html.cd-bg-locked) so the background is frozen
   while the sheet is open, and fully restored on close. */
.cd-mobile .ip-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cd-mobile .inbox-panel,
.cd-mobile .thread-panel { overscroll-behavior: contain; }
.cd-mobile .cd-backdrop { touch-action: none; }
html.cd-bg-locked,
html.cd-bg-locked body { overflow: hidden; }

/* ── Auto-hide while a modal / drawer / overlay is open ─────────────────────
   When any .ovl / .panel / .modal-bg / .cw-modal-overlay appears inside #app
   the JS adds comms-dock--overlay-open to #comms-dock-root.  Both the expanded
   dock and the collapsed mini-chip are hidden so they can never block a form
   footer (e.g. the "Create lead" button in the add-lead drawer — S-043).
   pointer-events:none alone is insufficient because the dock still occupies
   visual space and can cover the button; visibility:hidden + opacity:0 removes
   it from view while keeping it in the DOM so no layout side-effects occur.
   ─────────────────────────────────────────────────────────────────────────── */
#comms-dock-root.comms-dock--overlay-open .comms-dock,
#comms-dock-root.comms-dock--overlay-open .comms-dock-mini,
#comms-dock-root.comms-dock--overlay-open .inbox-panel,
#comms-dock-root.comms-dock--overlay-open .thread-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, visibility 0s 120ms;
}

/* ── Dial tab: one cohesive dark dialer view (native sales app) ──────────────
   On the Dial tab the whole sheet matches the keypad's dark so it reads as one
   view instead of a black keypad floating in a white sheet. Toggled by
   comms-dock.js (cd-sheet-dial-dark on the .inbox-panel). The OTHER tabs
   (All/SMS/Calls/VM/Email) keep the default light sheet. */
.cd-mobile .inbox-panel.cd-sheet-dial-dark {
  background: linear-gradient(to bottom right, #1c1917, #292524, #1c1917);
}
.cd-mobile .cd-sheet-dial-dark .ip-body { background: transparent; }
/* Header bg must go transparent too (it's white by default) so the dark sheet
   shows through and the (now-white) rep name is visible — was white-on-white. */
.cd-mobile .cd-sheet-dial-dark .cd-prof-h,
.cd-mobile .cd-sheet-dial-dark .ip-h { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.08); }
.cd-sheet-dial-dark .cd-prof-name { color: #fff; }
.cd-sheet-dial-dark .cd-prof-num { color: #a8a29e; }
.cd-sheet-dial-dark .cd-prof-num.warn { color: #fb7185; }
.cd-sheet-dial-dark .ip-close { color: #d6d3d1; }
.cd-sheet-dial-dark .ip-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }