/* static/style.css */
/* Premium Dark Glassmorphism Design for Mónica – Agente IA */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --glass-bg: rgba(0, 0, 0, 0.85);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-highlight: rgba(255, 255, 255, 0.04);
    --accent-glow: rgba(255, 255, 255, 0.08);

    --color-primary: #ffffff;
    --color-secondary: #a0a0a0;

    --color-gradient: linear-gradient(135deg, #ffffff, #a0a0a0);
    --color-gradient-hover: linear-gradient(135deg, #e0e0e0, #ffffff);

    --text-main: #f0f0f0;
    --text-muted: #707070;
    --text-dark: #333333;

    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --shadow-premium: 0 16px 50px 0 rgba(0, 0, 0, 0.98);
}

/* 2026-10-17: Eliminación definitiva del botón "volver a la lista de chats" en Mónica */
#btn-volver-chats-desde-herramientas,
.btn-volver-chats,
button[onclick*="volverALosChats"] {
    display: none !important;
}

html {
    height: 100%;
    height: 100dvh;
    width: 100%;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #000000;
    color: var(--text-main);
    height: 100%;
    height: 100dvh;
    width: 100%;
    max-width: 100vw;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    letter-spacing: -0.01em;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

body::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    background-image:
        radial-gradient(1px 1px at 15px 25px,  #ffffff55, transparent),
        radial-gradient(1px 1px at 60px 80px,  #ffffff33, transparent),
        radial-gradient(1.5px 1.5px at 110px 40px, #ffffff44, transparent),
        radial-gradient(1px 1px at 180px 130px, #ffffff22, transparent),
        radial-gradient(1.5px 1.5px at 230px 60px, #ffffff44, transparent),
        radial-gradient(1px 1px at 290px 100px, #ffffff33, transparent),
        radial-gradient(1px 1px at 320px 20px, #ffffff22, transparent);
    background-repeat: repeat;
    background-size: 350px 350px;
    opacity: 0.6;
    pointer-events: none;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    animation: starsTwinkle 10s infinite alternate ease-in-out;
}

@keyframes starsTwinkle {
    0% { opacity: 0.2; transform: scale(1) translateY(0); }
    100% { opacity: 0.7; transform: scale(1.05) translateY(-10px); }
}

/* ---- LAYOUT ---- */
.app-wrapper {
    display: flex;
    height: 100vh;
    height: 100dvh; /* 2026-09-27: ver el comentario gemelo en body{} arriba */
    padding: 16px;
    gap: 16px;
}

/* ---- SIDEBAR (Glass Panel) ---- */
.sidebar, .sidebar-right {
    width: 280px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: var(--shadow-premium);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.sidebar-right {
    width: 320px;
}

.sidebar-header {
    padding: 32px 24px 24px;
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
}

.logo {
    font-size: 3rem;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.25));
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}

.sidebar-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #ffffff 30%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}

.badge {
    font-size: 0.7rem;
    padding: 3px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.tools-nav {
    flex: 1;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.tools-nav h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-dark);
    margin-bottom: 12px;
    padding-left: 8px;
    font-weight: 700;
}

.tool-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-smooth);
    gap: 12px;
}

.tool-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
}

.tool-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.04);
    font-weight: 600;
}

.sidebar-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.1);
}

.session-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-smooth);
    gap: 4px;
    margin-bottom: 8px;
}

.session-btn strong {
    color: #fff;
    font-size: 0.9rem;
}

.session-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.05);
}

.session-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.04);
}

.sidebar-footer p {
    font-size: 0.75rem;
    color: var(--text-dark);
    text-align: center;
}

/* ---- MAIN AREA (Glass Panel) ---- */
.main-area {
    flex: 1;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-premium);
    overflow: hidden;
    min-width: 0;
}

/* ---- PANELS ---- */
.panel {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.panel.active {
    display: flex;
}

/* ---- MESSAGES / RESULTS ---- */
.messages, .result-area {
    flex: 1;
    /* 2026-09-15 -- EL CHAT QUE NO SE DEJABA DESPLAZAR (meses de bug).
       Un elemento flex tiene por defecto min-height:auto, que significa "no me
       encojas por debajo de mi contenido". Con flex:1 + contenido mas alto que
       la pantalla, la caja CRECE para contenerlo todo en vez de recortar, asi
       que overflow-y:auto se queda sin nada que desbordar: no hay barra, no hay
       gesto, el chat se siente congelado. Safari de iOS es especialmente
       estricto con esto; Chromium suele salvarlo, por eso NO se reproducia en
       las pruebas del servidor.
       El HTML ya traia `min-width: 0` en el style inline -- alguien conocia la
       trampa pero la aplico al EJE EQUIVOCADO. Lo que hace falta en una columna
       es min-height.
       min-height:0 es el arreglo estandar y no cambia nada visualmente cuando el
       contenido cabe. */
    min-height: 0;
    padding: 24px 32px;
    overflow-y: auto;
    overflow-anchor: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-primary) !important;
}

/* Elegant Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    transition: var(--transition-smooth);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ---- BUBBLES ---- */
.msg {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px;
    border-radius: 18px;
    line-height: 1.65;
    word-wrap: break-word;
    font-size: 0.98rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.msg.history-msg {
    animation: none !important;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.msg.user {
    align-self: flex-end;
    max-width: 94%;
    width: fit-content;
    background: linear-gradient(135deg, rgba(76, 29, 149, 0.96) 0%, rgba(107, 33, 168, 0.94) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(192, 132, 252, 0.35) !important;
    border-bottom-right-radius: 4px;
    font-weight: 500;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(147, 51, 234, 0.22);
}

.msg.bot {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    background: rgba(15, 23, 42, 0.94) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    color: var(--text-main) !important;
    border-bottom-left-radius: 4px;
    border-left: 3.5px solid #38bdf8 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(56, 189, 248, 0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 2026-10-17 -- ACABADO NÍTIDO Y COLOREADO VISUAL DE LA BURBUJA DEL AGENTE:
   Mientras procesa (data-is-processing="true") mantiene un resplandor vivo en el borde izquierdo;
   al finalizar, adquiere un contorno limpio y sólido sin parpadeos ni redibujados bruscos. */
.msg.bot[data-is-processing="true"] {
    border-left: 3.5px solid #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(56, 189, 248, 0.2) !important;
}

.msg.bot:not([data-is-processing="true"]):not(.loading) {
    border-left: 3.5px solid #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 10px rgba(56, 189, 248, 0.06);
}

/* Burbuja de carga/pensando del bot: grande, ancho completo al 100% */
.msg.bot.loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px 18px !important;
    margin-bottom: 6px !important;
    background: rgba(15, 23, 42, 0.94) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-left: 3.5px solid #38bdf8 !important;
    border-radius: 18px !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 189, 248, 0.2) !important;
    animation: botLoadingPulse 2.4s infinite ease-in-out !important;
}

.msg.bot.loading.has-accordion {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 800px !important;
    padding: 12px 16px !important;
    gap: 8px !important;
}

.msg.bot.loading.has-accordion .typing-status-caption {
    align-self: flex-start !important;
    margin-bottom: 2px !important;
}

.msg.bot.loading.has-accordion .agent-reasoning-accordion {
    width: 100% !important;
    margin-top: 4px !important;
}

#header-install-pwa-btn,
.btn-instalar-pwa {
    display: inline-flex !important;
}

@keyframes botLoadingPulse {
    0%, 100% {
        border-color: rgba(56, 189, 248, 0.38);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(56, 189, 248, 0.16);
    }
    50% {
        border-color: rgba(56, 189, 248, 0.8);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 22px rgba(56, 189, 248, 0.35);
    }
}

@keyframes botLoadingPulseBW {
    0%, 100% {
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 255, 255, 0.12);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.65);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7), 0 0 22px rgba(255, 255, 255, 0.28);
    }
}

/* 2026-09-25 -- PROHIBIDO content-visibility: auto en mensajes (.msg):
   Altera el scrollHeight dinámico al colapsar elementos fuera del viewport,
   provocando saltos violentos de scroll arriba/abajo en iOS/Android.
   Usar solo contain: style para no alterar dimensiones de scroll. */
.messages .msg:not(:last-child):not(.loading) {
    contain: style;
}

/* 2026-10-02 -- ANCLAJE DE SCROLL Y FLUIDEZ DE INTERFAZ:
   overflow-anchor: none en elementos efímeros (loaders, placeholders de carga, captions de estado,
   indicador de escritura) para que el navegador NO los use como ancla de scroll al cambiar de tamaño,
   evitando cualquier salto vertical mientras el usuario lee mensajes anteriores. */
.msg.bot.loading,
.loading-process-placeholder,
.typing-status-caption,
.typing-cursor-indicator,
.agent-reasoning-accordion:not([open]) {
    overflow-anchor: none;
}

/* 2026-10-24 -- ANIMACIÓN DE VUELO E INYECCIÓN DE MENSAJES DESDE LA COLA AL CHAT (pedido del dueño) */
.queued-row-injecting-out {
    animation: queuedRowFlyOut 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    pointer-events: none !important;
}
@keyframes queuedRowFlyOut {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
        box-shadow: 0 0 16px rgba(251, 191, 36, 0.5);
    }
    40% {
        transform: translateY(-8px) scale(0.98);
        background: rgba(251, 191, 36, 0.25) !important;
        box-shadow: 0 0 24px rgba(56, 189, 248, 0.8);
    }
    100% {
        transform: translateY(-36px) scale(0.92);
        opacity: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }
}

.queued-pill-injecting {
    animation: queuedPillPulse 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
@keyframes queuedPillPulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(251,191,36,0.3); }
    50% { transform: scale(0.97); box-shadow: 0 0 24px rgba(56, 189, 248, 0.9); border-color: #38bdf8; }
    100% { transform: scale(1); opacity: 0; }
}

@keyframes dequeuedEnterFlight {
    0% {
        opacity: 0;
        transform: translateY(42px) scale(0.92);
        box-shadow: 0 0 28px rgba(251, 191, 36, 0.85), 0 0 14px rgba(56, 189, 248, 0.7);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.6), 0 0 10px rgba(56, 189, 248, 0.5);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    }
}
.msg.user.dequeued-entering {
    animation: dequeuedEnterFlight 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    position: relative;
    border: 1.5px solid rgba(251, 191, 36, 0.8) !important;
}

.dequeued-inject-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.25), rgba(56, 189, 248, 0.25));
    border: 1px solid rgba(251, 191, 36, 0.6);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fde68a;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    width: fit-content;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
    transition: opacity 0.35s ease, transform 0.35s ease;
    animation: dequeuedBadgeShine 1.5s ease-in-out infinite alternate;
}
.dequeued-inject-icon {
    font-size: 0.8rem;
    color: #fbbf24;
}
@keyframes dequeuedBadgeShine {
    0% { filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.4)); }
    100% { filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8)); }
}

/* 2026-10-02 -- ANIMACIÓN SKELETON SHIMMER PWA:
   Carga elegante y sin saltos al cambiar entre chats */
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- ACORDEÓN DE RAZONAMIENTO Y PASO A PASO (MENÚ INTERACTIVO) ---- */
.agent-reasoning-accordion {
    margin: 8px 0 12px 0 !important;
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    touch-action: pan-y !important;
}
.agent-reasoning-accordion[open] {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: rgba(148, 163, 184, 0.45) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}
.agent-reasoning-accordion summary {
    cursor: pointer !important;
    font-weight: 650 !important;
    color: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    outline: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.01em !important;
    list-style: none !important;
    min-height: 34px !important;
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent !important;
}
.agent-reasoning-accordion summary::-webkit-details-marker,
.agent-reasoning-accordion summary::marker {
    display: none !important;
}
.agent-reasoning-accordion summary:hover {
    color: #38bdf8 !important;
}
.agent-reasoning-accordion .agent-reasoning-title {
    flex: 1 !important;
    font-weight: 650 !important;
    color: #f8fafc !important;
}
.agent-reasoning-accordion .agent-reasoning-chevron {
    display: inline-block !important;
    font-size: 0.8rem !important;
    color: #38bdf8 !important;
    opacity: 0.9 !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.agent-reasoning-accordion[open] .agent-reasoning-chevron {
    transform: rotate(-180deg) !important;
}

/* ---- MARKDOWN RENDERING INSIDE BUBBLES ---- */
.msg hr,
.msg-text-content hr {
    border: none !important;
    height: 1px !important;
    margin: 18px 0 !important;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.45), rgba(168, 85, 247, 0.45), transparent) !important;
    opacity: 0.85;
}

.msg blockquote,
.msg-text-content blockquote {
    margin: 12px 0 !important;
    padding: 10px 16px !important;
    background: rgba(15, 23, 42, 0.55) !important;
    border-left: 3px solid #38bdf8 !important;
    border-radius: 0 10px 10px 0 !important;
    color: #cbd5e1 !important;
    font-style: italic;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.msg blockquote p,
.msg-text-content blockquote p {
    margin-bottom: 0 !important;
}

.msg h1, .msg h2, .msg h3,
.msg-text-content h1, .msg-text-content h2, .msg-text-content h3 {
    margin-top: 16px;
    margin-bottom: 8px;
    color: #f8fafc;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.msg h1, .msg-text-content h1 { font-size: 1.3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 5px; }
.msg h2, .msg-text-content h2 { font-size: 1.15rem; }
.msg h3, .msg-text-content h3 { font-size: 1.05rem; }

.msg p, .msg-text-content p {
    margin-bottom: 11px;
    line-height: 1.62;
}
.msg p:last-child, .msg-text-content p:last-child {
    margin-bottom: 0;
}

.msg ol, .msg ul,
.msg-text-content ol, .msg-text-content ul {
    margin-left: 20px;
    margin-bottom: 12px;
}
.msg li, .msg-text-content li {
    margin-bottom: 6px;
    line-height: 1.58;
}

.msg strong, .msg-text-content strong {
    color: #ffffff;
    font-weight: 650;
}

.msg code {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, monospace;
    background: rgba(30, 41, 59, 0.85) !important;
    padding: 2.5px 7px !important;
    border-radius: 6px !important;
    font-size: 0.88rem !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
    font-weight: 550 !important;
}

.msg pre {
    background: rgba(2, 6, 23, 0.88) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 0.86rem !important;
    margin-top: 12px !important;
    margin-bottom: 14px !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    /* 2026-10-02 -- touch-action: pan-x pan-y permite scroll horizontal dentro del
       bloque y desplazamiento vertical fluido en el chat padre sin bloqueos ni lag. */
    touch-action: pan-x pan-y !important;
}

.msg pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #e2e8f0 !important;
    font-size: inherit !important;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace !important;
}

/* ---- SYNTAX HIGHLIGHTING TOKENS ---- */
.msg pre code .hl-kwd { color: #c084fc !important; font-weight: 600; }
.msg pre code .hl-str { color: #34d399 !important; }
.msg pre code .hl-com { color: #64748b !important; font-style: italic; opacity: 0.9; }
.msg pre code .hl-num { color: #fbbf24 !important; }
.msg pre code .hl-fn  { color: #38bdf8 !important; }
.msg pre code .hl-var { color: #818cf8 !important; }

/* ---- CHAT CODE BLOCK WRAPPER & HEADER ---- */
.chat-code-block-wrapper {
    position: relative;
    margin: 12px 0;
    border-radius: 12px;
    background: rgba(10, 12, 20, 0.88);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.chat-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: rgba(20, 24, 40, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    font-weight: 600;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chat-code-lang {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-code-copy-btn {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #e9d5ff;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-code-copy-btn:hover {
    background: rgba(139, 92, 246, 0.4);
    border-color: rgba(139, 92, 246, 0.7);
    color: #ffffff;
}

.chat-code-block-wrapper pre {
    margin: 0 !important;
    padding: 12px 14px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* ---- MARKDOWN TABLES IN CHAT ---- */
.msg-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 14px 0;
    border-radius: 10px;
    background: rgba(15, 18, 28, 0.75);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    /* 2026-10-02 -- touch-action: pan-x pan-y permite desplazamiento horizontal de
       columnas de la tabla y scroll vertical fluido e instantáneo del chat padre. */
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain;
}

.msg-table-wrapper::-webkit-scrollbar {
    height: 6px;
}
.msg-table-wrapper::-webkit-scrollbar-track {
    background: rgba(15, 18, 28, 0.5);
    border-radius: 4px;
}
.msg-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.4);
    border-radius: 4px;
}
.msg-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.7);
}

.msg-text-content table,
.msg table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 0.88rem;
    box-shadow: none;
}

.msg-text-content th,
.msg th {
    background: rgba(139, 92, 246, 0.18);
    color: #e2e8f0;
    font-weight: 700;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.25);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.msg-text-content td,
.msg td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    line-height: 1.45;
    white-space: normal;
    min-width: 120px;
}

.msg-text-content tr:last-child td,
.msg tr:last-child td {
    border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
    .msg-text-content tr:hover td,
    .msg tr:hover td {
        background: rgba(255, 255, 255, 0.03);
    }
}

/* Links inside chat messages */
.msg-text-content a,
.msg a {
    color: #38bdf8;
    text-decoration: underline;
    text-decoration-color: rgba(56, 189, 248, 0.4);
    text-underline-offset: 3px;
    word-break: break-word;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.msg-text-content a:hover,
.msg a:hover {
    color: #7dd3fc;
    text-decoration-color: #38bdf8;
}

/* Images inside responses — base (also used as fallback for stray img tags) */
.msg img {
    max-width: 100%;
    border-radius: 12px;
    margin-top: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    display: block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ---- GENERATED IMAGE CARD ---- */
.chat-generated-img-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 12px 0 4px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #0a0a0a;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.chat-generated-img-container:hover {
    transform: scale(1.015);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
}

.chat-generated-img {
    display: block;
    max-width: 100%;
    width: 100%;
    min-height: 60px;
    border-radius: 14px;
    object-fit: cover;
}

.chat-img-error {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    color: #888888;
    font-size: 0.9rem;
    min-height: 120px;
    text-align: center;
}

.chat-img-error span:first-child {
    font-size: 2.5rem;
}

.chat-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 16px 12px 10px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    letter-spacing: 0.03em;
}

.chat-generated-img-container:hover .chat-img-overlay {
    opacity: 1;
}

.msg audio {
    margin-top: 12px;
    width: 100%;
    border-radius: 20px;
}

/* ---- LOADING INDICATOR ---- */
.msg.loading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 24px;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a5b4fc;
    animation: bounce 1.4s infinite ease-in-out both;
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; }
    40% { transform: scale(1.1); opacity: 1; }
}

/* ---- INPUT BAR (BARRA INFERIOR) ---- */
.input-bar {
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #0a0a0a;
    padding: 14px 24px;
    gap: 10px;
    flex-shrink: 0;
}

.input-bar input {
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 13px 18px;
    background: #111111;
    color: #f0f0f0;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition-smooth);
}

.input-bar input::placeholder {
    color: #444444;
}

.input-bar input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: #161616;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Botón de Enviar */
.input-bar button[type="submit"],
.input-bar button#send-btn,
#submit-btn {
    background: #050508 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 13px 22px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    font-family: inherit !important;
    transition: var(--transition-smooth) !important;
    white-space: nowrap !important;
    box-shadow: 0 3px 15px rgba(139, 92, 246, 0.35) !important;
    letter-spacing: 0.01em !important;
}

.input-bar button[type="submit"]:hover,
.input-bar button#send-btn:hover,
#submit-btn:hover {
    background: #050508 !important;
    border: none !important;
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.55) !important;
    transform: translateY(-1px) !important;
}

