/* VNIBUY — storefront chatbot (AI-3). Every colour, radius, spacing and font value comes from
   tokens.css: no hex literals and no second design system. */

/* ---------- Launcher ---------- */
.chat-launcher {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: var(--z-chat-launcher);
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-4) 0 var(--space-3);
  background: var(--color-primary); color: var(--color-surface);
  border: 1px solid var(--color-primary); border-radius: var(--radius-full);
  font-weight: 600; line-height: 1; box-shadow: var(--shadow-lg);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chat-launcher:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.chat-launcher:active { background: var(--color-primary-active); transform: none; }
.chat-launcher__icon { display: inline-flex; }
.chat-launcher__icon .icon { width: 22px; height: 22px; }
.chat-launcher__label { white-space: nowrap; }
.chat-launcher__dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-success-soft); box-shadow: 0 0 0 2px var(--color-primary-hover);
}
/* While the panel is open the launcher steps aside instead of stacking on top of it. */
body.chat-open .chat-launcher { display: none; }
/* Cart and checkout end with a primary action block at the bottom edge. chatbot.js measures it
   and sets --sticky-actions-h so the launcher rests just above, never on it. */
body.has-sticky-actions .chat-launcher {
  bottom: calc(var(--gutter) + var(--sticky-actions-h, 0px) + env(safe-area-inset-bottom));
}

/* ---------- Panel shell ---------- */
.chat { position: fixed; inset: 0; z-index: var(--z-chat-panel); pointer-events: none; }
.chat__backdrop { position: absolute; inset: 0; background: var(--color-overlay); opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.chat__panel {
  position: absolute; display: flex; flex-direction: column; pointer-events: auto;
  background: var(--color-surface); box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; min-width: 0;
}

/* ---------- Head ---------- */
.chat__head {
  display: flex; align-items: center; gap: var(--space-3); flex: none;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--color-primary); color: var(--color-surface);
}
.chat__avatar {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: var(--radius-full); background: var(--navy-500); color: var(--color-surface);
  font-weight: 700; line-height: 1;
}
.chat__identity { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.chat__title { font-weight: 700; line-height: var(--lh-tight); }
.chat__status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); color: var(--navy-200); }
.chat__status-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-success-soft); }
.chat__head-button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--color-surface);
}
.chat__head-button:hover { background: var(--navy-500); }

/* ---------- Log ---------- */
.chat__log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); background: var(--color-bg);
}
.chat__log:focus { outline: none; }

.chat__welcome { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: var(--space-4); }
.chat__welcome-title { margin-bottom: var(--space-1); font-weight: 600; }
.chat__welcome-lede { margin-bottom: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.chat__starters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chat__starter {
  min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-full); background: var(--color-primary-tint); color: var(--color-primary);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1; text-align: left;
}
.chat__starter:hover { background: var(--color-primary-soft); }

/* Bubbles */
.chat__turn { display: flex; flex-direction: column; gap: var(--space-2); max-width: 100%; }
.chat__turn--visitor { align-items: flex-end; }
.chat__bubble {
  max-width: 86%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  font-size: var(--fs-sm); line-height: var(--lh-body); overflow-wrap: anywhere; white-space: pre-line;
}
.chat__turn--visitor .chat__bubble { background: var(--color-primary); color: var(--color-surface); border-bottom-right-radius: var(--radius-sm); }
.chat__turn--assistant .chat__bubble { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-bottom-left-radius: var(--radius-sm); }
.chat__bubble--error { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); }
.chat__bubble--notice { background: var(--color-warning-soft); border-color: var(--color-accent); color: var(--color-warning); }
.chat__note { font-size: var(--fs-xs); color: var(--color-text-muted); max-width: 86%; }

/* Thinking indicator */
.chat__thinking { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-4); }
.chat__thinking span { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--navy-300); animation: chat-bounce 1.1s infinite ease-in-out; }
.chat__thinking span:nth-child(2) { animation-delay: .15s; }
.chat__thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Product cards ---------- */
/* Same visual language as .product-card, laid out horizontally to fit the panel width. */
.chat__products { display: flex; flex-direction: column; gap: var(--space-2); max-width: 86%; }
.chat__product {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3);
  padding: var(--space-3); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--card-radius);
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.chat__product:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.chat__product-media { aspect-ratio: var(--img-ratio-product); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.chat__product-media img { width: 100%; height: 100%; object-fit: contain; }
.chat__product-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: var(--color-primary-tint); color: var(--navy-300); font-size: var(--fs-xs); }
.chat__product-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.chat__product-name {
  margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--color-text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.chat__product-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.chat__product-meta .price__amount { font-size: var(--fs-sm); }
.chat__product-action {
  align-self: flex-start; margin-top: var(--space-1); min-height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font-size: var(--fs-xs); font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center;
}
.chat__product-action:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }

/* ---------- Composer ---------- */
.chat__composer {
  flex: none; display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-2);
  background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.chat__input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 120px; resize: none;
  padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); font-size: var(--fs-sm); line-height: var(--lh-body);
}
.chat__input:focus-visible { border-color: var(--color-primary); }
.chat__input:disabled { background: var(--color-surface-2); color: var(--color-text-muted); }
.chat__send {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--color-primary); border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--color-surface);
}
.chat__send:hover:not(:disabled) { background: var(--color-primary-hover); }
.chat__send:disabled { background: var(--color-border); border-color: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }
.chat__disclaimer { flex: none; margin: 0; padding: 0 var(--space-4) var(--space-3); background: var(--color-surface); font-size: var(--fs-xs); color: var(--color-text-muted); }

/* =====================================================================
   Mobile first: bottom sheet
   ===================================================================== */
.chat__panel {
  left: 0; right: 0; bottom: 0; top: auto;
  height: min(86vh, 86dvh);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
  transform: translateY(100%); transition: transform var(--dur-base) var(--ease);
  /* Keeps the composer clear of the home indicator and of iOS keyboard insets. */
  padding-bottom: env(safe-area-inset-bottom);
}
.chat.is-open .chat__panel { transform: none; }
.chat.is-open .chat__backdrop { opacity: 1; }

body.chat-open { overflow: hidden; }

/* =====================================================================
   Desktop: floating panel
   ===================================================================== */
@media (min-width: 768px) {
  .chat { pointer-events: none; }
  .chat__backdrop { display: none; }
  .chat__panel {
    left: auto; right: var(--gutter); bottom: var(--gutter); top: auto;
    width: 400px; height: min(620px, calc(100vh - 2 * var(--gutter)));
    border-radius: var(--radius-lg); border-bottom: 1px solid var(--color-border);
    transform: translateY(12px); opacity: 0;
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
    padding-bottom: 0;
  }
  .chat.is-open .chat__panel { transform: none; opacity: 1; }
  /* Floating panel does not take over the page, so the page keeps scrolling. */
  body.chat-open { overflow: auto; }
}

@media (max-width: 767.98px) {
  /* A labelled pill costs too much width next to the sticky cart controls; collapse to a FAB. */
  .chat-launcher { right: var(--space-3); bottom: var(--space-3); padding: 0; width: 52px; height: 52px; justify-content: center; }
  .chat-launcher__label { display: none; }
  .chat-launcher__icon .icon { width: 24px; height: 24px; }
  .chat-launcher__dot { position: absolute; top: 4px; right: 4px; }
  body.has-sticky-actions .chat-launcher { bottom: calc(var(--space-3) + var(--sticky-actions-h, 0px) + env(safe-area-inset-bottom)); }
  .chat__bubble, .chat__products, .chat__note { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__panel, .chat__backdrop { transition: none; }
}