@keyframes modalSlide { from { opacity: 0; transform: translate(-50%,-48%) scale(0.95); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideDown { from { transform: translate(-50%,-60%); opacity: 0; } to { transform: translate(-50%,-50%); opacity: 1; } }

        /* MODAL DE ERROR PERSONALIZADO */
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideDown {
            from { transform: translate(-50%, -60%); opacity: 0; }
            to { transform: translate(-50%, -50%); opacity: 1; }
        }

        
        /* LAYOUT PRINCIPAL */
        .app-container {
            display: flex;
            width: 100%;
            height: 100vh;
        }
        
        /* SIDEBAR MEJORADO */
        .sidebar {
            height: 100vh;
            width: 300px;
            background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
            display: flex;
            flex-direction: column;
            border-right: 1px solid rgba(255,255,255,0.15);
            backdrop-filter: blur(20px);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            z-index: 1000;
        }
        
        .sidebar.active { transform: translateX(0); left: 0; }
        
        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);

        /* FOOTER DEL SIDEBAR */
        .sidebar-footer {
            margin-top: auto;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .sidebar-content {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow-y: auto;
        }
            text-align: center;
        }
        
        .app-title {
            font-size: 24px;
            font-weight: 700;
            color: rgba(255,255,255,0.95);
            margin: 0;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .app-version {
            font-size: 12px;
            color: rgba(255,255,255,0.7);
            font-weight: 500;
            display: block;
        }
        
        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        
        .sidebar-section {
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 14px;
            font-weight: 600;
            color: rgba(255,255,255,0.8);
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .sidebar-item {
            padding: 12px 15px;
            margin: 5px 0;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255,255,255,0.9);
        }
        
        .sidebar-item:hover {
            background: rgba(255,255,255,0.1);
            transform: translateX(5px);
        }
        
        .sidebar-item.active {
            background: rgba(29, 161, 242, 0.2);
            color: white;
        }
        
        /* MENÚ HAMBURGUESA */
        .hamburger-menu {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1001;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 12px;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .hamburger-menu:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.05);
        }
        
        .hamburger-icon {
            width: 32px;
            height: 32px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        
        .hamburger-line {
            width: 100%;
            height: 3px;
            background: #333;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        .hamburger-menu.active .hamburger-line:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }
        
        .hamburger-menu.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }
        
        .hamburger-menu.active .hamburger-line:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }
        
        /* OVERLAY */
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .sidebar-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        /* CONTENIDO PRINCIPAL */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-left: 300px;
            padding: 20px 40px 20px 40px;
            transition: margin-left 0.3s ease;
        }
        
        /* HEADER ORIGINAL RESTAURADO */
        .header {
            text-align: center;
            color: white;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        
        .header p {
            opacity: 0.9;
            font-size: 1.1em;
        }
        
        /* HEADER DINÁMICO - CONTEXTO */
        .header-context {
            margin-top: 10px;
        }
        
        .project-line, .chat-line {
            margin: 5px 0;
            opacity: 0.85;
            font-size: 1.05em;
            font-weight: 500;
            color: rgba(255,255,255,0.9);
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        .project-line {
            color: #4CAF50;
        }
        
        .chat-line {
            color: #00BCD4;
        }
        
        
        /* FOOTER ADAPTATIVO - OPCIÓN 3 */
        #lohmiaFooterMobile {
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
            transform: translateY(0);
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
            opacity: 1;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
        }
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
        
        #lohmiaFooterMobile.hidden {
            transform: translateY(100%);
            opacity: 0;
            pointer-events: none;
        }
        
        /* Indicador de procesamiento con reloj de arena híbrido */
        
        
        
        
        /* Reloj de arena híbrido moderno */
        .modern-hourglass {
            width: 18px;
            height: 18px;
            position: relative;
            animation: flip 3s ease-in-out infinite;
        }
        
/* ELIMINADO: elemento hourglass que causaba icono flotante */
        
/* ELIMINADO: elemento hourglass que causaba icono flotante */
        
/* ELIMINADO: elemento hourglass que causaba icono flotante */
        
/* ELIMINADO: elemento sand que causaba icono flotante */
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
        
        @keyframes flip {
            0%, 40% { transform: rotate(0deg); }
            50%, 90% { transform: rotate(180deg); }
            100% { transform: rotate(180deg); }
        }
        
        @keyframes sand-flow {
            0% { 
                top: 20%; 
                opacity: 1; 
                transform: translate(-50%, -50%) scale(1);
            }
            50% { 
                top: 50%; 
                opacity: 0.7; 
                transform: translate(-50%, -50%) scale(0.8);
            }
            100% { 
                top: 80%; 
                opacity: 1; 
                transform: translate(-50%, -50%) scale(1);
            }
        }
        
        @keyframes particle-fall {
            0% { 
                opacity: 0; 
                top: 25%; 
                height: 8px;
            }
            30% { 
                opacity: 1; 
                top: 45%; 
                height: 4px;
            }
            70% { 
                opacity: 0.8; 
                top: 65%; 
                height: 2px;
            }
            100% { 
                opacity: 0; 
                top: 75%; 
                height: 1px;
            }
        }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 0.9; }
            50% { opacity: 1; }
        }
        
        /* Ajustes cuando footer está oculto - exacto al espacio del input */
        body.footer-hidden {
            padding-bottom: 20px !important;
        }
        
        .chat-container.footer-hidden {
            margin-bottom: 20px !important;
        }
        
        /* Posicionamiento preciso en el espacio del input liberado */
            
            
            .modern-hourglass {
                width: 16px !important;
                height: 16px !important;
            }
            
