/* --- WhatsApp-ish palette --- */
:root {
  /* Dark theme (WhatsApp-like) */
  --wa-bg: #0b141a;
  --wa-panel: #111b21;
  --wa-incoming: #202c33;        /* assistant (other person) */
  --wa-outgoing: #005c4b;        /* user (me) */
  --wa-text: #e9edef;
  --wa-incoming-text: var(--wa-text);
  --wa-outgoing-text: var(--wa-text);
  --wa-muted: #8696a0;
}

html[data-theme="light"] {
  /* Light theme (WhatsApp-like) */
  --wa-bg: #ece5dd;
  --wa-panel: #ffffff;
  --wa-incoming: #ffffff;        /* assistant (other person) */
  --wa-outgoing: #dcf8c6;        /* user (me) */
  --wa-text: #111b21;
  --wa-incoming-text: var(--wa-text);
  --wa-outgoing-text: var(--wa-text);
  --wa-muted: #667781;
}

/* Use WA background/panel */
body { background: var(--wa-bg); color: var(--wa-text); }
.chat-box {
  height: 60vh; overflow-y: auto;
  background: var(--wa-panel);
  border-radius: .75rem;
  border: 1px solid rgba(0,0,0,0.1);
  padding: 12px;                 /* a bit tighter */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Hide the old role pill if any remains */
.role-pill { display: none !important; }

/* Bubble base */
.msg {
  max-width: 75%;
  padding: 8px 10px 18px;        /* extra space for time */
  border-radius: 16px;
  position: relative;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  word-wrap: break-word;
}

/* Incoming (assistant) looks like the person you're chatting with (left, grey/white) */
.msg.assistant {
  background: var(--wa-incoming);
  color: var(--wa-incoming-text);
  margin-right: auto;            /* left side */
  border-top-left-radius: 4px;   /* WA-ish cut */
}

/* Outgoing (user) looks like your messages (right, green) */
.msg.user {
  background: var(--wa-outgoing);
  color: var(--wa-outgoing-text);
  margin-left: auto;             /* right side */
  border-top-right-radius: 4px;  /* WA-ish cut */
}

/* Tiny time inside bubble, bottom-right */
.msg .time {
  position: absolute;
  right: 8px;
  bottom: 4px;
  font-size: 11px;
  opacity: 0.8;
  color: var(--wa-muted);
}

/* Bubble tails (simple triangles) */
.msg.assistant::after,
.msg.user::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
}

.msg.assistant::after {
  left: -2px;
  background: var(--wa-incoming);
  clip-path: polygon(100% 0, 0 0, 0 100%);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
}

.msg.user::after {
  right: -2px;
  background: var(--wa-outgoing);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
}

/* Keep header/buttons readable across themes */
.chat-wrap .d-flex.align-items-center.mb-3 { color: inherit; }
.text-secondary { color: var(--wa-muted) !important; }
html[data-theme="light"] #resetBtn.btn-outline-light,
html[data-theme="light"] #themeToggle.btn-outline-light {
  color: var(--wa-text);
  border-color: #cbd5e1;
}

/* --- Light theme overrides for header & buttons --- */
html[data-theme="light"] .chat-wrap .d-flex.align-items-center.mb-3 {
  color: var(--text);            /* ensures title text is dark */
}

html[data-theme="light"] .chat-wrap h1 {
  color: var(--text);
}

html[data-theme="light"] #resetBtn.btn-outline-light,
html[data-theme="light"] #themeToggle.btn-outline-light {
  color: var(--text);
  border-color: var(--muted);
}

html[data-theme="light"] #resetBtn.btn-outline-light:hover,
html[data-theme="light"] #themeToggle.btn-outline-light:hover {
  background-color: var(--muted);
  color: #fff;
}