.input-bar button[type="submit"]:active,
#submit-btn:active {
    transform: translateY(0) !important;
    background: #c0c0c0 !important;
}

/* Botones secundarios (micrófono, adjuntar, etc.) */
.mic-btn {
    background: #111111 !important;
    color: #707070 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    box-shadow: none !important;
    transition: var(--transition-smooth) !important;
}

.mic-btn:hover {
    background: #1e1e1e !important;
    color: #f0f0f0 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.mic-btn.listening {
    background: #2a2a2a !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    animation: pulseMic 1.5s infinite;
}

@keyframes pulseMic {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Selector de modelo local */
.input-bar select {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 13px 14px;
    background: #111111;
    color: #f0f0f0;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.input-bar select:focus {
    border-color: rgba(255, 255, 255, 0.45);
    background: #161616;
}

@media (max-width: 1024px) {
    .app-wrapper {
        padding: 8px;
        gap: 8px;
    }
    .sidebar {
        border-radius: 16px;
    }
    .main-area {
        border-radius: 16px;
    }
}

/* Drawer overlay global */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(3, 7, 18, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.drawer-overlay.active {
    opacity: 1;
    pointer-events: all;
}

@media (max-width: 768px) {
    /* Mostrar botón de menú en el header */
    #sidebar-toggle-btn {
        display: block !important;
    }
    
    .sidebar {
        width: 70px;
        overflow: hidden;
    }
    
    /* El Sidebar derecho ahora es un drawer deslizante premium (Reglas movidas a la configuración global) */
    #close-history-btn {
        display: block !important;
    }
    
    .sidebar-header h2, .sidebar-header .badge,
    .tools-nav h3, .sidebar-footer,
    .tool-btn span { display: none; }
    
    /* Forzar que el título de historial del drawer sea visible */
    .sidebar-right .sidebar-header h2 {
        display: block !important;
    }

    .tool-btn {
        text-align: center;
        font-size: 1.3rem;
        padding: 14px 0;
        justify-content: center;
    }

    .msg { max-width: 100%; width: 100%; box-sizing: border-box; }
    .input-bar {
        padding: 8px 6px !important;
        gap: 6px !important;
    }
    .input-bar input {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
    }
    .mic-btn {
        padding: 10px 12px !important;
        font-size: 1rem !important;
    }
    .input-bar button[type="submit"],
    .input-bar button#send-btn,
    #submit-btn {
        padding: 10px 14px !important;
        font-size: 0.9rem !important;
    }
    .send-group {
        gap: 4px !important;
    }
}

@media (max-width: 480px) {
    .sidebar { display: none !important; }
    .messages, .result-area { padding: 14px 14px 96px 14px !important; scroll-padding-bottom: 96px !important; }
    .msg { padding: 14px 16px !important; border-radius: 16px !important; font-size: 0.96rem !important; }
}

/* ==========================================================================
   ELEMENTOS DE INTERFAZ ANTIGRAVITY 2.0 (ESTADO, CONSOLA EN VIVO, ACCIONES)
   ========================================================================== */

/* Orbe LED e Indicador de Estado */
.status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 99px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.status-orb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.pulse-green {
    background-color: #ffffff !important;
    box-shadow: 0 0 12px #ffffff !important;
    animation: orbPulseGreen 2s infinite;
}

.pulse-purple {
    background-color: #a0a0a0 !important;
    box-shadow: 0 0 12px #a0a0a0 !important;
    animation: orbPulsePurple 1s infinite alternate;
}

@keyframes orbPulseGreen {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 14px rgba(255, 255, 255, 1);
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    }
}

@keyframes orbPulsePurple {
    0% {
        transform: scale(0.85);
        box-shadow: 0 0 4px rgba(160, 160, 160, 0.4);
    }
    100% {
        transform: scale(1.2);
        box-shadow: 0 0 18px rgba(160, 160, 160, 1);
    }
}

.status-text {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.status-text.active {
    color: #ffffff !important;
}

.status-text.processing {
    color: #a0a0a0 !important;
    animation: textFlash 1.5s infinite;
}

@keyframes textFlash {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Consola de Eventos en Vivo (Sidebar Widget) */
.sidebar-terminal {
    margin: 8px 16px 16px;
    background: rgba(12, 8, 4, 0.9) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 160px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.terminal-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.terminal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.terminal-dot.red { background: #333333 !important; }
.terminal-dot.yellow { background: #555555 !important; }
.terminal-dot.green { background: #888888 !important; }

.terminal-title {
    font-size: 0.65rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: 6px;
}

.event-logs {
    flex: 1;
    padding: 10px;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 0.68rem;
    line-height: 1.4;
    overflow-y: auto;
    color: #9ca3af;
    display: flex;
    flex-direction: column;
    gap: 4px;
    word-break: break-all;
}

/* Estilos de líneas de log especiales */
.log-line {
    border-left: 2px solid #4b5563;
    padding-left: 6px;
}

.log-write {
    color: #a855f7;
    border-left-color: #a855f7;
}

.log-cmd {
    color: #a855f7;
    border-left-color: #a855f7;
}

.log-error {
    color: #f87171;
    border-left-color: #f87171;
    background: rgba(248, 113, 113, 0.05);
}

.log-system {
    color: #34d399;
    border-left-color: #34d399;
}

.header-left {
    display: flex;
    flex-direction: column;
}

/* Título Interactivo y Menú Desplegable Glassmorphic */
#tool-title {
    transition: color 0.3s ease;
    position: relative;
}

#tool-title:hover {
    color: var(--color-primary);
}

.title-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: rgba(11, 15, 25, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.02);
    z-index: 1000;
    min-width: 280px;
    overflow: hidden;
    padding: 8px;
    animation: dropdownFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-main);
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-smooth);
    gap: 12px;
    text-align: left;
}

.dropdown-item:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.15);
    color: #fff;
}

.dropdown-item:disabled {
    cursor: not-allowed;
}

.item-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.3));
}

.item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-text strong {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
}

.item-text span {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
}

.title-chevron-rotate {
    transform: rotate(180deg);
}

.header-action-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.05);
}

.header-action-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

#sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important;
}

.header-action-btn:active {
    transform: translateY(0);
}

/* Ajustes Premium de Carga en Burbuja */
.msg.loading {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 250px;
}

.loading-dots {
    display: flex;
    gap: 4px;
}

.loading-text {
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 500;
    font-style: italic;
    animation: pulseText 2s infinite alternate;
}

@keyframes pulseText {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Microborde Brillante en Módulos y Paneles */
.sidebar, .main-area, .msg.bot {
    position: relative;
}

.sidebar::after, .main-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    border: 1px solid #222222 !important;
    pointer-events: none;
}

/* ---- ReAct Reasoning & Chain of Thought Steps ---- */
details.react-step {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin: 12px 0;
    padding: 12px 16px;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

details.react-step:hover {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(15, 23, 42, 0.6);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.05);
}

details.react-step[open] {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(15, 23, 42, 0.7);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.08);
}

details.react-step summary {
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    outline: none;
    user-select: none;
    padding: 4px 0;
    transition: var(--transition-smooth);
}

details.react-step summary:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}

/* Custom indicator for summary */
details.react-step summary::-webkit-details-marker {
    color: var(--color-secondary);
}

details.react-step p {
    margin-top: 10px;
    color: var(--text-muted);
}

details.react-step pre {
    background: #020617 !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-top: 8px;
    margin-bottom: 4px;
    overflow-x: auto;
    max-height: 250px;
}

details.react-step pre code {
    color: #a855f7;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ===================== ESTILOS DE SUBIDA Y ARCHIVOS ADJUNTOS ===================== */

/* Barra de previsualización de subida */
.upload-preview-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 32px;
    background: rgba(11, 15, 25, 0.4);
    border-top: 1px solid var(--glass-border);
    align-items: center;
    overflow-x: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: slideIn 0.3s ease-out;
}

/* Píldora/Chip de previsualización */
.upload-preview-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--text-main);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: var(--transition-smooth);
    max-width: 220px;
    overflow: hidden;
}

.upload-preview-pill.loading {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 0.7;
}

.upload-preview-pill.loading .pill-icon {
    display: inline-block;
    animation: spin 1s infinite linear;
}

/* 2026-09-01 -- pedido del dueño: en iPhone, al arrastrar una captura de pantalla al
   chat, la miniatura local (FileReader) aparecía YA lista casi al instante, mientras
   la subida real al servidor seguía en curso de fondo -- el chip se veía "adjuntado"
   sin estarlo de verdad, y si la subida se colgaba, el mensaje se enviaba solo, sin
   avisar. Este anillo giratorio queda SIEMPRE visible sobre la miniatura mientras el
   chip tenga la clase .loading, sin importar qué imagen ya se haya pintado adentro. */
.upload-preview-pill.loading .pill-thumb-box {
    position: relative;
}
.upload-preview-pill.loading .pill-thumb-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(5, 5, 15, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #c084fc;
    border-right-color: #c084fc;
    box-sizing: border-box;
    animation: spin 0.8s linear infinite;
    pointer-events: none;
}

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

.upload-preview-pill.success {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.08);
}

.upload-preview-pill.error {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
}

.pill-name {
    display: none !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;
    font-weight: 500;
}

.pill-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: var(--transition-smooth);
    border-radius: 4px;
}

.pill-remove:hover {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.1);
}

/* Contenedor de adjuntos en burbujas de chat */
.msg-attachments-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    max-width: 100%;
}

.attachment-bubble-item {
    border-radius: 12px;
    overflow: visible;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--transition-smooth);
    max-width: 320px;
    touch-action: pan-y;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    .attachment-bubble-item:hover {
        border-color: rgba(139, 92, 246, 0.3);
        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.1);
        transform: translateY(-1px);
    }
}

/* Imagen adjunta en chat */
.chat-attachment-img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
    cursor: pointer;
    transition: var(--transition-smooth);
    border-radius: 10px;
    touch-action: pan-y;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    .chat-attachment-img:hover {
        transform: scale(1.015);
    }
}

/* Link de descarga de archivos */
.attachment-file-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
}

.attachment-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.1));
}

.attachment-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.attachment-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.attachment-size {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==========================================================================
   OPTIMIZACIONES ULTRA RESPONSIVAS PARA MÓVIL (IPHONE/SAFARI)
   ========================================================================== */

@media (max-width: 580px) {
    #tool-desc {
        display: none !important; /* Ocultar descripción pesada en celular */
    }
    .header-right {
        gap: 6px !important;
    }
    
    /* Botones de acción del header: ocultar texto, mostrar solo emojis para ahorrar espacio */
    .header-action-btn {
        padding: 8px 12px;
        font-size: 1.05rem;
    }
    .header-action-btn span {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Ocultar barra lateral en dispositivos pequeños */
    .sidebar {
        display: none !important;
    }
    
    /* Optimizar márgenes de app-wrapper */
    .app-wrapper {
        padding: 0;
        gap: 0;
        height: 100vh;
        height: 100dvh; /* 2026-09-27: ver comentario en body{} -- esta es la
            regla que de verdad manda en el iPhone (pantalla <=480px). */
    }
    .main-area {
        border-radius: 0;
        border: none;
        height: 100vh;
        height: 100dvh;
    }
    
    /* Mensajes de borde a borde */
    .messages, .result-area {
        padding: 10px 8px;
        gap: 12px;
    }
    
    .msg {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        font-size: 0.9rem;
    }
    
    /* OPTIMIZACIÓN EXTREMA DE LA BARRA DE ENTRADA (MOBILE INPUT BAR) */
    .input-bar {
        padding: 8px 10px;
        gap: 6px;
        background: rgba(3, 7, 18, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        width: 100%;
        box-sizing: border-box;
    }
    
    .input-bar input {
        padding: 10px 14px;
        font-size: 0.85rem;
        border-radius: 12px;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Botones de entrada compactos y uniformes */
    .mic-btn {
        padding: 10px 12px !important;
        font-size: 1.1rem !important;
        border-radius: 12px !important;
        min-width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* El botón Enviar pasa a ser un elegante botón circular 🚀 en móvil */
    .input-bar button[type="submit"] {
        padding: 10px 12px !important;
        font-size: 1.15rem !important;
        border-radius: 12px !important;
        min-width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .input-bar button[type="submit"] span {
        display: none !important; /* Ocultar palabra "Enviar" para que no corte la interfaz */
    }
    
    /* Ajustes para previsualización de subida en celular */
    .upload-preview-bar {
        padding: 6px 12px;
        gap: 6px;
    }
    .upload-preview-pill {
        max-width: 140px;
        padding: 4px 8px;
        font-size: 0.75rem;
        border-radius: 8px;
    }
}

/* ==========================================================================
   INTERFAZ DE EDICIÓN DE MENSAJES Y BOTÓN DE CANCELACIÓN (ANTIGRAVITY 3.0)
   ========================================================================== */

.msg.user {
    position: relative;
}

.msg.bot {
    position: relative;
}

/* ==========================================================================
   2026-09-27 -- AGRUPACIÓN VISUAL DE MENSAJES INYECTADOS EN CALIENTE (FUSIONADOS)
   Pedido del dueño: mantener la respuesta fusionada (ahorra tokens) pero que
   se entienda de un vistazo que UNA sola respuesta cubre TODOS los mensajes
   que mandó seguidos. Se marca desde addMsg() en monica_app.js cuando detecta
   2+ burbujas "Tú" consecutivas justo antes de pintar la respuesta.
   ========================================================================== */
.msg.user.msg-fusion-member {
    margin-bottom: 3px !important;
}

.msg.user.msg-fusion-member--linked {
    position: relative;
}

.msg.user.msg-fusion-member--linked::after {
    content: '';
    position: absolute;
    right: 22px;
    bottom: -8px;
    width: 2px;
    height: 8px;
    background: rgba(167, 139, 250, 0.45);
    pointer-events: none;
}

.msg.bot.msg-fusion-reply {
    margin-top: 2px !important;
}

.msg-fusion-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 20px;
    width: fit-content;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.msg-fusion-tag:hover,
.msg-fusion-tag:focus-visible {
    background: rgba(139, 92, 246, 0.26);
    border-color: rgba(167, 139, 250, 0.55);
}

.msg-fusion-tag:active {
    background: rgba(139, 92, 246, 0.34);
}

/* Contenedor de acciones por mensaje (Responder, Copiar, Editar) */
.msg-actions-hover {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
    touch-action: pan-y !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.msg:hover .msg-actions-hover {
    opacity: 1;
}

/* Estilo común de botones de acción de mensaje (Responder, Copiar, Escuchar, Traducir, Editar)
   2026-10-19 (pedido del dueño): "hendiduras en el marco" -- pocillos hundidos con
   sombra interior e iconos SVG finos (currentColor), en vez de emojis grandes. */
.msg-action-btn {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.06);
    color: rgba(203, 213, 225, 0.55);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    touch-action: pan-y !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.msg-action-btn svg {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.msg-action-btn .msg-action-lang {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    pointer-events: none;
}

.msg-action-btn .msg-action-spin {
    animation: msg-action-spin 0.8s linear infinite;
}

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

.msg-action-btn:hover,
.msg-action-btn:focus-visible {
    color: #e9d5ff;
    background: rgba(76, 29, 149, 0.28);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        inset 0 0 6px rgba(168, 85, 247, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.06);
    outline: none;
}

.msg-action-btn:active {
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.75),
        0 1px 0 rgba(255, 255, 255, 0.05);
}

/* En la burbuja del usuario (fondo de color) la hendidura se oscurece un poco más */
.msg.user .msg-action-btn {
    background: rgba(0, 0, 0, 0.22);
    color: rgba(255, 255, 255, 0.7);
}

/* Optimización responsiva en dispositivos móviles: botones siempre visibles (sin hover) */
@media (max-width: 768px) {
    .msg-actions-hover {
        opacity: 0.85;
        gap: 6px;
        touch-action: pan-y !important;
    }

    .msg-action-btn {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        padding: 0;
        touch-action: pan-y !important;
        transform: none !important;
    }
}

/* ==========================================================================
   RESPONDER A UN MENSAJE (estilo WhatsApp/Messenger)
   ========================================================================== */

/* Barra de vista previa mostrada sobre el input mientras se compone una respuesta */
#reply-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-left: 3px solid #8b5cf6;
    border-radius: 10px;
    padding: 8px 12px;
    /* 2026-08-30 -- ahora vive DENTRO de #chat-form (flex en columna con gap 8px),
       ver renderReplyPreview: sin margen propio y a ancho completo, si no se sale
       del compositor fijo o deja un hueco doble sobre el textarea. */
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    animation: slideIn 0.2s ease both;
}

.reply-preview-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.reply-preview-who {
    font-size: 0.72rem;
    font-weight: 700;
    color: #a855f7;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.reply-preview-snippet {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-preview-cancel {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.reply-preview-cancel:hover {
    background: rgba(239, 68, 68, 0.15);
    transform: scale(1.1);
}

/* Cita mostrada dentro de una burbuja que responde a otro mensaje */
.msg-reply-quote {
    display: block;
    background: rgba(139, 92, 246, 0.10);
    border-left: 3px solid #8b5cf6;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.msg-reply-quote:hover {
    background: rgba(139, 92, 246, 0.2);
}

.msg-reply-quote-who {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #a855f7;
    margin-bottom: 2px;
}

.msg-reply-quote-snippet {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-reply-quote-highlight {
    animation: replyHighlightFlash 1.2s ease;
}

@keyframes replyHighlightFlash {
    0% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.7); }
    100% { box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
}

.msg-resaltado-aviso {
    animation: msgAvisoResaltarPulse 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    z-index: 10;
}

@keyframes msgAvisoResaltarPulse {
    0% {
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.95), 0 0 24px rgba(239, 68, 68, 0.75);
        transform: scale(1.02);
    }
    20% {
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 1), 0 0 30px rgba(239, 68, 68, 0.85);
        transform: scale(1.025);
    }
    45% {
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.7), 0 0 20px rgba(239, 68, 68, 0.5);
        transform: scale(1.01);
    }
    70% {
        box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.45), 0 0 12px rgba(239, 68, 68, 0.3);
        transform: scale(1.005);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 0 0 rgba(239, 68, 68, 0);
        transform: scale(1);
    }
}


/* Contenedor del Editor Inline */
.msg-edit-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 260px;
    margin-top: 4px;
}

