/* ==========================================================================
   RSConclave - Canvas Suite chrome.
   Every colour comes from one of the fifteen --se-* custom properties.
   themes.js recolours the whole app by setting those on :root.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Classic - the defaults every theme overrides */
    --se-panel: #262a33;
    --se-panel-2: #2d323d;
    --se-input: #1b1e25;
    --se-border: #3a4150;
    --se-txt: #e6e9ef;
    --se-txt-dim: #9aa3b2;
    --se-accent: #4c8bf5;
    --se-active: #0066cc;
    --se-up: #2e9b57;
    --se-down: #d64545;
    --se-warn: #d9a92f;
    --se-unknown: #8a8f98;
    --se-series-out: #2e9b57;
    --se-logo-a: #4c8bf5;
    --se-logo-b: #2e9b57;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--se-panel-2);
    color: var(--se-txt);
    font-size: 14px;
    line-height: 1.5;
    /* dvh tracks the real visible height as mobile URL bars show and hide;
       the vh line stays as the fallback for engines without it */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

a { color: var(--se-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 2px; }

/* ===== Top bar ===== */
#topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 42px;
    padding: 6px 12px;
    background: var(--se-panel);
    border-bottom: 1px solid var(--se-border);
    flex-wrap: wrap;
    flex: none;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.brand .logo { display: inline-flex; align-items: center; }
.brand-name { letter-spacing: 0.2px; }
#topbar .spacer { flex: 1; }
#topbar label { color: var(--se-txt-dim); font-size: 12px; }

/* ===== Shell ===== */
#layout { display: flex; flex: 1; min-height: 0; }

#sidebar {
    /* Driven by a custom property so the drag handle can set one value and both
       width and min-width follow. min-width matters because #layout is a flex
       row and the sidebar would otherwise be squeezed by a wide transcript. */
    width: var(--se-sidebar-w, 235px);
    min-width: var(--se-sidebar-w, 235px);
    background: var(--se-panel);
    border-right: 1px solid var(--se-border);
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 10px;
    overflow-y: auto;
}
#sidebar h2 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--se-txt-dim);
    margin-top: 4px;
}
/* Drag handle between the sidebar and the main pane. Sits in the flex row as a
   thin, non-shrinking column; the hit area is widened with padding rather than
   width so the visible seam stays 1px. */
#sidebar-resize {
    flex: 0 0 7px;
    margin-left: -3px;
    margin-right: -3px;
    cursor: col-resize;
    background: transparent;
    z-index: 5;
}
#sidebar-resize:hover,
#sidebar-resize:focus-visible,
body.resizing-sidebar #sidebar-resize {
    background: var(--se-accent);
    opacity: 0.5;
}
/* Kill text selection while dragging, or the pointer paints the transcript blue. */
body.resizing-sidebar { user-select: none; cursor: col-resize; }

/* The roundtable "ideas" fold: a dense list, so it stays readable on a phone
   without the list markers eating the indent. */
.ideas summary { color: var(--se-accent); }
.idea-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--se-txt-dim); }
.idea-list li { margin-bottom: 5px; }
.idea-list b { color: var(--se-txt); font-weight: 600; }

.nav-btn { width: 100%; text-align: left; }

/* Council ballot tally: label, proportional bar, count, who voted. */
.tally-row {
    display: grid;
    grid-template-columns: minmax(90px, 22%) 1fr 2.5em minmax(0, 30%);
    gap: 10px;
    align-items: center;
    padding: 3px 0;
}
.tally-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tally-bar {
    height: 9px;
    background: var(--se-input);
    border: 1px solid var(--se-border);
    border-radius: 3px;
    overflow: hidden;
}
.tally-fill { display: block; height: 100%; background: var(--se-accent); }
.tally-row .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#import-slot .nav-btn { color: var(--se-txt-dim); }

