/* =============================================================================
   chatbot-scope.css  —  CSBC 2026
   Carregado APÓS chatbot-styles.css e chatbot-responsive.css.

   Dois objetivos:
     1. Restaurar os estilos do website (.site-header, .site-footer, etc.)
        que o chatbot-styles.css pode ter sobrescrito.
     2. Fazer o .chat-card preencher corretamente o #chat-panel.
   ============================================================================= */

/* ── 1. RESTAURA .site-header DO WEBSITE ────────────────────────────────────
   Copia exata do website.css, com especificidade aumentada via :where(body)
   para garantir que prevalece sobre chatbot-styles.css.
   ─────────────────────────────────────────────────────────────────────────── */

body .site-header {
    background     : rgba(20, 25, 100, 0.88) !important;
    backdrop-filter: blur(18px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
    box-shadow     : 0 1px 0 rgba(255,255,255,0.06) inset,
                     0 2px 24px rgba(0,0,0,0.25) !important;
    position       : sticky !important;
    top            : 0 !important;
    z-index        : 1000 !important;
    height         : 70px !important;
    display        : flex !important;
    align-items    : center !important;
    padding        : 0 2% 0 5% !important;
    border-bottom  : 1px solid rgba(255,255,255,0.08) !important;
    border-radius  : 0 !important;
    /* Reset qualquer coisa que chatbot-styles possa ter feito */
    color          : inherit;
    font-family    : inherit;
}

body .nav-inner {
    width          : 100% !important;
    display        : flex !important;
    align-items    : center !important;
    justify-content: space-between !important;
}

body .nav-logo {
    display    : flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

body .nav-logo img {
    max-width : 175px !important;
    max-height: 52px !important;
    display   : block !important;
}

body .nav-menu {
    display    : flex !important;
    align-items: center !important;
    gap        : 0 !important;
    list-style : none !important;
    margin     : 0 !important;
    padding    : 0 !important;
}

body .nav-menu > li > a {
    display        : flex !important;
    align-items    : center !important;
    height         : 70px !important;
    padding        : 0 10px !important;
    color          : rgba(255,255,255,0.88) !important;
    text-decoration: none !important;
    font-size      : 13px !important;
    font-weight    : 500 !important;
    text-transform : uppercase !important;
    white-space    : nowrap !important;
    gap            : 4px !important;
}

body .nav-toggle {
    display   : none;
    background: none !important;
    border    : none !important;
    color     : #fff !important;
    font-size : 1.4rem !important;
    cursor    : pointer !important;
    padding   : 6px !important;
}

@media (max-width: 900px) {
    body .nav-menu   { display: none; }
    body .nav-toggle { display: block !important; }
    body .nav-menu.open {
        display        : flex !important;
        flex-direction : column !important;
        position       : fixed !important;
        top            : 70px !important;
        left           : 0 !important;
        right          : 0 !important;
        bottom         : 0 !important;
        background     : rgba(20,25,100,0.97) !important;
        overflow-y     : auto !important;
        z-index        : 950 !important;
        padding-bottom : 2rem !important;
        align-items    : flex-start !important;
    }
}

@media (max-width: 640px) {
    body .site-header {
        padding: 0 1rem 0 4% !important;
    }
}

/* ── 2. RESTAURA .site-footer DO WEBSITE ────────────────────────────────────*/

body .site-footer {
    background  : #080e32 !important;
    color       : rgba(180,200,255,0.45) !important;
    text-align  : center !important;
    padding     : 1.5rem !important;
    font-size   : 0.75rem !important;
    letter-spacing: 0.04em !important;
    border-top  : 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 0 !important;
}

body .site-footer strong {
    color      : rgba(255,255,255,0.8) !important;
    font-weight: 600 !important;
}

/* ── 3. CHAT-CARD DENTRO DO #chat-panel ─────────────────────────────────────*/

#chat-panel {
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
}

#chat-panel .chat-card {
    position       : relative;             /* anchors #init-overlay, #favorites-panel/#favorites-overlay, and #workspace-panel/#workspace-overlay absolute */
    width          : 100%;
    height         : 100%;
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
    border-radius  : inherit;
    margin         : 0;
    box-shadow     : none;
}

#chat-panel .messages-area {
    flex      : 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

