/* Robô de atendimento. Ideia: a cor diz quem está falando.
   Menta = o robô, âmbar = você (ou algo que precisa de você), neutro = o cliente. Nada além disso tem cor. */
:root {
  --fundo: #f4f6f9; --chao: #eceff4; --papel: #ffffff; --papel-2: #f7f9fb; --linha: #e1e6ed; --linha-2: #cbd3de;
  --tinta: #0e1a2b; --fraco: #556274; --apagado: #8590a0;
  --robo: #0b8a67; --robo-tinta: #ffffff; --robo-veu: rgb(11 138 103 / .09);
  --voce: #b85c00; --voce-tinta: #ffffff; --voce-veu: rgb(184 92 0 / .09);
  --perdido: #b23b2a;
  --trilho: #0e1a2b; --trilho-tinta: #c9d3e1; --trilho-ativo: #1b2a40;
  --sombra: 0 1px 2px rgb(14 26 43 / .06), 0 8px 24px -12px rgb(14 26 43 / .12);
  --r: 12px; --r-pq: 8px;
  --f-titulo: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-texto: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --curva: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #0b1320; --chao: #0f1828; --papel: #131e30; --papel-2: #18253a; --linha: #22324a; --linha-2: #2e4160; --tinta: #e8eef6; --fraco: #98a6ba; --apagado: #67768c;
    --robo: #45d39f; --robo-tinta: #062619; --robo-veu: rgb(69 211 159 / .12); --voce: #f2b04a; --voce-tinta: #2a1a02; --voce-veu: rgb(242 176 74 / .13); --perdido: #e9806d;
    --trilho: #08101b; --trilho-tinta: #98a6ba; --trilho-ativo: #16233a; --sombra: none; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--fundo); color: var(--tinta); font: 16px/1.5 var(--f-texto); }
body { min-height: 100dvh; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--robo); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2 { font-family: var(--f-titulo); line-height: 1.1; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; font-weight: 600; margin: 32px 0 6px; }
h2:first-child { margin-top: 8px; }
.sub { color: var(--fraco); margin: 0 0 14px; max-width: 64ch; }
code { font-size: .9em; background: var(--papel-2); border: 1px solid var(--linha); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }

/* ---------- campos e botões ---------- */
.bt { border: 0; border-radius: var(--r-pq); background: var(--robo); color: var(--robo-tinta); padding: 10px 18px; font-weight: 700; cursor: pointer; min-height: 44px; transition: transform .12s var(--curva), filter .12s; }
.bt:hover { filter: brightness(1.08); }
.bt:active { transform: scale(.97); }
.bt:disabled { opacity: .5; cursor: wait; }
.bt-leve { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linha-2); }
.bt-leve:hover { box-shadow: inset 0 0 0 1.5px var(--fraco); filter: none; }
.bt-fraco { background: transparent; color: var(--fraco); }
.bt-voce { background: var(--voce); color: var(--voce-tinta); }
.bt-icone { width: 44px; padding: 0; display: grid; place-items: center; }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }
input, select, textarea { background: var(--chao); border: 1.5px solid var(--linha); border-radius: var(--r-pq); padding: 10px 12px; width: 100%; min-height: 44px; transition: border-color .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--robo); outline: none; }
textarea { resize: vertical; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span { font-size: .8rem; font-weight: 700; color: var(--fraco); }

/* sinal: o ponto que mostra se o robô está no ar */
.sinal { width: 10px; height: 10px; border-radius: 50%; background: var(--apagado); flex: none; }
.sinal.on { background: var(--robo); box-shadow: 0 0 0 4px var(--robo-veu); }

/* ---------- entrar ---------- */
.entrar { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.entrar form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; }
.entrar h1 { font-size: 2.2rem; font-weight: 800; }
.entrar p { margin: 0; color: var(--fraco); }
.entrar .sinal { width: 14px; height: 14px; background: var(--robo); box-shadow: 0 0 0 6px var(--robo-veu); margin-bottom: 8px; }
.erro { color: var(--perdido) !important; min-height: 1.5em; }

/* ---------- estrutura: trilho à esquerda (desktop) / barra embaixo (celular) ---------- */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100dvh; }
.abas { position: sticky; top: 0; height: 100dvh; background: var(--trilho); color: var(--trilho-tinta); display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; }
.marca { display: flex; align-items: center; gap: 10px; font: 800 1.4rem var(--f-titulo); padding: 0 10px 22px; color: #fff; }
.abas a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-pq); color: var(--trilho-tinta); text-decoration: none; font-weight: 700; position: relative; }
.abas a:hover { color: #fff; background: var(--trilho-ativo); }
.abas a[aria-current="page"] { color: #fff; background: var(--trilho-ativo); }
.abas a[aria-current="page"] svg { color: #45d39f; }
.abas b { margin-left: auto; background: var(--voce); color: var(--voce-tinta); border-radius: 999px; min-width: 22px; height: 22px; padding: 0 6px; font-size: .78rem; display: grid; place-items: center; }

.palco { min-width: 0; display: flex; flex-direction: column; }
main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px 48px; }
.v { padding-top: 8px; }
.estreita { max-width: 760px; }

/* estado: a frase do topo diz o que está acontecendo agora */
.estado { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px 18px; max-width: 1180px; width: 100%; margin: 0 auto; }
.estado-linha { margin: 0; font: 600 clamp(1.35rem, 3.4vw, 2rem)/1.15 var(--f-titulo); letter-spacing: -.015em; }
.estado-sub { margin: 4px 0 0; color: var(--fraco); }
.chave { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; flex: none; }
.chave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trilho { width: 46px; height: 28px; border-radius: 999px; background: var(--linha-2); position: relative; transition: background .2s var(--curva); }
.trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--tinta); transition: transform .2s var(--curva); }
.chave input:checked + .trilho { background: var(--robo); }
.chave input:checked + .trilho::after { transform: translateX(18px); background: var(--robo-tinta); }
.chave input:focus-visible + .trilho { outline: 2px solid var(--robo); outline-offset: 2px; }