/* Tag filter chips and the per-row tag line in the session list. */
.row.wrap { flex-wrap: wrap; gap: 4px; }
.tag-chip { padding: 2px 8px; font-size: 11px; }
.tag-chip.selected { background: var(--se-active); border-color: var(--se-active); color: #fff; }
.sess-tags {
    color: var(--se-txt-dim);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-btn.selected { background: var(--se-active); border-color: var(--se-active); color: #fff; }
.nav-bottom { margin-top: auto; }

#main { flex: 1; overflow: hidden; display: flex; min-width: 0; }
.view { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.hidden { display: none !important; }
.view-scroll { flex: 1; overflow-y: auto; padding: 18px 20px 40px; }

/* ===== Type ===== */
.eyebrow, .endpoint-group-label, .metric .k {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--se-txt-dim);
}
h3.view-title { font-size: 16px; font-weight: 600; }
label { font-size: 13px; color: var(--se-txt-dim); }
.muted { color: var(--se-txt-dim); font-size: 12px; }
.error-text { color: var(--se-down); font-size: 12px; white-space: pre-wrap; }
.num, .stats, .ctx-tag, .metric .v {
    font-family: ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.stats { color: var(--se-txt-dim); font-size: 11px; }

/* ===== Buttons ===== */
button, .btn {
    font-family: inherit;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid var(--se-border);
    background: var(--se-panel-2);
    color: var(--se-txt);
    cursor: pointer;
}
button:hover, .btn:hover { border-color: var(--se-accent); }
button:disabled { opacity: 0.5; cursor: default; border-color: var(--se-border); }
button.primary, .btn-primary {
    background: var(--se-accent);
    border-color: var(--se-accent);
    color: #fff;
    font-weight: 500;
}
button.primary:hover, .btn-primary:hover { filter: brightness(1.1); }
button.danger, .btn-danger { color: var(--se-down); }
button.danger:hover, .btn-danger:hover { border-color: var(--se-down); }
button.mini { padding: 2px 8px; font-size: 11px; }
a.btn, a > button { text-decoration: none; }

/* ===== Inputs ===== */
input[type="text"], input[type="password"], input[type="number"], input:not([type]),
select, textarea {
    font-family: inherit;
    font-size: 13px;
    padding: 5px 8px;
    background: var(--se-input);
    border: 1px solid var(--se-border);
    border-radius: 4px;
    color: var(--se-txt);
}
textarea { resize: vertical; width: 100%; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--se-accent); }
input[type="checkbox"] { accent-color: var(--se-accent); width: 15px; height: 15px; cursor: pointer; }
input[type="number"] { width: 68px; }
input[type="color"] { padding: 1px; width: 32px; height: 28px; background: var(--se-input); border: 1px solid var(--se-border); border-radius: 4px; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.45; cursor: default; }

/* ===== Layout helpers ===== */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; }

/* ===== Panels ===== */
.panel, .setup-band, .card, .settings-block {
    background: var(--se-panel);
    border: 1px solid var(--se-border);
    border-radius: 6px;
    overflow-x: auto;
}
.setup-band, .settings-block {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
details {
    border: 1px solid var(--se-border);
    border-radius: 6px;
    padding: 9px 11px;
    background: var(--se-panel);
}
details summary { cursor: pointer; color: var(--se-txt-dim); font-size: 12px; }
details[open] summary { margin-bottom: 9px; }

/* ===== State: pills, badges, dots (shape as well as colour) ===== */
.sev, .badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 9px;
    border: 1px solid var(--se-border);
    color: var(--se-txt-dim);
    white-space: nowrap;
}
.sev { font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }
.sev.crit, .badge.fail { color: var(--se-down); border-color: var(--se-down); }
.sev.warn { color: var(--se-warn); border-color: var(--se-warn); }
.badge.ok { color: var(--se-up); border-color: var(--se-up); }
.badge.busy { color: var(--se-warn); border-color: var(--se-warn); }

.dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--se-unknown);
    flex: none;
}
.dot.ok { background: var(--se-up); }
.dot.bad { background: var(--se-down); }

.code-chip {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--se-input);
    border: 1px solid var(--se-border);
    color: var(--se-txt-dim);
}

