/* ==========================================================================
   Chatbot AI Free Models — Refinamento de UI (Tema RadhaCore)
   --------------------------------------------------------------------------
   Camada de override carregada depois de `chatbot-style`.
   Objectivos:
     - coerência visual com o tema (tokens do Customizer);
     - tipografia controlada pela opção "Escala do Texto";
     - espaçamento compacto, sem compressão de conteúdo;
     - estados de foco visíveis e alvos de toque adequados;
     - suporte a Markdown, links, listas e tabelas nas respostas;
     - mobile, safe-area e prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens locais
   -------------------------------------------------------------------------- */

/*
 * Vidro — alfa das superfícies, por omissão.
 *
 * Vivem em `:root` e não em `#chatbox` por duas razões:
 *
 * 1. `inc/chatbot-wphb-integration.php` emite estes mesmos quatro tokens em
 *    `:root`, com a paleta efectivamente publicada. O CSS inline é impresso
 *    depois da folha e ambos têm a mesma especificidade, por isso o PHP ganha.
 *    Se o plugin não estiver activo, ficam estes valores de recurso.
 *
 * 2. São `rgba()` literais e não `color-mix()`. O Safari 15.4–16.1 suporta
 *    `backdrop-filter` mas não `color-mix`: aí a declaração ficaria inválida
 *    e o conteúdo ficaria **sem fundo nenhum**, com o texto do chat a ler-se
 *    directamente sobre a página. Com `rgba()` não há dependência nenhuma.
 *
 * Os valores são deliberadamente baixos. Com a superfície em branco puro,
 * um alfa de 0.72 era indistinguível de opaco — era essa a razão de o vidro
 * não se notar. 0.55 deixa ver a página desfocada sem comprometer o texto.
 */
:root {
    --chatbot-ui-glass: rgb(255 255 255 / 0.40);
    --chatbot-ui-glass-strong: rgb(255 255 255 / 0.60);
    --chatbot-ui-glass-input: rgb(255 255 255 / 0.65);
    --chatbot-ui-accent-glass: rgb(140 122 107 / 0.8);
    /*
     * O desfoque da janela do chatbot usa a mesma variável que a barra de
     * reservas: --booking-blur, publicada por inc/dynamic-css.php a partir
     * da opção "Desfoque da Barra de Reservas" do Customizer (0–30px).
     * Assim o utilizador controla o desfoque de ambos os elementos num
     * só lugar, sem tokens duplicados.
     */
}

