/* ========================================================================
 * mobile-omni.css
 *
 * Reuses the desktop omni page DOM verbatim, but locks it into video
 * fullscreen mode and hides every element that doesn't belong on a phone.
 * Body always has classes `video-fullscreen mobile-omni`.
 * ===================================================================== */

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent;
}

body.mobile-omni {
    color: #fff;
    overscroll-behavior: none;
}

/* Hide everything that the desktop omni page renders outside the video
 * panel. The .video-fullscreen rules in omni.css already hide most panels;
 * these extra rules cover the parts that don't have fullscreen overrides. */
body.mobile-omni .header,
body.mobile-omni .nav-links,
body.mobile-omni .header-right,
body.mobile-omni .panel-mode,
body.mobile-omni .panel-config,
body.mobile-omni .panel-status,
body.mobile-omni .panel-controls,
body.mobile-omni .panel-sysconfig,
body.mobile-omni .panel-dialog,
body.mobile-omni .omni-waveform-bar,
body.mobile-omni .mixer-panel,
body.mobile-omni .fs-faq-bubble,
body.mobile-omni .fs-faq-toggle,
body.mobile-omni #faqSidebar,
body.mobile-omni #appNav,
body.mobile-omni .app-nav {
    display: none !important;
}

/* Share button — reuse the desktop SaveShareUI machinery (which already
 * wires up the comment dialog + upload + clipboard copy via /api/sessions
 * /{sid}/comment + /upload-recording), but re-skin it as a 44x44 glass
 * icon button on the video stage so it matches the rest of the mobile
 * top-right cluster (mirror / torch / cam-flip).
 *
 * mobile-bridge.js swaps the button label "Upload & Share" for an SVG
 * icon at runtime; here we just lay out the container + size the button.
 *
 * Sits LEFT of the torch (which is at right: 114px, width 44px). Torch
 * is conditionally visible, so we put share at right: 170px regardless. */
/* The original SaveShareUI button is presented INSIDE the settings
 * sheet (injected by mobile-bridge.js) instead of on the camera stage,
 * because the camera-stage placement was unreliable across devices
 * (probably some combination of CSS overrides + dark blending).
 *
 * We still need #save-share-container to exist in the DOM with a live
 * .ss-btn child, because the share section in the settings sheet just
 * proxies its click → .ss-btn.click(), letting all the existing
 * comment-modal / upload / clipboard / toast logic run unchanged.
 *
 * So: collapse the original container to 0×0 in a corner (still in the
 * DOM, still clickable programmatically) and re-publish only the toast
 * which positions itself with its own `position: fixed`. */
body.mobile-omni #save-share-container {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    left: auto !important;
    width: 0 !important;
    height: 0 !important;
    max-width: none !important;
    z-index: 200 !important;
    display: block !important; /* override inline `display:none` */
    overflow: visible !important;
    pointer-events: none;
}

body.mobile-omni #save-share-container .ss-btn {
    /* Hidden visually but still clickable via `.click()` from JS. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    pointer-events: none;
}

/* The toast is `position: fixed` so it floats over the viewport even
 * though its DOM parent is collapsed. Re-anchor above the bottom strip
 * and re-enable pointer events for select/copy. */
body.mobile-omni #save-share-container .ss-toast {
    position: fixed !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
    pointer-events: auto;
}

/* Per spec 4.2.2: HD / File mode buttons removed on mobile.
 * The mode-selector / file-chooser sit inside .panel-mode which is already
 * hidden, but #fsBtnHD lives in the bottom strip and must be hidden too. */
body.mobile-omni #fsBtnHD,
body.mobile-omni .mode-selector,
body.mobile-omni .file-chooser,
body.mobile-omni .file-options {
    display: none !important;
}

/* Kill the green "listening" border overlay; it covers the whole stage
 * on mobile and looks like a stray frame instead of a tasteful indicator. */
body.mobile-omni .video-border-overlay,
body.mobile-omni #videoBorderOverlay {
    display: none !important;
}

/* Fullscreen video panel should fill the viewport */
body.mobile-omni .main {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    display: block !important;
    gap: 0 !important;
}

body.mobile-omni.video-fullscreen .panel-media {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    /* dvh covers the dynamic viewport on iOS/Android browsers that resize
     * the URL bar; vh fallback for older engines */
    height: 100vh !important;
    height: 100dvh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.mobile-omni .video-container {
    width: 100% !important;
    height: 100% !important;
    background: #000;
    position: relative;
}

body.mobile-omni #videoEl {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: #000;
}

/* Bottom-right fullscreen-btn is now the ⚙️ settings opener (icon swapped
 * via mobile-bridge.js). */
body.mobile-omni .fullscreen-btn {
    display: flex !important;
    position: absolute !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
    right: 12px !important;
    z-index: 200 !important;
}

/* Subtitle toggle stays in the bottom-left */
body.mobile-omni .subtitle-toggle-btn {
    position: absolute !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
    left: 12px !important;
    z-index: 200 !important;
}

/* Notch / status-bar safe area for top corner buttons.
 * Top-left is now occupied by the back button (.mobile-back-btn) so push
 * the status-lamp to the top-center to avoid overlap. */
body.mobile-omni .cam-flip-btn,
body.mobile-omni .mirror-btn {
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
}
body.mobile-omni .status-lamp {
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    left: 50% !important;
    transform: translateX(-50%);
}

/* Top-right torch button (added by mobile-bridge.js when supported).
 * Sits to the LEFT of the mirror button (which is at right: 62px) so we
 * place it at right: 114px (mirror is 44px wide + 8px gap). */
body.mobile-omni .mobile-torch-btn {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 114px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    touch-action: manipulation;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
}
body.mobile-omni .mobile-torch-btn.visible {
    display: flex;
}
body.mobile-omni .mobile-torch-btn.active {
    background: rgba(255, 220, 100, 0.4);
    color: #fff8b0;
}
body.mobile-omni .mobile-torch-btn:active {
    transform: scale(0.9);
}

/* Top-left back button — replaces the desktop "Home" link per spec 4.2.2 */
body.mobile-omni .mobile-back-btn {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 12px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
}
body.mobile-omni .mobile-back-btn:active {
    transform: scale(0.9);
}

/* The control strip must hug the very bottom edge of the visible
 * viewport. Use full bleed + safe-area padding so the visible buttons
 * stay above the iPhone home indicator while the strip itself reaches
 * the screen edge. */
body.mobile-omni .fullscreen-controls {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px;
    padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #111 !important;
    z-index: 10000 !important;
    box-sizing: border-box;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px !important;
}

body.mobile-omni .fs-ctrl-btn {
    font-size: 12px !important;
    padding: 7px 10px !important;
    min-width: 0 !important;
}

/* Subtitle overlay sits above the controls strip */
body.mobile-omni .fs-chat-overlay {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 64px) !important;
}