:root {
    --demo-topbar-height: 56px;
}

html,
body.demo-live-page {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

body.demo-live-page {
    display: block;
    background: var(--sb-night-deep);
    color: var(--sb-ink);
}

.demo-live-page [hidden] { display: none !important; }

.demo-topbar {
    height: calc(var(--demo-topbar-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 24px 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--sb-line-soft);
    background: var(--sb-night-deep);
}

.demo-wordmark {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--sb-ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.demo-wordmark span { color: var(--sb-amber-bright); }

.demo-title {
    padding-left: 16px;
    border-left: 1px solid var(--sb-line);
    color: var(--sb-ink-soft);
    font-size: 0.875rem;
}

.demo-limit {
    color: var(--sb-ink-muted);
    font-size: 0.875rem;
}

.demo-workspace {
    height: calc(100dvh - var(--demo-topbar-height) - env(safe-area-inset-top));
    display: grid;
    grid-template-columns: minmax(620px, 1.2fr) minmax(400px, 0.8fr);
    overflow: hidden;
}

/* The presenter half uses the production host view and only changes its
   page-level positioning so it can live inside this side-by-side demo. */
.demo-presenter {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--sb-line);
    background: var(--sb-night-deep);
}

.demo-presenter .host-screen,
.demo-presenter .host-screen.active {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    background: var(--sb-night-deep) !important;
}

.demo-presenter .host-screen .header { flex: 0 0 auto; padding: 12px 16px; }
.demo-presenter .header-content,
.demo-presenter .control-bar-inner { max-width: none; }
.demo-presenter .header-right { gap: 12px; }
.demo-presenter .btn-invite:disabled {
    border: 1px solid var(--sb-line-soft) !important;
    background: var(--sb-surface-raised) !important;
    color: var(--sb-ink-muted) !important;
    cursor: not-allowed;
    opacity: 1;
}

.demo-presenter .main-content {
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 184px;
    gap: 12px;
    overflow: hidden;
}

.demo-presenter .caption-preview-panel {
    min-width: 0;
    min-height: 0 !important;
    height: 100%;
}

.demo-presenter .caption-preview-header { padding: 16px 16px 0; }
.demo-presenter .caption-tabs { padding: 12px 16px 0; }
.demo-presenter .captions-container {
    min-height: 0;
    max-height: none;
    padding: 16px;
}

.demo-presenter .caption-source,
.demo-presenter .caption-target {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.demo-presenter .caption-timestamp { color: var(--sb-ink-muted); }

.demo-presenter .active-translations { padding: 12px 16px; }
.demo-presenter .service-status-rail { padding: 16px; }
.demo-presenter .service-status-rail h2 { margin-bottom: 16px; }
.demo-presenter .service-status-item { padding: 12px 0; }
.demo-presenter .service-status-item .service-join-code { font-size: 1.25rem; }

.demo-presenter .control-bar {
    position: static;
    flex: 0 0 auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}

.demo-presenter .mic-toggle {
    width: 48px;
    height: 48px;
}

.demo-presenter .mic-toggle.demo-ready {
    background: var(--sb-amber);
    color: var(--sb-night-deep);
}

.demo-presenter .mic-toggle.demo-ready:hover { background: var(--sb-amber-bright); }
.demo-presenter .mic-toggle:disabled { cursor: wait; opacity: 0.65; }
.demo-presenter .btn-end-call:disabled { cursor: not-allowed; opacity: 0.45; }

.demo-language-pill {
    min-height: 44px;
    padding: 6px 8px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px !important;
}

.demo-language-pill > span {
    color: currentColor;
    font-size: 0.75rem;
    white-space: nowrap;
}

.demo-language-pill select {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    padding: 0 24px 0 8px;
    border: 0;
    border-radius: 4px;
    background: var(--sb-night-deep);
    color: var(--sb-ink);
    font: 600 0.875rem/1.4 var(--font-body);
}

.demo-language-pill select:focus-visible { outline: 2px solid var(--sb-amber); outline-offset: 2px; }
.demo-language-pill select:disabled { cursor: not-allowed; opacity: 0.65; }

.demo-error {
    margin: 0;
    padding: 12px 16px;
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.caption-runtime-status[data-state="ready"] { color: var(--sb-ink-muted); }
.caption-runtime-status[data-state="ready"] .caption-runtime-dot { background: var(--sb-ink-muted); }

/* The attendee half is the production viewer surface. */
.attendee-panel {
    min-width: 0;
    min-height: 0 !important;
    height: 100%;
    background: var(--sb-night-deep) !important;
}

.attendee-panel .header-bar { flex: 0 0 auto; }
.attendee-panel .session-info { display: flex; align-items: baseline; gap: 16px; }
.attendee-panel .session-info strong { color: var(--sb-ink); }
.attendee-panel .connection-status.ready { color: var(--sb-ink-muted); }

.attendee-panel .caption-container {
    min-height: 0;
    padding: 32px !important;
}

.attendee-panel .caption-block { max-width: 34ch; }
.attendee-panel .caption-translation {
    font-size: 2rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.attendee-panel .waiting-message h2 {
    margin: 0 0 8px;
    color: var(--sb-ink-soft);
    font-family: var(--font-body);
    font-size: 1.25rem;
}

.attendee-panel .waiting-message p { font-size: 1rem; line-height: 1.6; }
.attendee-panel .viewer-footer > span:last-child { color: var(--sb-ink-soft); }

@media (max-width: 1180px) {
    .demo-workspace { grid-template-columns: minmax(560px, 1.12fr) minmax(360px, 0.88fr); }
    .demo-presenter .main-content { grid-template-columns: 1fr; }
    .demo-presenter .service-status-rail { display: none; }
}

@media (max-width: 860px) {
    html,
    body.demo-live-page { overflow-y: auto; }

    .demo-topbar { padding-inline: 16px; }
    .demo-workspace {
        height: auto;
        min-height: calc(100dvh - var(--demo-topbar-height) - env(safe-area-inset-top));
        grid-template-columns: 1fr;
        grid-template-rows: minmax(500px, 62dvh) minmax(420px, 58dvh);
        overflow: visible;
    }
    .demo-presenter { border-right: 0; border-bottom: 1px solid var(--sb-line); }
    .attendee-panel { min-height: 420px !important; }
    .attendee-panel .caption-container { padding: 24px !important; }
    .attendee-panel .caption-translation { font-size: 1.75rem; }
}

@media (max-width: 520px) {
    .demo-topbar { grid-template-columns: 1fr auto; }
    .demo-title { font-size: 0.75rem; }
    .demo-wordmark { font-size: 1.25rem; }
    .demo-limit { display: none; }

    .demo-workspace { grid-template-rows: minmax(520px, 68dvh) minmax(400px, 56dvh); }
    .demo-presenter .host-screen .header { padding: 8px 12px; }
    .demo-presenter .header-right { gap: 8px; }
    .demo-presenter .btn-invite { display: none; }
    .demo-presenter .main-content { padding: 12px; }
    .demo-presenter .caption-preview-header { padding-inline: 12px; }
    .demo-presenter .caption-tabs { padding-inline: 12px; }
    .demo-presenter .captions-container { padding: 12px; }
    .demo-presenter .active-translations { padding: 8px 12px; }
    .demo-language-pill {
        width: 100%;
        grid-template-columns: 92px minmax(0, 1fr);
    }
    .demo-presenter .control-bar { padding-inline: 12px; }
    .demo-presenter .mic-label { font-size: 0.75rem; }
    .demo-presenter .btn-end-call { padding-inline: 12px; }

    .attendee-panel .header-bar { min-height: 56px; padding: 8px 16px; }
    .attendee-panel .session-info { display: grid; gap: 4px; }
    .attendee-panel .connection-status { font-size: 0.75rem; }
    .attendee-panel .caption-container { padding: 16px !important; }
    .attendee-panel .caption-translation { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .demo-presenter .mic-toggle,
    .caption-block-entering { transition: none; animation: none; }
}