#chatbox {
    /*
     * Escala de raios, do maior para o menor. Antes a janela usava 5px e
     * os controlos 0.625rem: o contentor era mais quadrado do que aquilo
     * que estava lá dentro, o que se lia como "widgets colados". Agora cada
     * degrau é um passo abaixo do anterior, como numa escala tipográfica.
     */
    --chatbot-ui-radius-lg: 0.875rem;
    --chatbot-ui-radius: 0.625rem;
    --chatbot-ui-radius-sm: 0.5rem;
    --chatbot-ui-radius-xs: 0.375rem;
    --chatbot-ui-radius-pill: 999px;

    --chatbot-ui-surface: var(
        --chatbot-chatbox-bg-color,
        var( --wphb-surface, var( --bg-color, #ffffff ) )
    );
    --chatbot-ui-surface-alt: var(
        --chatbot-bot-message-bg-color,
        var( --wphb-surface-hover, #f4f4f5 )
    );
    --chatbot-ui-border: var( --border-subtle, #e4e4e7 );
    --chatbot-ui-border-strong: var( --chatbot-ui-border );
    --chatbot-ui-border-strong: color-mix(
        in srgb,
        var( --chatbot-ui-border ) 70%,
        var( --text-primary, #18181b )
    );

    --chatbot-ui-text: var(
        --chatbot-bot-message-text-color,
        var( --text-primary, #18181b )
    );
    --chatbot-ui-muted: var(
        --text-secondary,
        var( --wphb-text-secondary, #71717a )
    );

    --chatbot-ui-accent: var( --chatbot-header-bg-color, #dd9933 );
    --chatbot-ui-accent-soft: transparent;
    --chatbot-ui-accent-soft: color-mix(
        in srgb,
        var( --chatbot-ui-accent ) 14%,
        transparent
    );
    --chatbot-ui-accent-line: var( --chatbot-ui-border );
    --chatbot-ui-accent-line: color-mix(
        in srgb,
        var( --chatbot-ui-accent ) 32%,
        transparent
    );

    /* Escala do Texto (Customizer) — fonte base de toda a interface */
    --chatbot-ui-scale: var( --text-scale-factor, 1 );

    --chatbot-ui-font: inherit;

    --chatbot-ui-text-xs: calc( 0.6875rem * var( --chatbot-ui-scale ) );
    --chatbot-ui-text-sm: calc( 0.8125rem * var( --chatbot-ui-scale ) );
    --chatbot-ui-text-base: calc( 0.9375rem * var( --chatbot-ui-scale ) );
    --chatbot-ui-text-md: calc( 1.0625rem * var( --chatbot-ui-scale ) );
    --chatbot-ui-text-lg: calc( 1.25rem * var( --chatbot-ui-scale ) );

    --chatbot-ui-gap: 0.5rem;
    --chatbot-ui-pad: 0.875rem;

    --chatbot-ui-shadow: 0 18px 48px -12px rgb( 15 23 42 / 0.25 ),
        0 2px 8px -2px rgb( 15 23 42 / 0.12 );
    --chatbot-ui-focus: 0 0 0 2px var( --chatbot-ui-surface ),
        0 0 0 4px var( --chatbot-ui-accent );
}

/* --------------------------------------------------------------------------
   2. Janela
   -------------------------------------------------------------------------- */

#chatbox {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    /*
     * O estado da janela é escrito directamente em `style.bottom` pelo
     * script do tema, sem animação JavaScript. A transição é do CSS,
     * por isso o fecho nunca pode ficar preso a meio caminho — o que
     * acontecia com o `animate()` do plugin. O bloco
     * `prefers-reduced-motion` abaixo anula-a.
     */
    transition: bottom 0.3s ease;

    width: min( 26rem, calc( 100vw - 2rem ) );
    max-width: calc( 100vw - 2rem );

    height: min(
        var( --chatbot-window-height, 600px ),
        calc( 100dvh - 7.5rem )
    );
    max-height: calc( 100dvh - 7.5rem );

    background: var( --chatbot-ui-glass-strong );
    -webkit-backdrop-filter: blur( var( --booking-blur, 16px ) )
        saturate( 1.6 );
    backdrop-filter: blur( var( --booking-blur, 16px ) ) saturate( 1.6 );

    /*
     * A janela é a única camada que desfoca. As secções interiores usam
     * cores com alfa (--chatbot-ui-glass*), por isso o desfoque do site
     * continua visível através de toda a caixa sem que cada filho precise
     * do seu próprio `backdrop-filter`. O `isolation: isolate` abaixo
     * garante que o desfoque não vaza para elementos exteriores.
     */
    border: 1px solid var( --chatbot-ui-border );
    border-radius: var( --chatbot-ui-radius-lg );
    box-shadow: var( --chatbot-ui-shadow );
    overflow: hidden;
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#chatbox *,
#chatbox *::before,
#chatbox *::after {
    box-sizing: border-box;
}

#chatbox.chatbox-closed {
    border-color: var( --chatbot-ui-border );
}

/* Fallsback quando 100dvh não é suportado */
@supports not ( height: 100dvh ) {
    #chatbox {
        max-height: calc( 100vh - 7.5rem );
    }
}

/* --------------------------------------------------------------------------
   3. Cabeçalho
   -------------------------------------------------------------------------- */

#chatbox-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;

    min-height: 2.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;

    background: var( --chatbot-ui-accent-glass );
    color: var( --chatbot-header-text-color, #ffffff );

    font-family: var( --chatbot-ui-font );
    font-size: var( --chatbot-ui-text-base );
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-align: left;

    border: 0;
    position: relative;
    overflow: visible;
}

#chatbox-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgb( 255 255 255 / 0.18 );
    pointer-events: none;
}

/*
 * O plugin posiciona este span com `position: absolute`, o que o retira do
 * fluxo e o coloca sobre o título. Reposto para item de flex, para o botão
 * ficar sempre no canto direito da barra e o título ter o espaço livre.
 */
#chatbox-header #chatbox-close {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0;
    margin: 0;

    font-size: 0; /* oculta o "x" textual */
    line-height: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    /* Quadrado, com a cor da página em vez do accent da barra. */
    background: var( --chatbot-ui-glass-strong );
    color: var( --chatbot-ui-text );
    border: 1px solid var( --chatbot-ui-border );
    border-radius: var( --chatbot-ui-radius-xs );
    box-shadow: 0 1px 3px rgb( 15 23 42 / 0.18 );
    transition: background-color 0.18s ease, color 0.18s ease,
        border-color 0.18s ease;
}

#chatbox-header #chatbox-close::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background-color: currentColor;
    /* X desenhado com duas barras cruzadas */
    clip-path: polygon(
        14% 0%,
        20% 0%,
        50% 30%,
        80% 0%,
        86% 0%,
        58% 42%,
        88% 88%,
        82% 94%,
        51% 56%        18% 94%,
        12% 88%,
        42% 50%
    );
}

#chatbox-header #chatbox-close:hover {
    background: var( --chatbot-ui-accent );
    color: var( --chatbot-header-text-color, #ffffff );
}

#chatbox-header #chatbox-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var( --chatbot-ui-accent ),
        0 0 0 4px var( --chatbot-ui-surface );
}