/* ===== Auth overlay ===== */
#auth-overlay {
    position: fixed;
    inset: 0;
    background: var(--se-panel-2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.auth-card {
    background: var(--se-panel);
    border: 1px solid var(--se-border);
    border-radius: 6px;
    padding: 22px;
    width: min(340px, 90vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#user-chip { display: inline-flex; align-items: center; gap: 6px; }

/* ===== Sidebar: search ===== */
#session-search { width: 100%; }
.search-hit {
    font-size: 11px;
    color: var(--se-txt-dim);
    line-height: 1.35;
    margin-top: 2px;
    overflow: hidden;
}
.search-speaker { color: var(--se-accent); }
.search-mark {
    color: var(--se-txt);
    font-weight: 600;
    background: var(--se-panel-2);
    border-radius: 2px;
}

/* ===== Sidebar: sessions ===== */
/* No overflow of its own: the sidebar is the one scroller there. A nested
   list scroller made two competing wheel targets a few pixels apart. */
#session-list { list-style: none; }
#session-list li {
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#session-list li:hover { border-color: var(--se-accent); }
#session-list li.active { background: var(--se-input); border-color: var(--se-active); }
#session-list .sess-meta {
    color: var(--se-txt-dim);
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
#session-list .sess-del { cursor: pointer; }
#session-list .sess-del:hover { color: var(--se-down); }

/* ===== Sidebar: run status + context meter ===== */
#status-strip {
    background: var(--se-panel-2);
    border: 1px solid var(--se-border);
    border-radius: 4px;
    padding: 8px 9px;
    font-size: 12px;
}
#status-phase { color: var(--se-txt); }
#context-meter {
    height: 5px;
    background: var(--se-input);
    border-radius: 3px;
    margin: 7px 0 3px;
    overflow: hidden;
}
#context-meter-fill { height: 100%; background: var(--se-up); width: 0; }
#context-meter-fill.warn { background: var(--se-warn); }
#context-meter-fill.crit { background: var(--se-down); }
#context-meter-label {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: var(--se-txt-dim);
}
#context-meter-label.ctx-overflow { color: var(--se-down); font-weight: 600; }

/* ===== Sidebar: what's loaded on the box ===== */
#box-status { font-size: 11px; }
#box-status .box-ep { margin-bottom: 4px; }
#box-status .box-name { color: var(--se-txt-dim); }
#box-status .box-err { color: var(--se-down); }
#box-status .box-model {
    font-family: ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--se-txt-dim);
    padding-left: 8px;
}

/* ===== Cards (council + pipeline) ===== */
.card { margin-bottom: 14px; overflow: hidden; }
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--se-border);
    font-size: 13px;
}
.card-header .model-name { font-weight: 600; }
/* Deliberately NOT scrollable. A capped, scrolling card body turns every
   response into a wheel trap, leaving nowhere neutral to scroll the page. */
.card-body {
    padding: 12px 14px;
    white-space: pre-wrap;
    line-height: 1.55;
    font-size: 13px;
}
.card.consolidation { border-color: var(--se-active); }
.card.prompt-card { border-style: dashed; }
.card.prompt-card .card-body { color: var(--se-txt-dim); }

/* Scenario / roster panel at the top of a roundtable */
.session-brief { margin-bottom: 10px; }
.session-brief .brief-scenario { white-space: pre-wrap; font-size: 13px; margin-bottom: 10px; }
.session-brief .roster { display: flex; flex-direction: column; gap: 4px; }
.session-brief .roster-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.session-brief .roster-row .rname { font-weight: 600; min-width: 90px; }
.session-brief .roster-row .rmodel {
    font-family: ui-monospace, Consolas, monospace;
    color: var(--se-txt-dim);
}
.session-brief .roster-row .roverlay { color: var(--se-txt-dim); flex: 1; }

/* ===== Model checklist ===== */
/* Tall enough that scrolling inside it is rare; the page scroller does the work. */
.model-list { display: flex; flex-direction: column; gap: 3px; max-height: 55vh; overflow-y: auto; }
.model-item { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font-size: 13px; border-radius: 4px; }
/* the hover rail carries the eye across the wide gap to the inputs */
.model-item:hover { background: var(--se-panel-2); }
.model-item.clone { padding-left: 20px; color: var(--se-txt-dim); }
.model-item input[type="number"] { width: 62px; padding: 2px 6px; font-size: 12px; }
.endpoint-group-label { margin-top: 7px; }
.ctx-tag { font-size: 11px; color: var(--se-txt-dim); white-space: nowrap; }

