/* ================================================================
   CENTRAL DE AJUDA — chat.css
   Widget flutuante do assistente de IA. Usa os tokens Roomtec (--blue-*,
   --surface, --text-*, --r-*, --shadow-*) definidos em global.css.
   ================================================================ */

.hc-chat {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1080; /* acima do conteúdo; abaixo de modais Bootstrap (1055) só se necessário */
}

/* ---------- Botão flutuante (bubble) ---------- */
.hc-chat-bolha {
    width: 60px;
    height: 60px;
    border-radius: var(--r-pill);
    border: none;
    background: var(--blue-action);
    color: #fff;
    font-size: 1.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-blue);
    cursor: pointer;
    margin-left: auto;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hc-chat-bolha:hover { background: var(--blue-action-hover); transform: translateY(-2px); }
.hc-chat-bolha:active { background: var(--blue-action-press); transform: translateY(0); }
.hc-chat-bolha.aberto { background: var(--blue-brand); }

/* ---------- Janela de conversa ---------- */
/* A janela só fica visível quando o chat está aberto (v-show). Como o balão some
   nesse momento (o X do cabeçalho fecha), ela "encaixa" na vertical — do topo ao
   rodapé da viewport — em vez de flutuar como um cartão de 560px deixando espaço
   perdido embaixo. position: fixed é relativa à viewport (não há ancestral com
   transform). */
.hc-chat-janela {
    position: fixed;
    top: 16px;
    right: 24px;
    bottom: 16px;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: hc-chat-in .18s ease;
}
@keyframes hc-chat-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Cabeçalho ---------- */
.hc-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--blue-brand), var(--blue-action));
    color: #fff;
    flex: 0 0 auto;
}
.hc-chat-head-info { display: flex; align-items: center; gap: 10px; }
.hc-chat-head-acoes { display: flex; align-items: center; gap: 4px; }
.hc-chat-acao {
    background: transparent; border: none; color: #fff;
    width: 32px; height: 32px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.95rem; opacity: 0.9;
    transition: background .15s ease;
}
.hc-chat-acao:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); opacity: 1; }
.hc-chat-acao:disabled { opacity: 0.45; cursor: not-allowed; }
.hc-chat-avatar {
    width: 38px; height: 38px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.hc-chat-titulo { font-weight: 700; font-size: 0.98rem; line-height: 1.1; }
.hc-chat-sub { font-size: 0.74rem; opacity: 0.85; margin-top: 2px; }
.hc-chat-fechar {
    background: transparent; border: none; color: #fff;
    width: 32px; height: 32px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.95rem; opacity: 0.9;
    transition: background .15s ease;
}
.hc-chat-fechar:hover { background: rgba(255, 255, 255, 0.18); opacity: 1; }

/* ---------- Corpo / mensagens ---------- */
.hc-chat-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    background: var(--page-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hc-msg { display: flex; }
.hc-msg-user { justify-content: flex-end; }
.hc-msg-assistant { justify-content: flex-start; }

/* Wrapper coluna: bolha + ações de feedback abaixo dela. */
.hc-msg-bloco { display: flex; flex-direction: column; gap: 6px; max-width: 84%; }
.hc-msg-user .hc-msg-bloco { align-items: flex-end; }
.hc-msg-assistant .hc-msg-bloco { align-items: flex-start; }

.hc-msg-bolha {
    max-width: 100%;
    padding: 10px 13px;
    border-radius: var(--r-md);
    font-size: 0.9rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow-sm);
}
.hc-msg-assistant .hc-msg-bolha {
    background: var(--surface);
    color: var(--text-body);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.hc-msg-user .hc-msg-bolha {
    background: var(--blue-action);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.hc-msg-bolha.hc-msg-erro {
    background: var(--danger-wash);
    color: var(--danger);
    border-color: var(--danger);
}

.hc-cursor {
    display: inline-block;
    margin-left: 1px;
    color: var(--blue-action);
    animation: hc-blink 1s steps(2, start) infinite;
}
@keyframes hc-blink { to { visibility: hidden; } }

/* indicador "digitando" */
.hc-typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.hc-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-faint);
    animation: hc-typing 1.2s infinite ease-in-out;
}
.hc-typing span:nth-child(2) { animation-delay: .18s; }
.hc-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes hc-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Feedback (👍/👎 + tentar melhor + comentário) ---------- */
.hc-msg-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.hc-msg-pergunta-util { margin-right: 2px; }
.hc-fb-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    width: 28px; height: 26px;
    border-radius: var(--r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hc-fb-btn:hover { background: var(--blue-wash); color: var(--blue-action); border-color: var(--blue-soft); }
.hc-fb-obrigado { color: var(--success); display: inline-flex; align-items: center; gap: 5px; }
.hc-fb-link {
    background: transparent;
    border: none;
    color: var(--blue-action);
    cursor: pointer;
    font-size: 0.78rem;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 4px;
    margin-left: auto;
}
.hc-fb-link:hover:not(:disabled) { text-decoration: underline; }
.hc-fb-link:disabled { color: var(--text-faint); cursor: not-allowed; }

.hc-fb-coment { display: flex; gap: 6px; width: 100%; padding: 0 2px; }
.hc-fb-coment-input {
    flex: 1 1 auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 6px 9px;
    font-family: var(--font);
    font-size: 0.8rem;
    color: var(--text-strong);
    outline: none;
}
.hc-fb-coment-input:focus { border-color: var(--blue-action); box-shadow: 0 0 0 3px var(--blue-tint-12); }
.hc-fb-coment-enviar {
    flex: 0 0 auto;
    border: none;
    background: var(--blue-action);
    color: #fff;
    border-radius: var(--r-sm);
    padding: 0 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background .15s ease;
}
.hc-fb-coment-enviar:hover { background: var(--blue-action-hover); }

/* ---------- Rodapé / input ---------- */
.hc-chat-rodape {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.hc-chat-input {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 9px 12px;
    font-family: var(--font);
    font-size: 0.9rem;
    color: var(--text-strong);
    line-height: 1.4;
    max-height: 120px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hc-chat-input:focus {
    border-color: var(--blue-action);
    box-shadow: 0 0 0 3px var(--blue-tint-12);
}
.hc-chat-enviar {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: var(--r-md);
    border: none;
    background: var(--blue-action);
    color: #fff;
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.hc-chat-enviar:hover:not(:disabled) { background: var(--blue-action-hover); }
.hc-chat-enviar:disabled { background: var(--border-strong); cursor: not-allowed; }

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
    .hc-chat { right: 16px; bottom: 16px; }
    .hc-chat-bolha { width: 54px; height: 54px; font-size: 1.4rem; }
    /* Sem height fixo: o tamanho vem dos insets (top/bottom 0), que acompanham
       a viewport visível do Chrome Android (barra de URL e teclado). 100vh aqui
       mede a viewport MAIOR (barra escondida) e corta o rodapé com o input. */
    .hc-chat-janela {
        position: fixed;
        right: 0; left: 0; bottom: 0; top: 0;
        width: auto;
        max-width: 100vw;
        height: auto;
        max-height: none;
        border-radius: 0;
        border: none;
    }
}