/* A5 CRM — live.css  (js/live.js: live WhatsApp mode; DESIGN-STRIPE.md §4.3, §5.27, §5.28, §6.11)
   Top-bar data-source chip (Stripe's «Test mode» slot), first-load placeholder, «sending is off» notice above the
   composers, live-only message bits (muted service text, flags, reactions, reply quote). html.is-live = live data on screen. */

/* ── data-source chip: a ghost control, dot + label + chevron ── */
.live-chip{height:28px;margin-right:8px;padding:0 8px;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:var(--radius-s);background:transparent;
  font:var(--t-body);color:var(--text);white-space:nowrap;transition:background var(--dur-1)}
.live-chip:hover,.live-chip[aria-expanded="true"]{background:var(--surface-hover)}
.live-chip:focus-visible{box-shadow:var(--focus-ring)}
.live-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--dot-neutral);flex:none;box-shadow:none;transition:background var(--dur-3) var(--ease-out)}
.live-chip[data-state="ok"] .dot{background:var(--dot-green)}   /* the status-dot palette (DESIGN-CALM §3.7), as .dot / .dot.ok / .dot.mute */
.live-chip[data-state="stale"] .dot,.live-chip[data-state="demo"] .dot{background:var(--dot-neutral)}
.live-chip:is([data-state="err"],[data-state="off"]) .dot{background:var(--dot-red)}
.live-chip[data-state="load"] .dot{background:var(--dot-neutral);animation:live-pulse 1s ease-in-out infinite}
.live-chip:is([data-state="demo"],[data-state="off"]){color:var(--text-2)}
.live-chip .ic{width:12px;height:12px;stroke-width:2.4;color:var(--text-3)}
@keyframes live-pulse{50%{opacity:.3}}
@media (max-width:1180px){.live-chip .t{display:none}.live-chip{gap:6px}}

/* ── first load: empty-state layout with a spinner ── */
.live-load{display:grid;justify-items:start;align-content:start;gap:4px;width:100%;max-width:448px;margin:120px auto 48px;padding:0;font:var(--t-body);color:var(--text-3)}   /* = .empty column: 448 wide, centred, no inner padding */
.live-load b{font:var(--t-heading);color:var(--text-strong)}
.live-load p{margin:0}
.live-spin{display:block;width:20px;height:20px;margin-bottom:12px;box-sizing:border-box;border:2px solid var(--border-soft);border-top-color:var(--text-3);border-radius:50%;animation:live-rot .8s linear infinite}
@keyframes live-rot{to{transform:rotate(360deg)}}

/* ── live mode: WhatsApp only while it is connected (html.wa-send), letters only while the mailbox may send (html.mail-send),
   js/live.js «SENDING» / «WHATSAPP» ── */
html.is-live:not(.wa-send) .cmp[data-mode="wa"]::before,html.is-live:not(.wa-send) .iq[data-mode="wa"]::before,
html.is-live:not(.mail-send) .cmp[data-mode="em"]::before,html.is-live:not(.mail-send) .iq[data-mode="em"]::before{
  content:"Отправка из CRM выключена — ответьте с телефона, сообщение появится здесь само. Заметки и задачи работают.";
  display:block;padding:8px 16px;background:var(--surface-offset);box-shadow:inset 0 -1px 0 var(--border-soft);color:var(--text-3);font:var(--t-caption)}
html.is-live:not(.mail-send) .cmp[data-mode="em"]::before,html.is-live:not(.mail-send) .iq[data-mode="em"]::before{
  content:"Почта не подключена — письмо из CRM не уйдёт. Ответьте из Gmail, письмо появится здесь само."}
/* the inbox composer's full-pane margins live in inbox.css (html.is-live .inbox .iq…::before); .iq exists only there */
/* the 24 h window warning is about sending from the CRM: shown while WhatsApp is connected (outside the window only an
   approved template is delivered; the CRM sends text only, so it refuses there) */
html.is-live:not(.wa-send) .cmp-win,html.is-live:not(.wa-send) .iq-win{display:none!important}
html.is-live:not(.wa-send) .cmp[data-mode="wa"] .send,html.is-live:not(.wa-send) .iq[data-mode="wa"] .send,
html.is-live:not(.mail-send) .cmp[data-mode="em"] .send,html.is-live:not(.mail-send) .iq[data-mode="em"] .send{opacity:.5}

/* ── live message bits (also harmless on demo data, which has none of these fields) ── */
.cm-bub .tx.ph,.cp-card .bd.ph{color:var(--text-3);font-style:italic}
.cm-bub .cm-fl{margin-right:auto;padding-right:8px;font:var(--t-caption);color:var(--text-3);white-space:nowrap}
.cm-bub .cm-fl.bad{color:var(--danger)}
.cm-rq{display:block;max-width:100%;margin:2px 0 4px;padding:0 8px;border-left:2px solid var(--border);color:var(--text-3);font:var(--t-caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-rq .ic{display:inline-block;width:12px;height:12px;margin-right:2px;vertical-align:-2px}
.cm-rxs{display:flex;gap:4px;margin-top:4px}
.cm-msg.out .cm-rxs{justify-content:flex-end}
.cm-rx{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-soft);font:var(--t-caption)}

@media (prefers-reduced-motion: reduce){
  .live-chip[data-state="load"] .dot{animation:none}
  .live-spin{animation-duration:2s!important;animation-iteration-count:infinite!important}
}