/* Reset default margin and padding, set height and hide overflow for body and html */
body, html {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  height: 100%; /* Full viewport height */
  overflow: hidden; /* Prevent scrollbars */
}

/* Main container for the entire chat app layout */
.main-wrapper {
  display: flex; /* Flex layout for sidebar and main chat */
  width: 100%; /* Full width */
  height: 100vh; /* Full viewport height */
  overflow: hidden; /* Prevent scrollbars */
}

/* Sidebar container */
.sidebar {
  width: 280px; /* Fixed width sidebar */
  background-color: #1f1f2e; /* Dark sidebar background */
  padding: 20px; /* Padding inside sidebar */
  display: flex; /* Flex layout */
  flex-direction: column; /* Stack items vertically */
  border-right: 1px solid #333; /* Border on the right */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4); /* Shadow for depth */
  transition: transform 0.3s ease; /* Smooth transition for collapse */
  flex-shrink: 0; /* Prevent shrinking */
  overflow-y: auto; /* Vertical scroll if content overflows */
}

/* Sidebar collapsed state - hidden by translating left */
.sidebar.collapsed {
  transform: translateX(-100%); /* Hide sidebar */
}

/* Sidebar header container */
.sidebar-header {
  display: flex; /* Flex layout */
  justify-content: space-between; /* Space between title and button */
  align-items: center; /* Vertically center items */
}

/* Sidebar header title */
.sidebar-header h2 {
  margin: 0; /* Remove default margin */
  color: #ffffff; /* White text */
  font-size: 1rem; /* Font size */
}

/* Toggle button for menu (hidden on desktop) */
.menu-toggle {
  background: none; /* No background */
  border: none; /* No border */
  color: white; /* White text */
  font-size: 1.5rem; /* Bigger font size */
  cursor: pointer; /* Pointer cursor */
  display: none; /* Hidden by default */
}

/* Button for creating a new chat */
#new-chat {
  margin-top: 15px; /* Margin above button */
  padding: 10px; /* Padding inside button */
  background-color: #3d7eff; /* Bright blue background */
  color: white; /* White text */
  border: none; /* No border */
  border-radius: 6px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor */
  font-size: 1rem; /* Font size */
  transition: background-color 0.3s ease; /* Smooth color change */
}

/* Hover effect for new chat button */
#new-chat:hover {
  background-color: #2d5fce; /* Darker blue on hover */
}

/* Container for chat history (list of chats) */
.chat-history {
  margin-top: 20px; /* Margin above */
  flex-grow: 1; /* Take remaining space */
  overflow-y: auto; /* Scroll if overflow */
}

/* Individual chat item in sidebar */
.chat-item {
  background: #2d2d40; /* Dark background */
  padding: 10px; /* Padding inside item */
  margin-bottom: 10px; /* Space below item */
  border-radius: 5px; /* Rounded corners */
  color: #ccc; /* Light text color */
  cursor: pointer; /* Pointer cursor */
  display: flex; /* Flex layout */
  justify-content: space-between; /* Space between text and delete button */
  align-items: center; /* Vertically center content */
  transition: background-color 0.3s; /* Smooth color transition */
}

/* Hover effect for chat items */
.chat-item:hover {
  background-color: #44445e; /* Slightly lighter background */
}

/* Text inside chat item with ellipsis for overflow */
.chat-item span {
  flex-grow: 1; /* Take available space */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Show ellipsis for long text */
  white-space: nowrap; /* Prevent wrapping */
}

/* Delete button inside chat item */
.delete-btn {
  background: #e55353; /* Red background */
  border: none; /* No border */
  color: white; /* White text */
  padding: 4px 8px; /* Small padding */
  border-radius: 5px; /* Rounded corners */
  font-size: 12px; /* Small font */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s; /* Smooth color change */
}

/* Hover effect for delete button */
.delete-btn:hover {
  background-color: #c94242; /* Darker red */
}

/* Main chat container */
.chat-container {
  flex-grow: 1; /* Take remaining space next to sidebar */
  display: flex; /* Flex layout */
  flex-direction: column; /* Vertical stacking */
  background-color: #1e1e2f; /* Dark background */
  position: relative; /* For positioning children */
  height: 100vh; /* Full viewport height */
  overflow: hidden; /* Prevent scrollbars */
}

/* Header of chat area */
.chat-header {
  padding: 15px; /* Padding inside header */
  background: #28293d; /* Dark header background */
  display: flex; /* Flex layout */
  align-items: center; /* Vertically center items */
  gap: 10px; /* Gap between items */
  color: white; /* White text */
}

/* Chat header title */
.chat-header h1 {
  font-size: 1.2rem; /* Font size */
  margin: 0; /* Remove default margin */
}

/* Container for chat messages */
.chat-messages {
  flex: 1; /* Take remaining space */
  overflow-y: auto; /* Scroll vertically */
  padding: 1rem; /* Padding inside messages */
  margin-bottom: 70px; /* Space at bottom for input bar */
}

