/* ============================================================
   Chat NutriCard — widget flutuante
   Reescrito 20-08-2026 a partir do protótipo do dono no Figma:
   páginas "📐 01 · Wireframes" (48 telas) e "🧩 02 · Componentes" (20 componentes).
   Cores, medidas, raios e tipos vieram das specs dos componentes-mestre.
   Fonte: o protótipo usa Inter (default do Figma); aqui fica a Poppins do site.
   UI mockada: IA e atendimento humano SIMULADOS client-side.
   ============================================================ */

.nchat {
    /* tokens lidos do protótipo (🧩 02 · Componentes) */
    --nc-azul: #005bff;
    --nc-azul-hover: #5285ff;
    --nc-azul-press: #004bd9;
    --nc-azul-fraco: #dbe7ff;
    --nc-azul-medio: #8aaeff;
    --nc-chip-hover: #eef4ff;
    --nc-balao: #f5f5f5;
    --nc-texto: #333333;
    --nc-texto-2: #8c8c8c;
    --nc-borda: #bfbfbf;
    --nc-borda-suave: #d9d9d9;
    --nc-verde: #4db04f;
    --nc-vermelho: #d94040;
    --nc-vazio: #e8e8e8;

    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    font-family: var(--font-heading);
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

/* ============================================================
   Botão flutuante  (A1–A6 / Chat/Botão Flutuante)
   ============================================================ */
.nchat__bolha {
    position: relative;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--nc-azul);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: none;
    transition: background .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

.nchat__bolha[hidden] { display: none; }

@media (hover: hover) {
    .nchat__bolha:hover { background: var(--nc-azul-hover); }
}

.nchat__bolha:active { background: var(--nc-azul-press); }

.nchat__bolha svg {
    width: 22px;
    height: 22px;
}

/* Estado=notificação */
.nchat__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--nc-vermelho);
    border: 2px solid #fff;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 500;
    display: grid;
    place-items: center;
}

.nchat__badge[hidden] { display: none; }

/* ---- Balão teaser (A6 / Chat/Balão Teaser) ---- */
.nchat__teaser {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 12px 14px;
    background: #fff;
    border: 1px solid var(--nc-borda-suave);
    border-radius: 12px;
    font-size: 0.875rem;
    color: var(--nc-texto);
    white-space: nowrap;
}

.nchat__teaser[hidden] { display: none; }

.nchat__teaser-fechar {
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    color: var(--nc-texto-2);
    cursor: pointer;
}

.nchat__teaser-fechar svg {
    width: 16px;
    height: 16px;
}

/* ============================================================
   Barra minimizada  (F1–F3)
   ============================================================ */
.nchat__mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid var(--nc-borda-suave);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.nchat__mini[hidden] { display: none; }

.nchat__mini-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nchat__mini-nome {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nc-texto);
    white-space: nowrap;
}

.nchat__mini-status {
    font-size: 0.8125rem;
    color: var(--nc-texto-2);
    white-space: nowrap;
}

.nchat__mini-seta {
    width: 18px;
    height: 18px;
    color: var(--nc-texto);
    flex: none;
}

.nchat__mini-badge {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--nc-vermelho);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    display: grid;
    place-items: center;
    flex: none;
}

.nchat__mini-badge[hidden] { display: none; }

/* ============================================================
   Janela  (B2 · 380×640, radius 16, borda #bfbfbf)
   ============================================================ */
/* [hidden] perde do display:flex por especificidade — sem isto o minimizar não fecha nada */
.nchat__janela[hidden] { display: none; }

.nchat__janela {
    position: relative;
    width: 380px;
    height: min(640px, calc(100vh - 48px));
    background: #fff;
    border: 1.5px solid var(--nc-borda);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Cabeçalho (Chat/Cabeçalho · 65px, fundo branco) ---- */
.nchat__cabeca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px 12px 16px;
    min-height: 65px;
    background: #fff;
    border-bottom: 2px solid var(--nc-borda-suave);
    flex: none;
}

/* Chat/Avatar — Tipo=bot */
.nchat__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #005bff 0%, #008cff 50%, #005bff 100%);
    color: #fff;
    font-size: 0.75rem;
    display: grid;
    place-items: center;
    flex: none;
    user-select: none;
}

/* Chat/Avatar — Tipo=humano */
.nchat--humano .nchat__avatar,
.nchat__avatar--humano {
    background: linear-gradient(135deg, #005bff 0%, #003ca4 50%, #005bff 100%);
}

.nchat__quem {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nchat__nome {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nc-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nchat__status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--nc-texto-2);
}

.nchat__status::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--nc-verde);
    flex: none;
}

.nchat__controles {
    display: flex;
    gap: 4px;
    flex: none;
}