#chat-panel .input-area {
    flex-shrink: 0;
}

/* ── 4. ELEMENTOS GLOBAIS DO CHATBOT (fora do panel) ────────────────────────*/

#init-overlay {
    position       : fixed !important;
    inset          : 0 !important;
    z-index        : 99999 !important;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 1rem;
}

#init-overlay.hidden {
    display: none !important;
}

#img-lightbox   { position: fixed !important; }
#toast          { position: fixed !important; }

/* ── 4b. FAVORITOS — restrito à caixa do chat, não à tela toda ──────────────
   chatbot-styles.css define #favorites-overlay/#favorites-panel como
   `position: fixed` cobrindo a viewport inteira (pensado para o chatbot
   standalone, onde o panel JÁ É a tela toda). Integrado no website, isso
   fazia o painel de favoritos cobrir o site inteiro em vez de ficar
   dentro da caixinha do chat.

   A correção tem duas partes:
     1. Aqui no CSS: os elementos passam a ser `position: absolute`,
        ancorados no ancestral posicionado mais próximo.
     2. No website.html: os elementos #favorites-overlay/#favorites-panel
        foram movidos no DOM para dentro de #chat-panel (que já é
        `position: fixed` e tem o tamanho exato do widget de chat), para
        que esse `position: absolute` se ancore na caixa do chat e não
        na viewport inteira. ─────────────────────────────────────────── */

#favorites-overlay,
#workspace-overlay {
    position : absolute !important;
    inset    : 0 !important;
    z-index  : 90 !important;          /* abaixo do init-overlay (100) */
    border-radius: inherit;
}

#favorites-panel,
#workspace-panel {
    position   : absolute !important;
    top        : 0 !important;
    bottom     : 0 !important;
    right      : 0 !important;
    left       : 0 !important;          /* mobile: ocupa a largura toda */
    width      : 100% !important;
    max-width  : 100% !important;
    height     : 100% !important;
    z-index    : 91 !important;
    border-radius: inherit;
    box-shadow : none !important;
}

@media (min-width: 768px) {
    /* Em telas maiores que o chat tem espaço de sobra: mantém o painel
       como uma "gaveta" lateral dentro da caixa, não a largura toda.    */
    #favorites-panel,
    #workspace-panel {
        width    : min(320px, 100%) !important;
        left     : auto !important;
    }
}

/* ── 5. OCULTA o dot de status interno do chatbot no modo integrado ─────────
   O website não precisa mostrar "Conectando…" no header do chat-card.      */

.chat-header-status-row { display: none !important; }

/* ── 6. SPLASH SCREEN (init-overlay integrado no website) ───────────────────
   O init-overlay agora contém um vídeo centralizado + título + mensagem.
   Fica sobre toda a viewport enquanto o chatbot inicializa, depois
   faz fade-out via JS (hideOverlay em chatbot-script.js).
   ─────────────────────────────────────────────────────────────────────────── */

/* init-overlay: splash dentro do .chat-card (position:absolute sobre o chat) */
#init-overlay {
    position        : absolute !important;
    inset           : 0 !important;
    z-index         : 100 !important;       /* sobre o conteúdo do chat-card */
    background      : rgba(8, 14, 50, 0.97);
    border-radius   : inherit;
    display         : flex !important;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    opacity         : 1;
    transition      : opacity 0.4s ease;
    overflow        : hidden;
}

#init-overlay.hidden {
    display: none !important;
}

.splash-inner {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 1.25rem;
    text-align     : center;
    padding        : 2rem;
}

#splash-video {
    width        : 120px;
    height       : 120px;
    border-radius: 50%;
    object-fit   : cover;
    box-shadow   : 0 0 0 6px rgba(74,107,255,0.18),
                   0 0 40px rgba(74,107,255,0.22);
    display      : block;
    flex-shrink  : 0;
    animation    : splashPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes splashPop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.splash-title {
    font-family   : 'Barlow Condensed', 'Inter', sans-serif;
    font-size     : 1.5rem;
    font-weight   : 800;
    color         : #ffffff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    animation     : splashFadeUp 0.5s 0.15s ease both;
}