.msg-edit-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 48vh;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 12px;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    overflow-y: auto;
    transition: var(--transition-smooth);
}

.msg-edit-textarea:focus {
    border-color: #a855f7;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
    background: rgba(14, 16, 28, 0.7);
}

.msg-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.edit-action-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
    border: none;
}

.edit-action-btn.save {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.edit-action-btn.save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.edit-action-btn.cancel {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
}

.edit-action-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Botón de Enviar en estado de carga (Cancelador) */
.input-bar button.loading-state {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    min-width: 90px;
    height: 48px;
}

.input-bar button.loading-state:hover {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25) !important;
}

/* Círculo circular en móvil para cancelar */
@media (max-width: 480px) {
    .input-bar button.loading-state {
        min-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }
}

/* Tres puntos cargadores */
.cancel-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.c-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    animation: c-bounce 1.4s infinite ease-in-out both;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

.c-dot:nth-child(2) { animation-delay: 0.2s; }
.c-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes c-bounce {
    0%, 80%, 100% { transform: scale(0.65); opacity: 0.4; }
    40% { transform: scale(1.3); opacity: 1; }
}

/* =====================================================================
   🎬 ESTUDIO DE VIDEO IA PREMIUM
   ===================================================================== */
.video-studio-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    height: 100%;
    align-items: stretch;
    margin-top: 10px;
}

.studio-controls-card,
.studio-preview-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

.studio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.studio-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Modo de Generación & Duración */
.studio-mode-selector,
.studio-duration-selector {
    display: flex;
    gap: 10px;
}

.mode-pill,
.duration-pill {
    flex: 1;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
    text-align: center;
}

.mode-pill:hover,
.duration-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
}

.mode-pill.active,
.duration-pill.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15), inset 0 0 10px rgba(139, 92, 246, 0.1);
}

/* Tarjetas de Estilo */
.studio-style-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.style-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    user-select: none;
}

.style-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.style-card.active {
    background: rgba(139, 92, 246, 0.08);
    border-color: var(--color-primary);
    box-shadow: inset 0 0 12px rgba(139, 92, 246, 0.1), 0 0 15px rgba(139, 92, 246, 0.05);
}

.style-icon {
    font-size: 1.6rem;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.3));
}

.style-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.style-card.active .style-name {
    color: #fff;
}

/* Zona de Carga / Drop Zone */
.studio-drop-zone {
    background: rgba(0, 0, 0, 0.15);
    border: 2px dashed rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    min-height: 120px;
}

.studio-drop-zone:hover,
.studio-drop-zone.dragover {
    border-color: var(--color-primary);
    background: rgba(139, 92, 246, 0.04);
}

.studio-drop-zone.uploading {
    border-color: var(--color-primary);
    animation: studio-neon-pulse 2s infinite ease-in-out;
}

@keyframes studio-neon-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.2); }
    50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); }
}

.drop-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 8px rgba(245,158,11,0.2));
}

.drop-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.drop-subtext {
    font-size: 0.7rem;
    color: var(--text-dark);
    margin-top: 4px;
}

.studio-image-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #05050c;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
}

.studio-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.remove-preview-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    line-height: 1;
}

.remove-preview-btn:hover {
    background: #ef4444;
    border-color: transparent;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    transform: scale(1.05);
}

/* Textarea */
#panel-video-studio textarea {
    width: 100%;
    height: 100px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    resize: none;
    transition: var(--transition-smooth);
    line-height: 1.4;
}

#panel-video-studio textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

/* Botón Generar */
.studio-generate-btn {
    width: 100%;
    background: linear-gradient(135deg, #8b5cf6 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
    text-align: center;
    margin-top: 10px;
}

.studio-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4);
}

.studio-generate-btn:active {
    transform: translateY(0);
}

/* Empty State */
.studio-empty-preview {
    flex: 1;
    border: 1px dashed var(--glass-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    color: var(--text-dark);
    gap: 16px;
    background: rgba(255, 255, 255, 0.01);
    min-height: 400px;
}

.empty-icon {
    font-size: 3.5rem;
    opacity: 0.25;
    animation: studio-float-anim 5s ease-in-out infinite;
}

@keyframes studio-float-anim {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Progress Container */
.studio-progress-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 400px;
}

.studio-progress-track {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 99px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    margin-bottom: 16px;
}

.studio-progress-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #8b5cf6, #8b5cf6);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
}

.studio-progress-percentage {
    font-size: 2.2rem;
    font-weight: 800;
    font-family: 'Fira Code', monospace;
    color: var(--color-primary);
    text-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
    margin-bottom: 32px;
}

/* Logs de Pasos */
.studio-steps-logs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
}

.step-log-item {
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0.3;
    transition: var(--transition-smooth);
}

.step-log-item.active {
    opacity: 1;
    color: #fff;
}

.step-log-item.done {
    opacity: 1;
    color: #34d399;
}

.step-bullet {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: var(--transition-smooth);
}

.step-log-item.done .step-bullet {
    background: #34d399;
    border-color: transparent;
    color: #030712;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}

.step-label {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Player Container */
.studio-player-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 400px;
}

.studio-player-actions {
    display: flex;
    gap: 12px;
}

.studio-action-btn {
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
    border: none;
}

.studio-action-btn.download {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.3);
}

.studio-action-btn.download:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.45);
}

.studio-action-btn.download:active {
    transform: translateY(0);
}

.studio-action-btn.cloud {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border: 1px solid var(--glass-border);
}

.studio-action-btn.cloud:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(255,255,255,0.05);
}

/* Estado activo del toggle */
.active-mode {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Media Queries Responsivas */
@media (max-width: 900px) {
    .video-studio-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .studio-style-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Micro-animación premium de pulso al alternar motor */
@keyframes pulse-cyan {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4), inset 0 0 0 0 rgba(139, 92, 246, 0.2);
        background: rgba(139, 92, 246, 0.25);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(139, 92, 246, 0), inset 0 0 10px rgba(139, 92, 246, 0);
        background: rgba(139, 92, 246, 0.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0), inset 0 0 0 0 rgba(139, 92, 246, 0);
        background: rgba(139, 92, 246, 0);
    }
}

/* ==========================================================================
   ESTILOS PREMIUM PARA SECCIÓN DE HERRAMIENTAS Y HABILIDADES AUTOPROGRAMABLES
   ========================================================================== */

/* Sub-pestañas internas (pastillas/pills style) */
.sub-tabs-container {
    display: flex;
    padding: 2px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin: 8px 12px 14px;
    gap: 4px;
}

.sub-tab-pill {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    padding: 8px 6px;
    cursor: pointer;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 10px;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sub-tab-pill:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
}

.sub-tab-pill.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #fff;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

/* Tarjeta de Habilidad */
.skill-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: var(--transition-smooth);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, #8b5cf6, #8b5cf6);
    opacity: 0.6;
}

.skill-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(139, 92, 246, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.1);
}

.skill-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.skill-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.skill-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.5));
    animation: rotateGear 12s infinite linear;
}

@keyframes rotateGear {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.skill-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.skill-size {
    font-size: 0.7rem;
    color: var(--text-dark);
    font-family: 'Fira Code', monospace;
}

.skill-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.skill-functions-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.skill-functions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.skill-function-badge {
    font-family: 'Fira Code', monospace;
    font-size: 0.68rem;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    padding: 3px 8px;
    border-radius: 6px;
    transition: var(--transition-smooth);
}

.skill-function-badge:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
}

/* Cruceta de Añadir Habilidad */
.add-skill-card {
    background: rgba(0, 0, 0, 0.15);
    border: 1px dashed var(--glass-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    min-height: 60px;
    gap: 8px;
    user-select: none;
    margin-top: 6px;
}

.add-skill-card:hover {
    border-color: var(--color-primary);
    background: rgba(139, 92, 246, 0.02);
}

.add-skill-trigger {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, border-color 0.2s;
}

.add-skill-card:hover .add-skill-trigger {
    transform: rotate(90deg);
    border-color: var(--color-primary);
    background: var(--color-gradient);
    color: #fff;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.add-skill-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.add-skill-card:hover .add-skill-text {
    color: #fff;
}

/* Formulario de Agregar Habilidad */
.add-skill-form {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(11, 15, 25, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    margin-top: 10px;
    animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.add-skill-form label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.add-skill-form input,
.add-skill-form textarea {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    outline: none;
    transition: var(--transition-smooth);
}

.add-skill-form input:focus,
.add-skill-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.15);
}

.add-skill-form textarea {
    height: 60px;
    resize: none;
}

.add-skill-submit-btn {
    background: var(--color-gradient);
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    font-family: inherit;
    transition: var(--transition-smooth);
}

.add-skill-submit-btn:hover {
    background: var(--color-gradient-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Terminal de Búsqueda de Habilidades */
.terminal-search-console {
    background: #020617;
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.7rem;
    color: #a855f7;
    padding: 12px;
    height: 120px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 4px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
    margin-top: 10px;
    line-height: 1.4;
}

/* Botón "¿Deseas que la desarrollemos?" */
.develop-skill-box {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

.develop-skill-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
    font-family: inherit;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 16px rgba(217, 70, 239, 0.3);
}

.develop-skill-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(217, 70, 239, 0.5);
    background: linear-gradient(135deg, #f43f5e 0%, #8b5cf6 100%);
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION & INTERACTIVE OPTIONS (COSMIC UPDATE)
   ========================================================================== */

/* Bottom Navigation Bar (Woodland Premium Executive) */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.97);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-top: 1px solid rgba(139, 92, 246, 0.2);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 0 20px 0;
    z-index: 1000;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.7);
}

.bottom-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    flex: 1;
    min-width: 0;
    padding: 4px 2px;
}

.bottom-nav-btn.active, .bottom-nav-btn:hover {
    color: #ffffff;
    text-shadow: none;
}

.bottom-nav-btn .nav-icon {
    font-size: 1.4rem;
    margin-bottom: 2px;
    transition: var(--transition-smooth);
}

/* Iconos de la barra de navegación: blancos/neutros por defecto, brillo violeta al hacer hover/activo */
.bottom-nav-btn:not(#nav-btn-chats) .nav-icon {
    filter: none !important;
    opacity: 0.6;
}

.bottom-nav-btn:not(#nav-btn-chats).active .nav-icon,
.bottom-nav-btn:not(#nav-btn-chats):hover .nav-icon {
    filter: none !important;
    opacity: 1;
    transform: translateY(-2px);
}

/* La Mónica Pelirroja se queda en color natural premium con su piel blanca y pecas */
#nav-btn-chats .nav-icon {
    filter: none !important;
    opacity: 1 !important;
}

#nav-btn-chats.active .nav-icon, 
#nav-btn-chats:hover .nav-icon {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.6)) !important;
}

/* ==========================================================================
   ESTILOS PREMIUM PARA LA LISTA VERTICAL DE HERRAMIENTAS (TOOLS PANEL)
   ========================================================================== */
.sidebar-tools-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 24px;
}

.tool-btn-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.tool-btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--color-gradient);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tool-btn-premium:hover {
    background: rgba(10, 10, 10, 0.95);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15);
}

.tool-btn-premium:hover::before {
    opacity: 1;
}

.tool-btn-icon {
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.tool-btn-premium:hover .tool-btn-icon {
    transform: scale(1.1) rotate(5deg);
}

.tool-btn-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tool-btn-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
}

.tool-btn-desc {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.bottom-nav-btn.new-chat {
    color: #ffffff;
}

.bottom-nav-btn.new-chat .nav-icon {
    background: linear-gradient(135deg, #ef4444, #7e22ce);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
    margin-top: -14px;
    margin-bottom: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bottom-nav-btn.new-chat:hover .nav-icon {
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.9);
    background: linear-gradient(135deg, #d8b4fe, #9333ea);
}

.bottom-nav-btn.delete-chat .nav-icon {
    color: #f43f5e;
    filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.3));
}

.bottom-nav-btn.delete-chat:hover .nav-icon {
    filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.8));
}

/* Fix main area for bottom nav */
.main-area {
    padding-bottom: 84px !important; /* Space for bottom nav */
    background: var(--bg-primary) !important;
}

/* Hide static sidebars explicitly for the app-only interface */
.sidebar {
    display: none !important;
}

.sidebar-right {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100%;
    height: 100dvh; /* 2026-09-27 -- BUG REAL reportado por el dueño con captura:
        una tarjeta de chat (la del cajón de historial, #sessions-list) se
        asomaba justo debajo de la barra de escribir, "se traba y me tironea"
        al pasar el dedo cerca. Causa: este cajón está cerrado con
        `transform: translateY(100%)`, y ese 100% se calcula sobre la altura
        DEL PROPIO ELEMENTO (`height: 100%` de un position:fixed = ligado al
        viewport GRANDE de Safari, con la barra colapsada). En cuanto el dedo
        toca la pantalla y la barra de Safari/PWA cambia de alto, el viewport
        real encoge y el cajón -- calculado para el viewport grande -- ya no
        baja lo suficiente: se queda asomando su primera tarjeta. 100dvh seguía
        el viewport real, así que translateY(100%) siempre lo manda
        completamente fuera de la pantalla visible.
        (Ver el mismo problema resuelto en .app-wrapper/.main-area/body arriba.) */
    max-height: 100%;
    width: 100%;
    z-index: 1001;
    background: rgba(18, 12, 26, 0.98) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-left: none;
    border-radius: 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(139, 92, 246, 0.05);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateY(100%);
    will-change: transform;
    /* 2026-08-14: position:fixed + backdrop-filter + una lista larga que hace scroll
       adentro (el historial de chats, #tab-history-content) es la MISMA combinacion
       que ya causaba un glitch de repintado conocido de WebKit/Safari iOS en
       #monica-modal-nav (buscar ese id para ver el reporte original: capturas con 1s
       de diferencia, mismo contenido, un hueco en blanco arriba una vez si y otra no).
       Este es el cajon que mas se abre de toda la app (es el historial de 300+
       chats), asi que vale la pena el mismo blindaje aunque aca nadie lo haya
       reportado todavia. */
    overscroll-behavior: contain;
}

.sidebar-right.open {
    transform: translateY(0);
}

#close-history-btn {
    display: block !important;
    color: var(--color-primary) !important;
    text-shadow: none !important;
}

/* Interactive Ask Options */
.ask-options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    border: 1px solid var(--glass-border);
}

.ask-option-btn {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #f8fafc !important;
    padding: 12px 20px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    font-family: inherit !important;
    font-size: 0.94rem !important;
    font-weight: 650 !important;
    cursor: pointer !important;
    touch-action: pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.ask-option-btn.is-touch-active {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38bdf8 !important;
    transform: scale(0.97) !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.4) !important;
}

.ask-option-btn:hover {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.3) !important;
}

/* 2026-08-29 -- pedido del dueño: cuando el asistente entrega varias opciones,
   una puede venir marcada como su recomendación (el texto de la opción empieza
   con "*"). Esa se resalta y lleva la etiqueta "Recomendado"; al tocarla se
   envía el texto limpio, sin el "*" ni la palabra "Recomendado". */
.ask-option-btn--rec {
    background: rgba(0, 255, 255, 0.12);
    border-color: var(--color-primary);
    color: var(--text-main);
    font-weight: 700;
    order: -1; /* la recomendada siempre primero, aunque no venga primera */
}

.ask-option-btn--rec:hover {
    background: rgba(0, 255, 255, 0.2);
    box-shadow: 0 4px 14px rgba(0, 255, 255, 0.28);
}

.ask-option-btn.is-selected {
    background: rgba(0, 255, 255, 0.25) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-main) !important;
    box-shadow: 0 0 16px rgba(0, 255, 255, 0.45) !important;
}

/* 2026-09-28 -- pedido del dueño: botón fijo "✍️ Escribir otra respuesta" al
   final de todo menú <opciones>, para cuando ninguno de los botones sirve. A
   diferencia de los demás, NO envía nada solo (ver _opcEscribirPersonalizado
   en monica_app.js) -- por eso lleva un estilo visualmente distinto (borde
   punteado, más discreto) para que no se confunda con una opción real. */
