:root{
  --bg:#0b141a; --panel:#111b21; --panel2:#202c33; --panel3:#2a3942;
  --stripe:#0b141a; --text:#e9edef; --muted:#8696a0; --line:#222d34;
  --accent:#00a884; --accent2:#008f72; --out:#005c4b; --in:#202c33;
  --danger:#ef4444; --warn:#f59e0b; --link:#53bdeb; --badge:#00a884;
  --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.35);
}
:root.light{
  --bg:#eae6df; --panel:#ffffff; --panel2:#f0f2f5; --panel3:#e9edef;
  --stripe:#efeae2; --text:#111b21; --muted:#667781; --line:#e9edef;
  --accent:#00a884; --accent2:#008f72; --out:#d9fdd3; --in:#ffffff;
  --danger:#ef4444; --warn:#b8860b; --link:#027eb5; --badge:#00a884;
  --shadow:0 6px 24px rgba(0,0,0,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit}
.hidden{display:none!important}
.spin{width:22px;height:22px;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- Telas centrais (login/autorização) ---------- */
.center{height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{width:100%;max-width:400px;background:var(--panel);border-radius:20px;padding:32px 26px;box-shadow:var(--shadow)}
.logo{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:22px}
.logo svg{width:64px;height:64px}
.logo h1{font-size:22px;margin:0;font-weight:700;letter-spacing:.3px}
.logo p{margin:0;color:var(--muted);font-size:13px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.inp{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:14px 44px 14px 14px;color:var(--text);font-size:15px;outline:none;transition:border .2s}
.inp:focus{border-color:var(--accent)}
.pwrap{position:relative}
.eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:8px;color:var(--muted)}
.btn{width:100%;background:var(--accent);color:#fff;border-radius:12px;padding:14px;font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:filter .15s}
.btn:active{filter:brightness(.9)}
.btn.sec{background:var(--panel2);color:var(--text)}
.btn:disabled{opacity:.6}
.msg{margin-top:14px;font-size:13px;text-align:center;min-height:18px}
.msg.err{color:var(--danger)}.msg.ok{color:var(--accent)}.msg.warn{color:var(--warn)}
.foot{margin-top:18px;text-align:center;color:var(--muted);font-size:11px;line-height:1.6}

/* ---------- App chat ---------- */
.app{display:flex;height:100dvh}
.sidebar{width:100%;max-width:420px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column}
.topbar{height:60px;background:var(--panel2);display:flex;align-items:center;justify-content:space-between;padding:0 14px;flex:none}
.topbar .me{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.topbar .acts{display:flex;gap:4px}
.iconbtn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.iconbtn:active{background:var(--panel3)}
.avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:16px;flex:none}
.search{padding:8px 12px;flex:none}
.search input{width:100%;background:var(--panel2);border:none;border-radius:10px;padding:10px 14px;color:var(--text);outline:none;font-size:14px}
.list{flex:1;overflow-y:auto}
.contact{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--stripe)}
.contact:active,.contact.active{background:var(--panel2)}
.contact .info{flex:1;min-width:0}
.contact .row1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.contact .name{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact .time{font-size:11px;color:var(--muted);flex:none}
.contact .row2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:3px}
.contact .prev{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.contact .badge{background:var(--badge);color:#04231c;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;margin-left:6px}

/* Painel de conversa */
.chat{flex:1;display:flex;flex-direction:column;background:var(--bg);
  background-image:linear-gradient(rgba(11,20,26,.94),rgba(11,20,26,.94));position:relative}
:root.light .chat{background-image:linear-gradient(rgba(229,221,213,.6),rgba(229,221,213,.6))}
.chat.empty{align-items:center;justify-content:center;color:var(--muted)}
.chat-head{height:60px;background:var(--panel2);display:flex;align-items:center;gap:12px;padding:0 10px;flex:none}
.chat-head .back{display:none}
.chat-head .info{flex:1;min-width:0}
.chat-head .name{font-weight:600;font-size:16px}
.chat-head .status{font-size:12px;color:var(--muted)}
.chat-head .status.on{color:var(--accent)}
.messages{flex:1;overflow-y:auto;padding:14px 6% 8px;display:flex;flex-direction:column;gap:3px}
.bubble{max-width:78%;padding:7px 10px 6px;border-radius:10px;position:relative;font-size:14.6px;line-height:1.35;word-wrap:break-word;box-shadow:0 1px 1px rgba(0,0,0,.15);animation:pop .12s ease}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:scale(1);opacity:1}}
.bubble.out{align-self:flex-end;background:var(--out);border-top-right-radius:2px}
.bubble.in{align-self:flex-start;background:var(--in);border-top-left-radius:2px}
.bubble .meta{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:2px;font-size:10.5px;color:var(--muted)}
.bubble.eph{border:1px dashed rgba(255,140,90,.5)}
.bubble .eph-tag{font-size:10px;color:var(--warn);display:flex;align-items:center;gap:3px;margin-bottom:2px}
.tick{color:var(--muted)}.tick.read{color:var(--link)}
.bubble img.media{max-width:100%;border-radius:8px;display:block;margin-bottom:3px;cursor:pointer}
.bubble video.media,.bubble audio.media{max-width:100%;border-radius:8px;display:block;margin-bottom:3px}
.filecard{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.18);border-radius:8px;padding:9px 11px;cursor:pointer;min-width:180px}
.filecard .fi{width:38px;height:38px;border-radius:8px;background:var(--panel3);display:flex;align-items:center;justify-content:center;flex:none}
.filecard .fn{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filecard .fs{font-size:11px;color:var(--muted)}
.daysep{align-self:center;background:var(--panel2);color:var(--muted);font-size:11px;padding:4px 10px;border-radius:8px;margin:8px 0}
.typing{align-self:flex-start;color:var(--muted);font-size:12px;padding:2px 6px}

/* Composer */
.composer{background:var(--panel2);padding:8px 10px;display:flex;align-items:flex-end;gap:8px;flex:none}
.composer .grow{flex:1;background:var(--panel);border-radius:22px;display:flex;align-items:center;padding:2px 6px}
.composer textarea{flex:1;background:none;border:none;color:var(--text);resize:none;outline:none;font-size:15px;padding:10px 6px;max-height:120px;line-height:1.3}
.composer .send{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.anon-toggle{color:var(--muted)}
.anon-toggle.on{color:var(--warn)}
.anon-banner{background:rgba(245,158,11,.12);color:var(--warn);font-size:11.5px;text-align:center;padding:5px}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.lightbox img,.lightbox video{max-width:100%;max-height:100%;border-radius:8px}
.lightbox .close{position:absolute;top:16px;right:16px;color:#fff}

/* Modal genérico */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:60;padding:18px}
.modal{background:var(--panel);border-radius:18px;padding:22px;width:100%;max-width:420px;box-shadow:var(--shadow)}
.modal h3{margin:0 0 14px}
.modal .actions{display:flex;gap:10px;margin-top:16px}
.modal .actions .btn{flex:1}

@media(max-width:820px){
  .sidebar{max-width:100%}
  .app.in-chat .sidebar{display:none}
  .app:not(.in-chat) .chat{display:none}
  .chat-head .back{display:flex}
}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel3);color:var(--text);padding:12px 18px;border-radius:10px;font-size:14px;z-index:80;box-shadow:var(--shadow)}