/* =========================
   RIGHT PANEL (DRAWER)
========================= */

.rightPanel{
  position: fixed;
  top: 68px;
  right: 12px;
  width: 330px;
  bottom: 12px;
  z-index: 25;

  background: rgba(10,10,14,.70);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);

  display:flex;
  flex-direction:column;
  overflow:hidden;

  transform: translateX(0);
  transition: transform .22s ease, opacity .22s ease;
}

/* ZWIJANIE: przesuwamy panel prawie poza ekran */
.rightPanel.collapsed{
  transform: translateX(292px);
}

/* mały “uchwyt” zawsze widoczny */
.rpHandle{
  position:absolute;
  top: 12px;
  left: -44px;
  width: 40px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,10,14,.70);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.rpHandle:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--brand) 35%, rgba(255,255,255,.10) 65%);
}
.rpHandle .ico{
  font-size: 18px;
  line-height: 1;
}

/* na mobile chowamy prawy panel jak było */
@media (max-width: 1100px){
  .rightPanel{ display:none; }
}

/* =========================
   RP TOP
========================= */
.rpTop{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rpTitle{
  font-weight:1000;
  letter-spacing:.2px;
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.rpUser{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.rpAvatar{
  width:40px; height:40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: color-mix(in srgb, var(--brand) 18%, rgba(255,255,255,.04) 82%);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, rgba(255,255,255,.08) 75%);
  font-size: 18px;
}
.rpUserMeta{ min-width:0; }
.rpName{ font-weight:1000; }
.rpSub{ font-size:12px; }

/* =========================
   RP BUTTONS (tylko unikalne, NIE jak topbar)
========================= */
.rpBtns{
  display:flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rpBtn{
  cursor:pointer;
  width:46px; height:46px;
  border-radius: 999px;
  border:none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  display:grid;
  place-items:center;
  font-size: 18px;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.rpBtn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--brand) 38%, rgba(255,255,255,.10) 62%);
}
.rpBtn.live{
  background: linear-gradient(135deg, var(--live1), var(--live2));
  color:#12040a;
  box-shadow: var(--glowLive);
  border-color: rgba(255,255,255,.12);
}

/* =========================
   RP LISTS + BLOCKS
========================= */
.rpLists{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  overflow:auto;
}

/* ukryte scrollbary – smooth */
.rpLists::-webkit-scrollbar{ width:0; height:0; }
.rpLists{ scrollbar-width: none; }

.rpBlock{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 12px;
}
.rpBlockHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.rpBlockTitle{ font-weight:1000; }
.rpList{ display:flex; flex-direction:column; gap:8px; }

.rpItem{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 10px 10px;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.rpItem:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  border-color: color-mix(in srgb, var(--brand) 35%, rgba(255,255,255,.10) 65%);
}
.rpItemLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.rpDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--brand2);
  box-shadow: 0 0 18px rgba(0,255,154,.16);
}
.rpText{ min-width:0; }
.rpMain{
  font-weight:1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rpSmall{
  font-size: 12px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rpPill{
  font-size:12px;
  padding: 6px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  opacity:.9;
}

/* =========================
   SYSTEM LOG (w prawym panelu)
========================= */
.sysLog{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  padding: 10px;
  max-height: 190px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sysLog::-webkit-scrollbar{ width:0; height:0; }
.sysLog{ scrollbar-width:none; }

.sysMsg{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  padding: 10px 10px;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(242,242,247,.92);
}
.sysMsg .time{
  display:block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}