/* ==========================================================
   GASPAR - EXPLICADOR VIRTUAL (CSS OTIMIZADO)
   ========================================================== */
/* ----------------------------------------------------------
   1. GLOBAIS E RESET
   ---------------------------------------------------------- */
strong { font-weight: 500; }
.gaspar-view, .gaspar-view * {
    box-sizing: border-box !important;
}
.gaspar-view {
    display: none;
    width: 100%;
    margin: 0 ;
    padding: 0;
}
.gaspar-view.active {
    display: flex;
}
/* Scrollbars personalizadas e discretas */
.gsp-mensagens-container,
.gsp-historico-lista {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #e2e2e2 transparent;
}
.gsp-mensagens-container::-webkit-scrollbar,
.gsp-historico-lista::-webkit-scrollbar { width: 8px; }
.gsp-mensagens-container::-webkit-scrollbar-track,
.gsp-historico-lista::-webkit-scrollbar-track { background: transparent; }
.gsp-mensagens-container::-webkit-scrollbar-thumb,
.gsp-historico-lista::-webkit-scrollbar-thumb { background: #e2e2e2; border-radius: 4px; }
.gsp-mensagens-container::-webkit-scrollbar-thumb:hover,
.gsp-historico-lista::-webkit-scrollbar-thumb:hover { background: #cfcfcf; }
/* ----------------------------------------------------------
   2. LANDING PAGE (INTRO E TÓPICOS)
   ---------------------------------------------------------- */
#gaspar-landing {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto; 
    min-height: calc(100vh - 140px);
    padding: 0 10px 40px 10px; 
    background: transparent;
}
.gaspar-intro-full {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: auto 0; 
}
.gaspar-titulo {
    font-family: 'Montserrat', sans-serif;
    color: #454545;
    font-size: 2.8rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}
.gaspar-subtitulo {
    font-family: 'Montserrat', sans-serif;
    color: #949494;
    font-size: 1.3rem;
    line-height: 1.6rem;
    font-weight: 600;
    margin: 0 0 25px 0;
}
.gaspar-descricao {
    color: #404040;
    font-size: 1.1rem;
    line-height: 1.55;
    max-width: 850px;
    margin: 0 auto 35px auto;
}
.gsp-btn-principal {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #6BA918;
    color: #fff;
    border: none;
    padding: 16px 36px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Montserrat', sans-serif;
}
.gsp-btn-principal:hover {
    background: #FA6B4B;
}
.gaspar-divisor {
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    line-height: 1.5rem;
    margin: 45px 0 10px 0;
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
}
.gaspar-divisor::before, .gaspar-divisor::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}
.gaspar-divisor span {
    padding: 0 15px;
    font-size: 0.95rem;
    font-weight: 500;
}
.gaspar-dica {
    font-size: 1rem;
    color: #777;
    margin: 0 0 25px 0;
    line-height: 1.5rem;
}
.gaspar-topicos-grupos {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}
.gaspar-grupo-ano {
    border: 1px solid #e6e6e6;
    border-radius: 16px; 
    padding: 24px 30px 32px 30px; 
    margin: 0;
    width: 100%;
    max-width: 100%; 
    background: #fdfdfd; 
    box-sizing: border-box;
}
.gaspar-grupo-ano legend {
    padding: 0 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #888; 
    text-transform: uppercase;
    letter-spacing: 1.2px; 
}
.gaspar-topicos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 18px;
    max-width: 100%;
    margin: 0 auto;
    justify-content: stretch;
}
.gsp-btn-topico {
    background: #f5f5f5;
    border: none;
    font-weight: 500;
    color: #454545;
    padding: 11px 6px;
    border-radius: 10px;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gsp-btn-topico:hover {
    background-color: #EFEFEF;
    color: #000;
}


/* ------------> Microfone */

.gsp-btn-mic {
    background: none;
    border: none;
    color: #737373;
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    transition: all 0.2s ease;
    position: relative;
}

@media (hover: hover) {
    .gsp-btn-mic:hover {
        background: #e0e0e0;
        color: #1a1a1a;
    }
}

/* Estado de gravação com animação a pulsar */
.gsp-btn-mic.recording {
    color: #e53e3e; /* Vermelho para indicar gravação */
    animation: gsp-pulse-mic 1.5s infinite;
}

@keyframes gsp-pulse-mic {
    0% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(229, 62, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); }
}


/* ----------------------------------------------------------
   3. PLANOS DE PREÇOS (PRICING)
   ---------------------------------------------------------- */