/* ELIMINADO: elemento hourglass que causaba icono flotante */
        }
            
            .project-line, .chat-line {
                font-size: 0.95em;
                margin: 3px 0;
            }
        }

        /* CHAT CONTAINER */
        @media (min-width: 769px) {
/* COMENTADO - Conflicto con chat-responsive.css -             .chat-container {
/* COMENTADO - Conflicto con chat-responsive.css -     width: 1174px !important;
/* COMENTADO - Conflicto con chat-responsive.css -     transform: translateX(5px) !important;
/* COMENTADO - Conflicto con chat-responsive.css -     max-width: 1174px !important;
/* COMENTADO - Conflicto con chat-responsive.css -     margin: 0 auto 20px !important;
/* COMENTADO - Conflicto con chat-responsive.css -     flex: none !important;
/* COMENTADO - Conflicto con chat-responsive.css - 
/* COMENTADO - Conflicto con chat-responsive.css -             background: rgba(255, 255, 255, 0.95);
/* COMENTADO - Conflicto con chat-responsive.css -             border-radius: 20px;
/* COMENTADO - Conflicto con chat-responsive.css -             padding: 20px;
/* COMENTADO - Conflicto con chat-responsive.css -             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
*/
            backdrop-filter: blur(20px);
            display: flex;
            flex-direction: column;
            overflow-wrap: break-word;
                    }
        }
        
        /* ÁREA DE MENSAJES */
        .messages {
            flex: 1 !important;
            overflow-y: auto;
            margin-bottom: 20px;
            padding: 20px;

            border-radius: 15px;
            background: #f8f9fa;
            min-height: 700px;
            max-height: 70vh;
        }
        
        .message {
            margin-bottom: 15px;
            padding: 12px 16px;
            border-radius: 12px;
            max-width: 100%;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        .message.user {
            background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 50%, #0097A7 100%);
            color: white;
            margin-left: auto;
            margin-right: 0;
            max-width: 70%;
        }
        
        .message.ai {
            background: #e9ecef;
            color: #333;
            margin-right: auto;
            margin-left: 0;
            max-width: 85%;
        }
        
        .message.system {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            text-align: center;
            margin: 10px auto;
            max-width: 80%;
            font-weight: 500;
        }
        
        /* INPUT AREA */
        .input-area { /* Solo móvil */
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
            display: flex;
            gap: 12px;
            align-items: center;
        }
        

        /* INDICADOR AL LADO DEL INPUT */
        .input-side-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            margin: 0 8px;
            position: relative;
        }
        
        .pulse-dot {
            width: 12px;
            height: 12px;
            background: linear-gradient(45deg, #ff4757 0%, #ff3742 50%, #ff6b7a 100%);
            border-radius: 50%;
            position: relative;
            animation: pulse-indicator 1.5s ease-in-out infinite;
            box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
        }
        
        .pulse-dot::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 71, 87, 0.3) 0%, transparent 70%);
            animation: pulse-ring 1.5s ease-in-out infinite;
        }
        
        @keyframes pulse-indicator {
            0% {
                transform: scale(0.8);
                box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
            }
            50% {
                transform: scale(1.1);
                box-shadow: 0 0 0 8px rgba(255, 71, 87, 0);
            }
            100% {
                transform: scale(0.8);
                box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
            }
        }
        
        @keyframes pulse-ring {
            0% {
                transform: scale(0.8);
                opacity: 1;
            }
            100% {
                transform: scale(1.8);
                opacity: 0;
            }
        }
        
        /* Responsive para móviles */
        @media screen and (max-width: 768px) {
                width: 20px;
                height: 20px;
                margin: 0 6px;
            }
            
            .pulse-dot {
                width: 10px;
                height: 10px;
            }
        }
                .message-input {
    resize: none !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    overflow-y: auto !important;
            flex: 1;
            padding: 15px 20px;
            border: 2px solid #e1e8ed;
            border-radius: 25px;
            font-size: 16px;
            font-family: inherit;
            transition: border-color 0.2s ease;
        }
        
        .message-input:focus {
            outline: none;
            border-color: #00BCD4;
            box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.1);
        }
        
        .send-button {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 50%, #0097A7 100%);
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            transition: transform 0.2s ease;
            flex-shrink: 0;
        }
        
        .send-button:hover { transform: scale(1.05); }
        
        /* MODAL DE CONFIGURACIÓN */
        .config-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        
        .config-content {
            background: white;
            border-radius: 20px;
            padding: 24px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .config-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e1e8ed;
        }
        
        .config-title {
            font-size: 24px;
            font-weight: 700;
            color: #333;
        }
        
        .config-close {
            width: 40px;
            height: 20px;
            border-radius: 20px;
            background: #ff4757;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }
        
        .config-section {
            margin-bottom: 25px;
        }
        
        .config-section h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        .config-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .config-input {
            padding: 12px 15px;
            border: 2px solid #e1e8ed;
            border-radius: 10px;
            font-size: 14px;
            transition: border-color 0.2s ease;
        }
        
        .config-input:focus {
            outline: none;
            border-color: #00BCD4;
        }
        
        .save-config-btn {
            padding: 12px 25px;
            background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 50%, #0097A7 100%);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            margin-top: 20px;
        }
        
        /* MODAL DE HERRAMIENTAS CORREGIDO */
        .tools-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            padding: 20px;
        }
        
        .tools-content {
            background: white;
            border-radius: 20px;
            padding: 24px;
            max-width: 400px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
        }
        
        .tools-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e1e8ed;
        }
        
        .tools-title {
            font-size: 20px;
            font-weight: 700;
            color: #333;
        }
        
        .tools-close {
            width: 32px;
            height: 32px;
            border-radius: 16px;
            background: #ff4757;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        
        .tools-close:hover {
            transform: scale(1.1);
        }
        
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .tool-item {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 2px solid transparent;
        }
        
        .tool-item:hover {
            background: rgba(29, 161, 242, 0.1);
            border-color: rgba(29, 161, 242, 0.2);
            transform: translateY(-2px);
        }
        
        .tool-icon {
            font-size: 32px;
            margin-bottom: 10px;
            display: block;
        }
        
        .tool-name {
            font-weight: 600;
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }
        
        .tool-desc {
            font-size: 11px;
            color: #666;
            line-height: 1.3;
        }
        
        /* FOOTER MÓVIL */
        @media screen and (max-width: 768px) {
            .main-content {
                margin-left: 0;
            }
            .app-container { flex-direction: column; }
            .sidebar { width: 100%; transform: translateX(-100%); }
            .sidebar.active { transform: translateX(0); }
            .chat-container {
                flex: none !important;
                position: relative !important;
                width: 90vw !important;
                max-width: none !important;
                left: -11px !important;
                min-height: 75vh !important;
                margin: 0 0 100px 0 !important;
                padding: 16px !important;
                border-radius: 15px;
            }
            
            .messages {
                min-height: calc(75vh - 120px) !important;
                max-height: calc(75vh - 120px) !important;
            }
            .input-area { display: none; }
            
            #lohmiaFooterMobile {
            min-height: 120px !important;
            height: auto !important;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                position: fixed;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                bottom: 0;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                left: 0;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                right: 0;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                background: rgba(255, 255, 255, 0.98);
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                backdrop-filter: blur(16px);
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                border-top: 1px solid rgba(0, 0, 0, 0.1);
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                padding: 12px 16px;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                z-index: 1000;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                z-index: 1000;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                display: flex;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                align-items: center;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                gap: 12px;
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
            }
            /* SIEMPRE VISIBLE - COMPORTAMIENTO MÓVIL FORZADO */
            
            .mobile-btn {
                width: 44px;
                height: 44px;
                border-radius: 22px;
                background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 50%, #0097A7 100%);
                border: none;
                color: white;
                font-size: 18px;
                font-weight: 600;
                cursor: pointer;
                flex-shrink: 0;
                transition: all 0.2s ease;
            }
            
            .mobile-btn:hover { transform: scale(1.05); }
            
            .mobile-btn.red {
                background: linear-gradient(135deg, #ff4757, #ff3742);
                animation: pulse 1.5s infinite;
            }
            
            @keyframes pulse {
                0%, 100% { box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3); }
                50% { box-shadow: 0 4px 16px rgba(255, 71, 87, 0.6); }
            }
            
            .mobile-textarea {
                flex: 1;
                min-height: 44px;
                max-height: 120px;
                padding: 12px 16px;
                border: 2px solid #e1e8ed;
                border-radius: 22px;
                resize: none;
                font-size: 14px;
                background: white;
                transition: border-color 0.2s ease;
            }
            
            .mobile-textarea:focus {
                outline: none;
                border-color: #00BCD4;
                box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.1);
            }
            
            
            .menu-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 16px;
            }
            
            .menu-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 16px 8px;
                border-radius: 16px;
                background: rgba(248, 249, 250, 0.8);
                cursor: pointer;
                transition: all 0.2s ease;
            }
            
            .menu-item:hover {
                background: rgba(29, 161, 242, 0.1);
                transform: translateY(-2px);
            }
            
            .menu-icon { font-size: 24px; margin-bottom: 8px; }
            .menu-text { font-size: 12px; font-weight: 600; color: #333; }
        }
        
        html, body { overflow-x: hidden; }
        .loading { display: none; text-align: center; color: #666; margin: 20px 0; }
        .hidden { display: none; }

/* ============================================= */
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(33, 150, 243, 0.4); }
    50% { box-shadow: 0 0 25px rgba(33, 150, 243, 0.7); }
}


