:root {
  --bg:            #f6f8fb;
  --surface:       #ffffff;
  --border:        #e5e9f0;
  --text:          #0b1220;
  --muted:         #6b7686;
  --accent:        #1e4d8c;
  --accent-hover:  #163f74;
  --user-bg:       #dbeafe;
  --user-fg:       #1e3a8a;
  --danger-bg:     #fff5f5;
  --danger-fg:     #a12b2b;
  --danger-border: #f4c8c8;
  --radius:        10px;
  --shadow:        0 2px 8px rgba(30, 77, 140, 0.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  min-height: 100vh;
}

.topbar {
  height: 3px;
  background: var(--accent);
  width: 100%;
}

.chat {
  max-width: 900px;
  margin: 48px auto 64px;
  padding: 24px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── Collapsible header ──────────────────────────────────────
   Title is a clickable button with a chevron. Body collapses by
   default, matching the store's other accessory-picker widgets. */

.chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.chat__header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.chat__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.chat__chevron {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--text);
  transition: transform 0.2s ease;
}
.chat--open .chat__chevron {
  transform: rotate(180deg);
}

.chat__body {
  display: none;
  margin-top: 24px;
}
.chat--open .chat__body {
  display: block;
}

/* ── Suggested question buttons ─────────────────────────────── */

.chat__suggested {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.chat__suggested:empty { display: none; }

.chat__suggested[data-compact] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.chat__suggested[data-compact] .chat__suggested-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.chat__suggested-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.chat__suggested-btn:hover {
  background: #f0f6ff;
  border-color: #bfd6f2;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.chat__suggested-btn:active { transform: translateY(0); }
.chat__suggested-btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

.chat__suggested[data-compact] .chat__suggested-btn {
  padding: 12px 14px;
  font-size: 14px;
}

.chat__sparkle {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* ── Input row ─────────────────────────────────────────────── */

.chat__form {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 6px 6px 20px;
}

.chat__input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  padding: 14px 8px 14px 0;
  min-width: 0;
}
.chat__input::placeholder { color: var(--muted); }

.chat__send {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.chat__send:hover { background: var(--accent-hover); }
.chat__send:active { transform: scale(0.95); }
.chat__send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat__send svg { width: 18px; height: 18px; }

/* ── Conversation thread ───────────────────────────────────── */

/* Fixed-height scrollable thread. Older messages scroll up out of view so the
   preview UI doesn't grow past the viewport as the shopper keeps asking. The
   latest question is pinned to the top of the box via scrollLatestQuestionToTop
   in chatbot.js. */
.chat__thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  padding-right: 4px;
}
.chat__thread:empty { display: none; }

.chat__msg--user {
  align-self: flex-end;
  max-width: 88%;
  padding: 12px 18px;
  background: var(--user-bg);
  color: var(--user-fg);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  word-wrap: break-word;
}

.chat__msg--ai {
  align-self: stretch;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  word-wrap: break-word;
}
.chat__msg--ai p { margin: 0 0 8px; }
.chat__msg--ai p:last-child { margin-bottom: 0; }
.chat__msg--ai ul { margin: 8px 0 4px; padding-left: 22px; }
.chat__msg--ai li { margin: 4px 0; }
.chat__msg--ai strong { font-weight: 600; }

.chat__msg--error {
  align-self: stretch;
  padding: 12px 16px;
  background: var(--danger-bg);
  color: var(--danger-fg);
  border: 1px solid var(--danger-border);
  border-radius: 10px;
  font-size: 14px;
}

.chat__thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  padding: 6px 0;
  align-self: flex-start;
}
.chat__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: chat-bounce 1.2s infinite ease-in-out;
}
.chat__dot:nth-child(2) { animation-delay: 0.15s; }
.chat__dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

/* ── Product recommendation cards ──────────────────────────── */

.chat__recs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.chat__recs-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.chat__rec {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.chat__rec:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.chat__rec-img {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  background: #f1f5f9;
}
.chat__rec-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
.chat__rec-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat__rec-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat__rec-price {
  font-size: 13px;
  color: var(--text);
}
.chat__rec-reason {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Footer ────────────────────────────────────────────────── */

.chat__footer {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-weight: 500;
}

@media (max-width: 560px) {
  .chat { padding: 0 16px; margin-top: 32px; }
  .chat__title { font-size: 22px; }
  .chat__suggested-btn { font-size: 14px; padding: 14px 16px; }
  .chat__suggested[data-compact] { grid-template-columns: 1fr; }
}