/* faixa âmbar: só aparece quando o robô está esperando você */
.espera { display: flex; align-items: center; gap: 12px; margin: 0 28px 16px; padding: 12px 16px; border-radius: var(--r); background: var(--voce-veu); color: var(--tinta); text-decoration: none; }
.espera::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--voce); flex: none; }
.espera strong { color: var(--voce); flex: none; }
.espera span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--fraco); }
.espera.chegou { animation: chega .5s var(--curva); }
@keyframes chega { from { transform: translateY(-8px); opacity: 0; } }
.aviso { margin: 0 28px 16px; padding: 12px 16px; border-radius: var(--r); background: var(--papel); color: var(--fraco); font-size: .92rem; overflow-wrap: anywhere; }
.aviso a { color: var(--tinta); font-weight: 700; }

/* ---------- conversas ---------- */
#v-conversas { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.chips button { border: 0; background: transparent; color: var(--fraco); border-radius: 999px; padding: 6px 12px; white-space: nowrap; cursor: pointer; min-height: 36px; font-weight: 700; font-size: .88rem; box-shadow: inset 0 0 0 1px var(--linha); }
.chips button[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); box-shadow: none; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li > button { width: 100%; text-align: left; background: transparent; border: 0; border-radius: var(--r-pq); padding: 12px 10px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; cursor: pointer; }
.lista li + li > button { box-shadow: 0 -1px 0 var(--linha); }
.lista li > button:hover { background: var(--papel); }
.lista li > button[aria-current="true"] { background: var(--papel-2); }
.lista .nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .hora { color: var(--apagado); font-size: .8rem; font-variant-numeric: tabular-nums; justify-self: end; }
.lista .ult { color: var(--fraco); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 7px; align-items: center; min-width: 0; }
.lista .ult i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--apagado); }
.lista .ult i.robo { background: var(--robo); }
.lista .ult i.voce { background: var(--voce); }
.etq { font-size: .74rem; font-weight: 700; border-radius: 6px; padding: 2px 8px; justify-self: end; align-self: center; color: var(--fraco); box-shadow: inset 0 0 0 1px var(--linha-2); white-space: nowrap; }
.etq.agendado { color: var(--voce); box-shadow: inset 0 0 0 1px var(--voce); }
.etq.fechado { color: var(--robo-tinta); background: var(--robo); box-shadow: none; }
.etq.perdido { color: var(--perdido); box-shadow: none; text-decoration: line-through; }
.vazio { color: var(--fraco); padding: 24px 10px; list-style: none; }

