/* Custom updates for mobile responsiveness and UI optimization */

/* Maximizing the chat interface space by optimizing layout */
.main-content {
  padding: 0 !important;
  height: calc(100vh - 50px); /* Reduced height to make room for header area */
  display: flex;
  position: relative;
  margin-top: 50px; /* Add margin to make room for header area */
}

/* Header area for mobile menu toggle */
.header-area {
  height: 50px; /* Small header space */
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 900;
  display: none; /* Hidden by default, shown only in mobile view */
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Ensure the content container uses the full height available */
.content-bot-container {
  height: calc(100vh - 50px); /* Adjusted for header area */
  margin: 0;
  padding: 0;
  border-radius: 0; /* Remove border radius for full-screen experience */
  box-shadow: none; /* Remove box shadow for full-screen experience */
}

/* Optimize chat area for better space usage */
.chat-area {
  padding: 12px;
  overflow-y: auto;
  padding-bottom: 20px; /* Add extra padding at the bottom for better spacing from input */
}

/* Chat input optimization */
.chat-input {
  padding: 10px;
  background-color: white;
  border-top: 1px solid #eaeaea;
  position: sticky;
  bottom: 0;
}

.input-container {
  display: flex;
  align-items: center;
  padding: 0 5px;
}

.chat-text-input {
  flex: 1;
  padding: 12px 15px;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  outline: none;
  transition: border-color 0.2s;
}

.input-actions {
  display: flex;
  gap: 5px; /* Reduce gap between buttons */
}

.input-action-btn {
  width: 38px; /* Slightly smaller buttons */
  height: 38px;
}

/* Floating navigation optimization */
.floating-nav {
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 5px;
  z-index: 1000;
  flex-direction: column !important;
}

.nav-button {
  width: 40px; /* Make navigation buttons slightly smaller */
  height: 40px;
  margin: 4px 0;
}

/* Mobile optimization */
@media (max-width: 768px) {
  /* Ensure header is only visible on mobile */
  .header-area {
    display: flex;
  }
  
  /* Adjust content container height for header */
  .content-bot-container {
    height: calc(100vh - 50px);
    width: 100%;
    margin: 0;
    margin-top: 50px; /* Make room for header */
  }
  
  /* Adjust main content area */
  .main-content {
    margin-top: 50px; /* Make room for header */
    height: calc(100vh - 50px);
  }
  
  .chat-area {
    padding: 10px;
  }
  
  /* Make sure the sidebar doesn't affect the content area when hidden */
  body.app-layout {
    --sidebar-width: 0px;
  }
  
  body.app-layout.sidebar-active {
    --sidebar-width: 250px;
  }
  
  /* When sidebar is active, hide header area */
  .sidebar.active ~ .header-area {
    z-index: 50; /* Lower z-index than sidebar */
  }
  
  /* First chat message should not be hidden under header */
  .message:first-child {
    margin-top: 5px;
  }
  
  /* Ensure mobile menu toggle is visible */
  .mobile-menu-toggle {
    z-index: 1100;
  }
}