*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0d0f;--panel:#15181c;--panel2:#20242a;--line:#6f5520;
  --text:#f5e5a8;--muted:#b8a979;--green:#c99524;--bubble:#8b6414;
}
body{font-family:Arial,Helvetica,sans-serif;background:#090a0b;color:var(--text);min-height:100vh}
.hidden{display:none!important}
.auth-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 15%,#252015 0,#0b0c0d 48%,#050606 100%);padding:20px}
.auth-card{width:min(420px,100%);background:linear-gradient(145deg,#1b1e21,#111316);border:1px solid #806324;border-radius:22px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 35px rgba(214,164,45,.04)}
.brand{text-align:center;margin-bottom:18px;padding:14px 10px;border:1px solid #8b6b26;border-radius:15px;box-shadow:inset 0 0 0 5px #151719,inset 0 0 0 6px #544119,0 0 12px rgba(191,146,38,.12)}
.brand img{display:block;width:100%;height:82px;object-fit:contain;margin:0 auto;border-radius:10px}
.auth-card h1{text-align:center;font-size:24px;letter-spacing:1.5px;margin-bottom:8px;color:#ffe9a2;text-shadow:0 2px 8px #a87516}
.subtitle{text-align:center;color:#ffe8a0;font-weight:800;font-size:19px;line-height:1.3;letter-spacing:1px;margin-bottom:22px;text-shadow:0 2px 8px rgba(211,157,38,.55)}
.tabs,.nav-tabs{display:grid;grid-template-columns:1fr 1fr;background:#20242a;border:1px solid #57451f;border-radius:10px;padding:4px}
.tabs{margin-bottom:18px}.tab,.nav-tab{border:0;background:transparent;color:#c5b681;padding:10px;border-radius:8px;cursor:pointer}
.tab.active,.nav-tab.active{background:linear-gradient(#d5a63b,#956716);color:#fff7d1;box-shadow:0 2px 8px rgba(196,143,29,.3)}
.form{display:flex;flex-direction:column;gap:12px}
.form input,.search-wrap input,.composer input,.modal-card input{
  border:1px solid #2a3942;background:#202c33;color:white;border-radius:9px;padding:12px 14px;outline:none;width:100%
}
.form input:focus,.search-wrap input:focus,.composer input:focus,.modal-card input:focus{border-color:#c99524;box-shadow:0 0 0 2px rgba(201,149,36,.12)}
.primary-btn{border:1px solid #e0b64e;background:linear-gradient(#d9aa3e,#956816);color:#fff5cf;border-radius:9px;padding:12px 16px;font-weight:700;cursor:pointer;width:100%;box-shadow:0 3px 10px rgba(186,134,23,.25)}
.message-box{min-height:24px;margin-top:14px;text-align:center;font-size:13px;color:#ff8a8a}.message-box.success{color:#71e5b8}

.app{width:min(1450px,96vw);height:calc(100vh - 36px);min-height:0;margin:18px auto;display:grid;grid-template-columns:390px 1fr;background:var(--panel);box-shadow:0 8px 40px rgba(0,0,0,.35);overflow:hidden}
.sidebar{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.sidebar-header,.chat-header{height:64px;background:var(--panel2);display:flex;align-items:center;padding:10px 14px}
.sidebar-header{justify-content:space-between}.profile{display:flex;align-items:center;gap:10px;min-width:0}.profile-text{display:flex;flex-direction:column;min-width:0}
.profile-text strong,.profile-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-text span,.chat-title span{font-size:12px;color:var(--muted)}
.avatar,.big-avatar{display:grid;place-items:center;background:#3b4a54;color:white;font-weight:700}
.avatar{width:42px;height:42px;border-radius:50%;flex:0 0 auto}.avatar.me{background:linear-gradient(135deg,#00a884,#53bdeb)}
.avatar-btn{border:0;background:transparent;cursor:pointer;width:42px;height:42px;border-radius:50%;overflow:hidden;position:relative}
.avatar-img{width:42px;height:42px;border-radius:50%;object-fit:cover}.avatar-wrap{width:42px;height:42px;position:relative}
.icon-btn,.back-btn{width:38px;height:38px;border:0;background:transparent;color:#aebac1;border-radius:50%;font-size:20px;cursor:pointer}
.icon-btn:hover,.back-btn:hover{background:#2a3942}.header-buttons{display:flex;gap:4px}.search-wrap{padding:10px 12px;border-bottom:1px solid var(--line)}
.search-wrap input{width:100%}.nav-tabs{margin:0 12px 8px}.section-label{padding:10px 14px;color:#00a884;font-size:12px;font-weight:700}
.chat-list{overflow:auto;flex:1;min-height:0}.user-item,.group-item{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04)}
.user-item:hover,.group-item:hover,.user-item.active,.group-item.active{background:#202c33}
.user-info{min-width:0;flex:1}.user-info strong,.user-info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-info span{font-size:12px;color:var(--muted);margin-top:3px}
.chat-panel{min-width:0;position:relative;background:radial-gradient(circle at 25px 25px,rgba(255,255,255,.025) 2px,transparent 2px) 0 0/50px 50px,#0b141a;min-height:0}
.empty-state{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--muted)}.empty-state h2{color:white;margin:10px 0}.empty-icon{font-size:74px}
.chat-screen{height:100%;min-height:0;display:grid;grid-template-rows:64px minmax(0,1fr) auto;overflow:hidden;border-left:1px solid rgba(255,255,255,.04)}.chat-header{gap:10px}.chat-title{display:flex;flex-direction:column;flex:1}.back-btn{display:none}
.messages{min-height:0;padding:20px 7%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,rgba(11,20,26,.78),rgba(11,20,26,.95));border-bottom:1px solid rgba(255,255,255,.04)}
.msg{max-width:min(72%,650px);padding:8px 10px 6px;border-radius:8px;font-size:14px;line-height:1.35;position:relative;color:#fff}
.msg.me{align-self:flex-end;background:#005c4b}.msg.other{align-self:flex-start;background:#202c33}
.msg-sender{display:block;color:#53bdeb;font-size:11px;font-weight:700;margin-bottom:3px}.msg-time{display:block;text-align:right;color:#aebac1;font-size:10px;margin-top:4px}
.msg-actions{position:absolute;top:2px;right:3px;opacity:0;transition:.15s}.msg:hover .msg-actions{opacity:1}
.delete-msg{border:0;background:rgba(0,0,0,.25);color:#ddd;border-radius:5px;padding:2px 6px;cursor:pointer}
.composer{background:#202c33;padding:9px 12px;display:flex;gap:8px;align-items:center;border-top:1px solid rgba(255,255,255,.06);min-height:62px}.composer input{flex:1}.send-btn{width:42px;height:42px;border:0;border-radius:50%;background:#00a884;color:white;font-size:18px;cursor:pointer}
.app-notice{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:9999;max-width:min(760px,92vw);padding:10px 14px;background:#7a2f2f;color:#fff;border:1px solid #a94747;border-radius:9px;font-size:13px;box-shadow:0 5px 20px rgba(0,0,0,.35)}
.app-notice.ok{background:#145c4a;border-color:#1d8b70}.search-status{padding:10px 14px;color:#8696a0;font-size:12px;text-align:center}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#00a884;margin-right:6px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.68);display:grid;place-items:center;z-index:10000;padding:18px}
.modal-card{width:min(430px,96vw);max-height:88vh;overflow:auto;background:#111b21;border:1px solid #2a3942;border-radius:16px;padding:22px;position:relative}
.modal-card.wide{width:min(560px,96vw)}.modal-card h2{margin-bottom:16px}.modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#aaa;font-size:28px;cursor:pointer}
.photo-preview-wrap{text-align:center;margin:10px 0 15px}.big-photo,.big-avatar{width:92px;height:92px;border-radius:50%;object-fit:cover;margin:auto}.big-avatar{font-size:32px}
.modal-card input{margin:7px 0}.file-label,.member-title{display:block;color:#aebac1;font-size:12px;margin-top:8px}.member-title{font-weight:700;margin:12px 0 7px}
.member-picker{border:1px solid #2a3942;border-radius:10px;max-height:280px;overflow:auto}
.member-row{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid rgba(255,255,255,.05)}.member-row:last-child{border-bottom:0}
.member-row input[type="checkbox"]{width:auto;margin:0}.member-row .user-info{flex:1}.small-status{font-size:12px;color:#aebac1;margin-top:10px;text-align:center}
.admin-badge{font-size:10px;background:#00a884;color:#fff;border-radius:4px;padding:2px 5px;margin-left:5px}.remove-member{border:0;background:#7a2f2f;color:#fff;border-radius:6px;padding:5px 8px;cursor:pointer}

@media(max-width:760px){
  .app{width:100%;height:100vh;margin:0;grid-template-columns:1fr}.chat-panel{position:absolute;inset:0;transform:translateX(100%);transition:.2s;z-index:5}
  .app.mobile-chat-open .chat-panel{transform:translateX(0)}.back-btn{display:block}.empty-state{display:none}.msg{max-width:86%}
}
.unread-badge{
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:#00a884;color:#061b16;font-size:11px;font-weight:700;
  display:grid;place-items:center;flex:0 0 auto
}
.msg-menu-btn{
  position:absolute;right:4px;top:4px;border:0;background:rgba(0,0,0,.18);
  color:#cfd8dc;border-radius:5px;width:25px;height:24px;cursor:pointer;
  font-size:17px;line-height:20px;opacity:.85
}
.msg.me .msg-text{padding-right:22px;display:inline-block}
.msg-menu-btn:hover{background:rgba(0,0,0,.35);opacity:1}
.read-mark{color:#53bdeb;margin-left:3px;font-weight:700}

.nav-tabs.three{grid-template-columns:1fr 1fr 1fr}
.conversation-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04)
}
.conversation-item:hover{background:#202c33}
.conv-main{min-width:0;flex:1}
.conv-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.conv-top strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-time{font-size:11px;color:#8696a0;white-space:nowrap}
.conv-time.unread-time{color:#00a884}
.conv-bottom{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:4px}
.conv-preview{font-size:12px;color:#8696a0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.conv-preview.unread-preview{color:#e9edef;font-weight:600}
.chat-header-actions{display:flex;align-items:center;gap:3px}
.chat-popup{
  position:fixed;z-index:12000;background:#202c33;border:1px solid #34434c;
  border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:hidden;
  min-width:190px
}
.chat-popup button{
  width:100%;border:0;background:transparent;color:#e9edef;text-align:left;
  padding:12px 14px;cursor:pointer
}
.chat-popup button:hover{background:#2a3942}

.reply-bar{
  grid-row:auto;background:#202c33;border-top:1px solid #2a3942;
  margin:0;padding:7px 14px;display:flex;align-items:center;gap:10px
}
.chat-screen:has(.reply-bar:not(.hidden)){
  grid-template-rows:64px minmax(0,1fr) auto auto
}
.reply-copy{
  flex:1;border-left:3px solid #00a884;padding:5px 10px;
  background:#182229;border-radius:5px;min-width:0
}
.reply-copy strong{display:block;color:#00a884;font-size:12px}
.reply-copy span{display:block;color:#aebac1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-close{border:0;background:transparent;color:#aebac1;font-size:24px;cursor:pointer}
.msg-reply-box{
  border-left:3px solid #00a884;background:rgba(0,0,0,.18);
  border-radius:5px;padding:5px 7px;margin-bottom:5px;font-size:11px
}
.msg-reply-box strong{display:block;color:#53bdeb;margin-bottom:2px}
.msg-reply-box span{display:block;color:#aebac1;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg{touch-action:pan-y;transition:transform .12s ease}
.swipe-hint{
  position:absolute;left:-31px;top:50%;transform:translateY(-50%);
  width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  color:#00a884;opacity:0;transition:.12s
}
.msg.swiping .swipe-hint{opacity:1}
.msg.me .swipe-hint{left:auto;right:-31px}

/* V3.4 WhatsApp-like unread counter */
.unread-badge{
  min-width:21px;height:21px;padding:0 6px;border-radius:999px;
  background:#25d366;color:#082c1d;font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;box-shadow:0 0 0 1px rgba(37,211,102,.15)
}
.conv-time.unread-time{color:#25d366;font-weight:700}
.conv-preview.unread-preview{color:#e9edef;font-weight:700}

#buildVersion{
  display:inline-block;margin-left:6px;padding:2px 6px;border-radius:8px;
  background:#00a884;color:white;font-size:10px;font-weight:700
}

.context-menu{
  position:fixed;
  z-index:20000;
  min-width:220px;
  background:#202c33;
  border:1px solid #36474f;
  border-radius:9px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  padding:6px 0;
  overflow:hidden;
}
.context-menu button{
  width:100%;
  border:0;
  background:transparent;
  color:#e9edef;
  text-align:left;
  padding:11px 14px;
  cursor:pointer;
  font-size:13px;
}
.context-menu button:hover{background:#2a3942}
.context-menu .danger-item{color:#ff9d9d}
.context-menu .danger-item:hover{background:#482c2c}
.photo-help{
  font-size:11px;color:#8696a0;margin-top:4px;line-height:1.4
}

.msg-status{
  display:inline-flex;
  align-items:center;
  margin-left:4px;
  font-size:12px;
  line-height:1;
  letter-spacing:-2px;
  color:#aebac1;
  vertical-align:-1px;
}
.msg-status.pending{
  letter-spacing:0;
  color:#aebac1;
  font-size:11px;
}
.msg-status.sent,
.msg-status.delivered{
  color:#aebac1;
}
.msg-status.read{
  color:#53bdeb;
}


/* V3.9 - KIRIM FOTO CHAT */
.attach-btn{
  flex:0 0 42px;width:42px;height:42px;border:0;border-radius:50%;
  background:transparent;color:#aebac1;font-size:22px;cursor:pointer
}
.attach-btn:hover{background:#2a3942;color:#e9edef}
.chat-image{
  display:block;max-width:min(320px,70vw);max-height:420px;width:auto;height:auto;
  object-fit:cover;border-radius:8px;margin:1px 0 4px;cursor:pointer
}
.msg:has(.chat-image){padding:5px 5px 4px}


/* V4.0 - FOTO PASTE + CAPTION */
.chat-image-preview-card{width:min(520px,96vw)}
.chat-image-preview{
  display:block;width:auto;max-width:100%;max-height:55vh;object-fit:contain;
  margin:12px auto;border-radius:10px;background:#0b141a
}
#chatImageCaption{margin:10px 0 12px}
.image-preview-actions{display:flex;gap:10px;align-items:center}
.image-preview-actions .primary-btn{flex:1}
.image-cancel-btn{
  flex:1;border:1px solid #3b4a54;background:#202c33;color:#e9edef;
  border-radius:9px;padding:12px 16px;font-weight:700;cursor:pointer
}
.image-caption{
  display:block;padding:3px 5px 1px;white-space:pre-wrap;word-break:break-word
}