1  :root {
   2    /* Dark mode variables (default) */
   3    --bg-color: #1a1a1a;
   4    --topbar-bg: #212121;
   5    --text-color: #7ee787;
   6    --text-muted: #9e9e9e;
   7    --content-bg: #1a1a1a;
   8    --assistant-msg-bg: #262b26;
   9    --assistant-msg-color: #9ef1a0;
  10    --user-msg-bg: #15354f;
  11    --user-msg-color: #a0f1f1;
  12    --btn-send-bg: #0d6efd;
  13    --btn-send-hover-bg: #0b5ed7;
  14  }
  15  body.light-mode {
  16    /* Light mode overrides */
  17    --bg-color: #f8f9fa;
  18    --topbar-bg: #e9ecef;
  19    --text-color: #0d6efd;
  20    --text-muted: #6c757d;
  21    --content-bg: #f8f9fa;
  22    --assistant-msg-bg: #e2ffe2;
  23    --assistant-msg-color: #198754;
  24    --user-msg-bg: #cce5ff;
  25    --user-msg-color: #0d6efd;
  26    --btn-send-bg: #0d6efd;
  27    --btn-send-hover-bg: #0b5ed7;
  28  }
  29  
  30  /* reset & base */
  31  * { box-sizing: border-box; margin: 0; padding: 0; }
  32  body {
  33    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  34    background: var(--bg-color);
  35    color: var(--text-color);
  36    height: 100vh;
  37  }
  38  
  39  /* main container */
  40  .chat-app {
  41    display: flex;
  42    flex-direction: column;
  43    height: 100%;
  44    width: 100%;
  45    max-width: 100%;
  46    margin: 0;
  47    background: var(--content-bg);
  48    animation: fadeIn 0.3s ease-in;
  49  }
  50  
  51  /* header */
  52  .chat-header {
  53    background: var(--topbar-bg);
  54    color: var(--text-color);
  55    padding: 10px;
  56    display: flex;
  57    align-items: center;
  58    justify-content: space-between;
  59    animation: slideDown 0.4s ease-out;
  60  }
  61  .chat-header h1 { font-size: 1.2rem; }
  62  .chat-header button {
  63    background: transparent;
  64    border: none;
  65    color: var(--text-color);
  66    font-size: 1.2rem;
  67    cursor: pointer;
  68  }
  69  
  70  /* messages area */
  71  #chat-container {
  72    flex: 1;
  73    overflow-y: auto;
  74    padding: 10px;
  75    background: var(--content-bg);
  76    scroll-behavior: smooth;
  77  }
  78  .message {
  79    display: flex;
  80    margin: 5px 0;
  81    animation: fadeInUp 0.3s ease;
  82  }
  83  .message.user { justify-content: flex-end; }
  84  .message.assistant { justify-content: flex-start; }
  85  
  86  /* bubbles */
  87  .bubble {
  88    max-width: 80%;
  89    padding: 8px 12px;
  90    border-radius: 18px;
  91    line-height: 1.4;
  92    word-wrap: break-word;
  93    position: relative;
  94  }
  95  .message.user .bubble {
  96    background: var(--user-msg-bg);
  97    color: var(--user-msg-color);
  98    border-bottom-right-radius: 4px;
  99  }
 100  .message.assistant .bubble {
 101    background: var(--assistant-msg-bg);
 102    color: var(--assistant-msg-color);
 103    border-bottom-left-radius: 4px;
 104  }
 105  
 106  /* typing animation dots */
 107  .typing .bubble::after {
 108    content: '';
 109    display: inline-block;
 110    width: 6px;
 111    height: 6px;
 112    margin-left: 4px;
 113    border-radius: 50%;
 114    background: var(--text-muted);
 115    box-shadow: 10px 0 0 var(--text-muted), 20px 0 0 var(--text-muted);
 116    animation: blinkDots 1s infinite;
 117  }
 118  
 119  /* input form */
 120  #chat-form {
 121    display: flex;
 122    padding: 6px;
 123    background: var(--topbar-bg);
 124    border-top: 1px solid var(--text-muted);
 125    animation: slideUp 0.4s ease-out;
 126  }
 127  #message-input {
 128    flex: 1;
 129    padding: 10px 12px;
 130    border: none;
 131    border-radius: 20px;
 132    background: var(--content-bg);
 133    color: var(--text-color);
 134    outline: none;
 135    margin-right: 6px;
 136  }
 137  #chat-form button {
 138    background: var(--btn-send-bg);
 139    border: none;
 140    border-radius: 20px;
 141    padding: 10px 16px;
 142    color: #fff;
 143    cursor: pointer;
 144  }
 145  #chat-form button:hover {
 146    background: var(--btn-send-hover-bg);
 147  }
 148  
 149  /* animations */
 150  @keyframes blinkDots {
 151    0%, 20% { background: var(--text-muted); box-shadow: 10px 0 0 var(--text-muted), 20px 0 0 var(--text-muted); }
 152    40% { background: transparent; box-shadow: 10px 0 0 var(--text-muted), 20px 0 0 var(--text-muted); }
 153    60% { background: transparent; box-shadow: 10px 0 0 transparent, 20px 0 0 var(--text-muted); }
 154    80%,100% { background: var(--text-muted); box-shadow: 10px 0 0 var(--text-muted), 20px 0 0 var(--text-muted); }
 155  }
 156  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 157  @keyframes slideDown { from { transform: translateY(-20px); } to { transform: translateY(0); } }
 158  @keyframes slideUp { from { transform: translateY(20px); } to { transform: translateY(0); } }
 159  @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 160  
 161  /* responsive */
 162  @media (max-width: 600px) {
 163    .chat-app {
 164      width: 100%;
 165      max-width: 100%;
 166    }
 167    .bubble {
 168      max-width: 90%;
 169    }
 170  }