/* layout.css - Layout Styles */

#smartfence-embed-root .app-main { 
  flex: 1 1 0%; /* Use 0% basis for proper space distribution */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0; /* Ensure flexbox shrinking works */
  height: 100%; /* Explicitly fill parent height */
}

#smartfence-embed-root .chat-interface { 
  flex: 1 1 0%; /* Use 0% basis for proper space distribution */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0; /* Ensure flexbox shrinking works */
  height: 100%; /* Fill available height */
}

#smartfence-embed-root .chat-container { 
  flex: 1 1 0%; /* Use 0% basis for proper space distribution */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  height: 100%;
  min-height: 0; /* Ensure flexbox shrinking works */
}

/* Desktop-specific: Ensure containers stretch to full viewport */
@media (min-width: 769px) {
  #smartfence-embed-root .app-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  
  #smartfence-embed-root .app-header {
    flex-shrink: 0 !important;
  }
  
  #smartfence-embed-root .app-main {
    flex: 1 1 0% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  #smartfence-embed-root .chat-interface {
    flex: 1 1 0% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  #smartfence-embed-root .chat-container {
    flex: 1 1 0% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  #smartfence-embed-root .chat-messages {
    flex: 1 1 0% !important;
    height: auto !important;
    max-height: none !important; /* CRITICAL: Remove the 600px max-height */
    overflow-y: auto !important;
    min-height: 0 !important;
  }
  
  #smartfence-embed-root .input-area {
    flex-shrink: 0 !important;
  }
  
  #smartfence-embed-root .quick-actions {
    flex-shrink: 0 !important;
  }
}

/* NEW: Mobile-safe header */
#smartfence-embed-root .app-header { 
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

/* NEW: Mobile-safe input area */
#smartfence-embed-root .input-area { 
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  overflow: visible; 
}