/* 
 * Custom CSS for wider meta agent chat layout
 * Matches the max-width from base.html header (80rem)
 */

/* Enhance chat container width */
.agent-of-agents-page {
  max-width: 80rem !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Ensure chat header matches width */
.agent-of-agents-page .chat-header {
  max-width: 80rem !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

/* Make messages container wider */
.agent-of-agents-page #messages-container {
  max-width: 80rem !important;
  width: 100% !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Ensure input container matches width */
.agent-of-agents-page .chat-input-container {
  max-width: 80rem !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Enhance input card width */
.agent-of-agents-page .input-card {
  max-width: 80rem !important;
  width: calc(100% - 3rem) !important;
  margin: 0 auto !important;
}

/* Adjust message widths for better readability in wider layout */
.agent-of-agents-page .message {
  max-width: 85% !important;
}

/* Adjust message content for better readability */
.agent-of-agents-page .message-content {
  max-width: 100% !important;
}

/* Special styles for user messages */
.agent-of-agents-page .user-message {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Fix message text alignment */
.agent-of-agents-page .message-text {
  text-align: left !important;
  padding: 12px 16px !important;
}

/* Dark mode adjustments */
body.dark-mode .agent-of-agents-page {
  background: var(--color-surface) !important;
}

body.dark-mode .agent-of-agents-page .chat-header {
  background: var(--color-surface-raised) !important;
}

/* Responsive adjustments */
@media (min-width: 1280px) {
  .agent-of-agents-page .message {
    max-width: 75% !important;
  }
}

@media (max-width: 768px) {
  .agent-of-agents-page .message {
    max-width: 90% !important;
  }
  
  .agent-of-agents-page .input-card {
    width: calc(100% - 2rem) !important;
  }
}