/* --------------------------------------------------------------------------
   4. Conversa
   -------------------------------------------------------------------------- */

#chatbox-content {
    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    padding: var( --chatbot-ui-pad );
    margin: 0;

    font-size: var( --chatbot-ui-text-sm );

   

    font-family: var( --chatbot-ui-font );
    font-size: var( --chatbot-ui-text-base );
    color: var( --chatbot-ui-text );
    line-height: 1.55;

    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var( --chatbot-ui-border-strong ) transparent;
}

#chatbox-content::-webkit-scrollbar {
    width: 0.5rem;
}

#chatbox-content::-webkit-scrollbar-track {
    background: transparent;
}

#chatbox-content::-webkit-scrollbar-thumb {
    background: var( --chatbot-ui-border-strong );
    border-radius: var( --chatbot-ui-radius-pill );
}

/* --------------------------------------------------------------------------
   5. Mensagens
   -------------------------------------------------------------------------- */

#chatbox .chat-message {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;

    max-width: 100%;
    margin: 0;
    padding: 0;
    animation: radha-chat-msg-in 0.22s ease both;
}

#chatbox .chat-message.user {
    flex-direction: row-reverse;
    margin: 0; /* remove o hack de margem negativa */
    align-self: flex-end;
}

#chatbox .chat-message.bot {
    align-self: flex-start;
}

#chatbox .chat-message img {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;

    object-fit: cover;
    border-radius: var( --chatbot-ui-radius-pill );
    border: 1px solid var( --chatbot-ui-border );
    background: var( --chatbot-ui-surface-alt );
}

#chatbox .chat-message .chat-bubble {
    max-width: min( 20rem, 78% );
    min-width: 0;

    padding: 0.625rem 0.8125rem;
    margin: 0;

    font-family: var( --chatbot-ui-font );
    font-size: var( --chatbot-ui-text-sm );
    line-height: 1.55;
    color: var( --chatbot-ui-text );

    background: var( --chatbot-ui-surface-alt );
    border: 1px solid var( --chatbot-ui-border );
    border-radius: var( --chatbot-ui-radius );

    box-shadow: 0 1px 2px rgb( 15 23 42 / 0.04 );
    overflow-wrap: break-word;
    word-break: break-word;
}

