/* Klugwerk Flink: caixa de atendimento do WhatsApp oficial. "Flink" sempre junto de Klugwerk, em itálico e outra letra. */
.flink { --fk-verde: #1f7a4d; --fk-in: var(--balao-cliente); --fk-out: #dff3e6; --fk-nota: var(--balao-ia); min-height: 100dvh; display: flex; flex-direction: column; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .flink { --fk-out: #17402c; } }
:root[data-theme="dark"] .flink { --fk-out: #17402c; }
.fk-topo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fk-nome { font-family: var(--f-display); font-weight: 800; font-stretch: 110%; }
.fk-nome em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.25em; letter-spacing: 0.01em; color: var(--sinal); margin-left: 0.15em; }
.fk-numero { flex: 1 1 14rem; font-size: 0.85rem; color: var(--aco); display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.fk-numero b { color: var(--tinta); font-weight: 600; }
.fk-selo { font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 0.1rem 0.55rem; border: 1px solid var(--linha); }
.fk-selo.ok { color: var(--ok); border-color: currentColor; }
.fk-selo.ruim { color: var(--erro); border-color: currentColor; }
.fk-erro { margin: 0.5rem 1rem 0; }

.fk-caixa { flex: 1; display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr) minmax(15rem, 19rem); min-height: 0; height: calc(100dvh - 4.2rem); grid-template-rows: minmax(0, 1fr); overflow: hidden; border-top: 1px solid var(--linha); }
.fk-lista, .fk-conversa, .fk-contato { min-height: 0; display: flex; flex-direction: column; }
.fk-lista { border-right: 1px solid var(--linha); background: var(--superficie); }
.fk-contato { border-left: 1px solid var(--linha); background: var(--superficie); padding: 1rem; overflow-y: auto; gap: 0.6rem; }

.fk-lista-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.9rem 1rem 0.4rem; }
.fk-lista-cab h1 { font-size: 1.15rem; margin: 0; }
.fk-filtros { display: flex; gap: 0.25rem; padding: 0 0.75rem; border-bottom: 1px solid var(--linha); }
.fk-filtros button { font: inherit; font-size: 0.88rem; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--aco); padding: 0.55rem 0.5rem; cursor: pointer; }
.fk-filtros button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--sinal); font-weight: 600; }
.fk-n:not(:empty) { display: inline-block; min-width: 1.2rem; text-align: center; font-size: 0.72rem; font-weight: 700; background: var(--erro); color: #fff; border-radius: 999px; padding: 0 0.3rem; margin-left: 0.2rem; }
.fk-busca { margin: 0.6rem 0.75rem; font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.5rem 0.7rem; }
.fk-convs { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.fk-convs li button { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--linha); padding: 0.7rem 1rem; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 0.2rem 0.7rem; align-items: center; cursor: pointer; }
.fk-convs li button:hover { background: var(--papel); }
.fk-convs li button[aria-current="true"] { background: var(--papel); box-shadow: inset 3px 0 0 var(--sinal); }
.fk-avatar { grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--tinta); color: var(--superficie); display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; }
.fk-c-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-c-hora { font-size: 0.75rem; color: var(--aco); font-variant-numeric: tabular-nums; }
.fk-c-ultimo { font-size: 0.85rem; color: var(--aco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-c-tags { display: flex; gap: 0.25rem; justify-content: flex-end; }
.fk-badge { font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.4rem; background: var(--fk-verde); color: #fff; }
.fk-badge.espera { background: var(--sinal); color: var(--sinal-tinta); }
.fk-convs .fk-sem { padding: 1rem; color: var(--aco); font-size: 0.92rem; }

.fk-conversa { background: var(--papel); position: relative; }
.fk-vazio { margin: auto; max-width: 26rem; text-align: center; color: var(--aco); padding: 2rem; }
.fk-vazio-titulo { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: var(--tinta); }
.fk-aberta { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.fk-aberta[hidden] { display: none; }
.fk-conv-cab { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.fk-voltar { display: none; font: inherit; font-size: 1.3rem; background: none; border: 0; color: var(--tinta); cursor: pointer; padding: 0 0.3rem; }
.fk-conv-quem { flex: 1; display: grid; min-width: 0; }
.fk-conv-quem b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-conv-quem span { white-space: nowrap; font-size: 0.82rem; color: var(--aco); font-variant-numeric: tabular-nums; }
.fk-conv-acoes { display: flex; gap: 0.4rem; }
.fk-janela { font-size: 0.85rem; padding: 0.45rem 1rem; border-bottom: 1px solid var(--linha); }
.fk-janela.aberta { background: color-mix(in srgb, var(--ok) 10%, var(--superficie)); color: var(--ok); }
.fk-janela.fechada { background: color-mix(in srgb, var(--sinal) 22%, var(--superficie)); color: var(--tinta); }
.fk-janela:empty { display: none; }
/* Mensagens mais compactas e com zoom (A− / A+): tudo em "em" escala junto com --fk-zoom (Chefe, 28/10/2026). */
.fk-msgs { --fk-zoom: 0.9; font-size: calc(var(--fk-zoom) * 1rem); list-style: none; margin: 0; padding: 0.6em 0.9em; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 0.3em; }
.fk-msg { max-width: min(46em, 86%); padding: 0.35em 0.65em 0.25em; border-radius: 10px; background: var(--fk-in); align-self: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; }
.fk-msg-txt code { font-family: ui-monospace, monospace; font-size: 0.92em; }
.fk-zoom { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.35rem; }
.fk-zoom .btn { min-width: 2.4rem; padding-inline: 0.45rem; }
.fk-zoom-valor { font-size: 0.75rem; color: var(--aco); min-width: 2.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.fk-msg.out { align-self: flex-end; background: var(--fk-out); }
.fk-msg.nota { align-self: center; background: var(--fk-nota); border: 1px dashed color-mix(in srgb, var(--sinal) 70%, var(--tinta)); font-size: 0.92em; max-width: 90%; }
.fk-msg-rodape { display: flex; gap: 0.5rem; justify-content: flex-end; font-size: 0.75em; color: var(--aco); margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.fk-msg-rodape .falhou { color: var(--erro); font-weight: 600; }
.fk-modelo-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; color: var(--aco); border: 1px solid var(--linha); border-radius: 999px; padding: 0 0.4rem; margin-bottom: 0.2rem; }
.fk-dia { align-self: center; font-size: 0.75rem; color: var(--aco); background: var(--superficie); border: 1px solid var(--linha); border-radius: 999px; padding: 0.1rem 0.6rem; margin: 0.4rem 0; }

.fk-escrever { background: var(--superficie); border-top: 1px solid var(--linha); padding: 0.6rem 1rem 0.8rem; display: grid; gap: 0.45rem; }
.fk-modo { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--aco); }
.fk-modo label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.fk-escrever-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end; }
.fk-escrever textarea { font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.55rem 0.7rem; resize: vertical; min-height: 2.8rem; max-height: 12rem; }
.fk-escrever.nota textarea { background: var(--fk-nota); }
.fk-escrever textarea:disabled { opacity: 0.6; }
.fk-usar-modelo { justify-self: start; }

.fk-contato-cab { display: flex; justify-content: space-between; align-items: center; }
.fk-contato h2 { font-size: 1.05rem; margin: 0; }
.fk-contato h3 { font-size: 0.9rem; margin: 0.6rem 0 0; color: var(--aco); font-weight: 600; }
.fk-fechar { display: none; font: inherit; font-size: 1.4rem; background: none; border: 0; color: var(--tinta); cursor: pointer; }
.fk-etiquetas { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fk-etiquetas button { font: inherit; font-size: 0.8rem; background: var(--papel); border: 1px solid var(--linha); color: var(--tinta); border-radius: 999px; padding: 0.15rem 0.6rem; cursor: pointer; }
.fk-etiquetas button::after { content: " ×"; color: var(--aco); }
.fk-etiqueta-nova { display: flex; gap: 0.4rem; }
.fk-etiqueta-nova input { flex: 1; min-width: 0; font: inherit; font-size: 0.88rem; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.35rem 0.55rem; }
.fk-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.86rem; }
.fk-notas li { background: var(--fk-nota); border-radius: var(--raio); padding: 0.45rem 0.6rem; }
.fk-notas small { display: block; color: var(--aco); font-size: 0.75rem; }

.fk-dialogo { border: 1px solid var(--linha); border-radius: 10px; padding: 1.2rem 1.3rem; width: min(30rem, calc(100vw - 2rem)); background: var(--superficie); color: var(--tinta); }
.fk-dialogo::backdrop { background: rgb(10 18 32 / 0.55); }
.fk-dialogo h2 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.fk-dialogo form { display: grid; gap: 0.7rem; }
.fk-dialogo .campo { display: grid; gap: 0.25rem; font-size: 0.88rem; color: var(--aco); }
.fk-dialogo input, .fk-dialogo select { font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.5rem 0.65rem; }
.fk-d-explica { margin: 0; font-size: 0.88rem; color: var(--aco); }
.fk-d-previa { margin: 0; white-space: pre-wrap; background: var(--fk-out); border-radius: 10px; padding: 0.6rem 0.75rem; font-size: 0.92rem; }
.fk-d-previa:empty { display: none; }

/* Celular: uma coluna por vez. */
@media (max-width: 1100px) {
  .fk-caixa { grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); }
  .fk-contato { position: fixed; inset: 0 0 0 auto; width: min(22rem, 92vw); z-index: 20; box-shadow: -8px 0 24px rgb(0 0 0 / 0.18); transform: translateX(105%); transition: transform 0.2s ease; }
  .fk-caixa.contato-aberto .fk-contato { transform: none; }
  .fk-fechar { display: block; }
}
@media (max-width: 720px) {
  .fk-caixa { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 5.8rem); }
  .fk-caixa[data-vista="lista"] .fk-conversa, .fk-caixa[data-vista="conversa"] .fk-lista { display: none; }
  .fk-voltar { display: block; }
  .fk-msg { max-width: 90%; }
  .fk-numero { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fk-contato { transition: none; } }

/* ===== F3: abas, setores, atendentes, painel e configurações ===== */
.fk-abas { display: flex; gap: 0.2rem; }
.fk-abas a { font-weight: 600; font-size: 0.92rem; color: var(--aco); text-decoration: none; padding: 0.4rem 0.7rem; border-radius: var(--raio); }
.fk-abas a:hover { color: var(--tinta); background: var(--papel); }
.fk-abas a[aria-current="page"] { color: var(--tinta); background: color-mix(in srgb, var(--sinal) 28%, var(--superficie)); }
.fk-minha-situacao { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.fk-minha-situacao select { font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.3rem 0.4rem; }
.fk-bolinha { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--aco); }
.fk-bolinha.disponivel { background: var(--ok); }
.fk-bolinha.pausa { background: var(--sinal); }
.fk-bolinha.ausente { background: var(--erro); }
.fk-aviso { margin: 0.5rem 1rem 0; }
.fk-vista[hidden] { display: none !important; }

.fk-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.fk-filtros button { white-space: nowrap; flex: none; }
.fk-filtros button { padding: 0.5rem 0.4rem; font-size: 0.84rem; }
.fk-lista-busca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem; padding: 0.6rem 0.75rem; }
.fk-lista-busca .fk-busca { margin: 0; }
.fk-lista-busca select { font: inherit; font-size: 0.85rem; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.4rem; max-width: 9.5rem; }
.fk-convs li button { grid-template-columns: 2.4rem minmax(0, 1fr) auto; grid-template-rows: auto auto auto; }
.fk-avatar { grid-row: span 3; }
.fk-c-meta { grid-column: 2 / 4; display: flex; gap: 0.4rem; align-items: center; min-width: 0; font-size: 0.75rem; color: var(--aco); }
.fk-c-quem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-c-quem.ia { color: color-mix(in srgb, var(--sinal) 55%, var(--tinta)); font-weight: 600; }
.fk-c-quem.fila { color: var(--erro); font-weight: 600; }
.fk-chip-setor { --cor: var(--aco); display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--tinta); border: 1px solid color-mix(in srgb, var(--cor) 60%, var(--linha)); background: color-mix(in srgb, var(--cor) 14%, var(--superficie)); border-radius: 999px; padding: 0 0.45rem; white-space: nowrap; }
.fk-c-tempo { font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--aco); white-space: nowrap; }
.fk-c-tempo.atencao { color: #8a5a00; font-weight: 600; }
.fk-c-tempo.alerta { color: #b3261e; font-weight: 700; }
.fk-lista-busca #fk-ordem { grid-column: 1 / -1; max-width: none; }
.fk-chip-setor::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--cor); }
.fk-conv-quem span { display: inline; }
#fk-c-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.8rem; color: var(--aco); }
.fk-conv-acoes { flex-wrap: wrap; justify-content: flex-end; }
.fk-so-estreito { display: none; }
.fk-resumo-ia { font-size: 0.88rem; padding: 0.5rem 1rem; background: var(--balao-ia); border-bottom: 1px solid var(--linha); }
.fk-msg.out.ia { background: color-mix(in srgb, var(--balao-ia) 70%, var(--fk-out)); }
.fk-modelo-tag { display: inline-block; margin-right: 0.3rem; }
.fk-msg .fk-modelo-tag + .fk-modelo-tag { margin-left: 0; }
.fk-dica { margin-left: auto; font-size: 0.78rem; }
kbd { font-family: inherit; font-size: 0.8em; border: 1px solid var(--linha); border-bottom-width: 2px; border-radius: 4px; padding: 0 0.3rem; background: var(--papel); }
.fk-escrever { position: relative; }
.fk-rapidas { position: absolute; left: 1rem; right: 1rem; bottom: 100%; margin: 0 0 0.3rem; list-style: none; padding: 0.3rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 8px 24px rgb(0 0 0 / 0.14); max-height: 16rem; overflow-y: auto; z-index: 5; }
.fk-rapidas li { display: grid; gap: 0.1rem; padding: 0.45rem 0.6rem; border-radius: 4px; cursor: pointer; font-size: 0.88rem; }
.fk-rapidas li span { color: var(--aco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-rapidas li[aria-selected="true"], .fk-rapidas li:hover { background: var(--papel); }
.fk-nome-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem; align-items: end; }
.fk-nome-form .campo { display: grid; gap: 0.2rem; font-size: 0.82rem; color: var(--aco); }
.fk-nome-form input { font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.4rem 0.55rem; }
.fk-sugestoes button { background: none; border-style: dashed; color: var(--aco); }
.fk-sugestoes button::after { content: none; }
#fk-contato-corpo { display: grid; gap: 0.6rem; }
#fk-contato-corpo[hidden] { display: none; }

/* Páginas (painel e configurações) */
.fk-pagina { width: min(78rem, 100%); margin: 0 auto; padding: 1.2rem 1rem 3rem; display: grid; gap: 1.2rem; align-content: start; }
.fk-pagina-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fk-pagina-cab h1 { margin: 0; font-size: 1.4rem; }
.fk-pagina select { font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.45rem 0.6rem; }
.fk-tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.fk-tabela th, .fk-tabela td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.fk-tabela th { font-size: 0.8rem; color: var(--aco); font-weight: 600; white-space: nowrap; }
.fk-tabela td.ruim { color: var(--erro); font-weight: 600; }
.fk-tabela td.bom { color: var(--ok); font-weight: 600; }
.fk-motivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.fk-motivos li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.7rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.fk-ajuda { color: var(--aco); font-size: 0.88rem; margin: 0; }

.fk-config { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
.fk-config-menu { position: sticky; top: 1rem; display: grid; gap: 0.15rem; }
.fk-config-menu a { color: var(--aco); text-decoration: none; padding: 0.5rem 0.7rem; border-radius: var(--raio); font-size: 0.92rem; }
.fk-config-menu a:hover { background: var(--superficie); color: var(--tinta); }
.fk-config-menu a[aria-current="page"] { background: var(--superficie); color: var(--tinta); font-weight: 600; box-shadow: inset 3px 0 0 var(--sinal); }
.fk-config-corpo { display: grid; gap: 1rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 1.2rem 1.3rem; }
.fk-sec { display: grid; gap: 0.9rem; }
.fk-sec[hidden] { display: none; }
.fk-sec h2 { margin: 0; font-size: 1.2rem; }
.fk-sec h3 { margin: 0.4rem 0 0; font-size: 1rem; }
.fk-config .campo { display: grid; gap: 0.3rem; font-size: 0.86rem; color: var(--aco); }
.fk-config input:not([type="checkbox"]), .fk-config textarea, .fk-config select { font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.5rem 0.65rem; }
.fk-config input[type="color"] { padding: 0.15rem; height: 2.45rem; width: 4rem; }
.fk-config textarea { resize: vertical; }
.fk-chave { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.92rem; cursor: pointer; }
.fk-chave input { margin-top: 0.2rem; accent-color: var(--ok); width: 1.05rem; height: 1.05rem; }
.fk-cartoes { display: grid; gap: 0.9rem; }
.fk-cartao { --cor: var(--aco); border: 1px solid var(--linha); border-left: 5px solid var(--cor); border-radius: var(--raio); padding: 0.9rem 1rem; display: grid; gap: 0.75rem; background: var(--superficie); }
.fk-cartao-cab { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.fk-remover { font: inherit; font-size: 0.82rem; background: none; border: 0; color: var(--erro); cursor: pointer; padding: 0.2rem 0.3rem; }
.fk-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.7rem; align-items: end; }
.fk-campo-grupo { border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.6rem 0.8rem 0.8rem; margin: 0; display: grid; gap: 0.6rem; }
.fk-campo-grupo legend { font-size: 0.85rem; color: var(--aco); padding: 0 0.3rem; }
.fk-marcas { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.fk-marca { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; cursor: pointer; }
.fk-marca input { accent-color: var(--ok); }
.fk-linhas { display: grid; gap: 0.7rem; }
.fk-linha { display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: end; padding-bottom: 0.7rem; border-bottom: 1px solid var(--linha); }
.fk-salvar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: 0.8rem 0 0.2rem; background: var(--superficie); border-top: 1px solid var(--linha); }
.fk-salvar .estado.ok { color: var(--ok); }
.fk-salvar .estado.erro { color: var(--erro); }
.tabela-rolar { overflow-x: auto; }
.fk-dialogo textarea { font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.5rem 0.65rem; resize: vertical; }

@media (max-width: 1100px) { .fk-so-estreito { display: inline-flex; } }
@media (max-width: 900px) {
  .fk-config { grid-template-columns: minmax(0, 1fr); }
  .fk-config-menu { position: static; display: flex; overflow-x: auto; gap: 0.3rem; }
  .fk-config-menu a { white-space: nowrap; }
  .fk-linha { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .fk-abas { order: 4; flex-basis: 100%; }
  .fk-minha-situacao { order: 3; }
  .fk-dica { display: none; }
}

.fk-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1rem; }
.fk-kpis .kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.1rem; display: grid; gap: 0.2rem; }
.fk-kpis .kpi-rotulo { font-size: 0.85rem; color: var(--aco); font-weight: 500; }
.fk-kpis .kpi-valor { font-family: var(--f-display); font-weight: 800; font-stretch: 110%; font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.fk-kpis .kpi-nota { font-size: 0.82rem; color: var(--aco); }
.fk-kpis .kpi.ruim .kpi-valor { color: var(--erro); }

/* IA única (a mesma do portal) */
.fk-ia-unica { display: grid; gap: 0.8rem; border: 1px solid var(--linha); border-left: 5px solid var(--sinal); border-radius: var(--raio); padding: 1rem 1.1rem; background: color-mix(in srgb, var(--sinal) 5%, var(--superficie)); }
.fk-ia-unica-cab { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.fk-ia-unica h3 { margin: 0; }
.fk-ia-unica h4 { margin: 0.2rem 0 0; font-size: 0.92rem; color: var(--aco); }
.fk-ia-nome { display: grid; grid-template-columns: minmax(0, 22rem) auto; gap: 0.5rem; align-items: end; }
.fk-ia-itens { display: grid; gap: 0.8rem; }
.fk-ia-grupo { display: grid; gap: 0.4rem; }
.fk-ia-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.6rem; align-items: start; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.55rem 0.7rem; }
.fk-ia-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fk-ia-item small { grid-column: 1 / -1; color: var(--aco); font-size: 0.75rem; }
.fk-ia-item .fk-ia-novo-linha, .fk-ia-item .portal-acoes { grid-column: 1 / -1; }
.fk-ia-acoes { display: flex; gap: 0.2rem; }
.fk-ia-acoes button { font: inherit; font-size: 0.82rem; background: none; border: 0; color: var(--tinta); cursor: pointer; padding: 0.15rem 0.35rem; text-decoration: underline; }
.fk-ia-acoes .fk-remover { color: var(--erro); }
.fk-ia-novo { display: grid; gap: 0.4rem; }
.fk-ia-novo-linha { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: start; }
.fk-ia-hist summary { cursor: pointer; font-size: 0.9rem; color: var(--aco); }
.fk-ia-hist ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.85rem; }
.fk-ia-hist li { display: grid; gap: 0.1rem; }
.fk-ia-hist li span { color: var(--aco); }
#c-ia-msg.ok { color: var(--ok); }
#c-ia-msg.erro { color: var(--erro); }
@media (max-width: 720px) { .fk-ia-nome, .fk-ia-novo-linha { grid-template-columns: minmax(0, 1fr); } }

.fk-ia-frame { width: 100%; height: max(38rem, calc(100vh - 14rem)); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }

/* A caixa ocupa só a altura da tela: cada coluna rola por dentro e o campo de escrever fica sempre visível. */
.flink:has(#vista-caixa:not([hidden])) { height: 100dvh; min-height: 0; overflow: hidden; }
.fk-caixa { flex: 1 1 auto; height: auto; }
.fk-lista, .fk-conversa { overflow: hidden; }
.fk-convs { min-height: 0; }
.fk-escrever { flex: none; }
.fk-escrever textarea { max-height: 9rem; }

/* Mídia, citação, responder e desfazer */
.fk-figurinha { width: 8rem; height: 8rem; object-fit: contain; display: block; }
.fk-foto { max-width: min(18rem, 100%); max-height: 18rem; border-radius: 6px; display: block; margin-bottom: 0.3rem; }
.fk-msg audio { width: min(18rem, 100%); display: block; margin-bottom: 0.3rem; }
.fk-doc { display: inline-block; margin-bottom: 0.3rem; font-weight: 600; }
.fk-cita { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.82rem; color: var(--aco); background: color-mix(in srgb, var(--tinta) 6%, transparent); border: 0; border-left: 3px solid var(--sinal); border-radius: 4px; padding: 0.25rem 0.5rem; margin-bottom: 0.35rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-msg { position: relative; }
.fk-responder { position: absolute; top: -0.7rem; right: 0.4rem; font: inherit; font-size: 0.72rem; background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha); border-radius: 999px; padding: 0.05rem 0.5rem; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.fk-msg.in .fk-responder { right: auto; left: 0.4rem; }
.fk-msg:hover .fk-responder, .fk-responder:focus-visible { opacity: 1; }
@media (hover: none) { .fk-responder { opacity: 1; position: static; display: block; margin-top: 0.3rem; } }
.fk-pisca { outline: 2px solid var(--sinal); outline-offset: 2px; }
.fk-citando, .fk-desfazer { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; padding: 0.35rem 0.6rem; border-radius: var(--raio); }
.fk-citando { background: color-mix(in srgb, var(--tinta) 6%, var(--superficie)); border-left: 3px solid var(--sinal); }
.fk-citando span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-citando button { font: inherit; font-size: 1.1rem; background: none; border: 0; cursor: pointer; color: var(--aco); }
.fk-desfazer { background: color-mix(in srgb, var(--sinal) 25%, var(--superficie)); }
.fk-desfazer span { flex: 1; }
.fk-citando[hidden], .fk-desfazer[hidden] { display: none; }

/* Criar modelo */
.fk-dialogo-largo { width: min(52rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.fk-md-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.fk-md-campos { display: grid; gap: 0.7rem; }
.fk-md-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.fk-dialogo .campo small { color: var(--aco); font-size: 0.78rem; }
.fk-md-exemplos { display: grid; gap: 0.5rem; }
.fk-md-exemplos:empty { display: none; }
.fk-md-previa { position: sticky; top: 0; background: #e9e1d6; border-radius: 10px; padding: 0.9rem; min-height: 12rem; }
.fk-md-previa-titulo { margin: 0 0 0.6rem; font-size: 0.78rem; color: #54656f; text-transform: uppercase; letter-spacing: 0.04em; }
.fk-md-balao { display: grid; gap: 0.35rem; background: #fff; color: #111b21; border-radius: 0 8px 8px 8px; padding: 0.6rem 0.75rem; font-size: 0.92rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 0.5px rgb(0 0 0 / 0.13); }
.fk-md-balao strong:empty, .fk-md-balao small:empty { display: none; }
.fk-md-balao small { color: #667781; font-size: 0.8rem; }
.fk-md-balao mark { background: #d9fdd3; color: inherit; border-radius: 3px; padding: 0 2px; }
.btn-peq { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.fk-situ { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8rem; background: var(--papel); border: 1px solid var(--linha); }
.fk-situ.APPROVED { background: #e3f5e7; border-color: #9bd3a8; color: #1f6b33; }
.fk-situ.PENDING { background: #fff6dd; border-color: #e8cf7a; color: #7a5a00; }
.fk-situ.REJECTED, .fk-situ.DISABLED { background: #fde8e8; border-color: #eeaaaa; color: #8a1f1f; }
@media (max-width: 40rem) { .fk-md-grade, .fk-md-dupla { grid-template-columns: 1fr; } .fk-md-previa { position: static; } }

/* Celular: cabeçalho da conversa sem sobrepor o telefone aos botões, e topo mais baixo (número e situação na mesma linha). */
@media (max-width: 720px) {
  .fk-topo { gap: 0.45rem 0.75rem; }
  .fk-numero { flex: 1 1 auto; }
  .fk-conv-cab { flex-wrap: wrap; gap: 0.4rem 0.6rem; padding: 0.55rem 0.75rem; }
  .fk-conv-quem { flex: 1 1 calc(100% - 3rem); }
  .fk-conv-quem span { white-space: normal; }
  .fk-conv-acoes { flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.1rem; }
  .fk-conv-acoes .btn { flex: 0 0 auto; }
}

/* Tela única (28/10/2026): nome ou logomarca do cliente embaixo da marca, botão do Klug, ficha do contato, rascunhos. */
.fk-nomes { display: grid; line-height: 1.1; min-width: 0; }
.fk-cliente { font-size: 0.74rem; font-weight: 600; color: var(--aco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.fk-cliente img { display: block; max-height: 1.3rem; max-width: 9rem; object-fit: contain; margin-top: 0.15rem; }
.fk-klug { flex: 0 0 auto; }
.fk-ficha { display: grid; gap: 0.25rem; padding-bottom: 0.6rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--linha); }
.fk-ficha h3 { margin: 0.3rem 0 0.1rem; }
.fk-ficha-l { margin: 0; font-size: 0.88rem; }
.fk-ficha .btn { justify-self: start; margin-top: 0.3rem; }
.fk-msg.sombra { opacity: 0.78; border: 1px dashed color-mix(in srgb, var(--aco) 55%, transparent); }
@media (max-width: 720px) { .fk-cliente { max-width: 9rem; } }
/* Passo a passo (28/10/2026): botão "?" no topo para rever */
.fk-rever-tut { min-width: 2.2rem; font-weight: 700; }
@media (max-width: 720px) { .fk-zoom-valor { display: none; } .fk-zoom { margin-right: 0.15rem; } }