:root {
  --lmp-terracotta: #a2472f;
  --lmp-terracotta-dark: #833a26;
  --lmp-terracotta-light: #e8d1cb;
  --lmp-gold: #c8a15a;
  --lmp-cream: #faf6f0;
  --lmp-cream-dark: #f0e9dd;
  --lmp-ink: #2b241f;
  --lmp-ink-soft: #6b6058;
  --lmp-line: #e4dbcc;
  --lmp-radius: 14px;
  --lmp-font-serif: Georgia, "Times New Roman", serif;
  --lmp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

#lmp-chat-root {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  font-family: var(--lmp-font-sans);
  color: var(--lmp-ink);
  /* iOS Safari has ignored the viewport meta tag's user-scalable=no /
     maximum-scale=1 for manual pinch gestures since iOS 10 (a permanent
     accessibility override) -- the JS zoom-lock in lmp-chat.js only
     covers the auto-zoom-on-input-focus case, not a deliberate pinch.
     touch-action is the one thing iOS still honors for this: manipulation
     permits normal panning/scrolling/tapping but drops pinch-zoom and
     double-tap-zoom specifically, scoped to the chat widget only. */
  touch-action: manipulation;
}

#lmp-chat-root * {
  box-sizing: border-box;
}

.lmp-launcher {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--lmp-terracotta);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(45, 26, 15, 0.25);
  transition: transform 0.15s ease, background 0.15s ease;
}

.lmp-launcher:hover {
  background: var(--lmp-terracotta-dark);
  transform: translateY(-1px);
}

.lmp-launcher-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.lmp-panel {
  display: none;
  flex-direction: column;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 48px);
  background: var(--lmp-cream);
  border-radius: var(--lmp-radius);
  box-shadow: 0 20px 60px rgba(30, 18, 10, 0.28);
  overflow: hidden;
  overscroll-behavior: contain;
  border: 1px solid var(--lmp-line);
}

.lmp-panel.lmp-open {
  display: flex;
}

.lmp-header {
  background: var(--lmp-terracotta);
  color: #fff;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.lmp-header-title {
  font-family: var(--lmp-font-serif);
  font-size: 21px;
  letter-spacing: 0.2px;
  margin: 0;
}

.lmp-header-subtitle {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
  margin: 2px 0 0;
}

.lmp-close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 34.5px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  opacity: 0.85;
}

.lmp-close-btn:hover {
  opacity: 1;
}

.lmp-messages {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--lmp-cream);
}

.lmp-msg {
  max-width: 90%;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.lmp-msg-assistant {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--lmp-line);
  border-bottom-left-radius: 4px;
}

.lmp-msg-user {
  align-self: flex-end;
  background: var(--lmp-terracotta);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Lives inside the summary card's own padded rows, right after the last
   detail row -- the purchase button sits on the left, and the completion
   timestamp appears to its right in the same row once purchased. */
.lmp-summary-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.lmp-success-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--lmp-terracotta);
  color: #fff;
  font-weight: 600;
  font-size: 16.5px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 10px 10px;
  white-space: nowrap;
}

.lmp-success-timestamp {
  flex-shrink: 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--lmp-ink-soft);
  white-space: nowrap;
}

.lmp-check-icon,
.lmp-cart-icon {
  flex-shrink: 0;
}

.lmp-check-icon.lmp-icon-animate .lmp-check-circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: lmp-circle-in 0.25s ease-out both;
}

.lmp-check-icon.lmp-icon-animate .lmp-check-path {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: lmp-check-draw 0.25s ease-out both;
  animation-delay: 0.2s;
}

@keyframes lmp-circle-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes lmp-check-draw {
  to { stroke-dashoffset: 0; }
}

.lmp-msg-error {
  align-self: center;
  background: #f6e4de;
  color: var(--lmp-terracotta-dark);
  border: 1px solid #e6c3b6;
  font-size: 16px;
}

.lmp-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--lmp-line);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}

.lmp-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lmp-ink-soft);
  opacity: 0.5;
  animation: lmp-bounce 1.1s infinite ease-in-out;
}

.lmp-typing span:nth-child(2) { animation-delay: 0.15s; }
.lmp-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes lmp-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.lmp-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: flex-start;
  max-width: 90%;
}