#chatbox .chat-message.user .chat-bubble {
    color: var( --chatbot-user-message-text-color, #ffffff );
    background: var(
        --chatbot-user-message-bg-color,
        var( --chatbot-ui-accent )
    );
    border-color: transparent;
    border-bottom-right-radius: var( --chatbot-ui-radius-sm );
}

#chatbox .chat-message.bot .chat-bubble {
    border-bottom-left-radius: var( --chatbot-ui-radius-sm );
}

#chatbox .chat-message.loading {
    align-self: flex-start;
}

#chatbox .chat-message.loading img {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    border: 0;
    background: transparent;
}

/* --------------------------------------------------------------------------
   6. Markdown dentro das respostas
   -------------------------------------------------------------------------- */

#chatbox .chat-bubble > *:first-child {
    margin-top: 0;
}

#chatbox .chat-bubble > *:last-child {
    margin-bottom: 0;
}

#chatbox .chat-bubble p {
    margin: 0 0 0.5em;
    font-size: inherit;
    line-height: inherit;
}

#chatbox .chat-bubble h1,
#chatbox .chat-bubble h2,
#chatbox .chat-bubble h3,
#chatbox .chat-bubble h4 {
    margin: 0.75em 0 0.35em;
    font-size: var( --chatbot-ui-text-md );
    font-weight: 600;
    line-height: 1.35;
}

#chatbox .chat-bubble ul,
#chatbox .chat-bubble ol {
    margin: 0.5em 0;
    padding-inline-start: 1.25em;
}

#chatbox .chat-bubble li {
    margin: 0.2em 0;
}

#chatbox .chat-bubble a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    overflow-wrap: anywhere;
}

#chatbox .chat-bubble a:hover {
    text-decoration-thickness: 2px;
}

#chatbox .chat-bubble a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: var( --chatbot-ui-radius-xs );
}

#chatbox .chat-bubble strong {
    font-weight: 600;
}

#chatbox .chat-bubble code {
    padding: 0.1em 0.35em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: rgb( 15 23 42 / 0.06 );
    border-radius: var( --chatbot-ui-radius-xs );
}

#chatbox .chat-bubble blockquote {
    margin: 0.5em 0;
    padding: 0.25em 0 0.25em 0.75em;
    border-inline-start: 3px solid var( --chatbot-ui-accent-line );
    color: var( --chatbot-ui-muted );
}

#chatbox .chat-bubble table {
    width: 100%;
    margin: 0.5em 0;
    border-collapse: collapse;
    font-size: var( --chatbot-ui-text-sm );
}

#chatbox .chat-bubble th,
#chatbox .chat-bubble td {
    padding: 0.35em 0.5em;
    text-align: start;
    border-bottom: 1px solid var( --chatbot-ui-border );
}

#chatbox .chat-bubble th {
    font-weight: 600;
    color: var( --chatbot-ui-muted );
}

#chatbox .chat-bubble hr {
    height: 1px;
    margin: 0.75em 0;
    border: 0;
    background: var( --chatbot-ui-border );
}

#chatbox .chat-bubble img {
    max-width: 100%;
    height: auto;
    border-radius: var( --chatbot-ui-radius-sm );
}

/* --------------------------------------------------------------------------
   7. Controlos
   -------------------------------------------------------------------------- */

#chatbox-controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    height: auto !important;
    min-height: 4rem;
    padding: 0.625rem 0.75rem;

    background: var( --chatbot-ui-glass-strong );
    border: 0;
    border-top: 1px solid var( --chatbot-ui-border );
}

