/* ═══════════════════════════════════════════════════
   Shadow Capture Studio — Mobile Shell
   Loaded AFTER studio.css; reuses its variables + components
   ═══════════════════════════════════════════════════ */

/* ─── Root ────────────────────────────────────────── */

.mobile-body {
    position: fixed;
    inset: 0;
    overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.m-studio {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ─── Header ──────────────────────────────────────── */

.m-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .75rem;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 100;
}

.m-header .studio-logo {
    font-size: .85rem;
}

.m-header-right {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.m-desktop-link {
    font-size: .68rem;
    font-weight: 600;
    color: var(--accent-light);
    text-decoration: none;
    padding: .2rem .5rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    transition: all 150ms var(--ease);
}

.m-desktop-link:active {
    background: var(--accent-glow);
}

.m-header .studio-status {
    gap: .3rem;
    font-size: .68rem;
}

/* ─── Capture State ───────────────────────────────── */

.m-capture-state {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Viewfinder — fills remaining space between header and controls */
.m-viewfinder {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #000;
    overflow: hidden;
}

/* Override desktop's fixed 16:9 aspect; fill the viewfinder fully */
.m-video-container {
    position: absolute;
    inset: 0;
    aspect-ratio: unset !important;
    width: 100%;
    height: 100%;
}

/* View pills — bottom of viewfinder, centered */
.m-view-toggle {
    position: absolute;
    bottom: .6rem;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    right: auto;
}

.m-view-toggle .view-btn {
    padding: .35rem .75rem;
    font-size: .75rem;
}

/* ─── Stage Frame Guide ───────────────────────────── */

.m-stage-frame {
    position: absolute;
    left: 0;
    right: 0;
    /* top and height set by JS */
    border-top: 1.5px dashed rgba(99, 102, 241, .3);
    border-bottom: 1.5px dashed rgba(99, 102, 241, .3);
    pointer-events: none;
    z-index: 15;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transition: top 200ms var(--ease), height 200ms var(--ease);
}

.m-stage-label {
    font-size: .58rem;
    font-weight: 600;
    color: rgba(99, 102, 241, .45);
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .12rem .45rem;
    background: rgba(0, 0, 0, .45);
    border-radius: 0 0 4px 4px;
    backdrop-filter: blur(4px);
}

/* ─── Bottom Controls ─────────────────────────────── */

.m-controls {
    flex-shrink: 0;
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.m-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
}

.m-mode-setting {
    opacity: .55;
    transform: scale(.88);
    transition: opacity 150ms;
}

.m-mode-setting:active { opacity: 1; }

/* ─── Record Button (large circle) ────────────────── */

.m-record-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .18);
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px var(--red-glow);
    transition: all 200ms var(--ease);
    animation: pulse-record 2.5s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

.m-record-btn:active {
    transform: scale(.9);
    animation: none;
}

.m-record-btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, .5);
}

/* ─── Stop Button (circle with square icon) ───────── */

.m-stop-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid var(--red);
    background: rgba(239, 68, 68, .12);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.m-stop-btn:active {
    background: rgba(239, 68, 68, .25);
}

.m-stop-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--red);
}

/* ─── Editor State ────────────────────────────────── */

.m-editor-state {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    animation: fadeSlideIn .3s var(--ease);
}

.m-editor-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Portrait preview canvas */
.m-preview-wrap {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.m-editor-state #previewCanvas {
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    display: block;
}

/* Transport — tighter on mobile */
.m-transport {
    padding: .3rem 0;
}

.m-transport .t-btn {
    width: 40px;
    height: 36px;
    font-size: .95rem;
}

/* Timeline — bigger touch targets */
.m-timeline .timeline-track {
    height: 36px;
}

.m-timeline .timeline-scrubber::-webkit-slider-thumb {
    width: 8px;
    height: 40px;
}

.m-timeline .timeline-scrubber::-moz-range-thumb {
    width: 8px;
    height: 40px;
}

.m-timeline .marker-btn {
    padding: .4rem .75rem;
    font-size: .75rem;
}

/* Submit — stacked buttons */
.m-submit .submit-btns {
    grid-template-columns: 1fr 1fr;
}

.m-submit .upload-btn,
.m-submit .export-btn {
    padding: .7rem .75rem;
    font-size: .88rem;
}

/* Record Another — prominent on mobile */
.m-editor-state .new-rec-btn {
    padding: .7rem 1rem;
    font-size: .88rem;
    border-style: solid;
    border-color: var(--accent);
    color: var(--accent-light);
}