:root{
  --bg:#040309;
  --bg-deep:#020106;
  --panel:#0f0a1d;
  --panel2:#140d26;
  --glass:rgba(18,12,32,.55);
  --border:#2b1a4a;
  --border-soft:rgba(157,77,255,.18);
  --cyan:#00f6ff;
  --pink:#ff2079;
  --purple:#9d4dff;
  --yellow:#e8ff5b;
  --gold:#ffd479;
  --text:#e6e1ff;
  --muted:#8577ad;
  --danger:#ff4d6d;
  --online:#3dffb0;
  --ease:cubic-bezier(.22,.8,.32,1);
}
*{box-sizing:border-box;}
html,body{height:100%;}

/* ============ FIX PENTING ============
   Elemen ber-atribut [hidden] WAJIB selalu display:none, apapun class
   CSS lain yang menempel di elemen itu. Tanpa baris ini, class yang
   men-set "display:flex" (mis. .app-screen) akan mengalahkan [hidden]
   bawaan browser dan layar tetap kelihatan walau seharusnya tersembunyi. */
[hidden]{ display:none !important; }

body{
  margin:0;
  background:
    radial-gradient(ellipse at 15% -10%, rgba(157,77,255,.28), transparent 50%),
    radial-gradient(ellipse at 95% 10%, rgba(0,246,255,.14), transparent 45%),
    radial-gradient(ellipse at 50% 120%, rgba(255,32,121,.12), transparent 50%),
    var(--bg);
  color:var(--text);
  font-family:'Share Tech Mono', monospace;
  overflow:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
.grid-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(0,246,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,246,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 75%);
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift{ 0%{ background-position:0 0; } 100%{ background-position:84px 84px; } }

.scan-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}
/* partikel digital melayang - murni CSS, ringan */
.particles{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.particles span{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 6px var(--cyan), 0 0 12px var(--cyan);
  opacity:.55; animation:floatUp linear infinite;
}
.particles span:nth-child(2n){ background:var(--pink); box-shadow:0 0 6px var(--pink), 0 0 12px var(--pink); }
.particles span:nth-child(3n){ background:var(--purple); box-shadow:0 0 6px var(--purple), 0 0 12px var(--purple); width:2px; height:2px; }
@keyframes floatUp{ 0%{ transform:translateY(0) translateX(0); opacity:0; } 10%{opacity:.6;} 90%{opacity:.4;} 100%{ transform:translateY(-110vh) translateX(20px); opacity:0; } }

.screen{position:relative; z-index:2; height:100vh; width:100vw;}
::selection{background:var(--pink); color:#000;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--purple), var(--cyan)); border-radius:4px;}

/* ---------- AUTH ---------- */
.auth-screen{display:flex; align-items:center; justify-content:center; padding:20px;}
.auth-card{
  width:100%; max-width:380px;
  background:linear-gradient(180deg, var(--glass), var(--panel2));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:32px 28px 24px;
  box-shadow:0 0 0 1px rgba(0,246,255,.06), 0 0 50px rgba(157,77,255,.18), 0 30px 70px rgba(0,0,0,.65);
  position:relative;
  animation:cardRise .5s var(--ease);
}
@keyframes cardRise{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{ opacity:1; transform:translateY(0) scale(1);} }
.auth-card::before{
  content:''; position:absolute; inset:-1px; border-radius:14px; padding:1px;
  background:conic-gradient(from 0deg, var(--cyan), var(--purple), var(--pink), var(--cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.35; pointer-events:none; animation:ringSpin 6s linear infinite;
}
@keyframes ringSpin{ to{ filter:hue-rotate(360deg); } }
.logo{
  font-family:'Orbitron', sans-serif; font-weight:900; font-size:36px; letter-spacing:5px;
  text-align:center; margin:0 0 2px; color:#fff;
  text-shadow:0 0 8px var(--cyan), 0 0 28px rgba(0,246,255,.55), 0 0 60px rgba(157,77,255,.35);
}
.glitch{position:relative;}
.glitch::before, .glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; height:100%;
  overflow:hidden; opacity:.8;
}
.glitch::before{ color:var(--pink); transform:translate(2px,0); mix-blend-mode:screen; animation:glitchA 3.4s infinite steps(1); }
.glitch::after{ color:var(--cyan); transform:translate(-2px,0); mix-blend-mode:screen; animation:glitchB 3.7s infinite steps(1); }
@keyframes glitchA{ 0%,92%,100%{clip-path:inset(0 0 100% 0);} 93%{clip-path:inset(10% 0 60% 0); transform:translate(3px,-1px);} 95%{clip-path:inset(50% 0 10% 0); transform:translate(-3px,1px);} 97%{clip-path:inset(0 0 0 0); transform:translate(0,0);} }
@keyframes glitchB{ 0%,90%,100%{clip-path:inset(0 0 100% 0);} 91%{clip-path:inset(70% 0 5% 0); transform:translate(-3px,1px);} 94%{clip-path:inset(20% 0 40% 0); transform:translate(3px,-1px);} 96%{clip-path:inset(0 0 0 0); transform:translate(0,0);} }
.tagline{ text-align:center; color:var(--muted); font-size:11px; letter-spacing:3px; margin:0 0 24px; }
.tabs{ display:flex; border:1px solid var(--border-soft); border-radius:8px; overflow:hidden; margin-bottom:20px; background:rgba(255,255,255,.02); }
.tab{ flex:1; background:transparent; border:none; color:var(--muted); font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:2px; padding:11px 0; cursor:pointer; transition:.25s var(--ease); }
.tab.active{ background:linear-gradient(90deg, rgba(0,246,255,.1), rgba(157,77,255,.1)); color:var(--cyan); text-shadow:0 0 10px var(--cyan); }
.auth-form{ display:flex; flex-direction:column; gap:4px; animation:fadeSlide .35s var(--ease); }
@keyframes fadeSlide{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.auth-form label{ font-size:10px; letter-spacing:2px; color:var(--muted); margin-top:12px; }
.auth-form input{
  background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text);
  padding:12px 13px; border-radius:8px; font-family:'Share Tech Mono',monospace; font-size:14px;
  outline:none; transition:.2s var(--ease);
}
.auth-form input:focus{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan), 0 0 16px rgba(0,246,255,.3); background:rgba(0,246,255,.03); }
.error{ color:var(--danger); font-size:11px; min-height:16px; margin-top:8px; }
.btn-primary{
  margin-top:18px; padding:13px; border:1px solid var(--pink); border-radius:8px;
  background:linear-gradient(90deg, rgba(255,32,121,.18), rgba(157,77,255,.18));
  color:#fff; font-family:'Orbitron',sans-serif; letter-spacing:3px; font-size:12px;
  cursor:pointer; transition:.25s var(--ease); position:relative; overflow:hidden;
}
.btn-primary::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
}
.btn-primary:hover{ box-shadow:0 0 20px rgba(255,32,121,.5); background:rgba(255,32,121,.28); }
.btn-primary:hover::after{ animation:sheen .8s ease; }
@keyframes sheen{ to{ left:130%; } }
.btn-ghost{ margin-top:16px; padding:12px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--muted); font-family:'Orbitron',sans-serif; letter-spacing:2px; font-size:11px; cursor:pointer; transition:.2s; }
.btn-ghost:hover{ border-color:var(--muted); color:var(--text); }
.hint{ font-size:10px; color:var(--muted); text-align:center; line-height:1.6; margin:20px 0 0; }

