/* CENAS.CSS — topo de cada aba com objeto e próximo passo (cenas.js, v1.96).
   Um destaque por vez: só o objeto da cena com algo a fazer respira. */
.zcena-lugar{ margin:0 0 1rem; }
.zcena-lugar[hidden]{ display:none; }
.zcena{ display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:20px; background:#FFFDF8; border:1px solid var(--zelo-border); box-shadow:0 1px 3px rgba(43,35,32,.05); }
.zcena.agora{ border-color:rgba(28,133,88,.35); background:linear-gradient(0deg, rgba(28,133,88,.05), rgba(28,133,88,.05)), #FFFDF8; }
.zcena-objeto{ position:relative; flex:none; width:3.4rem; height:3.4rem; }
.zcena-arte{ display:block; width:100%; height:100%; }
.zcena-arte svg{ width:100%; height:100%; display:block; }
.zcena.agora .zcena-arte{ animation:zcenaRespira 2.8s ease-in-out infinite; }
.zcena-selo{ position:absolute; right:-.2rem; bottom:-.15rem; width:1.25rem; height:1.25rem; border-radius:50%; background:var(--zelo-primary); color:#fff; display:grid; place-items:center; font-size:.62rem; border:2px solid #FFFDF8; }
.zcena-frase{ flex:1; min-width:0; margin:0; font-size:.98rem; line-height:1.4; color:var(--zelo-text); }
.zcena-frase b{ font-weight:700; }
.zcena-btn{ flex:none; white-space:nowrap; }
.zcena .zcena-aovivo{ opacity:.35; }
.zcena.agora .zcena-aovivo{ opacity:1; }
@keyframes zcenaRespira{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

@media (max-width:640px){
  .zcena{ flex-wrap:wrap; padding:.8rem .9rem; gap:.75rem; }
  .zcena-objeto{ width:3rem; height:3rem; }
  .zcena-frase{ flex-basis:calc(100% - 4rem); font-size:.95rem; }
  .zcena-btn{ margin-left:3.75rem; }
}

/* Estados vazios com objeto */
.zcena-vazio-arte{ display:block; width:4.2rem; height:4.2rem; margin:0 auto .6rem; opacity:.9; }
.zcena-vazio-arte svg{ width:100%; height:100%; display:block; }

/* Mensagens no celular: o "escolha uma conversa ao lado" não tem lado */
@media (max-width:767px){
  #chatVazioSelecao{ display:none !important; }
  #tab-chat > .zelo-card, #tab-chat > .zelo-card > .grid{ min-height:0 !important; }
}

/* Barra de abas no celular: 4 abas + "Mais" (7 nomes não cabem em 390 px) */
.zelo-tabbar .tab-btn.tab-mais{ display:none; }
@media (max-width:768px){
  .zelo-tabbar .tab-btn.tab-extra{ display:none !important; }
  .zelo-tabbar .tab-btn.tab-mais{ display:flex; }
}
.zcena-mais-fundo{ position:fixed; inset:0; z-index:200; background:rgba(28,24,20,.38); display:flex; align-items:flex-end; justify-content:center; animation:zcenaFundo .2s ease-out; }
.zcena-mais{ width:100%; max-width:520px; background:#FFFDF8; border-radius:24px 24px 0 0; padding:1rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); box-shadow:0 -10px 30px rgba(43,35,32,.18); animation:zcenaSobe .25s var(--ease-out-suave, ease-out); }
.zcena-mais-topo{ display:flex; align-items:center; justify-content:space-between; margin:0 .2rem .6rem; font-size:1.02rem; }
.zcena-mais-x{ width:2.6rem; height:2.6rem; border-radius:50%; background:var(--zelo-surface-2); color:var(--zelo-text); display:grid; place-items:center; }
.zcena-mais-item{ width:100%; display:flex; align-items:center; gap:.85rem; text-align:left; padding:.75rem .8rem; border-radius:18px; border:1px solid var(--zelo-border); background:#fff; margin-top:.55rem; color:var(--zelo-text); }
.zcena-mais-item.ativo{ border-color:var(--zelo-primary); background:var(--zelo-mint); }
.zcena-mais-item .zcena-arte{ width:3rem; height:3rem; flex:none; }
.zcena-mais-item span:not(.zcena-arte){ flex:1; min-width:0; display:flex; flex-direction:column; }
.zcena-mais-item small{ color:var(--zelo-text-soft); font-size:.84rem; line-height:1.3; }
.zcena-mais-item > i{ color:var(--zelo-text-soft); }
@keyframes zcenaFundo{ from{ opacity:0; } to{ opacity:1; } }
@keyframes zcenaSobe{ from{ transform:translateY(40px); opacity:.6; } to{ transform:none; opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .zcena.agora .zcena-arte, .zcena-mais, .zcena-mais-fundo{ animation:none !important; }
}