:root{
  --bg:#0f1216;
  --surface:#171c22;
  --surface-2:#1f262e;
  --border:#2a333d;
  --text:#eef2f6;
  --muted:#9aa7b4;
  --primary:#1fc27a;
  --primary-dark:#159a5f;
  --accent:#ffb02e;
  --danger:#ff5c5c;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--primary);text-decoration:none}
img{max-width:100%;display:block}
.hidden{display:none !important}

/* ---------- Auth ---------- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.auth-wrap{width:100%;max-width:420px}
.brand{text-align:center;margin-bottom:20px}
.logo{width:56px;height:56px;margin:0 auto 10px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;font-weight:800;font-size:26px;color:#0f1216}
.brand h1{margin:0;font-size:28px;letter-spacing:-.5px}
.brand p{margin:6px 0 0;color:var(--muted);font-size:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--muted);font-weight:600;cursor:pointer}
.tab.active{background:var(--surface-2);color:var(--text)}
.form{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
input,textarea,select{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px 12px;color:var(--text);font-size:15px;font-family:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--primary);outline-offset:1px}
.btn{border:none;border-radius:10px;padding:12px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.btn.primary{background:var(--primary);color:#08130d}
.btn.primary:hover{background:var(--primary-dark)}
.btn:disabled{cursor:not-allowed;opacity:.45}
.btn.primary:disabled:hover{background:var(--primary)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.danger-outline{background:transparent;border:1px solid var(--danger);color:var(--danger)}
.btn.link{background:none;color:var(--muted);font-weight:600;font-size:13px}
.btn.small{padding:8px 12px;font-size:13px}
.msg{min-height:18px;font-size:13px;margin:12px 0 0;text-align:center}
.msg.error{color:var(--danger)}
.msg.ok{color:var(--primary)}
.hint{color:var(--muted);font-size:12px}
.avatar-preview img{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--surface-2)}

/* ---------- App shell ---------- */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(15,18,22,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar .logo{width:34px;height:34px;font-size:18px;border-radius:10px;margin:0}
.topbar h2{font-size:17px;margin:0;flex:1}
.nav{display:flex;gap:6px;overflow-x:auto;padding:10px 16px;border-bottom:1px solid var(--border)}
.nav a{padding:8px 14px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap}
.nav a.active{background:var(--primary);color:#08130d;border-color:transparent}
.container{max-width:960px;margin:0 auto;padding:16px}
h3.section{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:24px 0 12px}

/* ---------- Cards / grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.item .thumb{aspect-ratio:1/1;width:100%;object-fit:cover;background:var(--surface-2)}
.item .body{padding:10px;display:flex;flex-direction:column;gap:4px}
.item .title{font-size:14px;font-weight:700;line-height:1.3}
.item .price{color:var(--primary);font-weight:800}
.item .meta{font-size:12px;color:var(--muted)}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.badge.novo{color:#08130d;background:var(--primary);border-color:transparent}
.badge.otimo{color:#231703;background:var(--accent);border-color:transparent}
.stars{color:var(--accent);font-size:13px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters input,.filters select{flex:1;min-width:130px}
.empty{color:var(--muted);text-align:center;padding:40px 0}

/* ---------- Detail / profile ---------- */
.detail{display:grid;gap:18px}
@media(min-width:760px){.detail{grid-template-columns:1.2fr 1fr}}
.gallery img{border-radius:var(--radius);border:1px solid var(--border);aspect-ratio:4/3;object-fit:cover;width:100%}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}
.seller{display:flex;gap:12px;align-items:center}
.seller img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.seller .name{font-weight:700}
.price-big{font-size:28px;font-weight:800;color:var(--primary)}
.chat{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;padding:4px}
.bubble{padding:9px 12px;border-radius:12px;background:var(--surface-2);font-size:14px;max-width:85%}
.bubble.mine{background:var(--primary);color:#08130d;align-self:flex-end}
.row{display:flex;gap:8px}
.row input{flex:1}
.rate{display:flex;gap:6px}
.rate button{background:none;border:none;font-size:24px;color:var(--border);cursor:pointer}
.rate button.on{color:var(--accent)}

.avatar-preview img:not([src]),.gallery img:not([src]),.gallery img[src=""]{display:none}

/* ---------- Senha / mostrar-ocultar ---------- */
.pass-wrap{position:relative;display:flex}
.pass-wrap input{flex:1;padding-right:82px;width:100%}
.toggle-pass{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--primary);font-weight:700;font-size:12px;cursor:pointer;padding:6px 8px}

/* ---------- Aviso de conta inexistente ---------- */
.notice{border:1px dashed var(--border);background:var(--surface-2);border-radius:12px;padding:12px;font-size:13px;color:var(--muted)}
.notice strong{color:var(--text);display:block;margin-bottom:4px}
.notice p{margin:0 0 10px}
.notice #no-account-email{color:var(--text);font-weight:700}

/* ---------- Verificação facial ---------- */
.verify{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px}
.verify h2{margin:0;font-size:15px}
.aviso-lgpd{font-size:12.5px;line-height:1.5;color:var(--text);background:rgba(255,176,46,.10);border:1px solid rgba(255,176,46,.45);border-radius:10px;padding:10px}
.cam-wrap{display:grid;place-items:center;position:relative;overflow:hidden;border-radius:50%;align-self:center;width:min(100%,260px)}
.cam-wrap video,.cam-wrap img{width:100%;max-width:260px;aspect-ratio:1/1;object-fit:cover;border-radius:50%;background:#000;border:2px solid var(--border)}
.camera-flash{position:absolute;inset:0;border-radius:50%;background:#fff;opacity:0;pointer-events:none}
.camera-flash.flash-on{animation:camera-flash .35s ease-out}
@keyframes camera-flash{0%{opacity:0}20%{opacity:.95}100%{opacity:0}}
.comando-facial{margin:0;text-align:center;font-size:19px;font-weight:800;color:var(--primary);min-height:24px}
.som-check{align-self:center}
.cam-wrap video{transform:scaleX(-1)}
.terms-status{text-align:center;margin:0}
.terms-status.ok{color:var(--primary)}
.check{flex-direction:row;align-items:flex-start;gap:9px;font-weight:500;line-height:1.45;color:var(--muted);font-size:12.5px}
.check input{width:18px;height:18px;flex:0 0 18px;margin-top:1px;accent-color:var(--primary)}

/* ---------- Rodapé e páginas institucionais ---------- */
.site-footer{margin-top:28px;padding-top:16px;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:12.5px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:10px}
.site-footer p{margin:4px 0}
.legal{max-width:760px;line-height:1.65}
.legal h1{font-size:26px;margin-bottom:6px}
.legal h2{font-size:17px;margin-top:26px}
.legal ul{padding-left:18px;color:var(--muted)}
.legal p{color:var(--muted)}
.legal .panel p{margin:6px 0}

/* ---------- Espaço publicitário (Google AdSense) ---------- */
.ad-slot{margin:22px 0;padding:10px;border:1px dashed var(--border);border-radius:12px;text-align:center;min-height:110px;display:grid;place-items:center;background:var(--surface)}
.ad-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* ---------- Tema claro ---------- */
html[data-tema="claro"]{
  --bg:#f5f7fa;
  --surface:#ffffff;
  --surface-2:#eef1f5;
  --border:#d7dee6;
  --text:#16202b;
  --muted:#5c6b7a;
  --primary:#0f9d63;
  --primary-dark:#0b7d4f;
  --accent:#e08800;
  --danger:#d63a3a;
}
html[data-tema="claro"] .topbar{background:rgba(255,255,255,.92)}
html[data-tema="claro"] .btn.primary,html[data-tema="claro"] .nav a.active,
html[data-tema="claro"] .badge.novo{color:#ffffff}
html[data-tema="claro"] .bubble.mine{color:#ffffff}
html[data-tema="claro"] .badge.otimo{color:#231703}

/* ---------- Modo comprar/vender ---------- */
.modo-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.modo-switch{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.modo-switch button{background:transparent;border:none;color:var(--muted);font-weight:700;font-size:13px;padding:8px 16px;cursor:pointer;font-family:inherit}
.modo-switch button.on{background:var(--primary);color:#08130d}
html[data-tema="claro"] .modo-switch button.on{color:#fff}
.nav a.secundario{opacity:.55}
.badge-count{margin-left:6px;background:var(--danger);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px;font-weight:800}

/* ---------- Listas verticais (pessoas, notificações, conversas) ---------- */
.lista-vertical{display:flex;flex-direction:column;gap:12px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pessoa,.conversa,.notif{flex-direction:row;align-items:center;gap:12px;text-align:left;cursor:pointer;color:var(--text)}
.pessoa img,.conversa img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--surface-2);flex:0 0 48px}
.pessoa span,.conversa span,.notif span{display:flex;flex-direction:column;gap:3px}
.notif.nova{border-color:var(--primary)}
.notif-ico{font-size:20px;flex:0 0 24px}
.sub{font-size:15px;margin:0}
.coluna{display:flex;flex-direction:column;gap:14px}

/* ---------- Comentários e denúncia ---------- */
.comentario{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.comentario img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.comentario p{margin:4px 0 0;color:var(--muted);font-size:14px;white-space:pre-wrap}
.denuncia summary{cursor:pointer;color:var(--danger);font-size:13px;font-weight:700}


/* ---------- Luz de tela para o Face ID ---------- */
.ring-light{position:fixed;inset:0;background:radial-gradient(circle at 50% 32%, #ffffff 0%, #ffffff 55%, #f2f6ff 100%);opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:60}
.ring-light.on{opacity:.94}
body.com-luz .verify{position:relative;z-index:70;box-shadow:0 0 0 2px var(--primary)}
body.com-luz .cam-wrap video{border-color:var(--primary)}
.camera-flash.flash-on{animation:camera-flash .5s ease-out}
@keyframes camera-flash{0%{opacity:0}15%{opacity:1}45%{opacity:.85}100%{opacity:0}}

/* ============================================================
   Conta única (sem modo comprador/vendedor)
   Meus anúncios, Minha conta, Configurações e trava do loading
   ============================================================ */


/* Lista de "Meus anúncios" */
.lista-anuncios { display: flex; flex-direction: column; gap: 12px; }
.anuncio-card { display: flex; flex-direction: column; gap: 10px; }
.anuncio-topo { display: flex; gap: 12px; align-items: flex-start; }
.anuncio-topo .thumb {
  width: 88px; height: 88px; object-fit: cover; border-radius: 12px;
  background: var(--panel-2, var(--panel));
}
.anuncio-topo strong { display: block; font-size: 16px; }
.anuncio-card .acoes { flex-wrap: wrap; gap: 8px; }

/* Menu da conta */
.menu-conta { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.menu-item {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  width: 100%; cursor: pointer; border: 1px solid var(--border);
  color: inherit; text-decoration: none;
}
.menu-item:hover { border-color: var(--primary); }
.menu-item strong { font-size: 15px; }

/* Ação destrutiva */
.perigo { color: var(--danger, #e05252); border-color: var(--danger, #e05252); }
.menu-item.perigo strong { color: var(--danger, #e05252); }


/* ---------- Filtro de raio por CEP ---------- */
.raio-box { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.raio-box .row { gap: 8px; flex-wrap: wrap; }
.raio-box input { max-width: 160px; }

/* ---------- Deslizar para os lados para trocar de página ---------- */
body { touch-action: pan-y; }
main.container { animation: entra-pagina .18s ease-out; }
@keyframes entra-pagina { from { opacity: .35; transform: translateX(0) } to { opacity: 1; transform: none } }
body.sai-esquerda main.container { transform: translateX(-8%); opacity: .3; transition: .13s ease-in; }
body.sai-direita main.container { transform: translateX(8%); opacity: .3; transition: .13s ease-in; }
@media (prefers-reduced-motion: reduce) {
  main.container, body.sai-esquerda main.container, body.sai-direita main.container { animation: none; transition: none; transform: none }
}

/* ============================================================
   VISUAL PROFISSIONAL — paleta e componentes (estilo marketplace)
   ============================================================ */
html[data-tema="claro"]{
  --bg:#f5f5f5;
  --surface:#ffffff;
  --surface-2:#f5f5f5;
  --border:#e6e6e6;
  --text:#222222;
  --muted:#757575;
  --primary:#ee4d2d;
  --primary-dark:#d73211;
  --accent:#ffa726;
  --danger:#e53935;
  --shadow:0 1px 3px rgba(0,0,0,.10);
  --shadow-lg:0 6px 20px rgba(0,0,0,.12);
  --radius:12px;
}
html[data-tema="escuro"]{
  --bg:#121212;
  --surface:#1b1d20;
  --surface-2:#25282c;
  --border:#31353a;
  --text:#f2f3f5;
  --muted:#a0a6ad;
  --primary:#ff5c33;
  --primary-dark:#e0431d;
  --accent:#ffb02e;
  --danger:#ff6b6b;
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 8px 24px rgba(0,0,0,.5);
  --radius:12px;
}
html[data-tema="claro"] .btn.primary,
html[data-tema="escuro"] .btn.primary{color:#fff}
html[data-tema="claro"] .badge.novo,
html[data-tema="escuro"] .badge.novo{color:#fff}
html[data-tema="claro"] .bubble.mine,
html[data-tema="escuro"] .bubble.mine{color:#fff;background:var(--primary)}
html[data-tema="claro"] .nav a.active,
html[data-tema="escuro"] .nav a.active{color:#fff}

body{-webkit-font-smoothing:antialiased;padding-bottom:76px}
body.auth-body{padding-bottom:24px}

/* ---------- Topo estilo marketplace ---------- */
.topbar{
  background:linear-gradient(90deg,var(--primary),#ff7337);
  border-bottom:none;color:#fff;padding:14px 16px;box-shadow:var(--shadow)
}
.topbar h2{font-weight:800;letter-spacing:-.3px;color:#fff}
.topbar .logo{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.topbar .btn.ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.10)}
.nav{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 14px;
  scrollbar-width:none;box-shadow:var(--shadow)}
.nav::-webkit-scrollbar{display:none}
.nav a{background:var(--surface-2);border-color:transparent;transition:.15s}
.nav a.active{background:var(--primary);box-shadow:0 2px 8px rgba(238,77,45,.35)}

/* ---------- Barra inferior (acesso rápido) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:var(--surface);border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(0,0,0,.08)
}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;font-weight:600;color:var(--muted);padding:4px 2px}
.tabbar a i{font-style:normal;font-size:20px;line-height:1}
.tabbar a.active{color:var(--primary)}

/* ---------- Cartões ---------- */
.card,.panel,.item{box-shadow:var(--shadow);border-radius:var(--radius)}
.item{transition:transform .16s ease, box-shadow .16s ease;border-color:transparent}
.item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.item .title{min-height:2.6em;overflow:hidden}
.item .price{font-size:16px}
.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.btn{border-radius:10px;transition:.15s}
.btn.primary{box-shadow:0 2px 10px rgba(238,77,45,.28)}
.btn.primary:hover{filter:brightness(1.03)}
h3.section,h1.section{color:var(--text);text-transform:none;letter-spacing:-.2px;font-size:19px;font-weight:800}

/* ---------- Barra de distância (topo da home) ---------- */
.distancia-bar{
  position:sticky;top:0;z-index:9;background:var(--surface);border-bottom:1px solid var(--border);
  padding:12px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)
}
.distancia-bar .linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.distancia-bar label{flex-direction:row;align-items:center;gap:6px;color:var(--text);font-size:13px}
.distancia-bar select{min-width:150px;font-weight:700}
.distancia-bar input{max-width:150px}
.chip-local{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);
  border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--muted);font-weight:600}
.link-acao{background:none;border:none;color:var(--primary);font-weight:700;font-size:13px;cursor:pointer;padding:0;font-family:inherit}

/* ---------- Animação: só na entrada do login ---------- */
.entrada-login{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--primary),#ff8a4c);color:#fff;
  animation:entrada-fade .35s ease-out
}
.entrada-login .marca{display:grid;place-items:center;gap:10px;animation:entrada-zoom .8s cubic-bezier(.2,.8,.2,1)}
.entrada-login .marca div{width:78px;height:78px;border-radius:24px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:38px;font-weight:800}
.entrada-login .marca strong{font-size:22px;letter-spacing:.5px}
.entrada-login.saindo{animation:entrada-out .3s ease-in forwards}
@keyframes entrada-fade{from{opacity:0}to{opacity:1}}
@keyframes entrada-zoom{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
@keyframes entrada-out{to{opacity:0;transform:scale(1.06)}}
body.chegando main.container{animation:chegada .45s ease-out}
@keyframes chegada{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Deslizar entre menus ---------- */
main.container{animation:none}
body.sai-esquerda main.container{transform:translateX(-10%);opacity:.25;transition:.15s ease-in}
body.sai-direita main.container{transform:translateX(10%);opacity:.25;transition:.15s ease-in}
.dica-deslize{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 0}
@media (prefers-reduced-motion: reduce){
  .entrada-login .marca,body.chegando main.container{animation:none}
}

/* ---------- Tela do usuário: busca, filtros e menu deslizante ---------- */
.busca-bar{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--border);
  padding:10px 12px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.campo-busca{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:4px 6px 4px 14px}
.campo-busca .ico{font-size:15px;opacity:.8}
.campo-busca input{flex:1;min-width:0;background:transparent;border:none;padding:9px 0;font-size:15px}
.campo-busca input:focus{outline:none}
.campo-busca .btn{border-radius:999px;white-space:nowrap}
.menu-desliza{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:2px 0;scroll-snap-type:x proximity}
.menu-desliza::-webkit-scrollbar{display:none}
.menu-desliza .chip{scroll-snap-align:start;white-space:nowrap;cursor:pointer;font-family:inherit;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
  border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;transition:.15s}
.menu-desliza .chip.on{background:var(--primary);color:#08130d;border-color:transparent}
html[data-tema="claro"] .menu-desliza .chip.on{color:#fff}
.painel-filtros{position:fixed;top:var(--altura-busca,120px);left:0;right:0;z-index:59;max-height:70vh;overflow:auto;
  box-shadow:var(--shadow);background:var(--surface);border-bottom:1px solid var(--border);padding:12px 16px;
  display:flex;flex-direction:column;gap:10px}
.painel-filtros .linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.painel-filtros .linha.fim{justify-content:space-between;margin-top:2px}
.painel-filtros label{flex-direction:row;align-items:center;gap:6px;color:var(--text);font-size:13px}
.painel-filtros select{min-width:150px;flex:1}
.painel-filtros input{max-width:150px}
#filtros-count{margin-left:6px}

/* ============================================================
   AJUSTES FINAIS — tema (claro/escuro/dispositivo), barra de baixo
   que nunca some e correções de contraste no tema claro
   ============================================================ */

/* A barra de baixo é fixa e fica acima de qualquer animação de troca de página */
.tabbar{z-index:80}
body.sai-esquerda .tabbar,body.sai-direita .tabbar{transform:none;opacity:1}
body.sai-esquerda .topbar,body.sai-direita .topbar,
body.sai-esquerda .nav,body.sai-direita .nav,
body.sai-esquerda .busca-bar,body.sai-direita .busca-bar{transition:opacity .15s ease-in;opacity:.6}
.tabbar a{position:relative}
.tabbar a .badge-count{position:absolute;top:0;right:22%;margin:0}
.tabbar a.active i{transform:translateY(-1px) scale(1.08);transition:.15s}
.tabbar a.active{font-weight:800}
/* espaço para o conteúdo não ficar embaixo da barra */
body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
body.auth-body{padding-bottom:24px}

/* Botão redondo de tema no topo */
.btn.icone{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:16px}

/* Escolha de tema em Configurações */
.opcoes-tema{display:flex;gap:8px;flex-wrap:wrap}
.opcoes-tema button{flex:1;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;transition:.15s}
.opcoes-tema button span.emoji{font-size:22px;line-height:1}
.opcoes-tema button.on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 30%,transparent)}

/* ---------- Tema claro: nada pode sumir ---------- */
html[data-tema="claro"]{
  --bg:#f4f5f7;
  --surface:#ffffff;
  --surface-2:#f0f1f4;
  --border:#dcdfe4;
  --text:#1b1f24;
  --muted:#5e6672;
  --primary:#ee4d2d;
  --primary-dark:#d73211;
  --accent:#c97a00;
  --danger:#d93025;
}
html[data-tema="claro"] body{background:var(--bg);color:var(--text)}
html[data-tema="claro"] .card,
html[data-tema="claro"] .panel,
html[data-tema="claro"] .item,
html[data-tema="claro"] .menu-item{background:var(--surface);border:1px solid var(--border);color:var(--text)}
html[data-tema="claro"] input,
html[data-tema="claro"] textarea,
html[data-tema="claro"] select{background:#fff;color:var(--text);border-color:var(--border)}
html[data-tema="claro"] input::placeholder,
html[data-tema="claro"] textarea::placeholder{color:#8a919b}
html[data-tema="claro"] .campo-busca{background:#fff}
html[data-tema="claro"] .campo-busca input{background:transparent}
html[data-tema="claro"] .btn.ghost{background:#fff;border-color:var(--border);color:var(--text)}
html[data-tema="claro"] .topbar .btn.ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);color:#fff}
html[data-tema="claro"] .nav a{background:var(--surface-2);color:#3c444e}
html[data-tema="claro"] .nav a.active{color:#fff}
html[data-tema="claro"] .tabbar{background:#fff;border-top:1px solid var(--border)}
html[data-tema="claro"] .tabbar a{color:#6b7280}
html[data-tema="claro"] .tabbar a.active{color:var(--primary)}
html[data-tema="claro"] .menu-desliza .chip{background:#fff;border-color:var(--border);color:#3c444e}
html[data-tema="claro"] .menu-desliza .chip.on{background:var(--primary);color:#fff;border-color:transparent}
html[data-tema="claro"] .chip-local{background:var(--surface-2);color:#3c444e}
html[data-tema="claro"] .badge{background:var(--surface-2);color:#3c444e;border-color:var(--border)}
html[data-tema="claro"] .badge.otimo{background:#f5a623;color:#231703;border-color:transparent}
html[data-tema="claro"] .hint,
html[data-tema="claro"] .empty,
html[data-tema="claro"] .site-footer,
html[data-tema="claro"] .legal p,
html[data-tema="claro"] .legal ul,
html[data-tema="claro"] .item .meta{color:var(--muted)}
html[data-tema="claro"] label{color:#454d58}
html[data-tema="claro"] .bubble{background:var(--surface-2);color:var(--text)}
html[data-tema="claro"] .rate button{color:#c9ced6}
html[data-tema="claro"] .rate button.on{color:#f5a623}
html[data-tema="claro"] .stars{color:#f5a623}
html[data-tema="claro"] .verify{background:#fff}
html[data-tema="claro"] .aviso-lgpd{background:#fff7e8;border-color:#f0c987;color:#4a3a12}
html[data-tema="claro"] .notice{background:var(--surface-2);color:#454d58}
html[data-tema="claro"] .notice strong{color:var(--text)}
html[data-tema="claro"] .painel-filtros,
html[data-tema="claro"] .busca-bar,
html[data-tema="claro"] .distancia-bar{background:#fff}
html[data-tema="claro"] .toggle-pass{color:var(--primary-dark)}
html[data-tema="claro"] .link-acao{color:var(--primary-dark)}
html[data-tema="claro"] .tab{color:#5e6672}
html[data-tema="claro"] .tab.active{background:var(--surface-2);color:var(--text)}
html[data-tema="claro"] .ad-slot{background:#fff}
html[data-tema="claro"] .comentario p{color:#454d58}
html[data-tema="claro"] .loading-box,html[data-tema="claro"] .overlay{color:var(--text)}

/* Foto de perfil com selo de verificado */
.foto-verificada{position:relative;display:inline-block}
.foto-verificada .selo{position:absolute;right:-2px;bottom:-2px;background:var(--primary);color:#fff;
  border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:12px;border:2px solid var(--surface)}
.aviso-foto{font-size:12.5px;line-height:1.5;background:color-mix(in srgb,var(--primary) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);border-radius:10px;padding:10px;color:var(--text)}
.cam-perfil{display:flex;flex-direction:column;gap:10px;align-items:center}
.cam-perfil video{width:min(100%,240px);aspect-ratio:1/1;object-fit:cover;border-radius:50%;
  background:#000;border:2px solid var(--border);transform:scaleX(-1)}


/* ---------- Deslizar o dedo para trocar de tela ---------- */
#palco-deslize {
  will-change: transform;
  min-height: 100%;
}
body { overflow-x: hidden; }

/* ---------- Cartão de pessoa na busca ---------- */
.pessoa-card { display: grid; gap: 10px; }
.pessoa-card .pessoa { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.pessoa-card .pessoa img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--panel-2, #eee);
}
.acoes-pessoa { display: flex; flex-wrap: wrap; gap: 8px; }


/* ---------- Animações do app ---------- */
#palco-deslize{touch-action:pan-y}
main.container{animation:sobe-suave .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes sobe-suave{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.panel,.item,.card{animation:aparece .32s ease-out both}
.grid > *:nth-child(1){animation-delay:.02s}
.grid > *:nth-child(2){animation-delay:.05s}
.grid > *:nth-child(3){animation-delay:.08s}
.grid > *:nth-child(4){animation-delay:.11s}
.grid > *:nth-child(5){animation-delay:.14s}
.grid > *:nth-child(6){animation-delay:.17s}
@keyframes aparece{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}

.btn{transition:transform .12s ease, filter .15s ease, background .15s ease, box-shadow .15s ease}
.btn:active{transform:scale(.97)}
.btn.carregando{position:relative;color:transparent!important;pointer-events:none}
.btn.carregando::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:girando .7s linear infinite}
@keyframes girando{to{transform:rotate(360deg)}}

.tabbar a{transition:color .15s ease, transform .15s ease}
.tabbar a:active{transform:scale(.94)}
.tabbar a.active i{animation:pulo .35s ease-out}
@keyframes pulo{0%{transform:translateY(0)}45%{transform:translateY(-4px) scale(1.14)}100%{transform:translateY(-1px) scale(1.08)}}

.badge-count{animation:pop .25s ease-out}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

.msg{animation:aparece .25s ease-out both}
.notice:not(.hidden){animation:aparece .3s ease-out both}
.item img,.gallery img,.avatar-preview img{transition:transform .25s ease}
.item:active img{transform:scale(1.03)}

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

/* ---------- Troca de tela ao deslizar o dedo ---------- */
.veu-deslize{position:fixed;inset:0;z-index:200;pointer-events:none;background:var(--bg,#0f1216);
  animation:veu-entra .17s ease-in forwards}
.veu-deslize.para-esquerda{animation-name:veu-esquerda}
.veu-deslize.para-direita{animation-name:veu-direita}
@keyframes veu-esquerda{from{opacity:0;transform:translateX(18%)}to{opacity:.96;transform:none}}
@keyframes veu-direita{from{opacity:0;transform:translateX(-18%)}to{opacity:.96;transform:none}}
@media (prefers-reduced-motion: reduce){.veu-deslize{animation:none;opacity:.9}}

/* ---------- Várias fotos no anúncio ---------- */
.campo-fotos{display:grid;gap:10px}
.fotos-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fotos-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.foto-item{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);
  background:var(--surface-2);animation:aparece .25s ease-out both}
.foto-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.foto-remover{position:absolute;top:4px;right:4px;width:24px;height:24px;border:none;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:12px;cursor:pointer;line-height:1;display:grid;place-items:center}
.foto-remover:active{transform:scale(.9)}
.foto-capa{position:absolute;left:4px;bottom:4px;background:var(--primary);color:#08130d;
  font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:999px}
html[data-tema="claro"] .foto-capa{color:#fff}
.add-fotos{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:fit-content}
.add-fotos.hidden{display:none}

.miniaturas{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.miniaturas::-webkit-scrollbar{display:none}
.miniaturas .mini{flex:0 0 auto;padding:0;border:2px solid transparent;border-radius:10px;
  background:none;cursor:pointer;overflow:hidden;line-height:0}
.miniaturas .mini.on{border-color:var(--primary)}
.miniaturas .mini img{width:64px;height:64px;object-fit:cover;border-radius:8px}

/* ---------- Preço com R$ ---------- */
.campo-preco{display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:12px;padding:0 12px}
.campo-preco .prefixo{font-weight:800;color:var(--muted)}
.campo-preco input{flex:1;border:none;background:none;padding:12px 0;outline:none;
  color:inherit;font-size:16px;font-weight:700;font-family:inherit}


/* ============================================================
   VISUAL NO MESMO ESTILO DA TELA DE LOGIN
   (cartões claros e arredondados, marca em degradê, sem barra
   colorida e sem a fileira de botões do topo)
   ============================================================ */
.nav{display:none !important}
body{background:var(--bg)}
.topbar{
  background:var(--surface);color:var(--text);
  border-bottom:1px solid var(--border);box-shadow:none;padding:14px 16px
}
.topbar h2{color:var(--text);font-weight:800;font-size:19px;letter-spacing:-.4px}
.topbar .logo{
  width:36px;height:36px;border-radius:12px;font-size:18px;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--accent))
}
.topbar .btn.ghost{background:var(--surface-2);border-color:var(--border);color:var(--text)}
html[data-tema="claro"] .topbar .btn.ghost{background:var(--surface-2);border-color:var(--border);color:var(--text)}

.container{max-width:520px}
.card,.panel,.item,.menu-item,.notice,.painel-filtros,.busca-bar{border-radius:16px}
.card,.panel{background:var(--surface);border:1px solid var(--border);padding:18px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.busca-bar,.painel-filtros{border-radius:0}
.btn{border-radius:12px;font-weight:700}
.item{border:1px solid var(--border)}
.item .thumb{background:var(--surface-2)}
.item .thumb.sem-foto{visibility:hidden}
.empty{background:var(--surface);border:1px dashed var(--border);border-radius:16px;padding:26px 18px;line-height:1.5}
.empty strong{color:var(--text)}

/* Minha conta — cartão de perfil no estilo do cabeçalho do login */
.tela-conta{display:flex;flex-direction:column;gap:14px}
.cartao-perfil{align-items:center;text-align:center;gap:8px;padding:24px 18px}
.avatar-perfil img{width:88px;height:88px;border-radius:50%;object-fit:cover;
  background:var(--surface-2);border:3px solid var(--surface);box-shadow:var(--shadow-lg)}
.cartao-perfil .nome{font-size:19px;font-weight:800;letter-spacing:-.3px}
.cartao-perfil .stars{font-size:16px}
.menu-conta{gap:12px;margin-top:0}
.menu-item{padding:16px 18px;gap:4px;box-shadow:var(--shadow)}
#botoes-silencio{flex-wrap:wrap}

/* Meus anúncios — convite para anunciar quando não há nada */
.convite-anunciar{align-items:center;text-align:center;gap:10px;padding:32px 20px}
.convite-ico{font-size:38px;line-height:1}
.convite-anunciar strong{font-size:17px}
.convite-anunciar .btn{width:100%;max-width:260px;text-align:center}

/* Enquanto o dedo arrasta para o lado, os links não "piscam" */
body.deslizando{user-select:none}
body.deslizando a{pointer-events:none}

/* ============================================================
   TELA DE CARREGAMENTO (uma pessoa comprando, a outra recebendo)
   ============================================================ */
.tela-carregando{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--primary) 22%,var(--bg)) 0%, var(--bg) 65%);
  animation:carregando-entra .22s ease-out
}
.tela-carregando.saindo{animation:carregando-sai .24s ease-in forwards}
@keyframes carregando-entra{from{opacity:0}to{opacity:1}}
@keyframes carregando-sai{to{opacity:0}}
.conteudo-carregando{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(100%,360px);text-align:center}
.marca-carregando{display:flex;align-items:center;gap:10px}
.marca-carregando .logo{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  font-weight:800;font-size:21px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent))}
.marca-carregando strong{font-size:20px;letter-spacing:-.4px;color:var(--text)}
.texto-carregando.sub{font-size:12.5px;font-weight:500;opacity:.85;min-height:0}
.texto-carregando.sub:empty{display:none}
.texto-carregando{margin:0;color:var(--muted);font-size:14px;font-weight:600;line-height:1.4;min-height:20px}
.barra-carregando{width:170px;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.barra-carregando i{display:block;width:45%;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--accent));animation:barra-anda 1.1s ease-in-out infinite}
@keyframes barra-anda{0%{transform:translateX(-110%)}100%{transform:translateX(240%)}}

/* A cena da troca */
.cena-troca{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px;width:100%;max-width:320px;padding:10px 4px 0;background:var(--surface);
  border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:18px 14px 14px}
.cena-troca .pessoa{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px}
.cena-troca .cabeca{width:26px;height:26px;border-radius:50%;background:var(--primary)}
.cena-troca .corpo{width:44px;height:40px;border-radius:16px 16px 8px 8px;background:color-mix(in srgb,var(--primary) 55%,var(--surface-2))}
.cena-troca .vendedora .cabeca{background:var(--accent)}
.cena-troca .vendedora .corpo{background:color-mix(in srgb,var(--accent) 55%,var(--surface-2))}
.cena-troca .rotulo{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.02em}
.cena-troca .compradora{animation:balanca 1.6s ease-in-out infinite}
.cena-troca .vendedora{animation:balanca 1.6s ease-in-out infinite .8s}
@keyframes balanca{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.cena-troca .trilho{position:relative;flex:1;height:74px}
.cena-troca .pista{position:absolute;left:0;right:0;bottom:8px;height:3px;border-radius:999px;
  background:repeating-linear-gradient(90deg,var(--border) 0 8px,transparent 8px 16px)}
.cena-troca .caixa,.cena-troca .dinheiro{position:absolute;font-size:22px;line-height:1}
.cena-troca .caixa{top:6px;animation:vai-produto 2.2s cubic-bezier(.4,.1,.3,1) infinite}
.cena-troca .dinheiro{bottom:16px;animation:vai-dinheiro 2.2s cubic-bezier(.4,.1,.3,1) infinite}
@keyframes vai-produto{
  0%{left:76%;opacity:0;transform:scale(.7)}12%{opacity:1;transform:scale(1)}
  70%{left:2%;opacity:1}85%,100%{left:2%;opacity:0}
}
@keyframes vai-dinheiro{
  0%{left:4%;opacity:0;transform:scale(.7)}12%{opacity:1;transform:scale(1)}
  70%{left:74%;opacity:1}85%,100%{left:74%;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .cena-troca *{animation:none !important}
}

/* ============================================================
   DESLIZAR PARA TROCAR DE PÁGINA
   ============================================================ */
body.deslizando .folha-deslize{will-change:transform}
.folha-deslize.entra-da-direita{animation:entra-dir .3s cubic-bezier(.2,.8,.2,1)}
.folha-deslize.entra-da-esquerda{animation:entra-esq .3s cubic-bezier(.2,.8,.2,1)}
@keyframes entra-dir{from{transform:translate3d(26%,0,0);opacity:.3}to{transform:none;opacity:1}}
@keyframes entra-esq{from{transform:translate3d(-26%,0,0);opacity:.3}to{transform:none;opacity:1}}
.pista-deslize{
  position:fixed;top:50%;transform:translateY(-50%);z-index:85;opacity:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg,0 10px 30px rgba(0,0,0,.25));
  font-size:11px;font-weight:800;color:var(--muted);max-width:88px;text-align:center;line-height:1.2
}
.pista-deslize i{font-style:normal;font-size:20px}
.pista-deslize.esquerda{right:0;border-radius:16px 0 0 16px}
.pista-deslize.direita{left:0;border-radius:0 16px 16px 0}
.pista-deslize.pronta{color:var(--text);border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 14%,var(--surface))}
body.deslizando{user-select:none;overflow-x:hidden}
body.deslizando a{pointer-events:none}

/* ============================================================
   BLOCOS DE TÍTULO
   ============================================================ */
.titulo-bloco{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:20px 0 10px}
.titulo-bloco h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.3px}

/* Miniatura de categoria quando o anúncio não tem foto */
.item .thumb.sem-foto{visibility:visible;opacity:.9}

/* Pré-visualização da categoria ao anunciar */
.previa-categoria{display:flex;gap:12px;align-items:center;border:1px solid var(--border);
  border-radius:16px;padding:10px;background:var(--surface-2)}
.previa-categoria img{width:96px;height:72px;object-fit:cover;border-radius:12px;flex:0 0 96px;background:var(--surface)}
.previa-categoria .txt{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.previa-categoria .txt strong{font-size:14px;color:var(--text)}

/* ============================================================
   CONVERSAS: filtros de novas / lidas
   ============================================================ */
.filtros-conversas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 0 10px}
.filtros-conversas::-webkit-scrollbar{display:none}
.conversa{position:relative}
.conversa.nao-lida{border-color:var(--primary)}
.ponto-novo{position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.conversa .quando{font-size:11.5px;color:var(--muted)}

/* ============================================================
   MINHA CONTA: números e mais opções
   ============================================================ */
.numeros-conta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.numeros-conta div{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:12px 8px;text-align:center;box-shadow:var(--shadow)}
.numeros-conta strong{display:block;font-size:19px;font-weight:800;color:var(--primary)}
.numeros-conta span{font-size:11.5px;color:var(--muted);font-weight:600}
.menu-item .seta{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted)}
.menu-item{position:relative;padding-right:38px}
.selo-verificado{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;
  color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);
  border-radius:999px;padding:4px 10px}
.grupo-titulo{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:18px 0 -2px}


/* ============================================================
   BUSCA SEMPRE NO TOPO: a barra de busca e as categorias ficam
   paradas em cima e todo o resto da página desce por baixo.
   ============================================================ */
body.busca-fixa{padding-top:var(--altura-busca,120px)}
body.busca-fixa .busca-bar{backdrop-filter:saturate(1.2) blur(6px)}
.busca-bar #menu-categorias{padding-bottom:2px}

/* Porcentagem da animação de entrada (login → site) */
.pct-carregando{font-size:13px;font-weight:800;color:var(--text);letter-spacing:.02em}
.barra-carregando.com-pct i{width:0;animation:none;transition:width .28s ease-out}


/* ============================================================
   ANIMAÇÃO SÓ NO TOQUE DO ÍCONE (deslizar o dedo troca direto)
   ============================================================ */
main.container.entra-da-direita{animation:entra-dir .3s cubic-bezier(.2,.8,.2,1)}
main.container.entra-da-esquerda{animation:entra-esq .3s cubic-bezier(.2,.8,.2,1)}

/* Fixar anúncio (em breve) */
.fixar-breve{opacity:.65;cursor:not-allowed}
.tag-breve{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:var(--surface-2);border-radius:999px;padding:2px 6px;margin-left:4px}

/* ============================================================
   MENSAGENS: lista de conversas e chat
   ============================================================ */
.lista-conversas{display:flex;flex-direction:column;gap:8px}
.conversa-item{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.conversa-item.nova{border-color:var(--primary)}
.conversa-item .abrir{flex:1;display:flex;align-items:center;gap:12px;background:none;border:none;
  padding:10px 12px;text-align:left;cursor:pointer;font-family:inherit;color:var(--text);min-width:0}
.conversa-item .capa{width:52px;height:52px;border-radius:14px;object-fit:cover;flex:none;
  background:var(--surface-2);display:grid;place-items:center;font-weight:800;font-size:20px;color:var(--muted)}
.conversa-item .texto{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.conversa-item .texto strong{font-size:15px}
.conversa-item .texto small{font-size:12px;color:var(--muted)}
.conversa-item .texto em{font-style:normal;font-size:13px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.conversa-item .lado{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.conversa-item .quando{font-size:11px;color:var(--muted)}
.conversa-item .apagar{background:none;border:none;font-size:16px;padding:0 12px;cursor:pointer;color:var(--muted)}

.tela-chat{display:flex;flex-direction:column;gap:8px}
.chat-topo{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px 10px;box-shadow:var(--shadow)}
.chat-topo .quem{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-topo .quem strong{font-size:15px}
.chat-topo .acoes{display:flex;gap:6px}
.chat-mensagens{display:flex;flex-direction:column;gap:8px;padding:12px;overflow-y:auto;
  min-height:52vh;max-height:60vh;background:var(--surface-2);border:1px solid var(--border);border-radius:18px}
.chat-mensagens .bolha{max-width:78%;padding:8px 12px;border-radius:16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:6px;word-break:break-word;font-size:14.5px}
.chat-mensagens .bolha p{margin:0}
.chat-mensagens .bolha.minha{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:6px}
.chat-mensagens .bolha.dela{align-self:flex-start;background:var(--surface);color:var(--text);border-bottom-left-radius:6px}
.chat-mensagens .bolha .hora{font-size:10.5px;opacity:.7;align-self:flex-end}
.chat-mensagens .midia{max-width:100%;border-radius:12px;display:block}
.chat-mensagens audio{width:220px;max-width:100%}
.chat-mensagens .arquivo{color:inherit;text-decoration:underline;font-weight:700}
.chat-aviso{font-size:12px;color:var(--muted);text-align:center;margin:0}
.chat-barra{display:flex;align-items:flex-end;gap:6px;background:var(--surface);border:1px solid var(--border);
  border-radius:24px;padding:6px;box-shadow:var(--shadow)}
.chat-barra textarea{flex:1;resize:none;border:none;background:transparent;padding:8px 4px;
  font-family:inherit;font-size:15px;color:var(--text);max-height:120px}
.chat-barra textarea:focus{outline:none}
.chat-barra .btn.icone{width:40px;height:40px;flex:none;font-size:17px}
.chat-barra .btn.icone.gravando{background:var(--primary);color:#fff;animation:pulsa-grav 1s infinite}
@keyframes pulsa-grav{50%{opacity:.55}}

/* ===== Animação do deslize com o dedo (swipe) =====
   O conteúdo acompanha o dedo, volta suave se você desistir e
   termina de sair quando a troca acontece. A barra de baixo fica parada. */
main.container.deslizando{
  transition:none;
  will-change:transform;
  touch-action:pan-y;
}
main.container.voltando{
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
main.container.saindo{
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
}

body.deslize-ativo{overflow-x:hidden}
.tabbar{transform:none !important}

@media (prefers-reduced-motion: reduce){
  main.container.deslizando,
  main.container.voltando,
  main.container.saindo{transition:none;transform:none !important;opacity:1 !important}
}

/* Foto de perfil que aparece no topo do app (todas as telas) */
.topbar .avatar-topo{
  width:32px;height:32px;border-radius:50%;object-fit:cover;
  background:var(--surface-2);border:2px solid var(--primary);
  margin-left:auto;flex:0 0 auto;
}
.topbar .avatar-topo[src=""]{display:none}

/* ===== Avisos (notificações) que aparecem na própria tela ===== */
.avisos-vizzo{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  z-index:200;display:flex;flex-direction:column;gap:8px;
  width:min(420px, calc(100% - 24px));pointer-events:none;
}
.aviso-toast{
  pointer-events:auto;display:block;text-decoration:none;
  background:var(--surface-2, #1f2937);color:var(--text, #fff);
  border:1px solid var(--border, rgba(255,255,255,.15));
  border-left:4px solid var(--primary);
  border-radius:14px;padding:10px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  animation:aviso-entra .28s cubic-bezier(.2,.8,.2,1);
}
.aviso-toast strong{display:block;font-size:14px}
.aviso-toast span{display:block;font-size:13px;opacity:.85;margin-top:2px}
.aviso-toast.sumindo{opacity:0;transform:translateY(-8px);transition:.5s ease}
@keyframes aviso-entra{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
html[data-tema="claro"] .aviso-toast{background:#fff;color:#111827;border-color:#e5e7eb}


/* ===== Abrir a tela de uma vez só (sem "carregar duas vezes") =====
   O espaço do topo já nasce reservado, então nada pula para baixo
   quando o menu e a foto de perfil terminam de carregar. */
#shell{display:block}
#shell:empty{min-height:64px;background:var(--primary)}
@media (min-width:721px){
  #shell:empty{min-height:118px;background:linear-gradient(180deg,var(--primary) 0 64px,var(--surface) 64px 100%)}
}
/* A barra de baixo já tem lugar guardado: ela nunca cobre o texto. */
body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
.site-footer{margin-bottom:8px}