/* ==========================================================================
   Responsive & Mobile Drawer Styles
   ========================================================================== */

/* Left Drawer Container (Combines Server Rail + Channel Sidebar on mobile) */
.left-drawer {
  display: flex;
  height: 100%;
  flex-shrink: 0;
  z-index: 20;
}

/* Scrim Overlays */
.drawer-scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.drawer-scrim.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Wide Screens / Desktop (> 960px) */
@media (min-width: 961px) {
  .left-drawer {
    position: relative;
    transform: none !important;
  }

  .chat-header-mobile-toggle {
    display: none !important;
  }

  .member-list-panel {
    position: relative;
  }

  .member-list-close-btn {
    display: none;
  }
}

/* Tablet & Mobile Screens (<= 960px) */
@media (max-width: 960px) {
  .chat-header-mobile-toggle {
    display: flex !important;
  }

  /* Left Drawer Slides In */
  .left-drawer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: auto;
    max-width: 88vw;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }

  .left-drawer.open {
    transform: translateX(0);
  }

  /* Member List Becomes Right Drawer */
  .member-list-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    max-width: 85vw;
    z-index: 25;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
  }

  .member-list-panel.open {
    transform: translateX(0);
    display: flex !important;
  }

  .member-list-close-btn {
    display: flex;
  }
}

/* Extra Small Screens (<= 480px) */
@media (max-width: 480px) {
  :root {
    --rail-width: 64px;
    --sidebar-width: 210px;
  }

  .rail-icon-btn {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  .message-item {
    padding: 6px 10px;
    gap: 10px;
  }

  .message-avatar {
    width: 34px;
    height: 34px;
  }

  .chat-composer-wrap {
    padding: 0 10px 14px 10px;
  }
}