/* Fixes for desktop resizing issues in My Social Voice app */

/* Ensure main content expands to fill available space */
.main-content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Fix content container to expand properly on desktop */
.content-bot-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Adjust chat area to take full width of its container */
.chat-area {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Fix chat input to expand with parent container */
.chat-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Make sure chat text input expands properly */
.chat-text-input {
  width: calc(100% - 70px) !important; /* Adjust width to account for buttons */
  box-sizing: border-box;
}

/* Add specific overrides for desktop screens */
@media (min-width: 769px) {
  .main-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-right: 80px !important; /* Allow space for floating nav */
  }
  
  /* Remove any fixed width constraints */
  .content-bot-container {
    max-width: none;
    width: 100%;
    flex: 1;
  }
  
  /* Ensure sidebar doesn't affect container sizing */
  body.app-layout {
    --sidebar-width: 250px;
    display: flex;
  }
  
  /* Make sure message options scale properly */
  .message-options {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 800px; /* Prevent excessive stretching */
  }
  
  /* Prevent the input from being hidden behind floating nav */
  .input-container {
    max-width: calc(100% - 20px);
    position: relative;
  }
  
  /* Fix button alignment in input */
  .input-actions {
    right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
}