/* 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; }
.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); }

/* ---------- 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; }
.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.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 { 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 { 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-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); }