*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Segoe UI', sans-serif;
}

body{
  height:100vh;
  background:#f7f7f8;
  display:flex;
  flex-direction:column;
}

/* HEADER */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 25px;
  background:white;
  border-bottom:1px solid #e5e7eb;
}

.header h2{
  font-size:18px;
}

#themeToggle{
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
}
.header h2 {
  color: black;   /* Light mode me black */
}

/* CHAT AREA */
.chat-container{
  flex:1;
  overflow-y:auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* MESSAGE BOXES */
.user-chat-box,
.ai-chat-box{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.user-chat-box{
  justify-content:flex-end;
}

.ai-chat-box{
  justify-content:flex-start;
}

.user-chat-area{
  background:#10a37f;
  color:white;
  padding:12px 16px;
  border-radius:12px;
  max-width:60%;
  font-size:14px;
}

.ai-chat-area{
  background:white;
  border:1px solid #e5e7eb;
  padding:12px 16px;
  border-radius:12px;
  max-width:60%;
  font-size:14px;
}

/* PROFILE IMAGE */
#userImage,
#aiImage{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
}

/* INPUT AREA */
.prompt-area{
  display:flex;
  gap:10px;
  padding:15px;
  background:white;
  border-top:1px solid #e5e7eb;
}

.prompt-area input{
  flex:1;
  padding:12px;
  border-radius:8px;
  border:1px solid #d1d5db;
  outline:none;
  font-size:14px;
}

.prompt-area button{
  width:45px;
  height:45px;
  border-radius:8px;
  border:none;
  background:#10a37f;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.prompt-area button:hover{
  background:#0e8e6d;
}

/* DARK MODE */
.dark body{
  background:#111827;
}

.dark .header,
.dark .prompt-area{
  background:#1f2937;
  border-color:#374151;
}

.dark .ai-chat-area{
  background:#1f2937;
  color:white;
  border:1px solid #374151;
}

.dark .prompt-area input{
  background:#111827;
  color:white;
  border:1px solid #374151;
}
.dark .header h2 {
  color: white;   /* Dark mode me white */
}