/**
 * ARtalk Mobile Overhaul
 * ======================
 * Loaded AFTER page CSS so overrides win without editing upstream files.
 *
 * Scope:
 *  1. Fix horizontal overflow (features-wrap et al.)
 *  2. 44×44 tap targets (WCAG 2.5.5 AAA / Apple HIG)
 *  3. 16px+ input font (kills iOS auto-zoom)
 *  4. Safe-area insets for notched devices
 *  5. Touch-friendly focus/active states
 *  6. Bottom-sheet pattern entry points for modals
 */

/* --------------------------------------------------------------------------
 * 1. Horizontal overflow root-cause fix
 * --------------------------------------------------------------------------
 * Upstream MiroTalk pattern: `margin: -32px` on both sides + fixed-width
 * cards. On <412px viewports the negative margins push wrap outside the
 * viewport while inner `.feature { width: 380px }` triggers horizontal
 * scroll jank inside cards.
 *
 * Mobile-first fix: kill the negative margins, let cards lay out 1-col.
 */
@media (max-width: 640px) {
    .features-wrap {
        margin-right: 0 !important;
        margin-left: 0 !important;
        gap: 16px;
    }
    .feature {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
    }

    /* Pricing tables: same fix pattern */
    .pricing-tables-wrap {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .pricing-table {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
 * 2. Tap targets ≥ 44×44px
 * --------------------------------------------------------------------------
 * Apple HIG & WCAG 2.5.5 AAA recommend 44×44pt minimum. Critical on iPhone SE.
 */

/* Theme toggle button (injected via Theme.js) */
@media (max-width: 768px) {
    .ar-theme-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
    }
}

/* --------------------------------------------------------------------------
 * 9. CustomizeRoom page — mobile layout fix (root cause)
 * --------------------------------------------------------------------------
 * Upstream: cr-card has hard-coded padding+min-width that overflows on SE.
 * Toggle switches are 32px tall (should be 44px). RandomRoom button 36px.
 */
@media (max-width: 520px) {
    .cr-page {
        padding: 16px 12px !important;
        display: block !important;
    }
    .cr-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    /* Form inside card must not trigger horizontal scroll */
    .cr-form,
    .cr-field,
    .cr-input-wrap,
    .cr-input {
        max-width: 100% !important;
        width: auto !important;
        box-sizing: border-box !important;
    }
    .cr-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }
    /* Toggle switches 32px → 44px tap target */
    .cr-switch-wrap {
        width: 60px !important;
        height: 44px !important;
    }
    .cr-switch {
        width: 60px !important;
        height: 36px !important;
        margin: 4px 0 !important;
    }
    .cr-switch::after {
        width: 28px !important;
        height: 28px !important;
    }
    .cr-switch-wrap input:checked + .cr-switch::after {
        left: 28px !important;
    }
    /* Switch input itself is the tap target — fills the 60×44 wrapper */
    .cr-switch-wrap input {
        width: 60px !important;
        height: 44px !important;
        min-width: 60px !important;
        min-height: 44px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    /* Padding around switch makes it easier to tap, not just the switch */
    .cr-toggle {
        padding: 18px 16px !important;
        min-height: 64px !important;
    }
    /* Random room button — was 91x36 */
    #crRandomRoom {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    /* Submit button is a primary CTA — bolder bottom tap zone */
    .cr-submit {
        min-height: 52px !important;
        font-size: 17px !important;
    }
}

/* --------------------------------------------------------------------------
 * 11. Landing hero — mobile hierarchy (Phase A.4)
 * --------------------------------------------------------------------------
 * Reduce hero padding on phones, optimize figure spacing, let user reach CTA
 * within first viewport without scrolling.
 */
@media (max-width: 768px) {
    .hero {
        padding-top: 24px !important;
        padding-bottom: 48px !important;
    }
    .hero-title {
        font-size: clamp(28px, 6.5vw, 36px) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.01em !important;
    }
    .hero-paragraph {
        font-size: 15px !important;
        line-height: 1.55 !important;
        margin-top: 12px !important;
    }
    /* Hide floating hero decorations on mobile — they add visual noise without value */
    .hero-figure-box {
        display: none !important;
    }
    .hero-figure::before,
    .hero-figure::after {
        background-size: 60% !important;
        opacity: 0.4 !important;
    }
    /* Buttons stack at full width */
    .hero-cta .button,
    .cta .button,
    #joinRoomButton,
    #customizeRoomButton,
    #scheduleMeetingBtn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
        min-height: 48px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        display: block !important;
    }
}

/* --------------------------------------------------------------------------
 * 12. Bottom sheet pattern for modals (Phase B setup)
 * --------------------------------------------------------------------------
 * Swal-based modals currently center-modal. On phones, they become bottom sheets.
 */
@media (max-width: 640px) {
    .swal2-container .swal2-popup {
        align-self: flex-end !important;
        border-radius: 20px 20px 0 0 !important;
        margin-bottom: 0 !important;
        max-height: 90vh !important;
        padding-bottom: max(env(safe-area-inset-bottom), 20px) !important;
    }
    /* Close X at top-right becomes easier to reach */
    .swal2-close {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 24px !important;
    }
}
@media (max-width: 768px) {
    a[href]:has(> img) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 4px !important;
    }
}

