/* Additions to the prototype's style.css for the live dashboard. */
.muted { color: var(--muted); }
.livestate { font-size: 13px; padding: 6px 10px; border-radius: 5px; background: #eef1f5; color: #66768c; }
.livestate.ok { background: #e9f4f0; color: var(--green); }
.livestate.bad { background: #ffebea; color: #b44b48; }
/* An author display rule beats the browser's own [hidden] rule, so say it. */
[hidden] { display: none !important; }
.gate { position: fixed; inset: 0; background: #f3f5f8; display: grid; place-items: center; z-index: 50; padding: 16px; }
.gate .card { width: min(440px, 100%); }
.gate h1 { font-size: 26px; }
.gate label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); margin: 14px 0; }
.gate input { width: 100%; }
.gate .secret { font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: 1px; background: #f3f5f8;
  padding: 12px; border-radius: 6px; word-break: break-all; }
.btn { background: #182f4d; color: #fff; border: 0; border-radius: 6px; padding: 10px 16px; font-size: 14px; }
.btn.secondary { background: #edf1f6; color: #18263b; }
.btn.danger { background: #b44b48; }
.btn:disabled { opacity: .5; cursor: default; }
.err { color: #b44b48; font-size: 14px; min-height: 20px; }
.ok-text { color: var(--green); font-size: 14px; }
.badge.live, .badge.no_calls { background: #e9f4f0; color: var(--green); }
.badge.stale { background: #fff2d8; color: #966108; }
.badge.offline, .badge.never { background: #ffebea; color: #b44b48; }
.badge.disabled, .badge.retired { background: #eef1f5; color: #66768c; }
.dot.stale { background: #d39b2a; } .dot.offline, .dot.never { background: #c4524f; } .dot.disabled, .dot.retired { background: #9aa6b6; }
.metricvalue small { font-size: 14px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding-top: 14px; font-size: 14px; }
.backlink { margin: 18px 0 0; }
.callhead { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.callhead > div { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--muted); }
.callhead b { display: block; color: #18263b; font-size: 17px; margin-top: 5px; word-break: break-word; }
.turns { display: grid; gap: 8px; }
.turn { display: grid; grid-template-columns: 70px 1fr 1fr 210px; gap: 12px; padding: 12px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; font-size: 14px; cursor: pointer; align-items: start; }
.turn:hover, .turn.selected { border-color: #e5b047; background: #fffaf0; }
.turn .who { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
.turn .resp b { font-size: 18px; }
.split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 6px; background: #eef1f5; }
.split .m { background: #182f4d; } .split .u { background: repeating-linear-gradient(45deg, #e0a73c, #e0a73c 3px, #f7dca6 3px, #f7dca6 6px); }
.tl-wrap { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 18px 0; }
.tl-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; font-size: 13px; }
.tl-tools .range { margin-left: auto; color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
.tl-scroll { overflow-x: hidden; overflow-y: auto; max-height: 70vh; border-top: 1px solid var(--line); }
.tl-svg { display: block; width: 100%; user-select: none; touch-action: none; }
.tl-svg text { font-size: 11px; fill: #3c4a5f; }
.tl-svg .lane-label { font-size: 12px; fill: #18263b; font-weight: 600; }
.tl-svg .lane-note { font-size: 10px; fill: #8a96a8; }
.tl-svg .tick { stroke: #e2e7ee; }
.tl-svg .ticklabel { font-size: 10px; fill: #69778b; }
.tl-svg .span { cursor: pointer; }
.tl-svg .span.selected { stroke: #e5b047; stroke-width: 2.5px; }
.tl-svg .span.dim { opacity: .25; }
.tl-svg .noend { stroke-dasharray: 4 3; fill-opacity: .25; }
.tl-svg .gap { fill: url(#hatch); stroke: #e0a73c; stroke-width: .5px; }
.tl-svg .turnband { fill: #f8fafc; }
.tl-svg .turnlabel { font-size: 10px; fill: #69778b; }
.legend2 { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend2 i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.drawer { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 12px 0; font-size: 14px; }
.drawer h3 { margin-bottom: 8px; }
.drawer dl { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; margin: 0; }
.drawer dt { color: var(--muted); }
.drawer dd { margin: 0; word-break: break-word; }
.drawer pre, pre.json { background: #f6f8fb; border-radius: 6px; padding: 10px; overflow: auto; max-height: 320px; font-size: 12px; margin: 0; }
.evtable td, .evtable th { padding: 7px 9px; font-size: 12px; }
.evtable td.num { font-family: ui-monospace, Consolas, monospace; text-align: right; }
.evtable tr.sel { background: #fff7e8; }
.evtable th { cursor: pointer; }
.transcript .bubble.sel { outline: 2px solid #e5b047; }
.audio { display: grid; gap: 10px; }
.audio audio { width: 100%; }
.kv { display: grid; grid-template-columns: 220px 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.kb-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.kb-form label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.kb-form input, .kb-form textarea, .kb-form select { width: 100%; }
.kb-form textarea { min-height: 70px; padding: 10px 12px; border: 1px solid #d7dee8; border-radius: 6px; font: inherit; font-size: 14px; }
.kb-msgs .e { color: #b44b48; } .kb-msgs .w { color: #966108; }
.kb-status { font-size: 12px; }
.rev { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; display: flex; gap: 10px; justify-content: space-between; }
.rev .what { color: var(--muted); }
.publishbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: 16px; }
.reached { font-size: 13px; line-height: 1.8; }
.tabs2 { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.tabs2 button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.tabs2 button.active { background: #182f4d; color: #fff; border-color: #182f4d; }
.agentgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.agentcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; font-size: 14px; }
.agentcard .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.agentcard .procs { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.7; }
.bars2 { display: grid; gap: 6px; }
.bars2 .row { display: grid; grid-template-columns: 180px 1fr 140px; gap: 10px; align-items: center; font-size: 13px; }
.bars2 .track { background: #eef1f5; border-radius: 3px; height: 12px; position: relative; }
.bars2 .p50 { position: absolute; left: 0; top: 0; bottom: 0; background: #182f4d; border-radius: 3px; }
.bars2 .p95 { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #e0a73c; }
.chartcol { position: relative; }
.chartcol .count { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); }
@media (max-width: 1100px) { .kb-layout { grid-template-columns: 1fr; } .turn { grid-template-columns: 60px 1fr; } }
@media (max-width: 700px) {
  .drawer dl, .kv { grid-template-columns: 1fr; }
  .bars2 .row { grid-template-columns: 1fr; }
  .turn { grid-template-columns: 1fr; }
}