#chatbox-input {
    flex: 1 1 auto;
    min-width: 0;

    width: auto;
    height: 3rem !important;
    min-height: 3rem;
    padding: 0.5rem 0.5rem;

    font-family: var( --chatbot-ui-font );
    font-size: var( --chatbot-ui-text-base ) !important;
    line-height: 1.35;
    color: var( --chatbot-ui-text );

    background: var( --chatbot-ui-glass-input );
    border: 1px solid var( --chatbot-ui-border );
    border-radius: var( --chatbot-ui-radius-sm );
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    appearance: none;
}

#chatbox-input::placeholder {
    color: var( --chatbot-ui-muted );
    opacity: 1;
}

#chatbox-input:hover {
    border-color: var( --chatbot-ui-border-strong );
}

#chatbox-input:focus {
    outline: none;
    border-color: var( --chatbot-ui-accent );
    box-shadow: var( --chatbot-ui-focus );
}

#chatbox-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 3rem;
    height: 3rem;
    padding: 0 0.875rem;

    font-family: var( --chatbot-ui-font );
    font-size: var( --chatbot-ui-text-base );
    font-weight: 600;
    line-height: 1;
    color: var( --chatbot-send-button-text-color, #ffffff );

    background: var(
        --chatbot-send-button-bg-color,
        var( --chatbot-ui-accent )
    );
    border: 1px solid transparent;
    border-radius: var( --chatbot-ui-radius-sm );
    cursor: pointer;

    transition: filter 0.18s ease, transform 0.12s ease,
        opacity 0.18s ease;
}

#chatbox-send:hover {
    filter: brightness( 0.94 );
}

#chatbox-send:active {
    transform: translateY( 1px );
}

#chatbox-send:focus-visible {
    outline: none;
    box-shadow: var( --chatbot-ui-focus );
}

/* Estado desabilitado aplicado pelo script do tema */
#chatbox.radha-chat-busy #chatbox-send {
    opacity: 0.6;
    cursor: progress;
}

/* --------------------------------------------------------------------------
   8. Rodapé
   -------------------------------------------------------------------------- */

#chatbot-footer {
    flex: 0 0 auto;
    padding: 0.375rem 0.875rem calc( 0.375rem + env( safe-area-inset-bottom ) );

    background: var( --chatbot-ui-glass-strong );
    border-top: 1px solid var( --chatbot-ui-border );
}

#chatbot-powered {
    font-family: var( --chatbot-ui-font );
    font-size: var( --chatbot-ui-text-xs );
    line-height: 1.4;
    color: var( --chatbot-ui-muted );
    text-align: center;
}

#chatbox-powered a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var( --chatbot-ui-border-strong );
}

#chatbox-powered a:hover {
    color: var( --chatbot-ui-text );
}

/* --------------------------------------------------------------------------
   9. Botão flutuante (launcher)
   -------------------------------------------------------------------------- */

#chatbot-container {
    z-index: 999;
}

#chatbox-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.5rem;
    height: 3.5rem;
    padding: 0;

    background: var( --chatbot-ui-accent-glass );
    -webkit-backdrop-filter: blur( var( --chatbot-ui-blur ) )
        saturate( 1.6 );
    backdrop-filter: blur( var( --chatbot-ui-blur ) ) saturate( 1.6 );
    border: 1px solid var( --chatbot-ui-accent-line );
    /* Circular e com a imagem recortada em círculo. */
    border-radius: 50%;
    box-shadow: 0 10px 24px -8px rgb( 15 23 42 / 0.35 );
    cursor: pointer;
    overflow: hidden;

    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#chatbox-button:hover {
    transform: translateY( -2px);
    box-shadow: 0 14px 30px -8px rgb( 15 23 42 / 0.4 );
}

#chatbox-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var( --bg-color, #ffffff ),
        0 0 0 5px var( --chatbot-ui-accent );
}

#chatbox-button img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   10. Balão proativo
   -------------------------------------------------------------------------- */

