/* ============================================================
   TELEGRAM WEB — DARK THEME
   base.css : variabel, reset, komponen dasar (avatar, menu, toast)
   ============================================================ */

:root{
  --bg:#0e1621;
  --panel:#17212b;
  --panel-2:#1c2733;
  --hover:#202b36;
  --active:#2b5278;
  --in:#182533;
  --out:#2b5278;
  --accent:#5288c1;
  --link:#6ab3f3;
  --txt:#ffffff;
  --txt-2:#7f91a4;
  --line:#0b1218;
  --sep:#0d151d;
  --green:#4dcd5e;
  --check:#7cd0ff;
  --red:#ec3942;
  --radius:14px;
  --shadow:0 6px 28px rgba(0,0,0,.55);
  --tail-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='20'%3E%3Cpath d='M9 20 L0 20 C5 19 9 15.5 9 9 Z' fill='%23fff'/%3E%3C/svg%3E");
  --tail-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='20'%3E%3Cpath d='M0 20 L9 20 C4 19 0 15.5 0 9 Z' fill='%23fff'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:14.5px;
  line-height:1.35;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
button{cursor:pointer}
img{display:block}
a{color:var(--link);text-decoration:none}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2c3a49;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#3b4c5e}

/* matikan animasi bila dinonaktifkan di Pengaturan → Tampilan Chat */
.no-anim *,.no-anim *::before,.no-anim *::after{
  animation-duration:.001s !important;transition-duration:.001s !important}

/* ---------- ikon ---------- */
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
     stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico-14{width:14px;height:14px}
.ico-16{width:16px;height:16px}
.ico-18{width:18px;height:18px}
.ico-20{width:20px;height:20px}
.ico-26{width:26px;height:26px}
.ico-30{width:30px;height:30px}

.ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    color:var(--txt-2);transition:background .12s,color .12s;position:relative;flex:none}
.ib:hover{background:#ffffff12;color:#fff}
.ib:active{background:#ffffff1f}
.ib.on{color:var(--link)}

/* ---------- layout ---------- */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}
.empty{flex:1;display:grid;place-items:center;position:relative;z-index:1}
.empty span{background:rgba(19,30,43,.78);padding:9px 18px;border-radius:16px;
            color:#b9c8d6;font-size:14px}

/* ---------- avatar ---------- */
.av{border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:600;
    overflow:hidden;position:relative;user-select:none;
    background:linear-gradient(160deg,var(--c1),var(--c2))}
.av img{width:100%;height:100%;object-fit:cover}
.ac0{--c1:#ff8a65;--c2:#e0514a}
.ac1{--c1:#ffcd6a;--c2:#ff9145}
.ac2{--c1:#b48bff;--c2:#7c5cff}
.ac3{--c1:#8ee08e;--c2:#3fae5a}
.ac4{--c1:#6ee1d8;--c2:#20a3ad}
.ac5{--c1:#7aa7ff;--c2:#3b6fd6}
.ac6{--c1:#ff9bcd;--c2:#ea5f9e}
.ac7{--c1:#a8b4bf;--c2:#5b6b7a}
.av-30{width:30px;height:30px;font-size:12.5px}
.av-34{width:34px;height:34px;font-size:13.5px}
.av-42{width:42px;height:42px;font-size:16px}
.av-54{width:54px;height:54px;font-size:20px}
.av-120{width:120px;height:120px;font-size:44px}
.av-wrap{position:relative;flex:none}
.dot-on{position:absolute;right:0;bottom:1px;width:14px;height:14px;border-radius:50%;
        background:var(--green);border:2.5px solid var(--panel)}

/* warna nama pengirim di grup */
.nc0{color:#ff8a65}.nc1{color:#ffbb6a}.nc2{color:#b48bff}.nc3{color:#7dd87d}
.nc4{color:#5fd6d6}.nc5{color:#7aa7ff}.nc6{color:#ff9bcd}

/* ---------- menu dropdown / konteks ---------- */
.menu{position:fixed;background:#1e2a36;border-radius:10px;box-shadow:var(--shadow);
      padding:5px;min-width:198px;z-index:60;display:none;animation:pop .13s ease-out}
.menu.show{display:block}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.mi{display:flex;align-items:center;gap:12px;padding:8px 11px;border-radius:7px;
    font-size:14.5px;color:#dfe8f0;width:100%;text-align:left}
.mi:hover{background:#ffffff0f}
.mi .ico{width:19px;height:19px;color:#8fa3b7}
.mi.danger{color:#f0666e}
.mi.danger .ico{color:#f0666e}
.msep{height:1px;background:#ffffff12;margin:4px 8px}
.sw{margin-left:auto;width:32px;height:18px;border-radius:9px;background:#4a5a6b;
    position:relative;transition:.15s;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
           border-radius:50%;background:#fff;transition:.15s}
.sw.on{background:var(--accent)}
.sw.on::after{transform:translateX(14px)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);
       background:#1e2a36;color:#e6eef6;padding:11px 18px;border-radius:10px;
       box-shadow:var(--shadow);font-size:14px;z-index:200;opacity:0;pointer-events:none;
       transition:.22s;display:flex;align-items:center;gap:9px}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- titik "mengetik" ---------- */
.tdots{display:inline-flex;gap:3px;align-items:center;margin-left:3px}
.tdots i{width:4px;height:4px;border-radius:50%;background:var(--link);animation:td 1s infinite}
.tdots i:nth-child(2){animation-delay:.18s}
.tdots i:nth-child(3){animation-delay:.36s}
@keyframes td{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}