:root{
  --bg: #080b16;
  --bg-alt: #0d1226;
  --bg-alt-2: #0a0f20;
  --card: #121933;
  --card-border: rgba(233,238,250,0.09);
  --ink: #edf0f9;
  --ink-muted: #98a1bd;
  --ink-dim: #5c6584;
  --accent: #5b7cfa;
  --gold: #cfa348;
  --danger: #e2604f;
}

*{ margin:0; padding:0; box-sizing:border-box; }
button{ font:inherit; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100svh;
}
a{ text-decoration:none; color:inherit; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- Auth (login/register) ---------- */
.auth-page{
  min-height:100svh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(91,124,250,0.16), transparent 60%),
    var(--bg);
}
.auth-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px;
}
.auth-header-brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Space Mono', monospace; font-size:13px; letter-spacing:0.1em; font-weight:700;
}
.auth-header-brand .mark{
  width:32px; height:32px; border-radius:9px;
  background:linear-gradient(155deg, var(--accent), #2f3f8a);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:16px; font-weight:700; color:#fff;
}
.auth-header-link{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.04em;
  color:var(--ink-muted); border:1px solid var(--card-border);
  padding:9px 16px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
  transition:border-color .2s ease, color .2s ease;
}
.auth-header-link:hover{ border-color:var(--accent); color:var(--ink); }
.auth-header-link svg{ width:13px; height:13px; }
.auth-main{
  flex:1; display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-footer{
  text-align:center; padding:20px 20px 28px;
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.05em; color:var(--ink-dim);
}
.auth-footer a{ color:var(--ink-muted); transition:color .2s ease; }
.auth-footer a:hover{ color:var(--accent); }
.auth-box{
  width:100%; max-width:400px;
  background:var(--card); border:1px solid var(--card-border);
  border-radius:20px; padding:38px 32px;
}
.auth-box h1{
  font-family:'Fraunces', serif; font-weight:600;
  font-size:24px; text-align:center; margin-bottom:6px;
}
.auth-sub{
  text-align:center; color:var(--ink-muted); font-size:14px; margin-bottom:26px;
}
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:'Space Mono', monospace; font-size:11.5px;
  letter-spacing:0.05em; color:var(--ink-muted); margin-bottom:7px;
}
.field input{
  width:100%; background:var(--bg-alt); border:1px solid var(--card-border);
  border-radius:10px; padding:12px 14px; color:var(--ink); font-size:14.5px;
  font-family:'Inter', sans-serif; transition:border-color .2s ease;
}
.field input:focus{ outline:none; border-color:var(--accent); }
.btn-primary{
  width:100%; background:var(--accent); color:#fff; border:none;
  padding:13px; border-radius:10px; font-family:'Space Mono', monospace;
  font-size:13px; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease; margin-top:6px;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(91,124,250,0.35); }
.auth-switch{
  text-align:center; margin-top:22px; font-size:13.5px; color:var(--ink-muted);
}
.auth-switch a{ color:var(--accent); font-weight:600; }
.alert{
  padding:11px 14px; border-radius:10px; font-size:13.5px; margin-bottom:18px;
}
.alert-error{ background:rgba(226,96,79,0.12); border:1px solid rgba(226,96,79,0.35); color:#f0a99c; }
.alert-success{ background:rgba(91,124,250,0.12); border:1px solid rgba(91,124,250,0.35); color:#aebcfb; }

/* ---------- Dashboard shell ---------- */
.shell{ display:flex; min-height:100svh; }
.sidebar{
  width:270px; flex-shrink:0; background:var(--bg-alt);
  border-right:1px solid var(--card-border);
  display:flex; flex-direction:column;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:22px 22px; font-family:'Space Mono', monospace;
  font-size:13px; letter-spacing:0.1em; font-weight:700;
  border-bottom:1px solid var(--card-border);
}
.sidebar-brand .mark{
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(155deg, var(--accent), #2f3f8a);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:15px; font-weight:700; color:#fff;
}
.sidebar-user{
  padding:18px 22px; border-bottom:1px solid var(--card-border);
}
.sidebar-user .name{ font-weight:600; font-size:14.5px; }
.sidebar-user .role{
  font-family:'Space Mono', monospace; font-size:10.5px; letter-spacing:0.06em;
  color:var(--gold); text-transform:uppercase; margin-top:3px;
}
.sidebar-nav{ padding:14px; flex:1; }
.sidebar-nav a{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:10px; font-size:14px; color:var(--ink-muted);
  transition:background .2s ease, color .2s ease; margin-bottom:4px;
}
.sidebar-nav a:hover, .sidebar-nav a.active{ background:var(--card); color:var(--ink); }
.sidebar-foot{ padding:16px; border-top:1px solid var(--card-border); }
.logout-btn{
  display:flex; align-items:center; gap:8px; justify-content:center;
  width:100%; padding:11px; border-radius:10px; border:1px solid var(--card-border);
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.04em;
  color:var(--ink-muted); background:transparent; cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.logout-btn:hover{ border-color:var(--danger); color:#f0a99c; }

.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{
  padding:18px 28px; border-bottom:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg);
}
.topbar h1{ font-family:'Fraunces', serif; font-weight:600; font-size:20px; }
.topbar p{ color:var(--ink-muted); font-size:13px; margin-top:2px; }
.topbar-logout-btn{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:10px; border:1px solid var(--card-border);
  background:var(--bg-alt); color:var(--ink-muted); cursor:pointer; padding:0;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.topbar-logout-btn svg{ display:block; }
.topbar-logout-btn:hover{ border-color:var(--danger); color:#f0a99c; background:rgba(226,96,79,0.12); }

/* ---------- Admin: user list ---------- */
.content{ padding:28px; flex:1; overflow-y:auto; }
.user-list{ display:flex; flex-direction:column; gap:10px; max-width:640px; }
.user-row{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--card-border); border-radius:14px;
  padding:16px 18px; transition:border-color .2s ease, transform .2s ease;
}
.user-row:hover{ border-color:rgba(91,124,250,0.4); transform:translateY(-1px); }
.avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(155deg, var(--accent), #2f3f8a);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:600; font-size:16px; color:#fff;
}
.user-row-info{ flex:1; min-width:0; }
.user-row-info .n{ font-weight:600; font-size:14.5px; }
.user-row-info .m{ color:var(--ink-muted); font-size:13px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-row-meta{ text-align:right; flex-shrink:0; }
.user-row-meta .t{ color:var(--ink-dim); font-size:11.5px; font-family:'Space Mono', monospace; }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700; margin-top:6px;
}
.empty-state{
  text-align:center; padding:60px 20px; color:var(--ink-muted);
}
.empty-state svg{ width:40px; height:40px; color:var(--ink-dim); margin-bottom:14px; }

/* ---------- Chat ---------- */
.chat-wrap{ flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-messages{
  flex:1; overflow-y:auto; padding:24px 28px; display:flex; flex-direction:column; gap:12px;
}
.msg{ max-width:62%; padding:11px 15px; border-radius:16px; font-size:14.5px; line-height:1.55; }
.msg.in{
  align-self:flex-start; background:var(--card); border:1px solid var(--card-border);
  border-bottom-left-radius:4px;
}
.msg.out{
  align-self:flex-end; background:var(--accent); color:#fff;
  border-bottom-right-radius:4px;
}
.msg .ts{
  display:block; font-family:'Space Mono', monospace; font-size:10px; opacity:0.6; margin-top:5px;
}
.chat-input{
  border-top:1px solid var(--card-border); padding:16px 22px;
  display:flex; gap:10px; align-items:flex-end; background:var(--bg);
}
.chat-input textarea{
  flex:1; resize:none; background:var(--bg-alt); border:1px solid var(--card-border);
  border-radius:12px; padding:12px 14px; color:var(--ink); font-family:'Inter', sans-serif;
  font-size:14.5px; max-height:120px;
}
.chat-input textarea:focus{ outline:none; border-color:var(--accent); }
.send-btn, .attach-btn{
  background:var(--accent); color:#fff; border:none; border-radius:12px;
  width:44px; height:44px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .2s ease; padding:0;
}
.attach-btn{
  background:var(--bg-alt); border:1px solid var(--card-border); color:var(--ink-muted);
}
.attach-btn svg, .send-btn svg{ display:block; }
.attach-btn:hover{ border-color:var(--accent); color:var(--ink); }
.send-btn:hover{ transform:translateY(-2px); }
.send-btn svg{ width:18px; height:18px; }

/* ---------- Attach preview (sebelum kirim) ---------- */
.attach-preview{
  display:flex; align-items:center; gap:10px;
  margin:0 22px 12px; padding:10px 14px;
  background:var(--card); border:1px solid var(--card-border); border-radius:12px;
  color:var(--ink-muted); font-size:13.5px;
}
.attach-preview svg{ flex-shrink:0; color:var(--accent); }
.attach-preview-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.attach-preview-remove{
  flex-shrink:0; background:transparent; border:none; color:var(--ink-dim);
  cursor:pointer; font-size:15px; padding:2px 6px; border-radius:6px; transition:color .2s ease, background .2s ease;
}
.attach-preview-remove:hover{ color:#f0a99c; background:rgba(226,96,79,0.12); }

/* ---------- Lampiran file di dalam bubble chat ---------- */
.msg.has-file{ padding:8px; }
.msg.has-file .ts{ padding:0 7px 4px; }
.msg-img-link{ display:block; }
.msg-img{
  display:block; width:100%; max-width:260px; max-height:280px; object-fit:cover;
  border-radius:10px; margin-bottom:4px;
}
.msg-file{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; margin-bottom:4px;
  background:rgba(255,255,255,0.06); color:inherit;
  transition:background .2s ease;
}
.msg-file:hover{ background:rgba(255,255,255,0.12); }
.msg.in .msg-file{ background:rgba(91,124,250,0.1); }
.msg-file svg{ flex-shrink:0; }
.msg-file-info{ min-width:0; display:flex; flex-direction:column; }
.msg-file-name{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.msg-file-size{ font-size:11px; opacity:0.75; margin-top:1px; }

@media (max-width: 820px){
  .sidebar{ position:fixed; left:-270px; top:0; bottom:0; z-index:60; transition:left .25s ease; }
  .sidebar.open{ left:0; }
  .menu-btn{ display:flex; }
  .msg{ max-width:80%; }
}
.menu-btn{
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:9px; border:1px solid var(--card-border);
  background:transparent; color:var(--ink); cursor:pointer;
}