/* --- 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: #e9ecef;
  --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;
}
/* --- Light theme: make the navbar truly light --- */
html[data-theme="light"] .navbar {
  background-color: #f8f9fa !important;        /* light bg (like .bg-light) */
  /* override Bootstrap navbar-dark CSS variables to dark text */
  --bs-navbar-color: rgba(0,0,0,.65);
  --bs-navbar-hover-color: rgba(0,0,0,.85);
  --bs-navbar-active-color: rgba(0,0,0,1);
  --bs-navbar-brand-color: rgba(0,0,0,.9);
  --bs-navbar-toggler-border-color: rgba(0,0,0,.15);
  /* dark “hamburger” icon on light bg */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Optional: tighten brand + links for light theme (keeps consistency) */
html[data-theme="light"] .navbar .navbar-brand,
html[data-theme="light"] .navbar .nav-link {
  color: var(--bs-navbar-color) !important;
}
html[data-theme="light"] .navbar .nav-link.active,
html[data-theme="light"] .navbar .nav-link:focus,
html[data-theme="light"] .navbar .nav-link:hover {
  color: var(--bs-navbar-hover-color) !important;
}


/* --- Dark theme fixes for Bootstrap panels (card + accordion) --- */
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .accordion,
html:not([data-theme="light"]) .accordion-item {
  background-color: var(--wa-panel) !important;
  color: var(--wa-text) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Accordion header button */
html:not([data-theme="light"]) .accordion-button {
  background-color: var(--wa-panel) !important;
  color: var(--wa-text) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Collapsed state keeps same colors (Bootstrap otherwise goes light) */
html:not([data-theme="light"]) .accordion-button.collapsed {
  background-color: var(--wa-panel) !important;
  color: var(--wa-text) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Accordion body */
html:not([data-theme="light"]) .accordion-body {
  background-color: var(--wa-panel) !important;
  color: var(--wa-text) !important;
}

/* The chevron icon (SVG background-image) needs contrast */
html:not([data-theme="light"]) .accordion-button::after {
  filter: invert(1) opacity(0.7);
}

/* Inputs inside the card/accordion */
html:not([data-theme="light"]) .form-control {
  background-color: var(--wa-incoming) !important;
  color: var(--wa-text) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html:not([data-theme="light"]) .form-control::placeholder {
  color: var(--wa-muted) !important;
}
html:not([data-theme="light"]) .form-text {
  color: var(--wa-muted) !important;
}

/* Outline buttons in dark context */
html:not([data-theme="light"]) .btn-outline-light {
  color: var(--wa-text) !important;
  border-color: rgba(255,255,255,0.25) !important;
}
html:not([data-theme="light"]) .btn-outline-light:hover {
  background-color: rgba(255,255,255,0.12) !important;
}

/* Vanilla pages system (fixed) */
.tab-content .page {
  display: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.tab-content .page.active {
  display: block;    /* stays at opacity: 0 until .show is added */
}

.tab-content .page.show {
  opacity: 1;
}