/* Zé no celular: o mesmo céu azul e o mesmo fio de luz do PC, feito para o polegar. */
:root{
  --chao:#040a1c; --sup:rgba(14,28,64,.62); --sup-2:#13234d; --borda:#1b2e5e; --borda-forte:#27407a;
  --tinta:#e4efff; --tinta-2:#93a8d4; --tinta-3:#6a7fae;
  --brasa:#3ee6ff; --ok:#4ff0b0; --alerta:#ffbe5a; --erro:#ff5b6e;
  --fonte:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --topo:calc(56px + env(safe-area-inset-top)); --baixo:calc(64px + env(safe-area-inset-bottom));
  --curva:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:radial-gradient(130% 80% at 50% 25%,#0c1f4d 0%,#06102a 50%,#030816 100%);
  color:var(--tinta);font-family:var(--fonte);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;overscroll-behavior:none;user-select:none}
input,button{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
input{user-select:text}
:focus-visible{outline:2px solid var(--brasa);outline-offset:2px;border-radius:8px}
.oculto{display:none!important}
#ceu{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* topo */
#topo{position:fixed;top:0;left:0;right:0;z-index:5;height:var(--topo);padding:env(safe-area-inset-top) 16px 0;display:flex;align-items:center;justify-content:space-between}
.marca{display:flex;align-items:center;gap:9px}
.marca svg{width:26px;height:26px;color:var(--brasa);filter:drop-shadow(0 0 6px rgba(62,230,255,.6))}
.marca h1{font-size:22px;font-weight:650;letter-spacing:-.02em}
.conexao{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tinta-2);padding:6px 10px;border-radius:99px;background:var(--sup)}
.conexao i{width:8px;height:8px;border-radius:50%;background:var(--tinta-3)}
.conexao.ok i{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.conexao.erro i{background:var(--erro)}
.conexao.erro{color:var(--erro)}

/* telas */
main{position:fixed;top:var(--topo);bottom:var(--baixo);left:0;right:0;z-index:1}
.tela{position:absolute;inset:0;display:none;overflow:auto;padding:4px 16px 16px;-webkit-overflow-scrolling:touch}
.tela.ativa{display:block;animation:entra .3s var(--curva)}
#tela-ze.ativa{display:flex;flex-direction:column;overflow:hidden;padding:0}
.tela h2{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:6px 0 14px}

/* o Zé */
#presenca{position:relative;flex:0 0 auto;height:min(38vh,320px);display:flex;flex-direction:column;justify-content:flex-end;transition:height .4s var(--curva)}
#presenca.encolhido{height:min(22vh,170px)}
#fio{position:absolute;inset:0;width:100%;height:100%}
#estado{position:relative;padding:0 18px 8px}
#estado-rotulo{font-size:13px;font-weight:600;color:var(--tinta-2)}
#estado-texto{font-size:21px;line-height:1.2;letter-spacing:-.01em;text-shadow:0 0 22px rgba(62,200,255,.25);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:1.2em}
#estado.ouvindo #estado-rotulo,#estado.falando #estado-rotulo{color:var(--brasa)}
#estado.agindo #estado-rotulo{color:var(--alerta)}
#estado.erro #estado-rotulo{color:var(--erro)}

/* conversa */
#conversa{flex:1;overflow:auto;padding:8px 16px 12px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch;user-select:text}
.msg{max-width:88%;animation:sobe .3s var(--curva) both}
.msg .quem{display:block;font-size:12px;color:var(--tinta-3);margin-bottom:3px}
.msg.ze .corpo{font-size:16.5px;line-height:1.5}
.msg.eu{align-self:flex-end;text-align:right}
.msg.eu .corpo{display:inline-block;text-align:left;background:var(--sup-2);padding:9px 13px;border-radius:16px 16px 4px 16px}
.msg strong{font-weight:650}
.acao{font-size:12.5px;color:var(--tinta-3);display:flex;gap:7px;align-items:baseline}
.acao::before{content:"";flex:none;width:12px;height:2px;background:var(--alerta);transform:translateY(-3px);border-radius:2px}
.mini-cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 6px;margin:0 -16px;padding-left:16px;scrollbar-width:none}
.mini-cards::-webkit-scrollbar{display:none}

#comando{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin:0 12px 10px;padding:6px 6px 6px 14px;border-radius:30px;
  background:rgba(14,28,64,.8);border:1px solid var(--borda)}
#entrada{flex:1;min-width:0;background:none;border:0;outline:none;font-size:16px;padding:8px 0}
#entrada::placeholder{color:var(--tinta-3)}
.redondo{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--tinta-2)}
.redondo svg,.mic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--brasa);color:#021018;
  box-shadow:0 0 22px rgba(62,230,255,.4);transition:transform .15s var(--curva);touch-action:none}
