/* ======================================================
   CHATBOT — widget flotante de primera toma de contacto
   (Bloque 20, extraído a archivo propio en el Bloque 24)

   Hasta el bloque 24 este CSS vivía dentro de landing.css, porque
   el chat solo existía en las 12 páginas de servicios (que ya
   cargaban landing.css). Desde el bloque 24 el chat aparece en
   TODAS las páginas del sitio, incluidas las que usan style.css
   (home, contacto, cookies) y las páginas legales que no cargan
   ningún CSS del sitio (aviso legal, privacidad, mapa del sitio).

   Para que el widget se vea igual en cualquier página, sin
   depender de las variables --brand/--accent/etc. de style.css o
   landing.css (que no son idénticas entre sí), este archivo define
   sus propias variables, con los mismos colores de marca (#003366
   / #FF7F00) que ya se usan en el resto del sitio. Así este
   archivo funciona solo, con un único <link> en cada página.
   ====================================================== */
#mya-chat {
    --mc-brand: #003366;
    --mc-brand-2: #004b87;
    --mc-accent: #ff7f00;
    --mc-paper: #ffffff;
    --mc-bg: #f5f7fb;
    --mc-ink: #0b1f33;
    --mc-muted: #6b7b8c;
    --mc-shadow: 0 8px 24px rgba(0, 16, 40, 0.1), 0 2px 8px rgba(0, 16, 40, 0.06);
    --mc-radius: 18px;
}

#mya-chat-toggle {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    display: grid;
    place-items: center;
    background: var(--mc-brand);
    color: #fff;
    box-shadow: var(--mc-shadow);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}
#mya-chat-toggle:hover {
    background: var(--mc-brand-2);
    transform: translateY(-2px);
}
#mya-chat-toggle svg {
    width: 26px;
    height: 26px;
}

#mya-chat-panel {
    position: fixed;
    left: 16px;
    bottom: 84px;
    z-index: 999;
    width: min(360px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    background: var(--mc-paper);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
#mya-chat-panel[hidden] {
    display: none;
}

.mya-chat-header {
    background: var(--mc-brand);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mya-chat-header strong {
    display: block;
    font-size: 15px;
}
.mya-chat-header span {
    display: block;
    font-size: 12px;
    color: #cfe1ff;
}
#mya-chat-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

#mya-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--mc-bg);
}
.mya-chat-msg {
    max-width: 85%;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
}
.mya-chat-msg--bot {
    align-self: flex-start;
    background: var(--mc-paper);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--mc-ink);
    border-bottom-left-radius: 4px;
}
.mya-chat-msg--user {
    align-self: flex-end;
    background: var(--mc-brand);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.mya-chat-status {
    min-height: 18px;
    padding: 0 14px;
    font-size: 12px;
    color: var(--mc-muted);
}

#mya-chat-form {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--mc-paper);
}
#mya-chat-input {
    flex: 1;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #cfd6dd;
    padding: 0 12px;
    font-size: 14px;
    outline: 0;
}
#mya-chat-input:focus {
    border-color: var(--mc-brand-2);
}
#mya-chat-send {
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 0;
    background: var(--mc-accent);
    color: #0d1a26;
    font-weight: 700;
    cursor: pointer;
}
#mya-chat-send:disabled {
    opacity: 0.6;
    cursor: default;
}

.mya-chat-disclaimer {
    padding: 0 14px 12px;
    font-size: 11px;
    color: var(--mc-muted);
    line-height: 1.4;
}

@media (max-width: 480px) {
    #mya-chat-panel {
        left: 8px;
        right: 8px;
        width: auto;
        bottom: 78px;
        max-height: min(480px, calc(100vh - 100px));
    }
}