/* Live mode (signed-in) shell pieces: live indicator, workspace switcher, account menu, kill-switch bar,
   guarded confirms, and the shared live controls (import, dial queue, dialing card, ICS feed). Harbor tokens only. */

/* live indicator: a quiet chip, the signal-lime dot breathes only while the stream is open */
.live-ind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px 0 9px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: default;
}
.live-ind i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  position: relative;
  flex-shrink: 0;
}
.live-ind[data-state="live"] i {
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--signal) 28%, transparent);
}
.live-ind[data-state="live"] i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--signal);
  animation: livePulse 2.4s var(--ease-out) infinite;
}
.live-ind[data-state="polling"] i {
  background: var(--warn);
}
.live-ind[data-state="offline"] i {
  background: var(--crit);
}
.live-ind[data-state="polling"],
.live-ind[data-state="offline"] {
  color: var(--ink);
}
@keyframes livePulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-ind i::after {
    animation: none;
    display: none;
  }
}

/* workspace switcher */
.ws-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  max-width: 220px;
  padding: 0 10px 0 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 650;
  font-size: 13px;
  color: var(--ink);
  transition:
    background 0.15s,
    border-color 0.15s;
}
.ws-btn:hover {
  background: var(--surface-2);
  border-color: var(--teal-2);
}
.ws-btn .ws-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ws-btn svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.ws-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--teal-tint);
  color: var(--teal);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.ws-mark.demo {
  background: transparent;
  border: 1px dashed var(--muted);
  color: var(--ink-2);
}
.menu-label {
  margin: 4px 10px 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu .ws-item {
  align-items: center;
}
.menu .ws-item[aria-checked="true"] {
  background: var(--teal-tint);
}
.ws-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.ws-txt b {
  font-weight: 650;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-txt small {
  font-size: 11px;
  color: var(--muted);
}
.menu .ws-item svg.ws-on {
  margin-left: auto;
  color: var(--teal);
}
.ws-menu {
  min-width: 260px;
}

/* account */
button.avatar-me {
  border: 0;
  padding: 0;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
button.avatar-me:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.avatar-me.sm {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 12px;
}
.acct-menu {
  min-width: 280px;
}
.acct-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px 6px;
}
.acct-head > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.acct-head b {
  font-weight: 650;
  font-size: 13px;
}
.acct-head small {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-head .acct-role {
  color: var(--teal-2);
  font-weight: 600;
}
.sheet-acct {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.sheet-acct > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.35;
}
.sheet-acct b {
  font-weight: 650;
}
.sheet-acct small {
  font-size: 12px;
  color: var(--muted);
}
.sheet-ws {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.sheet-ws .ws-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  text-align: left;
}
.sheet-ws .ws-item[aria-checked="true"] {
  background: var(--teal-tint);
}
.sheet-ws .ws-item svg.ws-on {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--teal);
}

/* kill-switch bar: the one alarming surface, sits right under the top bar on every page */
.kill-bar {
  background: var(--crit-tint);
  border-bottom: 1px solid color-mix(in oklab, var(--crit) 35%, transparent);
  color: var(--ink);
}
.kill-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kill-in p {
  margin: 0;
  flex: 1;
  font-size: 13px;
}
.kill-in b {
  color: var(--crit);
}
.kill-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--crit);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.kill-ic svg {
  width: 16px;
  height: 16px;
}

/* guarded confirm */
.confirm-typed {
  margin-top: 16px;
}
.confirm-typed .input {
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  .ws-btn,
  .live-ind .li-l {
    display: none;
  }
  .live-ind {
    padding: 0;
    width: 30px;
    justify-content: center;
  }
  .kill-in {
    padding: 10px 16px;
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------- read-only (viewer) */
html.ro .ld-mv,html.ro .ld-noteform,html.ro .ld-stagebtn,html.ro .ld-dr .ld-steps button,html.ro [data-needs="broker_admin"]{display:none !important}
html.ro .ld-card{cursor:pointer}
.drawer-f .grow,.lv-actions .grow{flex:1}

/* ---------------------------------------------------------------- leads: toolbar actions */
.ld-live-acts{display:flex;gap:8px;align-items:center;margin-left:auto}
.ld-erase{color:var(--crit)}
.ld-erase:hover{background:var(--crit-tint)}

/* ---------------------------------------------------------------- import */
.lv-imp{display:flex;flex-direction:column;gap:16px}
.lv-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:28px 16px;border:1.5px dashed var(--line);border-radius:14px;background:var(--surface-2);cursor:pointer;transition:border-color .15s, background .15s}
.lv-drop:hover,.lv-drop.over{border-color:var(--teal-2);background:var(--teal-tint)}
.lv-drop:focus-within{outline:2px solid var(--c-conv);outline-offset:2px}
.lv-drop b{font-weight:650;font-size:var(--fs-md);word-break:break-all}
.lv-drop > span:last-child{font-size:var(--fs-xs);color:var(--muted)}
.lv-drop-ic{width:40px;height:40px;border-radius:12px;background:var(--surface);display:grid;place-items:center;color:var(--teal-2);margin-bottom:6px;box-shadow:var(--shadow)}
.lv-drop-ic svg{width:18px;height:18px}
.lv-imp-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:start}
.lv-imp-help{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--muted)}
.lv-imp-help b{color:var(--ink-2);font-weight:650}
.lv-imp-help .link-btn{align-self:flex-start;margin-top:4px}
.lv-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding-top:16px;border-top:1px solid var(--line-soft)}
.lv-err{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:10px;background:var(--crit-tint);color:var(--crit);font-size:13px}
.lv-err svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.lv-ok{display:flex;gap:8px;align-items:center;margin:0;color:var(--ok);font-weight:600;font-size:13px}
.lv-ok svg{width:16px;height:16px}
.lv-file{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;flex-wrap:wrap}
.lv-file svg{width:16px;height:16px;color:var(--teal-2)}
.lv-file span{color:var(--muted)}
.lv-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.lv-stat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-soft);min-width:0}
.lv-stat span{font-size:11px;font-weight:600;color:var(--ink-2);line-height:1.3}
.lv-stat b{font-family:var(--display);font-weight:650;font-size:var(--fs-xl);line-height:1.1;font-variation-settings:"wdth" 86}
.lv-stat.good{background:var(--ok-tint);border-color:transparent}.lv-stat.good b{color:var(--ok)}
.lv-stat.warn{background:var(--warn-tint);border-color:transparent}.lv-stat.warn b{color:var(--warn)}
.lv-stat.bad{background:var(--crit-tint);border-color:transparent}.lv-stat.bad b{color:var(--crit)}
.lv-rej-h{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;font-size:13px}
.lv-rej-h span{color:var(--muted);font-size:12px}
.lv-tbl{max-height:220px;overflow:auto;border:1px solid var(--line-soft);border-radius:10px}
.lv-tbl table{width:100%;border-collapse:collapse;font-size:12px}
.lv-tbl th,.lv-tbl td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.lv-tbl th{position:sticky;top:0;background:var(--surface-2);color:var(--ink-2);font-weight:600}
.lv-tbl td:first-child{width:56px;color:var(--muted)}
.lv-note{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:13px;color:var(--ink-2)}
.lv-note svg{width:16px;height:16px;color:var(--teal-2);flex-shrink:0;margin-top:1px}
.lv-done{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:var(--ok-tint)}
.lv-done > div{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink-2)}
.lv-done b{font-size:var(--fs-md);color:var(--ink)}
.lv-done-ic{width:32px;height:32px;border-radius:9px;background:var(--ok);color:#fff;display:grid;place-items:center;flex-shrink:0}
.lv-done-ic svg{width:16px;height:16px}
.lv-cbody{margin:0;color:var(--ink-2);font-size:13px;line-height:1.55}
.lv-cbody + .lv-err{margin-top:12px}

/* skipped-leads result */
.lv-skip{display:flex;flex-direction:column;gap:12px}
.lv-skip h4{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:650;margin:0 0 4px;padding-bottom:4px;border-bottom:1px solid var(--line-soft)}
.lv-skip h4 .num{color:var(--muted)}
.lv-skip ul{margin:0;padding:0 0 0 16px;font-size:13px;color:var(--ink-2)}

/* ---------------------------------------------------------------- dial queue drawer */
.lv-dq-t{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:650;font-size:var(--fs-lg)}
.lv-dq-t svg{width:18px;height:18px;color:var(--teal-2)}
.lv-dq{display:flex;flex-direction:column;gap:16px}
.lv-dq-state{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:10px;background:var(--teal-tint);color:var(--ink-2);font-size:13px}
.lv-dq-state svg{width:16px;height:16px;color:var(--teal);flex-shrink:0;margin-top:1px}
.lv-dq-state.off{background:var(--crit-tint)}
.lv-dq-state.off svg,.lv-dq-state.off b{color:var(--crit)}
.lv-imports{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.lv-imports .chip svg{width:14px;height:14px}
.lv-list{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lv-row{display:grid;grid-template-columns:20px minmax(0,1fr) 92px 92px;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .12s}
.lv-row:last-child{border-bottom:0}
.lv-row:hover{background:var(--surface-2)}
.lv-row.head{background:var(--surface-2);font-size:12px;font-weight:600;color:var(--ink-2);cursor:default}
.lv-row input{width:16px;height:16px;accent-color:var(--teal);margin:0}
.lv-who{display:flex;align-items:center;gap:8px;min-width:0}
.lv-who b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-who small{color:var(--muted);font-size:11px}

@media (max-width:760px){
  .ld-live-acts{margin-left:0;width:100%}
  .ld-live-acts .btn{flex:1}
  .lv-imp-row{grid-template-columns:1fr}
  .lv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lv-row{grid-template-columns:20px minmax(0,1fr) 80px}
  .lv-row > :last-child{display:none}
  .lv-actions{flex-wrap:wrap}
  .lv-actions .btn{flex:1}
}

/* ---------------------------------------------------------------- compliance: dialing (kill switch) */
.cp-dial{padding:20px 24px;border-left:4px solid var(--ok)}
.cp-dial.is-off{border-left-color:var(--crit);background:color-mix(in oklab,var(--crit-tint) 55%,var(--surface))}
.cp-dial-in{display:flex;align-items:center;gap:16px}
.cp-dial-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--ok-tint);color:var(--ok);flex-shrink:0}
.cp-dial-in.off .cp-dial-ic{background:var(--crit);color:#fff}
.cp-dial-ic svg{width:20px;height:20px}
.cp-dial-copy{flex:1;min-width:0}
.cp-dial-copy p{margin:4px 0 0;color:var(--ink-2);font-size:13px;max-width:72ch}
.cp-dial-in.off .card-t{color:var(--crit)}
.cp-dial-global{display:flex;gap:6px;align-items:center;color:var(--crit)!important;font-weight:600}
.cp-dial-global svg{width:14px;height:14px}
.cp-dial-ctl{display:flex;align-items:center;gap:12px;flex-shrink:0}
.cp-dial-lbl{font-size:var(--fs-xs);font-weight:650;color:var(--ink-2);min-width:52px;text-align:right}
.cp-switch{position:relative;width:52px;height:30px;border-radius:15px;border:0;padding:0;background:var(--ok);transition:background .2s var(--ease);flex-shrink:0}
.cp-switch[aria-checked="false"]{background:var(--crit)}
.cp-switch i{position:absolute;top:3px;left:25px;width:24px;height:24px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s var(--ease-out)}
.cp-switch[aria-checked="false"] i{left:3px}

/* audit export dialog */
.cp-exp{display:flex;flex-direction:column;gap:16px}
.cp-exp-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-exp-kinds{border:1px solid var(--line);border-radius:12px;padding:6px;margin:0;display:flex;flex-direction:column}
.cp-exp-kinds legend{font-size:var(--fs-xs);font-weight:650;color:var(--ink-2);padding:0 6px}
.cp-exp-kinds label{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:8px;cursor:pointer}
.cp-exp-kinds label:hover{background:var(--surface-2)}
.cp-exp-kinds input{margin-top:3px;width:16px;height:16px;accent-color:var(--teal)}
.cp-exp-kinds span{display:flex;flex-direction:column;line-height:1.35}
.cp-exp-kinds b{font-weight:650;font-size:13px}
.cp-exp-kinds small{font-size:12px;color:var(--muted)}

@media (max-width:760px){
  .cp-dial{padding:16px}
  .cp-dial-in{flex-wrap:wrap}
  .cp-dial-copy{flex-basis:calc(100% - 60px)}
  .cp-dial-ctl{width:100%;justify-content:space-between}
  .cp-dial-lbl{text-align:left}
  .cp-dial-btn{flex:1}
}

/* ---------------------------------------------------------------- integrations (live tenant) */
.ig-l-feed{display:flex;flex-direction:column;gap:16px}
.ig-l-state{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-soft)}
.ig-l-state > div{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink-2)}
.ig-l-state b{color:var(--ink);font-size:var(--fs-md);font-weight:650}
.ig-l-dot{width:10px;height:10px;border-radius:3px;background:var(--muted);margin-top:6px;flex-shrink:0}
.ig-l-state.on{background:var(--ok-tint);border-color:transparent}
.ig-l-state.on .ig-l-dot{background:var(--ok)}
.ig-l-acts{display:flex;gap:8px}
.ig-l-once{display:flex;gap:8px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:12px;background:var(--warn-tint);color:var(--ink);font-size:13px}
.ig-l-once svg{width:16px;height:16px;color:var(--warn);flex-shrink:0;margin-top:1px}
.ig-l-url{display:flex;gap:8px}
.ig-l-url .input{flex:1;min-width:0;font-size:12px}
.ig-l-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;counter-reset:st}
.ig-l-steps li{counter-increment:st;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-soft);font-size:12px;color:var(--muted)}
.ig-l-steps li::before{content:counter(st);font-family:var(--display);font-weight:700;color:var(--teal-2);font-size:var(--fs-md)}
.ig-l-steps b{color:var(--ink);font-size:13px}
.ig-l-evs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ig-l-ev{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.ig-l-ev:last-child{border-bottom:0}
.ig-l-ev > div{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
.ig-l-ev > div b{color:var(--ink);font-size:13px;font-weight:600}
.ig-l-when{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:48px;border-radius:12px;background:var(--teal-tint);color:var(--teal);flex-shrink:0}
.ig-l-when b{font-family:var(--display);font-weight:700;font-size:var(--fs-md);line-height:1}
.ig-l-when small{font-size:10px;font-weight:600}
.ig-l-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.ig-l-app{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--line-soft);background:var(--surface)}
.ig-l-app > div{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
.ig-l-app b{font-size:13px;color:var(--ink);font-weight:650}
.ig-l-glyph{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:750;font-size:13px;color:var(--acc);background:color-mix(in oklab,var(--acc) 14%,var(--surface));flex-shrink:0}
@media (max-width:760px){
  .ig-l-steps{grid-template-columns:1fr}
  .ig-l-url{flex-direction:column}
}
.cp-switch.standby{background:var(--muted)}
.v-leads{--st-queued:var(--teal-2);--st-blocked_no_consent:var(--warn)}
html.ro #sosBtn,html.ro #sh-sos{display:none !important}
.cp-dial-soft{color:var(--crit);border-color:color-mix(in oklab,var(--crit) 40%,var(--line))}