/* ===================== APP SHELL ===================== */
#app{display:flex;flex-direction:column;height:100vh}

/* ===================== HEADER ===================== */
.hdr{
  display:flex;align-items:center;gap:10px;padding:0 14px;height:50px;
  background:var(--bg1);border-bottom:1px solid var(--bdr);flex-shrink:0;
  position:relative;z-index:200
}
.hdr-logo{font-family:'Press Start 2P';font-size:clamp(8px,1.5vw,11px);
  color:var(--gold);text-shadow:0 0 12px rgba(255,215,0,.5);white-space:nowrap}
.hdr-sub{font-size:10px;color:var(--txt2);white-space:nowrap}
@media(max-width:500px){.hdr-sub{display:none}}
.hdr-sp{flex:1}
.hdr-ind{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--green)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hbtn{
  width:32px;height:32px;border:1px solid var(--bdr);border-radius:7px;
  background:var(--bg2);color:var(--txt1);cursor:pointer;display:flex;
  align-items:center;justify-content:center;font-size:14px;transition:.2s
}
.hbtn:hover{background:var(--bg4);color:var(--txt0)}

/* ===================== LAYOUT ===================== */
.layout{display:flex;flex:1;overflow:hidden}

/* ===================== LEFT SIDEBAR ===================== */
.lsb{
  width:186px;background:var(--bg1);border-right:1px solid var(--bdr);
  display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0
}
@media(max-width:900px){.lsb{display:none}}
.lsb-sec{padding:12px}
.lsb-ttl{font-family:'Press Start 2P';font-size:7px;color:var(--txt3);
  text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--bdr);margin-bottom:8px}
.di{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;
  cursor:pointer;transition:.15s;margin-bottom:2px;user-select:none}
.di:hover,.di.act{background:var(--bg3)}
.di.act .dn{color:var(--txt0)}
.dic{width:26px;height:26px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-size:13px;flex-shrink:0}
.dn{font-size:11px;font-weight:500;color:var(--txt1)}
.dc{margin-left:auto;font-size:10px;color:var(--txt2);background:var(--bg3);padding:1px 6px;border-radius:10px}
.stats{padding:12px;border-top:1px solid var(--bdr);margin-top:auto}
.sr{font-size:11px;color:var(--txt1);margin-bottom:5px;display:flex;align-items:center;gap:4px}
.sv{margin-left:auto;font-weight:700}

/* ===================== RIGHT SIDEBAR (CHAT) ===================== */
.rsb{
  width:300px;background:var(--bg1);border-left:1px solid var(--bdr);
  display:flex;flex-direction:column;flex-shrink:0;transition:transform .3s
}
@media(max-width:768px){
  .rsb{
    position:fixed;bottom:0;left:0;right:0;width:100%;height:66vh;
    transform:translateY(100%);z-index:300;border-top:1.5px solid var(--bdr);border-left:none;
    border-radius:16px 16px 0 0
  }
  .rsb.open{transform:translateY(0)}
}

/* ===================== STATUS BAR ===================== */
.sbar{
  height:28px;background:var(--bg1);border-top:1px solid var(--bdr);
  display:flex;align-items:center;padding:0 14px;gap:14px;font-size:9px;
  color:var(--txt2);flex-shrink:0;overflow:hidden
}
.sbrand{font-family:'Press Start 2P';font-size:7px;color:var(--purple)}
.sit{display:flex;align-items:center;gap:4px;white-space:nowrap}
.sd{width:5px;height:5px;border-radius:50%}
.sg{background:var(--green)}.sc{background:var(--cyan)}.sp{background:var(--purple)}.sy{background:#f59e0b}
.stime{margin-left:auto;font-family:'Press Start 2P';font-size:7px;color:var(--txt2)}

/* ===================== MOBILE NAV ===================== */
.mnav{
  display:none;position:fixed;bottom:0;left:0;right:0;height:52px;
  background:var(--bg1);border-top:1px solid var(--bdr);z-index:400;
  align-items:center;justify-content:space-around
}
@media(max-width:768px){.mnav{display:flex}}
.mbtn{display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:9px;color:var(--txt2);cursor:pointer;padding:5px 12px;
  border-radius:8px;transition:.15s;background:none;border:none}
.mbtn.act,.mbtn:hover{color:var(--txt0);background:var(--bg3)}
.mico{font-size:18px}

/* ===================== OVERLAY ===================== */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299}
.overlay.vis{display:block}