.lmp-card {
  display: flex;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--lmp-line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lmp-card:hover {
  border-color: var(--lmp-gold);
  box-shadow: 0 2px 10px rgba(45, 26, 15, 0.08);
}

.lmp-card-image {
  width: 96px;
  /* No fixed height -- .lmp-card is a row flex container, whose default
     align-items:stretch already matches a child's height to the card's
     actual height (driven by .lmp-card-body's content) as long as nothing
     here overrides it with an explicit height, like the old 96px did. */
  align-self: stretch;
  flex-shrink: 0;
  background: var(--lmp-cream-dark) center / cover no-repeat;
}

.lmp-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lmp-card-name {
  font-family: var(--lmp-font-serif);
  font-size: 17.5px;
  line-height: 21px;
  margin: 0;
  color: var(--lmp-ink);
}

.lmp-card-meta {
  font-size: 15px;
  color: var(--lmp-ink-soft);
  margin: 0;
}

.lmp-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.lmp-card-price {
  font-size: 15.5px;
  color: var(--lmp-terracotta-dark);
  font-weight: 600;
}

.lmp-card-link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lmp-terracotta);
  border-bottom: 1px solid var(--lmp-gold);
  padding-bottom: 1px;
}

.lmp-card:hover .lmp-card-link {
  color: var(--lmp-terracotta-dark);
}

.lmp-form-wrap {
  align-self: flex-start;
  max-width: 90%;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--lmp-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lmp-summary-header {
  background: var(--lmp-terracotta);
  color: #fff;
  padding: 20px 18px;
  flex-shrink: 0;
}

.lmp-summary-header-title {
  font-family: var(--lmp-font-serif);
  font-size: 17px;
  font-weight: bold;
  margin: 0;
}

.lmp-summary-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--lmp-cream-dark);
}

.lmp-summary-rows {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lmp-summary-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lmp-summary-label {
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--lmp-ink-soft);
  margin: 0;
}

.lmp-summary-value {
  font-size: 17px;
  color: var(--lmp-ink);
  margin: 0;
}

/* Same compact, bubble-notched look as .lmp-success-pill (Request sent),
   just clickable -- Proceed to purchase sits in that exact spot and
   becomes Purchase completed in place, no element swap needed. */
.lmp-purchase-pill {
  border: none;
  margin: 5px 0;
  cursor: pointer;
  font-family: inherit;
}

.lmp-purchase-pill:hover {
  background: var(--lmp-terracotta-dark);
}

.lmp-purchase-pill:disabled {
  cursor: default;
}

.lmp-form-error {
  font-size: 15px;
  color: var(--lmp-terracotta-dark);
  margin: 0;
}

.lmp-summary-note {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lmp-ink-soft);
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--lmp-line);
  text-align: justify;
}

.lmp-risk-ack {
  margin: 4px 0 0;
  padding: 10px;
  border: 1px solid var(--lmp-line);
  border-radius: 10px;
  background: #fff;
}

.lmp-risk-disclosure-card {
  align-self: flex-start;
  max-width: 90%;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--lmp-line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lmp-risk-disclosure-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--lmp-ink);
  margin: 0;
  text-align: justify;
}

.lmp-risk-disclosure-btn {
  align-self: flex-start;
}

.lmp-risk-disclosure-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.lmp-risk-ack-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.lmp-risk-ack-checkbox {
  flex-shrink: 0;
  margin-top: 3px;
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.lmp-risk-ack-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lmp-ink);
  text-align: justify;
}

.lmp-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--lmp-line);
  background: #fff;
  flex-shrink: 0;
}

.lmp-input-row textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--lmp-line);
  border-radius: 10px;
  padding: 10px 12px;
  /* 16px is the threshold below which iOS Safari auto-zooms the whole
     page on focus (to make small text legible) -- confirmed live: typing
     in this field left the page zoomed in even after the keyboard closed.
     16px (was 14px) sits right at that threshold, so focus never triggers
     the zoom in the first place. */
  font-size: 19px;
  font-family: inherit;
  max-height: 90px;
  color: var(--lmp-ink);
}

.lmp-input-row textarea:focus {
  outline: 2px solid var(--lmp-gold);
  outline-offset: 1px;
}

.lmp-send-btn {
  background: var(--lmp-terracotta);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.lmp-send-btn:hover {
  background: var(--lmp-terracotta-dark);
}

.lmp-send-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 480px) {
  .lmp-panel {
    /* Anchoring both edges and letting the browser compute the width
       (instead of `width: calc(100vw - 32px)`) sidesteps a real iOS
       Safari bug where 100vw can measure wider than the actual visible
       viewport, pushing the panel (and its input row / send button)
       partly off-screen -- confirmed on a real device even though Chrome's
       own mobile emulation rendered it correctly. left+right is immune to
       that miscalculation since it's not vw-based at all. */
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    height: calc(100vh - 100px);
    /* dvh (dynamic viewport height) tracks the browser's actual visible
       area as it changes -- address bar hiding, keyboard opening -- unlike
       vh, which mobile Safari/Chrome compute against the LARGEST possible
       viewport. Older browsers that don't understand this line ignore it
       and keep the vh value above. */
    height: calc(100dvh - 100px);
  }
  .lmp-launcher {
    right: 16px;
    bottom: 16px;
  }
}