.splash-msg {
    font-family : 'Inter', sans-serif;
    font-size   : 0.85rem;
    font-weight : 400;
    color       : rgba(180, 200, 255, 0.65);
    animation   : splashFadeUp 0.5s 0.25s ease both;
    min-height  : 1.2em;
}

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

/* ── FAB icon: imagem preenche todo o botão (definido no inline style do HTML) ── */
#chat-fab img {
    width        : 56px;
    height       : 56px;
    border-radius: 50%;
    object-fit   : cover;
    display      : block;
    pointer-events: none;
}

/* ── Bot avatar no chat-header: imagem ── */
.bot-avatar img {
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    border-radius: 50%;
    display      : block;
}

/* =============================================================================
   7. NEUTRALIZA O SISTEMA MOBILE "STANDALONE" DO chatbot-responsive.css
   ─────────────────────────────────────────────────────────────────────────────
   chatbot-responsive.css foi escrito para o chatbot rodando sozinho (widget
   embutido via iframe, sem o website por trás). Nesse cenário ELE controla
   o fullscreen mobile: classe `.mobile-open` no `.chat-card`, breakpoint
   767px, FAB próprio (#mobile-chat-fab) etc.

   Quando o chatbot está integrado DIRETAMENTE no website (sem iframe), é o
   próprio website.html que controla esse comportamento:
     - breakpoint 480px (não 767px)
     - classe `.open` no `#chat-panel` (não `.mobile-open` no `.chat-card`)
     - classe `body.chat-open-mobile` (não `body.chat-open`)
     - FAB próprio: `#chat-fab` (não `#mobile-chat-fab`)

   Como `chatbot-mobile.js` já se desativa neste contexto via
   `window.CSBC_SKIP_MOBILE_MODULE = true`, a classe `.mobile-open` NUNCA é
   adicionada ao `.chat-card`. Só que as regras de `chatbot-responsive.css`
   dentro de `@media (max-width: 767px)` continuam valendo independente de
   classe nenhuma para o ESTADO BASE do `.chat-card`:

       .chat-card {
           position: fixed !important;
           inset: 0 !important;
           transform: translateY(100%);
           opacity: 0;
           pointer-events: none;
           ...
       }

   Isso faz o `.chat-card` ficar permanentemente fixo, com opacity 0 e
   pointer-events none entre 0–767px — inclusive dentro do `#chat-panel`
   que o website já posicionou e abriu — resultando no chat "transparente
   e bugado" em telas de celular. Os blocos abaixo restauram o `.chat-card`
   a um estado neutro (relative, 100% do `#chat-panel`, visível) em toda a
   faixa mobile/tablet do chatbot-responsive.css, e escondem os elementos
   que pertencem exclusivamente ao sistema standalone.
   ============================================================================= */

@media (max-width: 767px) {

    /* Restaura o .chat-card para preencher o #chat-panel normalmente,
       deixando o #chat-panel (controlado pelo website.html) ser o único
       responsável por position/inset/transform/opacity/transição.        */
    #chat-panel .chat-card {
        position       : relative !important;
        inset           : auto !important;
        width           : 100% !important;
        height          : 100% !important;
        max-width       : none !important;
        max-height      : none !important;
        transform       : none !important;
        opacity         : 1 !important;
        pointer-events  : auto !important;
        transition      : none !important;
        z-index         : auto !important;
        border-radius   : inherit !important;
    }

    /* O FAB próprio do chatbot standalone nunca deve aparecer aqui —
       o website já tem o seu (#chat-fab).                                */
    #mobile-chat-fab {
        display: none !important;
    }

    /* O botão "voltar" injetado por chatbot-mobile.js nunca é injetado
       neste contexto (módulo desativado), mas por segurança garantimos
       que não apareça caso algo o insira indevidamente — o website usa
       seu próprio `.mobile-chat-close-btn`.                              */
    .mobile-back-btn {
        display: none !important;
    }
}

@media (max-height: 480px) and (orientation: landscape) and (max-width: 900px) {
    /* Mesmo ajuste para o caso de paisagem: o #chat-panel do website já
       cobre a tela via @media (max-width:480px); o .chat-card só precisa
       preencher o espaço disponível, sem position:fixed próprio.         */
    #chat-panel .chat-card {
        position: relative !important;
        inset    : auto !important;
    }
}