/* Chat/Botão Ícone — 32×32, raio 8, traço #8c8c8c */
.nchat__icone-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--nc-texto-2);
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

@media (hover: hover) {
    .nchat__icone-btn:hover { background: var(--nc-balao); }
}

.nchat__icone-btn svg {
    width: 20px;
    height: 20px;
}

/* ============================================================
   Corpo da conversa
   ============================================================ */
.nchat__corpo {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- linhas de mensagem ---- */
.nchat__linha {
    display: flex;
    gap: 8px;
    /* Chat/Mensagem/IA: counter-axis MAX → o avatar ancora na base do balão */
    align-items: flex-end;
}

.nchat__linha--user { justify-content: flex-end; }

.nchat__conteudo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    max-width: 272px;
}

/* _Base/Bolha */
.nchat__balao {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-line;
    word-wrap: break-word;
}

.nchat__balao--ia {
    background: var(--nc-balao);
    color: var(--nc-texto);
}

.nchat__balao--user {
    background: var(--nc-azul);
    color: #fff;
    max-width: 272px;
}

/* C1 · mensagem que falhou no envio */
.nchat__balao--user.tem-erro { background: var(--nc-azul-medio); }

.nchat__balao a {
    color: inherit;
    text-decoration: underline;
}

.nchat__link {
    font-size: 0.875rem;
    color: var(--nc-texto);
    text-decoration: underline;
}

/* ---- Chat/Mensagem Sistema ---- */
.nchat__sistema {
    align-self: center;
    text-align: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--nc-texto-2);
    max-width: 264px;
}

/* Tipo=transferência — caixa tracejada */
.nchat__sistema--transferencia {
    background: var(--nc-balao);
    border: 1px dashed var(--nc-borda-suave);
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ---- Chat/Indicador Digitando ---- */
.nchat__digitando {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 12px 14px;
    background: var(--nc-azul-fraco);
    border-radius: 12px;
}

.nchat__digitando i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: nchat-pulsar 1s infinite;
}

.nchat__digitando i:nth-child(1) { background: var(--nc-azul); }
.nchat__digitando i:nth-child(2) { background: var(--nc-azul-hover); animation-delay: .18s; }
.nchat__digitando i:nth-child(3) { background: var(--nc-azul-medio); animation-delay: .36s; }

@keyframes nchat-pulsar {
    0%, 100% { opacity: .45; transform: translateY(0); }
    45% { opacity: 1; transform: translateY(-3px); }
}

/* ============================================================
   Chat/Ação Rápida  (chips e botão)
   ============================================================ */
.nchat__sugestoes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    /* alinha com o balão, pulando a coluna do avatar (32 + 8) */
    padding-left: 40px;
}

/* quando nascem dentro do conteúdo da mensagem, já estão alinhadas */
.nchat__conteudo .nchat__sugestoes { padding-left: 0; }

.nchat__chip {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--nc-borda);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--nc-texto);
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease;
}

@media (hover: hover) {
    .nchat__chip:hover {
        background: var(--nc-chip-hover);
        border-color: var(--nc-azul-fraco);
    }
}

.nchat__chip:active,
.nchat__chip.is-selecionado {
    background: var(--nc-azul-press);
    border-color: var(--nc-azul-press);
    color: #fff;
}

/* Tipo=botão — CTA cheia */
.nchat__chip--primario {
    background: var(--nc-azul);
    border-color: var(--nc-azul);
    color: #fff;
}

@media (hover: hover) {
    .nchat__chip--primario:hover {
        background: var(--nc-azul-hover);
        border-color: var(--nc-azul-hover);
    }
}

/* ============================================================
   Chat/Feedback Resposta  (B10)
   ============================================================ */
.nchat__feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--nc-texto-2);
    flex-wrap: wrap;
}

.nchat__fb-btn {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--nc-borda-suave);
    border-radius: 6px;
    color: var(--nc-texto);
    cursor: pointer;
    padding: 0;
    line-height: 0;
    flex: none;
}

@media (hover: hover) {
    .nchat__fb-btn:hover { border-color: var(--nc-azul); }
}

.nchat__fb-btn svg {
    width: 14px;
    height: 14px;
}

.nchat__fb-nova {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--nc-texto);
    text-decoration: underline;
    cursor: pointer;
}

/* ============================================================
   Chat/Alerta  (telas C · erros)
   ============================================================ */
.nchat__alerta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 12px;
    background: var(--nc-balao);
    border: 1px solid var(--nc-borda-suave);
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--nc-texto);
}

.nchat__alerta--erro { border-color: var(--nc-vermelho); }

.nchat__alerta svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.nchat__alerta--erro svg { color: var(--nc-vermelho); }

