/* ============================================================
   PHANTOM MSG — MOBILE-FIRST RESPONSIVE DESIGN
   Breakpoints: 480px (phone), 768px (tablet), 1024px (desktop)
   Principios 2026: Thumb-centric, full-screen views,
   44px min touch targets, bottom navigation
   ============================================================ */

/* ---- TABLET (max 1024px) ---- */
@media (max-width: 1024px) {
    .app-rail { width: 52px; }
    .rail-btn { width: 40px; height: 40px; }
    .rail-logo { width: 36px; height: 36px; font-size: 17px; }
    .chat-sidebar { width: 280px; min-width: 260px; }
    .tool-panel { padding: 28px 20px; }
}

/* ---- MOBILE (max 768px) ---- */
@media (max-width: 768px) {

    /* Oculta el rail de navegacion en mobile */
    .app-rail { display: none; }

    /* App shell: vertical en mobile */
    .app-shell { flex-direction: column; }
    .app-content { flex-direction: column; flex: 1; overflow: hidden; position: relative; }

    /* Sidebar: full width, colapsable */
    .chat-sidebar {
        width: 100% !important; min-width: 100% !important;
        max-height: none; height: 100%;
        border-right: none;
        position: absolute; top: 0; left: 0; right: 0; bottom: 56px;
        z-index: 100; display: flex; flex-direction: column;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .chat-sidebar.mobile-hidden {
        transform: translateX(-100%);
        pointer-events: none;
    }

    /* Chat layout: full screen cuando esta activo */
    .chat-layout {
        position: absolute !important; top: 0; left: 0; right: 0; bottom: 56px;
        z-index: 200; flex-direction: column !important;
        overflow: hidden;
    }
    .chat-layout:not(.active) { display: none !important; }
    
    /* CUANDO HAY CHAT ABIERTO: oculta bottom nav, chat toma 100% */
    body.mobile-chat-open .mobile-bottom-nav {
        display: none !important;
    }
    body.mobile-chat-open .chat-layout {
        bottom: 0 !important;
    }
    body.mobile-chat-open .chat-sidebar {
        bottom: 0 !important;
    }
    body.mobile-chat-open .tool-panel {
        bottom: 0 !important;
    }
    
    /* CRITICO: chat-main debe contener sus hijos sin overflow */
    .chat-main {
        flex: 1; display: flex; flex-direction: column;
        min-height: 0; overflow: hidden;
    }
    
    /* chatActive: layout properties for mobile (display controlled by JS) */
    #chatActive {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        flex-direction: column !important;
        height: auto !important;
    }
    
    /* Mensajes: toma espacio sobrante, scroll interno */
    .chat-messages {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 12px !important;
    }
    
    /* Input area: nunca se oculta, siempre al fondo */
    .chat-input-area {
        flex-shrink: 0 !important;
        padding: 10px 12px !important;
    }
    
    /* Verify panel: no debe crecer */
    .verify-panel {
        flex-shrink: 0;
        max-height: 40vh;
        overflow-y: auto;
    }
    
    /* Reply bar: no debe crecer */
    .reply-bar {
        flex-shrink: 0;
    }

    /* Tool panels full screen */
    .tool-panel {
        padding: 20px 16px; max-width: 100%;
        position: absolute; top: 0; left: 0; right: 0; bottom: 56px;
        overflow-y: auto;
    }

    /* Bottom navigation bar (reemplaza el rail) */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed; bottom: 0; left: 0; right: 0;
        height: 56px; z-index: 9000;
        background: var(--bg-header);
        border-top: 1px solid var(--border);
        padding: 0 8px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .mobile-nav-btn {
        flex: 1; display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 2px; background: none; border: none;
        color: var(--text-muted); cursor: pointer;
        font-family: var(--font-display), var(--font-emoji); font-size: 10px;
        font-weight: 500; padding: 4px;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-nav-btn svg { width: 22px; height: 22px; }
    .mobile-nav-btn.active { color: var(--primary-400); }
    .mobile-nav-btn:active { color: var(--primary-300); }

    /* ---- TOPBAR MOBILE: compacto y alineado ---- */
    .chat-topbar {
        padding: 10px 12px !important;
        gap: 8px;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
    .chat-topbar-left {
        flex: 1;
        min-width: 0;
        gap: 10px !important;
    }
    .chat-topbar-avatar {
        width: 34px !important; height: 34px !important;
        font-size: 14px !important;
        flex-shrink: 0;
    }
    .chat-topbar-name {
        font-size: 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
    .chat-topbar-status {
        font-size: 10px !important;
        gap: 6px !important;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .chat-topbar-right {
        gap: 6px !important;
        flex-shrink: 0;
    }
    /* Security shield compacto en mobile */
    .security-shield-text { display: none; }
    .security-shield { padding: 4px 6px; }
    /* Options button mas compacto */
    .options-btn {
        width: 32px !important; height: 32px !important;
    }

    /* Sidebar header simplificado */
    .sidebar-header { padding: 14px 16px; }
    .sidebar-header h3 { font-size: 16px; }

    /* Chat items: touch-friendly */
    .chat-item { padding: 14px 16px; gap: 12px; }
    .chat-item-avatar { width: 44px; height: 44px; font-size: 16px; }
    .chat-item-name { font-size: 14px; }
    .chat-item-delete {
        opacity: 0.5 !important;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
    }

    /* Sidebar tabs */
    .sidebar-tab { padding: 12px 8px; font-size: 11px; min-height: 44px; }

    /* Boton "back" para volver al sidebar en mobile */
    .mobile-back-btn {
        display: inline-flex !important;
        background: none; border: none; color: var(--text-secondary);
        cursor: pointer; padding: 8px; margin-right: 4px;
        border-radius: 8px; transition: var(--transition);
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }
    .mobile-back-btn:active { background: var(--primary-100); }
    .mobile-back-btn svg { width: 20px; height: 20px; }

    /* Mensajes */
    .msg { max-width: 82%; font-size: 14px; padding: 10px 14px; }

    /* Input area: touch-friendly */
    .chat-input { gap: 6px; }
    .chat-input .chat-textarea {
        font-size: 16px !important; /* Evita zoom en iOS */
        padding: 10px 14px;
        border-radius: 20px;
    }
    .chat-input .btn-primary { padding: 10px 16px; border-radius: 20px; }

    /* Botones de input area: min 44px touch */
    .chat-input button {
        min-width: 36px; min-height: 36px;
    }
    .chat-input .input-extras-toggle {
        padding: 6px !important;
    }

    /* Chat input extras */
    .chat-input-extras {
        flex-wrap: wrap; gap: 8px;
        padding: 6px 8px !important;
        margin-top: 6px !important;
    }
    .chat-input-extras label { font-size: 11px; }

    /* Voice recording panel */
    .voice-record-panel { padding: 12px; margin-bottom: 6px; }
    .vn-effects-list { gap: 4px; }
    .vn-effect-btn { padding: 6px 10px; font-size: 10px; }

    /* Modales: full width en mobile */
    .modal-box {
        min-width: auto; max-width: calc(100vw - 32px);
        width: 100%; margin: 16px;
    }

    /* Options menu */
    .options-dropdown {
        right: 0 !important; left: auto !important;
        min-width: 200px !important;
    }

    /* Lightbox */
    .lightbox-content {
        max-width: calc(100vw - 32px) !important;
        max-height: 55vh;
    }

    /* Toast: wider on mobile */
    .toast-container { right: 8px; left: 8px; top: 8px; }
    .toast { min-width: auto; max-width: none; }

    /* Stego container */
    .msg-stego-container { max-width: 240px; }

    /* Audio player compact */
    .phantom-audio-player { min-width: 160px; padding: 6px 10px; }
    .vnp-player { min-width: 200px; max-width: 280px; }
    .vnp-play-zone { width: 46px; height: 46px; }
    .vnp-ring-svg { width: 42px; height: 42px; }
    .vnp-wave { height: 24px; }
    .vnp-time { font-size: 10px; }
    .vnp-speed { font-size: 9px; padding: 1px 5px; }
    .vnp-end-zone { width: 32px; padding-right: 4px; }
    .vnp-action-btn { width: 22px; height: 22px; }

    /* Grids single column */
    .row-2, .row-3 { grid-template-columns: 1fr; }

    /* File drop */
    .file-drop { padding: 24px 16px; }

    /* Sidebar forms */
    .sidebar-form { padding: 16px; }
    .sidebar-form-row { grid-template-columns: 1fr; }

    /* Cards */
    .card { padding: 16px; }

    /* Buttons: ensure minimum touch size */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 36px; }
}

/* ---- SMALL PHONE (max 380px) ---- */
@media (max-width: 380px) {
    .chat-item { padding: 12px; gap: 10px; }
    .chat-item-avatar { width: 40px; height: 40px; font-size: 15px; }
    .msg { max-width: 88%; font-size: 13px; padding: 8px 12px; }
    .sidebar-header h3 { font-size: 15px; }
    .vn-effect-btn { padding: 5px 8px; font-size: 9px; }
}

/* ---- LANDSCAPE PHONE ---- */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-bottom-nav { height: 44px; }
    .mobile-nav-btn { font-size: 0; gap: 0; } /* Solo iconos */
    .mobile-nav-btn svg { width: 20px; height: 20px; }
    .chat-messages { padding: 8px !important; }
    .lightbox-content { max-height: 70vh; }
}

/* ---- HIDE MOBILE NAV ON DESKTOP ---- */
.mobile-bottom-nav { display: none; }
.mobile-back-btn { display: none; }

/* ---- SAFE AREA (iPhone notch + browser toolbars) ---- */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .mobile-bottom-nav {
            padding-bottom: env(safe-area-inset-bottom);
        }
        body {
            padding-top: env(safe-area-inset-top);
        }
        /* Input del chat por encima de la barra del navegador */
        body.mobile-chat-open .chat-input-area {
            padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ---- IMPROVED BUTTON STATES (ALL SCREENS) ---- */
.btn { position: relative; overflow: hidden; }
.btn:active { transform: scale(0.97); }
.btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px var(--primary-glow);
}
.btn-ghost:active { background: var(--primary-100); }
.btn-danger:active { transform: scale(0.97); opacity: 0.9; }

/* Ripple effect for touch */
@media (pointer: coarse) {
    .btn::after {
        content: ''; position: absolute; inset: 0;
        background: var(--overlay-strong);
        border-radius: inherit;
        opacity: 0; transition: opacity 0.3s;
    }
    .btn:active::after { opacity: 1; }
}

/* ---- IMPROVED FOCUS STATES (Accessibility) ---- */
.btn:focus-visible, .input:focus-visible, .chat-textarea:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 2px;
}

/* ---- SMOOTH SCROLL (sidebar only, chat-messages uses JS-controlled scroll) ---- */
.sidebar-list {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.chat-messages {
    -webkit-overflow-scrolling: touch;
}

/* ---- MOBILE TOUCH TARGET IMPROVEMENTS ---- */
@media (max-width: 768px) {
    /* Botones de acciones de mensajes (3 puntos) */
    .msg-action-btn {
        padding: 8px 12px;
        min-width: 36px;
        min-height: 36px;
    }
    .msg-action-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Boton de opciones de contacto (3 puntos verticales) */
    .contact-ctx-btn {
        padding: 8px;
        min-width: 36px;
        min-height: 36px;
    }
    .contact-ctx-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Reaction chips mas grandes para dedos */
    .reaction-chip {
        padding: 4px 8px;
        min-height: 28px;
    }
    .reaction-emoji {
        font-size: 17px;
    }

    /* Botones del reaction picker mas grandes */
    .reaction-btn {
        padding: 6px 8px;
        font-size: 24px;
        min-width: 40px;
        min-height: 40px;
    }

    /* Pinned bar botones mas accesibles */
    .pinned-close {
        padding: 8px;
        min-width: 36px;
        min-height: 36px;
    }

    /* Botones de chat/recrear en contactos */
    .btn-sm {
        min-height: 32px;
    }
}

/* ============================================================
   MOBILE MORE MENU — Bottom sheet con Temas + Configuracion
   ============================================================ */
.mobile-more-menu {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999; display: flex; flex-direction: column;
    justify-content: flex-end;
}
.mobile-more-backdrop {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mobile-more-sheet {
    position: relative; z-index: 1;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-light);
    border-radius: 16px 16px 0 0;
    padding: 16px 12px 68px;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 4px;
    animation: moreSheetUp 0.25s ease-out;
}
@keyframes moreSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.mobile-more-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border: none;
    background: transparent; color: var(--text-primary);
    font-family: var(--font-display), var(--font-emoji);
    font-size: 14px; font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer; border-radius: 10px;
    transition: background 0.15s, color 0.15s;
    text-align: left; width: 100%;
    -webkit-tap-highlight-color: transparent;
}
.mobile-more-item:hover,
.mobile-more-item:active {
    background: var(--overlay-light);
    color: var(--primary-400);
}
.mobile-more-item svg {
    color: var(--primary-400); flex-shrink: 0;
    width: 22px; height: 22px;
}