#live{position:sticky;top:var(--live-top,64px);z-index:2;display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--bg);border-bottom:1px solid var(--rule);font:12px/1 var(--font);color:var(--muted)}
#liveDot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 0 transparent}
#liveDot.on{background:#22c55e;animation:pulse 1.6s ease-out infinite}
#liveDot.off{background:#ef4444}
#liveDot.rec{background:#ef4444;animation:pulse-red 1s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}
@keyframes pulse-red{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}100%{box-shadow:0 0 0 9px rgba(239,68,68,0)}}
#liveStatus{flex:none;font-weight:600;color:var(--text);white-space:nowrap}
#chips{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:2px 0}
#chips::-webkit-scrollbar{height:6px}
#chips::-webkit-scrollbar-thumb{background:var(--rule);border-radius:999px}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;max-width:260px;border:1px solid var(--rule);background:var(--panel);color:var(--text);border-radius:999px;padding:6px 10px;font:12px/1 var(--font);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip b{color:var(--muted);font-weight:600}
.chip small{color:var(--muted);font-size:11px}
.chip:hover{border-color:var(--accent)}
.chip.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.chip.fresh{animation:land .9s ease-out}
@keyframes land{0%{background:color-mix(in srgb,var(--accent) 45%,transparent)}100%{background:var(--panel)}}
#live .tools{flex:none;display:flex;gap:6px}
#live .tools button{border:1px solid var(--rule);background:transparent;color:var(--muted);border-radius:999px;padding:6px 10px;font:600 12px/1 var(--font);cursor:pointer}
#live .tools button:hover{color:var(--text);border-color:var(--text)}
#live .tools button.on{color:var(--accent);border-color:var(--accent)}
#live .tools button.rec{color:#ef4444;border-color:#ef4444}
#live .tools button:disabled{opacity:.45;cursor:default}
#live .tools button[hidden]{display:none}
#live .tools .ico{display:none;font-size:13px}
#empty{max-width:600px;margin:64px auto;padding:0 18px;text-align:center;color:var(--muted);font:14px/1.6 var(--font)}
#empty b{color:var(--text)}
#empty code{font:13px/1.4 var(--font);color:var(--text);background:var(--panel);border:1px solid var(--rule);border-radius:5px;padding:1px 6px}
#empty a{color:var(--accent)}
#empty .go{display:inline-block;margin-top:14px;padding:9px 16px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);font:700 13px/1 var(--font);text-decoration:none}
/* A still graph (nothing changed in it) needs no scrubber: give its room back
   so the bar fits a sidebar. */
[data-live] #controls.off{display:none}
@media (max-width:820px){#live{padding:6px 10px}#liveStatus{display:none}#live .tools button{padding:6px 8px}}
@media (max-width:560px){#bar{gap:6px}#bar .right{gap:2px}#share{padding:8px 10px}.end{display:none}#scrub{width:min(34vw,520px)}
  #live .tools .txt{display:none}#live .tools .ico{display:inline}#live .tools button{padding:6px 9px}.chip{max-width:180px}}