/* Fixed container for chat input area at bottom */
.chat-input-container {
  position: fixed; /* Fixed at viewport bottom */
  bottom: 0; /* Bottom edge */
  left: 320px; /* Start after sidebar width */
  right: 0; /* Stretch to right edge */
  display: flex; /* Flex layout */
  padding: 9px; /* Padding inside */
  background-color: #28293d; /* Dark background */
  gap: 3px; /* Gap between input and buttons */
  z-index: 1000; /* Above other elements */
  padding-right: 10px;
  align-items: center; /* Vertically center the items */
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
  .chat-input-container {
    left: 0; /* Full width on small screens */
  }
  .main-wrapper {
    flex-direction: column; /* Stack sidebar and chat vertically */
  }
  .sidebar {
    position: absolute; /* Overlay sidebar */
    top: 0; /* Top edge */
    left: 0; /* Left edge */
    height: 100vh; /* Full height */
    transform: translateX(-100%); /* Hidden by default */
    z-index: 1000; /* Above content */
  }
  .sidebar.show {
    transform: translateX(0); /* Show sidebar */
  }
  .menu-toggle {
    display: block; /* Show toggle button */
  }
  .chat-header h1 {
    font-size: 1rem; /* Smaller font */
  }
  .chat-container {
    height: 100vh; /* Full height */
  }
  .chat-input-container{
    width: 100%;
  }
  #send-button {
    padding: 8px 10px; 
    font-size: 1rem;   
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  #user-input{
    width: 60px;
  }

}

/* Message bubble container */
.message {
  display: flex; /* Flex layout */
  margin-bottom: 15px; /* Space below message */
  gap: 10px; /* Gap between image and content */
}

/* Message text content */
.message-content {
  padding: 12px 16px; /* Padding inside bubble */
  border-radius: 8px; /* Rounded corners */
  max-width: 70%; /* Max width */
  font-size: 0.95rem; /* Font size */
  line-height: 1.4; /* Line height */
}

/* User message alignment */
.user-message {
  flex-direction: row-reverse; /* User messages on right */
}

/* User message bubble style */
.user-message .message-content {
  background-color: #3d7eff; /* Blue background */
  color: white; /* White text */
}

/* Bot message bubble style */
.bot-message .message-content {
  background-color: #2f3241; /* Dark background */
  color: #dcdcdc; /* Light text */
}

/* Profile image styling */
.profile-image {
  width: 32px; /* Width */
  height: 32px; /* Height */
  border-radius: 50%; /* Circular */
  object-fit: cover; /* Cover image */
}

/* Input field style */
#user-input {
  /* flex-grow: ; Expand to fill space */
  padding: 10px; /* Padding inside input */
  border: none; /* Remove border */
  border-radius: 6px; /* Rounded corners */
  background-color: #2f3045; /* Dark background */
  color: #e0e0e0; /* Light text */
  font-size: 1rem; /* Font size */
  outline: none; /* Remove focus outline */
  width: 100%;
  flex-grow: 1; /* Allow the input to take up remaining space */
  margin-right: 5px; /* Add a little space between the input and the buttons */
}

/* Default desktop view */
#send-button {
  background-color: #3d7eff;
  border: none;
  padding: 10px 12px;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-right: 5px;
}

#mic-btn {
  background: #3d7eff; /* background */
  border: none; /* No border */
  cursor: pointer; /* Pointer cursor */
  font-size: 1.2rem; /* Font size */
  /* margin-left: 7px; Left margin */
  transition: color 0.3s; /* Smooth color change */
}


#speak-btn {
  background: #3d7eff; /* background */
  border: none; /* No border */
  cursor: pointer; /* Pointer cursor */
  font-size: 1.2rem; /* Font size */
  padding: 8px 8px;
  transition: color 0.3s; /* Smooth color change */
}

/* Disabled state for send button */
#send-button:disabled {
  background-color: #2a4c96; /* Dark blue */
  cursor: not-allowed; /* Not clickable */
}

/* Speaker button styling */
.speaker-btn {
  background: transparent; /* Transparent background */
  border: none; /* No border */
  cursor: pointer; /* Pointer cursor */
  font-size: 1.2rem; /* Font size */
  margin-left: 10px; /* Left margin */
  color: #3d7eff; /* Blue color */
  transition: color 0.3s; /* Smooth color change */
}

.btn {
  display: flex; /* Use flexbox for the button container */
  gap: 5px; /* Add space between the speak and mic button */
  margin-right: 5px; /* Add a little space between the buttons and the send button */
}

/* Language note container */
#language-note {
  padding: 8px 16px; /* Padding */
  margin: 10px 15px; /* Margin */
  background-color: #ffefc0; /* Light yellow */
  border-left: 5px solid #f4b400; /* Yellow left border */
  border-radius: 6px; /* Rounded corners */
  color: #333; /* Dark text */
  font-size: 0.95rem; /* Font size */
  font-weight: 500; /* Medium weight */
  display: flex; /* Flex layout */
  align-items: center; /* Vertically center */
  gap: 8px; /* Gap between items */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Close button styling */
#close-btn {
  position: absolute; /* Absolute positioning */
  top: 10px; /* From top */
  right: 10px; /* From right */
  font-size: 24px; /* Font size */
  background: transparent; /* Transparent background */
  border: none; /* No border */
  cursor: pointer; /* Pointer cursor */
  color: white; /* White color */
  z-index: 1000; /* On top */
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
  width: 8px; /* Scrollbar width */
}

::-webkit-scrollbar-track {
  background: transparent; /* Transparent track */
}

::-webkit-scrollbar-thumb {
  background: #5a6370; /* Scrollbar thumb color */
  border-radius: 4px; /* Rounded thumb */
}

::-webkit-scrollbar-thumb:hover {
  background: #7a8496; /* Darker thumb on hover */
}