/* ── Sidebar layout ─────────────────────────────────────────────────────
   The stage is a two-column grid when the sidebar is visible, collapsing
   to a single-column terminal when toggled off. */
.stage { grid-template-columns: 256px 1fr; grid-template-areas: 'sidebar terms' 'status status'; }
.stage.no-sidebar { grid-template-columns: 1fr; grid-template-areas: 'terms' 'status'; }
.terms { grid-area: terms; }
.sidebar { grid-area: sidebar; border-right: 1px solid var(--soa-line); border-left: none; background: linear-gradient(to right, #060a0f, var(--soa-bg)); padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.stage.no-sidebar .sidebar { display: none; }
.status-bar { grid-area: status; }

/* ── Widget shell ───────────────────────────────────────────────────── */
.widget { border: 1px solid var(--soa-line); background: rgba(10, 19, 24, 0.6); display: flex; flex-direction: column; box-shadow: inset 0 0 14px rgba(170,207,209,0.03); }
.widget-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--soa-line-soft); }
.widget-title { font-size: 10px; letter-spacing: 0.3em; color: var(--soa-accent); text-shadow: 0 0 6px rgba(170,207,209,0.3); }
.widget-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--soa-accent); box-shadow: 0 0 6px var(--soa-accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.widget-body { padding: 8px 10px; font-family: var(--font-mono); font-size: 11px; display: flex; flex-direction: column; gap: 3px; }
.kv { display: flex; justify-content: space-between; gap: 10px; }
.kv .k { color: var(--soa-accent-dim); letter-spacing: 0.15em; }
.kv .v { color: var(--soa-fg); }
.kv.warn .v { color: var(--soa-yellow); }
.bar { height: 4px; background: var(--soa-line-soft); margin-top: 6px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--soa-accent), var(--soa-green)); transition: width 0.5s ease; }

/* ── Mobile QR widget ───────────────────────────────────────────────── */
.mqr-status { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.25em; margin-bottom: 6px; }
.mqr-status .mqr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--soa-accent-dim); }
.mqr-online  .mqr-dot { background: var(--soa-green); box-shadow: 0 0 8px var(--soa-green); }
.mqr-starting .mqr-dot { background: var(--soa-yellow); animation: pulse 1s infinite; }
.mqr-error   .mqr-dot { background: var(--soa-red); }
.mqr-qr { display: grid; place-items: center; padding: 4px 0 8px; }
.mqr-img { width: 180px; height: 180px; display: block; }
.mqr-empty { font-size: 10px; opacity: 0.55; text-align: center; padding: 30px 10px; border: 1px dashed var(--soa-line-soft); }
.mqr-urls { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 10px; }
.mqr-url { display: grid; grid-template-columns: 28px 1fr auto; gap: 6px; align-items: center; }
.mqr-tag { color: var(--soa-accent); letter-spacing: 0.15em; }
.mqr-u   { color: var(--soa-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mqr-copy { background: transparent; color: var(--soa-accent-dim); border: 1px solid var(--soa-line-soft); padding: 2px 6px; font-size: 9px; cursor: pointer; }
.mqr-copy:hover { color: var(--soa-accent); border-color: var(--soa-accent); }
.mqr-actions { margin-top: 8px; display: flex; justify-content: flex-end; }
.mqr-toggle { background: transparent; color: var(--soa-accent); border: 1px solid var(--soa-accent); padding: 4px 14px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.3em; cursor: pointer; }
.mqr-toggle:hover { background: rgba(170,207,209,0.08); }
.mqr-err { color: var(--soa-red); font-family: var(--font-mono); font-size: 10px; padding-top: 6px; }

/* ── Topbar toggle buttons visual state ─────────────────────────────── */
#toggle-audio[data-state='off'] { color: var(--soa-accent-dim); text-decoration: line-through; }
#toggle-sidebar.on, #toggle-audio.on { border-color: var(--soa-accent); }

/* ── Mobile: sidebar becomes an overlay ────────────────────────────────
   Under ~768px the stage collapses to a single column so the terminal
   gets the full width. The sidebar stops being a grid column and floats
   over the terminal only when the user explicitly toggles it on. A
   scrim behind it gives a clear dismiss target. */
@media (max-width: 768px) {
    .stage,
    .stage.no-sidebar {
        grid-template-columns: 1fr;
        grid-template-areas: 'terms' 'status';
    }
    .sidebar {
        position: absolute;
        top: 0; bottom: 24px; left: 0;
        width: min(256px, 86vw);
        z-index: 5;
        border-right: 1px solid var(--soa-line);
        box-shadow: 0 0 40px rgba(0,0,0,0.6);
        transform: translateX(-100%);
        transition: transform 180ms ease-out;
    }
    .stage:not(.no-sidebar) .sidebar {
        transform: translateX(0);
        display: flex;
    }
    .stage.no-sidebar .sidebar { display: flex; }
    .stage::after {
        content: '';
        position: absolute;
        inset: 0 0 24px 0;
        background: rgba(0,0,0,0.55);
        z-index: 4;
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease-out;
    }
    .stage:not(.no-sidebar)::after {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── Sandbox-mode widget extras ──────────────────────────────────────── */
.widget-note {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(170,207,209,0.72);
    margin-bottom: 8px;
}
.widget-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    font-family: var(--font-mono, 'Fira Mono', ui-monospace, Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-align: left;
    color: #aacfd1;
    background: rgba(170,207,209,0.06);
    border: 1px solid rgba(170,207,209,0.26);
    cursor: pointer;
    transition: background 80ms;
}
.widget-btn:hover { background: rgba(170,207,209,0.14); }
.widget-btn-ghost {
    background: transparent;
    border-style: dashed;
    color: rgba(170,207,209,0.72);
}
.widget-btn-ghost:hover {
    color: #aacfd1;
    background: rgba(170,207,209,0.05);
}

/* ── WORLD VIEW (globe) ──────────────────────────────────────────── */
.globe-canvas {
    position: relative;
    width: 100%;
    height: 200px;
    background: radial-gradient(circle at 50% 50%, rgba(170,207,209,0.04), transparent 70%);
    border: 1px solid rgba(170,207,209,0.14);
    overflow: hidden;
}
.globe-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.globe-meta {
    margin-top: 6px;
    font-size: 11px;
    color: rgba(170,207,209,0.8);
    letter-spacing: 0.04em;
}
.globe-err {
    padding: 10px;
    font-size: 11px;
    color: rgba(255,110,110,0.85);
}

/* ── NETWORK PULSE ──────────────────────────────────────────────── */
.netchart-canvas {
    display: block;
    width: 100%;
    height: 60px;
    background: rgba(170,207,209,0.04);
    border: 1px solid rgba(170,207,209,0.14);
}
.netchart-legend {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(170,207,209,0.7);
    letter-spacing: 0.08em;
}

/* Globe sandbox-permission prompt */
.globe-meta-note { opacity: 0.7; }
.globe-meta-btn {
    background: transparent; color: var(--soa-accent);
    border: 1px solid var(--soa-accent-dim);
    padding: 1px 6px; font-family: var(--font-mono);
    font-size: 10px; cursor: pointer;
}
.globe-meta-btn:hover { border-color: var(--soa-accent); background: rgba(170,207,209,0.06); }