/* FIX: Asegurar visibilidad del botón */
.send-button, .mobile-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
}

#mobileMenu {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    display: none;
    z-index: 999;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

@media (min-width: 769px) {
    #mobileMenu {
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        max-width: calc(100vw - 40px);
        bottom: 100px;
    }
}


/* Ocultar hamburguesa en desktop */
@media (min-width: 769px) {
    .hamburger-menu,
    #hamburgerMenu {
        display: none !important;
    }
}

    #mobileMenu .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    #mobileMenu .menu-text {
        font-size: 11px;
    }
}

/* MENU HERRAMIENTAS - CENTRADO EN CONTENIDO */
#mobileMenu {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 580px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 28px 24px;
    display: none;
    z-index: 1000;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#mobileMenu .menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

#mobileMenu .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#mobileMenu .menu-item:hover {
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
}

#mobileMenu .menu-text {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

/* Desktop: centrado en área de contenido (después del sidebar) */
@media (min-width: 769px) {
    #mobileMenu {
        left: calc(250px + (100% - 250px) / 2);
        transform: translateX(-50%);
        bottom: 110px;
        width: 600px;
        max-width: calc(100vw - 280px);
    }
}

/* Botón + activo (cuando menú abierto) */
.tools-btn-desktop.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.tools-btn-desktop {
    transition: all 0.3s ease;
}