.gsp-planos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;
    max-width: 1150px;
    margin: 0 auto 30px auto;
}
/* Ícones dos métodos de pagamento, por baixo da grelha de planos */
.info-pag {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    width: 100%;
    max-width: 1150px;
    margin: 60px auto 20px auto;
    padding-top: 10px;
}
.on-met-pag {
    height: 30px;
    width: auto;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.2s;
}
/* Ajustes finos por logótipo (proporções diferentes entre si) */
.on-met-pag.Mult {
    height: 30px;
}
.on-met-pag.PayS {
    height: 38px;
	margin: -12px 0 0 0;
}
.on-met-pag.PayP {
    height: 25px;
}
@media (max-width: 600px) {
    .on-met-pag {
        height: 20px;
    }
}
.gsp-plano-card {
    background: #fff;
    border: 1px solid #e6e6e6; /* Cinza puro */
    border-radius: 16px;
    padding: 30px 24px;
    width: 210px;
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.gsp-plano-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}
.gsp-plano-card.destaque {
    border: 2px solid #6BA918;
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(107, 169, 24, 0.15);
    z-index: 2;
}
.gsp-plano-card.destaque:hover {
    transform: scale(1.03) translateY(-6px);
}
/* Card inativo: plano inferior ao plano atualmente ativo (só upgrade é permitido) */
.gsp-plano-card.inativo {
    opacity: 0.5;
    filter: grayscale(0.7);
    pointer-events: none;
}
.gsp-plano-card.inativo:hover {
    transform: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.gsp-plano-card.inativo.destaque {
    transform: none;
    border-color: #d4d4d4;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.gsp-plano-card.inativo .gsp-plano-badge {
    display: none;
}
.gsp-plano-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #6BA918;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.gsp-plano-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0; 
    padding-bottom: 20px;
}
.gsp-plano-nome {
    font-size: 1.1rem;
    color: #666666; 
    margin: 0 0 10px 0;
    font-weight: 600;
}
.gsp-plano-preco {
    font-size: 2.2rem;
    color: #333333; 
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
}
.gsp-plano-preco span {
    font-size: 0.95rem;
    color: #999999; 
    font-weight: 500;
}
.gsp-plano-validade {
    font-size: 0.8rem;
    color: #999999; 
    margin-top: 8px;
}
.gsp-plano-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
}
.gsp-plano-features li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    font-size: 0.9rem;
    color: #444444; 
    margin-bottom: 12px;
    line-height: 1.4;
}
.gsp-plano-features li svg {
    color: #6BA918;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.gsp-btn-plano {
    width: 100%;
    padding: 12px;
    border-radius: 999px;          /* pill shape */
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #6BA918;           /* verde do site */
    color: #fff;
    border: none;
    font-family: 'Montserrat', sans-serif;
}
.gsp-btn-plano:hover {
    background: #FA6B4B;           /* laranja no hover */
}
/* A classe "outline" deixa de ter aspeto diferente — todos os botões iguais */
.gsp-btn-plano.outline {
    background: #6BA918;
    border: none;
    color: #fff;
}
.gsp-btn-plano.outline:hover {
    background: #FA6B4B;
    color: #fff;
    border: none;
}
.gsp-btn-plano.disabled {
    background: #f0f0f0;
    border: none;
    color: #999999;
    cursor: not-allowed;
}
.gsp-btn-plano.disabled:hover {
    background: #f0f0f0;
    color: #999999;
}
/* ----------------------------------------------------------
   4. INTERFACE PRINCIPAL DO CHAT
   ---------------------------------------------------------- */
#gaspar-chat-interface {
    height: calc(100vh - 140px);
    min-height: 550px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
    position: relative; 
}
/* Modo Ecrã Inteiro */
#gaspar-chat-interface.gsp-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;          
    height: 100dvh;         
    min-height: 0;          
    border-radius: 0px;
    border-top: 1px solid #848484;    
    box-sizing: border-box;
    z-index: 100000;
    box-shadow: none;
}
/* ==========================================================
   MODO ECRÃ INTEIRO: tipografia dedicada
   Em fullscreen o Gaspar ocupa o ecrã todo e passa a ser o único
   foco, tal como um chat de IA "a sério" — por isso ganha uma
   fonte mais densa (Inter) e texto mais escuro, mais confortável
   para leitura prolongada e para quem tem alguma dificuldade
   visual. Fora do fullscreen mantém-se Montserrat, em harmonia
   com o resto do site.
   ========================================================== */
#gaspar-chat-interface.gsp-fullscreen,
#gaspar-chat-interface.gsp-fullscreen #gsp-input-texto,
#gaspar-chat-interface.gsp-fullscreen #gsp-input-texto::placeholder {
    font-family: 'Inter', 'Montserrat', sans-serif;
}
#gaspar-chat-interface.gsp-fullscreen .gsp-mensagens-container {
    font-family: 'Inter', 'Montserrat', sans-serif;
}
#gaspar-chat-interface.gsp-fullscreen .gsp-mensagens-container,
#gaspar-chat-interface.gsp-fullscreen .gsp-mensagens-container * {
    color: #333333 !important;
}
/* Preserva cores semânticas que não devem escurecer (links, botões de ação,
   feedback ativo, sugestões, etc.) — sobrepõem a regra genérica acima */

/* Protege a cor base (cinza claro) dos botões de feedback no modo ecrã inteiro */
#gaspar-chat-interface.gsp-fullscreen .gsp-btn-feedback,
#gaspar-chat-interface.gsp-fullscreen .gsp-btn-feedback * {
    color: #a3a3a3 !important;
}

/* Aplica o cinza mais escuro APENAS ao botão que tem o rato em cima */
#gaspar-chat-interface.gsp-fullscreen .gsp-btn-feedback:hover,
#gaspar-chat-interface.gsp-fullscreen .gsp-btn-feedback:hover * {
    color: #4d4d4d !important;
}

/* Protege as cores do feedback ativo (Positivo) no modo ecrã inteiro */
#gaspar-chat-interface.gsp-fullscreen .gsp-btn-feedback.ativo-positivo,
#gaspar-chat-interface.gsp-fullscreen .gsp-btn-feedback.ativo-positivo * {
    color: #6BA918 !important;
}

/* Protege as cores do feedback ativo (Negativo) no modo ecrã inteiro */
#gaspar-chat-interface.gsp-fullscreen .gsp-btn-feedback.ativo-negativo,
#gaspar-chat-interface.gsp-fullscreen .gsp-btn-feedback.ativo-negativo * {
    color: #e53e3e !important;
}

/* Protege as cores da bolha verde pequena dentro do chat no modo ecrã inteiro */
#gaspar-chat-interface.gsp-fullscreen .gsp-alerta-inline,
#gaspar-chat-interface.gsp-fullscreen .gsp-alerta-inline * {
    color: #4b7a0e !important;
}
/* "Gaspar está a pensar..." — mantém-se mais claro que o texto das
   mensagens, mesmo em fullscreen, para se distinguir como estado
   temporário/transitório e não como conteúdo lido. */