.ask-option-btn--custom, .ask-option-btn--attach {
    background: rgba(15, 23, 42, 0.4) !important;
    border: 1.5px dashed rgba(148, 163, 184, 0.5) !important;
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.ask-option-btn--custom:hover, .ask-option-btn--attach:hover {
    background: rgba(30, 41, 59, 0.6) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    color: #f8fafc !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 2026-09-28 -- al tocar "✍️ Escribir otra respuesta", el botón se convierte EN
   SITIO en un campo de texto + botón enviar (pedido explícito del dueño: "que
   yo pueda escribir directamente en ese botón"), igual que la edición inline
   de un mensaje en cola. */
.ask-option-btn--custom-editing {
    cursor: default !important;
    border-style: solid !important;
    border-color: var(--color-primary) !important;
    background: rgba(15, 23, 42, 0.9) !important;
    padding: 6px 6px 6px 14px !important;
    gap: 8px !important;
}

.ask-option-custom-textbox {
    flex: 1 1 auto;
    min-width: 90px;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #f8fafc !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    padding: 4px 0 !important;
}

.ask-option-custom-send,
.ask-option-custom-cancel {
    flex: 0 0 auto;
    border: none !important;
    border-radius: 10px !important;
    width: 34px;
    height: 34px;
    min-height: 34px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ask-option-custom-send {
    background: var(--color-primary) !important;
    color: #04202a !important;
}

.ask-option-custom-cancel {
    background: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
}

.ask-rec-badge {
    background: var(--color-primary);
    color: #04202a;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.ask-option-custom {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}

/* ==========================================================================
   SELECCIÓN MÚLTIPLE DE <opciones> (2026-09-27, pedido del dueño)
   Cuando un mismo mensaje trae VARIOS menús de opciones (respuesta
   multi-agente: "[1/3]", "[2/3]"...), tocar una opción ya no envía de
   inmediato: se marca (radio, 1 por grupo) y aparece la barra de abajo con
   "Enviar selección", que arma un solo mensaje combinado. Ver _opcActivar /
   parseCustomMarkdown en monica_app.js. Con un solo menú (el caso normal),
   nada de esto se activa y el toque sigue enviando al instante.
   ========================================================================== */
.ask-options-container--multi .ask-option-btn {
    position: relative;
    padding-left: 40px !important;
}
.ask-options-container--multi .ask-option-btn::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(56, 189, 248, 0.55);
    background: rgba(0, 0, 0, 0.25);
    transition: all 0.15s ease;
}
.ask-options-container--multi .ask-option-btn.is-selected::before {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}
.ask-options-container--multi .ask-option-btn.is-selected::after {
    content: '✓';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 900;
    color: #04202a;
}

.multi-opc-confirm-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(0, 255, 255, 0.06);
    border: 1px dashed rgba(0, 255, 255, 0.3);
    border-radius: 14px;
}
.multi-opc-confirm-hint {
    font-size: 0.82rem;
    color: var(--text-dim, #9ca3af);
    flex: 1 1 auto;
}
.multi-opc-confirm-btn {
    background: var(--color-primary) !important;
    color: #04202a !important;
    border: none !important;
    padding: 12px 22px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    cursor: pointer !important;
    touch-action: manipulation;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(0, 255, 255, 0.3) !important;
}
.multi-opc-confirm-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.multi-opc-confirm-btn:not(:disabled):active {
    transform: scale(0.95) !important;
}

.ask-option-custom input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px 14px;
    color: #fff;
    font-family: inherit;
    outline: none;
}

.ask-option-custom input:focus {
    border-color: var(--color-primary);
}

.ask-option-custom button {
    background: var(--color-gradient);
    border: none;
    color: #fff;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- PREMIUM LIGHTBOX MODAL (2026-09-26 Redesign) ---- */
.lightbox-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(5, 5, 10, 0.95) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    z-index: 200000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    animation: lightboxFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lightboxFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Barra superior elegante respetando Dynamic Island / Notch de iOS */
.lightbox-top-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 14px) 20px 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.25) 75%, transparent 100%) !important;
    z-index: 200005 !important;
    pointer-events: none;
}

.lightbox-top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: auto !important;
}

.lightbox-top-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.lightbox-top-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: scale(1.06);
}

.lightbox-top-btn:active {
    transform: scale(0.94);
}

.lightbox-close-btn {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.lightbox-close-btn:hover {
    background: rgba(239, 68, 68, 0.35) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #ffffff !important;
}

.lightbox-counter {
    pointer-events: auto !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #f1f5f9 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    letter-spacing: 0.03em !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Outfit', 'Inter', sans-serif !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Área de contenido y lienzo de la imagen */
.lightbox-content-wrapper {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    cursor: grab !important;
    padding: calc(64px + env(safe-area-inset-top, 16px)) 16px calc(76px + env(safe-area-inset-bottom, 16px)) 16px !important;
    box-sizing: border-box !important;
    z-index: 200001 !important;
}

.lightbox-content-wrapper:active {
    cursor: grabbing !important;
}

.lightbox-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    transform-origin: center center !important;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    pointer-events: auto !important;
}

/* Barra inferior de zoom discreta y flotante */
.lightbox-controls {
    position: fixed !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(20, 20, 28, 0.78) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 30px !important;
    padding: 5px 12px !important;
    z-index: 200005 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

.lightbox-ctrl-btn {
    background: transparent !important;
    border: none !important;
    color: #e2e8f0 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.18s ease !important;
}

.lightbox-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

.lightbox-ctrl-btn:active {
    transform: scale(0.92);
}

.lightbox-zoom-val {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    min-width: 42px !important;
    text-align: center !important;
    cursor: pointer !important;
    user-select: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Outfit', 'Inter', sans-serif !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    transition: background 0.15s ease !important;
}

.lightbox-zoom-val:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Flechas de navegación laterales elegantes */
.lightbox-nav-btn {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: rgba(20, 20, 28, 0.65) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 200004 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.lightbox-nav-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.lightbox-nav-prev { left: 20px !important; }
.lightbox-nav-next { right: 20px !important; }

/* En pantallas táctiles / móviles estrechas: ocultar flechas laterales para no tapar la imagen */
@media (max-width: 768px) {
    .lightbox-nav-btn {
        display: none !important;
    }
}

/* ---- WOODLAND PREMIUM GLOBAL STYLING ---- */

/* Base de toda la interfaz: Nogal ejecutivo y Caoba cálida */
body, .main-area, .panel-chat, .messages, .bottom-nav {
    background-color: var(--bg-primary) !important;
}

/* Input bar con fondo caoba y borde sutil ámbar */
.input-bar {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Letras de color marfil en toda la interfaz de usuario */
body, p, span, td, th, li, label, div, select, option, input, textarea {
    color: var(--text-main) !important;
}

/* Texto más tenue para elementos secundarios */
.text-muted, .sidebar-terminal .terminal-line, .msg small {
    color: var(--text-muted) !important;
}

/* Títulos y textos destacados con ámbar vibrante */
h1, h2, h3, h4, h5, h6, strong, .msg strong {
    color: var(--text-main) !important;
}

.active, .bottom-nav-btn.active, .bottom-nav-btn:hover {
    color: var(--color-primary) !important;
}

/* Inputs, Textareas y Selectores con fondo caoba cálido */
input[type="text"], select, textarea, .mkt-input {
    background-color: rgba(10, 10, 10, 0.85) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    box-shadow: none !important;
}

input[type="text"]:focus, select:focus, textarea:focus {
    border-color: rgba(139, 92, 246, 0.6) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.12) !important;
}

/* Botón de envío dinámico (#050508) */
#chat-form button[type="submit"] {
    background: #050508 !important;
    border: 1px solid rgba(139, 92, 246, 0.6) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    transition: var(--transition-smooth) !important;
    box-shadow: 0 3px 15px rgba(139, 92, 246, 0.35) !important;
}

#chat-form button[type="submit"]:hover {
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.55) !important;
    transform: translateY(-1px);
}

#chat-form button[type="submit"].scroll-to-bottom-mode {
    background: #050508 !important;
    box-shadow: 0 3px 15px rgba(139, 92, 246, 0.35) !important;
}

#chat-form button[type="submit"].scroll-to-bottom-mode:hover {
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.55) !important;
}

/* BOTÓN FLOTANTE DE BAJAR EN EL CHAT (CYBER OBSIDIAN PURE DARK) */
.scroll-bottom-btn, #scroll-bottom-btn {
    position: fixed !important;
    bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
    right: 24px !important;
    z-index: 99999 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(9, 10, 15, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(168, 85, 247, 0.6) !important;
    color: #ffffff !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(168, 85, 247, 0.5) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.scroll-bottom-btn:hover, #scroll-bottom-btn:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
    border-color: #c084fc !important;
    color: #ffffff !important;
    box-shadow: 0 6px 25px rgba(168, 85, 247, 0.8), 0 0 20px rgba(192, 132, 252, 0.6) !important;
    transform: translateY(-3px) scale(1.08) !important;
}

.scroll-bottom-btn:active, #scroll-bottom-btn:active {
    transform: translateY(0) scale(0.95) !important;
}

.scroll-bottom-btn.visible, #scroll-bottom-btn.visible {
    display: inline-flex !important;
    animation: fadeInScrollBtn 0.3s ease-out forwards;
}

/* Iconos de toda la página: blancos/neutros por defecto, brillo violeta al interactuar */
.nav-icon:not(#nav-btn-chats .nav-icon),
.mic-btn:not(#nav-btn-chats),
.header-action-btn,
.dropdown-item .item-icon,
.msg-edit-btn,
.mkt-close-btn,
.remove-preview-btn,
#attach-btn,
.close-history-btn:not(.header-frame-sunken-btn) svg {
    filter: none !important;
    opacity: 0.75;
    transition: var(--transition-smooth);
}

.bottom-nav-btn:not(#nav-btn-chats):hover .nav-icon,
.mic-btn:not(#nav-btn-chats):hover,
.header-action-btn:hover,
.dropdown-item:hover .item-icon,
.msg-edit-btn:hover,
.mkt-close-btn:hover,
.remove-preview-btn:hover,
#attach-btn:hover,
.close-history-btn:not(.header-frame-sunken-btn):hover svg {
    filter: none !important;
    opacity: 1 !important;
}

/* ========================================================
   BOTONES HUNDIDOS EN EL MARCO (CABECERA HISTORIAL)
   Siluetas monocromáticas grabadas como cuencas/hendiduras
   ======================================================== */
.header-frame-sunken-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 50% 120%, rgba(22, 24, 38, 0.95), rgba(8, 9, 15, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top-color: rgba(0, 0, 0, 0.85) !important;
    border-bottom-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9),
                inset 0 1px 1px rgba(0, 0, 0, 0.95),
                inset 0 -1px 1px rgba(255, 255, 255, 0.05),
                0 1px 1px rgba(255, 255, 255, 0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    color: #94a3b8 !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.header-frame-sunken-btn[style*="display:none"],
.header-frame-sunken-btn[style*="display: none"],
.header-frame-sunken-btn.hidden {
    display: none !important;
}

/* BOTÓN MODO MANTENIMIENTO EN HEADER DE CHATS (2026-10-26, igual que Mónica; solo admin) */
.header-mantenimiento-btn {
    position: relative !important;
    transition: all 0.25s ease !important;
}
.header-mantenimiento-btn.mantenimiento-activo {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
    background: radial-gradient(circle at 50% 120%, rgba(55, 35, 10, 0.98), rgba(25, 15, 5, 0.98)) !important;
    box-shadow: inset 0 1px 2px rgba(245, 158, 11, 0.3), 0 0 14px rgba(245, 158, 11, 0.55), 0 0 24px rgba(245, 158, 11, 0.25) !important;
    animation: pulseMantenimientoBtn 2.2s infinite ease-in-out !important;
}
.header-mantenimiento-btn.mantenimiento-activo svg {
    color: #f59e0b !important;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.9)) !important;
    opacity: 1 !important;
}
@keyframes pulseMantenimientoBtn {
    0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.4), inset 0 1px 2px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 0 18px rgba(245, 158, 11, 0.8), inset 0 1px 3px rgba(245, 158, 11, 0.4); }
}
.header-mantenimiento-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    background: #f59e0b;
    color: #000000;
    font-size: 10px;
    font-weight: 900;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #090a10;
    box-shadow: 0 0 6px #f59e0b;
    pointer-events: none;
    line-height: 1;
}

.header-frame-sunken-btn svg {
    display: block !important;
    color: currentColor !important;
    filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.12)) !important;
    transition: color 0.2s ease, filter 0.2s ease, transform 0.2s ease !important;
    pointer-events: none;
    opacity: 0.82;
}

.header-frame-sunken-btn:hover {
    background: radial-gradient(circle at 50% 120%, rgba(32, 28, 52, 0.98), rgba(12, 13, 22, 0.98)) !important;
    border-color: rgba(168, 85, 247, 0.45) !important;
    border-bottom-color: rgba(168, 85, 247, 0.65) !important;
    color: #f1f5f9 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9),
                inset 0 0 2px rgba(0, 0, 0, 0.95),
                0 0 12px rgba(168, 85, 247, 0.32),
                0 1px 2px rgba(255, 255, 255, 0.06) !important;
}

.header-frame-sunken-btn:hover svg {
    opacity: 1 !important;
    color: #ffffff !important;
    filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.95)) drop-shadow(0 0 6px rgba(168, 85, 247, 0.7)) !important;
}

.header-frame-sunken-btn:active {
    transform: scale(0.92) !important;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.98),
                inset 0 1px 2px rgba(0, 0, 0, 0.95) !important;
}

#header-optimizar-monica-btn,
#refresh-app-btn {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation !important;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}
#header-optimizar-monica-btn.pressing,
#refresh-app-btn.pressing {
    transform: scale(0.82) rotate(-15deg) !important;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.9)) !important;
    opacity: 1 !important;
}
#header-optimizar-monica-btn.pop-act,
#refresh-app-btn.pop-act {
    animation: monicaBtnSecretPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
@keyframes monicaBtnSecretPop {
    0% { transform: scale(0.82) rotate(-15deg); }
    50% { transform: scale(1.3) rotate(180deg); filter: drop-shadow(0 0 16px rgba(139, 92, 246, 1)); }
    100% { transform: scale(1) rotate(360deg); }
}

#btn-abrir-chat-mantenimiento-modal:hover {
    background: rgba(139, 92, 246, 0.3) !important;
    border-color: rgba(168, 85, 247, 0.75) !important;
    color: #ffffff !important;
}
#btn-abrir-chat-mantenimiento-modal:active,
#btn-confirmar-mantenimiento-ia:active {
    transform: scale(0.97);
}

/* Selector de modelos con acabado nogal */
#local-model-select {
    background: rgba(10, 10, 10, 0.9) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    color: var(--text-main) !important;
}
#local-model-select:hover {
    border-color: rgba(139, 92, 246, 0.65) !important;
    color: #fff !important;
}
#mini-engine-toggle {
    background: rgba(10, 10, 10, 0.9) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    color: var(--color-primary) !important;
}
#mini-engine-toggle:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.3) !important;
}

/* Interfaz de llamada activa */
#active-call-ui {
    background: rgba(24, 17, 11, 0.95) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* Barra de navegación inferior */
.bottom-nav {
    background: rgba(18, 11, 7, 0.97) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.2) !important;
}

/* Drawer móvil con fondo nogal */
.drawer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.25) !important;
}

/* Sidebar derecha con acabado caoba profundo */
.sidebar-right {
    background: rgba(18, 12, 26, 0.97) !important;
    border-left: 1px solid rgba(139, 92, 246, 0.18) !important;
}

/* Botón de sesión con borde ámbar al hover */
.session-btn {
    background: rgba(10, 10, 10, 0.5) !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}
.session-btn:hover {
    background: rgba(10, 10, 10, 0.85) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
}
.session-btn.active {
    background: rgba(139, 92, 246, 0.14) !important;
    border-left: 3.5px solid #a855f7 !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    box-shadow: inset 3.5px 0 12px rgba(168, 85, 247, 0.25), 0 0 12px rgba(139, 92, 246, 0.18) !important;
}
/* 2026-09-25 -- FLUIDEZ: ver el comentario gemelo en templates/monica_index.html.
   Esta copia queda superada en cascada por la del <style> inline (carga después
   del <link> de este archivo), pero se corrige igual para no dejar una regla
   viva con animación de box-shadow (repintado en bucle, no GPU) si algún día
   cambia el orden de carga. */
.session-btn.has-unread {
    position: relative;
    border: 1px solid rgba(59, 130, 246, 0.85) !important;
    border-left: 4px solid #3b82f6 !important;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.22), rgba(139, 92, 246, 0.12)) !important;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.55), inset 0 0 12px rgba(59, 130, 246, 0.2) !important;
}
.session-btn.has-unread::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.75), inset 0 0 14px rgba(59, 130, 246, 0.25);
    opacity: 0;
    will-change: opacity;
    animation: unreadCardPulse 2s infinite ease-in-out;
}
.session-btn.has-unread strong {
    color: #93c5fd !important;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

/* ==========================================================================
   DESLIZAR CHAT (SWIPE-TO-DELETE EN LISTA DE CHATS) - 2026-09-23
   Permite deslizar una tarjeta hacia la izquierda para revelar el botón
   de eliminar abajo a la derecha (pedido expreso de Jonatan).
   ========================================================================== */
.session-swipe-row {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 8px;
    /* 2026-09-24 -- bug real reportado en varios chats (#15, #16): este fondo
       rojo se veia como un borde/resplandor rojo alrededor de CUALQUIER
       tarjeta de chat aunque nadie la estuviera deslizando. El rojo de
       verdad para "borrar" ya lo pinta .session-swipe-delete-btn (linea
       ~3532) dentro de la franja de 78px que solo aparece al deslizar -- este
       contenedor no necesita fondo propio, es puro wrapper de posicionamiento. */
    background: transparent;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    /* 2026-09-23 -- BUG REAL encontrado y corregido: #sessions-list es un
       flex-direction:column con overflow-y:auto. Sin flex-shrink:0 aquí, el
       navegador -- al tener más chats de los que caben en el alto visible --
       en vez de dejar la lista hacer scroll, ENCOGE cada tarjeta para que
       todas quepan (bug clásico de Flexbox). Con 10 chats medía 28px de alto
       en vez de sus 58px reales, cortando y solapando el texto entre
       tarjetas. flex-shrink:0 fuerza que cada tarjeta conserve su alto
       natural y sea la lista, no las tarjetas, la que scrollee. */
    flex-shrink: 0;
}

#tab-history-content {
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

#sessions-list {
    overflow: visible !important;
    overflow-y: visible !important;
    flex: none !important;
    max-height: none !important;
    touch-action: pan-y !important;
}

.session-swipe-row,
.session-swipe-row .session-btn,
.session-info {
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent !important;
}

.session-swipe-row .session-btn {
    position: relative;
    z-index: 2;
    margin-bottom: 0 !important;
    background: #120c1a !important;
    transform: translate3d(0, 0, 0);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    box-sizing: border-box;
}

.session-swipe-row .session-btn.active {
    background: #1b122c !important;
}

.session-swipe-row .session-btn:hover {
    background: #1a1226 !important;
}

.session-swipe-row .session-btn.has-unread {
    background: linear-gradient(90deg, #13172e, #18112c) !important;
}

/* Evitar que la animación scale(0.94) del tap interfiera con el swipe */
.session-swipe-row.swiping .session-btn:active,
.session-swipe-row.swiped .session-btn:active,
.session-swipe-row.swiped-right .session-btn:active,
.session-swipe-row.swiping .session-btn,
.session-swipe-row.swiped .session-btn,
.session-swipe-row.swiped-right .session-btn {
    transform: none;
}

/* Acciones a la DERECHA (Swipe a la izquierda: ELIMINAR) */
.session-swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 78px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease;
    border-radius: 0 12px 12px 0;
    overflow: hidden;
    box-sizing: border-box;
}

.session-swipe-row.swiping-left .session-swipe-actions,
.session-swipe-row.swiped .session-swipe-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 2026-10-14 -- Acciones a la IZQUIERDA (Swipe a la derecha: ARCHIVAR) pedido del dueño */
.session-swipe-actions-left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    box-sizing: border-box;
}