/* --------------------------------------------------------------------------
 * Layout helpers — body shouldn't have horizontal scroll on phones
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .container,
    .body-wrap,
    .site-header-inner,
    .section-inner {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* --------------------------------------------------------------------------
 * 8. Modal / Swal — bottom sheet cap on phones
 * -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .swal2-popup.meeting-success-popup,
    .swal2-popup.sch-popup {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: var(--r-lg, 16px) !important;
        padding: 20px 16px !important;
    }
    /* The action buttons stack on phones */
    .swal2-popup .swal2-actions {
        flex-direction: column-reverse !important;
        gap: 8px;
    }
    .swal2-popup .swal2-actions button {
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
    }
}

/* Footer links — current 19px tall */
.footer-links a,
.site-footer a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
}

/* Brand/logo link — must clear 44px height on mobile */
@media (max-width: 768px) {
    .brand a,
    .site-header-inner > a,
    header a[href='/'],
    .header-brand a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* Privacy page inline links inside paragraph — kept small, but ensure
 * paragraph line-height gives ≥44px line for assistive touch */
@media (max-width: 768px) {
    .privacy-content p,
    .privacy-content li {
        line-height: 1.7 !important;
    }
}

/* Generator rotate button next to roomName input */
@media (max-width: 768px) {
    #genRoomButton {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }
    /* Reserve vertical space so user finger doesn't slip onto input */
    #joinRoomButton {
        min-height: 48px !important;
    }
    #customizeRoomButton,
    #scheduleMeetingBtn {
        min-height: 44px !important;
    }
}

/* Generic small buttons that should be 44px on mobile */
@media (max-width: 768px) {
    button[class*='btn-sm'],
    button[class*='icon-btn'],
    button[class*='-icon'] {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* --------------------------------------------------------------------------
 * 3. Inputs ≥ 16px font + mobile padding
 * --------------------------------------------------------------------------
 * iOS Safari auto-zooms on focus when font-size < 16px, breaking layout.
 */
@media (max-width: 768px) {
    input:not([type='checkbox']):not([type='radio']):not([type='range']),
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Select dropdowns — Room join page broke at 40px height */
    select {
        min-height: 44px !important;
    }
}

/* Specific: init video/mic/speaker selects (40px → 44px) */
#initVideoSelect,
#initMicrophoneSelect,
#initSpeakerSelect {
    min-height: 44px !important;
    font-size: 16px !important;
}

/* Room name on landing/newroom */
#roomName {
    font-size: 16px !important;
    min-height: 48px !important;
}

/* User name in join screen */
#usernameInput {
    font-size: 18px !important;
    min-height: 48px !important;
}

/* --------------------------------------------------------------------------
 * 4. Safe-area insets (iPhone X+ notch / Dynamic Island / home indicator)
 * -------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Bottom-fixed action bars must clear home indicator */
    .stg-action-bar,
    .action-bar,
    .chat-input-wrapper {
        padding-bottom: max(env(safe-area-inset-bottom), 12px) !important;
    }

    /* Floating buttons / buttonsBar in Room */
    #buttonsBar,
    .buttons-bar {
        padding-bottom: max(env(safe-area-inset-bottom), 8px) !important;
        margin-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* --------------------------------------------------------------------------
 * 5. Touch-friendly states (no :hover sticking on touch)
 * -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    /* Only apply hover effects on true pointer devices */
    .button:hover,
    .sch-btn:hover,
    .btn-copy-icon:hover {
        transition: background-color 120ms ease, color 120ms ease,
            border-color 120ms ease, transform 80ms ease;
    }
}

/* Active state for touch — instantaneous feedback */
@media (hover: none), (pointer: coarse) {
    .button:active,
    .sch-btn:active,
    button:active {
        opacity: 0.85;
        transform: scale(0.98);
        transition: opacity 80ms ease-out, transform 80ms ease-out;
    }
}

