:root {
  /* Dark mode variables (default) */
  --bg-color: #1a1a1a;
  --topbar-bg: #212121;
  --text-color: #7ee787;
  --text-muted: #9e9e9e;
  --content-bg: #1a1a1a;
  --assistant-msg-bg: #262b26;
  --assistant-msg-color: #9ef1a0;
  --user-msg-bg: #15354f;
  --user-msg-color: #a0f1f1;
  --btn-send-bg: #0d6efd;
  --btn-send-hover-bg: #0b5ed7;
}
body.light-mode {
  /* Light mode overrides */
  --bg-color: #f8f9fa;
  --topbar-bg: #e9ecef;
  --text-color: #0d6efd;
  --text-muted: #6c757d;
  --content-bg: #f8f9fa;
  --assistant-msg-bg: #e2ffe2;
  --assistant-msg-color: #198754;
  --user-msg-bg: #cce5ff;
  --user-msg-color: #0d6efd;
  --btn-send-bg: #0d6efd;
  --btn-send-hover-bg: #0b5ed7;
}

/* reset & base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  height: 100vh;
}

/* main container */
.chat-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0;
  background: var(--content-bg);
  animation: fadeIn 0.3s ease-in;
}

/* header */
.chat-header {
  background: var(--topbar-bg);
  color: var(--text-color);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideDown 0.4s ease-out;
}
.chat-header h1 { font-size: 1.2rem; }
.chat-header button {
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 1.2rem;
  cursor: pointer;
}

/* messages area */
#chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: var(--content-bg);
  scroll-behavior: smooth;
}
.message {
  display: flex;
  margin: 5px 0;
  animation: fadeInUp 0.3s ease;
}
.message.user { justify-content: flex-end; }
.message.assistant { justify-content: flex-start; }

/* bubbles */
.bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 18px;
  line-height: 1.4;
  word-wrap: break-word;
  position: relative;
}
.message.user .bubble {
  background: var(--user-msg-bg);
  color: var(--user-msg-color);
  border-bottom-right-radius: 4px;
}
.message.assistant .bubble {
  background: var(--assistant-msg-bg);
  color: var(--assistant-msg-color);
  border-bottom-left-radius: 4px;
}

/* typing animation dots */
.typing .bubble::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 10px 0 0 var(--text-muted), 20px 0 0 var(--text-muted);
  animation: blinkDots 1s infinite;
}

/* input form */
#chat-form {
  display: flex;
  padding: 6px;
  background: var(--topbar-bg);
  border-top: 1px solid var(--text-muted);
  animation: slideUp 0.4s ease-out;
}
#message-input {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 20px;
  background: var(--content-bg);
  color: var(--text-color);
  outline: none;
  margin-right: 6px;
}
#chat-form button {
  background: var(--btn-send-bg);
  border: none;
  border-radius: 20px;
  padding: 10px 16px;
  color: #fff;
  cursor: pointer;
}
#chat-form button:hover {
  background: var(--btn-send-hover-bg);
}

/* animations */
@keyframes blinkDots {
  0%, 20% { background: var(--text-muted); box-shadow: 10px 0 0 var(--text-muted), 20px 0 0 var(--text-muted); }
  40% { background: transparent; box-shadow: 10px 0 0 var(--text-muted), 20px 0 0 var(--text-muted); }
  60% { background: transparent; box-shadow: 10px 0 0 transparent, 20px 0 0 var(--text-muted); }
  80%,100% { background: var(--text-muted); box-shadow: 10px 0 0 var(--text-muted), 20px 0 0 var(--text-muted); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { transform: translateY(-20px); } to { transform: translateY(0); } }
@keyframes slideUp { from { transform: translateY(20px); } to { transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* responsive */
@media (max-width: 600px) {
  .chat-app {
    width: 100%;
    max-width: 100%;
  }
  .bubble {
    max-width: 90%;
  }
}