#gaspar-chat-interface.gsp-fullscreen #gsp-typing-loader,
#gaspar-chat-interface.gsp-fullscreen #gsp-typing-loader * {
    color: #999999 !important;
}
/* ==========================================================
   MODO ECRÃ INTEIRO: fundo uniforme #FCFCFC
   No modo normal todas estas zonas ficam brancas (harmonia com
   o resto do site). Em fullscreen, como o Gaspar passa a ocupar
   o ecrã todo sozinho, usa-se a mesma cor #FCFCFC da barra fina
   do menu global — uniforme em todas as zonas.
   ========================================================== */
#gaspar-chat-interface.gsp-fullscreen .gsp-chat-header,
#gaspar-chat-interface.gsp-fullscreen .gsp-mensagens-container,
#gaspar-chat-interface.gsp-fullscreen .gsp-input-container,
#gaspar-chat-interface.gsp-fullscreen .gsp-sidebar,
#gaspar-chat-interface.gsp-fullscreen .gsp-sidebar-header {
    background: #FCFCFC;
}
/* ==========================================================
   MODO ECRÃ INTEIRO EM ECRÃS LARGOS (>= 1100px): visual "clean"
   O header do chat passa a flutuar sobre a área de mensagens,
   com um degradê que esbate o texto que passa por baixo dele.
   A coluna de mensagens é centrada e mais estreita que os
   controlos do header, por isso o texto nunca fica sobreposto
   ao título "Gaspar" nem ao botão "Novo chat".
   ========================================================== */
