/* =========================================================================
   ROULETTE-SPECIFIC.CSS (MÓVIL: max-width 768px)
   Reglas exclusivas de la ruleta. Cargar SIEMPRE después de /dating/css/responsive.css
   ========================================================================= */
@media screen and (max-width: 768px) {

    /* ---------------------------------------------------------------------
       1. CÁMARAS Y CHAT
       1º Arriba: Cámara local (#localVideoContainer)
       2º Medio: Cámara remota (#remoteVideoContainer)
       3º Abajo: Chat (.chat-box)
       --------------------------------------------------------------------- */
    .app-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 12px !important;
        margin-bottom: 25px !important;
    }

    .video-stack {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        order: 1 !important;
        position: relative !important;
    }

    #localVideoContainer {
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 220px !important;
        max-height: 320px !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 16px !important;
        position: relative !important;
    }

    #remoteVideoContainer {
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 220px !important;
        max-height: 320px !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 16px !important;
        position: relative !important;
    }

    .chat-box {
        order: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 420px !important;
        min-height: 350px !important;
        border-radius: 16px !important;
    }

    /* Orden interno del chat: Next Person > Input > Estado > Mensajes (bienvenida al fondo) */
    .chat-box .btn-next {
        order: 1 !important;
        padding: 14px 10px !important;
        font-size: 17px !important;
        letter-spacing: 1.5px !important;
        border-radius: 0 !important;
    }

    .chat-box .chat-input-wrapper {
        order: 2 !important;
        padding: 8px 10px !important;
        gap: 6px !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(204, 204, 204, 0.2) !important;
    }

    .chat-box .chat-status-text {
        order: 3 !important;
        font-size: 10px !important;
        padding: 6px 8px !important;
    }

    .chat-box #messages {
        order: 4 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    .chat-box #messages .status-welcome,
    .chat-box #messages .status-msg:first-child {
        margin-top: auto !important;
    }

    .chat-box .chat-input-text {
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-width: 0 !important;
    }

    .chat-box .btn-send-chat {
        padding: 0 12px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    .chat-box .chat-input-wrapper .btn-neon-gray {
        padding: 6px 8px !important;
    }

    .chat-box .chat-input-wrapper #btnReportUser {
        margin: 0 !important;
    }

    /* Controles flotantes sobre los vídeos siempre visibles en táctil */
    .local-controls,
    .focus-btn,
    .premium-call-controls,
    .center-overlay-controls {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .local-controls {
        bottom: 10px !important;
        gap: 10px !important;
    }

    .local-controls .control-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }

    .center-overlay-controls .focus-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    /* ---------------------------------------------------------------------
       2. MODO FOCUS: caja proporcional que no bloquea la pantalla
       --------------------------------------------------------------------- */
    .focus-active #remoteVideoContainer,
    .focus-active #localVideoContainer {
        width: 50% !important;
        max-width: 480px !important;
        min-width: 180px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
    }

    .focus-active #localVideoContainer {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
    }

    /* ---------------------------------------------------------------------
       3. FOOTER EXCLUSIVO DE LA RULETA: enlaces en VERTICAL centrados
       --------------------------------------------------------------------- */
    footer .f-links,
    footer .footer-content .f-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        grid-template-columns: none !important;
        width: 100% !important;
    }
}