1  :root {
   2      /* Dark mode variables (default) */
   3      --bg-color: #1a1a1a;
   4      --sidebar-bg: #2d2d2d;
   5      --sidebar-border: #444;
   6      --text-color: #7ee787;
   7      --text-muted: #9e9e9e;
   8      --content-bg: #1a1a1a;
   9      --topbar-bg: #212121;
  10      --link-hover: #fff;
  11      --assistant-msg-bg: #262b26;
  12      --assistant-msg-color: #9ef1a0;
  13      --user-msg-bg: #15354f;
  14      --user-msg-color: #a0f1f1;
  15      --btn-newchat-bg: #0d6efd;
  16    }
  17    body.light-mode {
  18      /* Light mode overrides */
  19      --bg-color: #9db7d1;
  20      --sidebar-bg: #9db7d1;
  21      --sidebar-border: #7d848b;
  22      --text-color: #031631;
  23      --text-muted: #6c757d;
  24      --content-bg: #f8f9fa;
  25      --topbar-bg: #e9ecef;
  26      --link-hover: #000;
  27      --assistant-msg-bg: #e2ffe2;
  28      --assistant-msg-color: #198754;
  29      --user-msg-bg: #cce5ff;
  30      --user-msg-color: #0d6efd;
  31      --btn-newchat-bg: #0d6efd;
  32    }
  33    html, body {
  34      margin: 0;
  35      padding: 0;
  36      height: 100%;
  37      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  38      background-color: var(--bg-color);
  39      color: var(--text-color);
  40      transition: background-color 0.3s ease, color 0.3s ease;
  41    }
  42    #sidebar {
  43      position: fixed;
  44      left: 0;
  45      top: 0;
  46      width: 340px;
  47      height: 100%;
  48      background-color: var(--sidebar-bg);
  49      border-right: 1px solid var(--sidebar-border);
  50      padding: 15px;
  51      display: flex;
  52      flex-direction: column;
  53      transition: transform 0.3s ease;
  54      transform: translateX(0);
  55      overflow: hidden;
  56      z-index: 999;
  57    }
  58    #sidebar.collapsed {
  59      transform: translateX(-340px);
  60    }
  61    .sidebar-header {
  62      margin-bottom: 20px;
  63    }
  64    .sidebar-header h4 {
  65      margin: 0;
  66      font-size: 1.3rem;
  67      color: var(--text-color);
  68    }
  69    .sidebar-menu {
  70      flex: 1;
  71      display: flex;
  72      flex-direction: column;
  73    }
  74    .btn-newchat {
  75      background-color: var(--btn-newchat-bg);
  76      color: #fff;
  77      border: none;
  78      width: 100%;
  79      text-align: left;
  80      padding: 10px;
  81      margin-bottom: 10px;
  82      cursor: pointer;
  83      font-size: 1rem;
  84      transition: background-color 0.2s ease;
  85    }
  86    .btn-newchat:hover {
  87      background-color: #0b5ed7;
  88    }
  89    .sidebar-menu ul {
  90      list-style: none;
  91      padding-left: 0;
  92      margin: 0;
  93    }
  94    .sidebar-menu ul li {
  95      margin: 10px 0;
  96    }
  97    .sidebar-menu ul li a {
  98      color: var(--text-muted);
  99      text-decoration: none;
 100      cursor: pointer;
 101      font-size: 1rem;
 102    }
 103    .sidebar-menu ul li a:hover {
 104      color: var(--link-hover);
 105    }
 106    .sidebar-footer {
 107      margin-top: auto;
 108      padding-top: 20px;
 109      border-top: 1px solid var(--sidebar-border);
 110    }
 111    .sidebar-footer ul {
 112      list-style: none;
 113      padding-left: 0;
 114      margin: 0;
 115    }
 116    .sidebar-footer li {
 117      margin: 10px 0;
 118    }
 119    .sidebar-footer li a {
 120      color: var(--text-muted);
 121      text-decoration: none;
 122      font-size: 1rem;
 123    }
 124    .sidebar-footer li a:hover {
 125      color: var(--link-hover);
 126    }
 127    #mainContent {
 128      margin-left: 340px;
 129      height: 100vh;
 130      display: flex;
 131      flex-direction: column;
 132      transition: margin-left 0.3s ease;
 133    }
 134    #mainContent.expanded {
 135      margin-left: 0;
 136    }
 137    .topbar {
 138      background-color: var(--topbar-bg);
 139      padding: 10px 20px;
 140      border-bottom: 1px solid var(--sidebar-border);
 141      display: flex;
 142      align-items: center;
 143      justify-content: space-between;
 144      color: var(--text-color);
 145      transition: background-color 0.3s ease, color 0.3s ease;
 146    }
 147    .toggle-btn {
 148      background: none;
 149      border: none;
 150      color: var(--text-color);
 151      font-size: 22px;
 152      cursor: pointer;
 153      margin-right: 20px;
 154    }
 155    .theme-toggle-btn {
 156      background: none;
 157      border: 1px solid var(--text-color);
 158      color: var(--text-color);
 159      border-radius: 20px;
 160      padding: 5px 10px;
 161      cursor: pointer;
 162      font-size: 0.9rem;
 163      display: flex;
 164      align-items: center;
 165      gap: 5px;
 166      transition: background-color 0.3s ease, color 0.3s ease;
 167    }
 168    .theme-toggle-btn:hover {
 169      background-color: rgba(255, 255, 255, 0.1);
 170    }
 171    .chat-container {
 172      flex: 1;
 173      padding: 15px;
 174      overflow-y: auto;
 175      background-color: var(--content-bg);
 176      display: flex;
 177      flex-direction: column;
 178      align-items: center;
 179      position: relative;
 180      transition: background-color 0.3s ease;
 181    }
 182    .message-area {
 183      width: 100%;
 184      max-width: 1300px;
 185      position: relative;
 186    }
 187    .message {
 188      margin: 10px 0;
 189      padding: 10px;
 190      border-radius: 6px;
 191      max-width: 70%;
 192    }
 193    .assistant-msg {
 194      background-color: var(--assistant-msg-bg);
 195      color: var(--assistant-msg-color);
 196      align-self: flex-start;
 197    }
 198    .user-msg {
 199      background-color: var(--user-msg-bg);
 200      color: var(--user-msg-color);
 201      margin-left: auto;
 202      align-self: flex-end;
 203    }
 204    .system-msg {
 205      display: none;
 206    }
 207    pre {
 208      position: relative;
 209      background-color: var(--assistant-msg-bg) !important;
 210      padding: 12px;
 211      border-radius: 6px;
 212      overflow-x: auto;
 213      margin: 1rem 0;
 214    }
 215    pre code {
 216      color: var(--assistant-msg-color) !important;
 217      font-family: "Consolas", "Courier New", monospace;
 218      font-size: 0.95rem;
 219      line-height: 1.4;
 220    }
 221    #emptyState {
 222      position: absolute;
 223      top: 35%;
 224      left: 50%;
 225      transform: translate(-50%, -50%);
 226      color: #bbb;
 227      font-size: 2rem;
 228      pointer-events: none;
 229      text-align: center;
 230    }
 231    #emptyState h1 {
 232      color: #fff;
 233      margin-bottom: 1rem;
 234      font-size: 2.2rem;
 235    }
 236    .input-area {
 237      background-color: var(--topbar-bg);
 238      padding: 10px;
 239      border-top: 1px solid var(--sidebar-border);
 240      display: flex;
 241      align-items: flex-start;
 242      width: 100%;
 243      max-width: 1300px;
 244      margin: 0 auto;
 245      transition: background-color 0.3s ease;
 246    }
 247    #message {
 248      flex: 1;
 249      background-color: #333;
 250      color: #a8f1a8;
 251      border: 1px solid #555;
 252      resize: vertical;
 253      min-height: 100px;
 254    }
 255    .btn-send {
 256      background-color: var(--btn-newchat-bg);
 257      color: #fff;
 258      border: none;
 259      margin-left: 10px;
 260      padding: 10px 15px;
 261    }
 262    .btn-send:hover {
 263      background-color: #0b5ed7;
 264    }
 265    .btn-clear {
 266      background-color: #dc3545;
 267      color: #fff;
 268      border: none;
 269      margin-left: 10px;
 270      padding: 10px 15px;
 271    }
 272    .btn-clear:hover {
 273      background-color: #c82333;
 274    }
 275    .btn-mic {
 276      background-color: #4fc3f7;
 277      color: #fff;
 278      border: none;
 279      margin-left: 10px;
 280      border-radius: 50%;
 281      width: 40px;
 282      height: 40px;
 283    }
 284    .btn-mic:hover {
 285      background-color: #29b6f6;
 286    }
 287    .typing-indicator {
 288      font-style: italic;
 289      color: #6aff6a;
 290    }
 291    .modal-content {
 292      background: #212121;
 293      color: #fff;
 294    }
 295   /* copy button styling, matching your example */
 296  .copy-btn {
 297      position: absolute;
 298      top: 8px;
 299      right: 10px;
 300      background-color: #444;           /* dark gray */
 301      color: #fff;
 302      border: none;
 303      border-radius: 4px;
 304      padding: 2px 8px;
 305      font-size: 0.8rem;
 306      cursor: pointer;
 307      z-index: 10;
 308      opacity: 0.7;
 309      transition: opacity 0.2s ease;
 310    }
 311    .copy-btn:hover {
 312      opacity: 1;
 313    }
 314