/* ACOLHE — interface do totem. Pensada para toque, leitura de longe e acessibilidade. */
:root{
  --brand:#0F766E;
  --brand-light:color-mix(in srgb,var(--brand) 55%,white);
  --brand-dark:color-mix(in srgb,var(--brand) 65%,black);
  --brand-soft:color-mix(in srgb,var(--brand) 10%,white);
  --bg:#FBF7F0;--ink:#16282C;--muted:#4E6167;--card:#fff;--line:#E4DBCC;
  --accent:#E8735A;--gold:#F2B544;--danger:#B42318;
  --scale:1;
  --radius:24px;
}
html{font-size:calc(clamp(18px,10px + 1.6vmin,34px) * var(--scale));-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.35;display:flex;flex-direction:column;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
input{-webkit-user-select:text;user-select:text}
[hidden]{display:none!important}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;z-index:50;background:#fff;color:#000;padding:.6rem 1rem;border-radius:10px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:4px solid var(--gold);outline-offset:3px}

/* ---------- topo ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.25rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.brand img{height:2.6rem;max-width:9rem;object-fit:contain}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text strong{font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text span{font-size:.8rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.tools{display:flex;gap:.5rem}
.tool{width:3.1rem;height:3.1rem;border-radius:50%;background:var(--card);border:2px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:1.05rem}
.tool[aria-pressed=true]{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- layout ---------- */
.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:1rem;padding:0 1.5rem 1.25rem;align-items:stretch}
.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;min-height:0}
.panel{background:var(--card);border-radius:var(--radius);border:2px solid var(--line);padding:clamp(1rem,2.5vw,2rem);overflow:auto;display:flex;flex-direction:column;min-height:0;outline:none;box-shadow:0 8px 30px rgba(22,40,44,.06)}
.screen{display:flex;flex-direction:column;gap:1rem;margin:auto 0;width:100%}
#screenTalk{margin:0;height:100%;min-height:0;justify-content:space-between}
.talk-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:.75rem;padding:.15rem}
.talk-body>:first-child{margin-top:auto}.talk-body>:last-child{margin-bottom:auto}
.controls{flex:none}
@media (orientation:portrait),(max-width:820px){
  .layout{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:.5rem;padding:0 1rem 1rem}
  .avatar{width:min(64vw,30vh,560px)!important}
  .status{min-height:1.6em}
}