/* Botón móvil + activo */
.mobile-btn#menuBtn.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.mobile-btn#menuBtn {
    transition: all 0.3s ease !important;
}

/* Ocultar elementos fantasma en esquina inferior izquierda */
@media (min-width: 769px) {
    #lohmiaFooterMobile,
    #lohmiaFooterMobile * {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Asegurar que ningún elemento fijo aparezca en esa zona */
body::before,
.sidebar::after {
    content: none !important;
}

/* Ocultar input cuando sidebar móvil está abierto */
@media (max-width: 768px) {
    body.sidebar-open .input-area,
    body.sidebar-open #lohmiaFooterMobile {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }
    </style>
<style>
/* Cache bust: 1761284958 */
/* Corrección UI - Procesando texto */
/* Corrección para evitar que "Procesando" tape el contenido */\
.processing-indicator {\
    position: relative !important;\
    z-index: 1 !important;\
    background: rgba(255,255,255,0.9) !important;\
    backdrop-filter: blur(2px) !important;\
    margin: 5px 0 !important;\
    padding: 8px !important;\
    border-radius: 8px !important;\
    font-size: 14px !important;\
    color: #666 !important;\
}\
\
/* Mejorar visibilidad durante procesamiento */\
.chat-container.processing .message-bubble {\
    opacity: 0.8 !important;\
}
/* FORZAR APARIENCIA MÓVIL EN DESKTOP */
    .sidebar {
        transform: translateX(0) !important;
    }
}

/* ============================================= */
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(33, 150, 243, 0.4); }
    50% { box-shadow: 0 0 25px rgba(33, 150, 243, 0.7); }
}


/* FIX: Asegurar visibilidad del botón */
.send-button, .mobile-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
}

    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ajustar z-index de pseudo-elementos */
    z-index: 10 !important;
}

    z-index: -2 !important;
}

/* ============================================= */
/* ANIMACIÓN LOADING - SIN DESPLAZAMIENTO */
/* ============================================= */

/* Spinner simple dentro del botón */
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.5);
    border-top-color: #00FFFF;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,255,255,0.7);
    box-shadow: 0 0 8px rgba(0,255,255,0.6);
    box-shadow: 0 0 8px rgba(0,255,255,0.6);
    animation: spin 0.6s linear infinite;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Estado loading sin cambiar tamaño */
    position: relative;
}

}

/* ALINEACIÓN BOTONES - CORRECTO */
.input-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
}

.message-input {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
}

.send-button,
.mobile-btn {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
}

/* MANTENER ALINEACIÓN DURANTE LOADING */
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Asegurar que pseudo-elementos no afecten tamaño */
    position: absolute !important;
    pointer-events: none !important;
}

/* MENÚ HERRAMIENTAS EN DESKTOP */

/* MENÚ EN DESKTOP - POSICIÓN CORRECTA */
@media (min-width: 769px) {
    #mobileMenu .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

/* MENU HERRAMIENTAS - UNICA DEFINICION */
#mobileMenu {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    display: none;
    z-index: 999;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

@media (min-width: 769px) {
    #mobileMenu {
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        max-width: calc(100vw - 40px);
        bottom: 100px;
    }
}


/* Ocultar hamburguesa en desktop */
@media (min-width: 769px) {
    .hamburger-menu,
    #hamburgerMenu {
        display: none !important;
    }
}

    #mobileMenu .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    #mobileMenu .menu-text {
        font-size: 11px;
    }
}

/* MENU HERRAMIENTAS - CENTRADO EN CONTENIDO */
#mobileMenu {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 580px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 28px 24px;
    display: none;
    z-index: 1000;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#mobileMenu .menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

#mobileMenu .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#mobileMenu .menu-item:hover {
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
}

#mobileMenu .menu-text {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

/* Desktop: centrado en área de contenido (después del sidebar) */
@media (min-width: 769px) {
    #mobileMenu {
        left: calc(250px + (100% - 250px) / 2);
        transform: translateX(-50%);
        bottom: 110px;
        width: 600px;
        max-width: calc(100vw - 280px);
    }
}

/* Botón + activo (cuando menú abierto) */
.tools-btn-desktop.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.tools-btn-desktop {
    transition: all 0.3s ease;
}

/* Botón móvil + activo */
.mobile-btn#menuBtn.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.mobile-btn#menuBtn {
    transition: all 0.3s ease !important;
}