.session-swipe-row.swiping-right .session-swipe-actions-left,
.session-swipe-row.swiped-right .session-swipe-actions-left {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.session-swipe-delete-btn {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 6px 4px;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 0 14px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, filter 0.15s ease;
    box-sizing: border-box;
}

.session-swipe-delete-btn:hover {
    filter: brightness(1.1);
}

.session-swipe-delete-btn:active {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #7f1d1d 100%) !important;
    filter: brightness(0.9);
}

.session-swipe-delete-icon {
    font-size: 1.25rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.session-swipe-delete-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.session-swipe-archive-btn {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #5b21b6 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 6px 4px;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.2), inset 0 0 14px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, filter 0.15s ease;
    box-sizing: border-box;
}

.session-swipe-archive-btn:hover {
    filter: brightness(1.1);
}

.session-swipe-archive-btn:active {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #4c1d95 100%) !important;
    filter: brightness(0.9);
}

.session-swipe-archive-icon {
    font-size: 1.25rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.session-swipe-archive-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ---- WOODLAND TOAST NOTIFICATIONS ---- */
#toast-container {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 99999;
    pointer-events: none;
    width: 100%;
    max-width: 390px;
    padding: 0 16px;
}

.custom-toast {
    pointer-events: auto;
    background: rgba(30, 19, 12, 0.97) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    padding: 16px 20px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 0 20px rgba(139, 92, 246, 0.1);
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    transform: translateY(-150%);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}

.custom-toast.show {
    transform: translateY(0);
}

.custom-toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.custom-toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.custom-toast-title {
    font-weight: 700;
    color: var(--color-primary) !important;
    font-size: 0.9rem;
}

.custom-toast-body {
    font-size: 0.82rem;
    color: var(--text-muted) !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.custom-toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
    flex-shrink: 0;
}

.custom-toast-close:hover {
    color: var(--color-primary) !important;
}

/* ---- PREMIUM SKILLS PANEL DESIGN ---- */
.skills-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skill-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.skill-card:hover {
    background: rgba(139, 92, 246, 0.04);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.08);
    transform: translateY(-1px);
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.skill-title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.skill-icon {
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: spin-slow 8s infinite linear;
}

.skill-icon-no-rotate {
    animation: none !important;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.skill-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.skill-desc {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.skill-functions-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #a855f7;
    margin-top: 4px;
}

.skill-functions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.skill-function-badge {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    padding: 2px 6px;
    border-radius: 6px;
    cursor: help;
    transition: all 0.2s ease;
}

.skill-function-badge:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: #a855f7;
}

.skill-badge-core {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    font-size: 0.6rem !important;
    padding: 1px 6px !important;
    border-radius: 99px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.skill-badge-custom {
    background: rgba(139, 92, 246, 0.12) !important;
    color: #a855f7 !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    font-size: 0.6rem !important;
    padding: 1px 6px !important;
    border-radius: 99px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   CYBER OBSIDIAN PURE DARK - SEMANTIC SECTIONS, BUTTONS, EMOJIS & ICONS
   ========================================================================== */

:root {
  /* Semantic Accent Palette */
  --monica-accent: #a855f7;
  --monica-glow: rgba(168, 85, 247, 0.4);
  --leads-accent: #3b82f6;
  --leads-glow: rgba(59, 130, 246, 0.4);
  --tienda-accent: #ec4899;
  --tienda-glow: rgba(236, 72, 153, 0.4);
  --nutricion-accent: #ef4444;
  --nutricion-glow: rgba(239, 68, 68, 0.4);
  --ingresos-accent: #06b6d4;
  --ingresos-glow: rgba(6, 182, 212, 0.4);
}

/* Glassmorphic Cyber Obsidian Base Styling for all Buttons */
button, .mkt-btn-primary, .mkt-btn-plus, .segment-btn, .ask-option-btn, .header-action-btn, .perm-btn, .modal-btn-confirm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: inherit;
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none;
}

/* Pedido del dueño (2026-09-27): fuera el anillo/contorno azul de foco en
   TODOS los botones, tanto al tocarlos como mientras quedan "seleccionados"
   (focus persistente tras el tap en mobile). Cubre <button> nativo y las
   pildoras/iconos que no son <button> pero actúan como uno. */
button, button:focus, button:focus-visible, button:active,
.mkt-btn-primary, .mkt-btn-plus, .segment-btn, .ask-option-btn,
.header-action-btn, .perm-btn, .modal-btn-confirm,
.laptop-btn, #ai-engine-selector, #agent-mode-toggle, #mini-engine-toggle,
.engine-bar-btn, #chat-engine-btn, #mic-btn, #attach-btn, #send-btn,
[role="button"], [role="button"]:focus, [role="button"]:focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Primary Button Enhancements */
.mkt-btn-primary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f3f4f6 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.mkt-btn-primary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

.mkt-btn-primary:active {
  transform: translateY(0);
}

/* Plus Button (Agregar Servicio / Nuevo) */
.mkt-btn-plus {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%) !important;
  border: 1px solid rgba(236, 72, 153, 0.5) !important;
  color: #f472b6 !important;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.25);
}

.mkt-btn-plus:hover {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.35) 0%, rgba(168, 85, 247, 0.35) 100%) !important;
  border-color: rgba(236, 72, 153, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 0 25px rgba(236, 72, 153, 0.45);
  transform: translateY(-2px);
}

/* Segment Buttons Styling (Personas / Empresas, Categories) */
.segment-btn {
  background: rgba(10, 11, 16, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #9ca3af !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.segment-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Active Segment Buttons per Section Context */
#view-contactos .segment-btn.active {
  background: rgba(59, 130, 246, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.7) !important;
  color: #60a5fa !important;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}

#view-productos .segment-btn.active, #view-tienda .segment-btn.active {
  background: rgba(236, 72, 153, 0.25) !important;
  border-color: rgba(236, 72, 153, 0.7) !important;
  color: #f472b6 !important;
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.35);
}

#view-nutricion .segment-btn.active {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.7) !important;
  color: #f87171 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}

#view-ingresos .segment-btn.active {
  background: rgba(6, 182, 212, 0.25) !important;
  border-color: rgba(6, 182, 212, 0.7) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
}

/* Glassmorphic Circle Close Buttons */
.mkt-close-btn, .close-modal-btn, .close-history-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1.15rem !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.mkt-close-btn::after, .close-modal-btn::after, .close-history-btn::after {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
}

.mkt-close-btn:hover, .close-modal-btn:hover, .close-history-btn:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #ffffff !important;
  transform: scale(1.06) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.mkt-close-btn:active, .close-modal-btn:active, .close-history-btn:active {
  transform: scale(0.92) !important;
  background: rgba(239, 68, 68, 0.4) !important;
  border-color: rgba(239, 68, 68, 0.85) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55);
}

/* Header Action Buttons Polish */
.header-action-btn {
  background: rgba(17, 18, 28, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #d1d5db !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}

.header-action-btn:hover {
  background: rgba(168, 85, 247, 0.2) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.3);
}

/* Permission Modal Buttons */
.perm-btn {
  padding: 10px 18px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.btn-deny {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

.btn-deny:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
}

.btn-allow-once {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #60a5fa !important;
}

.btn-allow-once:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.4);
}

.btn-always {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.6) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.btn-always:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.5) 0%, rgba(59, 130, 246, 0.5) 100%) !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
  transform: translateY(-2px);
}

/* Modals Obsidian Glass Container */
.mkt-card, .modal-content, .bunker-modal {
  background: #090a10 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 255, 255, 0.02) !important;
  border-radius: 14px !important;
}

/* Inputs & Form Control Glow */
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], select, textarea {
  background: #050508 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f3f4f6 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  outline: none !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.3) !important;
}

input[type="date"] {
  box-sizing: border-box !important;
  overflow: hidden !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  margin-right: 4px !important;
  margin-left: 6px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  filter: invert(0.8) !important;
}

/* Mobile Responsive Action Adjustments */
@media (max-width: 768px) {
  .mkt-btn-primary, .segment-btn {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }
}

/* ==========================================================================
   MÓNICA 3.5 CYBER OBSIDIAN PURE DARK MASTER OVERRIDE (ULTRA LUXURY VIBE)
   ========================================================================== */

/* 1. Global Lienzo Base & Typography */
html, body {
    background-color: #050508 !important;
    color: #ffffff !important;
}

/* 2. Remove any grayscale or opacity degradation on icons */
.nav-icon, .bottom-nav-btn .nav-icon, .icon-btn, .header-action-btn, .dropdown-item .item-icon {
    filter: none !important;
    opacity: 1 !important;
    -webkit-filter: none !important;
}

/* 3. Master Bottom Navigation Bar */
.bottom-nav, nav.bottom-nav, .bottom-navigation {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(var(--offset-nav-fondo, 62px) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 4px 8px env(safe-area-inset-bottom, 0px) 8px !important;
    margin: 0 !important;
    background: rgba(5, 5, 8, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.3) !important;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.95) !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    box-sizing: border-box !important;
}

.bottom-nav-btn {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.bottom-nav-btn .nav-icon {
    font-size: 1.35rem !important;
    line-height: 1 !important;
    filter: none !important;
    opacity: 1 !important;
    transition: transform 0.2s ease !important;
}

.bottom-nav-btn span:not(.nav-icon) {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    color: #cbd5e1 !important;
}

/* Specific Vibrant Signature Colors & Glows per Tab */
#nav-btn-chats .nav-icon { color: #c084fc !important; filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.85)) !important; }
#nav-btn-leads .nav-icon { color: #60a5fa !important; filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.85)) !important; }
#nav-btn-tienda .nav-icon { color: #f472b6 !important; filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.85)) !important; }
#nav-btn-nutricion .nav-icon { color: #f87171 !important; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.85)) !important; }
#nav-btn-ingresos .nav-icon { color: #22d3ee !important; filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.85)) !important; }

/* Active Capsules for Bottom Nav */
#nav-btn-chats.active {
    background: rgba(168, 85, 247, 0.22) !important;
    border: 1px solid rgba(192, 132, 252, 0.6) !important;
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.5) !important;
}
#nav-btn-chats.active span:not(.nav-icon) { color: #ffffff !important; font-weight: 800 !important; }

/* 2026-09-24 -- feedback visual del gesto "mantener oprimido + deslizar para
   navegar entre chats" (chat #22). Se prende solo mientras el long-press ya
   armó el modo swipe (ver setupNavChatsLongPressSwipe en monica_app.js). */
/* 2026-09-24 -- el gesto "mantener oprimido + deslizar" moria en iOS porque al
   sostener el dedo sobre el texto del boton aparecia el callout/seleccion del
   sistema y WebKit mandaba 'touchcancel'. Se desactiva la seleccion y el callout
   en todo el boton y sus hijos. */
#nav-btn-chats, #nav-btn-chats * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

#nav-btn-chats.nav-swipe-armed {
    background: rgba(34, 211, 238, 0.28) !important;
    border: 1px solid rgba(103, 232, 249, 0.75) !important;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.65) !important;
    transform: scale(1.06);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#nav-btn-leads.active {
    background: rgba(59, 130, 246, 0.22) !important;
    border: 1px solid rgba(96, 165, 250, 0.6) !important;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.5) !important;
}
#nav-btn-leads.active span:not(.nav-icon) { color: #ffffff !important; font-weight: 800 !important; }

#nav-btn-tienda.active {
    background: rgba(236, 72, 153, 0.22) !important;
    border: 1px solid rgba(244, 114, 182, 0.6) !important;
    box-shadow: 0 0 18px rgba(236, 72, 153, 0.5) !important;
}
#nav-btn-tienda.active span:not(.nav-icon) { color: #ffffff !important; font-weight: 800 !important; }

#nav-btn-nutricion.active {
    background: rgba(239, 68, 68, 0.22) !important;
    border: 1px solid rgba(248, 113, 113, 0.6) !important;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.5) !important;
}
#nav-btn-nutricion.active span:not(.nav-icon) { color: #ffffff !important; font-weight: 800 !important; }

#nav-btn-ingresos.active {
    background: rgba(6, 182, 212, 0.22) !important;
    border: 1px solid rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.5) !important;
}
#nav-btn-ingresos.active span:not(.nav-icon) { color: #ffffff !important; font-weight: 800 !important; }

/* 4. Harmonized Input Bar (Barra de Entrada) */
#chat-form.input-bar, .input-bar {
    position: fixed !important;
    bottom: calc(var(--offset-nav-fondo, 62px) + env(safe-area-inset-bottom, 0px) + var(--hueco-teclado, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    background: #080914 !important;
    border-top: 1px solid rgba(139, 92, 246, 0.35) !important;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.85) !important;
    box-sizing: border-box !important;
}

.chat-input-row {
    width: 100% !important;
    display: flex !important;
    border-radius: 26px !important;
    -webkit-border-radius: 26px !important;
}

/* Chat Input Field (Textarea Multilínea) */
#chat-input, .input-bar textarea#chat-input, textarea#chat-input {
    width: 100% !important;
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    max-height: min(45vh, 360px) !important;
    padding: 10px 18px !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    border-radius: 24px !important;
    -webkit-border-radius: 24px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    resize: none !important;
    overflow-y: auto !important;
    box-shadow: none !important;
    font-family: inherit !important;
    outline: none !important;
}
#chat-input:focus, textarea#chat-input:focus {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}
#chat-input::placeholder {
    color: #94a3b8 !important;
}

.chat-controls-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.chat-controls-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.chat-controls-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#mic-btn, button#mic-btn, .mic-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    font-size: 1.15rem !important;
    background: #000000 !important;
    border: none !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
#mic-btn:hover {
    box-shadow: 0 0 15px rgba(148, 163, 184, 0.4) !important;
    transform: translateY(-1px) !important;
}
#mic-btn.listening {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    border-color: #f87171 !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.8) !important;
    animation: micPulse 1s infinite alternate !important;
}

/* Attachment Clip Button: negro plano, sin aro de color (2026-09-25, pedido del dueño) */
#attach-btn, button#attach-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    font-size: 1.15rem !important;
    background: #000000 !important;
    border: none !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
#attach-btn:hover {
    box-shadow: 0 0 15px rgba(148, 163, 184, 0.4) !important;
    transform: translateY(-1px) !important;
}
.metallic-clip {
    color: #e2e8f0 !important;
    text-shadow: 0 0 6px rgba(226, 232, 240, 0.6) !important;
    filter: none !important;
}

/* Chat Input Field */
#chat-input, .input-bar input, textarea#chat-input {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.92rem !important;
    min-height: 44px !important;
    max-height: min(45vh, 360px) !important;
    padding: 8px 16px !important;
    border-radius: 24px !important;
    -webkit-border-radius: 24px !important;
    background: rgba(9, 10, 16, 0.95) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    transition: all 0.2s ease !important;
}
#chat-input:focus, textarea#chat-input:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.4), inset 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    outline: none !important;
}
#chat-input::placeholder {
    color: #94a3b8 !important;
}

/* Mini Engine Reasoning Bar Button (Barra Larga Flexible) */
#mini-engine-toggle, button#mini-engine-toggle, .engine-bar-btn {
    flex: 1 !important;
    height: 42px !important;
    min-width: 180px !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 12px !important;
    flex-shrink: 1 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 50%, #4c1d95 100%) !important;
    border: 1.5px solid #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}
#mini-engine-toggle:hover, .engine-bar-btn:hover {
    background: linear-gradient(135deg, #2e1065 0%, #4c1d95 50%, #6d28d9 100%) !important;
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
    border-color: #c084fc !important;
}

/* Laptop Button & Autonomous Agent Toggle */
.laptop-btn, #agent-mode-toggle, button#agent-mode-toggle, #ai-engine-selector {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    font-size: 1.15rem !important;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid #64748b !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.laptop-btn:hover, #agent-mode-toggle:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 0 15px rgba(148, 163, 184, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* BOTÓN PRINCIPAL (#send-btn):
   - FONDO NEGRO PURO CONSTANTE (#050508)
   - SOLO CAMBIA EL EMOJI INTERNO (▶️, 💉, ⏸️, ⏹️, 🔽, ⏳) SIN TEXTO
   - ANILLO Y RESPLANDOR CYBER OBSIDIAN */
#send-btn, .send-btn, #submit-btn, button[type="submit"], #chat-form button[type="submit"],
#send-btn.inject-mode, .send-btn.inject-mode, #chat-form button[type="submit"].inject-mode {
    height: 44px !important;
    background: #050508 !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 0.98rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 3px 15px rgba(139, 92, 246, 0.35) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
#send-btn:hover, .send-btn:hover, #submit-btn:hover, button[type="submit"]:hover {
    background: #050508 !important;
    border: none !important;
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.55) !important;
    transform: translateY(-1px) !important;
}
#send-btn.cancel-mode, .send-btn.cancel-mode, #submit-btn.cancel-mode, #chat-form button[type="submit"].cancel-mode {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 3px 18px rgba(168, 85, 247, 0.4) !important;
}
#send-btn.cancel-mode::after, .send-btn.cancel-mode::after, #submit-btn.cancel-mode::after, #chat-form button[type="submit"].cancel-mode::after {
    background: transparent !important;
}
#send-btn.stop-mode, .send-btn.stop-mode, #submit-btn.stop-mode, #chat-form button[type="submit"].stop-mode {
    background: #050508 !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 3px 15px rgba(139, 92, 246, 0.35) !important;
}
#send-btn.scroll-to-bottom-mode, .send-btn.scroll-to-bottom-mode, #submit-btn.scroll-to-bottom-mode,
button[type="submit"].scroll-to-bottom-mode, #chat-form button[type="submit"].scroll-to-bottom-mode {
    background: #050508 !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 3px 15px rgba(139, 92, 246, 0.35) !important;
}

#send-btn .btn-emoji, .send-btn .btn-emoji, #submit-btn .btn-emoji, .btn-emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Android Emoji", sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: initial !important;
    -webkit-text-fill-color: initial !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* El glifo "■" (detener) NO es un emoji a color: sin esta regla hereda
   color: initial (negro) de la regla general de arriba y se ve como un
   cuadrado negro sobre el botón degradado. Se fuerza a blanco para que
   combine con el resto del icono del botón. */