.mic.gravando{transform:scale(1.18);background:#78ffec;box-shadow:0 0 0 10px rgba(120,255,236,.15),0 0 34px rgba(120,255,236,.6)}
.mic.ocupado{opacity:.5}

/* casa */
.grade{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.aparelho{position:relative;text-align:left;padding:14px;border-radius:16px;background:var(--sup);border:1px solid var(--borda);min-height:96px;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;transition:transform .12s,background .2s}
.aparelho:active{transform:scale(.97)}
.aparelho svg{width:24px;height:24px;fill:none;stroke:var(--brasa);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.aparelho b{font-size:15px;font-weight:600;line-height:1.2}
.aparelho small{display:block;font-size:12.5px;color:var(--tinta-2)}
.aparelho.off{opacity:.45}
.aparelho .botoes{display:flex;gap:6px}
.aparelho .botoes+.botoes{margin-top:-4px}
.aparelho .botoes button{flex:1;padding:7px 0;border-radius:10px;background:var(--sup-2);font-size:13.5px;font-weight:550}
.aparelho .botoes button:active{background:var(--brasa);color:#021018}
.cartao-pc{width:100%;text-align:left;padding:16px;border-radius:16px;background:var(--brasa);color:#021018;margin-bottom:12px;box-shadow:0 0 26px rgba(62,230,255,.35)}
.cartao-pc b{display:block;font-size:18px}
.alexa{margin-top:22px}
.alexa label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.alexa div{display:flex;gap:8px}
.alexa input,.caixa input{flex:1;min-width:0;width:100%;background:rgba(5,13,36,.8);border:1px solid var(--borda-forte);border-radius:12px;padding:11px 12px;font-size:16px;outline:none}
.vazio{color:var(--tinta-3);font-size:14.5px;padding:8px 0;grid-column:1/-1}

/* cards */
.resumo{color:var(--tinta-2);margin-bottom:14px;user-select:text}
.cards{display:flex;flex-direction:column;gap:14px}
.card{display:block;text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;background:var(--sup);border:1px solid var(--borda);
  animation:sobe .35s var(--curva) both}
.card .foto{aspect-ratio:16/10;background:#0a1636 center/cover no-repeat}
.card .info{padding:12px 14px 14px}
.card b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.card .preco{display:block;font-size:22px;font-weight:650;color:var(--brasa);margin-top:6px;letter-spacing:-.01em}
.card small{display:block;color:var(--tinta-2);font-size:13px;margin-top:2px}
.card ul{list-style:none;margin-top:8px;font-size:13.5px;color:var(--tinta-2)}
.card.destaque{border-color:var(--brasa)}
.mini-cards .card{flex:0 0 72%;scroll-snap-align:start}
.mini-cards .card .foto{aspect-ratio:16/9}
.mini-cards .card .preco{font-size:18px}

/* abas */
#abas{position:fixed;bottom:0;left:0;right:0;z-index:5;height:var(--baixo);padding:0 8px env(safe-area-inset-bottom);display:flex;
  background:rgba(4,10,28,.92);border-top:1px solid var(--borda)}
.aba{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;color:var(--tinta-3);position:relative}
.aba svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.aba.ativa{color:var(--brasa)}
.ponto{position:absolute;top:10px;right:calc(50% - 20px);width:8px;height:8px;border-radius:50%;background:var(--brasa);box-shadow:0 0 8px var(--brasa)}

/* folhas por baixo */
.folha-baixo{position:fixed;inset:0;z-index:20;background:rgba(2,6,18,.72);display:flex;align-items:flex-end;animation:aparece .2s}
.caixa{width:100%;background:#0a1636;border-top:1px solid var(--borda-forte);border-radius:22px 22px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));
  animation:sobeFolha .3s var(--curva)}
.caixa h2{font-size:21px;font-weight:600;margin-bottom:8px}
.caixa p{color:var(--tinta);white-space:pre-wrap;margin-bottom:12px;user-select:text}
.caixa img{max-width:100%;border-radius:12px;margin-bottom:12px}
.acoes{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.acoes button{flex:1}
.principal{background:var(--brasa);color:#021018;font-weight:650;padding:12px 16px;border-radius:14px;box-shadow:0 0 20px rgba(62,230,255,.3)}
.perigo{color:var(--erro);padding:12px 16px;border-radius:14px;border:1px solid #4a1d2a}
.fantasma{color:var(--tinta-2);padding:12px 16px;border-radius:14px;background:var(--sup-2)}
.aviso{position:fixed;left:16px;right:16px;bottom:calc(var(--baixo) + 12px);z-index:30;padding:12px 14px;border-radius:14px;background:#13234d;
  border:1px solid var(--borda-forte);font-size:14.5px;animation:sobe .25s var(--curva)}

@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sobeFolha{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes entra{from{opacity:0}to{opacity:1}}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (min-width:700px){.grade{grid-template-columns:repeat(3,1fr)}.tela,#comando{max-width:760px;margin-left:auto;margin-right:auto}}
.sub{font-size:15px;font-weight:600;color:var(--tinta-2);margin:20px 0 10px}
#central:empty{display:none}