/* ---------- APP ---------- */
.app-screen{ display:flex; }
.sidebar{ width:320px; min-width:320px; background:var(--glass); backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); border-right:1px solid var(--border-soft); display:flex; flex-direction:column; height:100%; }
.profile-bar{ display:flex; align-items:center; gap:8px; padding:16px; border-bottom:1px solid var(--border-soft); }
.avatar{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; position:relative;
  background:rgba(255,255,255,.03);
  border:1.5px solid currentColor;
  box-shadow:0 0 12px currentColor, inset 0 0 10px rgba(255,255,255,.05);
  transition:transform .2s var(--ease);
}
.avatar.small{ width:38px; height:38px; font-size:12px; }
.avatar .dot{ position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%; background:#3a3350; border:2px solid var(--panel); transition:.3s; }
.avatar .dot.on{ background:var(--online); box-shadow:0 0 8px var(--online), 0 0 16px var(--online); animation:pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 6px var(--online);} 50%{ box-shadow:0 0 12px var(--online), 0 0 20px var(--online);} }
.profile-info{ flex:1; min-width:0; }
.profile-name{ font-family:'Orbitron',sans-serif; font-size:13px; color:#fff; letter-spacing:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-phone{ font-size:11px; color:var(--muted); }
.icon-btn{ background:rgba(255,255,255,.02); border:1px solid var(--border); color:var(--muted); width:33px; height:33px; border-radius:8px; cursor:pointer; font-size:15px; flex-shrink:0; transition:.2s var(--ease); }
.icon-btn:hover{ color:var(--pink); border-color:var(--pink); box-shadow:0 0 12px rgba(255,32,121,.4); transform:translateY(-1px); }
.side-tabs{ display:flex; border-bottom:1px solid var(--border-soft); }
.side-tab{ flex:1; background:transparent; border:none; color:var(--muted); font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:2px; padding:11px 0; cursor:pointer; transition:.2s; position:relative; }
.side-tab.active{ color:var(--cyan); }
.side-tab.active::after{ content:''; position:absolute; left:20%; right:20%; bottom:0; height:2px; background:linear-gradient(90deg, var(--cyan), var(--purple)); box-shadow:0 0 8px var(--cyan); }
.search-bar{ padding:12px 14px; border-bottom:1px solid var(--border-soft); }
.search-bar input{ width:100%; background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text); padding:9px 12px; border-radius:8px; font-family:'Share Tech Mono',monospace; font-size:12px; outline:none; transition:.2s; }
.search-bar input:focus{ border-color:var(--cyan); box-shadow:0 0 10px rgba(0,246,255,.2); }
.contact-list{ flex:1; overflow-y:auto; }
.contact-item{ display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; border-bottom:1px solid rgba(43,26,74,.4); transition:.18s var(--ease); position:relative; }
.contact-item:hover{ background:rgba(157,77,255,.08); }
.contact-item.active{ background:linear-gradient(90deg, rgba(0,246,255,.1), transparent); }
.contact-item.active::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--cyan), var(--purple)); box-shadow:0 0 8px var(--cyan); }
.contact-name{ font-size:13px; color:#fff; }
.contact-phone{ font-size:11px; color:var(--muted); }
.empty-note{ padding:34px 18px; text-align:center; color:var(--muted); font-size:12px; line-height:1.7; }

.chat-main{ flex:1; display:flex; flex-direction:column; height:100%; position:relative; }
.chat-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); }
.chat-empty .glitch{ font-family:'Orbitron',sans-serif; font-size:22px; letter-spacing:3px; color:#443a68; }
.chat-active{ display:flex; flex-direction:column; height:100%; animation:fadeSlide .3s var(--ease); }
.chat-header{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border-soft); background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.back-btn{ display:none; }
.peer-name{ font-family:'Orbitron',sans-serif; font-size:13px; color:#fff; letter-spacing:1px; }
.peer-phone{ font-size:11px; color:var(--muted); }
.messages{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; }
.msg-row{ display:flex; animation:bubbleIn .25s var(--ease); }
@keyframes bubbleIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.msg-row.me{ justify-content:flex-end; }
.msg-sender{ font-size:10px; color:var(--purple); margin-bottom:3px; letter-spacing:1px; }
.bubble{
  max-width:66%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5;
  border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.03), var(--panel2));
  word-wrap:break-word; position:relative; box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.msg-row.me .bubble{ background:linear-gradient(135deg, rgba(255,32,121,.2), rgba(157,77,255,.2)); border-color:rgba(255,32,121,.45); border-bottom-right-radius:4px; }
.msg-row:not(.me) .bubble{ border-color:rgba(0,246,255,.3); box-shadow:0 4px 14px rgba(0,0,0,.25), 0 0 14px rgba(0,246,255,.06); border-bottom-left-radius:4px; }
.bubble img{ max-width:100%; border-radius:8px; display:block; margin-bottom:6px; cursor:zoom-in; }
.bubble .time{ font-size:9px; color:var(--muted); margin-top:5px; text-align:right; letter-spacing:.5px; }
.image-preview{ display:flex; align-items:center; gap:10px; padding:8px 16px; border-top:1px solid var(--border-soft); background:var(--glass); }
.image-preview img{ height:56px; border-radius:8px; border:1px solid var(--border); }
.image-preview button{ background:none; border:1px solid var(--danger); color:var(--danger); width:24px; height:24px; border-radius:50%; cursor:pointer; }
.send-bar{ display:flex; align-items:center; gap:8px; padding:14px 16px; border-top:1px solid var(--border-soft); background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.send-bar input[type=text]{ flex:1; background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text); padding:12px 16px; border-radius:24px; font-family:'Share Tech Mono',monospace; font-size:13px; outline:none; transition:.2s; }
.send-bar input[type=text]:focus{ border-color:var(--cyan); box-shadow:0 0 12px rgba(0,246,255,.3); }
.btn-send{ background:linear-gradient(135deg, var(--pink), var(--purple)); border:none; color:#fff; width:40px; height:40px; border-radius:50%; font-size:15px; cursor:pointer; box-shadow:0 0 14px rgba(255,32,121,.6); flex-shrink:0; transition:.2s var(--ease); }
.btn-send:hover{ transform:scale(1.08) rotate(8deg); box-shadow:0 0 20px rgba(255,32,121,.8); }

/* ---------- MODAL ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(3,1,8,.75); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:10; animation:fadeSlide .2s var(--ease); }
.modal-card{ width:100%; max-width:360px; background:linear-gradient(180deg, var(--glass), var(--panel2)); backdrop-filter:blur(18px); border:1px solid var(--border-soft); border-radius:14px; padding:24px; box-shadow:0 0 50px rgba(157,77,255,.25), 0 30px 70px rgba(0,0,0,.6); animation:cardRise .3s var(--ease); }
.modal-card h3{ font-family:'Orbitron',sans-serif; font-size:14px; letter-spacing:2px; color:#fff; margin:0 0 16px; text-shadow:0 0 10px rgba(0,246,255,.4); }
.modal-card label{ font-size:10px; letter-spacing:2px; color:var(--muted); display:block; margin-top:10px; margin-bottom:4px; }
.modal-card input{ width:100%; background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:8px; font-family:'Share Tech Mono',monospace; font-size:13px; outline:none; }
.member-list{ max-height:180px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; margin-top:4px; }
.member-row{ display:flex; align-items:center; gap:8px; padding:9px 10px; border-bottom:1px solid rgba(43,26,74,.5); font-size:12px; cursor:pointer; }
.member-row:last-child{ border-bottom:none; }
.member-row input{ width:auto; }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }
.modal-actions button{ flex:1; margin-top:0; }

@media(max-width:760px){
  .sidebar{ width:100%; min-width:0; }
  .app-screen{ position:relative; }
  .chat-main{ position:absolute; inset:0; transform:translateX(100%); transition:transform .3s var(--ease); background:var(--bg); }
  .app-screen.chat-open .chat-main{ transform:translateX(0); }
  .app-screen.chat-open .sidebar{ display:none; }
  .back-btn{ display:inline-block; }
}