/* ---------- avatar ---------- */
.avatar{width:min(34vw,52vh,420px);aspect-ratio:1;position:relative}
.avatar svg{width:100%;height:100%;overflow:visible}
.avatar .head{filter:drop-shadow(0 10px 18px rgba(15,60,56,.25))}
.avatar .face{fill:#FBF6EC}
.avatar .ear{fill:var(--brand-dark)}
.avatar .cheek{fill:#F4A99A;opacity:.55}
.avatar .eye{fill:#12373A;transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
.avatar .smile{stroke:#12373A;stroke-width:9}
.avatar .talk{fill:#12373A;opacity:0;transform-box:fill-box;transform-origin:center}
.avatar .ring{fill:none;stroke:var(--brand);stroke-width:5;opacity:0;transform-box:fill-box;transform-origin:center}
.avatar .dot{fill:var(--brand);opacity:0}
.avatar .body{transform-box:fill-box;transform-origin:center;animation:float 6s ease-in-out infinite}
@keyframes blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ring{0%{transform:scale(.9);opacity:.55}100%{transform:scale(1.28);opacity:0}}
@keyframes mouth{0%,100%{transform:scaleY(.25)}30%{transform:scaleY(1)}60%{transform:scaleY(.45)}80%{transform:scaleY(.9)}}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-10px);opacity:1}}
body[data-state=listening] .avatar .ring{animation:ring 2.2s ease-out infinite}
body[data-state=listening] .avatar .r2{animation-delay:.7s}
body[data-state=listening] .avatar .r3{animation-delay:1.4s}
body[data-state=listening] .avatar .ear{fill:var(--accent)}
body[data-state=processing] .avatar .dot{animation:bounce 1.2s infinite}
body[data-state=processing] .avatar .d2{animation-delay:.15s}
body[data-state=processing] .avatar .d3{animation-delay:.3s}
body[data-state=processing] .avatar .eye{transform:translateY(-4px)}
body[data-state=speaking] .avatar .smile{opacity:0}
body[data-state=speaking] .avatar .talk{opacity:1;animation:mouth .55s ease-in-out infinite}
body[data-screen=ticket] .avatar .cheek{opacity:.9}

.status{margin:0;font-size:1.15rem;font-weight:600;color:var(--brand-dark);text-align:center;min-height:2em;display:flex;align-items:center;gap:.5rem}
body[data-state=listening] .status{color:var(--accent)}

/* ---------- textos ---------- */
.hello{font-size:clamp(1.7rem,min(4.4vw,7vh),3.4rem);line-height:1.1;margin:0;color:var(--brand-dark)}
.lead{font-size:clamp(1.2rem,2.4vw,1.8rem);margin:0;color:var(--muted)}
.hint{margin:0;color:var(--muted);font-size:1.05rem;display:flex;align-items:center;gap:.6rem}
.examples{font-style:italic}
.pulse-dot{width:.8rem;height:.8rem;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite;flex:none}
@keyframes pulse{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.2);opacity:1}}
.link{align-self:flex-start;color:var(--brand-dark);text-decoration:underline;font-size:1.05rem;padding:.6rem 0;min-height:3rem}
.cta{background:var(--brand);color:#fff;border-radius:999px;padding:1.1rem 2.2rem;font-size:clamp(1.3rem,2.6vw,2rem);font-weight:800;box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 40%,transparent);align-self:flex-start;min-height:4.5rem}
.cta:active{transform:scale(.98)}

/* ---------- conversa ---------- */
.bubble{font-size:clamp(1.25rem,min(3.4vw,5.4vh),2.6rem);font-weight:700;line-height:1.2;color:var(--ink);background:var(--brand-soft);border-radius:20px;padding:1rem 1.25rem}
.heard{margin:0;min-height:1.4em;color:var(--muted);font-size:1.05rem;font-style:italic}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.75rem}
.opt{display:flex;align-items:center;gap:.75rem;text-align:left;background:var(--card);border:3px solid var(--brand);color:var(--brand-dark);border-radius:20px;padding:1rem 1.1rem;min-height:4rem;font-size:clamp(1.05rem,min(2.2vw,3.6vh),1.6rem);font-weight:700}
.opt:hover{background:var(--brand-soft)}
.opt:active{transform:scale(.98);background:var(--brand);color:#fff}
.opt .emoji{font-size:1.6em;line-height:1;flex:none}
.opt .dot{width:1rem;height:1rem;border-radius:50%;flex:none;border:2px solid rgba(0,0,0,.2)}
.opt.normal{border-color:var(--line);color:var(--ink)}
.opt.yes{background:var(--brand);color:#fff;justify-content:center}
.opt.no{border-color:var(--muted);color:var(--ink);justify-content:center}
.opt.big{justify-content:center;font-size:clamp(1.4rem,2.8vw,2rem)}
.controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.25rem}
.mic{display:flex;align-items:center;gap:.75rem;background:var(--brand);color:#fff;border-radius:999px;padding:.8rem 1.6rem .8rem 1.2rem;min-height:4.4rem;font-size:1.4rem;font-weight:800;box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 35%,transparent)}
body[data-state=listening] .mic{background:var(--accent);animation:pulse 1.4s infinite}
body[data-state=processing] .mic{opacity:.6}
.side-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.ghost{display:inline-flex;align-items:center;gap:.5rem;border:2px solid var(--line);background:var(--card);border-radius:999px;padding:.7rem 1.2rem;min-height:3.6rem;font-weight:700;font-size:1.05rem}
.ghost.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,white)}
.textform{display:flex;gap:.5rem}
.textform input{flex:1;font:inherit;font-size:1.2rem;padding:.9rem 1.1rem;border:3px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);min-width:0}
.send{width:4rem;border-radius:16px;background:var(--brand);color:#fff;font-size:1.4rem}

/* ---------- senha ---------- */
.ticket{background:linear-gradient(160deg,#fff,var(--brand-soft));border:6px solid var(--brand);border-radius:32px;padding:clamp(1rem,3vh,2.2rem) 1rem;text-align:center;box-shadow:0 14px 40px color-mix(in srgb,var(--brand) 25%,transparent);animation:pop .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
.ticket-label{margin:0;font-size:clamp(1.2rem,2.6vw,2rem);font-weight:800;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.ticket-number{margin:.1em 0;font-size:clamp(4rem,min(16vw,22vh),12rem);line-height:1;font-weight:900;letter-spacing:.04em;color:var(--brand-dark);font-variant-numeric:tabular-nums}
.ticket-service{margin:0;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.ticket-priority{display:inline-block;margin:.6rem 0 0;padding:.3rem 1rem;border-radius:999px;background:var(--gold);color:#3A2A00;font-weight:800;font-size:1.15rem}
.ticket-msg{margin:0;font-size:clamp(1.3rem,2.6vw,2rem);font-weight:700;text-align:center}
.print-status{margin:0;text-align:center;color:var(--muted);min-height:1.4em}
.ticket-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.ticket-actions .cta{align-self:auto}
.countdown{height:.6rem;border-radius:99px;background:var(--line);overflow:hidden}
.countdown div{height:100%;width:100%;background:var(--brand);transform-origin:left;transition:transform linear}

/* ---------- alto contraste ---------- */
body.contrast{--bg:#000;--ink:#fff;--muted:#f0f0f0;--card:#0a0a0a;--line:#fff;--brand:#FFD84D;--brand-dark:#FFD84D;--brand-soft:#141414;--accent:#7CE0FF;--gold:#FFD84D}
body.contrast .cta,body.contrast .mic,body.contrast .send,body.contrast .opt.yes,body.contrast .tool[aria-pressed=true]{color:#000}
body.contrast .opt:active{color:#000}
body.contrast .ticket{background:#000}
body.contrast .avatar .face{fill:#fff}
body.contrast .ghost,body.contrast .opt,body.contrast .tool{border-color:#fff}
body.contrast .ghost.danger{color:#FF9A8F;border-color:#FF9A8F}
body.contrast .ticket-priority{color:#000}

/* telas baixas (monitores 1366x768 e afins): mais denso para caber opções e botões sem rolar demais */
@media (max-height:820px) and (orientation:landscape){
  .topbar{min-height:3.2rem;padding:.4rem 1.25rem}
  .tool{width:2.6rem;height:2.6rem}
  .panel{padding:.8rem 1rem}
  .bubble{padding:.6rem 1rem}
  .options{gap:.5rem}
  .opt{min-height:3.2rem;padding:.5rem .9rem}
  .controls{gap:.6rem}
  .mic{min-height:3.4rem;padding:.5rem 1.2rem .5rem 1rem;font-size:1.15rem}
  .side-actions{gap:.4rem;flex-wrap:nowrap}
  .ghost{min-height:3rem;padding:.4rem .9rem;font-size:.95rem}
  .avatar{width:min(30vw,46vh,340px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}