/* --------------------------------------------------------------------------
 * 6. Reduced motion & dark-mode caps on phones
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark mode contrast on small screens — mobile screens have lower contrast
 * in bright sun; bump body text and increase border visibility. */
@media (max-width: 768px) {
    [data-theme='dark'] body,
    body.theme-dark {
        color-scheme: dark;
    }
    [data-theme='dark'] .feature,
    [data-theme='dark'] .pricing-table,
    body.theme-dark .feature,
    body.theme-dark .pricing-table {
        border-color: rgba(255, 255, 255, 0.18) !important;
    }
}

/* --------------------------------------------------------------------------
 * 7. Chat input — clear of keyboard & home indicator
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .chat-input-wrapper {
        padding-left: max(env(safe-area-inset-left), 8px) !important;
        padding-right: max(env(safe-area-inset-right), 8px) !important;
    }
    #chatMessage {
        font-size: 16px !important; /* no auto-zoom */
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
 * 13. Room UI mobile — controls bar, video grid full-bleed
 * --------------------------------------------------------------------------
 * MiroTalk Room UI has multiple control clusters; on phones they need to be
 * thumb-reachable at screen bottom, with safe-area insets.
 */
@media (max-width: 768px) {
    /* Bottom control bar — anchored, padded, larger icons */
    #control,
    .control,
    [class*='buttonsBar'],
    .buttons-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 12px !important;
        padding-bottom: max(env(safe-area-inset-bottom), 12px) !important;
        background: var(--surface-0) !important;
        border-top: 1px solid var(--border) !important;
        border-radius: 0 !important;
        z-index: 100 !important;
        display: flex !important;
        justify-content: space-around !important;
        gap: 8px !important;
    }
    /* Action buttons inside control bar — large enough to hit reliably */
    #control button,
    .buttons-bar button,
    [class*='buttonsBar'] button,
    #control a,
    .buttons-bar a {
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }
    /* Video grid fills remaining height above control bar */
    #videoMediaContainer,
    .video-media-container,
    #videoGrid {
        height: calc(100dvh - 88px) !important;
        max-height: calc(100dvh - 88px) !important;
        padding-bottom: 88px !important;
    }
    /* Videos themselves — full-bleed, no rounded corners on phones */
    .Camera,
    .video-js {
        border-radius: 0 !important;
    }
    video {
        border-radius: 0 !important;
    }
}

/* --------------------------------------------------------------------------
 * 14. Chat overlay — full-screen on phones
 * --------------------------------------------------------------------------
 * MiroTalk chat is a side-drawer on desktop. On phones it should take full
 * screen above the control bar to avoid cramped typing.
 */
@media (max-width: 768px) {
    #chatPanel,
    .chat-panel,
    .group-chat,
    .chat-panel-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        z-index: 90 !important;
        /* Leave space for top header so user can always close */
        padding-top: env(safe-area-inset-top, 0) !important;
    }
    /* Chat input — prominent at bottom, above home indicator */
    .chat-input-wrapper,
    #chatInput {
        flex: 0 0 auto !important;
        padding: 12px !important;
        padding-bottom: max(env(safe-area-inset-bottom), 12px) !important;
        background: var(--surface-0) !important;
        border-top: 1px solid var(--border) !important;
        order: 99 !important;
    }
    #chatMessage,
    .chat-input-textarea {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 12px !important;
        border-radius: 24px !important;
    }
    /* Send button 44×44 */
    #chatSendButton,
    .chat-send-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
}

/* --------------------------------------------------------------------------
 * 15. Reduced-motion + focus — final polish
 * -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    /* Kill hover-sticking states on touch */
    .button:hover {
        background-color: var(--bg) !important;
    }
}

/* Double-tap zoom guard on key inputs (prevents accidental zoom) */
button,
a,
.button,
input[type='submit'],
input[type='button'] {
    touch-action: manipulation !important;
}

/* Username / chat textarea — no zoom */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
textarea {
    touch-action: manipulation !important;
}
@media (max-width: 640px) {
    .swal2-popup.meeting-success-popup,
    .swal2-popup.sch-popup {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: var(--r-lg, 16px) !important;
        padding: 20px 16px !important;
    }
    /* The action buttons stack on phones */
    .swal2-popup .swal2-actions {
        flex-direction: column-reverse !important;
        gap: 8px;
    }
    .swal2-popup .swal2-actions button {
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
    }
}