/*
 * AVI recorder layout.
 *
 * Shared by the candidate recording page (Components/Pages/Candidate/RecordInterview.razor)
 * and the layout debug sandbox (Components/Pages/TestPages/AviLayoutDebug.razor) so both
 * render identical layout with no drift. The .avi-mobile / .avi-tablet / .avi-desktop class
 * reflects the detected device and drives the mobile/tablet treatment: a horizontal-band
 * camera preview and a sticky question, on a normally scrolling page.
 */

/* Mobile: full-width video, larger touch targets, tighter spacing */
.avi-mobile video,
.avi-tablet video {
    max-width: 100% !important;
    max-height: none !important;
}

.avi-mobile .rounded.border.d-flex {
    max-width: 100% !important;
    height: 280px !important;
}

.avi-mobile .alert,
.avi-tablet .alert {
    max-width: 100% !important;
}

.avi-mobile .progress,
.avi-tablet .progress {
    max-width: 100% !important;
}

.avi-mobile .btn,
.avi-tablet .btn {
    min-height: 48px;
    font-size: 1rem;
}

.avi-mobile .card-body {
    padding: 0.75rem;
}

.avi-mobile .page-header .lead {
    font-size: 1rem;
}

/* Breadcrumb stepper: horizontal scroll on mobile instead of wrapping */
.avi-mobile .d-flex.align-items-center.justify-content-center.gap-1 {
    justify-content: flex-start !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
}

.avi-mobile .d-flex.align-items-center.justify-content-center.gap-1 .badge {
    flex-shrink: 0;
    font-size: 0.7rem;
}

/* Horizontal-band preview (mobile + tablet). A short, full-width landscape slice
   so the camera preview can't dominate the screen and the sticky question stays in
   view while recording. The crop is display-only — screencaps are drawn from the
   decoded stream, not the rendered element. Targets the live preview and the review
   playback by id so the small per-question thumbnails on the review screen are left
   alone. */
.avi-mobile #videoPreview, .avi-tablet #videoPreview,
.avi-mobile #reviewPlayback, .avi-tablet #reviewPlayback {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    max-height: 38vh !important;
    object-fit: cover;
    background: #000;
}

/* Sticky question: pins below the top bar so it stays visible while the candidate
   scrolls past the preview to the recording controls below. Below 900px the nav is
   a sticky top bar (.sidebar / .top-row, 3.5rem tall, in MainLayout.razor.css), so
   the question must clear it; pinning at top: 0 would hide it behind the bar. */
.avi-mobile .avi-zone-question, .avi-tablet .avi-zone-question {
    position: sticky;
    top: 3.5rem;
    z-index: 5;
    background: var(--bs-body-bg, #fff);
    padding: 0.25rem 0;
}

/* At >= 900px the nav is a left sidebar, so there's no top bar over the content
   and the question pins flush to the top. */
@media (min-width: 900px) {
    .avi-tablet .avi-zone-question {
        top: 0;
    }
}