/* Two faces, one page.
 *
 * By default this is the product: the wall fills the frame and there is no chrome at all, because
 * in a conferencing client every pixel we spend on ourselves is a pixel taken from the thing
 * people joined the call to look at.
 *
 * `body.debug` brings back the old harness - the log, the URL box, the header. Everything about
 * the diagnostic build still exists, it is just no longer the default view. */
:root {
    color-scheme: dark;
    --bg: #15171c;
    --panel: #1d2026;
    --line: #2d323b;
    --text: #e6e8ec;
    --muted: #9aa3b0;
    --ok: #4ec07a;
    --warn: #e0b04a;
    --error: #e06c6c;
    --accent: #4b7fd6;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    height: 100vh;
    display: flex;
    background: #000;
    color: var(--text);
    font: 14px/1.5 system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------
   The wall
   --------------------------------------------------------------------------- */

#stage { flex: 1; position: relative; min-width: 0; background: #000; }
#portal { width: 100%; height: 100%; border: 0; display: block; }

/* The diagnostics hot corner. Invisible, but focusable - a control with no keyboard path is not
   a control, and this is the only way in once the frame has swallowed the keyboard. */
#debug-corner {
    position: fixed;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    z-index: 40;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
}
#debug-corner:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: rgba(75, 127, 214, 0.15);
}

/* ---------------------------------------------------------------------------
   Status - everything that happens before there is a wall to look at
   --------------------------------------------------------------------------- */

/* Scoped to #stage on purpose. These rules make an element cover its whole positioned ancestor,
   opaquely - so any OTHER page sharing this stylesheet that happens to use the id gets an
   invisible black sheet over everything, which is exactly what configure.html hit. */
#stage > #status {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-content: center;
    padding: 32px;
    background: #000;
}

/* An author `display` rule beats the UA stylesheet's `[hidden] { display: none }`, so without
   these the panels never hide and the wall is viewed through an opaque layer. It still looks
   almost right, which is what makes it worth a rule of its own rather than a tidier selector. */
#stage > #status[hidden],
#pill[hidden],
#actions[hidden],
#status-spinner[hidden] { display: none; }

#stage > #status .card {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
    max-width: 44ch;
}
#stage > #status h2 { margin: 0; font-size: 16px; font-weight: 600; }
#stage > #status p { margin: 0; color: var(--muted); font-size: 13px; }
#stage > #status .row { display: flex; gap: 8px; margin-top: 4px; }
#stage > #status.error h2 { color: var(--error); }

.spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--line);
    border-top-color: var(--muted);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Respect a viewer who has asked for less movement. A still ring reads as "busy" well enough. */
@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
}

/* What the status card becomes once the wall may already be painting underneath it. */
#pill {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 20;
    margin: 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(29, 32, 38, 0.9);
    color: var(--muted);
    font-size: 12px;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Side-panel actions
   --------------------------------------------------------------------------- */

#actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0));
}
#actions button { flex: 1; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

button {
    background: var(--line);
    border: 0;
    color: var(--text);
    border-radius: 4px;
    padding: 7px 12px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
button:hover:not(:disabled) { background: #3a414c; }
button:disabled { opacity: 0.5; cursor: default; }
button.primary { background: var(--accent); }
button.primary:hover:not(:disabled) { background: #5a8de0; }

/* ---------------------------------------------------------------------------
   Diagnostics - the old harness, now behind a gesture
   --------------------------------------------------------------------------- */

#debug {
    display: none;
    width: 420px;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--line);
    background: var(--panel);
}
body.debug #debug { display: flex; }

#debug header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}
#debug header h1 { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
#debug-close { background: none; padding: 0 6px; font-size: 18px; line-height: 1; color: var(--muted); }
#debug-close:hover { background: none; color: var(--text); }

.controls { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.controls label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.controls input {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 4px;
    padding: 6px 8px;
    font: 12px/1.4 ui-monospace, monospace;
}
.controls .row { display: flex; gap: 6px; }
.hint { margin: 0; font-size: 11px; color: var(--muted); }
.hint code { font-size: 11px; color: var(--text); }
kbd { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }

#log {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 8px 12px;
    list-style: none;
    font: 12px/1.5 ui-monospace, monospace;
}
#log li { padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); white-space: pre-wrap; }
#log li.ok { color: var(--ok); }
#log li.warn { color: var(--warn); }
#log li.error { color: var(--error); }
#log pre { margin: 4px 0 0 0; color: var(--muted); font-size: 11px; overflow-x: auto; }

/* ---------------------------------------------------------------------------
   The host stand-in (nest.html)
   --------------------------------------------------------------------------- */

/* A thin bar so a nested run is obviously nested. Without it, a three-level stack looks exactly
   like a two-level one in a screenshot, and the whole reason this page exists is that the extra
   level is invisible from inside. */
body.nest { flex-direction: column; background: #0c0d10; }
#nest-bar {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 5px 10px;
    border-bottom: 1px solid var(--line);
    font: 11px/1.4 ui-monospace, monospace;
    color: var(--muted);
}
#nest-sandbox { color: var(--warn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nested { flex: 1; width: 100%; border: 0; display: block; background: #000; }

/* ---------------------------------------------------------------------------
   The Teams tab configuration dialog
   --------------------------------------------------------------------------- */

/* Teams gives this page a small panel of its own, so it opts out of the full-height flex layout
   rather than inheriting it. */
body.configure {
    display: block;
    height: auto;
    padding: 20px;
    background: var(--bg);
}
body.configure main { max-width: 56ch; display: grid; gap: 10px; }
body.configure h1 { margin: 0; font-size: 16px; }
body.configure label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
body.configure input {
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 4px;
    padding: 8px;
    font: 12px/1.4 ui-monospace, monospace;
}