/* Vanelton Support — ajustes pontuais em cima do JoyUI, sem tocar nos
 * arquivos originais (joy.css/joy-utilities.css continuam intocados no
 * CDN). Carregado DEPOIS deles em head.php de propósito, pra vencer no
 * cascade normal sem precisar de !important.
 *
 * Referência de posição/tamanho real da topbar/dock (lidas direto de
 * cdn/joy/styles/joy.css, não estimadas):
 *   .joy-topbar { top: 20px; height: 56px; }               -> base ~76px
 *   .joy-dock   { bottom: 28px; } .joy-dock-item { height: 50px; } -> base ~78px
 * Os paddings abaixo somam uma folga generosa em cima disso de propósito.
 */

.support-chat-bubble {
    /* Bolha de mensagem do chat — não existe componente de chat no JoyUI
       ainda, então isso combina primitivas que já existem (.joy-glass +
       tokens de espaçamento/raio) em vez de inventar uma classe nova
       de "componente" que devia vir do design system. */
    padding: 12px 16px;
    border-radius: var(--joy-radius-md);
    max-width: 80%;
}

.support-chat-bubble.is-right { align-self: flex-end; }
.support-chat-bubble.is-left { align-self: flex-start; }

.support-textarea.joy-input {
    /* .joy-input original é pensado pra <input> de uma linha (height fixa);
       textarea de ticket/chat precisa de mais espaço vertical. */
    height: auto;
    min-height: 140px;
    padding: 12px var(--joy-space-4);
    resize: vertical;
}

.support-page-hero.joy-hero-section {
    /* O padrão de `.joy-hero-section` (110px no topo) é pensado pra
       landing page, mas na prática o título ainda ficava perto demais da
       topbar flutuante — aumentado bem além do padrão a pedido explícito.
       Embaixo, o padrão original (140px) é reduzido: aqui só tem um
       eyebrow + título curto, não faz sentido empurrar a listagem pra
       tão longe. */
    min-height: auto;
    padding-top: 190px;
    padding-bottom: var(--joy-space-4, 16px);
}

@media (max-width: 600px) {
    .support-page-hero.joy-hero-section { padding-top: 150px; }
}

/* ── Chat: shell de página cheia, sem rodapé, sem sobrepor topbar/dock ──
   Diferente das outras páginas do suporte (artigo, ticket...), o chat é
   pensado como uma tela de app, não uma página de conteúdo — por isso
   support/chat.php não inclui footer.php e usa esta classe em vez do
   .joy-section/.joy-hero-section padrão. */
.support-chat-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    max-width: 780px;
    margin: 0 auto;
    padding: 110px 5% 140px;
    gap: 16px;
}

.support-chat-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

.support-chat-topbar h1 {
    font-size: 1.4rem;
    margin: 0;
}

.support-chat-messages {
    flex: 1 1 auto;
    min-height: 0; /* pro overflow funcionar dentro de um flex column */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px;
}

.support-chat-composer {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .support-chat-shell { padding: 90px 4% 150px; }
}