/* =====================================================================
   Direct Messages Global Stage & Actor Orchestration
   ===================================================================== */

/* =====================================================================
   The Stage (Floating Modal on Desktop, Fullscreen on Mobile)
   ===================================================================== */

direct-message-modules {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  position: fixed;
  z-index: 100003;

  background-color: var(--dm-bg, #ffffff);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--border-subtle, #edebe6);
  border-radius: 16px;
  overflow: hidden;
  overscroll-behavior: contain;


  width: calc(100% - 32px);              
  max-width: 720px;
  height: min(840px, calc(100dvh - 48px));

  inset: 0;                        
  margin: auto;                      
}

/* Global Show State (When either Inbox or Thread is active) */
direct-message-modules.show-chats,
direct-message-modules.show-messages {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: stageIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Exit Animations (Renamed to match JS expectation) */
direct-message-modules.hide-chats {
  animation: slideOutRight 0.25s ease-in forwards;
}

direct-message-modules.hide-messages dm-messages-module {
  animation: slideOutRight 0.25s ease-in forwards;
}

/* =====================================================================
   Actor Modules (Inbox vs. Thread)
   ===================================================================== */

/* --- INBOX (CHATS LIST) --- */
dm-chats-module {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;                      /* Let wallpaper show through */
  opacity: 1;
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

/* Inbox Active State */
direct-message-modules.show-chats dm-chats-module {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

/* Thread active: softly dim and push back the inbox */
direct-message-modules.show-messages dm-chats-module {
  opacity: 0; 
  transform: scale(0.96);
  pointer-events: none;
}

/* --- THREAD (ACTIVE CONVERSATION) --- */
dm-messages-module {
  position: absolute;  
  inset: 0;
  display: flex;
  flex-direction: column;    
  z-index: 20;
  background: var(--dm-bg, #ffffff); 
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

#dm-chats-component.dm-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 720px;                          
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

direct-message-modules.show-messages dm-messages-module {
  opacity: 1;
  transform: translateX(0);
}

/* =====================================================================
   Backdrop Overlay
   ===================================================================== */

direct-message-modules-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 12, 16, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100002;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

direct-message-modules-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* =====================================================================
   Keyframe Animations
   ===================================================================== */

@keyframes stageIn {
  from {
    transform: translateY(16px) scale(0.985);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* =====================================================================
   Responsive: Mobile Breakpoints
   ===================================================================== */

@media (max-width: 768px) {
  direct-message-modules {
    width: 100%;
    height: 100dvh;
    top: 0;
    border-radius: 0;
    box-shadow: none;
  }

  @keyframes stageIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
}