.chat, .chat-vazio { background: var(--papel); border-radius: 16px; min-height: 72dvh; box-shadow: var(--sombra); }
.chat { display: flex; flex-direction: column; overflow: hidden; }
.chat-vazio { display: grid; place-items: center; color: var(--apagado); padding: 24px; text-align: center; }
.chat:not([hidden]) + .chat-vazio { display: none; }
.chat-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
.quem { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.quem strong { font: 600 1.15rem var(--f-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem span { color: var(--apagado); font-size: .85rem; font-variant-numeric: tabular-nums; }
.volta { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; place-items: center; margin-left: -10px; color: var(--tinta); }
.ficha { display: grid; grid-template-columns: 180px 220px 1fr; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linha); background: var(--papel-2); }
.msgs { list-style: none; margin: 0; padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; max-height: 58dvh; }
.msgs li { max-width: min(78%, 560px); padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: var(--papel-2); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: inset 0 0 0 1px var(--linha); }
.msgs li.nos { align-self: flex-end; border-radius: 14px 14px 4px 14px; box-shadow: none; }
.msgs li.robo { background: var(--robo-veu); }
.msgs li.voce { background: var(--voce-veu); }
.msgs li small { display: block; color: var(--apagado); font-size: .72rem; margin-top: 3px; font-variant-numeric: tabular-nums; }
.msgs li.robo small b { color: var(--robo); }
.msgs li.voce small b { color: var(--voce); }
.escrever { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linha); align-items: flex-end; }
.escrever textarea { min-height: 44px; max-height: 160px; }
.escrever .bt-icone { background: var(--voce); color: var(--voce-tinta); }

/* ---------- pra você (perguntas) ---------- */
.pg { padding: 18px 0; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 10px; }
.pg:first-child { border-top: 0; padding-top: 6px; }
.pg-topo { display: flex; justify-content: space-between; gap: 12px; color: var(--fraco); font-size: .88rem; }
.pg-topo strong { color: var(--tinta); }
.pg-q { margin: 0; font: 600 1.2rem/1.3 var(--f-titulo); white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-cli { margin: 0; color: var(--fraco); padding-left: 12px; box-shadow: inset 2px 0 0 var(--linha-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-resp { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-resp b { color: var(--voce); }
.pg .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.hist { margin-top: 24px; }
.hist summary { cursor: pointer; font-weight: 700; color: var(--fraco); padding: 8px 0; }

/* ---------- ensinar ---------- */
.dica-nova { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.dica-nova.linha { flex-direction: row; }
.dica-nova .bt { flex: none; }
.dicas { list-style: none; margin: 18px 0 0; padding: 0; }
.dicas li { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--linha); padding: 12px 0; }
.dicas li p { flex: 1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dicas li small { display: block; color: var(--robo); font-weight: 700; font-size: .76rem; margin-bottom: 2px; }
.dicas li.vazio { color: var(--fraco); }
.dicas button { background: none; border: 0; color: var(--apagado); cursor: pointer; min-height: 44px; padding: 0 6px; font-weight: 700; }
.dicas button:hover { color: var(--perdido); }
.teste:not(:empty) { margin-top: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--papel); white-space: pre-wrap; }
.teste .rot { display: block; font-size: .8rem; font-weight: 700; color: var(--robo); margin-bottom: 4px; }
.teste .rot.voce { color: var(--voce); margin-top: 12px; }

/* ---------- resumo ---------- */
.numeros { box-shadow: var(--sombra); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; background: var(--linha); border-radius: var(--r); overflow: hidden; }
.numeros div { background: var(--papel); padding: 16px; }
.numeros dt { color: var(--fraco); font-size: .85rem; }
.numeros dd { margin: 2px 0 0; font: 800 2.2rem/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.numeros .voce dd { color: var(--voce); }
.numeros .robo dd { color: var(--robo); }

/* ---------- ajuda ---------- */
.passos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; max-width: 66ch; }
.passos li::marker { font: 700 1rem var(--f-titulo); color: var(--robo); }
.etapas, .custos { margin: 0; display: flex; flex-direction: column; }
.etapas div, .custos div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); align-items: baseline; }
.custos dt { font-weight: 700; }
.etapas dd, .custos dd { margin: 0; color: var(--fraco); }
.check { list-style: none; margin: 0 0 10px; padding: 0; }
.check li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); overflow-wrap: anywhere; }
.check li b { font-size: .8rem; }
.check li.falta b { color: var(--voce); }
.check li.ok b { color: var(--robo); }
.check li span { color: var(--fraco); }
.check li code { margin-right: 6px; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); background: var(--tinta); color: var(--fundo); padding: 11px 18px; border-radius: var(--r); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--curva); max-width: calc(100% - 32px); font-weight: 700; z-index: 20; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- celular ---------- */
@media (max-width: 899px) {
  .app { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .abas { position: fixed; inset: auto 0 0 0; height: auto; flex-direction: row; background: var(--papel); color: var(--fraco); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--linha); z-index: 10; gap: 0; }
  .marca { display: none; }
  .abas a { flex: 1; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: .72rem; text-align: center; }
  .abas a { color: var(--fraco); }
  .abas a:hover, .abas a[aria-current="page"] { background: none; color: var(--tinta); }
  .abas a[aria-current="page"] svg { color: var(--robo); }
  .abas b { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; min-width: 18px; height: 18px; font-size: .7rem; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .estado { padding: max(18px, env(safe-area-inset-top)) 16px 12px; }
  .espera, .aviso { margin: 0 16px 12px; }
  main { padding: 0 16px 24px; }
  #v-conversas { grid-template-columns: minmax(0, 1fr); }
  .chat-vazio { display: none; }
  #v-conversas.abriu .lista-col { display: none; }
  .chat { min-height: calc(100dvh - 210px); }
  .volta { display: grid; }
  .ficha { grid-template-columns: 1fr 1fr; }
  .ficha .larga { grid-column: 1 / -1; }
  .msgs { max-height: none; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .etapas div, .custos div { grid-template-columns: 1fr; gap: 2px; }
  .dica-nova.linha { flex-direction: column; }
  .dica-nova .bt { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ajustes */
.form-chaves { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.form-chaves .campo small { color: var(--apagado); font-weight: 400; }
.form-chaves .guardada { color: var(--robo); }
/* modo teste */
.teste-chat { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r); max-height: 420px; }
#v-dicas .escrever { border: 0; padding: 12px 0; }
#v-dicas .escrever .bt-icone { background: var(--robo); color: var(--robo-tinta); }
.teste-chat li small b { color: var(--robo); }
.teste-chat li.voce small b { color: var(--voce); }