#chatbot-proactive-bubble {
    max-width: min( 17rem, calc( 100vw - 2rem ) );
    padding: 0.75rem 2rem 0.75rem 0.875rem;

    font-family: var( --chatbot-ui-font );
    font-size: var( --chatbot-ui-text-sm );
    line-height: 1.5;
    color: var( --chatbot-ui-text );

    background: var( --chatbot-ui-glass-strong );
    -webkit-backdrop-filter: blur( var( --chatbot-ui-blur ) )
        saturate( 1.6 );
    backdrop-filter: blur( var( --chatbot-ui-blur ) ) saturate( 1.6 );
    border: 1px solid var( --chatbot-ui-border );
    border-radius: var( --chatbot-ui-radius-lg );
    box-shadow: var( --chatbot-ui-shadow );
}

#chatbot-proactive-bubble::after {
    border-top-color: var( --chatbot-ui-glass-strong );
}

.chatbot-proactive-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var( --chatbot-ui-muted );
    border-radius: var( --chatbot-ui-radius-pill );
    cursor: pointer;
}

.chatbot-proactive-close:hover {
    color: var( --chatbot-ui-text );
    background: var( --chatbot-ui-surface-alt );
}

/* --------------------------------------------------------------------------
   11. Prechat (shortcode)
   -------------------------------------------------------------------------- */

#prechat-form {
    padding: var( --chatbot-ui-pad );
    font-family: var( --chatbot-ui-font );
    color: var( --chatbot-ui-text );
}

#prechat-form h3 {
    margin: 0 0 0.5rem;
    font-size: var( --chatbot-ui-text-md );
    font-weight: 600;
}

#prechat-form .form-field {
    margin-bottom: 0.75rem;
}

#prechat-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var( --chatbot-ui-text-sm );
    font-weight: 500;
    color: var( --chatbot-ui-muted );
}

#prechat-form input[type="email"] {
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-family: var( --chatbot-ui-font );
    font-size: var( --chatbot-ui-text-base );
    color: var( --chatbot-ui-text );
    background: var( --chatbot-ui-glass-input );
    border: 1px solid var( --chatbot-ui-border );
    border-radius: var( --chatbot-ui-radius-sm );
}

#prechat-form input[type="email"]:focus {
    outline: none;
    border-color: var( --chatbot-ui-accent );
    box-shadow: var( --chatbot-ui-focus );
}

#prechat-start-btn {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-family: var( --chatbot-ui-font );
    font-size: var( --chatbot-ui-text-base );
    font-weight: 600;
    color: var( --chatbot-send-button-text-color, #ffffff );
    background: var( --chatbot-ui-accent );
    border: 0;
    border-radius: var( --chatbot-ui-radius-sm );
    cursor: pointer;
    transition: filter 0.18s ease;
}

#prechat-start-btn:hover {
    filter: brightness( 0.94 );
}

#prechat-start-btn:focus-visible {
    outline: none;
    box-shadow: var( --chatbot-ui-focus );
}

/* --------------------------------------------------------------------------
   12. Shortcode — herança das cores do tema
   -------------------------------------------------------------------------- */

body .chatbot-shortcode-wrapper #chatbox {
    border: 1px solid var( --chatbot-ui-border );
    box-shadow: var( --chatbot-ui-shadow );
}

body .chatbot-shortcode-wrapper #chatbox-header {
    background: var( --chatbot-ui-accent-glass );
    font-size: var( --chatbot-ui-text-md );
    padding: 0.625rem 0.875rem;
}

/* O shortcode está sempre visível: nunca recebe o estado "fechado". */
body .chatbot-shortcode-wrapper #chatbox.radha-chat-closed {
    pointer-events: auto;
}

body .chatbot-shortcode-wrapper #chatbox-controls {
    height: auto !important;
    min-height: 4rem;
    padding: 0.75rem;
    border-top: 1px solid var( --chatbot-ui-border );
}

body .chatbot-shortcode-wrapper #chatbox-input {
    height: 3rem !important;
    font-size: var( --chatbot-ui-text-base ) !important;
    color: var( --chatbot-ui-text );
}

body .chatbot-shortcode-wrapper #chatbox-send {
    min-height: 3rem;
    font-size: var( --chatbot-ui-text-base );
    border-radius: var( --chatbot-ui-radius-sm );
}