/* Ocultar elementos fantasma en esquina inferior izquierda */
@media (min-width: 769px) {
    #lohmiaFooterMobile,
    #lohmiaFooterMobile * {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Asegurar que ningún elemento fijo aparezca en esa zona */
body::before,
.sidebar::after {
    content: none !important;
}

/* Ocultar input cuando sidebar móvil está abierto */
@media (max-width: 768px) {
    body.sidebar-open .input-area,
    body.sidebar-open #lohmiaFooterMobile {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }
}
</style>
<style>
/* Cache bust: 1761284958 */
/* FIX COMPLETO LOHMIA */
.login-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.login-box {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.input-area {
    position: fixed !important;
    bottom: 0 !important;
    left: 300px !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    padding: 20px 30px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    gap: 12px !important;
    z-index: 998 !important;
}

.tools-btn-desktop {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #00BCD4 !important;
    color: white !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tools-btn-desktop:hover {
    background: linear-gradient(135deg, #00BCD4, #0097A7) !important;
    color: white !important;
}

.message-input {
    flex: 1 !important;
    padding: 14px 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 24px !important;
    background: #f9fafb !important;
}

.message-input:focus {
    border-color: #00BCD4 !important;
    background: white !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
}

.send-button {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #00BCD4, #0097A7) !important;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4) !important;
}


/* Estado loading - mismo estilo que normal, solo cambia icono */

/* Botón loading con mismo estilo que normal */
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #00BCD4, #0097A7) !important;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
@media (max-width: 768px) {
    .input-area,
    .mic-btn-desktop,
    .send-button,
    #micTimer,
    .tools-btn-desktop {
        display: none !important;
    }


.send-button.loading {
    background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 50%, #0097A7 100%) !important;
    position: relative !important;
    pointer-events: none !important;
}

.send-button.loading::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    border-top-color: #00BCD4 !important;
    border-right-color: #00BCD4 !important;
    animation: border-spin 1s linear infinite !important;
    z-index: 10 !important;
}
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(33, 150, 243, 0.4); }
    50% { box-shadow: 0 0 25px rgba(33, 150, 243, 0.7); }
}


/* FIX: Asegurar visibilidad del botón */
.send-button, .mobile-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
}

    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ajustar z-index de pseudo-elementos */
    z-index: 10 !important;
}

    z-index: -2 !important;
}

/* ============================================= */
/* ANIMACIÓN LOADING - SIN DESPLAZAMIENTO */
/* ============================================= */

/* Spinner simple dentro del botón */
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.5);
    border-top-color: #00FFFF;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,255,255,0.7);
    box-shadow: 0 0 8px rgba(0,255,255,0.6);
    box-shadow: 0 0 8px rgba(0,255,255,0.6);
    animation: spin 0.6s linear infinite;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Estado loading sin cambiar tamaño */
    position: relative;
}

}

/* ALINEACIÓN BOTONES - CORRECTO */
.input-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
}

.message-input {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
}

.send-button,
.mobile-btn {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
}

/* MANTENER ALINEACIÓN DURANTE LOADING */
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Asegurar que pseudo-elementos no afecten tamaño */
    position: absolute !important;
    pointer-events: none !important;
}

/* MENÚ HERRAMIENTAS EN DESKTOP */

/* MENÚ EN DESKTOP - POSICIÓN CORRECTA */
@media (min-width: 769px) {
    #mobileMenu .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

/* MENU HERRAMIENTAS - UNICA DEFINICION */
#mobileMenu {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    display: none;
    z-index: 999;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

@media (min-width: 769px) {
    #mobileMenu {
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        max-width: calc(100vw - 40px);
        bottom: 100px;
    }
}


/* Ocultar hamburguesa en desktop */
@media (min-width: 769px) {
    .hamburger-menu,
    #hamburgerMenu {
        display: none !important;
    }
}

    #mobileMenu .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    #mobileMenu .menu-text {
        font-size: 11px;
    }
}

/* MENU HERRAMIENTAS - CENTRADO EN CONTENIDO */
#mobileMenu {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 580px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 28px 24px;
    display: none;
    z-index: 1000;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#mobileMenu .menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

#mobileMenu .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#mobileMenu .menu-item:hover {
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
}

#mobileMenu .menu-text {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

/* Desktop: centrado en área de contenido (después del sidebar) */
@media (min-width: 769px) {
    #mobileMenu {
        left: calc(250px + (100% - 250px) / 2);
        transform: translateX(-50%);
        bottom: 110px;
        width: 600px;
        max-width: calc(100vw - 280px);
    }
}

/* Botón + activo (cuando menú abierto) */
.tools-btn-desktop.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.tools-btn-desktop {
    transition: all 0.3s ease;
}

/* Botón móvil + activo */
.mobile-btn#menuBtn.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.mobile-btn#menuBtn {
    transition: all 0.3s ease !important;
}

