/* =============================================================
   AS TAGS, VISÍVEIS
=============================================================

   A tira mora encostada no campo e não pode competir com ele. Quem
   está escrevendo tem que continuar vendo o texto como o assunto
   principal; as tags são ferramenta, e ferramenta boa fica quieta até
   a mão procurar.

   Daí o tamanho: 11px, altura de 22px, contorno fino. Do lado de um
   campo de 32px, some. Sob o dedo, cresce.
*/

.tg-tira {
    margin-top: 7px;
    min-width: 0;
    max-width: 100%;
    contain: inline-size;
    animation: tg-entra .22s ease both;
}
.tg-tira.tg-acima { margin-top: 0; margin-bottom: 7px; }

@keyframes tg-entra {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
}

/* UMA linha, sempre, correndo para o lado.
   -------------------------------------------------------------
   Antes as pílulas quebravam linha quando o campo era estreito. Numa
   etapa de script, onde o campo mora numa coluna de uns 350px, as oito
   viravam três fileiras — e cada etapa da régua ficava três vezes mais
   alta que o campo que ela serve. A tira passou a mandar no tamanho do
   bloco, que é exatamente o contrário do que ela deveria fazer.

   Agora ela tem 22px de altura em qualquer largura de tela, e o resto
   das pílulas se alcança arrastando. Altura previsível vale mais que
   ver tudo de uma vez: ninguém usa as oito tags na mesma frase. */
/* A linha: as pílulas de um lado rolando, os dois botões do outro
   parados. Nada de posição grudada nem máscara por cima — sobreposição
   de texto com botão é o tipo de defeito que só aparece na tela de
   quem usa. */
.tg-linha {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tg-acoes {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tg-chips {
    flex: 1 1 auto;
    /* A linha que impede a tira de mandar no tamanho do bloco.
       -------------------------------------------------------------
       Uma fileira que não quebra tem largura mínima do tamanho de todo
       o seu conteúdo, e grade e flex OBEDECEM a isso: a coluna da etapa
       do script inchava até 986px dentro de um bloco de 634 e vazava
       pela direita da tela. "overflow-x: auto" deixa rolar, mas não
       impede o cálculo — quem impede é "contain: inline-size", que diz
       ao navegador para não olhar o conteúdo ao decidir a largura. */
    contain: inline-size;
    min-width: 0;
    max-width: 100%;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* A última pílula esmaece em vez de ser cortada no talho: é o que
       diz que tem mais coisa para o lado sem parecer erro de recorte. */
    mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
}
/* Quando tudo coube, não há o que esmaecer. */
.tg-chips.tg-coube { mask-image: none; -webkit-mask-image: none; }
.tg-chips::-webkit-scrollbar { display: none; }

.tg-chip { flex: 0 0 auto; }

/* Navegador que não conhece `contain` volta a quebrar linha. Fica mais
   alto do que eu queria, mas nada vaza da tela — e vazar é o defeito
   que não dá para conviver. */
@supports not (contain: inline-size) {
    .tg-linha { flex-wrap: wrap; }
    .tg-chips { flex-wrap: wrap; overflow-x: visible; mask-image: none; -webkit-mask-image: none; }
}



/* -------------------------------------------------------------
   O CHIP
------------------------------------------------------------- */

.tg-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .025);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .005em;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease,
                background-color .15s ease, transform .08s ease;
}

.tg-chip:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, .05);
}
.tg-chip:active { transform: scale(.955); }

.tg-chip:focus-visible {
    outline: none;
    border-color: rgba(var(--accent-rgb), .55);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .18);
}

/* Tag de risco alto — cidade e estado saem do DDD, que erra com
   portabilidade. Marcada por FORMA (o tracejado embaixo), e não por
   cor: metade das pessoas que usam isto está num celular no sol. */
.tg-cuidado .tg-rotulo {
    border-bottom: 1px dashed var(--border-strong);
    padding-bottom: 1px;
}

/* O pisco de confirmação. Sem ele, clicar num chip e ver o texto
   aparecer 40px abaixo, dentro do campo, não fecha o circuito: a mão
   não sabe se o toque pegou. */
.tg-bateu { animation: tg-bate .3s ease; }

@keyframes tg-bate {
    0%   { border-color: rgba(var(--accent-rgb), .85);
           background: var(--accent-soft); color: var(--accent-hi); }
    100% { border-color: var(--border-soft);
           background: rgba(255, 255, 255, .025); color: var(--text-muted); }
}

