:root {
    --primary-color: #8a8a8b; /* ChatGPT green */
    --primary-light: #18cd9f;
    --accent-color: #6a0dad; /* A subtle purple/blue for some accents */
    --bg-color: #ffffff; /* Light gray for body background */
    --text-color: #303030; /* Darker text */
    --text-light: #606060;
    --sidebar-bg: #f9f9f9; /* Dark background for sidebar */
    --sidebar-text: #413229;
    --chat-bg: #fffefe; /* White chat background */
    --user-message-bg: #f5f4f5; /* Lighter blue for user messages, or a very light gray if preferred */
    --bot-message-bg: transparent;
    /* Very light gray for bot messages */
    --code-bg: #2d2d2d; /* Dark code blocks */
    --code-text-color: #f8f8f2; /* Light text for code */
    --border-radius: 10px; /* Slightly more rounded corners for main elements */
    --border-radius-sm: 6px; /* Smaller radius for buttons/inputs */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Softer shadows */
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --web-search: rgba(0, 0, 0, 0.2);
    --transition: all 0.2s ease-in-out; /* Smooth transitions */
    --model-text-color: black;
    --text-input-bg:#ffffff
  }
  
  /* Dark Mode Variables */
  .dark-mode {
    --model-text-color: white;
    --primary-color: #929292;
    --primary-light: #52a167;
    --accent-color: #6a0dad; /* A deeper, more subtle purple */
    --bg-color: #212121; /* Very dark background with a hint of gray */
    --text-color: #ffffff; /* Soft, readable gray for primary text */
    --text-light: #7c7c7c; /* Subtle gray for secondary text */
    --sidebar-bg: #1a1a1a; /* Distinct from main background */
    --sidebar-text: #e0e0e0;
    --chat-bg: #212121;
    --user-message-bg: #303030;
    --text-input-bg:#303030;
    --bot-message-bg: transparent;
    --code-bg: #1e1e1e;
    --code-text-color: #f0f0f0;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Stronger shadow for depth */
    --shadow-md: 0 6px 10px rgba(0, 0, 0, 0.6);
    --web-search: rgba(255, 255, 255, 0.439);
  }
  
  /* Base Styles */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* Mobile-specific fixes */
  @media (max-width: 768px) {
    .main {
      height: 100vh;
      height: -webkit-fill-available;
    }
  
    #chatbox {
      padding-bottom: 35px; /* Extra space at bottom */
    }
  
    .chat-message {
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    /* Ensure proper scrolling on mobile */
    #chatbox {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch; /* Momentum scrolling */
      scroll-behavior: smooth;
    }
  
    /* Fix for iOS Safari */
    @supports (-webkit-touch-callout: none) {
      #chatbox {
        height: -webkit-fill-available;
      }
    }
  }
  
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: var(--transition);
    display: flex;
    min-height: 100vh; /* Ensures body takes full viewport height */
    overflow: hidden; /* Prevents body scroll when sidebar is fixed */
  }
  
  /* Sidebar Styles */
  .sidebar {
    width: 260px; /* Slightly narrower like ChatGPT */
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 16px; /* Reduced padding slightly */
    display: flex;
    flex-direction: column;
    height: 100vh;
    flex-shrink: 0;
    transition: width 0.3s ease, padding 0.3s ease, transform 0.3s ease;
    overflow-x: hidden;
    position: relative;
    z-index: 100;
    border-right: 1px solid rgba(48, 48, 48, 0.099); /* Subtle border */
  }
  .dark-mode .sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .sidebar.collapsed {
    width: 70px; /* Collapsed width */
    padding: 16px 10px; /* Adjust padding for collapsed state */
    min-width: 70px; /* Ensures it collapses to this width */
    background-color: #ffffff;
    border-right: 1px solid rgba(48, 48, 48, 0.099);
  }
  .dark-mode .sidebar.sidebar.collapsed {
    background-color: #212121;
    border-right: 1px solid #2c2c2c;
  }
  
  /* Main Content Styles */
  .main {
    flex: 1; /* Takes remaining space */
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ensure main also takes full viewport height */
    margin-left: 260px; /* Default margin for desktop, equals sidebar width */
    transition: margin-left 0.5s ease;
    position: relative; /* For z-index context */
    
  }
  
  .main.full-width {
    /* Applied when sidebar is collapsed on desktop */
    margin-left: 50px; /* Adjusted margin when sidebar is collapsed */
  }
  
  .main.full-screen {
    /* For true full screen chat (sidebar hidden) */
    margin-left: 0;
    width: 100%;
  }
  
  /* Floating sidebar toggle button */
  #showSidebarBtn {
    display: none;
    position: fixed;
    top: -10px;
    left: 15px;
    z-index: 100;
    background: transparent; /* Use transparent */
    color: black; /* Match sidebar text color */
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: ew-resize;
    box-shadow: none; /* Remove shadow for a clean flat look */
    transition: var(--transition);
    align-items: center;
    justify-content: center;
    margin-top: 120px;
  }
  .dark-mode #showSidebarBtn {
    color: white;
  }
  .dark-mode .sidebar-show-btn {
    color: white;
  }
  
  /* Optional hover effect */
  .dark-mode #showSidebarBtn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
  }
  #showSidebarBtn:hover {
    background: #dee2ec;
    transform: scale(1.05);
  }
  
  /* Sidebar Toggle button inside the sidebar header */
  .sidebar-toggle {
    background: none;
    border: none;
    color: var(--sidebar-text);
    font-size: 1.1rem; /* Slightly smaller for internal toggle */
    cursor: ew-resize;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: var(--transition);
  }
  
  .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .sidebar.collapsed .sidebar-toggle {
    transform: rotate(180deg); /* Rotate for collapsed state */
  }
  .dark-mode .sidebar.collapsed .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.5);
  }
  
  /* Responsive Adjustments */
  @media (min-width: 769px) {
    .main {
      margin-left: 10px; /* Default margin for desktop */
    }
    .sidebar.collapsed + .main {
      /* When sidebar is collapsed, main takes full width */
      margin-left: 70px; /* Adjusted margin when sidebar is collapsed */
    }
    /* #showSidebarBtn is now used on desktop too when sidebar is fully hidden */
  }
  
  @media (max-width: 768px) {
    /* On mobile, sidebar is fixed and slides out */
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      height: 100%;
      transform: translateX(-100%); /* Hidden off-screen */
      width: 260px; /* Fixed width when visible */
      z-index: 100; /* Ensure it's above main content */
      box-shadow: var(--shadow-md);
    }
    .sidebar.visible {
      /* Class to show sidebar on mobile */
      transform: translateX(0);
    }
    .main {
      margin-left: 0; /* Main content always full width on mobile */
      width: 100%;
    }
    #showSidebarBtn {
      display: flex !important;
      position: fixed;
      top: -110px; /* Show floating button on mobile */
      left: 1%;
    }
    .sidebar-toggle {
      display: none;
      visibility: hidden;
    }
  
    /* Hide most sidebar content when collapsed on desktop, or when mobile */
    .sidebar.collapsed .sidebar-header span,
    .sidebar.collapsed .new-chat-btn span,
    .sidebar.collapsed #chat-history-list,
    .sidebar.collapsed .sidebar-footer > *:not(.sidebar-toggle) {
      /* Exclude toggle for specific hide */
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.1s ease;
    }
    /* Show content when not collapsed on desktop, or when mobile and visible */
    .sidebar:not(.collapsed) .sidebar-header span,
    .sidebar:not(.collapsed) .new-chat-btn span,
    .sidebar:not(.collapsed) #chat-history-list,
    .sidebar:not(.collapsed) .sidebar-footer > *:not(.sidebar-toggle) {
      opacity: 1;
      pointer-events: all;
    }
  }
  sidebar.collapsed #chat-history-list {
    display: none;
  }
  
  /* Sidebar Content */
  .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    /* border-bottom: 1px solid rgba(48, 48, 48, 0.099); */
  }
  
  /* Logo Styling */
  .sidebar-logo {
    font-size: 1.4rem;
    font-weight: 700;
    color: #413229;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: all 0.3s ease;
  }
  .dark-mode .sidebar-logo {
    color: white;
  }
  .sidebar-logo span {
    position: relative;
    left: 50%;
    font-weight: bolder;
  }
  
  /* ✅ Hide image by default (sidebar open) */
  .sidebar-logo img {
    display: none;
  }
  
  /* ✅ Show only when sidebar is collapsed */
  .sidebar.collapsed .sidebar-logo img {
    display: inline-block;
    height: 60px;
    width: 60px;
    /* background-size: cover; */
    background-repeat: no-repeat;
    padding: 8px;
    /* border-radius: 24px;  */
    transition: all 0.3s ease;
  }
  
  /* Hover effect for a modern feel */
  /* .sidebar.collapsed .sidebar-logo img:hover {
  cursor: pointer;
  
  } */
  
  /* Hide text only in collapsed mode */
  .sidebar.collapsed .sidebar-logo span {
    display: none;
  }
  .new-chat-btn {
    background: #fefeff; /* No background color */
    color: #413229;
    border: none;
    padding: 12px;
    border-radius: 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
    box-shadow: none; /* Optional: remove shadow if you want clean transparency */
  }
  .dark-mode .new-chat-btn {
    color: white;
    background: #212327;
  }
  .dark-mode .new-chat-btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .new-chat-btn:hover {
    background: #dee2ec; /* Or transparent if you don’t want any hover bg */
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  
  .sidebar.collapsed .new-chat-btn {
    padding: 25px;
    margin-top: 40px;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 10;
    background: none;
  
    /* padding-bottom: 10px; */
  }
  .sidebar.collapsed .new-chat-btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .sidebar.collapsed .new-chat-btn span {
    display: none;
  }
  
  #chat-history-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) rgba(255, 255, 255, 0.1);
  }
  
  #chat-history-list::-webkit-scrollbar {
    width: 6px;
  }
  
  #chat-history-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
  }
  
  #chat-history-list::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
  }
  
  .chat-link {
    padding: 10px 12px;
    border-radius: 24px;
    margin-bottom: 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--transition);
    color: var(--sidebar-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    position: relative; /* For positioning action buttons */
  }
  
  .chat-link:hover {
    background: rgba(255, 255, 255, 1);
  }
  .dark-mode .chat-link:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .chat-link.active {
    background: rgba(
      255,
      255,
      255,
      1
    ); /* More subtle active state for history */
    font-weight: 500;
  }
  .dark-mode .chat-link.active {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .sidebar.collapsed .chat-link {
    width: 50px; /* Square for icons */
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 1.1rem;
    border-radius: 50%; /* Make them circular when collapsed */
    display: none;
  }
  
  .sidebar.collapsed .chat-link span {
    display: none;
  }
  
  /* Chat Link Actions (Rename/Delete) */
  .chat-link-actions {
    display: flex;
    gap: 5px;
    margin-left: auto; /* Push to the right */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; /* Initially non-interactive */
  }
  
  .chat-link:hover .chat-link-actions,
  .chat-link.active .chat-link-actions {
    /* Show actions on hover or when active */
    opacity: 1;
    pointer-events: all;
  }
  
  .chat-link-actions button {
    background: none;
    border: none;
    color: var(--sidebar-text);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .chat-link-actions button:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .chat-link-actions button.delete-chat-btn {
    color: #ff6b6b; /* Red for delete */
  }
  .chat-link-actions button.delete-chat-btn:hover {
    background: rgba(255, 107, 107, 0.3);
  }
  
  .sidebar.collapsed .chat-link-actions {
    display: none; /* Hide actions when sidebar is collapsed */
  }
  
  .sidebar-footer {
    padding-top: 15px;
    border-top: 1px solid rgba(48, 48, 48, 0.099);
  }
  .dark-mode .sidebar-footer {
    padding-top: 15px;
    border-top: 1px solid rgba(48, 48, 48, 1);
  }
  /* .dark-mode .sidebar-footer{
    border-top: 12px solid rgba(255, 255, 255, 0.896);
  } */
  
  .sidebar-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    background: none;
    border: none;
    color: var(--sidebar-text);
    border-radius: 24px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
  }
  
  .dark-mode .sidebar-btn:hover {
    background: #212327;
  }
  .sidebar-btn:hover {
    background: #dee2ec;
  }
  
  .sidebar-btn i {
    margin-right: 5px;
    width: 20px; /* Fixed width for icons */
    text-align: center;
    font-size: 1rem;
    /* top: -2rem; */
  }
  
  .sidebar.collapsed .sidebar-btn {
    justify-content: center;
    padding: 12px 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  
  .dark-mode .sidebar.collapsed .sidebar-btn:hover {
    background: #212327;
  }
  
  .sidebar.collapsed .sidebar-btn i {
    margin-right: 0;
    font-size: 1rem;
  }
  
  .sidebar.collapsed .sidebar-btn span {
    /* NEW: Hide text for sidebar buttons when collapsed */
    display: none;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-sm);
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .user-info i {
    font-size: 1.2rem;
    color: var(--accent-color); /* Use accent color for user icon */
  }
  
  .user-email {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .sidebar.collapsed .user-info {
    justify-content: center;
    padding: 10px 0;
    width: 50px;
    height: 50px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
  }
  
  .sidebar.collapsed .user-info i {
    font-size: 1.4rem;
    margin-right: 0;
  }
  
  .sidebar.collapsed .user-info .user-email {
    display: none;
  }
  
  /* Top Bar Styles (Main content header) */
  .top-bar {
    padding: 12px 20px;
    background-color: #fffefe;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    z-index: 10;
    height: 3rem;
    /* visibility: hidden; */
    border-bottom: 1.5px solid #efefef;
    border-bottom-color: #f4f5f4;
    font-family: "Satoshi";
  }
  .dark-mode .top-bar {
    border: none;
    background-color: #212121;
  }
  
  @media (max-width: 768px) {
    .top-bar {
      /* visibility: visible; */
      border: none;
    }
    .top-bar h2 {
      position: fixed;
      left: 40%;
    }
  }
  
  .top-bar-title {
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
  }
  
  .top-bar-title i {
    color: black; /* Accent color for the logo in top bar */
    /* text-shadow: 0 0 5px rgba(24, 205, 159, 0.3); */
    height: 45px;
    width: 45px;
    right: 30px;
    top: 1px;
    position: fixed;
  }
  .top-bar-title i:hover {
    background: white;
  }
  .dark-mode .top-bar-title i {
    color: white;
    background-color: #212121;
  }
  
  .top-bar-actions {
    display: flex;
    gap: 8px;
  }
  
  .action-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.1rem;
  
    padding: 6px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
  }
  
  /* .action-btn:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  
  .dark-mode .action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
  } */
  
  /* Full screen button with tooltip */
  .full-screen-btn {
    position: relative;
  }
  
  .full-screen-btn .tooltip {
    position: absolute;
    bottom: 120%; /* Position above button */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8); /* Darker tooltip background */
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    z-index: 100;
    margin-bottom: 8px;
  }
  
  .full-screen-btn:hover .tooltip {
    opacity: 1;
  }
  
  /* Chat Container Styles */
  .chat-container {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: var(--chat-bg);
    color: #fefeff;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--chat-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Spacing between messages */
    font-size: 1rem;
    line-height: 1.6;
    scroll-behavior: smooth;
  }
  
  .chat-container::-webkit-scrollbar {
    width: 8px;
  }
  
  .chat-container::-webkit-scrollbar-track {
    background: var(--chat-bg);
    border-radius: 10px;
  }
  
  .chat-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
    border: 2px solid var(--chat-bg);
  }
  
  .chat-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-light);
  }
  
  /* Initial New Chat Screen */
  .new-chat-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    font-size: 1rem;
    text-align: center;
    padding-bottom: 100px; /* Space for the input area */
    gap: 5px;
  }
  .new-chat-placeholder .input-area {
    position: relative;
    bottom: 50%;
    margin-bottom: 1000px;
  }
  
  .new-chat-placeholder .title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
  }
  .new-chat-placeholder img {
    height: 60px;
    width: 60px;
    background-size: cover;
    background-repeat: no-repeat;
  }
  @media (max-width: 768px) {
    .new-chat-placeholder img {
      visibility: visible;
    }
  }
  .new-chat-placeholder span {
    font-size: 28px;
    font-weight: 400;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
  }
  /* Individual Chat Message Styles */
  .chat-message {
    /* Max width to keep messages readable, centered in the chat container */
    max-width: 768px; /* Standard readable width for content */
    margin-left: auto; /* For user messages */
    margin-right: auto; /* For bot messages */
    padding: 16px 20px;
    border-radius: var(--border-radius);
    word-break: break-word;
    position: relative;
    background-color: var(--bot-message-bg);
    color: var(--text-color);
    font-size: 1rem;
    transition: var(--transition);
    box-shadow: var(--shadow);
    animation: fadeIn 0.3s ease-out; /* Fade in animation for new messages */
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* User Messages */
  .user-message {
    background-color: var(--user-message-bg);
    margin-left: auto;
    margin-right: 0; /* Adjusted for responsiveness */
    padding: 14px 18px;
    border-radius: 24px; /* Rounded with unique flair */
    max-width: 70%;
    font-weight: 500;
    color: #f0f0f0;
    line-height: 1.6;
    word-break: break-word;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    animation: slideInRight 0.25s ease-out;
    backdrop-filter: blur(6px);
  }
  
  /* Bot Messages */
  .bot-message {
    background-color: var(--bot-message-bg);
    margin-right: auto;
    margin-left: 0; /* Adjusted for responsiveness */
    padding: 14px 18px;
    border-radius: 12px 12px 12px 4px;
    border: none;
    max-width: 100%;
    color: black;
    font-weight: 400;
    line-height: 1.6;
    word-break: break-word;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    animation: slideInLeft 0.25s ease-out;
    backdrop-filter: blur(6px);
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  @media (max-width: 768px) {
    .bot-message {
      max-width: 100%;
    }
  }
  /* Animations */
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(10px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-10px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .message-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-light); /* Make header text slightly lighter */
  }
  
  .message-timestamp {
    font-weight: normal;
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: auto; /* Push timestamp to the right */
    color: var(--text-light);
    display: none;
  }
  
  .message-header i {
    margin-right: 8px;
    color: var(--primary-color);
  }
  
  .message-content {
    margin-top: 10px;
    color: var(--text-color);
  }
  
  .message-content p {
    margin-bottom: 10px; /* Space between paragraphs in messages */
  }
  
  .message-content p:last-child {
    margin-bottom: 0; /* No extra margin on last paragraph */
  }
  
  /* Code Block Styles */
  /* ===== CODE BLOCK STYLE ===== */
  .code-block {
    background-color: #1e1e1e; /* Dark editor-like background */
    border-radius: 6px;
    margin: 1rem 0;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* border: 1px solid #333; */
  }
  
  .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #151515; /* Slightly darker header */
    padding: 8px 12px 0;
    color: #9cdcfe; /* VS Code-like blue text */
    font-size: 0.85rem;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    /* border-bottom: 1px solid #1a1a1a; */
  }
  
  .code-language {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .code-header-actions {
    display: flex;
    gap: 8px;
  }
  
  .code-header button {
    background: none;
    border: none;
    color: #d4d4d4;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .code-header button:hover {
    background: #2e2e2e;
    color: #ffffff;
  }
  
  .code-header button i {
    font-size: 0.8rem;
  }
  
  pre {
    background-color: #1e1e1e !important;
    padding: 0px !important;
    margin: 0 !important;
    overflow-x: auto;
    white-space: pre;
    tab-size: 0;
    line-height: 0;
  }
  
  code {
    font-family: "Cascadia Code", "Consolas", "Monaco", "Andale Mono",
      "Ubuntu Mono", monospace !important;
    font-size: 0.9rem !important;
    color: #d4d4d4 !important; /* Default text color */
  }
  
  /* ===== SYNTAX HIGHLIGHTING COLORS ===== */
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: #6a9955; /* Green */
  }
  
  .token.punctuation {
    color: #d4d4d4; /* Light gray */
  }
  
  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol,
  .token.deleted {
    color: #b5cea8; /* Light green */
  }
  
  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted {
    color: #ce9178; /* Orange */
  }
  
  .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string {
    color: #d4d4d4; /* Light gray */
  }
  
  .token.atrule,
  .token.attr-value,
  .token.keyword {
    color: #569cd6; /* Blue */
  }
  
  .token.function,
  .token.class-name {
    color: #dcdcaa; /* Yellow */
  }
  
  .token.regex,
  .token.important,
  .token.variable {
    color: #d16969; /* Red */
  }
  
  /* ================================
  ✅ Improved ChatGPT-like Input Area
  ================================== */
  
  .input-area {
    padding: 15px;
    padding-top: 0; /* Adjusted padding */
    background-color: var(--chat-bg);
    position: sticky;
    bottom: 0;
    z-index: 10;
  }
  
  .input-container {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto; /* Centered */
    align-items: flex-end;
    position: relative;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 28px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 10px 14px;
    border: 1px solid #4d5050;
    transition: box-shadow 0.2s ease;
  }
  
  .dark-mode .input-container {
    background: #313130;
    /* border: 1px solid #606060; */
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
  }
  
  .main.full-screen .input-container {
    max-width: 900px;
  }
  .main.full-width .input-container {
    max-width: 835px;
  }
  /* .main.full-width { Applied when sidebar is collapsed on desktop
    margin-right:90px;
  } */
  
  /* ✅ Improved Text Input */
  /* ✨ Responsive Growing Textarea */
  #text-input {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    padding: 10px 0px;
    text-align: start;
    z-index: 10;
  
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 1.25rem;
    resize: none; /* Prevent manual resize */
    overflow-y: auto; /* Will scroll after max-height is reached */
    min-height: 90px;
    max-height: 200px; /* Stop growing after this */
    line-height: 1.5;
    border-radius: var(--border-radius-sm);
    transition: height 0.15s ease-in-out;
    white-space: pre-wrap;
    word-wrap: break-word;
    scrollbar-width: thin;
    scrollbar-color: var(--text-color);
  }
  
  /* ✅ Custom Scrollbar Styling for WebKit (Chrome, Edge, Safari) */
  #text-input::-webkit-scrollbar {
    width: 6px;
  }
  
  #text-input::-webkit-scrollbar-track {
    background: transparent;
  }
  
  #text-input::-webkit-scrollbar-thumb {
    background-color: #10a37f;
    border-radius: 3px;
    border: 1px solid transparent;
  }
  
  #text-input::-webkit-scrollbar-thumb:hover {
    background-color: #0e8e6e;
  }
  
  #text-input:focus {
    outline: none;
  }
  
  /* Glowing Input Container */
  .input-container {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    border-radius: 28px;
  }
  
  .input-container::after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--text-input-bg);
    left: 0;
    top: 0;
    border-radius: 28px;
  }
  
  /* .input-container:focus-within {
  box-shadow: 0 0 0 2px rgba(163, 16, 16, 0.25),
  inset 0 1px 2px rgba(186, 61, 61, 0.05);
  }
  .dark-mode .input-container:focus-within {
  box-shadow: 0 0 0 2px rgba(220, 102, 23, 0.25),
  inset 0 1px 2px rgba(255, 255, 255, 0.1);
  } */
  
  /* ✅ Bigger Icon Buttons */
  .input-icon-btn,
  .submit-btn,
  .stop-btn {
    background: none;
    border: none;
    color: #2d2d2c;
  
    cursor: pointer;
    font-size: 1.3rem;
    padding: 8px;
    margin-left: 0px;
    border-radius: 50%;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; /* Larger buttons */
    height: 42px;
    flex-shrink: 0;
  }
  /* .input-icon-btn{
  background: rgba(0, 0, 0, 0.05);
  } */
  
  .input-icon-btn:hover,
  .submit-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-color);
  }
  .dark-mode .input-icon-btn:hover,
  .dark-mode .submit-btn:hover {
    background: #424343;
    /* color: var(--text-color); */
    color: white;
  }
  .dark-mode .input-icon-btn,
  .dark-mode .submit-btn,
  .dark-mode.stop-btn {
    color: #e5e5e4;
  }
  /* Active Send Button */
  .submit-btn.active {
    background-color: #000000;
    color: white;
  }
  .dark-mode .submit-btn.active {
    background-color: white;
    color: black;
  }
  .submit-btn.active:hover {
    background-color: #5d5b5b;
  }
  
  /* Stop Button (visible when AI responds) */
  .stop-btn {
    display: none;
  }
  
  /* When the AI is responding, hide the send button and show the stop button */
  .input-container.ai-responding .send-btn {
    display: none;
  }
  
  .input-container.ai-responding .stop-btn {
    display: block;
  }
  .stop-btn:hover {
    background: rgba(255, 107, 107, 0.1);
  }
  
  /* Image Preview in Input Area */
  .image-preview-container {
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    align-items: flex-start;
    position: relative;
  }
  .dark-mode .image-preview-container {
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .image-preview-container img {
    max-width: 70px;
    max-height: 70px;
    border-radius: var(--border-radius-sm);
    object-fit: contain;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow);
  }
  .dark-mode .image-preview-container img {
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .clear-image-btn {
    position: absolute;
    top: 5px;
    left: 65px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
  }
  .clear-image-btn:hover {
    background: rgba(0, 0, 0, 0.8);
  }
  
  /* Responsive adjustments for input */
  @media (max-width: 768px) {
    .input-container {
      flex-wrap: nowrap; /* Keep on one line for mobile too */
      align-items: flex-end;
      padding-right: 1px;
      padding-left: 1px;
    }
  
    #text-input {
      flex: 1;
      min-height: 88px; /* Adjusted min-height for mobile */
      padding: 0px 0px;
      font-size: 18px;
    }
  
    .submit-btn,
    .stop-btn {
      width: 38px;
      height: 38px;
      padding: 0px;
    }
  
    /* Adjust spacing when voice mode is active */
    .input-container.voice-active #voice-talk-btn {
      order: 1;
      margin-right: 4px; /* Space between mic and indicator */
      margin-left: 20px;
      padding-left: 20px; /* Remove auto-margin */
    }
  
    .input-container.voice-active .voice-indicator-area {
      flex: 1 1 auto; /* Take remaining horizontal space */
      order: 2;
    }
    /* Hide full-screen toggle button on mobile */
    .top-bar-actions .full-screen-btn {
      display: none;
    }
  }
  @media (max-width: 768px) {
    .input-icon-btn {
      width: 38px;
      height: 38px;
      padding: 4px;
    }
  }
  
  /* Loading Indicator */
  .loader {
    display: none; /* Hidden by default */
    padding: 16px;
    text-align: center;
    color: var(--text-color);
    font-size: 0.95rem;
    opacity: 0.7;
    animation: fadeIn 0.3s ease-in-out;
  }
  
  .typing-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 12px;
    height: 32px;
    animation: fadeIn 0.3s ease-in-out;
  }
  
  .typing-dot {
    width: 8px;
    height: 8px;
    background-color: var(--primary-color, #2563eb);
    border-radius: 50%;
    opacity: 0.4;
    animation: typingDotAnimation 1.4s infinite ease-in-out;
  }
  
  .typing-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .typing-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  @keyframes typingDotAnimation {
    0%,
    80%,
    100% {
      transform: scale(0.8);
      opacity: 0.4;
    }
    40% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .typing-dot:nth-child(1) {
    animation-delay: 0s;
  }
  
  .typing-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .typing-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  /* Enhanced Typing Animation */
  @keyframes typingAnimation {
    0%,
    80%,
    100% {
      transform: translateY(0);
      opacity: 0.4;
    }
    40% {
      transform: translateY(-8px);
      opacity: 1;
    } /* More pronounced bounce */
  }
  
  /* Special Message Components */
  .message-section {
    margin-bottom: 16px;
  }
  
  .section-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .section-title i {
    font-size: 0.9rem;
  }
  
  .example-item {
    background: rgba(0, 0, 0, 0.05);
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    border-left: 3px solid var(--primary-color);
    transition: var(--transition);
  }
  
  .example-item:hover {
    background: rgba(0, 0, 0, 0.08);
  }
  
  .dark-mode .example-item {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .dark-mode .example-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  
  .example-title {
    font-weight: 500;
    margin-bottom: 5px;
  }
  
  .message-with-image {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .message-images-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
  }
  
  .message-images-container img {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow);
    object-fit: contain;
  }
  
  .dark-mode .message-images-container img {
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .uploaded-image-preview {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--border-radius-sm);
    margin-top: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow);
    object-fit: contain;
  }
  
  .dark-mode .uploaded-image-preview {
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  /* Camera Options (for mobile) */
  .camera-options {
    display: none; /* Hidden by default, shown on mobile for image upload */
    position: fixed;
    bottom: 80px; /* Position above the input area */
    left: 0;
    right: 0;
    background: var(
      --sidebar-bg
    ); /* Use sidebar background for consistency */
    padding: 16px;
    border-radius: 16px 16px 0 0; /* Rounded top corners */
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    animation: slideUp 0.3s ease-out; /* Slide up animation */
  }
  
  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  .camera-option {
    padding: 14px;
    margin: 8px 0;
    background: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-sm);
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    position: relative; /* For the hidden input */
    overflow: hidden; /* Hide the overflow of the input */
  }
  .camera-option:hover {
    background: var(--primary-light);
  }
  .camera-option.cancel {
    background: #ff6b6b; /* Red for cancel */
  }
  .camera-option.cancel:hover {
    background: #e65a5a;
  }
  
  /* Make hidden file inputs fill their parent .camera-option */
  .camera-option input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Make it completely transparent */
    cursor: pointer;
    z-index: 1; /* Ensure it's clickable above the div content */
  }
  
  /* Message Actions (e.g., Summarize) */
  .message-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Align actions to the right */
    display: none;
  }
  
  .message-action-btn {
    background: rgba(
      0,
      0,
      0,
      0.05
    ); /* Light background for action buttons */
    color: var(--text-color);
    border: none;
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .dark-mode .message-action-btn {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .message-action-btn:hover {
    background: rgba(0, 0, 0, 0.1);
  }
  .dark-mode .message-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  /* Confirmation Modal Styles */
  .modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.2s ease-out;
  }
  
  .modal-content {
    background: var(--chat-bg);
    padding: 24px;
    border-radius: var(--border-radius);
    max-width: 90%;
    width: 400px;
    text-align: center;
    box-shadow: var(--shadow-md);
  }
  
  .modal-content h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--text-color);
    font-size: 1.2rem;
  }
  
  .modal-content p {
    margin-bottom: 24px;
    color: var(--text-light);
  }
  
  .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  
  .modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
    flex: 1; /* Distribute space evenly */
    max-width: 120px; /* Max width for buttons */
  }
  
  .modal-btn.confirm {
    background-color: #ff6b6b; /* Red for destructive action */
    color: white;
  }
  
  .modal-btn.confirm:hover {
    background-color: #e65a5a;
  }
  
  .modal-btn.cancel {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--text-color);
  }
  
  .dark-mode .modal-btn.cancel {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .modal-btn.cancel:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .dark-mode .modal-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  /* Full screen mode adjustments */
  body.full-screen-mode .sidebar {
    transform: translateX(-100%);
  }
  
  body.full-screen-mode .main {
    margin-left: 0;
    width: 100%;
  }
  
  body.full-screen-mode #showSidebarBtn {
    display: flex; /* Show floating button when in full screen */
  }
  
  /* Tooltip (general) */
  .tooltip-container {
    position: relative;
    display: inline-block;
  }
  
  .tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(
      0,
      0,
      0,
      0.8
    ); /* Tooltip background matches text color */
    color: white; /* Tooltip text matches background color */
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 100;
    margin-bottom: 8px;
  }
  
  .tooltip-container:hover .tooltip {
    opacity: 1;
  }
  
  /* Gradient accent for some elements (if desired) */
  .gradient-accent {
    background: linear-gradient(
      135deg,
      var(--primary-color),
      var(--primary-light)
    );
  }
  
  /* Pulse animation for new messages */
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.01);
    } /* Subtle pulse */
    100% {
      transform: scale(1);
    }
  }
  
  .pulse {
    animation: pulse 0.5s ease;
  }
  /* Style for model selection toggle */
  .model-select-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0.5rem 0;
    flex-wrap: wrap; /* Allows wrapping on small screens */
  }
  
  /* Base style: use Web Search button style for both */
  .model-option,
  #web-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 0.9rem; /* slightly smaller text */
    font-weight: 500;
    border-radius: 30px;
    border: 1px solid var(--web-search);
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    transition: transform 0.12s ease, box-shadow 0.12s ease,
    background 0.12s ease, color 0.12s ease;
    background: transparent;
    color: var(--text-color, #111);
  }
  
  /* Active DeepThink toggle */
  .model-option[data-active="true"] {
    background: var(--accent-color, #6a0dad);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    border: none;
  }
  
  /* Hover effect (desktop only) */
  @media (hover: hover) {
    /* .model-option:hover, */
    #web-search-btn:hover {
      background-color: rgba(16, 163, 127, 0.06);
      border-color: var(--primary-color);
    }
  }
  
  /* Icons */
  .model-option svg,
  #web-search-btn svg {
    width: 18px; /* slightly smaller */
    height: 18px;
    flex-shrink: 0;
    display: block;
    fill: currentColor;
  }
  
  /* Text inside buttons */
  .model-option span,
  #web-search-btn span {
    font-size: 0.9rem;
    font-weight: 500;
  }
  
  /* Mobile adjustments */
  @media (max-width: 480px) {
    .model-option,
    #web-search-btn {
      font-size: 12px;
      padding: 5px 10px;
      gap: 6px;
    }
  
    .model-option i,
    #web-search-btn svg {
      width: 16px;
      height: 16px;
    }
  
    .model-option span,
    #web-search-btn span {
      font-size: 0.8rem;
    }
  }
  .model-option[data-active="true"] i {
    color: var(--model-text-color); /* primary accent */
    animation: pulse 1.5s infinite;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.15);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0.8;
    }
  }
  
  /* NEW: Voice Mode Overlay Styles */
  #voice-mode-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #202123; /* Dark background similar to ChatGPT */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top */
    color: white;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none; /* Initially non-interactive */
  }
  
  #voice-mode-overlay.active {
    opacity: 1;
    pointer-events: auto; /* Make interactive when active */
  }
  
  #voice-mode-overlay .status-text {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #a0a0a0; /* Lighter grey for status */
  }
  
  #voice-mode-overlay .control-buttons {
    position: absolute;
    bottom: 50px; /* Position at the bottom */
    display: flex;
    gap: 20px;
  }
  
  #voice-mode-overlay .control-button {
    background-color: #404040; /* Darker grey for buttons */
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  
  #voice-mode-overlay .control-button:hover {
    background-color: #555;
    transform: translateY(-2px);
  }
  
  #voice-mode-overlay .control-button.mic-active {
    background-color: var(--primary-color); /* Green when active */
  }
  #voice-mode-overlay .control-button.mic-active:hover {
    background-color: var(--primary-light);
  }
  
  #voice-mode-overlay .control-button.screen-share-active {
    background-color: #ff6b6b; /* Red for active screen share */
  }
  #voice-mode-overlay .control-button.screen-share-active:hover {
    background-color: #e65a5a;
  }
  
  #voice-circle-canvas {
    background-color: transparent; /* Canvas background */
    border-radius: 50%; /* Make it circular */
    /* Initial size, will be dynamic */
    width: 200px;
    height: 200px;
    max-width: 80vw; /* Responsive sizing */
    max-height: 80vw;
  }
  
  /* NEW: Screen Share Preview Container */
  #screen-share-preview-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
    z-index: 999; /* Below voice mode overlay */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
  }
  
  #screen-share-preview-video {
    max-width: 90%;
    max-height: 90%;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }
  
  /* NEW: Code Update Modal */
  #codeUpdateModal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1001; /* Above other modals */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
  }
  
  #codeUpdateModal .modal-content {
    max-width: 800px;
    width: 90%;
    height: 80%;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
  
  #codeUpdateModal textarea {
    flex: 1;
    width: 100%;
    min-height: 150px;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--text-light);
    border-radius: var(--border-radius-sm);
    background-color: var(--code-bg);
    color: var(--code-text-color);
    font-family: "Fira Code", monospace;
    font-size: 0.9rem;
    resize: vertical;
  }
  
  #codeUpdateModal select {
    padding: 8px;
    margin-bottom: 15px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--text-light);
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  
  /* New CSS for ChatGPT-like talking animation (when AI is speaking) */
  #talking-animation {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    z-index: 999;
  }
  
  #talking-animation.active {
    opacity: 1;
  }
  
  .talking-animation-bars {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .talking-bar {
    width: 4px;
    height: 16px;
    background-color: #10a37f;
    border-radius: 2px;
    transform-origin: bottom;
    animation: barWave 1.2s infinite ease-in-out;
    opacity: 0.7;
  }
  
  .talking-bar:nth-child(1) {
    animation-delay: 0s;
  }
  .talking-bar:nth-child(2) {
    animation-delay: 0.1s;
  }
  .talking-bar:nth-child(3) {
    animation-delay: 0.2s;
  }
  .talking-bar:nth-child(4) {
    animation-delay: 0.3s;
  }
  .talking-bar:nth-child(5) {
    animation-delay: 0.4s;
  }
  
  @keyframes barWave {
    0%,
    100% {
      transform: scaleY(0.6);
      opacity: 0.5;
    }
    50% {
      transform: scaleY(1.4);
      opacity: 1;
    }
  }
  body {
    font-family: "Inter";
  }
  
  /* Enhanced Chat Container */
  .chat-container {
    flex: 1;
    width: 100%;
    max-width: 800px;
    padding: 20px 0;
    overflow-y: auto;
    background-color: var(--chat-bg);
    color: #fefeff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    line-height: 1.6;
    scroll-behavior: smooth;
    margin: 0 auto;
    position: relative;
    transition: all 0.3s ease;
  }
  
  /* Improved scrollbar for WebKit browsers (Chrome, Safari, Edge) */
  .chat-container::-webkit-scrollbar {
    width: 10px;
  }
  
  .chat-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
    margin: 5px 0;
  }
  
  .chat-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  
  .chat-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  
  .dark-mode .chat-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .dark-mode .chat-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  
  /* Improved scrollbar for Firefox */
  .chat-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
  
  .dark-mode .chat-container {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }
  
  /* Chat container adjustments when sidebar is open */
  .sidebar:not(.collapsed) + .main .chat-container {
    max-width: 800px;
    padding: 20px 15px;
  }
  
  /* Chat container adjustments when sidebar is collapsed */
  .sidebar.collapsed + .main .chat-container {
    max-width: 900px;
    padding: 20px 25px;
  }
  
  /* Mobile adjustments */
  @media (max-width: 768px) {
    .chat-container {
      max-width: 100%;
      padding: 15px 10px;
    }
  
    .sidebar:not(.collapsed) + .main .chat-container,
    .sidebar.collapsed + .main .chat-container {
      max-width: 100%;
      padding: 15px 10px;
    }
  }
  
  /* Enhanced message styling for better appearance */
  /* ===== CLEAN MESSAGE FORMATTING ===== */
  
  .user-message {
    background-color: var(--user-message-bg);
    margin-left: auto;
    margin-right: 12px;
    padding: 16px 20px;
    border-radius: 24px 24px 8px 24px;
    max-width: 75%;
    font-weight: 500;
    color: #111827;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: slideInRight 0.25s ease-out;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .bot-message::before {
    content: "Vexara";
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  
  .bot-message {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    margin-right: auto;
    margin-left: 12px;
    padding: 20px;
    border-radius: 24px 24px 24px 8px;
    max-width: 100%;
    color: #2d3748;
    font-weight: 400;
    line-height: 1.6;
    word-break: break-word;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    animation: slideInLeft 0.25s ease-out;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  /* Bot Message Content Formatting */
  .bot-message h1,
  .bot-message h2,
  .bot-message h3,
  .bot-message h4 {
    margin: 0 0 8px 0;
    font-weight: 600;
    line-height: 1.3;
  }
  
  .bot-message h1 {
    font-size: 1.4em;
    color: #1a365d;
    border-left: 4px solid #4299e1;
    padding-left: 12px;
    margin-bottom: 16px;
  }
  
  .bot-message h2 {
    font-size: 1.2em;
    color: #2d3748;
    margin: 20px 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .bot-message h3 {
    font-size: 1.1em;
    color: #4a5568;
    margin: 16px 0 8px 0;
  }
  
  /* Section Headers with Icons */
  .bot-message .section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 12px 0;
    font-weight: 600;
    color: #2d3748;
    font-size: 1.1em;
  }
  
  /* Organized Lists */
  .bot-message ul,
  .bot-message ol {
    margin: 12px 0;
    padding-left: 24px;
  }
  
  .bot-message li {
    margin-bottom: 8px;
    padding-left: 8px;
  }
  
  .bot-message li:last-child {
    margin-bottom: 0;
  }
  
  /* Category Blocks */
  .bot-message .category-block {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
    border-left: 4px solid #4299e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .bot-message .category-block.motivation {
    border-left-color: #f56565;
    background: rgba(254, 226, 226, 0.3);
  }
  
  .bot-message .category-block.learning {
    border-left-color: #48bb78;
    background: rgba(198, 246, 213, 0.3);
  }
  
  .bot-message .category-block.action {
    border-left-color: #ed8936;
    background: rgba(254, 215, 170, 0.3);
  }
  
  /* Code and Example Blocks */
  .bot-message pre,
  .bot-message code {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 12px;
    /* margin: 12px 0; */
    font-family: "Courier New", monospace;
    font-size: 0.9em;
    /* border: 1px solid rgba(0, 0, 0, 0.1); */
    overflow-x: auto;
  }
  
  .bot-message .example-block {
    background: rgba(66, 153, 225, 0.05);
    border: 1px solid rgba(66, 153, 225, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
  }
  
  /* Step-by-Step Formatting */
  .bot-message .step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    border-left: 3px solid #4299e1;
  }
  
  .bot-message .step-number {
    background: #4299e1;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: 600;
    flex-shrink: 0;
  }
  
  /* Tips and Important Notes */
  .bot-message .tip {
    background: rgba(246, 173, 85, 0.1);
    border: 1px solid rgba(246, 173, 85, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
    border-left: 4px solid #f6ad55;
  }
  
  .bot-message .important {
    background: rgba(229, 62, 62, 0.1);
    border: 1px solid rgba(229, 62, 62, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
    border-left: 4px solid #e53e3e;
  }
  
  /* Dark Mode Support */
  .dark-mode .user-message {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--user-message-bg);
    color: #f7fafc;
  }
  
  .dark-mode .bot-message {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .dark-mode .bot-message h1 {
    color: #90cdf4;
  }
  
  .dark-mode .bot-message h2 {
    color: #e2e8f0;
  }
  
  .dark-mode .bot-message h3 {
    color: #cbd5e0;
  }
  
  .dark-mode .bot-message .category-block {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .dark-mode .bot-message pre,
  .dark-mode .bot-message code {
    background: rgba(0, 0, 0, 0.3);
    /* border-color: rgba(255, 255, 255, 0.1); */
  }
  
  .dark-mode .bot-message .example-block {
    background: rgba(66, 153, 225, 0.1);
    border-color: rgba(66, 153, 225, 0.3);
  }
  
  .dark-mode .bot-message .step {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .dark-mode .bot-message .tip {
    background: rgba(246, 173, 85, 0.1);
    border-color: rgba(246, 173, 85, 0.3);
  }
  
  .dark-mode .bot-message .important {
    background: rgba(229, 62, 62, 0.1);
    border-color: rgba(229, 62, 62, 0.3);
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .user-message {
      max-width: 80%;
      margin-left: auto;
      margin-right: 8px;
      padding: 14px 16px;
    }
  
    .bot-message {
      margin-left: 8px;
      max-width: 100%;
      margin-right: auto;
    }
  
    .bot-message h1 {
      font-size: 1.2em;
    }
  
    .bot-message h2 {
      font-size: 1.1em;
    }
  }
  
  /* Animations */
  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInLeft {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  /* Adjust message width based on sidebar state */
  .sidebar:not(.collapsed) + .main .user-message,
  .sidebar:not(.collapsed) + .main .bot-message {
    max-width: 75%;
  }
  
  .sidebar.collapsed + .main .user-message,
  .sidebar.collapsed + .main .bot-message {
    max-width: 85%;
  }
  
  @media (max-width: 768px) {
    .bot-message {
      max-width: 90% !important;
    }
  }
  /* Add this to your main CSS file */
  mjx-container {
    display: inline-block !important;
    vertical-align: middle !important;
  }
  
  .math-fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 2px;
  }
  
  .chemical-equation {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(74, 144, 226, 0.1);
    border-left: 3px solid #4a90e2;
    border-radius: 4px;
    margin: 2px 4px;
    font-family: monospace;
  }
  /* ===== COMPLETE BOT MESSAGE STYLING FOR STUDENTS ===== */
  
  .bot-message {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    margin-right: auto;
    margin-left: 12px;
    padding: 20px;
    border-radius: 24px 24px 24px 8px;
    max-width: 100%;
    color: #2d3748;
    font-weight: 400;
    line-height: 1.6;
    word-break: break-word;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    animation: slideInLeft 0.25s ease-out;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  /* ===== SECTION HEADERS ===== */
  .bot-message .section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 12px 0;
    font-weight: 600;
    color: #2d3748;
    font-size: 1.1em;
    padding-bottom: 8px;
    border-bottom: 2px solid #4299e1;
  }
  
  .bot-message .section-header.motivation {
    border-bottom-color: #f56565;
    color: #c53030;
  }
  
  .bot-message .section-header.concept {
    border-bottom-color: #4299e1;
    color: #2b6cb0;
  }
  
  .bot-message .section-header.example {
    border-bottom-color: #48bb78;
    color: #276749;
  }
  
  .bot-message .section-header.formula {
    border-bottom-color: #9f7aea;
    color: #6b46c1;
  }
  
  /* ===== MOTIVATION BLOCKS ===== */
  .bot-message .motivation-block {
    background: linear-gradient(135deg, #fed7d7 0%, #feebc8 100%);
    border: 2px solid #feb2b2;
    border-radius: 16px;
    padding: 20px;
    margin: 16px 0;
    text-align: center;
    box-shadow: 0 4px 12px rgba(254, 178, 178, 0.2);
  }
  
  .bot-message .motivation-quote {
    font-size: 1.1em;
    font-weight: 600;
    color: #744210;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin-bottom: 8px;
  }
  
  .bot-message .motivation-emoji {
    font-size: 1.5em;
    margin: 0 4px;
  }
  
  /* ===== CONCEPT EXPLANATION BLOCKS ===== */
  .bot-message .concept-block {
    background: rgba(66, 153, 225, 0.08);
    border: 1px solid rgba(66, 153, 225, 0.3);
    border-radius: 12px;
    padding: 18px;
    margin: 16px 0;
    border-left: 5px solid #4299e1;
  }
  
  .bot-message .concept-title {
    font-weight: 600;
    color: #2b6cb0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .bot-message .concept-analogy {
    background: rgba(237, 137, 54, 0.1);
    border: 1px dashed #ed8936;
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  
  /* ===== EXAMPLE BLOCKS ===== */
  .bot-message .example-block {
    background: rgba(72, 187, 120, 0.08);
    border: 1px solid rgba(72, 187, 120, 0.3);
    border-radius: 12px;
    padding: 18px;
    margin: 16px 0;
    border-left: 5px solid #48bb78;
  }
  
  .bot-message .example-title {
    font-weight: 600;
    color: #276749;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .bot-message .example-solution {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 14px;
    margin: 12px 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  /* ===== FORMULA BLOCKS ===== */
  .bot-message .formula-block {
    background: rgba(159, 122, 234, 0.08);
    border: 2px solid rgba(159, 122, 234, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
    text-align: center;
  }
  
  .bot-message .formula {
    font-family: "Cambria Math", "Times New Roman", serif;
    font-size: 1.3em;
    font-weight: 600;
    color: #6b46c1;
    margin: 12px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border: 1px solid rgba(107, 70, 193, 0.2);
  }
  
  .bot-message .formula-explanation {
    font-size: 0.9em;
    color: #6b46c1;
    margin-top: 8px;
  }
  
  /* ===== STEP-BY-STEP TUTORIALS ===== */
  .bot-message .step-tutorial {
    background: rgba(237, 137, 54, 0.05);
    border: 1px solid rgba(237, 137, 54, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
  }
  
  .bot-message .step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border-left: 4px solid #ed8936;
  }
  
  .bot-message .step:last-child {
    margin-bottom: 0;
  }
  
  .bot-message .step-number {
    background: #ed8936;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    font-weight: 600;
    flex-shrink: 0;
  }
  
  .bot-message .step-content {
    flex: 1;
  }
  
  /* ===== TABLES ===== */
  .bot-message .table-container {
    overflow-x: auto;
    margin: 16px 0;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .bot-message table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 0.9em;
  }
  
  .bot-message th {
    background: #4299e1;
    color: white;
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    border: 1px solid #2b6cb0;
  }
  
  .bot-message td {
    padding: 10px 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: left;
  }
  
  .bot-message tr:nth-child(even) {
    background: rgba(66, 153, 225, 0.05);
  }
  
  /* ===== DIAGRAMS & MIND MAPS ===== */
  .bot-message .diagram-block {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
    text-align: center;
  }
  
  .bot-message .mind-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .bot-message .central-concept {
    background: #4299e1;
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  
  .bot-message .branch {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .bot-message .node {
    background: rgba(66, 153, 225, 0.1);
    border: 2px solid #4299e1;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    position: relative;
  }
  
  .bot-message .node::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    width: 2px;
    height: 12px;
    background: #4299e1;
  }
  
  /* ===== CODE BLOCKS ===== */
  .bot-message .code-block {
    background: #1b1b1c;
    border-radius: 12px;
    padding: 0;
    margin: 16px 0;
    overflow-x: auto;
    border: none;
  }
  
  .bot-message .code-block pre {
    margin: 0;
    color: #f9fafb;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
    line-height: 1.6;
  }
  
  .bot-message .code-language {
    background: none;
    color: #cbd5e0;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
    display: inline-block;
    /* margin-bottom: 2px; */
  }
  
  /* ===== DEFINITION LISTS ===== */
  .bot-message .definition-list {
    background: rgba(113, 128, 150, 0.05);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
  }
  
  .bot-message .definition-term {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .bot-message .definition-description {
    margin-left: 24px;
    margin-bottom: 12px;
    color: #4a5568;
  }
  
  /* ===== COMPARISON TABLES ===== */
  .bot-message .comparison-table {
    background: rgba(214, 188, 250, 0.1);
    border: 1px solid rgba(159, 122, 234, 0.3);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
  }
  
  .bot-message .comparison-row {
    display: flex;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 8px;
  }
  
  .bot-message .comparison-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  
  .bot-message .comparison-label {
    font-weight: 600;
    color: #6b46c1;
    min-width: 120px;
    flex-shrink: 0;
  }
  
  .bot-message .comparison-value {
    flex: 1;
    color: #4a5568;
  }
  
  /* ===== TIMELINES ===== */
  .bot-message .timeline {
    margin: 16px 0;
    position: relative;
  }
  
  .bot-message .timeline::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #4299e1;
  }
  
  .bot-message .timeline-event {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
  }
  
  .bot-message .timeline-dot {
    width: 12px;
    height: 12px;
    background: #4299e1;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    z-index: 1;
  }
  
  .bot-message .timeline-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.7);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  /* ===== QUIZ & PRACTICE BLOCKS ===== */
  .bot-message .quiz-block {
    background: rgba(72, 187, 120, 0.1);
    border: 2px solid #48bb78;
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
  }
  
  .bot-message .quiz-question {
    font-weight: 600;
    color: #276749;
    margin-bottom: 16px;
  }
  
  .bot-message .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .bot-message .quiz-option {
    background: rgba(255, 255, 255, 0.7);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .bot-message .quiz-option:hover {
    background: rgba(72, 187, 120, 0.2);
  }
  
  /* ===== DARK MODE SUPPORT ===== */
  .dark-mode .bot-message {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .dark-mode .bot-message .motivation-block {
    background: linear-gradient(135deg, #744210 0%, #975a16 100%);
    border-color: #d69e2e;
    color: #faf089;
  }
  
  .dark-mode .bot-message .concept-block {
    background: rgba(66, 153, 225, 0.15);
    border-color: rgba(66, 153, 225, 0.4);
  }
  
  .dark-mode .bot-message .example-block {
    background: rgba(72, 187, 120, 0.15);
    border-color: rgba(72, 187, 120, 0.4);
  }
  
  .dark-mode .bot-message .formula-block {
    background: rgba(159, 122, 234, 0.15);
    border-color: rgba(159, 122, 234, 0.4);
  }
  
  .dark-mode .bot-message table {
    background: #2d3748;
    color: #e2e8f0;
  }
  
  .dark-mode .bot-message th {
    background: #2b6cb0;
    border-color: #2c5282;
  }
  
  .dark-mode .bot-message td {
    border-color: #4a5568;
  }
  
  .dark-mode .bot-message tr:nth-child(even) {
    background: rgba(66, 153, 225, 0.1);
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 768px) {
    .bot-message {
      max-width: 100%;
      padding: 16px;
      margin-left: 8px;
    }
  
    .bot-message .section-header {
      font-size: 1em;
    }
  
    .bot-message .branch {
      flex-direction: column;
      align-items: center;
    }
  
    .bot-message .comparison-row {
      flex-direction: column;
      gap: 4px;
    }
  
    .bot-message .comparison-label {
      min-width: auto;
    }
  }
  
  /* ===== ANIMATIONS ===== */
  @keyframes slideInLeft {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .bot-message .highlight {
    background: linear-gradient(120deg, #f6e05e 0%, #f6e05e 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.4em;
    background-position: 0 88%;
    animation: highlight 0.5s ease-in-out;
  }
  
  @keyframes highlight {
    0% {
      background-size: 0% 0.4em;
    }
    100% {
      background-size: 100% 0.4em;
    }
  }
  /* Improved Input Container */
  .input-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    position: relative;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 28px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 14px;
    border: 1px solid #3536361e;
    transition: box-shadow 0.2s ease;
    box-sizing: border-box;
    min-height: 100px;
  }
  
  .dark-mode .input-container {
    background: #313130;
    border: 1px solid #3f3e3e;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
  }
  
  /* Textarea that takes full width and height above icons */
  #text-input {
    width: 100%;
    padding: 0;
    text-align: start;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 1.25rem;
    resize: none;
    overflow-y: auto;
    min-height: 30px;
    line-height: 1.5;
    max-height: 150px;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    white-space: pre-wrap;
    word-wrap: break-word;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
    flex: 1;
    margin-bottom: 8px;
  }
  
  /* Container for icons at the bottom */
  .input-icons-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 38px;
  }
  
  /* Left and right side icons */
  .input-icons-left,
  .input-icons-right {
    display: flex;
    gap: 12px; /* smaller gap for mobile-friendliness */
    align-items: center;
  }
  
  /* Icon buttons (mic, send, stop, file) */
  .input-icon-btn,
  .submit-btn,
  .stop-btn {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 1.3rem;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    position: relative;
  }
  
  /* Hover & active effects */
  .input-icon-btn:hover,
  .submit-btn:hover,
  .stop-btn:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  
  .dark-mode .input-icon-btn:hover,
  .dark-mode .submit-btn:hover {
    background: #424343;
    color: white;
  }
  
  .submit-btn.active {
    background-color: #000;
    color: white;
  }
  
  .dark-mode .submit-btn.active {
    background-color: white;
    color: black;
  }
  
  /* File input covering button */
  .file-input-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .file-input-wrapper input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    font-weight: 600;
  }
  
  /* Voice indicator area */
  .voice-indicator-area {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: var(--border-radius-sm);
    padding: 6px 0;
    gap: 4px;
    width: 100%;
  }
  
  /* Show voice area when active */
  .input-container.voice-active .voice-indicator-area {
    display: flex;
  }
  
  /* Mobile adjustments */
  @media (max-width: 768px) {
    .input-container {
      padding: 10px 12px;
      min-height: 50px;
    }
  
    #text-input {
      font-size: 1.1rem;
      min-height: 10px;
      max-height: 50px;
      margin-bottom: 6px;
    }
  
    .input-icon-btn,
    .submit-btn,
    .stop-btn {
      width: 38px;
      height: 38px;
      font-size: 1.1rem;
      padding: 6px;
    }
  
    .input-icons-left,
    .input-icons-right {
      gap: 8px; /* smaller gap for smaller screens */
    }
  }
  
  /* Focus effect */
  .input-container {
    cursor: text;
  }
  
  /* .input-container:focus-within {
  box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.25),
  inset 0 1px 2px rgba(0, 0, 0, 0.05);
  } */
  /* 
  .dark-mode .input-container:focus-within {
  box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.25),
  inset 0 1px 2px rgba(255, 255, 255, 0.1);
  } */
  
  /* Loader positioning */
  .loader {
    padding: 16px;
    text-align: center;
    color: var(--text-color);
    font-size: 0.95rem;
    opacity: 0.7;
    animation: fadeIn 0.3s ease-in-out;
    margin: 20px auto;
    max-width: 768px;
    width: 100%;
  }
  
  .chat-container .loader {
    align-self: center;
    margin-left: 0;
    margin-right: 0;
  }
  /* "Thinking" Message & Dots */
  .thinking-message {
    font-size: 1.25rem;
    color: var(--text-color);
    margin: 1rem 0;
    padding: 10px;
    border-radius: 10px;
    width: fit-content;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    background-color: var(--bot-message-bg);
    animation: fadeIn 0.3s ease-in-out;
  }
  
  .thinking-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
    animation: thinkingDot 1.4s infinite ease-in-out;
  }
  
  .thinking-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .thinking-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  @keyframes thinkingDot {
    0%,
    80%,
    100% {
      transform: scale(0);
      opacity: 0.4;
    }
    40% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @media (max-width: 768px) {
    .input-container {
      flex-wrap: nowrap;
      align-items: flex-end;
      /* FIX 1: Set horizontal padding to 0, rely on .input-area padding */
      padding: 10px 0;
      height: 110px;
    }
  
    #text-input {
      flex: 1;
      min-height: 0px;
      padding: 0px 0px 10px 10px;
      font-size: 18px;
    }
  
    /* FIX 2: Reduce button/icon size for safety on narrowest devices */
    .submit-btn,
    .stop-btn {
      width: 34px;
      height: 34px;
      padding: 0;
      margin-right: 10px;
    }
  
    .input-icon-btn {
      width: 34px;
      height: 34px;
      padding: 4px;
      padding-left: 10px;
    }
  }
  
  /* Typing Indicator - ChatGPT style */
  /* .typing-indicator {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 20px;
  background: var(--bot-message-bg);
  border-radius: 18px;
  width: fit-content;
  margin: 10px 16px;
  animation: fadeIn 0.2s ease-in-out;
  max-width: 80%;
  }
  
  .typing-indicator .dot {
  width: 8px;
  height: 8px;
  background: var(--text-color);
  border-radius: 50%;
  margin: 0 4px;
  opacity: 0.6;
  animation: blink 1.4s infinite both;
  }
  
  .typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
  }
  .typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
  }
  
  @keyframes blink {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
  }
  
  @keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
  } */
  
  /* Add to your existing CSS */
  #text-input.drag-over {
    border: 2px dashed #10a37f !important;
    background-color: rgba(16, 163, 127, 0.1) !important;
  }
  
  .drag-drop-hint {
    font-size: 12px;
    color: var(--text-color);
    margin-top: 5px;
    text-align: center;
    transition: opacity 0.3s ease;
  }
  
  .input-container {
    position: relative;
  }
  
  /* Ensure the text input area is large enough for drag & drop */
  #text-input {
    min-height: 10px;
    transition: all 0.3s ease;
  }