* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Segoe UI', sans-serif;
  display: flex; justify-content: center; align-items: center;
  height: 100vh; transition: background .4s;
}
body.dark { background: #000; }
body.light { background: #000 !important; /* page remains black */ }

/* Main Wrapper */
.chat-wrapper {
  width: 600px; max-width: 90%; height: 90vh;
  background: #0a0a0a; border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
  transition: background .3s;
}
body.light .chat-wrapper {
  background: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
}

/* Header */
.top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px; background: #0a0a0a; border-bottom: 1px solid #1a1a1a;
}
.left-header, .right-header {
  display: flex; align-items: center; gap: 10px;
}
.icon { width: 24px; height: 24px; filter: invert(100%); }
.large-icon { width: 32px; height: 32px; }
.chatbot-title {
  font-size: 22px; font-weight: bold; color: white;
}
.reset-btn { background: transparent; border: none; cursor: pointer; }
.switch { position: relative; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background: #555; border-radius: 20px;
  transition: .4s;
}
.slider:before {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  bottom: 3px; left: 3px;
  background: #fff; border-radius: 50%;
  transition: .4s;
}
input:checked + .slider {
  background: #ccc;
}
input:checked + .slider:before {
  transform: translateX(16px);
}

/* Chat Area */
.chat-area {
  flex: 1; position: relative;
  padding: 24px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.message {
  max-width: 80%; padding: 12px 16px;
  border-radius: 18px; animation: fadeSlide .35s ease;
  position: relative;
}
.message.user {
  align-self: flex-end;
  background: #1a1a1a;
  color: white;
}
.message.bot {
  align-self: flex-start;
  background: #111;
  color: #e5e7eb;
  padding-left: 48px; /* space for avatar */
}
body.light .message.user {
  background: #eaeaea;
  color: #000;
}
body.light .message.bot {
  background: #f3f3f3;
  color: #000;
}

/* Bot Avatar on messages */
.message.bot::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: url('https://freesvg.org/img/1538298822.png') no-repeat center/cover;
  filter: invert(100%);
  border-radius: 50%;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Greeting */
.greeting {
  position: absolute; top: 15%; left: 24px;
  animation: fadeSlideUp 1s ease-out;
}
.greet-hello {
  font-size: 26px; font-weight: 500;
  color: #e0e0e0; margin-bottom: 6px;
}
body.light .greet-hello {
  color: #555; /* darker in light mode */
}
.greet-sub {
  font-size: 18px; font-weight: 400;
  color: #999;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Suggestions */
.suggestions {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 14px 16px 6px;
  background: #0a0a0a;
  transition: background .3s;
}
body.light .suggestions {
  background: #f0f0f0;
}
.suggestion {
  background: #1a1a1a;
  color: #ccc;
  padding: 8px 12px;
  border-radius: 20px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s;
}
body.light .suggestion {
  background: #ddd;
  color: #222;
}
.suggestion:hover {
  background: #2a2a2a;
}

/* Input Bar */
.input-wrapper {
  padding: 10px 14px 14px;
  background: #0a0a0a;
}
body.light .input-wrapper {
  background: #f5f5f5;
}
.input-inner {
  display: flex;
  background: #000; /* pure black input bubble */
  padding: 10px;
  border-radius: 16px;
}
body.light .input-inner {
  background: #ddd;
}
.input-inner input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  padding: 10px 12px;
}
body.light .input-inner input {
  color: black;
}
.input-inner button {
  background: white;
  color: black;
  border: none;
  padding: 0 18px;
  margin-left: 10px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s;
}
body.light .input-inner button {
  background: black;
  color: white;
}
.input-inner button:hover {
  background: #ddd;
}

.message {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 80%;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
}

.user {
  align-self: flex-end;
  background-color: #1f1f1f;
  color: white;
}

.bot-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: #333;
  color: white;
}

.bot-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 5px;
}

.message-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.send-icon {
  width: 20px;
  height: 20px;
  filter: invert(1);
}

.send-icon {
  width: 24px;
  height: 24px;
  stroke: white;
  transition: stroke 0.3s;
}

body.light .send-icon {
  stroke: black;
}