/* ═════════════════════════════════════════════════════════════════════════════
   js/comms-banner.css — unified foreground heads-up banner (chat + SMS).

   Mounts at #comms-banner-root (body level). Sits at the very top, centered,
   above remote-call-banner (z 9990) so a chat/SMS heads-up overlays cleanly.
   Tap the card to open; the × dismisses. prefers-reduced-motion disables slides.
   ═════════════════════════════════════════════════════════════════════════════ */

#comms-banner-root {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9991;
  display: flex;
  justify-content: center;
  pointer-events: none;   /* let the empty strip pass clicks through */
}

.cb-card {
  pointer-events: auto;
  margin-top: calc(10px + env(safe-area-inset-top));
  width: min(440px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: #fff;
  border: 1px solid #E7E5E4;
  border-radius: 16px;
  box-shadow: 0 16px 40px -12px rgba(10,10,10,.35), 0 4px 12px rgba(10,10,10,.12);
  animation: cb-in .22s cubic-bezier(.4,0,.2,1);
  font-family: var(--ff-sans, 'Archivo', system-ui, sans-serif);
}
/* The tappable header row (avatar + text + dismiss). */
.cb-main { display: flex; align-items: center; gap: 11px; padding: 5px 6px; cursor: pointer; }
.cb-card.cb-out { animation: cb-out .2s cubic-bezier(.4,0,.2,1) forwards; }

/* Inline quick-reply (chat notifications) — WhatsApp heads-up style. */
.cb-reply { display: flex; align-items: center; gap: 7px; padding: 4px 6px 6px; }
.cb-reply-input {
  flex: 1; min-width: 0; height: 38px; padding: 0 14px;
  border: 1px solid #E7E5E4; border-radius: 999px; background: #FAFAF9;
  font: inherit; font-size: 13px; color: #0A0A0A; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cb-reply-input:focus { background: #fff; border-color: #C41230; box-shadow: 0 0 0 3px rgba(196,18,48,.12); }
.cb-reply-input::placeholder { color: #A8A29E; }
.cb-reply-send {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: none;
  background: #C41230; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s, transform .1s;
}
.cb-reply-send:hover { background: #A60F28; }
.cb-reply-send:active { transform: scale(.94); }
@keyframes cb-in  { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cb-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-16px); } }

.cb-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: #0A0A0A; color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cb-chat .cb-av { background: #C41230; }   /* team chat — Spartan red */
.cb-sms  .cb-av { background: #15803D; }   /* SMS — green */

.cb-mid { flex: 1; min-width: 0; }
.cb-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.cb-title { font-size: 13.5px; font-weight: 800; color: #0A0A0A; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-tag { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #78716C; background: #F5F5F4; border-radius: 999px; padding: 2px 7px; flex-shrink: 0; }
.cb-preview { font-size: 12px; color: #57534E; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }

.cb-x { width: 26px; height: 26px; border-radius: 50%; border: none; background: none; color: #A8A29E; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; }
.cb-x:hover { background: #F5F5F4; color: #0A0A0A; }

@media (prefers-reduced-motion: reduce) {
  .cb-card, .cb-card.cb-out { animation: none; }
}