/* Setup adds a teaching cue to the room's existing response controls. */
.microphone-preflight { display: contents; color: var(--room-ink, #f5f2ea); font: 12px/1.7 var(--font-ui, monospace); }
.microphone-preflight[hidden], .microphone-preflight [hidden] { display: none !important; }
body.tutor-page .nb-tutor .session-room-response:has(.microphone-preflight:not([hidden])) {
    /* Entry normally hides the dock until Begin; setup uses the same controls before joining. */
    display: flex !important; flex-wrap: wrap; justify-content: center;
}
.microphone-accessible { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.microphone-preflight-help, .microphone-tutorial { position: absolute; bottom: calc(100% + 20px); left: 50%; transform: translateX(-50%); margin: 0; text-align: center; }
.microphone-preflight-help { width: min(380px, calc(100vw - 48px)); color: var(--presentation-muted, #c5d3ca); font-size: 12px; }
.microphone-space {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    width: 156px; height: 44px; margin-inline: auto;
    border: 1px solid var(--presentation-rule, #a9c5b54d); border-radius: 4px;
    background: #18392f80; color: var(--presentation-paper, #f5f2ea);
    font: 12px var(--font-ui, monospace); pointer-events: none;
    transition: color .16s, background-color .16s;
}
.microphone-space-symbol { width: 34px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.microphone-preflight[data-mic-state="greeting"] .microphone-space { animation: microphone-space-light 2.8s ease-in-out infinite; }
/* Keep the keycap border steady. A hold changes its fill and symbol, with no focus ring. */
@keyframes microphone-space-light {
    0%, 15%, 90%, 100% { color: var(--presentation-paper, #f5f2ea); background-color: #18392f80; }
    30%, 70% { color: #213d32; background-color: var(--presentation-accent, #e5ad8a); }
}
.microphone-space.is-held { animation: none !important; color: #213d32; background-color: var(--presentation-accent, #e5ad8a); }
.microphone-preflight-actions { position: absolute; bottom: calc(100% + 20px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.microphone-preflight:has(.microphone-preflight-actions button:not([hidden])) .microphone-preflight-help { bottom: calc(100% + 76px); }
.microphone-preflight-actions:not(:has(button:not([hidden]))) { display: none; }
.microphone-preflight .microphone-preflight-primary { cursor: pointer; border: 0; border-radius: 4px; min-height: 44px; padding: 11px 24px; background: var(--presentation-paper, #f5f2ea); color: var(--presentation-green, #25473b); font: 12px var(--font-ui, monospace); }
.microphone-preflight .microphone-preflight-primary:hover:not(:disabled) { background: var(--presentation-accent, #e5ad8a); }
.microphone-preflight button:disabled { opacity: .55; cursor: default; }
.microphone-preflight button:focus-visible { outline: 2px solid var(--presentation-accent, #e5ad8a); outline-offset: 4px; }
/* The ordinary typing bubble takes the response lane while someone types. */
.nb-tutor:has(.nb-tutor-student-line.is-typing) .microphone-tutorial,
.nb-tutor:has(.nb-tutor-student-line.is-typing) .microphone-preflight-help,
.nb-tutor:has(.nb-tutor-student-line.is-typing) .microphone-preflight-actions { display: none; }
@media(prefers-reduced-motion:reduce) { .microphone-space { animation: none !important; transition: none; } }