/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Brand design tokens (mirrored from kazerice.com Shopify theme) ──────────
   --color-base-text:       rgb(61, 8, 27)   → #3d081b
   --color-base-background-1: #f2efdd          warm cream
   --color-base-accent-1:   rgb(153, 38, 33) → #992621  deep red
   --font-body-family:      Archivo, sans-serif
   --font-heading-family:   Asul, serif
──────────────────────────────────────────────────────────────────────────── */
:root {
  --color-bg:            #f2efdd;   /* base-background-1 */
  --color-surface:       #ffffff;
  --color-primary:       #992621;   /* base-accent-1 */
  --color-primary-hover: #7a1e1a;
  --color-border:        #d0c9b7;
  --color-text:          #3d081b;   /* base-text */
  --color-muted:         #8a5060;
  --color-user-bg:       #992621;   /* accent-1 — same as brand buttons */
  --color-user-fg:       #f2efdd;   /* base-solid-button-labels */
  --color-bot-bg:        #eceadb;   /* slightly darker than page bg */
  --color-bot-fg:        #3d081b;
  --radius:              12px;
  --radius-btn:          40px;      /* brand uses 40 px pill buttons */
  --font-body:           'Archivo', sans-serif;
  --font-heading:        'Asul', serif;
}

/* ── Layout ── */
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  justify-content: center;
  align-items: stretch;
}

#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  height: 100vh;
  height: 100dvh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: var(--color-surface);
  box-shadow: 0 0 40px rgba(61, 8, 27, .10);
}

/* ── Header ── */
header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

#logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  /* Fallback background so broken images still look intentional */
  background: transparent;
}

header h1 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;          /* Asul is naturally bold-looking at 400 */
  color: var(--color-primary);
  letter-spacing: 0.03em;
}

/* ── Chat window ── */
main { flex: 1; overflow: hidden; }

#chat-window {
  height: 100%;
  overflow-y: auto;
  overflow-y: overlay; /* overlay prevents scrollbar from consuming layout space */
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

/* ── Messages ── */
.message {
  max-width: 78%;
  margin-left: 18px;
  margin-right: 18px;
  padding: 12px 16px;
  border-radius: var(--radius);
  line-height: 1.6;
  word-break: break-word;
  font-size: 0.95rem;
}

.message.user {
  align-self: flex-end;
  background: var(--color-user-bg);
  color: var(--color-user-fg);
  border-bottom-right-radius: 3px;
  /* User bubbles are plain text — keep pre-wrap */
  white-space: pre-wrap;
}

.message.bot {
  align-self: flex-start;
  background: var(--color-bot-bg);
  color: var(--color-bot-fg);
  border-bottom-left-radius: 3px;
  /* No pre-wrap: rendered HTML handles whitespace */
}

/* ── Markdown content inside bot bubbles ── */
.message.bot p { margin: 0 0 0.6em; }
.message.bot p:last-child { margin-bottom: 0; }

.message.bot strong { font-weight: 700; color: var(--color-primary); }
.message.bot em     { font-style: italic; }

.message.bot h1,
.message.bot h2,
.message.bot h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-primary);
  margin: 0.8em 0 0.3em;
  line-height: 1.3;
}
.message.bot h1 { font-size: 1.15rem; }
.message.bot h2 { font-size: 1.05rem; }
.message.bot h3 { font-size: 0.97rem; }

.message.bot ul,
.message.bot ol {
  padding-left: 1.4em;
  margin: 0.4em 0 0.6em;
}
.message.bot li { margin-bottom: 0.25em; }

.message.bot code {
  font-family: 'Courier New', monospace;
  background: rgba(153, 38, 33, .08);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.88em;
}

.message.bot pre {
  background: rgba(61, 8, 27, .06);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 0.5em 0;
}
.message.bot pre code { background: none; padding: 0; }

.message.bot hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.6em 0;
}

.message.bot a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Blinking cursor while streaming */
.message.bot.streaming::after {
  content: '▋';
  display: inline-block;
  animation: blink 1s step-start infinite;
  color: var(--color-primary);
  margin-left: 2px;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Error state */
.message.bot.error {
  color: #992621;
  background: #fdecea;
}

/* Typing indicator */
.message.bot.typing {
  color: var(--color-muted);
  font-style: italic;
  font-size: 0.85rem;
  animation: pulse 1.5s ease-in-out infinite;
  white-space: pre-wrap;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}

/* ── Welcome state ── */
#welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px 20px;
  margin: 0 18px;
  gap: 12px;
}

#welcome-icon { font-size: 3.5rem; line-height: 1; }

#welcome h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-primary);
}

#welcome p {
  color: var(--color-muted);
  max-width: 400px;
  line-height: 1.5;
}

#suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.chip {
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-btn);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-primary);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.chip:hover {
  background: var(--color-primary);
  color: var(--color-user-fg);
}

/* ── Footer / input ── */
footer {
  border-top: 1px solid var(--color-border);
  padding: 12px 18px;
  background: var(--color-surface);
}

#chat-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

#input {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color .15s;
  overflow-y: auto;
  max-height: 120px;
}

#input:focus {
  outline: none;
  border-color: var(--color-primary);
}

#send-btn {
  flex-shrink: 0;
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: var(--color-user-fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  height: fit-content;
  /* Brand shadow (matches Shopify theme --buttons-shadow) */
  box-shadow: 0 2px 0 rgba(61, 8, 27, .55);
}

#send-btn:hover:not(:disabled) { background: var(--color-primary-hover); }
#send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Status indicator ── */
#status-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #9e9e9e;        /* neutral grey before first poll */
  transition: background .3s ease;
}

#status-dot.online {
  background: #4caf50;        /* green — standard status-light convention */
  box-shadow: 0 0 0 0 rgba(76, 175, 80, .6);
  animation: status-pulse 2.5s ease-out infinite;
}

#status-dot.offline {
  background: #e53935;        /* red — aligns with brand error color family */
  animation: none;
}

@keyframes status-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(76, 175, 80, .6); }
  70%  { box-shadow: 0 0 0 8px  rgba(76, 175, 80, 0);  }
  100% { box-shadow: 0 0 0 0    rgba(76, 175, 80, 0);  }
}

/* ── Language selector ── */
#lang-select {
  margin-left: auto;           /* pushes selector to the right before the status dot */
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23992621'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 5px 28px 5px 12px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .15s;
  flex-shrink: 0;
}

#lang-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Remove the auto margin from the status dot — lang-select now owns it */
#status-dot {
  margin-left: 10px;
}

/* ── Accessibility helper ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Inline product images in bot responses ── */
.message.bot img {
    max-width: 220px;
    height: auto;
    display: block;
    margin-top: 8px;
    border-radius: 6px;
}

/* ── Responsive ── */
@media (max-width: 500px) {
  .message    { max-width: 92%; }
  header h1   { font-size: 1rem; }
  #lang-select { font-size: 0.75rem; padding: 4px 24px 4px 8px; }
}

/* ── Scrollbar styling (thin, non-intrusive) ── */
#chat-window {
  scrollbar-width: thin;                /* Firefox: thin scrollbar */
  scrollbar-color: rgba(61, 8, 27, .2) transparent;
}

#chat-window::-webkit-scrollbar {
  width: 6px;
}

#chat-window::-webkit-scrollbar-track {
  background: transparent;
}

#chat-window::-webkit-scrollbar-thumb {
  background: rgba(61, 8, 27, .2);
  border-radius: 3px;
}

#chat-window::-webkit-scrollbar-thumb:hover {
  background: rgba(61, 8, 27, .4);
}