/* Live floor, in the Lagoon design system. Every colour comes from the
   style.css tokens, so the page has one palette with the agent panel and
   the wallboard and works in both the light and the dark ("night lagoon")
   theme. TV mode switches the page to the dark theme.

   Tones: an element picks up three variables from its state or outcome:
   --c (strong: dots, bars, rings), --c-soft (tinted background) and
   --c-text (text on the soft background). */
[data-state="available"], [data-s="available"], [data-o="connected"] { --c: var(--ok); --c-soft: var(--ok-soft); --c-text: var(--ok-text); }
[data-state="on_call"], [data-s="on_call"], [data-state="reserved"], [data-s="reserved"] { --c: var(--call); --c-soft: var(--call-soft); --c-text: var(--call-text); }
[data-state="wrap_up"], [data-s="wrap_up"], [data-o="busy"] { --c: var(--warn); --c-soft: var(--warn-soft); --c-text: var(--warn-text); }
[data-state="paused"], [data-s="paused"], [data-o="noanswer"], [data-o="paused"] { --c: var(--pause); --c-soft: var(--pause-soft); --c-text: var(--pause-text); }
[data-state="logged_out"], [data-s="logged_out"] { --c: var(--border-strong); --c-soft: var(--panel-2); --c-text: var(--muted); }
[data-o="machine"] { --c: var(--machine); --c-soft: var(--machine-soft); --c-text: var(--machine-text); }
[data-o="dropped"] { --c: var(--bad); --c-soft: var(--bad-soft); --c-text: var(--bad-text); }
[data-o="failed"] { --c: var(--bad-text); --c-soft: var(--bad-soft); --c-text: var(--bad-text); }
[data-o="callback"] { --c: var(--accent); --c-soft: var(--accent-soft); --c-text: var(--accent-strong); }

body.live { min-height: 100vh; }