/* Ocultar elementos fantasma en esquina inferior izquierda */
@media (min-width: 769px) {
    #lohmiaFooterMobile,
    #lohmiaFooterMobile * {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Asegurar que ningún elemento fijo aparezca en esa zona */
body::before,
.sidebar::after {
    content: none !important;
}

/* Ocultar input cuando sidebar móvil está abierto */
@media (max-width: 768px) {
    body.sidebar-open .input-area,
    body.sidebar-open #lohmiaFooterMobile {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }
}
</style>
<style>
/* Cache bust: 1761284958 */
/* Botón micrófono desktop */
.mic-btn-desktop {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #00BCD4, #0097A7) !important;
    color: white !important;
    font-size: 20px !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.mic-btn-desktop:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 24px rgba(102, 126, 234, 0.5) !important;
}

/* CONTADOR DE GRABACIÓN */
.mic-timer {
    position: absolute;
    top: auto;
    bottom: 10px;
    right: 60px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}
/* Timer móvil - centrado sobre botón */@media (max-width: 768px) {    .mic-timer {        position: fixed !important;        bottom: 100px !important;        left: 50% !important;        transform: translateX(-50%) !important;        top: auto !important;        right: auto !important;    }}

/* ESTADOS DEL BOTÓN MIC */
.mic-btn-desktop.recording {
    background: linear-gradient(135deg, #00BCD4, #0097A7) !important;
    animation: spin-border 2s linear infinite !important;
}

.mic-btn-desktop.recording::before {
    content: '⏹️';
    position: absolute;
    font-size: 24px;
}

.mic-btn-desktop.transcribing {
    background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 50%, #0097A7 100%) !important;
    position: relative !important;
}

.mic-btn-desktop.transcribing::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    border-top-color: #00BCD4 !important;
    border-right-color: #00BCD4 !important;
    animation: border-spin 1s linear infinite !important;
    z-index: 10 !important;
}

.mic-btn-mobile.recording {
    background: linear-gradient(135deg, #00BCD4, #0097A7) !important;
    animation: spin-border 2s linear infinite !important;
}

.mic-btn-mobile.recording::before {
    content: '⏹️';
    position: absolute;
    font-size: 24px;
}

.mic-btn-mobile.transcribing {
    background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 50%, #0097A7 100%) !important;
    position: relative !important;
}

.mic-btn-mobile.transcribing::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    border-top-color: #00BCD4 !important;
    border-right-color: #00BCD4 !important;
    animation: border-spin 1s linear infinite !important;
    z-index: 10 !important;
}


/* Botón IA esperando respuesta orquestador */
.send-btn.waiting {
    background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 50%, #0097A7 100%) !important;
    position: relative !important;
    pointer-events: none !important;
    cursor: wait !important;
}

.send-btn.waiting::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    border-top-color: #00BCD4 !important;
    border-right-color: #00BCD4 !important;
    animation: border-spin 1s linear infinite !important;
    z-index: 10 !important;
}
@keyframes spin-border {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    50% { box-shadow: 0 0 0 12px rgba(76, 175, 80, 0); }

.send-button.waiting {
    background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 50%, #0097A7 100%) !important;
    position: relative !important;
    pointer-events: none !important;
    cursor: wait !important;
}

.send-button.waiting::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    border-top-color: #00BCD4 !important;
    border-right-color: #00BCD4 !important;
    animation: border-spin 1s linear infinite !important;
    z-index: 10 !important;
}
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* Animación spinner transcribiendo */
@keyframes border-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Botón envío con borde giratorio (igual que micrófono) */
.mobile-btn.loading {
    background: linear-gradient(135deg, #00E5FF 0%, #00B8D4 50%, #0097A7 100%) !important;
    position: relative !important;
    pointer-events: none !important;
}

.mobile-btn.loading::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    border-top-color: #00BCD4 !important;
    border-right-color: #00BCD4 !important;
    animation: border-spin 1s linear infinite !important;
    z-index: 10 !important;
}

/* MODAL CANCELAR TRANSCRIPCIÓN */
.transcription-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    min-width: 300px;
    text-align: center;
}

.transcription-modal p {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #333;
}

.transcription-modal button {
    background: linear-gradient(135deg, #ff4757, #ff6b6b);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transcription-modal button:hover {
    transform: scale(1.05);
}

/* Reducir transparencias en sidebar móvil */
.sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.10) 100%) !important;
    backdrop-filter: blur(30px) !important;
}

/* Mejorar legibilidad en sidebar móvil */
@media (max-width: 768px) {
    .sidebar {
        background: rgba(50, 50, 80, 0.95) !important;
        backdrop-filter: blur(20px) !important;
    }
    
    .sidebar-item {
        background: rgba(255, 255, 255, 0.08) !important;
    }
    
    .sidebar-item:hover {
        background: rgba(255, 255, 255, 0.15) !important;
    }
}

/* Ocultar micrófono desktop en móvil */
@media (max-width: 768px) {
    .mic-btn-desktop {
        display: none !important;
    }
}

/* ============================================= */
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(33, 150, 243, 0.4); }
    50% { box-shadow: 0 0 25px rgba(33, 150, 243, 0.7); }
}


/* FIX: Asegurar visibilidad del botón */
.send-button, .mobile-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
}

    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ajustar z-index de pseudo-elementos */
    z-index: 10 !important;
}

    z-index: -2 !important;
}

/* ============================================= */
/* ANIMACIÓN LOADING - SIN DESPLAZAMIENTO */
/* ============================================= */

/* Spinner simple dentro del botón */
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.5);
    border-top-color: #00FFFF;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,255,255,0.7);
    box-shadow: 0 0 8px rgba(0,255,255,0.6);
    box-shadow: 0 0 8px rgba(0,255,255,0.6);
    animation: spin 0.6s linear infinite;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Estado loading sin cambiar tamaño */
    position: relative;
}

}

