/**
 * Chat Page Layout
 * Flexbox-based layout for the chat interface
 * 
 * PURE LAYOUT STRUCTURE - No component-specific styling
 * Component styles are in their respective component CSS files
 * 
 * Dependencies: chat-tokens.css
 */

/* ============================================
   BASE LAYOUT - Prevent body scroll
   ============================================ */

html,
body.chat-page {
  overflow: hidden;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* ============================================
   PAGE CONTAINER - Vertical: Header | Body | Footer
   ============================================ */

.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--clr-bg);
}

/* ============================================
   HEADER - Override fixed positioning for chat layout
   ============================================ */

.chat-page .header-with-centered-logo {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex-shrink: 0;
}

/* ============================================
   BODY CONTAINER - Horizontal: Sidebar | Conversation
   ============================================ */

.body-container {
  flex: 1;
  display: flex;
  min-height: 0; /* Critical for flex scrolling */
  overflow: hidden;
}

/* ============================================
   SIDEBAR CONTAINER
   ============================================ */

.sidebar-container {
  width: var(--chat-layout-sidebar-width);
  flex: 0 0 var(--chat-layout-sidebar-width);
}

/* ============================================
   CONVERSATION CONTAINER - Vertical: Progression | Messages
   ============================================ */

.conversation-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Critical for flex scrolling */
  overflow: hidden;
}

/* ============================================
   PROGRESS CONTAINER
   ============================================ */

.progress-container {
  flex-shrink: 0;
}

/* ============================================
   MESSAGES AREA - Flex: 1, scrollable
   ============================================ */

.messages-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ============================================
   FOOTER CONTAINER
   ============================================ */

.footer-container {
  flex-shrink: 0;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 768px) {
  /* Sidebar becomes overlay on mobile */
  .sidebar-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: var(--chat-z-sidebar);
    transform: translateX(-100%);
    transition: transform var(--chat-transition-slow);
  }

  .page-container.sidebar-open .sidebar-container {
    transform: translateX(0);
  }

  /* Show sidebar toggle on mobile */
  .chat-page .header-with-centered-logo .sidebar-toggle {
    display: flex;
  }

  /* Show close button in mobile sidebar */
  .sidebar-history #sidebarToggleClose {
    display: block;
  }
}