/* ---------- header: the floating pill, as wide as the floor ---------- */
.lv-head {
  position: sticky; top: 10px; z-index: 20; max-width: none;
  margin: 16px max(16px, calc((100% - 1648px) / 2)) 0;
}
.lv-head h1 { font-size: 20px; }
.lv-spacer { flex: 1; }
.lv-conn {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--pill);
  background: var(--pause-soft); color: var(--pause-text); font-size: 13.5px; font-weight: 800; white-space: nowrap;
}
.lv-conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--pause); }
.lv-conn.live { background: var(--ok-soft); color: var(--ok-text); }
.lv-conn.live i { background: var(--ok); animation: lv-beat 2s ease-in-out infinite; }
.lv-conn.bad { background: var(--bad-soft); color: var(--bad-text); }
.lv-conn.bad i { background: var(--bad); }
@keyframes lv-beat { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.lv-clock { font-family: var(--mono); font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-toggle {
  display: inline-flex; gap: 8px; align-items: center; margin: 0; min-height: 44px; padding: 0 16px;
  border-radius: var(--pill); background: var(--panel-2); color: var(--text); font-size: 14.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.lv-toggle input { width: 18px; height: 18px; margin: 0; }
.lv-links { display: flex; gap: 2px; }
.lv-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }

.lv-main { max-width: 1680px; }
.lv-signin { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--bg); padding: 16px; }
.lv-signin form { width: min(400px, 100%); }
.lv-brand { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 900; margin-bottom: 6px; }

/* ---------- KPI tiles: rounded cards with a coloured capsule ---------- */
.lv-kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* All nine tiles on one row from laptop width up, so none sits alone. */
@media (min-width: 1180px) { .lv-kpis { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; } }
.lv-kpi {
  --m: var(--border-strong);
  position: relative; display: grid; align-content: center; min-height: 78px; min-width: 0;
  padding: 12px 14px 12px 40px; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 2px solid transparent; transition: background-color .3s, border-color .3s;
}
.lv-kpi::before {
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 12px; height: min(44px, calc(100% - 24px)); border-radius: var(--pill); background: var(--m);
}
.lv-kpi[data-m="available"] { --m: var(--ok); --v: var(--ok-text); }
.lv-kpi[data-m="on_call"] { --m: var(--call); --v: var(--call-text); }
.lv-kpi[data-m="wrap_up"] { --m: var(--warn); --v: var(--warn-text); }
.lv-kpi[data-m="paused"] { --m: var(--pause); --v: var(--pause-text); }
.lv-kpi[data-m="ringing"] { --m: var(--machine); }
.lv-kpi[data-m="dialled"] { --m: var(--coral); }
.lv-kpi[data-m="connected"] { --m: var(--accent); }
.lv-kpi[data-m="abandon"] { --m: var(--ok); --v: var(--ok-text); }
.lv-kpi .v { font-family: var(--mono); font-weight: 500; font-size: 30px; line-height: 1.15; color: var(--v, var(--text)); font-variant-numeric: tabular-nums; }
.lv-kpi .k { color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.3; }
.lv-kpi .note { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.3; margin-top: 2px; }
.lv-kpi.alert { --m: var(--bad); --v: var(--bad-text); background: var(--bad-soft); border-color: var(--bad); }
.lv-kpi.alert .k, .lv-kpi.alert .note { color: var(--bad-text); }
.lv-kpi.alert .note { font-weight: 800; }
.lv-kpi.alert.pulse { animation: lv-alarm 1.4s ease-in-out infinite; }
.lv-kpi .v.bump { animation: lv-bump .5s ease-out; }
@keyframes lv-alarm { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 40%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
@keyframes lv-bump { 0% { transform: translateY(-4px); opacity: .4; } 100% { transform: none; opacity: 1; } }
.lv-todaynote { margin: -8px 4px 0; font-size: 12.5px; }

.lv-statebar { display: flex; height: 12px; border-radius: var(--pill); overflow: hidden; background: var(--border); }
.lv-statebar span { height: 100%; flex: 0 0 auto; background: var(--c); transition: flex-grow .6s ease; }

/* ---------- layout and section heads ---------- */
.lv-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1100px) { .lv-grid { grid-template-columns: minmax(0, 1fr); } }
.lv-dial { display: grid; gap: 18px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.lv-main .card { border-radius: 28px; }
.lv-sechead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.lv-sechead h2 { margin: 0; }
.lv-count { font-size: 15px; font-weight: 600; color: var(--muted); }
.lv-secnote { font-size: 13.5px; color: var(--muted); }
.lv-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.lv-tools select, .lv-tools input {
  width: auto; min-width: 0; min-height: 40px; padding: 6px 14px; font-size: 14.5px; border-radius: var(--pill);
}
.lv-tools input { width: 150px; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-chips button {
  min-height: 40px; padding: 6px 14px; font-size: 14px; display: inline-flex; gap: 7px; align-items: center;
  background: var(--panel); border: 2px solid var(--border); color: var(--text);
}
.lv-chips button:hover { background: var(--c-soft); border-color: var(--c); }
.lv-chips button i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.lv-chips button[aria-pressed="true"] { background: var(--c-soft); border-color: var(--c); color: var(--c-text); }
.lv-empty { margin: 8px 0 0; }

/* ---------- agent cards: tinted by state ---------- */
.lv-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lv-card {
  --glow: color-mix(in srgb, var(--c) 45%, transparent);
  position: relative; text-align: left; display: grid; gap: 9px; padding: 14px; min-height: 0; min-width: 0;
  border-radius: 22px; border: 0; background: var(--c-soft); color: var(--text);
  font: inherit; font-weight: 400; cursor: pointer;
  transition: background-color .4s, box-shadow .2s;
}
.lv-card:hover { background: var(--c-soft); box-shadow: inset 0 0 0 2px var(--c); }
.lv-card.flash { animation: lv-flash 1.1s ease-out; }
@keyframes lv-flash { 0% { box-shadow: 0 0 0 0 var(--glow); } 30% { box-shadow: 0 0 0 7px var(--glow); } 100% { box-shadow: 0 0 0 0 transparent; } }
.lv-card .top { display: flex; gap: 10px; align-items: center; min-width: 0; padding-right: 4px; }
.lv-av {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--panel); color: var(--c-text); font-weight: 900; font-size: 14.5px;
}
.lv-card[data-state="on_call"] .lv-av::after, .lv-card[data-state="reserved"] .lv-av::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c);
}
.lv-card[data-state="on_call"] .lv-av::after { animation: lv-ring 2.4s ease-in-out infinite; }
@keyframes lv-ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .45; } }
.lv-card .who { min-width: 0; display: grid; line-height: 1.3; }
.lv-card .who b { font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-card .who small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-card .state { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.lv-pill {
  font-size: 13px; font-weight: 800; padding: 3px 12px; border-radius: var(--pill); background: var(--panel); color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.lv-timer { font-family: var(--mono); font-weight: 500; font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* The audio codec on the agent's line (live-phone.js): "G.711", "Opus (poor network)". */
.lv-codec {
  margin-left: auto; flex: 0 3 auto; min-width: 0; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--pill);
  background: var(--panel); color: var(--muted); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis;
}
.lv-codec.warn { background: var(--warn-soft); color: var(--warn-text); }
.lv-bar { height: 6px; border-radius: var(--pill); background: var(--panel); overflow: hidden; }
.lv-bar span { display: block; height: 100%; width: 0; background: var(--c); border-radius: inherit; transition: width 1s linear, background-color .4s; }
.lv-bar span.long { background: var(--warn); }
.lv-bar span.vlong { background: var(--bad); }
.lv-card .cust { font-size: 13.5px; display: flex; justify-content: space-between; gap: 6px; min-height: 20px; min-width: 0; }
.lv-card .cust span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-card .cust span:first-child { font-variant-numeric: tabular-nums; }
.lv-card .meta { font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.lv-badge {
  position: absolute; top: 10px; right: 10px; font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: var(--pill);
  background: var(--panel); color: var(--muted); box-shadow: var(--shadow);
}
.lv-badge.mon { background: var(--accent); color: var(--accent-text); }
.lv-badge.warn { background: var(--warn-soft); color: var(--warn-text); }

/* ---------- dialling now: one block per campaign, lanes as wells ---------- */
.lv-camps { display: grid; }
.lv-camp { display: grid; gap: 12px; min-width: 0; }
.lv-camp + .lv-camp { margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--border); }
.lv-camp .hd { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.lv-camp .hd b { font-size: 18px; font-weight: 900; }
.lv-camp .hd .mode { margin-left: auto; font-size: 13.5px; color: var(--muted); font-weight: 700; }
.lv-pace { font-size: 13px; font-weight: 800; padding: 3px 12px; border-radius: var(--pill); background: var(--panel-2); color: var(--muted); }
.lv-pace:empty { display: none; }
.lv-pace.pred { background: var(--accent-soft); color: var(--accent-strong); }
.lv-pace.warm { background: var(--warn-soft); color: var(--warn-text); }
.lv-pace.emerg { background: var(--bad-soft); color: var(--bad-text); }
.lv-pace.paused { background: var(--pause-soft); color: var(--pause-text); }
.lv-camp .nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lv-camp .nums > div { display: grid; align-content: start; min-width: 0; background: var(--panel-2); border-radius: var(--radius-sm); padding: 8px 12px; }
.lv-camp .nums b { font-family: var(--mono); font-weight: 500; font-size: 19px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.lv-camp .nums span { color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.lv-camp[data-over] .nums > div:nth-child(4) { background: var(--bad-soft); }
.lv-camp[data-over] .nums > div:nth-child(4) b, .lv-camp[data-over] .nums > div:nth-child(4) span { color: var(--bad-text); }
.lv-abgauge { position: relative; height: 6px; border-radius: var(--pill); background: var(--border); margin-top: 6px; }
.lv-abgauge span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--c); transition: width .6s, background-color .4s; }
.lv-abgauge i { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--text); opacity: .6; }
.lv-camp .nums > .lv-waittile[data-over] { background: var(--warn-soft); }
.lv-camp .nums > .lv-waittile[data-over] b, .lv-camp .nums > .lv-waittile[data-over] span { color: var(--warn-text); }
.lv-atime { display: grid; gap: 4px; }
.lv-atime.hidden { display: none; }
.lv-atime .lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.lv-atbar { display: flex; height: 10px; border-radius: var(--pill); overflow: hidden; background: var(--border); }
.lv-atbar span { display: block; height: 100%; transition: width .6s; }
.lv-atbar span { background: var(--c); }
.lv-atlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.lv-atlegend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.lv-atlegend b { color: var(--text); font-family: var(--mono); font-weight: 500; }
.sparkwrap { display: grid; gap: 2px; }
.sparkwrap .lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.lv-spark { width: 100%; height: 38px; display: block; }
.lv-spark path.area { fill: var(--accent); opacity: .16; }
.lv-spark path.line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lv-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* Lanes go two by two when the campaign block is too narrow for four
   readable lanes (the right-hand column on a laptop, phones). */
.lv-camps { container-type: inline-size; }
@container (max-width: 640px) {
  .lv-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-lane { min-height: 84px; }
}
.lv-lane { background: var(--panel-2); border-radius: 20px; padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-height: 120px; min-width: 0; }
.lv-lane h3 { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.lv-lane h3 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-lane h3 b { color: var(--text); font-family: var(--mono); font-weight: 500; }
.lv-lane .chips { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.lv-call {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.4; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: var(--pill);
  background: var(--panel); color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.lv-call.amd { background: var(--machine-soft); color: var(--machine-text); }
.lv-call.queued { background: var(--bad-soft); color: var(--bad-text); font-weight: 500; box-shadow: inset 0 0 0 2px var(--bad); animation: lv-wait 1s ease-in-out infinite; }
.lv-call.bridging, .lv-call.connected { background: var(--ok-soft); color: var(--ok-text); }
.lv-call .lv-skill { font-style: normal; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--panel); color: var(--text); font-size: 11px; font-weight: 700; }
.lv-call .lv-skill.widened { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: inherit; }
.lv-call .lv-skill.info { background: transparent; box-shadow: inset 0 0 0 1px currentColor; font-weight: 600; opacity: .75; }
/* Skill chips on an agent card (docs/SKILLS.md, "Skill chips"): the agent's, then the call's. */
.lv-card .lv-skills { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.lv-card .lv-skills.hidden { display: none; }
.lv-sk { font-style: normal; padding: 1px 8px; border-radius: var(--pill); background: var(--panel); color: var(--text); font-size: 11.5px; font-weight: 700;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-sk.call { color: var(--c-text); box-shadow: inset 0 0 0 1.5px var(--c); }
.lv-sk.info { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); color: var(--muted); font-weight: 600; }
.lv-sk-call { flex-basis: 100%; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-left: 2px; }
.lv-call.dot { display: block; width: 10px; height: 10px; padding: 0; border-radius: 50%; background: var(--pause); box-shadow: none; }
.lv-call.dot.amd { background: var(--machine); }
.lv-call.dot.queued { background: var(--bad); }
.lv-call.dot.bridging, .lv-call.dot.connected { background: var(--ok); }
.lv-call.out { animation: lv-out .9s ease-in forwards; }
@keyframes lv-wait { 50% { box-shadow: inset 0 0 0 2px transparent; } }
@keyframes lv-out { 0% { opacity: 1; } 100% { opacity: 0; transform: scale(.6); } }

/* ---------- outcomes: counts, strip and feed, all pills ---------- */
.lv-outcounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lv-outcounts span {
  display: inline-flex; gap: 7px; align-items: center; padding: 5px 12px; border-radius: var(--pill);
  background: var(--c-soft); color: var(--c-text); font-size: 13.5px; font-weight: 800;
}
.lv-outcounts i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lv-outcounts b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.lv-outstrip { display: flex; gap: 4px; height: 18px; overflow: hidden; margin-bottom: 14px; }
.lv-outstrip i { flex: 0 0 10px; height: 18px; border-radius: var(--pill); background: var(--c); animation: lv-in .45s ease-out; }
@keyframes lv-in { from { transform: translateX(-12px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.lv-ticker {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  max-height: 280px; overflow: auto; font-size: 14.5px;
}
.lv-ticker li { display: flex; gap: 10px; align-items: center; min-width: 0; animation: lv-in .45s ease-out; }
.lv-ticker li i {
  flex: 0 0 auto; font-style: normal; padding: 2px 10px; border-radius: var(--pill); min-width: 92px; text-align: center;
  background: var(--c-soft); color: var(--c-text); font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.lv-ticker li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-ticker li time { margin-left: auto; flex: 0 0 auto; font-family: var(--mono); color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------- agent drawer: a rounded side sheet ---------- */
.lv-drawer {
  position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(440px, calc(100% - 24px)); z-index: 40;
  background: var(--panel); border-radius: 28px; box-shadow: var(--shadow-lift);
  transform: translateX(calc(100% + 24px)); transition: transform .3s ease; overflow-y: auto; overscroll-behavior: contain;
}
.lv-drawer.open { transform: none; visibility: visible; transition: transform .3s ease; }
/* Off-screen drawer stays out of the tab order. */
.lv-drawer:not(.open) { visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
.lv-drawer-in { padding: 20px; display: grid; gap: 16px; }
.lv-drawer-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lv-drawer-hd h2 { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.lv-secs { display: grid; gap: 12px; }
.lv-drawer .sec { display: grid; gap: 8px; background: var(--panel-2); border-radius: 20px; padding: 14px 16px; min-width: 0; }
.lv-drawer h3 { margin: 0; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lv-drawer .lv-pill { background: var(--c-soft); color: var(--c-text); font-size: 14px; padding: 5px 14px; }
.lv-drawer .lv-timer { font-size: 20px; }
.lv-drawer dl.kv { font-size: 14.5px; gap: 4px 16px; }
.lv-drawer dl.kv dd { overflow-wrap: anywhere; }
.lv-modes button { flex: 1 1 auto; }
.lv-assist .hint { padding: 10px 14px; font-size: 14px; }
.lv-transcript { display: grid; gap: 4px; max-height: 200px; overflow-y: auto; font-size: 13.5px; background: var(--panel); border-radius: var(--radius-sm); padding: 10px 12px; }
.lv-transcript [data-sp="agent"] b { color: var(--accent-strong); }
.lv-transcript [data-sp="customer"] b { color: var(--call-text); }

/* Keyboard focus: one clear ring everywhere on the page (an outline, so it
   doesn't fight the cards' own shadows). */
.live button:focus-visible, .live a:focus-visible, .live select:focus-visible, .live input:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.live .lv-toggle:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.live .lv-toggle input:focus-visible { outline: none; }

/* Touch screens: filter controls get full-size targets. */
@media (pointer: coarse) {
  .lv-chips button, .lv-tools select, .lv-tools input, .lv-expandall { min-height: 44px; }
}

/* Phones: compact header, two KPI columns, one column of everything else. */
@media (max-width: 600px) {
  .lv-head { position: static; margin: 10px 10px 0; padding: 8px 10px 8px 14px; gap: 8px; border-radius: 24px; }
  .lv-head h1 { font-size: 17px; gap: 8px; }
  .lv-head .brand-mark { width: 28px; height: 28px; }
  .lv-clock { font-size: 14px; }
  .lv-head button, .lv-toggle { flex: 1 1 auto; justify-content: center; padding: 8px 12px; font-size: 14px; }
  .lv-links { flex: 1 1 100%; justify-content: center; }
  .lv-main { padding: 14px 10px 32px; gap: 14px; }
  .lv-kpis { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-kpi { padding: 10px 12px 10px 34px; min-height: 70px; border-radius: 20px; }
  .lv-kpi::before { left: 13px; width: 10px; }
  #kAbBox { grid-column: 1 / -1; } /* nine tiles: the abandon tile takes the odd row */
  .lv-kpi .v { font-size: 26px; }
  .lv-grid, .lv-dial { gap: 14px; }
  .lv-main .card { padding: 16px 14px; border-radius: 22px; }
  .lv-chips button, .lv-tools select, .lv-tools input, .lv-expandall { min-height: 44px; }
  .lv-tools { margin-left: 0; width: 100%; }
  .lv-tools select { flex: 1 1 40%; }
  .lv-tools input { flex: 1 1 100%; width: auto; }
  .lv-cards { grid-template-columns: minmax(0, 1fr); }
  .lv-camp .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-camp .hd .mode { margin-left: 0; }
  .lv-ticker { max-height: 320px; font-size: 14px; }
  .lv-ticker { gap: 10px; }
  .lv-ticker li { flex-wrap: wrap; row-gap: 2px; }
  .lv-ticker li i { min-width: 0; }
  .lv-ticker li time { order: 2; }
  .lv-ticker li span { order: 3; flex-basis: 100%; white-space: normal; }
  .lv-drawer { top: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); border-radius: 24px; }
  .lv-drawer-in { padding: 16px; }
}

/* TV mode: read from across the room, on the dark theme (live.js sets
   data-theme="dark" on <html>). Filters and links are hidden. */
body.tv .lv-notv, body.tv .lv-chips, body.tv .lv-tools { display: none; }
body.tv .lv-head { margin-left: 16px; margin-right: 16px; }
body.tv .lv-head h1 { font-size: 24px; }
body.tv .lv-clock { font-size: 22px; color: var(--text); }
body.tv .lv-main { max-width: none; }
body.tv .lv-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 1200px) { body.tv .lv-kpis { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
body.tv .lv-kpi { padding: 16px 14px 16px 40px; min-height: 96px; }
body.tv .lv-kpi::before { left: 16px; width: 12px; height: min(56px, calc(100% - 28px)); }
body.tv .lv-kpi .v { font-size: clamp(30px, 2.6vw, 64px); }
body.tv .lv-kpi .k { font-size: 16px; }
body.tv .lv-kpi .note { font-size: 13px; }
body.tv .lv-statebar { height: 16px; }
body.tv .lv-cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
body.tv .lv-timer { font-size: 30px; }
body.tv .lv-card .who b { font-size: 18px; }
body.tv .lv-pill { font-size: 14.5px; }
body.tv .lv-camp .nums b { font-size: 24px; }
body.tv .lv-call { font-size: 14px; }
body.tv .lv-outcounts span { font-size: 15px; }
body.tv .lv-ticker { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .lv-conn.live i, .lv-card[data-state="on_call"] .lv-av::after, .lv-call.queued, .lv-kpi.alert.pulse { animation: none; }
  .lv-card.flash, .lv-ticker li, .lv-outstrip i, .lv-kpi .v.bump, .lv-call.out { animation: none; }
  .lv-drawer, .lv-drawer.open, .lv-drawer:not(.open), .lv-bar span, .lv-statebar span, .lv-abgauge span, .lv-atbar span, .lv-card, .lv-kpi { transition: none; }
}

/* voicebot calls ("with bot") */
.lv-bots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lv-bots li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 12px; background: var(--panel-2); border-radius: var(--radius-sm); }
.lv-bots .lv-botline { flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }

/* ===== cost optimiser indicator ===== */
.lv-cost { font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: var(--pill); background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.lv-cost:empty { display: none; }
.lv-cost.on { background: var(--ok-soft); color: var(--ok-text); }
.lv-cost.wait { background: var(--warn-soft); color: var(--warn-text); }

/* ---------- agents asking for help, outside-shift tag (live-extras.js, docs/AGENT_EXTRAS.md) ---------- */
.lv-helpbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 20px 0; padding: 10px 14px;
  border-radius: var(--radius-md); background: var(--bad-soft); color: var(--bad-text); border: 2px solid var(--bad);
}
.lv-helpbar.hidden { display: none; }
.lv-help-title { font-weight: 900; font-size: 15px; }
.lv-help-item { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 4px 4px 4px 12px; border-radius: var(--pill); background: var(--panel); color: var(--text); min-width: 0; }
.lv-help-item b { font-weight: 800; }
.lv-help-meta { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.lv-help-item button { min-height: 36px; }
.lv-help-item.is-acked { background: var(--ok-soft); color: var(--ok-text); }
.lv-help-item.is-acked .lv-help-meta { color: inherit; }
.lv-card.lv-needhelp { box-shadow: inset 0 0 0 3px var(--bad); }
.lv-card.lv-needhelp:hover { box-shadow: inset 0 0 0 3px var(--bad); }
.lv-ribbon {
  display: block; margin: 0 -14px -14px; padding: 7px 14px; border-radius: 0 0 22px 22px; background: var(--bad); color: var(--on-strong);
  font-size: 13px; font-weight: 900;
}
.lv-ribbon.is-acked { background: var(--ok); }
.lv-card .who .lv-outshift { justify-self: start; margin-top: 2px; font-size: 11.5px; font-weight: 800; color: var(--muted); padding: 1px 8px; border-radius: var(--pill); background: var(--panel); white-space: nowrap; line-height: 1.4; }
.lv-help-sec .sub { margin: 0 0 8px; }
@media (max-width: 1272px) { .lv-helpbar { margin-left: 16px; margin-right: 16px; } }

/* ---------- trunk channels: in use / limit per trunk (docs/TATA_SIP_SETUP.md) ---------- */
.lv-trunks { display: grid; gap: 14px; }
.lv-trunk { --c: var(--ok); --c-soft: var(--ok-soft); --c-text: var(--ok-text); display: grid; gap: 8px; min-width: 0;
  padding: 12px 14px; background: var(--panel-2); border-radius: var(--radius-sm); border-left: 5px solid var(--c); }
.lv-trunk[data-level="high"] { --c: var(--warn); --c-soft: var(--warn-soft); --c-text: var(--warn-text); }
.lv-trunk[data-level="full"] { --c: var(--bad); --c-soft: var(--bad-soft); --c-text: var(--bad-text); background: var(--bad-soft); }
.lv-trunk-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.lv-trunk-hd b { font-size: 18px; font-weight: 900; }
.lv-trunk-n { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; }
.lv-trunk-n strong { font-size: 24px; font-weight: 500; color: var(--c-text); }
.lv-trunk-st { margin-left: auto; font-size: 13px; font-weight: 800; padding: 2px 10px; border-radius: var(--pill); background: var(--panel); color: var(--c-text); }
.lv-tbar { position: relative; height: 10px; border-radius: var(--pill); background: var(--panel); overflow: hidden; }
.lv-tbar span { display: block; height: 100%; background: var(--c); border-radius: inherit; transition: width .6s ease, background-color .4s; }
.lv-tbar .lv-tres { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .45; }
.lv-trunk-notes { font-size: 12.5px; color: var(--muted); font-weight: 700; }
body.tv .lv-trunk-n strong { font-size: 34px; }
@media (max-width: 600px) { .lv-trunk-st { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .lv-tbar span { transition: none; } }
/* LeadSquared presence ("Agents must be in LeadSquared", live-extras.js) */
.lv-card .who .lv-lsq { justify-self: start; margin-top: 2px; font-size: 11.5px; font-weight: 800; padding: 1px 8px 1px 6px; border-radius: var(--pill); background: var(--panel); white-space: nowrap; line-height: 1.4; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.lv-card .who .lv-lsq::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lv-card .who .lv-lsq.in::before { background: #1E9E60; }
.lv-card .who .lv-lsq.out { color: #B44A2A; }
/* Leads waiting for a skill no signed-in agent holds (docs/SKILLS.md). */
.lv-skillwait { font-size: 13px; font-weight: 700; color: var(--warn-text); background: var(--warn-soft); border-radius: var(--radius-sm, 8px); padding: 4px 10px; }
.lv-skillwait.hidden { display: none; }
.lv-pools { font-size: 13px; font-weight: 600; color: var(--muted, inherit); padding: 2px 0; }
.lv-pools.hidden { display: none; }

/* Collapsible agent cards: the essentials always; skills and today's counts
   when expanded (a card's chevron, or Expand all in the toolbar). */
.lv-card .lv-more { display: grid; gap: 9px; min-width: 0; }
.lv-card:not(.open) .lv-more { display: none; }
.lv-expand {
  order: 2; margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center; color: var(--muted); cursor: pointer;
}
.lv-card .top:has(.lv-audio) .lv-expand { margin-left: 4px; }
.lv-expand::before {
  content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.lv-card.open .lv-expand::before { transform: translateY(2px) rotate(-135deg); }
.lv-expand:hover, .lv-expand:focus-visible { background: var(--panel); color: var(--text); outline: none; }
.lv-expand:focus-visible { box-shadow: 0 0 0 2px var(--c); }
.lv-expandall {
  min-height: 40px; padding: 6px 14px; font-size: 14.5px; border-radius: var(--pill);
}
@media (prefers-reduced-motion: reduce) { .lv-expand::before { transition: none; } }