#send-btn.cancel-mode .btn-emoji, .send-btn.cancel-mode .btn-emoji,
#submit-btn.cancel-mode .btn-emoji, #chat-form button[type="submit"].cancel-mode .btn-emoji {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#send-btn .btn-text, .send-btn .btn-text, #submit-btn .btn-text, #send-btn > span:not(.btn-emoji):not(.scroll-unread-badge) {
    display: none !important;
}

#send-btn.cancel-mode.confirm-cancel, .send-btn.cancel-mode.confirm-cancel,
#submit-btn.cancel-mode.confirm-cancel, #chat-form button[type="submit"].cancel-mode.confirm-cancel {
    background: rgba(239, 68, 68, 0.45) !important;
    border: 1px solid rgba(239, 68, 68, 0.8) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.7) !important;
    animation: pulseConfirmCancel 0.8s infinite alternate !important;
}
@keyframes pulseConfirmCancel {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

#send-btn.cancel-mode.confirm-cancel .btn-emoji, .send-btn.cancel-mode.confirm-cancel .btn-emoji,
#submit-btn.cancel-mode.confirm-cancel .btn-emoji, #chat-form button[type="submit"].cancel-mode.confirm-cancel .btn-emoji,
#send-btn.cancel-mode.confirm-cancel span {
    color: #ff3b30 !important;
    -webkit-text-fill-color: #ff3b30 !important;
    -webkit-text-stroke: 1.2px rgba(5, 5, 8, 0.85) !important;
    text-shadow: 0 0 10px rgba(255, 59, 48, 0.95), 0 0 2px rgba(0, 0, 0, 0.9) !important;
}

/* 5. Chat Messages & Markdown Styling */
.msg, .message-bubble, .chat-message {
    background: rgba(9, 10, 16, 0.95) !important;
    border: 1px solid rgba(139, 92, 246, 0.22) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
}

.msg pre, .msg code {
    background: #0d0e17 !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: #f8fafc !important;
    border-radius: 8px !important;
}
.msg code:not(pre code) {
    background: rgba(124, 58, 237, 0.18) !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    color: #c084fc !important;
    padding: 2px 6px !important;
    font-size: 0.88em !important;
    border-radius: 4px !important;
}

/* 6. Drawers, Modals & History Cards */
.history-section, .bottom-panel-section, .sidebar-right, #right-sidebar, .sidebar-container {
    background: #050508 !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

.thread-card {
    background: rgba(9, 10, 16, 0.9) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    border-radius: 12px !important;
}
.thread-card:hover {
    border-color: #a855f7 !important;
    background: rgba(18, 19, 32, 0.95) !important;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.35) !important;
}

/* Centrado geométrico para botones circulares de cierre/retroceso.
   Centrado ABSOLUTO del SVG (no flex/inline-block) -- inmune a que el botón tenga otro
   tamaño puesto inline (30px, 34px, etc.) o a diferencias de bounding-box del SVG. */
.mkt-close-btn, .close-history-btn, #portal-close-btn, .close-modal-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.mkt-close-btn svg, .close-history-btn svg, #portal-close-btn svg, .close-modal-btn svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    display: block !important;
}

/* Brillo violeta tenue al seleccionar/activar un elemento interactivo (imagen, tarjeta de
   archivo, botón de acción) -- mismo efecto que ya usa la barra de pestañas Chat/Galería. */
.rag-file-row:active, .rag-file-row:focus-visible,
.attachment-bubble-item:active, .attachment-bubble-item:focus-visible,
.chat-attachment-img:active, .chat-attachment-img:focus-visible,
.tool-btn-premium:active, .tool-btn-premium:focus-visible {
    outline: none !important;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.85) !important;
    border-radius: 10px;
}

/* Blindaje de navegación táctil sin falsos clics para acordeón y selector de modelos */
.agent-reasoning-accordion,
.agent-reasoning-accordion summary,
.step-item,
.agent-step-item,
.ask-options-container,
.ask-option-btn,
.qwen-popup-menu,
.qwen-popup-item,
.qwen-popup-row,
.qwen-popup-scroll-body,
#local-model-popup,
#nube-submode-popup,
#pro-accounts-dropdown {
    touch-action: pan-y !important;
}

.qwen-popup-menu,
.qwen-popup-scroll-body {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

.qwen-popup-scroll-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.4) transparent;
}
.qwen-popup-scroll-body::-webkit-scrollbar {
    width: 4px;
}
.qwen-popup-scroll-body::-webkit-scrollbar-track {
    background: transparent;
}
.qwen-popup-scroll-body::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.4);
    border-radius: 4px;
}

.qwen-popup-item {
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: pan-y !important;
}

.qwen-chevron-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.qwen-chevron-btn:hover,
.qwen-chevron-btn:active {
    background: rgba(168, 85, 247, 0.25) !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
}
.qwen-chevron-btn:active {
    transform: scale(0.92) !important;
}

.agent-reasoning-accordion summary {
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ==========================================================================
   ESTRUCTURA DE LA CONVERSACIÓN (2026-09-25)
   Las burbujas siguen de borde a borde (pedido del dueño, 2026-08-29): la
   jerarquía se da DENTRO de cada mensaje, no encogiendo el ancho.
   Selectores con #messages para ganarle a las reglas .msg.* con !important
   del <style> inline de monica_index.html (que carga después).
   ========================================================================== */

/* 1. Etiqueta de quién habla, arriba de cada burbuja */
#messages > .msg.user::before,
#messages > .msg.bot::before {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 8px;
    pointer-events: none;
}
#messages > .msg.user::before {
    content: "Tú";
    color: rgba(186, 230, 253, 0.85);
}
#messages > .msg.bot::before {
    content: var(--ia-bot-name, "✦ IA");
    color: #c4b5fd;
}
/* Varios mensajes seguidos del mismo lado = un solo bloque: sin repetir la etiqueta */
#messages > .msg.user + .msg.user::before,
#messages > .msg.bot + .msg.bot::before {
    display: none !important;
}

/* 2. Ritmo entre turnos: más aire al cambiar de turno, menos dentro del mismo */
#messages > .msg.bot + .msg.user {
    margin-top: 10px !important;
}
#messages > .msg.user + .msg.user,
#messages > .msg.bot:not(.loading) + .msg.bot:not(.loading) {
    margin-top: -6px !important;
}

/* 3. El texto plano del usuario respeta sus saltos de línea */
#messages .msg-text-content.msg-plain-text {
    white-space: pre-wrap !important;
}

/* 4. El contenido no arranca ni termina con márgenes sobrantes */
#messages .msg-text-content > :first-child {
    margin-top: 0 !important;
}
#messages .msg-text-content > :last-child {
    margin-bottom: 0 !important;
}

/* 5. Pie del mensaje en UNA franja: acciones a la izquierda, hora + motor a la derecha */
#messages .msg .msg-footer-row {
    justify-content: flex-start !important;
    gap: 6px 10px !important;
    margin-top: 12px !important;
    padding-top: 7px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
#messages .msg.user .msg-footer-row {
    border-top-color: rgba(255, 255, 255, 0.14);
}
#messages .msg-footer-row .msg-actions-hover {
    margin-top: 0 !important;
    gap: 4px !important;
    order: 0;
}
#messages .msg-footer-row .msg-time {
    margin-left: auto !important;
    order: 1;
    white-space: nowrap;
}
#messages .msg-footer-row .msg-meta-wrap {
    margin-left: 0 !important;
    order: 2;
}

#messages .msg-footer-row .msg-meta-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    background: rgba(167, 139, 250, 0.16);
    border: 1px solid rgba(167, 139, 250, 0.38);
    border-radius: 7px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
#messages .msg-footer-row .msg-meta-btn:hover {
    background: rgba(167, 139, 250, 0.28);
    border-color: rgba(167, 139, 250, 0.65);
    transform: scale(1.06);
}
#messages .msg-footer-row .msg-meta-btn:active {
    transform: scale(0.94);
}
#messages .msg-footer-row .msg-meta-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 230px;
    max-width: min(320px, calc(100vw - 32px));
    background: linear-gradient(135deg, #131126 0%, #1a1636 100%);
    border: 1px solid rgba(167, 139, 250, 0.45);
    border-radius: 11px;
    padding: 10px 12px;
    font-size: 0.73rem;
    color: #f3f4f6;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 16px rgba(139, 92, 246, 0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-sizing: border-box;
    animation: metaPopoverFadeIn 0.18s ease-out;
}
@keyframes metaPopoverFadeIn {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   SISTEMA DE TEMAS: NEÓN (ORIGINAL) vs. ESCALA DE GRISES (B&W)
   ============================================================ */

/* 1. PLANTILLA NEÓN (Conserva 100% la paleta original con púrpuras, violetas y cian) */
:root[data-theme="neon"],
[data-theme="neon"] {
    --bg-primary: #000000;
    --bg-secondary: #050508;
    --bg-card: rgba(20, 14, 28, 0.85);
    --bg-base: #000000;
    --bg-surface: #0a0a0a;
    --bg-surface-elevated: #181928;
    --bg-glass: rgba(17, 18, 30, 0.85);
    --glass-bg: rgba(10, 10, 16, 0.95);
    --glass-border: rgba(139, 92, 246, 0.28);
    --glass-highlight: rgba(139, 92, 246, 0.08);
    --accent-glow: rgba(139, 92, 246, 0.20);
    --border-amber: rgba(139, 92, 246, 0.28);
    --border-amber-light: rgba(239, 68, 68, 0.45);
    --glow-amber: rgba(139, 92, 246, 0.25);
    --color-primary: #8b5cf6;
    --color-secondary: #3b82f6;
    --color-gold: #a855f7;
    --color-amber: #a855f7;
    --color-amber-dark: #8b5cf6;
    --color-gradient: linear-gradient(135deg, #8b5cf6, #3b82f6, #dc2626);
    --color-gradient-hover: linear-gradient(135deg, #a855f7, #8b5cf6);
    --text-main: #ffffff;
    --text-primary: #f3f4f6;
    --text-secondary: #b0b0ba;
    --text-muted: #a3a3b0;
    --text-dark: #0a0a0f;
}

/* Pestañas y Drawer de Historial */
/* 2026-09-26 -- refuerzo: aunque haptics.js ya excluye .sidebar-tab del switch
   táctil que le robaba el foco en iPhone (el foco nativo dejaba un anillo
   blanco sin tema encima del icono recién tocado), se resetea el outline aquí
   también por si el navegador lo dibuja por cualquier otra vía (VoiceOver,
   navegación por teclado en escritorio, etc.) -- el estado activo ya se ve
   claro con el borde inferior de color, no hace falta el anillo nativo. */
.sidebar-tab { outline: none !important; -webkit-tap-highlight-color: transparent !important; }

@keyframes monica-aro-vuelta {
    from { transform: translate3d(-50%, -50%, 0) rotate(0deg); }
    to   { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}

/* 5.1 Buscadores de Archivos y Música en pestaña Documentos */
.rag-search-input:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.35) !important;
}
#system-logs-btn {
    display: inline-flex !important;
}

/* ── Modal "🎯 Misiones y Logs del Sistema" (system-logs-modal) ── */
#system-logs-modal .monica-modal-content {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

#system-logs-top-close-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    transform: scale(1.05);
}

#system-logs-close-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

#system-logs-modal .misiones-filter-btn {
    transition: all 0.2s ease !important;
}
#system-logs-modal .misiones-filter-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}
#system-logs-list::-webkit-scrollbar {
    width: 6px;
}
#system-logs-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* ============================================================================
   2026-09-29 -- TELÉFONO EN HORIZONTAL (alto <= 500 px). Medido en Chromium a
   667x375: compositor (177 px) + barra inferior (62 px) = 240 px de 375, dejando
   ~135 px para leer mensajes. Se compacta sin tocar el diseño vertical ni el de
   escritorio: el espaciador de #messages (--barra-chat-alto, ResizeObserver) se
   reajusta solo, así que el último mensaje sigue quedando por encima.
   ============================================================================ */
@media (orientation: landscape) and (max-height: 550px) {
    /* prefijo "html body": el <style> de monica_index.html va DESPUÉS de este
       archivo y con la misma especificidad ganaba por orden. */
    html body #chat-form.input-bar {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        gap: 4px !important;
    }
    html body #notes-chat-pill-bar {
        height: 18px !important;
        min-height: 18px !important;
        margin-bottom: 2px !important;
    }
    html body #notes-chat-drawer-container {
        min-height: 0 !important;
    }
    /* El alto del cuadro de texto lo fija autoResizeChatInput (inline): en
       pantallas bajas, vacío = 1 línea de 40 px (ver monica_app.js). */
    html body #chat-form .chat-controls-row > button,
    html body #chat-form .chat-controls-row > * > button,
    html body #chat-form #send-btn,
    html body #chat-form #chat-engine-btn {
        min-height: 38px !important;
        height: 38px !important;
    }
    html body nav.bottom-nav {
        height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        padding-top: 3px !important;
        padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px)) !important;
    }
    html body #nav-btn-chats.bottom-nav-btn {
        min-height: 42px !important;
        height: 42px !important;
    }
    /* El compositor se ancla sobre la barra: el JS del teclado (monica_app.js,
       _setOffsetNav) fija --offset-nav-fondo a 62px literal con el teclado
       cerrado. Aquí la barra mide 48px; con el teclado ABIERTO (.teclado-abierto)
       no se toca nada y sigue mandando esa lógica. */
    html body:not(.teclado-abierto) #chat-form.input-bar {
        bottom: calc(48px + env(safe-area-inset-bottom, 0px) + var(--hueco-teclado, 0px)) !important;
    }
    /* 2026-10-24 (orden del dueño): en horizontal el modal/panel superior (.sidebar-right)
       se une directamente a la barra inferior sin ningún hueco que deje ver el chat de fondo. */
    html body .sidebar-right {
        bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        height: calc(100% - 48px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100% - 48px - env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* =====================================================================
   2026-10-12 — FLUIDEZ: el fondo estrellado (body::before) animaba scale +
   translate + opacity en bucle infinito sobre TODA la pantalla. Detrás hay
   ~38 paneles con backdrop-filter: cada frame del fondo obliga a re-desenfocar
   todos los cristales que lo cubren, incluso con la app quieta → GPU al
   100 % constante, scroll con tirones y batería drenada en el iPhone.
   En pantallas táctiles el cielo queda estático (mismo aspecto, cero coste);
   en PC se conserva el titileo pero solo con opacidad (sin escalar la capa).
   ===================================================================== */
@keyframes starsTwinkleLite {
    0% { opacity: 0.35; }
    100% { opacity: 0.65; }
}
body::before {
    animation: starsTwinkleLite 10s infinite alternate ease-in-out;
    will-change: opacity;
}
@media (hover: none), (pointer: coarse) {
    body::before {
        animation: none !important;
        opacity: 0.5 !important;
        will-change: auto !important;
    }
    /* El logo flotante tampoco aporta nada en móvil y repinta su drop-shadow. */
    .logo { animation: none !important; }
}

/* Accesibilidad + fluidez: quien pide menos movimiento en su sistema no paga
   animaciones decorativas infinitas (spinners de carga se mantienen). */
@media (prefers-reduced-motion: reduce) {
    body::before, .logo, .pulse-green, .pulse-purple,
    .session-btn.has-unread::after {
        animation: none !important;
    }
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   4 BOTONES LATERALES EXACTOS (44px × 44px) Y CENTRADO DE ENVIAR (2026-10-17)
   Los 4 botones laterales (🌐, ⏳, 🎙️, 📎) miden exactamente 44px × 44px
   con border-radius: 12px y overflow: hidden sin distorsión por contenido interno.
   .chat-controls-left y .chat-controls-right miden exactamente 94px (44 + 6 + 44).
   El botón del centro (#send-btn) queda perfectamente centrado en pantalla.
   ========================================================================== */
.chat-controls-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    gap: 8px !important;
}

.chat-controls-left,
.chat-controls-right,
#chat-form .chat-controls-row > .chat-controls-left,
#chat-form .chat-controls-row > .chat-controls-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 94px !important;
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
}

.chat-controls-left {
    justify-content: flex-start !important;
}

.chat-controls-right {
    justify-content: flex-end !important;
}

.chat-controls-left .chat-ctrl-btn,
.chat-controls-left #depor-herramientas-btn,
.chat-controls-left #client-paginas-btn,
.chat-controls-left #header-prueba-membresia-btn,
.chat-controls-right #mic-btn,
.chat-controls-right button#mic-btn,
.chat-controls-right .mic-btn,
.chat-controls-right #attach-btn,
.chat-controls-right button#attach-btn,
.chat-controls-right .attach-btn,
#depor-herramientas-btn,
#header-prueba-membresia-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

.chat-controls-left .chat-ctrl-btn,
.chat-controls-left #header-prueba-membresia-btn {
    padding: 2px !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1px !important;
}

/* 2026-10-23: colores de 🌐 y ⏳ SIN depender de html[data-theme="neon"] (si el atributo falta o se pierde
   el botón caía al blanco/gris por defecto del navegador con el contador ilegible). */
.chat-controls-left #client-paginas-btn,
.chat-controls-left #depor-herramientas-btn,
.chat-controls-left .chat-ctrl-globe-btn {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(124, 58, 237, 0.15) 100%) !important;
    border: 1.5px solid rgba(192, 132, 252, 0.75) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.65), inset 0 1px 2px rgba(168, 85, 247, 0.4) !important;
}
.chat-controls-left #header-prueba-membresia-btn {
    background: linear-gradient(135deg, rgba(28, 20, 48, 0.95) 0%, rgba(15, 10, 26, 0.95) 100%) !important;
    border: 1.5px solid rgba(167, 139, 250, 0.5) !important;
    color: #c4b5fd !important;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.25), inset 0 1px 1px rgba(167, 139, 250, 0.2) !important;
}
.chat-controls-left #header-prueba-membresia-btn #trial-timer-badge {
    color: #c4b5fd !important;
    -webkit-text-fill-color: #c4b5fd !important;
}

.chat-controls-left #header-prueba-membresia-btn #trial-timer-badge {
    font-size: 0.62rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: block !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
}

#chat-form .chat-controls-row > #send-btn,
.input-bar .chat-controls-row > button[type="submit"],
#send-btn {
    flex: 1 1 auto !important;
    margin: 0 auto !important;
    height: 44px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   BOTONES DE ACCIÓN DEL CHAT ACTIVO (📍 Fijar y ☰ Opciones en la barra inferior)
   Pedido expreso del dueño (2026-10-17): Erradicar cualquier fondo en estos botones
   para que queden 100% transparentes sobre el fondo real del panel / cápsula.
   ========================================================================== */
