/* Flowwatch's sidebar, shared by both dashboards. Colours and fonts come from tokens.css. */
body{padding:0}
.app{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:100vh}
.app>.wrap{width:100%;padding:24px 24px 60px}
#nav{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;background:var(--panel);
  border-right:1px solid var(--line);padding:18px 10px;display:flex;flex-direction:column;gap:2px;font-family:var(--sans)}
.nav-brand{font-weight:700;font-size:14px;padding:0 8px 4px;color:var(--ink)}
.nav-grp{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:14px 8px 4px}
.nav-it{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;color:var(--mut);text-decoration:none;font-size:13px}
.nav-it[hidden]{display:none}
.nav-it:hover{background:var(--panel2);color:var(--ink)}
.nav-it.on{background:var(--panel2);color:var(--ink);font-weight:600}
.nav-ic{width:16px;text-align:center;flex:none}
.nav-badge{margin-left:auto;font-family:var(--mono);font-size:10.5px;padding:0 6px;border-radius:3px;white-space:nowrap}
.nav-badge:empty{display:none}
.nav-badge.alert{background:rgba(239,91,91,.16);color:var(--red)}
.nav-badge.busy{background:rgba(245,181,68,.16);color:var(--amber)}
.nav-badge.quiet{color:var(--dim)}
.nav-badge.unknown{color:var(--dim);border:1px dashed var(--grey)}
[data-panel][hidden]{display:none!important}
.panel-title{font-size:18px;margin:0 0 12px}
/* The setup banner and the "for the agent" text, on both pages. */
.setup-banner{border:1px solid var(--amber);background:rgba(245,181,68,.08);padding:12px 14px;margin:0 0 16px;font-size:13px;color:var(--ink)}
.setup-banner[hidden]{display:none}
.setup-banner b{color:var(--amber)}
.setup-banner ul{margin:6px 0 0;padding-left:18px;color:var(--mut)}
.setup-banner .opt{font-family:var(--mono);font-size:10px;color:var(--dim);border:1px solid var(--line);padding:0 4px}
.setup-banner .step{color:var(--dim)}
/* The demo's banner, and its one line of orientation on Sessions (render.js renderDemo). */
.demo-banner{border:1px solid var(--cyan);background:rgba(90,200,250,.08);padding:10px 14px;margin:0 0 16px;font-size:13px;color:var(--ink)}
.demo-orient{margin:-4px 0 12px;font-size:13px;color:var(--mut)}
details.for-agent{margin-top:10px;max-width:80ch;position:relative}
details.for-agent>summary{cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--mut)}
details.for-agent pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:11.5px;
  background:var(--panel2);border:1px solid var(--line);padding:10px;margin:6px 0 0;color:var(--ink)}
.empty-note{color:var(--mut);font-size:13px}
@media(max-width:820px){.app{grid-template-columns:56px minmax(0,1fr)}#nav{padding:12px 6px}.nav-brand,.nav-grp,.nav-lb{display:none}.nav-it{position:relative;justify-content:center;padding:8px 4px}.nav-badge{position:absolute;top:-2px;right:-2px;font-size:9px;padding:0 3px}}