/* ALINEACIÓN BOTONES - CORRECTO */
.input-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
}

.message-input {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
}

.send-button,
.mobile-btn {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
}

/* MANTENER ALINEACIÓN DURANTE LOADING */
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Asegurar que pseudo-elementos no afecten tamaño */
    position: absolute !important;
    pointer-events: none !important;
}

/* MENÚ HERRAMIENTAS EN DESKTOP */

/* MENÚ EN DESKTOP - POSICIÓN CORRECTA */
@media (min-width: 769px) {
    #mobileMenu .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

/* MENU HERRAMIENTAS - UNICA DEFINICION */
#mobileMenu {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    display: none;
    z-index: 999;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

@media (min-width: 769px) {
    #mobileMenu {
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        max-width: calc(100vw - 40px);
        bottom: 100px;
    }
}


/* Ocultar hamburguesa en desktop */
@media (min-width: 769px) {
    .hamburger-menu,
    #hamburgerMenu {
        display: none !important;
    }
}

    #mobileMenu .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    #mobileMenu .menu-text {
        font-size: 11px;
    }
}

/* MENU HERRAMIENTAS - CENTRADO EN CONTENIDO */
#mobileMenu {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 580px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 28px 24px;
    display: none;
    z-index: 1000;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#mobileMenu .menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

#mobileMenu .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#mobileMenu .menu-item:hover {
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
}

#mobileMenu .menu-text {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

/* Desktop: centrado en área de contenido (después del sidebar) */
@media (min-width: 769px) {
    #mobileMenu {
        left: calc(250px + (100% - 250px) / 2);
        transform: translateX(-50%);
        bottom: 110px;
        width: 600px;
        max-width: calc(100vw - 280px);
    }
}

/* Botón + activo (cuando menú abierto) */
.tools-btn-desktop.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.tools-btn-desktop {
    transition: all 0.3s ease;
}

/* Botón móvil + activo */
.mobile-btn#menuBtn.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.mobile-btn#menuBtn {
    transition: all 0.3s ease !important;
}

/* Ocultar elementos fantasma en esquina inferior izquierda */
@media (min-width: 769px) {
    #lohmiaFooterMobile,
    #lohmiaFooterMobile * {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Asegurar que ningún elemento fijo aparezca en esa zona */
body::before,
.sidebar::after {
    content: none !important;
}

/* Ocultar input cuando sidebar móvil está abierto */
@media (max-width: 768px) {
    body.sidebar-open .input-area,
    body.sidebar-open #lohmiaFooterMobile {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }
}
</style>
<style>
/* Cache bust: 1761284958 */
/* Sidebar móvil corregido */
@media (max-width: 768px) {
    .sidebar {
        width: 100% !important;
        background: rgba(40, 40, 70, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }
    
    .sidebar.active {
        transform: translateX(0) !important;
    }
}

/* ============================================= */
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(33, 150, 243, 0.4); }
    50% { box-shadow: 0 0 25px rgba(33, 150, 243, 0.7); }
}


/* FIX: Asegurar visibilidad del botón */
.send-button, .mobile-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
}

    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ajustar z-index de pseudo-elementos */
    z-index: 10 !important;
}

    z-index: -2 !important;
}

/* ============================================= */
/* ANIMACIÓN LOADING - SIN DESPLAZAMIENTO */
/* ============================================= */

/* Spinner simple dentro del botón */
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.5);
    border-top-color: #00FFFF;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,255,255,0.7);
    box-shadow: 0 0 8px rgba(0,255,255,0.6);
    box-shadow: 0 0 8px rgba(0,255,255,0.6);
    animation: spin 0.6s linear infinite;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Estado loading sin cambiar tamaño */
    position: relative;
}

}

/* ALINEACIÓN BOTONES - CORRECTO */
.input-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
}

.message-input {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
}

.send-button,
.mobile-btn {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
}

/* MANTENER ALINEACIÓN DURANTE LOADING */
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Asegurar que pseudo-elementos no afecten tamaño */
    position: absolute !important;
    pointer-events: none !important;
}

/* MENÚ HERRAMIENTAS EN DESKTOP */

/* MENÚ EN DESKTOP - POSICIÓN CORRECTA */
@media (min-width: 769px) {
    #mobileMenu .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

/* MENU HERRAMIENTAS - UNICA DEFINICION */
#mobileMenu {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    display: none;
    z-index: 999;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

@media (min-width: 769px) {
    #mobileMenu {
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        max-width: calc(100vw - 40px);
        bottom: 100px;
    }
}


/* Ocultar hamburguesa en desktop */
@media (min-width: 769px) {
    .hamburger-menu,
    #hamburgerMenu {
        display: none !important;
    }
}

    #mobileMenu .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    #mobileMenu .menu-text {
        font-size: 11px;
    }
}

/* MENU HERRAMIENTAS - CENTRADO EN CONTENIDO */
#mobileMenu {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 580px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 28px 24px;
    display: none;
    z-index: 1000;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#mobileMenu .menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

#mobileMenu .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#mobileMenu .menu-item:hover {
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
}

#mobileMenu .menu-text {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