#nav-btn-chats .nav-chat-action-btn,
#nav-btn-chats button,
#nav-active-chat-actions button,
#nav-active-chat-actions .nav-chat-action-btn,
.nav-chat-action-btn,
button#nav-active-chat-pin,
button#nav-active-chat-menu,
#nav-active-chat-pin,
#nav-active-chat-menu {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

#nav-btn-chats .nav-chat-action-btn:hover,
#nav-btn-chats button:hover,
#nav-active-chat-actions button:hover,
#nav-active-chat-actions .nav-chat-action-btn:hover,
.nav-chat-action-btn:hover,
button#nav-active-chat-pin:hover,
button#nav-active-chat-menu:hover,
#nav-active-chat-pin:hover,
#nav-active-chat-menu:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: scale(1.15) !important;
}

#nav-btn-chats .nav-chat-action-btn:focus,
#nav-btn-chats .nav-chat-action-btn:focus-visible,
#nav-btn-chats button:focus,
#nav-btn-chats button:focus-visible,
#nav-active-chat-actions button:focus,
#nav-active-chat-actions button:focus-visible,
#nav-active-chat-actions .nav-chat-action-btn:focus,
#nav-active-chat-actions .nav-chat-action-btn:focus-visible,
.nav-chat-action-btn:focus,
.nav-chat-action-btn:focus-visible,
button#nav-active-chat-pin:focus,
button#nav-active-chat-pin:focus-visible,
button#nav-active-chat-menu:focus,
button#nav-active-chat-menu:focus-visible,
#nav-active-chat-pin:focus,
#nav-active-chat-pin:focus-visible,
#nav-active-chat-menu:focus,
#nav-active-chat-menu:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#nav-btn-chats .nav-chat-action-btn:active,
#nav-btn-chats button:active,
#nav-active-chat-actions button:active,
#nav-active-chat-actions .nav-chat-action-btn:active,
.nav-chat-action-btn:active,
button#nav-active-chat-pin:active,
button#nav-active-chat-menu:active,
#nav-active-chat-pin:active,
#nav-active-chat-menu:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: scale(0.92) !important;
}

/* 2026-10-18 -- Editor «Escribir otra respuesta»: cuadro multilínea que crece (se lee todo
   lo escrito), botón 📎 y miniaturas de adjuntos dentro del mismo módulo. */
.ask-option-btn--custom-editing { flex-direction: column !important; align-items: stretch !important; padding: 8px 8px 8px 12px !important; height: auto !important; }
.ask-option-custom-row { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.ask-option-custom-textbox { resize: none !important; line-height: 1.35 !important; max-height: 32vh; overflow-y: auto !important; -webkit-appearance: none; }
.ask-option-custom-attach { flex: 0 0 auto; width: 34px; height: 34px; border: none !important; border-radius: 10px !important; background: rgba(148, 163, 184, 0.18) !important; color: #e2e8f0 !important; font-size: 1rem !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.ask-attach-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; width: 100%; }
.ask-attach-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: rgba(148, 163, 184, 0.14); border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 12px; padding: 4px 6px 4px 4px; font-size: 0.74rem; color: #e2e8f0; }
.ask-attach-chip img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; display: block; }
.ask-attach-ico { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.ask-attach-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-attach-pct { font-weight: 700; color: #c4b5fd; }
.ask-attach-rm { border: none; background: rgba(255, 255, 255, 0.12); color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; }
.ask-options-container > .ask-attach-strip { margin-top: 2px; }

/* 2026-10-19 (orden del dueño): el editor «Escribir respuesta» se salía del marco de
   la burbuja y dejaba un hueco encima. (1) el botón original oculto conservaba su
   espacio porque .ask-option-btn fuerza display:inline-flex !important; (2) el editor
   no podía encogerse por debajo del ancho intrínseco del <textarea> + 3 botones.
   Ahora ocupa exactamente el ancho del menú de opciones, con botones simétricos. */
.ask-option-btn[data-editando="1"] { display: none !important; }
.ask-options-container > .ask-option-btn--custom-editing {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
.ask-option-btn--custom-editing .ask-option-custom-row { align-items: center; gap: 6px; min-width: 0; }
.ask-option-btn--custom-editing textarea.ask-option-custom-textbox {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    font-weight: 500 !important;
}
.ask-option-btn--custom-editing .ask-option-custom-attach,
.ask-option-btn--custom-editing .ask-option-custom-cancel,
.ask-option-btn--custom-editing .ask-option-custom-send {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    padding: 0 !important;
}
.ask-option-btn--custom-editing textarea.ask-option-custom-textbox::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-options-container > .ask-option-btn--custom-editing { border: 1.5px solid #a855f7 !important; }
.ask-option-btn--custom-editing textarea.ask-option-custom-textbox::placeholder { font-size: 13px; letter-spacing: 0; }
.ask-option-btn--custom-editing textarea.ask-option-custom-textbox { padding: 6px 2px 6px 6px !important; }
.ask-option-btn--custom-editing .ask-option-custom-row { gap: 5px; }
.ask-option-btn--custom-editing .ask-option-custom-attach,
.ask-option-btn--custom-editing .ask-option-custom-cancel,
.ask-option-btn--custom-editing .ask-option-custom-send { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-height: 34px !important; }

/* Selección de Tarjetas y Botón de Páginas Web & Proyectos */
.herramienta-card,
.herramienta-card-drawer {
    transition: all 0.22s ease !important;
}
html[data-theme="neon"] #modal-herramientas-cliente .herramienta-card,
html[data-theme="neon"] #tab-tiendas-content .herramienta-card-drawer {
    background: rgba(24, 16, 44, 0.78) !important;
    border: 1px solid rgba(167, 139, 250, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}
.herramienta-card.selected {
    border-color: rgba(168, 85, 247, 0.75) !important;
    background: rgba(168, 85, 247, 0.14) !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.35) !important;
}
html[data-theme="neon"] #modal-herramientas-cliente .herramienta-card.selected {
    border-color: rgba(192, 132, 252, 0.8) !important;
    background: rgba(46, 16, 101, 0.9) !important;
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.5) !important;
}
.pagina-select-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    background: rgba(14, 16, 28, 0.75) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    outline: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.pagina-select-btn.selected {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
    border-color: #c084fc !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.85) !important;
    color: #ffffff !important;
}
.trabajar-paginas-btn {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: not-allowed;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: none;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}
.trabajar-paginas-btn.active {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
    border: 1px solid #c084fc !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    cursor: pointer !important;
    opacity: 1 !important;
    animation: trabajar-glow-pulse 2s infinite ease-in-out;
}
@keyframes trabajar-glow-pulse {
    0% {
        box-shadow: 0 0 16px rgba(168, 85, 247, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(168, 85, 247, 1), 0 0 45px rgba(192, 132, 252, 0.6), 0 6px 20px rgba(0, 0, 0, 0.5);
    }
    100% {
        box-shadow: 0 0 16px rgba(168, 85, 247, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}
html[data-theme="grises"] .trabajar-paginas-btn.active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.7) !important;
    animation: none !important;
}

/* 2026-10-21 (orden del dueño): mantener oprimido un botón NO debe seleccionar
   su texto ni abrir el menú de iOS. Aplica a todos los botones de Mónica y /ia. */
button, [role="button"], .mnav-volver, button *, [role="button"] * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* 2026-10-21 (orden del dueño): «← Volver» de Tiendas/Leads como sección fija
   al fondo (igual que «Trabajar en…» de /ia): franja oscura con línea arriba y
   el botón redondeado dentro. El botón ES la franja; la cápsula es ::before. */
.mnav-volver-zona::before {
    content: '';
    position: absolute;
    left: 14px; right: 14px; top: 14px; bottom: 16px;
    border-radius: 12px;
    background: #1b1c22;
    border: 1px solid rgba(255, 255, 255, 0.22);
    z-index: -1;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.mnav-volver-zona:hover, .mnav-volver-zona:active {
    background: rgba(12, 12, 18, 0.97) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.mnav-volver-zona:hover::before { border-color: rgba(139, 92, 246, 0.5); }
.mnav-volver-zona:active::before { background: #24252d; }

/* 2026-10-21: Modo edición en mensajes en cola (#queued-msg-drawer y .queued-swipe-row)
   Previene distorsión del panel, garantiza visibilidad de botones y autoexpansión fluida */
#queued-msg-drawer.is-editing-mode,
#queued-msg-drawer:has(.is-editing) {
    max-height: min(280px, calc(var(--alto-visible, 100dvh) - 130px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

.queued-edit-textarea {
    max-height: min(180px, calc(var(--alto-visible, 100dvh) - 190px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

.queued-swipe-row.is-editing {
    overflow: visible !important;
    border-color: rgba(251, 191, 36, 0.75) !important;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.25) !important;
}

.queued-swipe-row.is-editing .queued-swipe-actions,
.queued-swipe-row.is-editing .queued-swipe-actions-left {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.queued-swipe-row.is-editing .queued-swipe-content {
    display: block !important;
    transform: none !important;
    padding: 8px 10px !important;
    background: rgba(24, 18, 10, 0.98) !important;
}

.queued-swipe-row.is-editing .queued-swipe-content > span:first-child {
    display: none !important;
}


/* 2026-10-22 -- bug del dueño: con el teclado abierto y varias imágenes cargadas el
   cuadro de texto desaparecía (la barra, anclada abajo, crecía con las miniaturas en
   varias filas y se salía del área visible). Con teclado abierto las miniaturas van en
   UNA sola fila con scroll horizontal y la barra nunca supera el 70 % del alto visible,
   así el cuadro de escribir y los botones siempre quedan a la vista.
   2026-10-24: touch-action: pan-x, overscroll-behavior-x: contain y user-drag: none
   para que deslizar horizontalmente sobre las imágenes adjuntas sea 100% suave en iPhone/móvil. */
#upload-preview-container,
html.teclado-abierto #upload-preview-container,
body.teclado-abierto #upload-preview-container {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    min-height: 54px !important;
    max-height: 62px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-bottom: 4px !important;
}
#chat-form .chat-input-row,
.input-bar .chat-input-row {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-height: 48px !important;
    position: relative !important;
    z-index: 4 !important;
}
#chat-form .chat-controls-row,
.input-bar .chat-controls-row {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-height: 44px !important;
    position: relative !important;
    z-index: 5 !important;
}
#notes-chat-drawer-container,
#queued-msg-pill {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}
#upload-preview-container .upload-preview-pill,
html.teclado-abierto #upload-preview-container .upload-preview-pill,
body.teclado-abierto #upload-preview-container .upload-preview-pill {
    flex: 0 0 auto !important;
    touch-action: pan-x !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
#upload-preview-container .upload-preview-pill img,
#upload-preview-container .upload-preview-pill video,
#upload-preview-container .upload-preview-pill .pill-thumb-box {
    -webkit-user-drag: none !important;
    user-drag: none !important;
    touch-action: pan-x !important;
}
#upload-preview-container::-webkit-scrollbar {
    height: 3px !important;
}
#upload-preview-container::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.4) !important;
    border-radius: 999px !important;
}
html.teclado-abierto .app-wrapper,
body.teclado-abierto .app-wrapper,
html.teclado-abierto .main-area,
body.teclado-abierto .main-area {
    height: var(--alto-visible, 100dvh) !important;
    max-height: var(--alto-visible, 100dvh) !important;
    overflow: hidden !important;
    position: relative !important;
}
html.teclado-abierto #chat-form.input-bar,
body.teclado-abierto #chat-form.input-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(var(--alto-visible, 100dvh) - env(safe-area-inset-top, 0px) - 6px) !important;
    padding-bottom: 8px !important;
    box-shadow: none !important;
    overflow: visible !important;
    overscroll-behavior: none !important;
    z-index: 99999 !important;
}
@media screen and (min-width: 769px) {
    html.teclado-abierto #chat-form.input-bar,
    body.teclado-abierto #chat-form.input-bar {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: 800px !important;
    }
}

/* 2026-10-25 -- Con el cajón de Notas y Misiones abierto, el formulario NUNCA debe recortar
   con overflow:hidden hacia arriba; debe mantenerse overflow:visible para que el cajón desplegable
   y sus campos de texto/misiones no desaparezcan al emerger el teclado virtual en móviles. */
html.notes-drawer-open #chat-form.input-bar,
body.notes-drawer-open #chat-form.input-bar,
html.notes-drawer-open.teclado-abierto #chat-form.input-bar,
body.notes-drawer-open.teclado-abierto #chat-form.input-bar,
html.teclado-abierto.notes-drawer-open #chat-form.input-bar,
body.teclado-abierto.notes-drawer-open #chat-form.input-bar {
    overflow: visible !important;
}

/* 2026-10-23 (2.º bug del cuadro de texto en iPhone: con 3 líneas, solo la primera tenía fondo oscuro y el resto
   dejaba ver el degradado). El fondo oscuro interior era una capa aparte (::after) que WebKit no repinta cuando el
   cuadro crece. Ahora el propio textarea trae fondo oscuro opaco y su margen de 2 px deja visible el aro: ya no
   depende de esa capa. Los aros siguen girando (el dueño no pidió congelarlos). */
body form#chat-form .chat-input-row > textarea#chat-input,
body .chat-input-row > textarea#chat-input {
    background: #050508 !important;
    background-color: #050508 !important;
    margin: 2px !important;
    width: calc(100% - 4px) !important;
    border-radius: 18px !important;
    -webkit-border-radius: 18px !important;
}

/* 2026-10-23 / 2026-10-24 -- experiencia del chat: barra fija neon + pasos abajo + texto en streaming con gradiente */
.ia-fab-box { margin: 6px 0 4px; padding: 2px 0; width: 100%; box-sizing: border-box; }
.ia-fab-hd { display: none !important; }
.ia-fab-bar {
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    width: 100%;
    position: relative;
}
.ia-fab-bar i {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #22d3ee, #a855f7, #ec4899, #22d3ee);
    background-size: 200% 100%;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.85);
    animation: iaFabShimmer 2.2s linear infinite;
}
@keyframes iaFabShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.ia-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 12px; margin: 12px 0 4px; }
.ia-tool-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none !important; text-align: center; -webkit-tap-highlight-color: transparent; }
.ia-tool-sq { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: radial-gradient(circle, #a855f7 0%, #4c1d95 100%); border: 1.5px solid #c084fc; box-shadow: 0 0 18px rgba(168, 85, 247, 0.55); }
.ia-tool-card:active .ia-tool-sq { transform: scale(0.94); }
.ia-tool-nm { font-weight: 700; font-size: 0.85rem; color: #fff !important; }
.ia-tool-ur { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; color: #94a3b8 !important; }

/* 2026-10-24 -- Orden estricto del mensaje del agente: Texto de respuesta ARRIBA y Pasos SIEMPRE ABAJO */
.msg.bot {
    display: flex !important;
    flex-direction: column !important;
}
.msg.bot > .msg-fusion-tag { order: 1 !important; }
.msg.bot > .ia-fab-box { order: 2 !important; width: 100% !important; margin: 6px 0 4px !important; }
.msg.bot > .msg-text-content { order: 3 !important; }
.msg.bot > .web-sources-container { order: 4 !important; }
.msg.bot > .agent-reasoning-accordion,
.msg.bot > details.agent-reasoning-accordion {
    order: 99 !important;
    width: 100% !important;
    margin: 8px 0 10px 0 !important;
}
.msg.bot > .msg-footer-row { order: 100 !important; }

.msg.bot.loading { display: flex !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; }
.msg.bot.loading .ia-fab-box { width: 100% !important; flex: 0 0 auto !important; }
.msg.bot.loading .typing-status-caption { display: none !important; }

/* 2026-10-24 (orden del dueño): La barra queda fija antes de responder y se quita en cuanto empieza a escribir */
.msg.bot > .ia-fab-box { display: block !important; margin: 6px 0 4px; width: 100% !important; }
.msg.bot.has-text > .ia-fab-box,
.msg.bot:not(.sin-texto):not(.loading) > .ia-fab-box { display: none !important; }
.msg.bot.sin-texto .typing-cursor-indicator { display: none !important; }
.msg.bot:has(.ia-fab-box) .typing-cursor-indicator { display: none !important; }

/* 2026-10-24 (orden del dueño): en /ia y apps de cliente se retira la firma (.cli-divider) */
.cli-divider {
    display: none !important;
}

/* 2026-10-24 (orden del dueño): El texto se colorea con gradiente neón brillante durante el streaming en lugar de la barra */
@keyframes botTextStreamGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.msg.bot[data-is-processing="true"] .msg-text-content,
.msg.bot:has(.typing-cursor-indicator) .msg-text-content {
    background: linear-gradient(90deg, #38bdf8, #c084fc, #f472b6, #38bdf8) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: botTextStreamGradient 3s ease infinite !important;
    text-shadow: 0 0 18px rgba(192, 132, 252, 0.4) !important;
    display: inline-block !important;
}
.msg.bot[data-is-processing="true"] .msg-text-content *,
.msg.bot:has(.typing-cursor-indicator) .msg-text-content * {
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
}

/* 2026-10-25: Los bloques de código, tablas y badges NUNCA deben heredar texto transparente en streaming */
.msg.bot[data-is-processing="true"] .msg-text-content .chat-code-block-wrapper,
.msg.bot[data-is-processing="true"] .msg-text-content .chat-code-block-wrapper *,
.msg.bot:has(.typing-cursor-indicator) .msg-text-content .chat-code-block-wrapper,
.msg.bot:has(.typing-cursor-indicator) .msg-text-content .chat-code-block-wrapper *,
.msg.bot[data-is-processing="true"] .msg-text-content .msg-table-wrapper,
.msg.bot[data-is-processing="true"] .msg-text-content .msg-table-wrapper *,
.msg.bot:has(.typing-cursor-indicator) .msg-text-content .msg-table-wrapper,
.msg.bot:has(.typing-cursor-indicator) .msg-text-content .msg-table-wrapper *,
.msg.bot[data-is-processing="true"] .msg-text-content .monica-status-card,
.msg.bot[data-is-processing="true"] .msg-text-content .monica-status-card *,
.msg.bot:has(.typing-cursor-indicator) .msg-text-content .monica-status-card,
.msg.bot:has(.typing-cursor-indicator) .msg-text-content .monica-status-card * {
    -webkit-text-fill-color: initial !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}
.chat-code-header,
.chat-code-lang {
    color: #c084fc !important;
    -webkit-text-fill-color: #c084fc !important;
}
.chat-code-copy-btn {
    color: #e9d5ff !important;
    -webkit-text-fill-color: #e9d5ff !important;
}
.chat-code-block-wrapper pre code {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}
.chat-code-block-wrapper pre code .hl-kwd { color: #c084fc !important; -webkit-text-fill-color: #c084fc !important; font-weight: 600; }
.chat-code-block-wrapper pre code .hl-str { color: #34d399 !important; -webkit-text-fill-color: #34d399 !important; }
.chat-code-block-wrapper pre code .hl-com { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-style: italic; opacity: 0.9; }
.chat-code-block-wrapper pre code .hl-num { color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24 !important; }
.chat-code-block-wrapper pre code .hl-fn  { color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; }
.chat-code-block-wrapper pre code .hl-var { color: #818cf8 !important; -webkit-text-fill-color: #818cf8 !important; }
html[data-theme="grises"] .msg.bot[data-is-processing="true"] .msg-text-content,
html[data-theme="grises"] .msg.bot:has(.typing-cursor-indicator) .msg-text-content {
    background: linear-gradient(90deg, #ffffff, #94a3b8, #cbd5e1, #ffffff) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: botTextStreamGradient 3s ease infinite !important;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.3) !important;
}

/* 2026-10-24 -- Blindaje editor de imágenes: cero hueco inferior y ocultamiento de barra inferior al editar */
body.image-annotator-open .bottom-nav,
body.image-annotator-open nav.bottom-nav,
body.image-annotator-open #bottom-nav,
body.image-annotator-open #nav-btn-chats {
    display: none !important;
    visibility: hidden !important;
}
#image-annotator-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    background: #06060e !important;
    z-index: 9999999 !important;
}

/* 2026-10-23 -- cuadro de texto: al estirarse se veía el aro de colores rellenando el cuadro
   (repintado de iOS con el textarea transparente). Ahora el textarea es opaco y el aro queda
   solo como marco de 2px; así, aunque el repintado vaya un frame tarde, nunca se ve el degradado. */
form#chat-form .chat-input-row,
.input-bar .chat-input-row { padding: 2px !important; align-items: stretch !important; }
form#chat-form .chat-input-row > textarea#chat-input,
.input-bar .chat-input-row > textarea#chat-input {
    background: #050508 !important;
    background-color: #050508 !important;
    border-radius: 18px !important;
    align-self: stretch !important;
}
/* 2026-10-23/26 -- con el teclado abierto la página no se desplaza (solo el chat y el cuadro). */
html.teclado-abierto,
body.teclado-abierto {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: manipulation;
}

/* 2026-10-23 -- cuadro de texto largo en iPhone: al pasar de ~3 lineas WebKit dejaba de repintar el textarea y se veia
   el degradado del aro rellenando todo. Cuando el cuadro crece (.caja-crecida) el aro giratorio se apaga y queda un
   marco fijo violeta sobre fondo oscuro opaco: aunque el repintado falle, nunca se ve el degradado. */
.chat-input-row.caja-crecida::before,
.chat-input-row.caja-crecida::after { display: none !important; animation: none !important; }
.chat-input-row.caja-crecida {
    background: #050508 !important;
    border: 2px solid #a855f7 !important;
    padding: 0 !important;
}
.chat-input-row.caja-crecida > textarea#chat-input {
    -webkit-overflow-scrolling: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
}

/* 2026-10-23 (4.º intento) -- CUADRO DE TEXTO: el aro es el BORDE del propio textarea (fondo de 2 capas: relleno
   oscuro opaco en padding-box + degradado en border-box). Un solo elemento pinta aro y relleno juntos, así WebKit
   nunca deja el aro "corto" ni un fondo de colores al crecer/encoger el cuadro (antes el aro era el fondo del
   contenedor y en iPhone no se repintaba al crecer). El contenedor queda transparente, sin capas ni overflow. */
html body form#chat-form .chat-input-row:not(.voice-recording-active),
html body .input-bar .chat-input-row:not(.voice-recording-active) {
    overflow: visible !important;
    isolation: auto !important;
    contain: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 22px !important;
    align-items: stretch !important;
    height: auto !important;
    background: none !important;
    background-color: transparent !important;
    animation: none !important;
    box-shadow: none !important;
}
html body form#chat-form .chat-input-row:not(.voice-recording-active)::before,
html body form#chat-form .chat-input-row:not(.voice-recording-active)::after,
html body .input-bar .chat-input-row:not(.voice-recording-active)::before,
html body .input-bar .chat-input-row:not(.voice-recording-active)::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}
html body form#chat-form .chat-input-row > textarea#chat-input,
html body .input-bar .chat-input-row > textarea#chat-input {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    border: 2px solid transparent !important;
    border-radius: 22px !important;
    -webkit-border-radius: 22px !important;
    padding: 8px 16px !important;
    background-color: #050508 !important;
    background-image: linear-gradient(#050508, #050508), conic-gradient(from var(--aro-ang), #00d2ff, #a855f7, #ff3366, #00d2ff) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    background-repeat: no-repeat, repeat !important;
    background-size: 100% 100%, 100% 100% !important;
    animation: monica-caja-aro 4s linear infinite !important;
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.45) !important;
    transform: none !important;
    will-change: auto !important;
    -webkit-overflow-scrolling: auto !important;
}
/* 2026-10-24: el aro se mueve girando el ÁNGULO del degradado (propiedad registrada). Antes animaba background-position,
   pero otra regla lo fija con !important y el aro quedaba congelado. Sin @property (iOS < 16.4) se queda quieto, sin romperse. */
@property --aro-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes monica-caja-aro { from { --aro-ang: 0deg; } to { --aro-ang: 360deg; } }
/* Barra de aviso «Hay una versión nueva» y su botón «Más tarde»: mismo aro en movimiento. */
.aro-movil {
    border: 1.5px solid transparent !important;
    background-image: linear-gradient(#07050f, #07050f), conic-gradient(from var(--aro-ang), #22d3ee, #a855f7, #ec4899, #22d3ee) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    animation: monica-caja-aro 4s linear infinite !important;
}

/* Botón «Reiniciar ahora»: el cuadro completo se rellena con el degradado girando (como el botón Enviar). */
.aro-lleno {
    border: none !important;
    background-image: conic-gradient(from var(--aro-ang), #00d2ff, #a855f7, #ff3366, #00d2ff) !important;
    background-color: #a855f7 !important;
    animation: monica-caja-aro 3s linear infinite !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.55) !important;
}


/* 2026-10-23 / 2026-10-25 (orden del dueño): el aviso de reinicio se oculta con el teclado abierto.
   La tarjeta de tarea en curso (#chat-task-running-card) y la pestaña de notas (#notes-chat-pill-bar)
   se mantienen visibles en el chat para monitorear el progreso de la IA y comandos mientras se escribe.
   Orden expresa del dueño (2026-10-25): cuando abro notas, NO desaparece el menú de "tarea en curso".
   Orden expresa del dueño (2026-10-25): con teclado abierto, mantener disponible el menú de mensajes en cola. */
body.teclado-abierto #monica-aviso-reinicio {
    display: none !important;
}
/* 2026-10-26 (orden expresa del dueño): el modal/tarjeta de "tareas en curso" desaparece cuando abro el teclado */
body.teclado-abierto #chat-task-running-card,
html.teclado-abierto #chat-task-running-card {
    display: none !important;
}
#queued-msg-banner,
body.teclado-abierto #queued-msg-banner {
    width: 100% !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
}
#queued-msg-drawer,
body.teclado-abierto #queued-msg-drawer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: min(150px, calc(var(--alto-visible, 100dvh) - 210px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}
body.teclado-abierto #queued-msg-drawer.is-editing-mode,
body.teclado-abierto #queued-msg-drawer:has(.is-editing) {
    max-height: min(200px, calc(var(--alto-visible, 100dvh) - 185px)) !important;
}
@media (max-width: 768px) {
    .queued-edit-textarea {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }
}