/* bloco centralizado dos erros de tela cheia (C4, C6, C8) */
.nchat__bloco-erro {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.nchat__bloco-erro .nchat__alerta { align-self: stretch; }

/* ============================================================
   Chat/Avaliação  (E4)
   ============================================================ */
.nchat__avaliacao {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    text-align: center;
}

.nchat__avaliacao h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nc-azul);
}

.nchat__estrelas {
    display: flex;
    gap: 6px;
}

.nchat__estrelas button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    color: var(--nc-azul);
}

.nchat__estrelas svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linejoin: round;
}

.nchat__estrelas button.ativa svg { fill: currentColor; }

.nchat__coment {
    width: 240px;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--nc-borda-suave);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--nc-texto);
    outline: none;
}

.nchat__coment::placeholder { color: var(--nc-texto-2); }

.nchat__coment:focus {
    outline: 2px solid var(--nc-azul);
    outline-offset: -2px;
    border-color: transparent;
}

/* ---- Chat/Estado Vazio ---- */
.nchat__vazio {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 24px;
    text-align: center;
}

.nchat__vazio i {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--nc-vazio);
}

.nchat__vazio h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nc-texto);
}

.nchat__vazio p {
    font-size: 0.875rem;
    color: var(--nc-texto-2);
}

/* ============================================================
   Painéis que sobem de baixo — Menu (B12) e Informações (B13)
   ============================================================ */
.nchat__scrim {
    position: absolute;
    inset: 0;
    background: rgba(11, 27, 59, .35);
    z-index: 2;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.nchat__painel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
}

.nchat__painel h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nc-texto);
    margin-bottom: 6px;
}

.nchat__painel-item {
    background: none;
    border: 0;
    border-top: 1px solid #f0f0f0;
    padding: 14px 0;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--nc-texto);
    text-align: left;
    cursor: pointer;
}

/* o primeiro item vem logo abaixo do texto de informações — a borda de cima
   é justamente o que separa o bloco de leitura do bloco de ações */
.nchat__painel-item:first-of-type { margin-top: 4px; }

@media (hover: hover) {
    .nchat__painel-item:hover { color: var(--nc-azul); }
}

/* painel de informações */
.nchat__painel-cabeca {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.nchat__painel-cabeca span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nc-texto);
}

.nchat__painel p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--nc-texto-2);
    margin-bottom: 12px;
}

.nchat__painel p:last-of-type { font-size: 0.8125rem; }

.nchat__painel a {
    font-size: 0.8125rem;
    color: var(--nc-texto);
    text-decoration: underline;
}

/* ---- confirmação de encerramento (E1) ---- */
.nchat__confirma {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(11, 27, 59, .35);
    display: grid;
    place-items: center;
}

.nchat__confirma-card {
    width: 82%;
    padding: 22px;
    background: #fff;
    border-radius: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nchat__confirma-card h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--nc-texto);
}

.nchat__confirma-card p {
    font-size: 0.8125rem;
    color: var(--nc-texto-2);
}

.nchat__confirma-acoes {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

/* ============================================================
   Rodapé — Chat/Campo de Mensagem + Chat/Botão Enviar
   ============================================================ */
.nchat__rodape {
    flex: none;
    padding: 12px 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nchat__linha-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nchat__campo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 11px 12px 11px 14px;
    background: #fff;
    border: 1px solid var(--nc-borda-suave);
    border-radius: 12px;
    transition: border-color .15s ease;
}

@media (hover: hover) {
    .nchat__campo:hover { border-color: var(--nc-azul-medio); }
}

.nchat__campo:focus-within {
    outline: 2px solid var(--nc-azul);
    outline-offset: -2px;
    border-color: transparent;
}

/* Estado=erro / Estado=limite */
.nchat__campo.is-erro,
.nchat__campo.is-limite {
    border-color: var(--nc-vermelho);
    border-width: 1.5px;
}

/* Estado=desabilitado */
.nchat__campo.is-desabilitado {
    border-color: var(--nc-azul-medio);
}

.nchat__campo.is-desabilitado .nchat__input::placeholder { color: var(--nc-azul-medio); }

.nchat__input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: none;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--nc-texto);
    outline: none;
}

.nchat__input::placeholder { color: var(--nc-texto-2); }

.nchat__contador {
    font-size: 0.75rem;
    color: var(--nc-vermelho);
    flex: none;
}

.nchat__contador[hidden] { display: none; }

.nchat__enviar {
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: var(--nc-azul);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease;
}

@media (hover: hover) {
    .nchat__enviar:hover { background: var(--nc-azul-hover); }
}

