/* CHATROOM — layout.css */
/* SPLASH SCREEN */
#screen-splash{
  align-items:center;justify-content:center;
  background:var(--bg);
  position:fixed;inset:0;z-index:9999;
  flex-direction:column;gap:16px;
}
#screen-splash .splash-logo{
  width:72px;height:72px;border-radius:24px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;box-shadow:0 12px 40px rgba(59,130,246,0.5);
  animation:splashPulse 1.5s ease-in-out infinite;
}
@keyframes splashPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
#screen-splash h1{font-size:24px;font-weight:900;letter-spacing:-0.5px}
#screen-splash h1 span{color:var(--accent)}
#screen-splash p{font-size:12px;color:var(--text3)}

/* MAIN APP */
#screen-app{flex-direction:row;overflow:hidden}

/* REALTIME CLOCK */
#sidebar-clock{font-size:10px;color:var(--text3);font-weight:600;letter-spacing:.3px;padding:4px 0 0;}

/* SIDEBAR */
#sidebar{width:100%;max-width:380px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg2);border-right:1px solid var(--border);height:100dvh;position:relative}
/* Panel chat (kanan) SELALU disembunyikan sampai ada percakapan yang
   benar-benar dibuka (class .show-mobile ditambahkan lewat JS) — nggak
   lagi tergantung lebar layar, karena beberapa browser/WebView di HP
   ternyata melaporkan lebar viewport yang salah (dikira "desktop"). */
#chatroom{display:none}
#chatroom.show-mobile{display:flex;animation:chatSlideIn .32s cubic-bezier(.32,.72,0,1)}
@keyframes chatSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(max-width:1023px){#sidebar{max-width:100%}#sidebar.hidden-mobile{display:none}}
@media(min-width:1024px){
  /* Di layar BENERAN lebar (laptop/desktop asli), sidebar+chat tampil
     berdampingan seperti WA Web, tapi tetap nunggu ada chat yg dibuka. */
  #sidebar.hidden-mobile{display:flex}
}

.sidebar-header{padding:calc(var(--safe-top) + 14px) 18px 0;flex-shrink:0}
.sidebar-top-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border)}
.sidebar-logo{display:flex;align-items:center;gap:10px}
.sidebar-logo-dot{width:36px;height:36px;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 4px 12px rgba(59,130,246,0.4);overflow:hidden;cursor:pointer}
.sidebar-logo-dot img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.sidebar-logo h2{font-size:17px;font-weight:900;letter-spacing:-0.3px}
.sidebar-actions{display:flex;gap:8px}
.icon-btn{width:36px;height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:.15s}
.icon-btn:active{transform:scale(.88)}
.icon-btn:hover{background:var(--surface2);color:var(--text)}
.icon-btn-badge{position:absolute;top:-5px;right:-5px;background:var(--red,#ef4444);color:#fff;font-size:9px;font-weight:800;border-radius:99px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg2);animation:badgePop .35s cubic-bezier(.34,1.56,.64,1);}


/* SIDEBAR BOTTOM NAV (Pesan / Status / Temukan / Grup / Komunitas) */
.sidebar-tabs{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;gap:2px;
  padding:6px 4px calc(var(--safe-bot) + 6px);
  background:rgba(15,21,35,.88);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
}
.sidebar-tab{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 2px 6px;border-radius:14px;border:none;background:transparent;
  font-family:inherit;font-size:10px;font-weight:700;color:var(--text3);
  cursor:pointer;position:relative;transition:color .25s,transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.sidebar-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sidebar-tab i{font-size:18px;line-height:1;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.sidebar-tab:active{transform:scale(.92)}
.sidebar-tab.active{color:var(--accent)}
.sidebar-tab.active i{transform:translateY(-1px) scale(1.1)}
.sidebar-tab.active::before{
  content:'';position:absolute;top:1px;left:50%;transform:translateX(-50%);
  width:34px;height:26px;border-radius:10px;background:rgba(59,130,246,.15);z-index:-1;
  animation:tabPillIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tabPillIn{from{transform:translateX(-50%) scale(.6);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
.tab-badge{position:absolute;top:1px;left:50%;margin-left:5px;background:var(--red);color:#fff;font-size:8px;font-weight:800;border-radius:99px;min-width:14px;height:14px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--bg2);animation:badgePop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes badgePop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}

.search-wrap{padding:12px 16px 10px;flex-shrink:0}
.search-box{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px}
.search-box i{color:var(--text3);font-size:13px}
.search-box input{background:none;border:none;outline:none;color:var(--text);font-size:13px;font-family:inherit;flex:1}
.search-box input::placeholder{color:var(--text3)}