@media (min-width: 1100px) {
    #gaspar-chat-interface.gsp-fullscreen .gsp-chat-main {
        position: relative;
    }
    #gaspar-chat-interface.gsp-fullscreen .gsp-chat-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        border-bottom: none;
        background: linear-gradient(to bottom,
            rgba(252,252,252,1) 0%,
            rgba(252,252,252,0.5) 30%,
            rgba(252,252,252,0.1) 100%);
    }
    #gaspar-chat-interface.gsp-fullscreen .gsp-mensagens-container {
        padding-top: 64px; /* compensa a altura normal do header, agora sobreposto */
    }
    #gaspar-chat-interface.gsp-fullscreen .gsp-sidebar-header {
        border-bottom: none;
    }
}
.gsp-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 100%;
}
.gsp-chat-header {
    padding: 12px 25px; 
    border-bottom: 1px solid #ececec;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
}
.gsp-header-title {
    font-weight: 500;
    font-size: 1.5rem;
    color: #454545;
    font-family: 'Montserrat', sans-serif;
	padding-left: 6px;
}
.gsp-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gsp-mensagens-container {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #ffffff;
}
.gsp-msg-imagem {
    max-width: 100%;
    border-radius: 6px;
    margin-bottom: 8px;
    display: block;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Feedback Bar nas Mensagens */
.gsp-msg-feedback-bar {
    display: flex;
    justify-content: flex-start; 
    gap: 4px;
    margin-top: 4px; 
    padding-top: 0;
    border-top: none; 
	transition: opacity 0.2s;
    /* Compensa o padding do botão (6px) para o ícone alinhar opticamente
       com a margem esquerda do texto, em vez de ficar deslocado */
    margin-left: -6px;
}


.gsp-btn-feedback {
    position: relative; 
    background: transparent;
    border: none;
    color: #a3a3a3;
    cursor: pointer;
	opacity: 0.6;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.gsp-btn-feedback:hover {
    background: #ececec;
    color: #4d4d4d;
}

/* Quando passas o rato na barra, todos os botões ficam 100% visíveis */
.gsp-msg-feedback-bar:hover .gsp-btn-feedback {
    opacity: 1;
}
.gsp-btn-feedback.ativo-positivo { color: #6BA918 !important; background: #f0fdf4; opacity: 1 }
.gsp-btn-feedback.ativo-negativo { color: #e53e3e !important; background: #fef2f2; opacity: 1 }
/* Tooltip do Feedback */
.gsp-btn-feedback::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px); 
    left: 0; 
    background: #2e2e2e; 
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px; 
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease; 
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.gsp-btn-feedback:hover::after {
    opacity: 1;
    visibility: visible;
}
/* ----------------------------------------------------------
   Tooltip estilizado para os botões de ícone do chat (anexo,
   microfone, perfil, ecrã inteiro, mostrar/ocultar painel lateral).
   Mesmo aspecto visual do tooltip do gsp-btn-feedback acima —
   fundo escuro, texto branco, cantos arredondados.
   Centrado por baixo do botão, exceto nos botões de abrir/fechar
   sidebar, que ficam no canto direito do cabeçalho — nesses o
   tooltip alinha à direita para não sair do ecrã.
   ---------------------------------------------------------- */
.gsp-btn-perfil[data-tooltip]::after,
.gsp-btn-ecra-inteiro[data-tooltip]::after,
.gsp-btn-anexo[data-tooltip]::after,
.gsp-btn-mic[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #2e2e2e;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.gsp-btn-abrir-sidebar[data-tooltip]::after,
.gsp-btn-fechar-sidebar[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #2e2e2e;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* Só mostra o tooltip em dispositivos com hover real (rato) —
   evita ficar "colado" no ecrã depois de um toque em mobile. */
@media (hover: hover) {
    .gsp-btn-perfil[data-tooltip]:hover::after,
    .gsp-btn-ecra-inteiro[data-tooltip]:hover::after,
    .gsp-btn-anexo[data-tooltip]:hover::after,
    .gsp-btn-mic[data-tooltip]:hover::after,
    .gsp-btn-abrir-sidebar[data-tooltip]:hover::after,
    .gsp-btn-fechar-sidebar[data-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
    }
}
/* ----------------------------------------------------------
   5. ZONA DE INPUT (ESCREVER MENSAGEM)
   ---------------------------------------------------------- */
.gsp-input-container {
    padding: 20px 25px;
    background: #ffffff;
    border-top: 1px solid #ececec;
}
.gsp-aviso-creditos {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #fed7d7;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    margin: 0 auto 14px auto;   /* centrado, alinhado com a caixa de input */
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.gsp-aviso-creditos svg { flex-shrink: 0; }
.gsp-sugestao-fullscreen {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f2f9e8;
    color: #4b7a0e;
    border: 1px solid #d3ecb0;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.5rem;
    margin: 0 auto 14px auto;
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.gsp-sugestao-fullscreen svg { flex-shrink: 0; }
.gsp-sugestao-fullscreen span { flex: 1; }
.gsp-sugestao-fechar {
    background: transparent;
    border: none;
    color: #4b7a0e;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.6;
}
.gsp-sugestao-fechar:hover { opacity: 1; }
.gsp-input-wrapper {
    /* Layout em grid: no estado normal, tudo numa linha só —
       [anexo] [texto ..............] [mic] [enviar]
       No estado multi-linhas (mobile), o textarea ocupa a linha toda
       em cima e os botões descem para uma segunda linha. */
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "anexo texto mic enviar";
    align-items: end;
    column-gap: 12px;
    row-gap: 6px;
    background: #f2f2f2;
    border-radius: 26px;
    padding: 8px 18px;
    border: 1.5px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%; 
	max-width: 760px;
    box-sizing: border-box;
	margin: 0 auto 0 auto;
}
.gsp-input-wrapper > #gsp-input-file { display: none; }
.gsp-input-wrapper > #gsp-input-pdf  { display: none; }
.gsp-input-wrapper > .gsp-anexo-container { grid-area: anexo; position: relative; }
.gsp-input-wrapper > #gsp-input-texto{ grid-area: texto;  }
.gsp-input-wrapper > .gsp-btn-mic    { grid-area: mic;    }
.gsp-input-wrapper > .gsp-btn-enviar { grid-area: enviar; }

/* Modo multi-linhas: textarea em cima ocupando as 4 colunas,
   botões numa linha por baixo — apenas ativado em ecrãs estreitos,
   quando o texto já não cabe numa linha só. */
.gsp-input-wrapper.gsp-multi-linhas {
    grid-template-areas:
        "texto texto  texto texto"
        "anexo .      mic   enviar";
    border-radius: 22px;
}
.gsp-input-wrapper:focus-within {
    border-color: #6BA918;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(107,169,24,0.08);
}
.gsp-btn-anexo {
    background: none;
    border: none;
    color: #737373;
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) {
    .gsp-btn-anexo:hover { background: #e0e0e0; color: #1a1a1a; }
}
/* Roda 45º quando o popover está aberto — o "+" vira um "×" visualmente,
   sinalizando que voltar a clicar fecha o menu. */
.gsp-btn-anexo.gsp-anexo-ativo {
    background: #e0e0e0;
    color: #1a1a1a;
    transform: rotate(45deg);
}

/* ==========================================================
   Popover de anexo — "Foto" / "Ficheiro (PDF)"
   Abre para cima do botão "+", ao estilo WhatsApp Web.
   ========================================================== */
.gsp-anexo-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    border: 1px solid #eee;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 20;
}
.gsp-anexo-popover.gsp-anexo-popover-aberto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.gsp-anexo-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    color: #3a3a3a;
    text-align: left;
    width: 100%;
}
.gsp-anexo-opcao svg { flex-shrink: 0; color: #737373; }
@media (hover: hover) {
    .gsp-anexo-opcao:hover { background: #f2f2f2; }
}
/* "Câmara" só faz sentido em telemóveis — escondida por defeito,
   revelada no mesmo breakpoint que já usas para o resto do site. */
.gsp-anexo-opcao-mobile {
    display: none;
}
@media (max-width: 850px) {
    .gsp-anexo-opcao-mobile {
        display: flex;
    }
}

/* ==========================================================
   Preview do PDF anexado — equivalente ao preview de imagem,
   mas em forma de "chip" com nome do ficheiro (sem miniatura
   visual óbvia possível para um PDF).
   ========================================================== */
.gsp-pdf-preview-container {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 0 10px 0;
    box-sizing: border-box;
}

/* Imagens de apoio que o Gaspar mostra dentro das próprias respostas
   (ex: [IMG:alfabeto_ponto] convertido pelo gaspar.js em <figure>) */
.gsp-msg-imagem {
    margin: 12px 0;
    text-align: center;
	padding: 14px 14px 10px 14px;
}
.gsp-msg-imagem img {
    max-width: 100%;
    width: 420px;
    border-radius: 10px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    cursor: zoom-in;
    box-sizing: border-box;
    padding-top: 8px;
    background: #fff;
}
.gsp-msg-imagem figcaption {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    color: #8a8a8a;
    font-style: italic;
}
.gsp-pdf-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 18px;
    background: #f2f2f2;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #6BA918;
}
.gsp-pdf-preview-nome {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    color: #3a3a3a;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#gsp-btn-remover-pdf {
    background: #e53e3e;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
#gsp-input-texto {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    resize: none;
    padding: 10px 0;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    min-height: 44px;
    max-height: 150px;
    height: 44px;
    line-height: 1.5;
    color: #2e2e2e;
    overflow-y: auto;
    overflow-x: hidden;
}
#gsp-input-texto::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}
#gsp-input-texto::-webkit-scrollbar { width: 5px; }
#gsp-input-texto::-webkit-scrollbar-thumb { background-color: #cccccc; border-radius: 10px; }
.gsp-btn-enviar {
    background: #6BA918;
    border: none;
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    margin-bottom: 4px;
}
@media (hover: hover) {
    .gsp-btn-enviar:hover { 
        background: #FA6B4B; 
        color: #fff; 
    }
}
.gsp-input-footer {
	text-align: center;
	font-size: 0.78rem;
	line-height: 1.1rem;

	font-weight: 400;
	color: #C7C7C7;
	margin: 12px 0;
}
/* ----------------------------------------------------------
   6. BARRA LATERAL (SIDEBAR E HISTÓRICO)
   ---------------------------------------------------------- */
.gsp-sidebar {
    width: 290px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
    overflow: hidden;
    height: 100%;
}
.gsp-sidebar-hidden .gsp-sidebar {
    width: 0px;
    opacity: 0;
    border: none;
}
@media (min-width: 851px) and (max-width: 1100px) {
    .gsp-sidebar { width: 290px; }
}
.gsp-sidebar-header {
    padding: 12px 10px 12px 20px; 
    border-bottom: 1px solid #ececec;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff;
}
/* Dropdown de Temas */
.gsp-dropdown-container {
    position: relative;
    flex: 1;                 /* ocupa o espaço disponível, deixando os ícones fixos à direita */
    min-width: 0;            /* permite que o texto encolha/corte em vez de empurrar */
    margin-right: 10px;      /* pequeno respiro entre o botão do tema e os ícones */
}
.gsp-topico-atual {
    font-weight: 600;
    color: #333;
    background: #fafafa;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 0.88rem;
    border: thin solid #e6e6e6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;   /* nome à esquerda, seta encostada à direita */
    transition: background 0.2s;
    font-family: 'Montserrat', sans-serif;
    width: 100%;                      /* ocupa a largura do container (que é fixo) */
    box-sizing: border-box;
}
.gsp-topico-atual:hover { background: #f0f0f0; }
#gsp-topico-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;    /* essencial para o ellipsis funcionar dentro do flex */
}
.gsp-topico-atual svg { flex-shrink: 0; }
.gsp-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    width: 180px;
    z-index: 100;
    overflow: hidden;
    max-height: calc(100vh - 290px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #e2e2e2 transparent;
}
.gsp-dropdown-menu::-webkit-scrollbar { width: 7px; }
.gsp-dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.gsp-dropdown-menu::-webkit-scrollbar-thumb { background: #e2e2e2; border-radius: 4px; }
.gsp-dropdown-menu::-webkit-scrollbar-thumb:hover { background: #cfcfcf; }
#gaspar-chat-interface.gsp-fullscreen .gsp-dropdown-menu {
    max-height: calc(100dvh - 150px);
}
.gsp-dropdown-menu.mostrar { display: block; }
.gsp-dropdown-menu div {
    padding: 6px 15px;
    font-size: 0.85rem;
    line-height: 1.3rem;
    color: #4d4d4d;
    cursor: pointer;
    border-bottom: 1px solid #f7f7f7;
    transition: background 0.2s;
}
.gsp-dropdown-menu div:last-child { border-bottom: none; }
.gsp-dropdown-menu div:hover { background: #f1f3f5; color: #333; }
.gsp-dropdown-menu .gsp-dropdown-subtitulo {
    padding: 10px 15px 5px 15px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #5C5C5C;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: default;
    border-bottom: none;
    background: #fafafa;
}
.gsp-dropdown-menu .gsp-dropdown-subtitulo:hover {
    background: #fafafa;   
    color: #5C5C5C;
}
/* Histórico de Conversas */
.gsp-historico-lista {
    padding: 20px 5px 20px 20px;
    flex: 1;
    overflow-y: auto;
}
.gsp-historico-titulo {
    font-size: 0.78rem;
    color: #5C5C5C;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 18px 0 8px 0;
    font-weight: 600;
}
.gsp-historico-titulo:first-child { margin-top: 0; }
.gsp-historico-vazio {
    font-size: 0.88rem;

    color: #C0C0C0;
    font-style: italic;
}
.gsp-historico-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    margin-bottom: 2px;
    margin-right: 6px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #505050;
    cursor: pointer;
    transition: background 0.15s;
}
.gsp-historico-item:hover { background: #f1f3f5; }
.gsp-historico-item.activo {
    background: #f1f3f5;       
    color: #404040;
    font-weight: 600;          
}
.gsp-item-estrela {
    color: #e6a817;
    font-size: 0.85rem;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
}
.gsp-item-titulo {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gsp-item-menu-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #505050;
    cursor: pointer;
    padding: 2px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.gsp-historico-item:hover .gsp-item-menu-btn { opacity: 1; }
.gsp-item-menu-btn:hover { background: #e6e6e6; color: #4d4d4d; }
@media (hover: none) { .gsp-item-menu-btn { opacity: 1; } }
/* Menu de Opções da Conversa */
.gsp-item-menu {
    position: fixed;
    width: 200px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 100001;
    font-family: 'Montserrat', sans-serif;
}
.gsp-item-menu-op {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.86rem;
    color: #404040;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
}
.gsp-item-menu-op span {
    width: 16px;
    text-align: center;
    color: #888;
    display: flex;
}
.gsp-item-menu-op:hover { background: #f1f3f5; }
.gsp-item-menu-apagar { color: #d22f2f; }
.gsp-item-menu-apagar span { color: #d22f2f; }
.gsp-item-menu-apagar:hover { background: #fdecec; }
/* ----------------------------------------------------------
   7. BOTÕES DE ACÇÃO (CABECALHO E SIDEBAR)
   ---------------------------------------------------------- */
.gsp-btn-nova-conversa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fafafa;
    color: #333;
    border: 1px solid #e6e6e6;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Montserrat', sans-serif;
}
.gsp-btn-nova-conversa:hover { background: #f0f0f0; }
.gsp-btn-perfil {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: #a3a3a3;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
}
.gsp-btn-perfil:hover { background: #f0f0f0; color: #4d4d4d; border-color: #e6e6e6; }
.gsp-btn-ecra-inteiro {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: #a3a3a3;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
}
.gsp-btn-ecra-inteiro:hover { background: #f0f0f0; color: #4d4d4d; border-color: #e6e6e6; }
.gsp-btn-fechar-sidebar,
.gsp-btn-abrir-sidebar {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: #a3a3a3;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
}
.gsp-btn-fechar-sidebar:hover,
.gsp-btn-abrir-sidebar:hover { background: #f0f0f0; color: #4d4d4d; border-color: #e6e6e6; }
/* Lógica de ocultar botões consoante o estado da sidebar */
.gsp-btn-abrir-sidebar { display: none; }
#gaspar-chat-interface.gsp-sidebar-hidden .gsp-btn-abrir-sidebar { display: inline-flex; }
.gsp-chat-header .gsp-btn-perfil { display: none; }
#gaspar-chat-interface.gsp-sidebar-hidden .gsp-chat-header .gsp-btn-perfil { display: inline-flex; }
.gsp-chat-header .gsp-btn-ecra-inteiro { display: none; }
#gaspar-chat-interface.gsp-sidebar-hidden .gsp-chat-header .gsp-btn-ecra-inteiro { display: inline-flex; }
/* ----------------------------------------------------------
   8. MODALS E OVERLAYS (LOGIN, REPORT, PERFIL E AÇÕES)
   ---------------------------------------------------------- */
.gsp-login-overlay,
.gsp-acao-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999999999;
    
    /* ALINHAMENTO DEFINITIVO */
    align-items: center;
    justify-content: center;
    padding: 26px 20px;   /* 26px topo/base (margem pedida), 20px laterais */
    
    opacity: 0;
    pointer-events: none;
    /* Removido o overflow e overscroll daqui para evitar bugs no iOS */
}

.gsp-login-overlay.aberto,
.gsp-acao-overlay.aberto {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.4s ease-out;
}

.gsp-login-modal,
.gsp-acao-modal {
    /* IMPORTANTE: os modais estão FORA de .gaspar-view, portanto não
       apanham a regra global de box-sizing:border-box no topo do ficheiro.
       Sem isto, o padding (35px+35px = 70px) é somado por cima do max-height
       e o modal transborda a viewport na vertical. */
    box-sizing: border-box;

    background: #fff;
    border-radius: 12px;
    width: 100%;
    padding: 35px 30px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    position: relative;
    font-family: 'Montserrat', sans-serif;
    transform: translateY(20px) scale(0.95);
    
    /* Altura adaptativa à viewport, deixando 26+26=52px de margem vertical.
       Duas linhas propositadamente: 100vh é fallback para browsers antigos;
       100dvh sobrepõe-lhe onde for suportado e corrige o iOS Safari quando
       a barra de endereços aparece/desaparece. Mesmo padrão já usado no
       #gaspar-chat-interface.gsp-fullscreen mais acima neste ficheiro. */
    max-height: calc(100vh - 52px);
    max-height: calc(100dvh - 52px);
    margin: 0; 
    
    display: flex;
    flex-direction: column;
}





/* .gsp-login-modal (login/report/perfil) tem botão de fechar fixo no
   canto — por isso o SCROLL fica no conteúdo interior, não no modal
   inteiro, para o botão nunca desaparecer ao rolar. */
.gsp-login-modal {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.gsp-login-conteudo,
.gsp-perfil-conteudo {
    overflow-y: auto;
    flex: 1;
    min-height: 0; /* essencial: permite ao filho flex encolher e ativar o scroll interno */
    -webkit-overflow-scrolling: touch; /* scroll suave por inércia no iOS */
    overscroll-behavior: contain;
}
.gsp-perfil-conteudo {
    padding: 4px 0 0 0;
}
/* .gsp-acao-modal não tem botão de fechar fixo — pode fazer scroll
   diretamente em si mesmo, sem necessidade de wrapper interior. */
.gsp-acao-modal {
    max-width: 420px;
    padding: 30px 28px 24px 28px;
    text-align: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
/* Scrollbar fina e discreta para o conteúdo dos modais (Firefox + WebKit) */
.gsp-login-conteudo,
.gsp-perfil-conteudo,
.gsp-acao-modal {
    scrollbar-width: thin;
    scrollbar-color: #d6d6d6 transparent;
}
.gsp-login-conteudo::-webkit-scrollbar,
.gsp-perfil-conteudo::-webkit-scrollbar,
.gsp-acao-modal::-webkit-scrollbar {
    width: 5px;
}
.gsp-login-conteudo::-webkit-scrollbar-track,
.gsp-perfil-conteudo::-webkit-scrollbar-track,
.gsp-acao-modal::-webkit-scrollbar-track {
    background: transparent;
}
.gsp-login-conteudo::-webkit-scrollbar-thumb,
.gsp-perfil-conteudo::-webkit-scrollbar-thumb,
.gsp-acao-modal::-webkit-scrollbar-thumb {
    background-color: #d6d6d6;
    border-radius: 10px;
}
.gsp-login-conteudo::-webkit-scrollbar-thumb:hover,
.gsp-perfil-conteudo::-webkit-scrollbar-thumb:hover,
.gsp-acao-modal::-webkit-scrollbar-thumb:hover {
    background-color: #bcbcbc;
}
.gsp-login-overlay.aberto .gsp-login-modal,
.gsp-acao-overlay.aberto .gsp-acao-modal {
    transform: translateY(0) scale(1);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gsp-login-fechar {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #aaa;
    line-height: 1;
    padding: 0;
}
.gsp-login-fechar:hover { color: #333; }
.gsp-login-conteudo h2,
.gsp-acao-modal h2 {
    color: #333;
    margin: 10px 0 18px 0;
    font-size: 24px;
    font-weight: 600;
}
.gsp-acao-modal h2 { font-size: 1.35rem; margin-bottom: 14px; }
.gsp-login-texto,
.gsp-acao-texto {
    color: #666;
    margin: 0 15px 30px 15px;
    line-height: 1.5;
    font-size: 1rem;
}
.gsp-acao-texto { margin: 0 0 22px 0; font-size: 0.95rem; }
.gsp-acao-texto strong { color: #333; font-weight: 600; }
.gsp-login-btn {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
    text-align: center;
}
.gsp-login-btn-login { background-color: #6BA918; color: #fff; }
.gsp-login-btn-login:hover { background-color: #FA6B4B; color: #fff; }
.gsp-login-btn-registo { background-color: #f0f0f0; color: #313131; border: 1px solid #A5A3A3; }
.gsp-login-btn-registo:hover { background-color: #d6D6D6; color: #313131; }
.gsp-login-divider { margin: 28px 0; border: none; border-top: 1px solid #ddd; }
.gsp-login-texto-pequeno { color: #666; font-size: 0.95rem; margin-bottom: 14px; }
/* Inputs e Botões do Modal de Ação */
.gsp-acao-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: #2e2e2e;
    margin-bottom: 22px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.gsp-acao-input:focus { border-color: #6BA918; box-shadow: 0 0 0 3px rgba(107,169,24,0.12); }
.gsp-acao-botoes { display: flex; gap: 12px; justify-content: center; }
.gsp-acao-btn {
    flex: 1;
    max-width: 160px;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.gsp-acao-btn-cancelar { background: #f0f0f0; color: #444; border: 1px solid #e0e0e0; }
.gsp-acao-btn-cancelar:hover { background: #e4e4e4; }
.gsp-acao-btn-confirmar { background: #6BA918; color: #fff; }
.gsp-acao-btn-confirmar:hover { background: #FA6B4B; }
.gsp-acao-btn-confirmar.perigo { background: #d22f2f; }
.gsp-acao-btn-confirmar.perigo:hover { background: #b71c1c; }
/* Conteúdo Modal Perfil */
.gsp-perfil-header { display: flex; align-items: center; gap: 14px; }
.gsp-perfil-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #F7F7F7;
    border: thin solid #E4E4E4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5c5c5c;
    flex-shrink: 0;
    overflow: hidden;        
}
.gsp-perfil-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.gsp-perfil-nome { font-size: 1.05rem; font-weight: 600; color: #333; font-family: 'Montserrat', sans-serif; }
.gsp-perfil-subtitulo { font-size: 0.8rem; color: #5c5c5c; margin-top: 2px; }
.gsp-perfil-secao { padding: 0 2px; }
.gsp-perfil-label { font-size: 1rem; font-weight: 600; color: #5c5c5c; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.gsp-perfil-valor { font-size: 0.95rem; font-weight: 600; color: #333; }
.gsp-perfil-validade { font-size: 0.82rem; line-height: 1.3rem; color: #5c5c5c; margin-top: 3px; }
.gsp-perfil-creditos-num { font-size: 1rem; font-weight: 600; color: #333; }
.gsp-barra-fundo { width: 100%; height: 4px; background: #ebebeb; border-radius: 99px; overflow: hidden; }
.gsp-barra-preenchimento { height: 100%; border-radius: 99px; background: #6BA918; transition: width 0.4s ease, background 0.3s; }
.gsp-barra-preenchimento.media { background: #f59e0b; }
.gsp-barra-preenchimento.aviso { background: #d22f2f; }
.gsp-perfil-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #454545;  
    margin-top: 18px;
    background-color: #F7F7F7;
    text-decoration: none;
    transition: background 0.15s;
    font-family: 'Montserrat', sans-serif;
}
.gsp-perfil-link:hover { background-color: #ECECEC; color: #333; }
.gsp-perfil-link-logout { color: #d22f2f; border: none; }
.gsp-perfil-link-logout:hover { background: #fdecec; color: #b71c1c; }
/* ----------------------------------------------------------
   9. MOBILE & MEDIA QUERIES
   ---------------------------------------------------------- */
.gsp-btn-menu-mobile {
    display: none;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    color: #6BA918;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

/* Botão "Ver Planos" no aviso de limite de mensagens */
.gsp-btn-limite-upgrade {
    background: #6BA918;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-family: 'Montserrat', sans-serif;
    margin-left: 8px;
}

.gsp-btn-limite-upgrade:hover {
    background: #FA6B4B;
}

/* Atraso de 1 segundo a MOSTRAR as tooltips no chat */
#gaspar-chat-interface [data-tooltip]:hover::after {
    transition-delay: 1s !important;
}

/* Sem atraso a ESCONDER (desaparecem imediatamente ao tirar o rato) */
#gaspar-chat-interface [data-tooltip]::after {
    transition-delay: 0s !important;
}


@media (max-width: 850px) {
    .gsp-chat-header { display: flex; }
    .gsp-btn-menu-mobile { display: block; }
    
    .gaspar-grupo-ano .gaspar-topicos-grid { grid-template-columns: repeat(2, 1fr); }
    
    .gsp-texto-nova { display: none; }
    .gsp-btn-nova-conversa { padding: 6px 8px; border-radius: 4px; color: #6BA918; order: 1; }

    /* Ícone de ecrã inteiro sempre visível no cabeçalho em mobile (deixa de depender
       da sidebar estar escondida, que é um mecanismo só de desktop). Ordem no
       cabeçalho (esquerda->direita): Novo chat, Hambúrguer, Ecrã inteiro. */
    .gsp-chat-header .gsp-btn-ecra-inteiro {
        display: flex !important;
        order: 3;
    }
    .gsp-btn-menu-mobile { order: 2; }

    /* Evita duplicar o ícone dentro da gaveta lateral em mobile, já que
       fica sempre visível no cabeçalho principal */
    .gsp-sidebar-header .gsp-btn-ecra-inteiro { display: none !important; }
    
    /* Layout Mobile da Sidebar */
    .gsp-sidebar-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 98;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-out;
    }
    .gsp-sidebar-open-mobile .gsp-sidebar-overlay { opacity: 1; pointer-events: auto; }
    
    .gsp-sidebar {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: min(300px, 85vw);
        z-index: 99;
        box-shadow: -4px 0 15px rgba(0,0,0,0.1);
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    .gsp-sidebar-open-mobile .gsp-sidebar { transform: translateX(0); }
    
    .gsp-btn-fechar-sidebar,
    .gsp-btn-abrir-sidebar { display: none !important; }
    /* Ajuste Destaque Plano Mobile */
    .gsp-plano-card.destaque { transform: scale(1); }
    .gsp-plano-card.destaque:hover { transform: translateY(-4px); }
}
@media (max-width: 450px) {

.gsp-login-modal,
    .gsp-acao-modal {
        padding: 26px 20px;
    }
.gsp-acao-modal {
    padding: 24px 18px 18px 18px;
}
	
/* Ícones dos métodos de pagamento, por baixo da grelha de planos */
.info-pag {
    margin: 30px auto -15px auto;
	gap: 18px;
}
.on-met-pag {
    height: 15px;
}
/* Ajustes finos por logótipo (proporções diferentes entre si) */
.on-met-pag.Mult {
    height: 15px;
}
.on-met-pag.PayS {
    height: 18px;
	margin: -4px 0 0 0;
}
.on-met-pag.PayP {
    height: 13px;
}
    #gaspar-landing { padding: 0 20px 40px 20px; }
	
	.gsp-header-title {padding-left: 12px;}
	
	
    .gaspar-intro-full { margin-top: 0; }
    .gaspar-titulo { font-size: 2.2rem; }
    .gaspar-subtitulo { font-size: 1.1rem; margin-bottom: 15px; }
    .gaspar-descricao { font-size: 1rem; margin-bottom: 25px; line-height: 1.6; }
    .gsp-btn-principal { padding: 12px 24px; font-size: 1rem; }
    .gaspar-divisor { margin: 25px 0 15px 0; }
    .gsp-btn-topico { padding: 10px 10px; font-size: 0.8rem; }
    .gaspar-grupo-ano .gaspar-topicos-grid { grid-template-columns: 1fr; }
    
    .gsp-chat-header { padding: 12px 15px; }
    .gsp-mensagens-container { padding: 5px; }
    /* Balão do user afastado 20px da margem esquerda */
    .gsp-user-bolha { margin-left: 20px; }
    .gsp-input-container { padding: 12px 15px; }
    .gsp-input-wrapper { padding: 8px 12px; column-gap: 8px; }
    .gsp-btn-anexo, .gsp-btn-mic, .gsp-btn-enviar { padding: 6px; }
    #gsp-input-texto { font-size: 0.95rem; }
    
    #gaspar-chat-interface.gsp-fullscreen { border: 0px solid #848484; }
		
}
/* Colunas de mensagens do chat (Gaspar, user, "a pensar"):
   sem espaçamento lateral extra em ecrãs largos (o max-width + centragem já basta);
   em ecrãs estreitos (< 850px) ganha 22px de respiro lateral, para tudo —
   texto do Gaspar, ícones de feedback e a bolha do user — não colar às bordas.
   Usa padding (não margin) com box-sizing:border-box para não causar overflow
   horizontal, já que o elemento também tem width:100%. */
.gsp-msg-col {
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 850px) {
    .gsp-msg-col {
        padding-left: 22px;
        padding-right: 22px;
    }
}
/* ==========================================================
   Reduz o espaço entre o cabeçalho do site e a caixa do Gaspar.
   O .e-conteudo-global tem margin-top:92px no estrutura.css
   (global, aplicado a todo o site) — aqui sobrepomo-lo apenas
   nesta página, já que gaspar-chat.css só carrega aqui.
   ========================================================== */
.e-conteudo-global {
    margin-top: 86px;
}
/* ==========================================================
   Indicador "Gaspar está a pensar..." — texto estático (fácil
   de ler) + três bolinhas com animação de saltito escalonada,
   o mesmo tipo de indicador usado no WhatsApp/Messenger/ChatGPT.
   ========================================================== */
.gsp-typing-texto {
    white-space: nowrap;
}
.gsp-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
}
.gsp-typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #999;
    display: inline-block;
    animation: gspDotBounce 1.2s infinite ease-in-out;
}
.gsp-typing-dots span:nth-child(1) { animation-delay: 0s; }
.gsp-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.gsp-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes gspDotBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}
/* ==========================================================
   VARIANTE ALTERNATIVA: um único ponto a pulsar (cresce/diminui)
   em vez das três bolinhas de saltito. Ativa-se automaticamente
   porque o gaspar.js agora usa a classe .gsp-typing-dot-single
   em vez de .gsp-typing-dots — as duas ficam aqui lado a lado
   para ser fácil comparar/voltar atrás.
   ========================================================== */
.gsp-typing-dot-single {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #C9C9C9;
    display: inline-block;
    margin: 3px 0 0 8px;
    animation: gspDotPulseScale 2.2s infinite ease-in-out;
}
@keyframes gspDotPulseScale {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.8); opacity: 0.85; }
}
/* ==========================================================
   Toggle switch (estilo iOS) — usado na preferência "Entrar
   sempre em ecrã inteiro" no modal de perfil.
   ========================================================== */
.gsp-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}
.gsp-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.gsp-switch-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #d9d9d9;
    border-radius: 26px;
    transition: background-color 0.2s ease;
}
.gsp-switch-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.gsp-switch input:checked + .gsp-switch-slider {
    background-color: #6BA918;
}
.gsp-switch input:checked + .gsp-switch-slider::before {
    transform: translateX(18px);
}
.gsp-switch input:focus-visible + .gsp-switch-slider {
    outline: 2px solid #6BA918;
    outline-offset: 2px;
}