:root{
  --bg:#0b141a;--panel:#111b21;--panel2:#202c33;--panel3:#2a3942;--field:#1b262d;
  --accent:#00a884;--accent2:#25d366;--blue:#53bdeb;--text:#e9edef;--muted:#8696a0;
  --line:#222d34;--in:#202c33;--out:#005c4b;--danger:#f15c6d;--warn:#f7c948;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#0a0f13;color:var(--text);font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif}
.hidden{display:none!important}

/* login */
.login-wrap{min-height:100%;display:grid;place-items:center;padding:20px}
.card{width:380px;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}
.brand .logo{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#00c896,#3aa7e0);display:grid;place-items:center;font-weight:800;color:#04121a;font-size:20px}
.brand .nm{font-size:19px;font-weight:800}.brand .tg{color:var(--muted);font-size:13px}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px}
input{width:100%;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--text);font-size:14px;outline:none}
input:focus{border-color:var(--accent)}
.btn{width:100%;margin-top:18px;background:var(--accent);color:#04121a;border:0;border-radius:10px;padding:12px;font-size:15px;font-weight:800;cursor:pointer}
.btn:disabled{opacity:.6;cursor:default}
.err{color:var(--danger);font-size:13px;margin-top:12px;min-height:18px;text-align:center}
.mode{color:var(--muted);font-size:11px;text-align:center;margin-top:14px}

/* app shell: sidebar + main */
.app{height:100%;display:grid;grid-template-columns:320px 1fr;max-width:1100px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.app.show-chat .side{}
@media(max-width:720px){
  .app{grid-template-columns:1fr}
  .app .main{display:none}
  .app.show-chat .side{display:none}
  .app.show-chat .main{display:grid}
}

/* sidebar */
.side{display:grid;grid-template-rows:auto auto 1fr;min-height:0;background:var(--panel);border-right:1px solid var(--line)}
.side-top{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--panel2)}
.side-top .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#00c896,#3aa7e0);display:grid;place-items:center;font-weight:800;color:#04121a;font-size:14px}
.side-top .who{flex:1;min-width:0}
.side-top .who .n{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-top .who .r{font-size:11px;color:var(--accent2)}
.side-top button{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:12px}
.search{padding:8px 12px}
.search input{padding:9px 13px;font-size:13px}
.list{overflow:auto;min-height:0}
.sec{padding:12px 14px 6px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em}
.item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border-bottom:1px solid #16222a}
.item:hover{background:var(--panel2)}
.item.active{background:var(--panel3)}
.item .av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;color:#04121a;position:relative}
.item .av .dot{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--muted);border:2px solid var(--panel)}
.item .av .dot.on{background:var(--accent2)}
.item .bd{flex:1;min-width:0}
.item .bd .n{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .bd .s{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.badge{background:var(--accent2);color:#04121a;font-size:11px;font-weight:800;border-radius:999px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center}
.rolechip{font-size:9px;font-weight:800;padding:1px 6px;border-radius:5px;background:#2a3942;color:var(--muted)}
.rolechip.admin{background:#4a3a12;color:var(--warn)}

/* main / conversation */
.main{display:grid;grid-template-rows:auto 1fr auto auto;min-height:0;background:#0b141a}
.top{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--panel2);border-bottom:1px solid var(--line)}
.top .back{display:none;background:transparent;border:0;color:var(--text);font-size:18px;cursor:pointer}
@media(max-width:720px){.top .back{display:block}}
.top .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#04121a;background:#00a884}
.top .grow{flex:1;min-width:0}
.top .rn{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .st{font-size:12px;color:var(--accent2)}
.empty{display:grid;place-items:center;color:var(--muted);font-size:14px;text-align:center;padding:20px}
.msgs{overflow:auto;padding:16px 14px;display:flex;flex-direction:column;gap:8px}
.b{max-width:74%;padding:7px 11px 6px;border-radius:9px;font-size:14px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.2);word-wrap:break-word}
.b.in{background:var(--in);align-self:flex-start;border-top-left-radius:0}
.b.out{background:var(--out);align-self:flex-end;border-top-right-radius:0}
.b .who{font-size:12px;font-weight:700;color:var(--blue);margin-bottom:2px}
.b .t{font-size:10px;color:#ffffff8c;float:right;margin:6px 0 -2px 10px}
.b img{max-width:240px;border-radius:6px;display:block;margin-bottom:4px;cursor:pointer}
.typing{color:var(--muted);font-size:12px;padding:0 16px 6px;min-height:16px}
.compose{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel2)}
.compose .fld{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:10px 16px;color:var(--text);font-size:14px;outline:none}
.icn{width:42px;height:42px;border-radius:50%;border:0;background:var(--panel3);color:#fff;font-size:18px;cursor:pointer;flex:none}
.icn.send{background:var(--accent);color:#04121a}
.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.side-top .meBtn{flex:1;min-width:0;display:flex;align-items:center;gap:9px;cursor:pointer;border-radius:8px;padding:4px 6px}
.side-top .meBtn:hover{background:var(--panel3)}
.side-top .meav{width:34px;height:34px;border-radius:50%;background:#00a884;display:grid;place-items:center;font-weight:800;color:#04121a;font-size:13px;overflow:hidden;flex:none}

/* modal */
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:50;padding:16px}
.modal .box{width:400px;max-width:100%;max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal h3{margin:0 0 4px;font-size:17px}
.modal .close{float:right;background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer;margin:-8px -6px 0 0}
.pfoto{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#3b4a54,#22323b);display:grid;place-items:center;font-size:30px;font-weight:800;color:#e9edef;margin:8px auto;position:relative;overflow:hidden;cursor:pointer}
.pfoto .cam{position:absolute;right:0;bottom:0;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#04121a;display:grid;place-items:center;font-size:15px;border:3px solid var(--panel)}
.pfoto img{width:100%;height:100%;object-fit:cover}
.ro{opacity:.7}
.st-add{display:flex;gap:8px;margin:6px 0 14px}
.st-add input{flex:1}
.st-user{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.st-user .r{width:52px;height:52px;border-radius:50%;padding:2px;background:conic-gradient(from 90deg,var(--accent2),var(--blue),var(--accent2));flex:none}
.st-user .r .in{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#04121a;background:#7bd389;border:2px solid var(--panel);overflow:hidden}
.st-user .r .in img{width:100%;height:100%;object-fit:cover}
.st-user .r.seen{background:var(--panel3)}
.st-user .bd .s{font-size:12px;color:var(--muted)}
.st-user .seentag{color:var(--accent2);font-size:11px;margin-left:auto}
.vwers{color:#9fb4c0;font-size:12px;text-align:center;max-width:600px;margin-top:-4px}
.vwers b{color:#fff}

/* banner update */
.updatebar{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--accent);color:#04121a;
  display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;font-weight:600;
  padding-top:calc(10px + env(safe-area-inset-top,0px));box-shadow:0 2px 10px rgba(0,0,0,.3)}
.updatebar #updateTxt{flex:1}
.updatebar button{border:0;border-radius:8px;padding:7px 14px;font-weight:800;cursor:pointer;background:#04121a;color:#e9fff7}
.updatebar #updateClose{background:transparent;color:#04121a;padding:6px 8px}
.viewer{position:fixed;inset:0;background:#000;z-index:60;display:grid;grid-template-rows:auto 1fr;}
.viewer .vh{display:flex;align-items:center;gap:12px;padding:14px;color:#fff}
.viewer .vh button{margin-left:auto;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer}
.viewer .vbody{overflow:auto;display:flex;flex-direction:column;gap:12px;padding:0 12px 20px;align-items:center}
.viewer .vbody img{max-width:100%;max-height:70vh;border-radius:10px}
.viewer .cap{color:#fff;text-align:center;font-size:15px;max-width:600px}

/* tombol call di header */
.top .topbtn{background:transparent;border:0;color:var(--text);font-size:19px;cursor:pointer;
  width:40px;height:40px;border-radius:50%;flex:none}
.top .topbtn:hover{background:var(--panel3)}

/* modal kamera */
.cam-box{width:440px}
.cam-view{width:100%;aspect-ratio:3/4;max-height:52vh;background:#000;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.cam-view video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-ctrls{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.shutter{width:64px;height:64px;border-radius:50%;background:#fff;border:5px solid var(--accent);cursor:pointer;flex:none}
.shutter:active{transform:scale(.94)}

/* layar panggilan (masuk & aktif) */
.callscr{position:fixed;inset:0;background:#0a0f13;z-index:80;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#fff;overflow:hidden}
.cinfo{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;z-index:2}
.cav{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#00c896,#3aa7e0);
  display:grid;place-items:center;font-weight:800;color:#04121a;font-size:22px;overflow:hidden}
.cav.big{width:120px;height:120px;font-size:44px;box-shadow:0 0 0 6px #ffffff14}
.cav img{width:100%;height:100%;object-fit:cover}
.cname{font-size:22px;font-weight:700}
.cstat{font-size:14px;color:var(--muted)}
.cbtns{display:flex;gap:70px;margin-top:56px;z-index:2}
.cbtn{width:66px;height:66px;border-radius:50%;border:0;color:#fff;font-size:26px;cursor:pointer;
  display:grid;place-items:center;flex:none}
.cbtn.accept{background:var(--accent2)}
.cbtn.reject,.cbtn.hangup{background:var(--danger)}
.cbtn.ctl{width:54px;height:54px;font-size:20px;background:#ffffff22}
.cbtn.ctl.off{background:#fff;color:#04121a}
/* video call aktif */
.remoteV{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:0}
.localV{position:absolute;right:14px;top:14px;width:104px;height:150px;object-fit:cover;border-radius:12px;
  background:#000;z-index:3;box-shadow:0 4px 16px rgba(0,0,0,.5);transform:scaleX(-1)}
.voiceface{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:radial-gradient(circle at 50% 35%,#16323a,#0a0f13);z-index:1}
.voiceface.hidden{display:none}
.calltop{position:absolute;top:0;left:0;right:0;padding:calc(16px + env(safe-area-inset-top,0)) 18px 16px;
  display:flex;justify-content:space-between;align-items:center;z-index:4;
  background:linear-gradient(#000a,transparent)}
.calltop .cstat{color:#fff}
.ctimer{font-size:14px;color:#fff;font-variant-numeric:tabular-nums}
.cbar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:18px;
  padding:22px 16px calc(26px + env(safe-area-inset-bottom,0));z-index:4;
  background:linear-gradient(transparent,#000a)}

/* avatar kecil di samping pesan grup */
.brow{display:flex;align-items:flex-end;gap:8px;align-self:flex-start;max-width:82%}
.av-mini{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:800;color:#04121a;font-size:10px;overflow:hidden;margin-bottom:2px}
.av-mini .avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* feed status: avatar pemilik + jumlah komentar */
.st-user .r .in.hasimg{background:transparent}
.st-user .cmtcount{color:var(--muted);font-size:11px;margin-left:auto;display:flex;align-items:center;gap:4px}
.st-user .seentag{margin-left:8px}

/* komentar status (di penampil) */
.viewer .vitem{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px;align-items:center}
.cmts{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cmt{display:flex;gap:8px;align-items:flex-start;background:#141d24;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.cmt .bd{flex:1;min-width:0;color:#dfe8ee;font-size:13px;line-height:1.4;word-break:break-word}
.cmt .bd b{color:#fff;font-size:12px;margin-right:6px}
.cmt .bd .t{color:var(--muted);font-size:10px;margin-left:6px}
.cmtbox{display:flex;gap:8px;width:100%;margin-top:2px}
.cmtbox input{flex:1;background:#141d24;border:1px solid var(--line);border-radius:20px;padding:9px 14px;color:var(--text);font-size:13px}
.cmtbox button{border:0;border-radius:20px;background:var(--accent);color:#04121a;font-weight:800;padding:0 16px;cursor:pointer}
.cmt-empty{color:var(--muted);font-size:12px;text-align:center}

/* cropper foto profil */
.crop-stage{position:relative;width:280px;height:280px;margin:0 auto;background:#000;border-radius:12px;overflow:hidden;touch-action:none;cursor:grab}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{display:block;width:280px;height:280px}
.crop-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.42);
  pointer-events:none;border:2px solid #ffffffaa}
.crop-zoom{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted)}
.crop-zoom input{flex:1;accent-color:var(--accent)}

/* tautan "Status terbaru" di header GRUP */
.sec-grup{display:flex;align-items:center;justify-content:space-between}
.sec-link{color:var(--accent2);cursor:pointer;font-weight:700;font-size:11px;letter-spacing:0;display:inline-flex;align-items:center;gap:5px}
.sec-link:hover{text-decoration:underline}
.st-badge{background:var(--danger);color:#fff;font-size:10px;font-weight:800;border-radius:999px;
  min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;gap:1px;
  box-shadow:0 0 0 2px #10202b;animation:stpulse 1.6s ease-in-out infinite}
.st-badge b{font-weight:900}
@keyframes stpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* kartu profil kontak */
.cprof{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin:6px 0 10px}
.cprof-photo{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#3b4a54,#22323b);
  display:grid;place-items:center;font-size:40px;font-weight:800;color:#e9edef;overflow:hidden;cursor:zoom-in;position:relative}
.cprof-photo img{width:100%;height:100%;object-fit:cover}
.cprof-name{font-size:19px;font-weight:800;margin-top:8px}
.cprof-role{font-size:12px;color:var(--accent2)}
.cprof-bio{font-size:13px;color:var(--muted);margin-top:2px}
.cprof-status{margin-top:6px}
.cprof-status .st-user{cursor:pointer}
.cprof-empty{color:var(--muted);font-size:12px}

/* lightbox foto */
.photoview{position:fixed;inset:0;background:#000d;z-index:85;display:grid;place-items:center;padding:24px}
.photoview img{max-width:94vw;max-height:88vh;border-radius:10px;box-shadow:0 20px 70px rgba(0,0,0,.6)}
.photoview .pv-close{position:absolute;top:16px;right:18px;background:#ffffff22;border:0;color:#fff;
  font-size:20px;width:42px;height:42px;border-radius:50%;cursor:pointer}

/* toast */
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:90;
  background:#202c33;color:#fff;padding:11px 18px;border-radius:22px;font-size:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:88%;text-align:center}