/* ===== Roundtable ===== */
.participant-row, .stage-row {
    display: grid;
    gap: 8px;
    align-items: start;
    background: var(--se-panel-2);
    border: 1px solid var(--se-border);
    border-radius: 4px;
    padding: 8px;
}
.participant-row { grid-template-columns: 32px 110px 1fr 1fr 1fr 62px 72px 30px; }
.stage-row { grid-template-columns: 140px 1fr 1fr 62px 72px 30px; }
.participant-row textarea, .stage-row textarea { grid-column: 1 / -1; min-height: 32px; }

/* The ONE scroller between topbar and gate bar: header, brief, judge panel
   and transcript all ride inside it, so the wheel works everywhere and an
   opened panel scrolls away instead of squeezing the conversation. */
.transcript-scroll { flex: 1; min-height: 0; overflow-y: auto; }
#transcript { padding: 18px 20px; }
.bubble {
    border: 1px solid var(--se-border);
    border-left: 3px solid var(--se-border);
    background: var(--se-panel);
    border-radius: 6px;
    padding: 10px 13px;
    margin-bottom: 12px;
    max-width: 900px;
}
.bubble .speaker { font-weight: 600; font-size: 12px; margin-bottom: 5px; }
.bubble .speaker .model-tag {
    font-family: ui-monospace, Consolas, monospace;
    color: var(--se-txt-dim);
    font-weight: 400;
    font-size: 11px;
}
.bubble .text { white-space: pre-wrap; line-height: 1.55; font-size: 13px; }
.bubble.neutral {
    border-left-color: var(--se-unknown);
    background: var(--se-panel-2);
    font-style: italic;
    max-width: 700px;
    margin-inline: auto;
}
.bubble.error { border-left-color: var(--se-down); }
/* Chat: your own turns sit on the input surface so the two sides read apart */
.bubble.mine { border-left-color: var(--se-active); background: var(--se-input); }
.bubble.consolidation { border-left-color: var(--se-active); max-width: 900px; }
.bubble .stats { color: var(--se-txt-dim); font-size: 11px; margin-top: 6px; }

#gate-bar {
    border-top: 1px solid var(--se-border);
    background: var(--se-panel);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: none;
}
.gen-indicator { color: var(--se-warn); font-size: 13px; }
.blink { animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }

/* ===== Rendered markdown (completed messages only) ===== */
/* pre-wrap belongs to streaming plain text; rendered markdown manages its
   own spacing, so double-spacing would result if both applied */
.text.md, .card-body.md { white-space: normal; }
.md p { margin: 0 0 8px; }
.md p:last-child { margin-bottom: 0; }
.md .md-h { font-weight: 600; margin: 10px 0 6px; }
.md .md-h1, .md .md-h2 { font-size: 15px; }
.md .md-h3 { font-size: 14px; }
.md .md-h4, .md .md-h5, .md .md-h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--se-txt-dim);
}
.md code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    background: var(--se-input);
    border: 1px solid var(--se-border);
    border-radius: 4px;
    padding: 0 4px;
}
.md pre {
    background: var(--se-input);
    border: 1px solid var(--se-border);
    border-radius: 4px;
    padding: 8px 10px;
    margin: 0 0 8px;
    overflow-x: auto;
}
/* fenced blocks: label + copy/save bar attached above the pre */
.md .md-codeblock { margin: 0 0 8px; }
.md .md-codebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: var(--se-panel-2);
    border: 1px solid var(--se-border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}
.md .md-lang {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: var(--se-txt-dim);
}
.md .md-codeblock pre { border-radius: 0 0 4px 4px; margin: 0; }
.md pre code { background: none; border: none; padding: 0; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md hr { border: none; border-top: 1px solid var(--se-border); margin: 10px 0; }
/* wide tables scroll inside their own container, never the page */
.md .md-tablewrap { overflow-x: auto; margin: 0 0 8px; }
.md table { border-collapse: collapse; font-size: 12px; }
.md th, .md td {
    border: 1px solid var(--se-border);
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}
.md th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--se-txt-dim);
    background: var(--se-panel-2);
}

/* ===== Thinking blocks ===== */
details.think { border: none; padding: 2px 0; margin-bottom: 6px; background: none; }
details.think summary { font-size: 11px; font-style: italic; }
details.think .think-body {
    white-space: pre-wrap;
    color: var(--se-txt-dim);
    font-size: 12px;
    border-left: 2px solid var(--se-border);
    padding: 4px 10px;
    margin: 4px 0;
}

