/* ── Compact Avatar Strip + Slide Panel (Mobile) ─────────────────────────── */

@media screen and (max-width: 768px) {

  /* Hide original right panel on mobile */
  .cright { display: none !important; }
  .cright2 { display: none !important; }

  /* Shrink chat area to leave room for strip */
  #chat_center { margin-right: 46px !important; }

  /* Hide 3-line burger - we replace with avatar strip */
  #head_burger { display: none !important; }

  /* Avatar strip - fixed on right, always visible */
  #rt_avatar_strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    right: 0;
    top: 51px;
    bottom: 55px;
    width: 46px;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 190;
    overflow: hidden;
    overflow-y: auto;
    padding: 6px 0;
    border-left: 1px solid rgba(255,255,255,0.08);
    scrollbar-width: none;
  }
  #rt_avatar_strip::-webkit-scrollbar { display: none; }

  /* Expand button */
  #rt_strip_expand {
    width: 32px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: rgba(255,255,255,0.6);
    font-size: 14px; margin-bottom: 4px; flex-shrink: 0;
  }

  /* Avatar wraps */
  .rt_strip_wrap { position: relative; flex-shrink: 0; margin: 3px 0; }
  .rt_strip_avatar {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; cursor: pointer; display: block;
    border: 2px solid rgba(255,255,255,0.15);
    transition: transform 0.15s;
  }
  .rt_strip_avatar:active { transform: scale(0.9); }
  .rt_strip_avatar.online { border-color: #2ecc71; }
  .rt_strip_avatar.offline { opacity: 0.4; }
  .rt_strip_dot {
    position: absolute; bottom: 1px; right: 1px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #2ecc71; border: 1px solid rgba(0,0,0,0.5);
  }

  /* Full slide-out panel */
  #rt_full_panel {
    position: fixed; top: 51px; right: -280px; bottom: 55px;
    width: 260px; z-index: 300;
    background: var(--back-color2, #1e1e2e);
    border-left: 1px solid rgba(255,255,255,0.1);
    box-shadow: -4px 0 20px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
    transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
  }
  #rt_full_panel.open { right: 0; }

  #rt_panel_header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 13px; font-weight: bold; flex-shrink: 0; opacity: 0.85;
  }
  #rt_panel_close {
    cursor: pointer; font-size: 20px; opacity: 0.5; padding: 0 4px;
  }
  #rt_panel_list { overflow-y: auto; flex: 1; padding: 4px 0; }
  #rt_panel_list::-webkit-scrollbar { width: 3px; }

  .rt_panel_user {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; cursor: pointer;
  }
  .rt_panel_user:active { background: rgba(255,255,255,0.06); }
  .rt_panel_user img {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.12);
  }
  .rt_panel_info { flex: 1; overflow: hidden; }
  .rt_panel_name {
    font-size: 13px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rt_panel_sub { font-size: 10px; opacity: 0.45; margin-top: 1px; }

  /* Backdrop */
  #rt_panel_backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 299;
  }
  #rt_panel_backdrop.show { display: block; }
}

/* Hide bottom 3-line userlist button on mobile (replaced by avatar strip) */
@media screen and (max-width: 768px) {
  #rlist_open { display: none !important; }
}

/* Typing pen indicator in avatar strip */
@media screen and (max-width: 768px) {
  .rt_strip_typing {
    position: absolute;
    bottom: -2px;
    left: -2px;
    font-size: 11px;
    line-height: 1;
    animation: rt_pen_bounce 0.6s infinite alternate;
    pointer-events: none;
  }
  @keyframes rt_pen_bounce {
    from { transform: rotate(-10deg) scale(1); }
    to   { transform: rotate(10deg) scale(1.2); }
  }
}





@keyframes rt_pen_bounce {
  from { transform: rotate(-10deg) scale(1); }
  to   { transform: rotate(10deg)  scale(1.2); }
}


/* ══════════════════════════════════════════════════════════════════
   Mobile Real-Time Features Layout  (≤768px)
   ══════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {

  /* 1. Restore full-width input & footer */
  #top_chat_container, #priv_input { margin-right: 0 !important; }
  #wrap_footer { padding-right: 0 !important; }
  #chat_center  { margin-right: 0 !important; }

  /* 2. Hide bottom 3-line button, reclaim space */
  #rlist_open { display:none !important; width:0 !important; padding:0 !important; overflow:hidden !important; }

  /* 3. Strip anchored to #warp_show_chat (messages only — never reaches input bar) */
  #warp_show_chat { position: relative !important; overflow: hidden !important; }
  #rt_avatar_strip {
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 46px !important; height: 100% !important;
    z-index: 10 !important;
  }

  /* 4. Timestamps — right padding avoids strip overlap */
  #show_chat, #chat_logs_container { padding-right: 50px !important; }

  /* 5. Live typing preview — inside chat_logs_container, flows with messages */
  #rt_live_container {
    display: none; /* shown by JS when someone types */
    position: static !important;
    width: calc(100% - 54px) !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
    z-index: auto !important;
  }
  /* Each typing user row */
  .rt_live_row {
    font-size: 12px;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 0;
  }
  .rt_live_name { font-weight: bold; opacity: 0.9; }
  .rt_live_cursor {
    animation: rt_blink 0.7s infinite;
    margin-left: 1px;
  }
  @keyframes rt_blink { 0%,100%{opacity:1} 50%{opacity:0} }

  /* 6. Expand button */
  #rt_strip_expand {
    width: 46px !important; height: 44px !important;
    font-size: 22px !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 6px 0 0 6px !important;
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    margin-bottom: 4px !important; flex-shrink: 0 !important;
  }

  /* 7. Full panel native userlist */
  #rt_panel_list { padding: 0 !important; }
  #rt_panel_list .user_item { padding-left: 8px !important; padding-right: 8px !important; }
}

/* Typing pen indicator — all breakpoints */
.rt_typing_pen {
  position: absolute !important;
  bottom: -4px !important; right: -4px !important;
  font-size: 11px !important; line-height: 1 !important;
  pointer-events: none !important; z-index: 5 !important;
  animation: rt_pen_bounce 0.6s infinite alternate;
}
@keyframes rt_pen_bounce {
  from { transform: rotate(-10deg) scale(1); }
  to   { transform: rotate(10deg) scale(1.2); }
}