/* ============================================
   VOICE UI — Mobile Responsive Overrides
   The base styles are injected by voice-ui.js.
   This file provides mobile-specific overrides.
   ============================================ */

/* ── Phone (≤768px) — Voice Controls ── */
@media (max-width: 768px) {

    /* Controls bar — larger touch targets */
    .pvu-controls {
        height: 72px !important;
        gap: 12px !important;
        padding: 0 12px !important;
        background: #0b0e14 !important;
    }

    .pvu-btn {
        width: 52px !important;
        height: 52px !important;
        font-size: 22px !important;
        -webkit-tap-highlight-color: transparent;
    }

    .pvu-btn:hover {
        transform: none !important;
    }

    /* Separator — smaller on mobile */
    .pvu-sep {
        height: 24px !important;
        margin: 0 2px !important;
    }

    /* Grid cards — responsive sizing */
    .premium-voice-container:not(.mode-stage) .pvu-user-card {
        width: calc(50vw - 24px) !important;
        height: 140px !important;
    }

    .premium-voice-container:not(.mode-stage) .pvu-avatar {
        width: 60px !important;
        height: 60px !important;
    }

    .pvu-name {
        font-size: 12px !important;
    }

    /* Grid container — tighter spacing */
    .pvu-grid-container {
        gap: 8px !important;
        padding: 8px !important;
        max-width: 100% !important;
    }

    /* Filmstrip — shorter on mobile */
    .pvu-filmstrip {
        height: 100px !important;
        padding: 8px !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pvu-filmstrip::-webkit-scrollbar {
        display: none;
    }

    .pvu-filmstrip .pvu-user-card {
        width: 80px !important;
        height: 70px !important;
    }

    .pvu-filmstrip .pvu-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    /* Game modal — full width */
    .pvu-modal-content {
        width: calc(100vw - 32px) !important;
        max-width: 400px !important;
        padding: 20px !important;
    }

    .pvu-game-list {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .pvu-game-item {
        padding: 14px 10px !important;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }

    .pvu-game-item:hover {
        transform: none !important;
    }

    .pvu-modal-close {
        min-height: 44px;
        width: 100%;
        margin-top: 8px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Screen viewer — mobile friendly */
    .pvu-screen-viewer video {
        max-width: 100vw !important;
        max-height: 85vh !important;
        border-radius: 0 !important;
    }

    .pvu-screen-viewer-close {
        top: 12px !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
        -webkit-tap-highlight-color: transparent;
    }

    .pvu-screen-viewer-info {
        bottom: 16px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    /* Watch button — easier to tap */
    .pvu-watch-btn {
        min-height: 36px;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* Warning text */
    .local-screen-warning {
        font-size: 16px !important;
        padding: 12px 20px !important;
    }
}

/* ── Small Phone (≤480px) ── */
@media (max-width: 480px) {

    .pvu-controls {
        height: 64px !important;
        gap: 8px !important;
    }

    .pvu-btn {
        width: 46px !important;
        height: 46px !important;
        font-size: 18px !important;
    }

    .premium-voice-container:not(.mode-stage) .pvu-user-card {
        width: calc(50vw - 16px) !important;
        height: 120px !important;
    }

    .premium-voice-container:not(.mode-stage) .pvu-avatar {
        width: 48px !important;
        height: 48px !important;
    }

    .pvu-name {
        font-size: 11px !important;
    }

    .pvu-game-list {
        grid-template-columns: 1fr !important;
    }

    .pvu-filmstrip {
        height: 80px !important;
    }

    .pvu-filmstrip .pvu-user-card {
        width: 64px !important;
        height: 56px !important;
    }

    .pvu-filmstrip .pvu-avatar {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ── iOS Safe Area ── */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .pvu-controls {
            padding-bottom: env(safe-area-inset-bottom) !important;
            height: calc(72px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ── Landscape — Controls bar thinner ── */
@media (max-width: 768px) and (orientation: landscape) {
    .pvu-controls {
        height: 56px !important;
    }

    .pvu-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
    }

    .pvu-filmstrip {
        height: 72px !important;
    }

    .premium-voice-container:not(.mode-stage) .pvu-user-card {
        width: 160px !important;
        height: 120px !important;
    }
}

/* ── Touch improvements ── */
@media (hover: none) and (pointer: coarse) {
    .pvu-btn:hover {
        transform: none !important;
        background: inherit;
    }

    .pvu-user-card.sharing-screen:hover {
        transform: none !important;
    }

    .pvu-game-item:hover {
        transform: none !important;
    }
}

/* ── Call Notification Toast (DM calls) ── */
@media (max-width: 768px) {

    .call-notification,
    .incoming-call-overlay {
        width: calc(100vw - 24px) !important;
        max-width: 100% !important;
        left: 12px !important;
        right: 12px !important;
    }

    .call-notification .call-actions button,
    .incoming-call-overlay button {
        min-height: 48px !important;
        font-size: 15px !important;
        -webkit-tap-highlight-color: transparent;
    }
}