/* -------------------------------------------------------------
   O SELO DA AJUDA E O "COMO CHEGA"
------------------------------------------------------------- */

.tg-selo,
.tg-ver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-faint);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.tg-selo { width: 22px; padding: 0; }
.tg-ver  { padding: 0 9px; }

.tg-selo:hover, .tg-ver:hover { color: var(--text-dim); border-color: var(--border-soft); }

.tg-selo-aberto, .tg-ver-aberto {
    color: var(--accent-hi);
    border-color: rgba(var(--accent-rgb), .35);
    background: var(--accent-soft);
}

.tg-selo i { font-size: 9px; }
.tg-ver i  { font-size: 9.5px; opacity: .9; }

/* -------------------------------------------------------------
   A AJUDA ABERTA
------------------------------------------------------------- */

.tg-ajuda {
    margin-top: 8px;
    padding: 11px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: rgba(255, 255, 255, .018);
    animation: tg-abre .2s ease both;
}
.tg-ajuda[hidden] { display: none; }

@keyframes tg-abre {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

.tg-ajuda-titulo {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 600;
    letter-spacing: .03em;
    margin-bottom: 9px;
}

.tg-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-soft);
}
.tg-item:last-of-type { border-bottom: 0; }

.tg-cod {
    flex: 0 0 auto;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 2px 6px;
    margin-top: 1px;
}

.tg-item-texto { flex: 1; min-width: 0; }

.tg-item-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    font-size: 12px;
    color: var(--text);
}
.tg-item-linha b { font-weight: 600; }

.tg-exemplo { font-size: 11.5px; color: var(--text-faint); }

.tg-item-oque {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

.tg-item-aviso {
    margin-top: 4px;
    font-size: 11px;
    color: var(--warn);
    line-height: 1.5;
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.tg-item-aviso i { font-size: 9.5px; margin-top: 3px; flex: 0 0 auto; }

.tg-rodape {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border-soft);
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
    display: flex;
    gap: 7px;
    align-items: flex-start;
}
.tg-rodape i { color: var(--accent); font-size: 10.5px; margin-top: 3px; flex: 0 0 auto; }

/* -------------------------------------------------------------
   A PRÉVIA
-------------------------------------------------------------
   Balão, e não caixa de texto. A pessoa está decidindo se manda ou
   não; ver a frase na forma em que ela vai chegar decide melhor que
   ver a frase numa moldura de formulário. */

.tg-previa {
    margin-top: 8px;
    animation: tg-abre .2s ease both;
}
.tg-previa[hidden] { display: none; }

.tg-vazio { font-size: 11.5px; color: var(--text-faint); padding: 4px 2px; }

.tg-caso { margin-bottom: 9px; }
.tg-caso:last-child { margin-bottom: 0; }

.tg-caso-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 5px;
}

.tg-caso-rotulo {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.tg-caso-nota { font-size: 11px; color: var(--text-faint); font-weight: 400; }

.tg-balao {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 9px 12px;
    border-radius: 12px 12px 12px 4px;
    background: var(--accent-soft);
    border: 1px solid rgba(var(--accent-rgb), .22);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.tg-erro {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(var(--danger-rgb, 226, 90, 90), .3);
    background: rgba(var(--danger-rgb, 226, 90, 90), .07);
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.55;
}
.tg-erro i { color: var(--danger); font-size: 11px; margin-top: 3px; flex: 0 0 auto; }

/* -------------------------------------------------------------
   CELULAR
-------------------------------------------------------------
   Os chips viram uma faixa que corre para o lado em vez de quebrar em
   quatro linhas: no rodapé do chat, cada linha a mais empurra a
   conversa para fora da tela. A barra de rolagem some, mas a última
   pílula fica cortada de propósito — é o que diz que tem mais. */

@media (max-width: 780px) {
    .tg-chip, .tg-selo, .tg-ver { height: 24px; }

    /* "como chega" perde a palavra: em 380px ela comia metade do espaço
       das pílulas, e a pílula é o que a pessoa veio clicar. */
    .tg-ver { width: 24px; padding: 0; justify-content: center; }
    .tg-ver-texto { display: none; }

    .tg-item { gap: 8px; }
    .tg-ajuda { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .tg-tira, .tg-ajuda, .tg-previa { animation: none; }
    .tg-bateu { animation: none; border-color: rgba(var(--accent-rgb), .6); }
    .tg-chip { transition: none; }
}