/* --------------------------------------------------------------------------
   13. Estado aberto/fechado (classes aplicadas pelo script do tema)
   -------------------------------------------------------------------------- */

/*
 * O plugin anima apenas `bottom`. Fechada, a janela fica deslocada para
 * baixo, mas continua sobre o layout — por isso neutralizamos o ponteiro
 * para não interceptar cliques no conteúdo por baixo.
 */
#chatbox.radha-chat-closed {
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. Mobile — ecrã completo até 600px
   -------------------------------------------------------------------------- */

/*
 * A caixa flutuante de ~26rem deixa poucas linhas de conversa visíveis num
 * viewport estreito, e o teclado virtual empurra o campo de escrita para
 * fora do ecrã. Abaixo de 600px a janela passa a ocupar o ecrã inteiro.
 */
@media ( max-width: 600px ) {
    /*
     * BUG CORRIGIDO: `bottom: 0 !important` sobrepunha-se ao `style.bottom`
     * inline que o plugin escreve ao animar a abertura e o fecho. O `!important`
     * ganha sempre, por isso a janela ficava permanentemente visível e clicar
     * em fechar não produzia efeito visível. Aqui o `bottom` inline volta a
     * mandar e o estado é controlado por `transform`, que o plugin não mexe.
     */
    #chatbox {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        border: 0;
        border-radius: 0;
        box-shadow: none;
        z-index: 99999;

        /* Fecha por baixo do ecrã; abre exactamente no lugar. */
        transform: translateY( 100% );
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
    }

    #chatbox.radha-chat-open {
        transform: translateY( 0 );
        visibility: visible;
        transition: transform 0.3s ease, visibility 0s;
    }

    #chatbox-header {
        height: auto;
        padding-top: max( 0.375rem, env( safe-area-inset-top ) );
        border-radius: 0;
    }

    #chatbox-controls {
        padding-bottom: max( 0.625rem, env( safe-area-inset-bottom ) );
    }

    #chatbot-footer {
        padding-bottom: env( safe-area-inset-bottom );
    }

    /*
     * Em ecrã completo o botão flutuante ficaria por cima da conversa,
     * a bloquear a última mensagem.
     */
    body.chatbot-open #chatbot-container,
    body.chatbot-open #chatbot-proactive-bubble {
        display: none;
    }

    #chatbox .chat-message .chat-bubble {
        max-width: 86%;
    }
}

@supports not ( height: 100dvh ) {
    @media ( max-width: 600px ) {
        #chatbox {
            height: 100vh !important;
            max-height: 100vh !important;
        }
    }
}

/* --------------------------------------------------------------------------
   15. Tablet — janela flutuante com margens
   -------------------------------------------------------------------------- */

@media ( min-width: 601px ) and ( max-width: 768px ) {
    #chatbox {
        /* Neutraliza `left/right: 0` e o raio 0 do plugin. */
        right: auto;
        width: calc( 100vw - 1rem );
        max-width: calc( 100vw - 1rem );
        height: calc( 100dvh - 5rem );
        max-height: calc( 100dvh - 5rem );
        border-radius: var( --chatbot-ui-radius-lg );
    }

    #chatbox-header {
        height: auto;
        min-height: 3.25rem;
    }

    #chatbox-content {
        padding: 0.75rem;
        gap: 0.625rem;
    }

    #chatbox .chat-message .chat-bubble {
        max-width: 84%;
    }

    #chatbot-container {
        bottom: calc( 1rem + env( safe-area-inset-bottom ) ) !important;
    }

    #chatbox-button {
        width: 3.25rem;
        height: 3.25rem;
    }

    #chatbox-button img {
        width: 1.875rem;
        height: 1.875rem;
    }

    #chatbot-proactive-bubble {
        bottom: calc( 4.75rem + env( safe-area-inset-bottom ) );
    }
}