/* ===== Settings ===== */
.endpoint-row {
    display: grid;
    grid-template-columns: 1fr 2fr 110px 80px auto;
    gap: 8px;
    align-items: center;
}
/* Collapsed by default: a name plus a snippet is enough to identify one,
   and a dozen personas stay a dozen rows instead of a dozen textareas. */
.persona-row {
    background: var(--se-panel-2);
    border: 1px solid var(--se-border);
    border-radius: 4px;
    padding: 7px 10px;
}
.persona-row > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    font-size: 13px;
    color: var(--se-txt);
}
/* custom marker: flex display drops the native one */
.persona-row > summary::-webkit-details-marker { display: none; }
.persona-row > summary::before { content: '\25B8'; color: var(--se-txt-dim); font-size: 10px; }
.persona-row[open] > summary::before { content: '\25BE'; }
.persona-title { font-weight: 600; white-space: nowrap; }
.persona-preview {
    color: var(--se-txt-dim);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.persona-row .row input { flex: 1; }
.test-result {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: var(--se-txt-dim);
    white-space: pre-wrap;
    word-break: break-word;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 900px) {
    .participant-row, .stage-row { grid-template-columns: 1fr 1fr; }
}

/* ===== Mobile: the sidebar becomes a drawer ===== */
#nav-drawer { display: none; }
#nav-drawer .nav-label { display: none; }
#drawer-backdrop { display: none; }

@media (max-width: 760px) {
    #nav-drawer { display: inline-block; font-size: 16px; padding: 4px 10px; }

    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        width: min(280px, 85vw);
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        box-shadow: none;
    }
    body.drawer-open #sidebar { transform: translateX(0); }
    body.drawer-open #drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(0, 0, 0, 0.45);
    }

    /* The sidebar is a drawer here, so there is nothing to drag. */
    #sidebar-resize { display: none; }

    /*
     * topbar: keep hamburger, brand, user chip; drop decoration.
     *
     * nowrap is the important one. With wrapping allowed, the theme picker fell
     * to the start of a second row directly under the hamburger, where being
     * the widest control made it read as the primary navigation - so people
     * reached for the theme list when they wanted the menu. One row only, and
     * the picker is pinned to the right end away from the menu button.
     */
    #topbar { flex-wrap: nowrap; gap: 8px; }
    #topbar .badge { display: none; }
    #topbar label[for="theme"] { display: none; }
    #topbar #theme { margin-left: auto; max-width: 30vw; }
    /* flex: none, or the chip shrinks below its own Sign out button and the
       button spills out over the theme picker sitting next to it. */
    #user-chip { flex: none; display: flex; align-items: center; }
    #user-chip .user-name { display: none; }   /* the chip's Sign out is the useful half */
    /* nowrap + no shrink: with one row and a tight budget, flex was compressing
       "Sign out" until it broke over two lines and read as "Sig ou". */
    #topbar button { white-space: nowrap; flex: none; }

    /*
     * Everything on this row is load-bearing except the app's own name, so the
     * name is the only thing allowed to give. Shrinking to an ellipsis (and to
     * nothing on a narrow phone) beats a fixed breakpoint: one row of controls
     * needs about 420px and phones do not agree on how wide they are.
     */
    .brand { min-width: 0; overflow: hidden; flex: 0 1 auto; }
    .brand .logo { flex: none; }
    .brand-name {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* Make the menu button unmistakably the menu: label it, and give it the
       bordered affordance the bare glyph did not have. */
    #nav-drawer .nav-label { display: inline; margin-left: 6px; font-size: 14px; }
    #nav-drawer {
        flex: none;
        border-color: var(--se-accent);
        color: var(--se-txt);
        font-weight: 600;
    }

    .view-scroll { padding: 12px 12px 40px; }
    #transcript { padding: 12px 12px; }
    .bubble { max-width: 100%; }

    /* fields and controls at thumb size; 16px also stops mobile browsers
       auto-zooming the page when a smaller input takes focus */
    input, select, textarea, button {
        font-size: 16px;
    }
    button, .btn { padding: 8px 14px; }
    button.mini { padding: 5px 10px; font-size: 14px; }

    .endpoint-row { grid-template-columns: 1fr 1fr; }
    .participant-row, .stage-row { grid-template-columns: 1fr 1fr; }
}