.nchat__enviar:disabled {
    background: var(--nc-azul-fraco);
    color: var(--nc-azul-medio);
    cursor: default;
}

.nchat__enviar svg {
    width: 20px;
    height: 20px;
}

.nchat__lgpd {
    text-align: center;
    font-size: 0.75rem;
    color: var(--nc-texto-2);
}

.nchat__lgpd a {
    color: inherit;
    text-decoration: underline;
}

/* ============================================================
   MOTION — entrada, saída e painéis
   ------------------------------------------------------------
   ⚠ Isto NÃO vem do protótipo: o Figma do chat não tem motion
   desenhado (verificado com get_motion_context nas seções A e B).
   Foi escrito seguindo a assinatura do site — ease expo
   cubic-bezier(.16,1,.3,1), entra subindo, sem bounce — mas com
   duração de UI (180–300ms), não de seção (0.5–0.9s): o chat abre
   e fecha muitas vezes, e 600ms numa janela vira estorvo.
   Só transform e opacity, para não tirar do compositor.
   ============================================================ */
.nchat {
    --nc-entra: cubic-bezier(.16, 1, .3, 1);
    --nc-sai: cubic-bezier(.4, 0, 1, 1);
    --nc-dur-entra: 260ms;
    --nc-dur-sai: 180ms;
}

@keyframes nchat-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nchat-sobe {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ---- bolha e barra minimizada ---- */
@keyframes nchat-bolha-entra {
    from { opacity: 0; transform: scale(.7); }
    to { opacity: 1; transform: none; }
}

.nchat__bolha { animation: nchat-bolha-entra 320ms var(--nc-entra) both; }
.nchat__mini { animation: nchat-sobe var(--nc-dur-entra) var(--nc-entra) both; }

/* ---- janela: cresce a partir do canto da bolha ---- */
@keyframes nchat-janela-entra {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes nchat-janela-sai {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(6px) scale(.97); }
}

.nchat__janela {
    transform-origin: bottom right;
    animation: nchat-janela-entra var(--nc-dur-entra) var(--nc-entra) both;
}

.nchat__janela.is-saindo {
    animation: nchat-janela-sai var(--nc-dur-sai) var(--nc-sai) both;
}

/* ---- conteúdo da conversa ---- */
.nchat__linha,
.nchat__sistema,
.nchat__alerta,
.nchat__bloco-erro,
.nchat__feedback,
.nchat__digitando,
.nchat__avaliacao,
.nchat__vazio {
    animation: nchat-sobe 220ms var(--nc-entra) both;
}

/* chips entram em cascata; o índice vem do JS em --i */
.nchat__sugestoes .nchat__chip {
    animation: nchat-sobe 220ms var(--nc-entra) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}

/* ---- painéis que sobem de baixo (menu / informações) ---- */
@keyframes nchat-painel-sobe {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes nchat-painel-desce {
    from { transform: none; }
    to { transform: translateY(100%); }
}

.nchat__scrim { animation: nchat-fade 200ms ease both; }
.nchat__painel { animation: nchat-painel-sobe 300ms var(--nc-entra) both; }

.nchat__scrim.is-saindo { animation: nchat-fade var(--nc-dur-sai) ease reverse both; }
.nchat__painel.is-saindo { animation: nchat-painel-desce var(--nc-dur-sai) var(--nc-sai) both; }

/* ---- confirmação de encerramento ---- */
@keyframes nchat-card-entra {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: none; }
}

.nchat__confirma { animation: nchat-fade 200ms ease both; }
.nchat__confirma-card { animation: nchat-card-entra 240ms var(--nc-entra) both; }

.nchat__confirma.is-saindo { animation: nchat-fade var(--nc-dur-sai) ease reverse both; }

/* ============================================================
   Mobile — telas M1–M10: janela em tela cheia
   ============================================================ */
@media (max-width: 760px) {
    .nchat {
        right: 16px;
        bottom: 16px;
    }

    .nchat__janela {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        /* em tela cheia, crescer a partir do canto fica torto: a janela sobe */
        transform-origin: center bottom;
        animation-name: nchat-tela-entra;
    }

    .nchat__janela.is-saindo { animation-name: nchat-tela-sai; }

    @keyframes nchat-tela-entra {
        from { opacity: 0; transform: translateY(24px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes nchat-tela-sai {
        from { opacity: 1; transform: none; }
        to { opacity: 0; transform: translateY(16px); }
    }

    .nchat__painel { border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    /* nada se move: tudo aparece já no lugar, inclusive os chips em cascata */
    .nchat,
    .nchat *,
    .nchat *::before,
    .nchat *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }

    /* os pontinhos param, mas continuam visíveis */
    .nchat__digitando i {
        animation: none !important;
        opacity: .8;
    }
}