/* Animación de esfumado para el banner y cajón de mensajes en cola al desaparecer */
@keyframes queuedEsfumarse {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
        filter: blur(6px);
    }
}
#queued-msg-banner.queued-esfumandose,
#queued-msg-drawer.queued-esfumandose {
    animation: queuedEsfumarse 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    pointer-events: none !important;
}

body.teclado-abierto #notes-chat-drawer {
    max-height: min(220px, calc(var(--alto-visible, 100dvh) - 160px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 2026-10-25 / 2026-10-26 (orden del dueño): Subir elementos del drawer de chats compactando padding superior sin huecos negros */
#notes-chat-drawer {
    max-height: calc(100dvh - 150px - env(safe-area-inset-top, 50px)) !important;
}
@media (max-width: 768px) {
    .sidebar-right {
        padding-top: 0 !important;
    }
    .sidebar-right .sidebar-header {
        padding-top: calc(max(env(safe-area-inset-top, 0px), 8px) + 2px) !important;
        padding-bottom: 6px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .sidebar-right .tab-content {
        flex: 1 1 0% !important;
        height: auto !important;
        min-height: 0 !important;
    }
}

/* 2026-10-24 / 2026-10-25 -- Notas archivadas y eliminar al deslizar: emoji arriba y texto abajo centrado */
.mnav-nota-card-arch-back {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 92px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.70rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.2px;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.3);
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    z-index: 1;
}
.mnav-nota-card-arch-back span:first-child,
.mnav-nota-card-arch-back .mnav-nota-card-arch-icon {
    font-size: 1.25rem;
    line-height: 1;
}
.mnav-nota-card-arch-back .mnav-nota-card-arch-label {
    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.mnav-nota-card-arch-back:active { background: #b45309; }

.mnav-nota-card-del-back {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 88px;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.70rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.2px;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.3);
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    z-index: 1 !important;
}
.mnav-nota-card-del-back span:first-child,
.mnav-nota-card-del-back .mnav-nota-card-del-icon {
    font-size: 1.25rem;
    line-height: 1;
}
.mnav-nota-card-del-back .mnav-nota-card-del-label {
    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.mnav-nota-card-del-back:active { background: #b91c1c; }
.mnav-nota-quick-archive {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
    padding: 3px 5px;
    opacity: 0.7;
    transition: all 0.2s ease;
}
.mnav-nota-quick-archive:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.4);
    opacity: 1;
    transform: scale(1.08);
}
.mnav-nota-card-front {
    position: relative !important;
    z-index: 2 !important;
}
.notes-hdr-btn.archive-btn {
    position: relative !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fde68a !important;
    font-size: 0.82rem !important;
    padding: 0 6px !important;
    min-width: 28px !important;
    max-width: 32px !important;
    height: 26px !important;
    max-height: 26px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    box-sizing: border-box !important;
}
.notes-hdr-btn.archive-btn:hover {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: #fef08a !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}
.notes-hdr-btn.archive-btn.active {
    background: rgba(245, 158, 11, 0.25) !important;
    border-color: rgba(245, 158, 11, 0.8) !important;
    color: #fef08a !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.5) !important;
}
.notes-hdr-btn.trash-btn {
    position: relative !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #6ee7b7 !important;
    font-size: 0.82rem !important;
    padding: 0 6px !important;
    min-width: 28px !important;
    max-width: 32px !important;
    height: 26px !important;
    max-height: 26px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    box-sizing: border-box !important;
}
.notes-hdr-btn.trash-btn:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #a7f3d0 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}
.notes-hdr-btn.trash-btn.active {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: rgba(16, 185, 129, 0.8) !important;
    color: #a7f3d0 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.5) !important;
}
.notes-hdr-btn.bulk-trash-btn {
    position: relative !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fca5a5 !important;
    font-size: 0.82rem !important;
    padding: 0 6px !important;
    min-width: 28px !important;
    max-width: 32px !important;
    height: 26px !important;
    max-height: 26px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    box-sizing: border-box !important;
}
.notes-hdr-btn.bulk-trash-btn:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #fecaca !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
}
.notes-hdr-btn.bulk-trash-btn.active {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.5) !important;
}

.notes-hdr-btn.new-note {
    background: linear-gradient(135deg, rgba(167,139,250,0.3) 0%, rgba(139,92,246,0.2) 100%) !important;
    border-color: rgba(167,139,250,0.5) !important;
    color: #f3e8ff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 26px !important;
    max-height: 26px !important;
    padding: 0 !important;
    font-size: 0px !important;
    line-height: 0 !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}
.notes-hdr-btn.new-note > span:first-child {
    font-size: 0.92rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.notes-hdr-btn.new-note span:not(:first-child) {
    display: none !important;
}
.notes-hdr-btn.new-note:hover {
    background: linear-gradient(135deg, rgba(167,139,250,0.45) 0%, rgba(139,92,246,0.35) 100%) !important;
    border-color: rgba(167,139,250,0.7) !important;
    color: #ffffff !important;
}

.notes-hdr-btn.back-btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #cbd5e1 !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 26px !important;
    max-height: 26px !important;
    padding: 0 !important;
    font-size: 0px !important;
    line-height: 0 !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}
.notes-hdr-btn.back-btn > span:first-child {
    font-size: 0.92rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.notes-hdr-btn.back-btn span:not(:first-child) {
    display: none !important;
}
.notes-hdr-btn.back-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

.ia-recargando-tokens-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    background: rgba(168, 85, 247, 0.12) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    margin: 6px 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
    width: fit-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.ia-recargando-tokens-card strong,
.ia-recargando-tokens-card span,
.ia-recargando-tokens-card p,
.ia-recargando-tokens-card div {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    min-width: 0 !important;
}

@media screen and (max-width: 768px) {
    .mnav-bloque-texto textarea,
    .mnav-mision-text-input,
    #metas-titulo-input {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }
}

/* ============================================================
   PANTALLA DE MANTENIMIENTO TEMPORAL DE CLIENTES Y /IA (2026-10-26)
   ============================================================ */
.pantalla-mantenimiento-cliente {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    background: rgba(9, 10, 16, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    z-index: 9999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
}
.pantalla-mantenimiento-cliente.activo {
    display: flex !important;
}
.pantalla-mantenimiento-card {
    background: rgba(18, 19, 26, 0.96) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(245, 158, 11, 0.15) !important;
    border-radius: 24px !important;
    padding: 36px 26px !important;
    max-width: 420px !important;
    width: 100% !important;
    text-align: center !important;
    color: #f1f5f9 !important;
    box-sizing: border-box !important;
}
.pantalla-mantenimiento-icon-wrap {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 20px !important;
    border-radius: 50% !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.25) !important;
    animation: pulseMantenimientoIcon 2.5s infinite ease-in-out !important;
}
@keyframes pulseMantenimientoIcon {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); }
    50% { transform: scale(1.06); box-shadow: 0 0 30px rgba(245, 158, 11, 0.5); }
}
.pantalla-mantenimiento-titulo {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px !important;
}
.pantalla-mantenimiento-desc {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    color: #94a3b8 !important;
    margin: 0 0 24px 0 !important;
}
.pantalla-mantenimiento-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
}
.pantalla-mantenimiento-pulse {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    box-shadow: 0 0 8px #f59e0b !important;
    animation: blinkPulse 1.4s infinite ease-in-out !important;
}
@keyframes blinkPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}


/* 2026-10-27 -- iPhone: con el teclado abierto iOS desplaza la vista (visualViewport.offsetTop) y el panel
   quedaba arriba fuera de la zona visible. --vv-top (JS) lo baja exactamente a la zona visible. */
html.teclado-abierto body .app-wrapper,
body.teclado-abierto .app-wrapper {
    top: var(--vv-top, 0px) !important;
}
html:not(.teclado-abierto) body .app-wrapper,
body:not(.teclado-abierto) .app-wrapper {
    top: 0 !important;
}

/* 2026-10-27 (orden del dueño): un mensaje que solo trae adjuntos no muestra el texto automático
   «Adjunto archivo/imagen para analizar.»; la burbuja enseña únicamente la imagen/archivo. */
.msg.user.msg-solo-adjunto .msg-text-content { display: none !important; }
.msg.user.msg-solo-adjunto .msg-attachments-wrapper { margin-top: 0 !important; }

/* 2026-10-27 (orden del dueño: «optimicemos Mónica e /ia para todo tipo de pantallas, incluyendo las que
   tienen notch»). Medido con Chromium + notch simulado (Emulation.setSafeAreaInsetsOverride):
   1) Pantallas angostas (<=340px: plegables, iPhone con zoom de pantalla): 4 botones de 44px + Enviar
      (mín. 84px) sumaban 288px y solo caben 256: micrófono y clip saltaban a una segunda fila.
   2) Teléfono horizontal con notch: la barra de escribir, la barra inferior y los mensajes quedaban
      debajo del notch lateral (safe-area-inset-left/right). */
@media screen and (max-width: 340px) {
    html body #chat-form .chat-controls-row { flex-wrap: nowrap !important; gap: 6px !important; }
    html body #chat-form .chat-controls-left,
    html body #chat-form .chat-controls-right { gap: 4px !important; flex: 0 0 auto !important; width: auto !important; }
    html body #chat-form .chat-controls-left > button,
    html body #chat-form .chat-controls-right > button,
    html body #chat-form .chat-controls-left > *,
    html body #chat-form .chat-controls-right > * {
        width: 40px !important; min-width: 40px !important; max-width: 40px !important;
        height: 40px !important; min-height: 40px !important; flex: 0 0 40px !important;
    }
    html body #chat-form .chat-controls-row > #send-btn { min-width: 52px !important; height: 40px !important; min-height: 40px !important; padding: 0 8px !important; flex: 1 1 auto !important; }
}
@media screen and (orientation: landscape) and (max-height: 520px) {
    html body #chat-form.input-bar,
    html body .bottom-nav {
        padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    }
    html body #messages {
        padding-left: max(12px, calc(env(safe-area-inset-left, 0px) + 4px)) !important;
        padding-right: max(12px, calc(env(safe-area-inset-right, 0px) + 4px)) !important;
    }
}
/* 2026-10-27 -- a 280-340px de ancho los 7 botones del cajón de Chats dejaban fuera de pantalla
   «Mi cuenta» y el botón de cerrar (medido: cerrar en x=298 de 280). Se compactan solo ahí. */
@media screen and (max-width: 340px) {
    html body .sidebar-right .sidebar-header div:has(> #close-history-btn) { gap: 3px !important; }
    html body .sidebar-right .sidebar-header div:has(> #close-history-btn) > button {
        width: 26px !important; min-width: 26px !important; max-width: 26px !important;
        height: 26px !important; min-height: 26px !important; flex: 0 0 26px !important; padding: 0 !important;
    }
    html body .sidebar-right .sidebar-header div:has(> #close-history-btn) > button svg { width: 15px !important; height: 15px !important; }
}