/* Desktop: centrado en área de contenido (después del sidebar) */
@media (min-width: 769px) {
    #mobileMenu {
        left: calc(250px + (100% - 250px) / 2);
        transform: translateX(-50%);
        bottom: 110px;
        width: 600px;
        max-width: calc(100vw - 280px);
    }
}

/* Botón + activo (cuando menú abierto) */
.tools-btn-desktop.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.tools-btn-desktop {
    transition: all 0.3s ease;
}

/* Botón móvil + activo */
.mobile-btn#menuBtn.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.mobile-btn#menuBtn {
    transition: all 0.3s ease !important;
}

/* Ocultar elementos fantasma en esquina inferior izquierda */
@media (min-width: 769px) {
    #lohmiaFooterMobile,
    #lohmiaFooterMobile * {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Asegurar que ningún elemento fijo aparezca en esa zona */
body::before,
.sidebar::after {
    content: none !important;
}

/* Ocultar input cuando sidebar móvil está abierto */
@media (max-width: 768px) {
    body.sidebar-open .input-area,
    body.sidebar-open #lohmiaFooterMobile {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }
}
</style>
<style>
/* Cache bust: 1761284958 */
/* Ocultar hamburguesa en desktop */

/* ============================================= */
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(33, 150, 243, 0.4); }
    50% { box-shadow: 0 0 25px rgba(33, 150, 243, 0.7); }
}


/* FIX: Asegurar visibilidad del botón */
.send-button, .mobile-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
}

    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ajustar z-index de pseudo-elementos */
    z-index: 10 !important;
}

    z-index: -2 !important;
}

/* ============================================= */
/* ANIMACIÓN LOADING - SIN DESPLAZAMIENTO */
/* ============================================= */

/* Spinner simple dentro del botón */
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.5);
    border-top-color: #00FFFF;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,255,255,0.7);
    box-shadow: 0 0 8px rgba(0,255,255,0.6);
    box-shadow: 0 0 8px rgba(0,255,255,0.6);
    animation: spin 0.6s linear infinite;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Spinner para botón de envío móvil */
@keyframes spin-send {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}





/* Estado loading sin cambiar tamaño */
    position: relative;
}

}

/* ALINEACIÓN BOTONES - CORRECTO */
.input-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
}

.message-input {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
}

.send-button,
.mobile-btn {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
}

/* MANTENER ALINEACIÓN DURANTE LOADING */
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Asegurar que pseudo-elementos no afecten tamaño */
    position: absolute !important;
    pointer-events: none !important;
}

/* MENÚ HERRAMIENTAS EN DESKTOP */

/* MENÚ EN DESKTOP - POSICIÓN CORRECTA */
@media (min-width: 769px) {
    #mobileMenu .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

/* MENU HERRAMIENTAS - UNICA DEFINICION */
#mobileMenu {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    display: none;
    z-index: 999;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

@media (min-width: 769px) {
    #mobileMenu {
        left: 50%;
        transform: translateX(-50%);
        width: 500px;
        max-width: calc(100vw - 40px);
        bottom: 100px;
    }
}


/* Ocultar hamburguesa en desktop */
@media (min-width: 769px) {
    .hamburger-menu,
    #hamburgerMenu {
        display: none !important;
    }
}

    #mobileMenu .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    #mobileMenu .menu-text {
        font-size: 11px;
    }
}

/* MENU HERRAMIENTAS - CENTRADO EN CONTENIDO */
#mobileMenu {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 580px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 28px 24px;
    display: none;
    z-index: 1000;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#mobileMenu .menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

#mobileMenu .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#mobileMenu .menu-item:hover {
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
}

#mobileMenu .menu-text {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

/* Desktop: centrado en área de contenido (después del sidebar) */
@media (min-width: 769px) {
    #mobileMenu {
        left: calc(250px + (100% - 250px) / 2);
        transform: translateX(-50%);
        bottom: 110px;
        width: 600px;
        max-width: calc(100vw - 280px);
    }
}

/* Botón + activo (cuando menú abierto) */
.tools-btn-desktop.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.tools-btn-desktop {
    transition: all 0.3s ease;
}

/* Botón móvil + activo */
.mobile-btn#menuBtn.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    transform: rotate(45deg);
}

.mobile-btn#menuBtn {
    transition: all 0.3s ease !important;
}

/* Ocultar elementos fantasma en esquina inferior izquierda */
@media (min-width: 769px) {
    #lohmiaFooterMobile,
    #lohmiaFooterMobile * {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Asegurar que ningún elemento fijo aparezca en esa zona */
body::before,
.sidebar::after {
    content: none !important;
}

/* Ocultar input cuando sidebar móvil está abierto */
@media (max-width: 768px) {
    body.sidebar-open .input-area,
    /* Ocultar botones desktop en móvil - solo usar footer móvil */
    }
    body.sidebar-open #lohmiaFooterMobile {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }
}
</style>
<style>
/* Cache bust: 1761284958 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
}
</style>
<style>
/* FIX FINAL MÓVIL - MÁXIMA PRIORIDAD */
@media (max-width: 768px) {
    .input-area,
    .input-area *,
    .mic-btn-desktop,
    .send-button,
    #micTimer,
    .tools-btn-desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
</style>
<style>
/* FIX FINAL MÓVIL - MÁXIMA PRIORIDAD */
@media (max-width: 768px) {
    .send-button,
    #micTimer,
    .tools-btn-desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
</style>