/* Lo Mejor de Peru — demo-only chat theme override.
   Loaded AFTER the widget's own stylesheet (fetched live from Vercel), so
   these rules win the cascade without touching widget/lmp-chat.css at all.
   This file lives only in demo/ -- the real production widget on the
   actual site keeps its normal cream/terracotta look untouched unless
   Andres asks separately for that to change too. */

:root {
  /* Re-mapped onto the demo's warm-black + gold palette. The widget's own
     CSS uses these as CSS custom properties throughout, so redefining them
     here recolors almost everything without needing per-selector rules. */
  --lmp-terracotta: #c8a15a;       /* was reddish-brown -- now gold */
  --lmp-terracotta-dark: #a9813f;  /* gold hover/pressed state */
  --lmp-terracotta-light: #3a2f22;
  --lmp-gold: #dab873;             /* brighter gold, for accents on dark */
  --lmp-cream: #16110c;            /* was the light panel bg -- now warm black */
  --lmp-cream-dark: #2c2318;       /* card-image/summary-image placeholder bg */
  --lmp-ink: #f5ede0;              /* was dark text-on-white -- now cream text-on-dark */
  --lmp-ink-soft: #b7a996;
  --lmp-line: #3a2f22;
  --lmp-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ---- Surfaces that were hardcoded #fff in the widget's own CSS, not
   driven by a variable -- these need explicit overrides. ---- */

.lmp-panel {
  border: 1px solid var(--lmp-line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.lmp-header {
  background: #201911;
  border-bottom: 1px solid var(--lmp-terracotta);
}

.lmp-msg-assistant,
.lmp-typing,
.lmp-card,
.lmp-form-wrap,
.lmp-risk-ack,
.lmp-risk-disclosure-card {
  background: #241d15;
}

/* User-side elements keep a gold fill -- dark text reads better on gold
   than white does, so these flip to the page's ink color instead of #fff. */
.lmp-msg-user,
.lmp-success-pill,
.lmp-purchase-pill,
.lmp-send-btn,
.lmp-launcher {
  background: var(--lmp-terracotta);
  color: #16110c;
}

.lmp-msg-user { color: #16110c; }

.lmp-success-pill:hover,
.lmp-purchase-pill:hover,
.lmp-send-btn:hover,
.lmp-launcher:hover {
  background: var(--lmp-gold);
}

.lmp-summary-header {
  background: #201911;
  border-bottom: 1px solid var(--lmp-terracotta);
}

.lmp-input-row {
  background: #1c160f;
}

.lmp-input-row textarea {
  background: #241d15;
  color: var(--lmp-ink);
  font-size: 16px;
}

/* Card / summary price + link accents: terracotta-dark read fine on cream,
   but are too dark to read against this theme's black cards -- swap to the
   brighter gold used for hover states elsewhere. */
.lmp-card-price,
.lmp-card-link,
.lmp-form-error {
  color: var(--lmp-gold);
}

.lmp-card:hover .lmp-card-link {
  color: #fff;
}

/* Text size to match the demo page's own body copy (see .description in
   style.css, 16px) -- the widget's own CSS runs a bit larger (17-21px)
   for its own mobile-first reasons, which reads oversized next to this
   page's type. */
.lmp-msg,
.lmp-card-meta,
.lmp-summary-value,
.lmp-risk-ack-text,
.lmp-risk-disclosure-text,
.lmp-summary-note {
  font-size: 16px;
}

.lmp-header-title {
  font-size: 19px;
}

/* Error bubble: keep it visually distinct as an error (not just another
   gold/black card), but in a tone that belongs on this palette -- a muted
   wine-red instead of the light-pink used on the cream theme. */
.lmp-msg-error {
  background: #3a1f1a;
  color: #e8b8a8;
  border: 1px solid #5a3327;
}