/* ZEBIT · conversa com a Iris: palco escuro, cartoes de resposta em sequencia, painel ao vivo,
   calibracao e montagem. Celular primeiro: alvos de 48px+, entrada em 16px+ (sem zoom no iOS). */

.conversa{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:calc(100dvh - var(--topo))}
.palco{position:relative;max-width:780px;width:100%;margin:0 auto;padding:clamp(22px,5vh,56px) clamp(16px,4vw,48px) 0;display:flex;flex-direction:column}
.iris{display:flex;align-items:center;gap:14px}
.iris canvas{display:block;width:84px;height:84px;flex:none}
.iris strong{display:block;font-size:.9375rem;font-weight:620}
.iris span{display:block;font-size:.75rem;color:var(--mudo)}
.iris.falando span,.iris.ouvindo span{color:var(--verde);font-weight:600}
.iris.falando span::after,.iris.ouvindo span::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-radius:50%;background:var(--verde);vertical-align:2px;animation:pisca 1s ease-in-out infinite}
.bloco{margin:20px 0 0;font-size:.75rem;font-weight:600;color:var(--mudo);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.bloco span{color:var(--verde)}
.bloco span::before{content:"";display:inline-block;width:4px;height:4px;margin-right:10px;border-radius:50%;background:var(--fraco);vertical-align:3px}
.tela{position:relative;flex:1}
.fala-antes{font-size:.9375rem;line-height:1.5;color:var(--mudo);margin:14px 0 -4px;max-width:620px}
.fala{position:relative;font-size:clamp(1.375rem,2.3vw,1.8125rem);line-height:1.28;letter-spacing:-.022em;font-weight:560;margin:12px 0 26px;min-height:2.4em;text-wrap:pretty}
.fala-fantasma{visibility:hidden}
.fala-viva{position:absolute;inset:0}
.fala-cursor{display:inline-block;width:2px;height:.95em;background:var(--verde);margin-left:3px;vertical-align:-2px;animation:pisca .8s steps(1) infinite}
.ct-entra{animation:ct-frente var(--mola-t) var(--mola)}
.ct-volta{animation:ct-tras var(--mola-t) var(--mola)}
@keyframes ct-frente{from{opacity:0;transform:translateX(28px)}}
@keyframes ct-tras{from{opacity:0;transform:translateX(-28px)}}
.pilha{display:grid;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.pilha-pronta{opacity:1;transform:none}

/* ---------- cartoes ---------- */
.cartao{border:1px solid var(--linha);border-radius:12px;background:var(--vidro);overflow:hidden;transition:border-color .2s,background .2s}
.cartao[data-estado="aberto"]{border-color:var(--linha-2);background:rgba(255,255,255,.05)}
.cartao[data-estado="espera"]{opacity:.5}
.cartao-solo{border:0;background:transparent!important;border-radius:0;overflow:visible}
.cartao-cab{appearance:none;display:none;width:100%;align-items:center;gap:12px;padding:14px 16px;border:0;background:transparent;text-align:left;min-height:52px}
.cartao[data-estado="feito"] .cartao-cab,.cartao[data-estado="espera"] .cartao-cab{display:flex}
.cartao[data-estado="feito"] .cartao-corpo,.cartao[data-estado="espera"] .cartao-corpo{display:none}
.cartao-rot{flex:none;max-width:46%;font-size:.8125rem;color:var(--mudo);line-height:1.3}
.cartao-val{flex:1;min-width:0;font-size:.9063rem;font-weight:560;line-height:1.3;text-align:right;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cartao-ok{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(52,211,153,.16);display:grid;place-items:center}
.cartao-ok svg{width:13px;height:13px;fill:none;stroke:var(--verde);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cartao[data-estado="espera"] .cartao-ok{visibility:hidden}
.cartao[data-estado="espera"] .cartao-val{display:none}
.cartao[data-estado="espera"] .cartao-rot{max-width:none}
.cartao-ouvi .cartao-ok{background:rgba(107,155,242,.22)}
.cartao-ouvi .cartao-ok svg{stroke:#8FB8FF}
.cartao-corpo{padding:16px;animation:sobe .3s var(--mola)}
.cartao-solo .cartao-corpo{padding:0;animation:none}
.cartao-perg{font-size:.9688rem;font-weight:600;letter-spacing:-.01em;margin-bottom:12px;line-height:1.35}
.cartao-perg small{display:block;margin-top:4px;font-size:.7813rem;font-weight:500;color:var(--mudo)}
.cartao-nota-topo{margin:-12px 0 14px}
.cartao-dica{margin-top:10px;font-size:.8125rem;color:#FF9A8F}
.cartao-dica:empty{display:none}
.cartao-nota{margin-top:10px;font-size:.7813rem;color:var(--mudo)}
.cartao-pronto{margin-top:12px}
.cartao-dito{display:none;margin:-4px 16px 12px;padding-left:12px;border-left:2px solid var(--linha-2);font-size:.8125rem;line-height:1.45;color:var(--mudo)}
.cartao[data-estado="feito"] .cartao-dito:not(:empty){display:block}
.cartao-extra{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:10px}
.cartao-elo{min-height:38px;font-size:.8438rem}
.cartao-elo[aria-pressed="true"]{color:var(--verde);text-decoration-color:var(--verde)}
.cartao-palavras{display:grid;gap:10px;justify-items:start;margin-top:8px}
.campo-palavras{min-height:92px;font-size:.9688rem}
.campo-outro{margin-top:12px;font-size:1rem}
.cartao-erro .campo{border-color:#FF7A6E}
.cartao-pede{animation:treme .32s}
@keyframes treme{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.ops{display:grid;gap:8px}
.op{appearance:none;display:flex;align-items:center;gap:13px;width:100%;min-height:52px;padding:11px 14px;text-align:left;border:1px solid var(--linha);border-radius:var(--raio);background:rgba(255,255,255,.03);font-size:.9375rem;line-height:1.35;transition:border-color .15s,background .15s,transform var(--mola-t) var(--mola)}
@media(hover:hover){.op:hover{border-color:var(--linha-2);background:var(--vidro-2)}}
.op-tecla{flex:none;width:25px;height:25px;border-radius:7px;border:1px solid var(--linha-2);display:grid;place-items:center;font-size:.6875rem;font-weight:600;color:var(--mudo)}
.op-txt{flex:1;min-width:0}
.op-txt small{display:block;margin-top:2px;font-size:.7813rem;line-height:1.35;color:var(--mudo)}
.op-marca{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--linha-2);position:relative}
.op[role="checkbox"] .op-marca{border-radius:6px}
.op[aria-checked="true"]{border-color:var(--verde);background:rgba(52,211,153,.08)}
.op[aria-checked="true"] .op-tecla{background:var(--verde);border-color:var(--verde);color:#0B0E14}
.op[aria-checked="true"] .op-marca{background:var(--verde);border-color:var(--verde)}
.op[aria-checked="true"] .op-marca::after{content:"";position:absolute;left:5px;top:5px;width:8px;height:4.5px;border:solid #0B0E14;border-width:0 0 2px 2px;transform:rotate(-45deg)}
.op-trava{opacity:.4}
.op-nega{animation:treme .3s}
.ops-pilulas{display:flex;flex-wrap:wrap;gap:8px}
.ops-pilulas .op{width:auto;min-height:42px;padding:8px 14px;border-radius:8px;font-size:.9063rem}
.ops-pilulas .op-tecla,.ops-pilulas .op-marca{display:none}
.ops-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
.ops-grade .op{align-items:flex-start;min-height:74px}
.ops-grade .op-marca{display:none}

.campo{width:100%;font-size:1.3125rem;line-height:1.35;padding:8px 2px 11px;border:0;border-bottom:2px solid var(--linha-2);border-radius:0;background:transparent;color:var(--texto);-webkit-appearance:none;transition:border-color .2s}
.campo::placeholder{color:rgba(255,255,255,.28)}
.campo:focus{outline:none;border-bottom-color:var(--verde)}
.campo-livre{margin-top:14px;font-size:1rem}
.campo-area{font-size:1.0625rem;min-height:132px;padding:14px 16px;border:1px solid var(--linha-2);border-radius:12px;background:var(--vidro);resize:vertical}
.campo-area:focus{border-color:var(--verde)}
.termos{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border:1px solid var(--linha);border-radius:12px;font-size:.8438rem;line-height:1.5;color:var(--mudo);cursor:pointer}
.termos input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:#34D399}
.termos a{color:var(--texto)}
.termos.pede{animation:treme .32s;border-color:#FF7A6E}

/* resposta aberta por voz */
.vz{display:flex;align-items:center;gap:18px;padding:18px;border:1px solid var(--linha);border-radius:12px;background:var(--vidro)}
.vz-mic{position:relative;flex:none;width:74px;height:74px;border-radius:50%;border:0;background:#fff;color:#0B0E14;display:grid;place-items:center;transition:transform var(--mola-t) var(--mola),background .2s}
.vz-mic:active{transform:scale(.94);transition-duration:.08s}
.vz-mic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vz-on .vz-mic{background:#FF5A4F;color:#fff;animation:pulso 1.2s ease-in-out infinite}
.vz-espera .vz-mic{background:#1B2434;color:var(--mudo);box-shadow:none;animation:pulso 1.1s ease-in-out infinite}
@keyframes pulso{50%{transform:scale(1.07)}}
.vz-txt{display:grid;gap:4px;min-width:0}
.vz-txt strong{font-size:1.0313rem;font-weight:620}
.vz-txt span{font-size:.8125rem;color:var(--mudo);line-height:1.45}
.vz-txt em{font-style:normal;font-size:.8125rem;color:#FF9A8F}
.vz-txt em:empty{display:none}
.vz-caixa{margin-top:14px;display:grid;gap:8px}
.vz-caixa>span{font-size:.75rem;color:var(--mudo);font-weight:600}

/* ---------- barra de acoes ---------- */
.acoes{position:sticky;bottom:0;z-index:10;display:flex;align-items:center;gap:8px;margin:28px calc(-1 * clamp(16px,4vw,48px)) 0;padding:14px clamp(16px,4vw,48px) calc(14px + var(--safe-b));background:linear-gradient(180deg,rgba(5,8,15,0),rgba(5,8,15,.95) 32%)}
.voltar{flex:none;width:46px;height:46px;border-radius:var(--raio);border:1px solid var(--linha-2);background:transparent;display:grid;place-items:center;transition:border-color .15s,transform var(--mola-t) var(--mola)}
@media(hover:hover){.voltar:hover{border-color:var(--texto)}}
.voltar svg{width:18px;height:18px;fill:none;stroke:var(--texto);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.falar{appearance:none;display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 16px 0 13px;border:1px solid var(--linha-2);border-radius:var(--raio);background:transparent;color:var(--texto);font-size:.8438rem;font-weight:550;transition:border-color .15s,background .15s,opacity .15s,transform var(--mola-t) var(--mola)}
.falar svg{width:18px;height:18px;fill:none;stroke:var(--verde);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.falar[data-modo="ouvindo"]{border-color:#FF5A4F;background:rgba(255,90,79,.14)}
.falar[data-modo="ouvindo"] svg{stroke:#FF8A80;animation:pisca 1s ease-in-out infinite}
.falar[data-modo="entendendo"]{opacity:.7}
.dica-tecla{margin-left:auto;font-size:.75rem;color:var(--fraco)}
.acoes .botao{min-width:164px}
.acoes .botao.chama{animation:chama 1.5s ease-in-out 2}
@keyframes chama{50%{box-shadow:0 0 0 6px rgba(255,255,255,.12)}}

/* ---------- painel ao vivo ---------- */
.vivo{position:sticky;top:var(--topo);height:calc(100dvh - var(--topo));overflow-y:auto;border-left:1px solid var(--linha);background:var(--tinta-2);padding:24px 22px 40px;scrollbar-width:thin}
.vv-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vv-cab h3{font-size:1.0625rem;font-weight:620;letter-spacing:-.02em;order:-1}
.vv-contexto{margin-top:8px;font-size:.7813rem;line-height:1.45;color:var(--mudo);min-height:1.5em}
.vv-indice{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:18px;padding:16px;border:1px solid var(--linha);border-radius:12px;background:var(--vidro)}
.vv-rot{display:block;font-size:.75rem;color:var(--mudo);font-weight:600}
.vv-num{display:inline-block;font-size:2.875rem;font-weight:600;line-height:1;letter-spacing:var(--tr-2);margin-top:6px}
.vv-faixa{margin-left:10px;font-size:.7813rem;font-weight:620;color:var(--cor,var(--mudo))}
.vv-prog{flex:1;max-width:150px;text-align:right}
.vv-prog i{display:block;height:4px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}
.vv-prog i b{display:block;height:100%;width:0;border-radius:9px;background:var(--grad);transition:width .5s var(--mola)}
.vv-prog em{display:block;margin-top:7px;font-style:normal;font-size:.6875rem;line-height:1.35;color:var(--mudo)}
.vv-radar{margin:6px -6px 0}
.vv-tit{margin:18px 0 10px;font-size:.75rem;font-weight:600;color:var(--mudo)}
.vv-vazio{font-size:.8125rem;line-height:1.5;color:var(--fraco)}
.vv-foco{display:grid;gap:6px}
.vv-foco li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border:1px solid var(--linha);border-radius:12px;font-size:.8125rem;line-height:1.3}
.vv-foco em{grid-column:1;font-style:normal;font-size:.7188rem;color:var(--mudo)}
.vv-foco b{grid-row:1/3;grid-column:2;align-self:center;font-size:.9375rem;font-weight:500;color:var(--atencao)}
.vv-sinais{display:grid;gap:8px}
.vv-sinais li{padding:10px 12px;border-left:2px solid var(--linha-2);background:rgba(255,255,255,.025);border-radius:0 10px 10px 0;font-size:.7813rem;line-height:1.45;color:#C9D1E0}
.vv-sinais em{display:block;font-style:normal;font-size:.75rem;color:var(--mudo);margin-bottom:3px;font-weight:600}
.vv-sinais .vv-alto{border-left-color:var(--critico)}
.vv-sinais .vv-novo{animation:novo 1.6s ease}
@keyframes novo{0%{background:rgba(52,211,153,.22);transform:translateX(10px);opacity:0}25%{opacity:1;transform:none}100%{background:rgba(255,255,255,.025)}}

.rd{display:block;width:100%;height:auto;overflow:visible}
.rd-grade{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.rd-borda{stroke:rgba(255,255,255,.14)}
.rd-eixo{stroke:rgba(255,255,255,.06);stroke-width:1}
.rd-regua{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.2;stroke-dasharray:4 4}
.rd-area{opacity:.26}
.rd-linha{fill:none;stroke-width:2.2;stroke-linejoin:round}
.rd-no{fill:#DFFFF2;stroke:#05080F;stroke-width:1.5}
.rd-vazio{opacity:0}
.rd-rot{font-family:var(--sans);font-size:11.5px;font-weight:560;fill:#C9D1E0}
.rd-apagado{fill:var(--fraco)}
.rd-val{font-size:12px;font-weight:500;fill:var(--verde)}

.pilula{display:none}
.folha{position:fixed;inset:0;z-index:50}
.folha-fundo{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0}
.folha-painel{position:absolute;left:0;right:0;bottom:0;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--tinta-2);border-radius:14px 14px 0 0;border-top:1px solid var(--linha-2);padding:0 20px calc(28px + var(--safe-b));box-shadow:0 -24px 60px rgba(0,0,0,.45);transform:translate3d(0,100%,0);will-change:transform}
.folha-alca{position:sticky;top:0;z-index:1;display:block;width:calc(100% + 40px);height:30px;margin:0 -20px 12px;padding:0;border:0;background:var(--tinta-2);cursor:grab;touch-action:none}
.folha-alca::before{content:"";display:block;width:36px;height:5px;margin:9px auto 0;border-radius:3px;background:rgba(255,255,255,.28);transition:background .15s}
.folha-alca:active{cursor:grabbing}
.folha-alca:active::before{background:rgba(255,255,255,.5)}
/* menos movimento: a folha aparece e some por esmaecimento */
.folha-suave{opacity:0;transition:opacity .2s ease}
.folha-suave.on{opacity:1}
.folha-suave .folha-painel{transform:none}
.folha-suave .folha-fundo{opacity:1}

/* ---------- calibracao e montagem ---------- */
.calibra,.monta{min-height:calc(100dvh - var(--topo));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 20px calc(40px + var(--safe-b))}
.calibra canvas,.monta canvas{width:min(300px,62vw);aspect-ratio:1;margin-bottom:4px}
.calibra h2,.monta h2{font-size:clamp(1.5rem,3vw,2.375rem);font-weight:540;letter-spacing:var(--tr-2);margin:12px 0 24px;min-height:1.3em}
.calibra-linhas{display:grid;gap:8px;width:min(560px,100%);text-align:left;min-height:330px;align-content:start}
.calibra-linhas li{display:flex;align-items:baseline;gap:14px;padding:13px 16px;border:1px solid var(--linha);border-radius:12px;background:var(--vidro);font-size:.9063rem;line-height:1.4;color:#C9D1E0;opacity:0;transform:translateY(10px);transition:opacity .45s var(--mola),transform .45s var(--mola)}
.calibra-linhas li.on{opacity:1;transform:none}
.calibra-linhas li>b{flex:none;min-width:42px;font-size:1.375rem;font-weight:500;letter-spacing:-.03em;color:var(--texto)}
.cal-pesos,.cal-foco{flex-direction:column;align-items:stretch!important;gap:10px!important}
.cal-pesos>span,.cal-foco>span{font-size:.75rem;color:var(--mudo);font-weight:600}
.cal-pesos div{display:grid;gap:6px}
.cal-pesos p{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;font-size:.7813rem}
.cal-pesos em{font-style:normal;color:var(--mudo)}
.cal-pesos i{height:5px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.cal-pesos i b{display:block;height:100%;width:0;border-radius:9px;background:var(--grad);transition:width .8s var(--mola)}
.cal-foco div{display:flex;flex-wrap:wrap;gap:6px}
.cal-foco em{font-style:normal;font-size:.7813rem;padding:5px 11px;border-radius:8px;border:1px solid rgba(52,211,153,.45)}
.calibra .botao{margin-top:22px}
.monta-barra{width:min(320px,70vw);height:3px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}
.monta-barra span{display:block;height:100%;width:0;background:var(--grad);animation:carrega 4.3s ease-in-out forwards}
.monta canvas{width:min(210px,46vw)}
.monta-linhas{display:grid;gap:9px;width:min(520px,100%);min-height:212px;margin:0 0 24px;text-align:left;align-content:start}
.monta-linhas li{display:grid;grid-template-columns:16px 40px minmax(0,1fr);gap:11px;align-items:baseline;font-size:.9375rem;line-height:1.4;color:#C9D1E0;opacity:0;transform:translateY(8px);transition:opacity .45s var(--mola),transform .45s var(--mola)}
.monta-linhas li.on{opacity:1;transform:none}
.monta-linhas i{position:relative;align-self:center;width:14px;height:14px;border-radius:50%;background:var(--verde)}
.monta-linhas i::after{content:"";position:absolute;left:3.6px;top:4.2px;width:6px;height:3px;border:solid #0B0E14;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)}
.monta-linhas b{font-size:1.125rem;font-weight:600;letter-spacing:-.02em;color:var(--texto);text-align:right}
/* fecho de bloco: como a dimensao que acabou ficou contra a regua do porte */
.fecho{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;align-items:center;margin:0 0 20px;padding:14px 18px;border:1px solid var(--linha-2);border-radius:12px;background:var(--vidro);animation:entra .7s var(--mola)}
.fecho>strong{font-size:2.25rem;font-weight:560;letter-spacing:-.04em;line-height:1}
.fecho p{font-size:.9375rem;line-height:1.4;color:#C9D1E0}
.fecho p b{font-weight:620;color:var(--texto)}
.fecho span{display:block;font-size:.8125rem;color:var(--mudo)}
.fecho-barra{position:relative;display:block;height:4px;margin:8px 0 7px;border-radius:9px;background:rgba(255,255,255,.1)}
.fecho-barra b{position:absolute;inset:0 auto 0 0;border-radius:9px;background:var(--verde)}
.fecho-barra.abaixo b{background:#E8A93B}
.fecho-barra u{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--texto)}
@keyframes carrega{to{width:100%}}

@media(max-width:1100px){
  .conversa{grid-template-columns:1fr}
  .vivo{display:none}
  body[data-tela="conversa"] .pilula{display:flex;align-items:center;gap:8px;height:42px;padding:0 5px 0 12px;border:1px solid var(--linha-2);border-radius:var(--raio);background:transparent;color:var(--texto);font-size:.8125rem;font-weight:600}
  .pilula i{width:6px;height:6px;border-radius:50%;background:var(--verde)}
  .pilula b{min-width:32px;height:30px;border-radius:8px;background:var(--tinta-3);color:var(--texto);display:grid;place-items:center;font-size:.8125rem;padding:0 8px}
  .pilula.pulsa{animation:pulsa .6s var(--mola)}
  @keyframes pulsa{30%{transform:scale(1.14)}}
  .dica-tecla{display:none}
  .acoes .botao{margin-left:auto}
}
@media(max-width:620px){
  .pilula span{display:none}
  body[data-tela="conversa"] .pilula{padding:0 4px 0 10px}
  .palco{padding-top:14px}
  .iris canvas{width:60px;height:60px}
  .bloco{margin-top:14px}
  .fala{font-size:1.375rem;margin-bottom:20px}
  .op{font-size:.9063rem}
  .op-tecla{display:none}
  .ops-grade{grid-template-columns:1fr}
  .ops-grade .op{min-height:60px}
  .campo{font-size:1.1875rem}
  .cartao-rot{max-width:42%;font-size:.7813rem}
  .vz{padding:14px;gap:14px}
  .vz-mic{width:64px;height:64px}
  .acoes{gap:6px}
  .acoes .botao{flex:1;min-width:0;padding:0 16px}
  .falar span{display:none}
  .falar{padding:0;width:46px;justify-content:center}
  .falar[data-modo="ouvindo"] span,.falar[data-modo="entendendo"] span{display:inline;font-size:.75rem}
  .falar[data-modo="ouvindo"],.falar[data-modo="entendendo"]{width:auto;padding:0 12px}
  .calibra-linhas{min-height:0}
}
@media(hover:none){.op-tecla,.dica-tecla{display:none}}