/* ════════════════════════════════════════════════════════════
   MOBILE FINAL - PERSISTENT STYLES
   Loaded LAST to override everything
   ════════════════════════════════════════════════════════════ */

/* === MOBILE (768px and below) === */
@media screen and (max-width: 768px) {

    /* ========== SIDEBAR HIDDEN ========== */
    .sidebar,
    body .sidebar,
    html body .sidebar {
        position: fixed !important;
        left: -300px !important;
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 280px !important;
        z-index: 1002 !important;
        transform: none !important;
        transition: left 0.3s ease !important;
    }

    .sidebar.open,
    .sidebar.active,
    body .sidebar.open {
        left: 0 !important;
    }

    /* ========== MAIN CONTENT FULL WIDTH ========== */
    .main-content,
    body .main-content,
    html body .main-content,
    .app-container .main-content,
    body .app-container .main-content,
    div.main-content,
    [class*="main-content"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        height: calc(100dvh - 80px) !important;
        max-height: calc(100dvh - 80px) !important;
        min-height: calc(100dvh - 80px) !important;
        background: #0d1f3c !important;
    }

    /* ========== APP CONTAINER ========== */
    .app-container,
    body .app-container,
    div.app-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ========== CHAT CONTAINER FULL WIDTH ========== */
    .chat-container,
    body .chat-container,
    body .main-content .chat-container,
    .main-content .chat-container,
    div.chat-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        /* MODIFICADO: flex:none y altura explícita para footer 120px */
        flex: none !important;
        height: calc(100dvh - 383px) !important;
        max-height: calc(100dvh - 383px) !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        overflow: hidden !important;
    }

    /* ========== MESSAGES CONTAINER ========== */
    .messages,
    #messagesContainer,
    body .messages,
    body #messagesContainer,
    .chat-container .messages,
    div.messages {
        flex: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 16px !important;  /* 10px top/bottom, 16px left/right - optimizado */
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    /* ========== MESSAGE BUBBLES - HORIZONTAL TEXT ========== */
    .message,
    .message.ai,
    .message.user,
    body .message,
    body .messages .message,
    .messages .message,
    div.message,
    .message-bubble,
    .message-content {
        max-width: 85% !important;
        min-width: 80px !important;
        width: auto !important;

        /* CRITICAL: Horizontal text */
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        direction: ltr !important;

        /* Word wrap correctly */
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        hyphens: auto !important;

        /* Display */
        display: block !important;
        overflow: visible !important;
        text-overflow: unset !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    /* Message inner content */
    .message *,
    .message p,
    .message span,
    .message div,
    .message-content * {
        writing-mode: horizontal-tb !important;
        word-break: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    /* ========== INPUT AREA ========== */
    .input-area,
    body .input-area,
    body .chat-container .input-area,
    .chat-container .input-area,
    div.input-area {
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    /* Input field */
    .message-input,
    body .message-input,
    textarea.message-input {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    /* Buttons */
    .tools-btn-desktop,
    .mic-btn-desktop,
    .send-button,
    body .input-area button {
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* ========== HEADER ========== */
    .header,
    body .header,
    body .main-content .header,
    div.header {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        padding-left: 60px !important; /* Space for hamburger */
        margin: 0 !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    /* Header content not covered by hamburger */
    .header-context,
    .header h1,
    .header .title,
    .header .logo {
        margin-left: 0 !important;
    }

    /* Header badges */
    .project-line,
    .chat-line {
        width: 325px !important;
        max-width: 325px !important;
        margin: 3px 0 3px 47px !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
        background: #243b55 !important;
        border-radius: 6px !important;
        border: 1px solid rgba(61, 90, 128, 0.3) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    
    /* ========== HIDE SCROLLBAR BUT KEEP SCROLL ========== */
    .messages,
    #messagesContainer,
    div.messages {
        -ms-overflow-style: none !important;  /* IE and Edge */
        scrollbar-width: none !important;     /* Firefox */
    }
    
    .messages::-webkit-scrollbar,
    #messagesContainer::-webkit-scrollbar,
    div.messages::-webkit-scrollbar {
        display: none !important;             /* Chrome, Safari, Opera */
        width: 0 !important;
        height: 0 !important;
    }


    /* ========== HAMBURGER MENU BUTTON ========== */
    .hamburger-menu,
    .menu-toggle,
    .sidebar-toggle,
    .hamburger-menu,
    [class*="menu-btn"] {
        display: flex !important;
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 1003 !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* ========== PROCESSING OVERLAY ========== */
    .processing-overlay {
        display: none !important;
    }

    .processing-overlay.active {
        display: flex !important;
    }
}

/* === SMALL MOBILE (480px and below) === */
@media screen and (max-width: 480px) {
    .message,
    .message.ai,
    .message.user {
        max-width: 90% !important;
        min-width: 60px !important;
    }

    .input-area {
        padding: 10px 12px !important;
        gap: 6px !important;
    }

    .tools-btn-desktop,
    .mic-btn-desktop,
    .send-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .header {
        padding: 10px 12px !important;
        padding-left: 55px !important;
    }
}



/* ========== PROJECT/CHAT LINES - MOBILE FIX ========== */
@media screen and (max-width: 768px) {
    /* Header context - positioned right of hamburger */
    .header-context,
    .main-content .header .header-context,
    div.header-context {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin-left: 55px !important; /* Start after hamburger (56px) */
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    /* Project and Chat lines - fit in remaining space */
    #projectLine,
    #chatLine,
    p#projectLine,
    p#chatLine,
    .project-line,
    .chat-line {
        width: 325px !important;
        max-width: 325px !important;
        margin: 3px 0 3px 47px !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
        background: #243b55 !important;
        border-radius: 6px !important;
        border: 1px solid rgba(61, 90, 128, 0.3) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    /* Header container */
    .header,
    .main-content .header,
    div.header {
        height: 101px !important;
        min-height: 101px !important;
        max-height: 101px !important;
        padding: 16px 12px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }
}

/* ========== WELCOME MESSAGE - TOP POSITION ========== */
@media screen and (max-width: 768px) {
    /* Messages container - content at top */
    .messages,
    #messagesContainer,
    div.messages {
        justify-content: flex-start !important;
        align-content: flex-start !important;
    }

    /* Welcome message - force top */
    #welcomeMessage,
    .message.ai#welcomeMessage {
        margin-top: 16px !important;
        align-self: flex-start !important;
    }
}

/* ========== MOBILE BUTTON STATES RESET ========== */
@media screen and (max-width: 768px) {
    /* Reset focus/active states on mobile buttons */
    .mobile-btn,
    .mobile-btn:focus,
    .mobile-btn:active,
    .mobile-btn:focus-visible,
    button.mobile-btn,
    button.mobile-btn:focus,
    button.mobile-btn:active {
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    /* Ensure buttons return to normal state after tap */
    .mobile-btn:not(.active):not(.loading):not(.recording):not(.transcribing) {
        background: #2C5F7F !important;
        transform: none !important;
    }

    /* Send button specific reset */
    .mobile-btn[onclick*="sendMobileMessage"]:not(.loading) {
        background: #2C5F7F !important;
    }

    /* Mic button specific reset */
    .mic-btn-mobile:not(.recording):not(.transcribing),
    .mobile-btn[onclick*="startMobileRecording"]:not(.recording):not(.transcribing) {
        background: #2C5F7F !important;
        animation: none !important;
    }
}

/* ========== BOTONES FOOTER - PALETA SIMPLIFICADA ========== */
@media screen and (max-width: 768px) {
    /* === BOTONES SECUNDARIOS (menú, micrófono) === */
    .mobile-btn#menuBtn,
    .mic-btn-mobile,
    button.mic-btn-mobile {
        background: #2C5F7F !important;
        color: #FFFFFF !important;
        border: none !important;
        border-radius: 12px !important;
        font-size: 20px !important;
    }

    .mobile-btn#menuBtn:hover,
    .mic-btn-mobile:hover {
        background: #3A7A9F !important;
    }

    .mobile-btn#menuBtn:active,
    .mic-btn-mobile:active {
        background: #1A405A !important;
    }

    /* MenuBtn estado activo (menú abierto) */
    .mobile-btn#menuBtn.active {
        background: #1A405A !important;
        color: #FFFFFF !important;
        transform: rotate(45deg) !important;
    }

    /* Micrófono grabando */
    .mic-btn-mobile.recording {
        background: #c0392b !important;
        animation: pulse 1s infinite !important;
    }

    /* === BOTÓN ENVIAR (principal - destaca) === */
    .mobile-btn[onclick*=sendMobileMessage] {
        background: #2C5F7F !important;
        color: #FFFFFF !important;
        border: none !important;
        border-radius: 12px !important;
        font-size: 20px !important;
    }

    .mobile-btn[onclick*=sendMobileMessage]:hover {
        background: #3A7A9F !important;
    }

    .mobile-btn[onclick*=sendMobileMessage]:active {
        background: #2C5F7F !important;
    }

    /* Enviar en estado loading */
    .mobile-btn[onclick*=sendMobileMessage].loading {
        background: #2C5F7F !important;
    }

    /* === RESET - Sobrescribir gradientes anteriores === */
    .mobile-btn:not(.active):not(.loading):not(.recording):not(.transcribing) {
        background: #2C5F7F !important;
        color: #FFFFFF !important;
    }

    /* Enviar siempre destaca */
    .mobile-btn[onclick*=sendMobileMessage]:not(.loading) {
        background: #2C5F7F !important;
        color: #FFFFFF !important;
    }
}

/* ========== SVG ICONS IN BUTTONS ========== */
@media screen and (max-width: 768px) {
    .mobile-btn svg,
    .mic-btn-mobile svg,
    .mic-btn-desktop svg {
        width: 22px !important;
        height: 22px !important;
        stroke: currentColor !important;
        vertical-align: middle !important;
    }
}

/* Menu icons SVG styling */
.menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
}

.menu-icon svg {
    color: #2C5F7F !important;
    width: 24px !important;
    height: 24px !important;
    stroke: #2C5F7F !important;
    flex-shrink: 0 !important;
}


/* ========== DESKTOP UNIFICATION (min-width: 769px) ========== */
/* Aplicar mismos colores que mobile a botones desktop */
@media (min-width: 769px) {
    /* Botón herramientas/menu desktop */
    .tools-btn-desktop {
        background: #2C5F7F !important;
        color: #FFFFFF !important;
        border: none !important;
        border-radius: 12px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    .tools-btn-desktop:hover {
        background: #3A7A9F !important;
    }

    .tools-btn-desktop:active {
        background: #1A405A !important;
    }

    /* Botón enviar desktop */
    .send-button {
        background: #2C5F7F !important;
        color: #FFFFFF !important;
        border: none !important;
        border-radius: 12px !important;
        width: 44px !important;
        height: 44px !important;
        box-shadow: none !important;
    }

    .send-button:hover {
        background: #3A7A9F !important;
        transform: none !important;
    }

    .send-button:active {
        background: #2C5F7F !important;
    }

    /* Botón micrófono desktop */
    .mic-btn-desktop {
        background: #2C5F7F !important;
        color: #FFFFFF !important;
        border: none !important;
        border-radius: 12px !important;
        width: 44px !important;
        height: 44px !important;
        box-shadow: none !important;
    }

    .mic-btn-desktop:hover {
        background: #3A7A9F !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .mic-btn-desktop:active {
        background: #1A405A !important;
    }

    /* Mic grabando */
    .mic-btn-desktop.recording {
        background: #c0392b !important;
        animation: pulse 1s infinite !important;
    }

    /* Mic transcribiendo */
    .mic-btn-desktop.transcribing {
        background: #166A85 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX ALTURA MÓVIL - Dejar espacio para footer fijo (120px)
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
    /* Main content debe dejar espacio para footer */
    .main-content,
    body .main-content,
    html body .main-content,
    .app-container .main-content,
    div.main-content {
        height: calc(100vh - 120px) !important;
        height: calc(100dvh - 120px) !important;
        max-height: calc(100vh - 120px) !important;
        max-height: calc(100dvh - 120px) !important;
        padding-bottom: 0 !important;
        margin-bottom: 120px !important;
    }
    
    /* Chat container no debe exceder el main-content */
    .chat-container,
    body .chat-container,
    body .main-content .chat-container,
    div.chat-container {
        height: calc(100dvh - 383px) !important;  /* ajustado para Y=650 */
        max-height: calc(100vh - 120px) !important;
        max-height: calc(100dvh - 120px) !important;
    }
    
    /* Messages debe scrollear dentro del espacio disponible */
    .messages,
    #messagesContainer,
    body .messages,
    .chat-container .messages {
        flex: 1 !important;
        max-height: calc(100vh - 180px) !important;
        max-height: calc(100dvh - 180px) !important;
        overflow-y: auto !important;
        padding-bottom: 16px !important;
    }
}