@supports not ( bottom: env( safe-area-inset-bottom ) ) {
    #chatbot-container {
        bottom: 1rem;
    }
}

/* --------------------------------------------------------------------------
   16. Preferências de movimento e contraste
   -------------------------------------------------------------------------- */

@keyframes radha-chat-msg-in {
    from {
        opacity: 0;
        transform: translateY( 4px );
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media ( prefers-reduced-motion: reduce ) {
    #chatbox,
    #chatbox-button {
        transition: none !important;
    }

    /*
     * Sem transição, o `visibility` ficaria atrasado. Em ecrã completo a
     * janela é deslocada por `transform`, por isso zerar o atraso é
     * obrigatório para não ficar escondida ao abrir.
     */
    #chatbox {
        transition-delay: 0s !important;
    }

    #chatbox *,
    #chatbox *::before,
    #chatbox *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    #chatbox-button:hover {
        transform: none;
    }

    #chatbox-send:active {
        transform: none;
    }
}

@media ( prefers-contrast: more ) {
    #chatbox {
        border-width: 2px;
    }

    #chatbox .chat-message .chat-bubble {
        border-width: 2px;
    }

    #chatbox-header #chatbox-close {
        border-width: 2px;
    }
}

/* --------------------------------------------------------------------------
   17. Impressão
   -------------------------------------------------------------------------- */

@media print {
    #chatbox,
    #chatbot-container,
    #chatbot-proactive-bubble {
        display: none !important;
    }
}
/* --------------------------------------------------------------------------
   16. Vidro — recurso opcional e preferências do sistema
   --------------------------------------------------------------------------
   O desfoque é um extra: onde não existe, as superfícies têm de voltar a
   ser opacas, senão o texto fica a ler-se contra o conteúdo da página.
   O mesmo vale para quem pede menos transparência ou mais contraste.
   ------------------------------------------------------------------------ */

/* Navegador sem backdrop-filter: superfícies opacas. */
@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
    #chatbox,
    #chatbot-proactive-bubble,
    #chatbox-button {
        background: var( --chatbot-ui-surface );
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #chatbox-button,
    #chatbot-proactive-bubble {
        background: var( --chatbot-ui-accent );
    }

    #chatbox-header,
    body .chatbot-shortcode-wrapper #chatbox-header {
        background: var( --chatbot-ui-accent );
    }

    #chatbox-content {
        background: var( --chatbot-ui-surface );
    }

    #chatbox-controls,
    #chatbot-footer,
    #chatbox-header #chatbox-close {
        background: var( --chatbot-ui-surface );
    }

    #chatbox-input,
    #prechat-form input[type="email"] {
        background: var( --chatbot-ui-surface );
    }
}

/* Quem pede menos transparência: o vidro deixa de ser opção. */
@media ( prefers-reduced-transparency: reduce ) {
    #chatbox,
    #chatbot-proactive-bubble,
    #chatbox-button {
        background: var( --chatbot-ui-surface );
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #chatbox-button {
        background: var( --chatbot-ui-accent );
    }

    #chatbox-header,
    body .chatbot-shortcode-wrapper #chatbox-header {
        background: var( --chatbot-ui-accent );
    }

    #chatbox-content {
        background: var( --chatbot-ui-surface );
    }

    #chatbox-controls,
    #chatbot-footer,
    #chatbox-header #chatbox-close,
    #chatbox-input,
    #prechat-form input[type="email"] {
        background: var( --chatbot-ui-surface );
    }
}

/* Mais contraste: fundo opaco e contornos marcados. */
@media ( prefers-contrast: more ) {
    #chatbox {
        background: var( --chatbot-ui-surface );
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: var( --chatbot-ui-border-strong );
    }

    #chatbox-content,
    #chatbox-controls,
    #chatbot-footer {
        background: var( --chatbot-ui-surface );
    }

    #chatbox-header {
        background: var( --chatbot-ui-accent );
        border-bottom: 1px solid var( --chatbot-ui-border-strong );
    }
}