/**
 * Hinta.ai Live Search widget styles. All classes prefixed `hinta-ai-`
 * to avoid colliding with theme styles. Uses CSS variables so the
 * merchant can override colors / typography from their own stylesheet:
 *
 *   .hinta-ai-dropdown {
 *     --hinta-ai-accent: #1e40af;
 *     --hinta-ai-radius: 4px;
 *   }
 *
 * Two-column FiboSearch-style layout: left column lists categories +
 * product hits, right column shows a preview of the focused product.
 * On viewports <768px we drop the right column and stack as a single
 * column; tap-to-navigate replaces the focus-then-preview interaction.
 */
.hinta-ai-dropdown {
  --hinta-ai-bg: #ffffff;
  --hinta-ai-fg: #1a1a1a;
  --hinta-ai-muted: #6b7280;
  --hinta-ai-border: #e5e7eb;
  --hinta-ai-active: #fff7ed;
  --hinta-ai-accent: #ff5a1f;
  --hinta-ai-accent-fg: #ffffff;
  --hinta-ai-chip-bg: #f3f4f6;
  --hinta-ai-radius: 10px;
  --hinta-ai-radius-sm: 6px;
  --hinta-ai-gap: 12px;

  position: absolute;
  display: none;
  box-sizing: border-box;
  background: var(--hinta-ai-bg);
  color: var(--hinta-ai-fg);
  border: 1px solid var(--hinta-ai-border);
  border-radius: var(--hinta-ai-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  z-index: 999999;
  overflow: hidden;
  /* Inherit the merchant's body font so the widget visually belongs to
     their store. Fall back to system stack only if inheritance breaks. */
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  /* Fallback cap only — widget.js sets an exact max-height inline from
     the live available viewport space (below or above the input) so the
     panel never runs off-screen and the body scrolls internally. */
  max-height: 520px;
  /* Keep scroll momentum inside the dropdown instead of chaining to the
     page behind it (matters on touch / mobile). */
  overscroll-behavior: contain;
}

/* Flex column so the banner, filter strip and footer stay pinned while
   the body is the one region that grows and scrolls. This is what makes
   "lots of results" scroll cleanly without clipping the footer, on every
   viewport. */
.hinta-ai-dropdown.hinta-ai-open {
  display: flex;
  flex-direction: column;
}

/* AI suggestion banner. Sits above the two-column body. Subtle tinted
   background + sparkle prefix to read as "assistive content", not as
   a product row. The label kicker is uppercase tiny text — visually
   distinct from section headers below so the user knows this is
   different in kind, not just another section. */
.hinta-ai-ai-banner {
  flex: 0 0 auto;
  /* Cap the banner so a long streamed answer scrolls within itself
     instead of pushing the product list off-screen. */
  max-height: 38%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 14px 12px;
  background: linear-gradient(180deg, #f5f3ff 0%, #faf5ff 100%);
  border-bottom: 1px solid var(--hinta-ai-border);
}

.hinta-ai-ai-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7c3aed;
  margin-bottom: 4px;
}

.hinta-ai-ai-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--hinta-ai-fg);
}

.hinta-ai-ai-icon {
  font-size: 14px;
  line-height: 1.45;
  flex-shrink: 0;
}

.hinta-ai-ai-text {
  min-width: 0;
  white-space: pre-wrap;
}

.hinta-ai-ai-pending {
  color: var(--hinta-ai-muted);
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  .hinta-ai-ai-banner {
    background: linear-gradient(180deg, #2e1065 0%, #1e1b4b 100%);
  }
  .hinta-ai-ai-label {
    color: #c4b5fd;
  }
}

/* Filter chip strip (Phase 4C). Renders structured intent extracted
   from the query — price range, brand, category, attributes — as
   dismissable pills so the shopper can see what the search understood
   and drop individual constraints. Sits between the AI banner and the
   two-column body; muted background reads as metadata, not as results. */
.hinta-ai-filter-strip {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  background: #fafafa;
  border-bottom: 1px solid var(--hinta-ai-border);
}

.hinta-ai-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 3px 4px 3px 10px;
  background: var(--hinta-ai-chip-bg);
  color: var(--hinta-ai-fg);
  border: 1px solid var(--hinta-ai-border);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.3;
}

.hinta-ai-filter-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.hinta-ai-filter-chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--hinta-ai-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  /* Inherit the merchant's font so the × glyph metrics match. */
  font-family: inherit;
}

.hinta-ai-filter-chip-close:hover,
.hinta-ai-filter-chip-close:focus {
  background: var(--hinta-ai-accent);
  color: var(--hinta-ai-accent-fg);
  outline: none;
}

.hinta-ai-filter-chip-more {
  cursor: pointer;
  color: var(--hinta-ai-muted);
  font-weight: 600;
  /* "+N lisää" pill is interactive but visually quieter than the
     constraint chips themselves. */
  font-family: inherit;
}

.hinta-ai-filter-chip-more:hover {
  color: var(--hinta-ai-accent);
  border-color: var(--hinta-ai-accent);
}

/* Mobile: enlarge tap targets to 32px while keeping the strip wrap-able
   so a 4-chip strip never forces horizontal scroll on a narrow phone. */
@media (max-width: 767px) {
  .hinta-ai-filter-chip {
    min-height: 32px;
    font-size: 13.5px;
  }
  .hinta-ai-filter-chip-close {
    width: 24px;
    height: 24px;
    font-size: 17px;
  }
}

@media (prefers-color-scheme: dark) {
  .hinta-ai-filter-strip {
    background: #111827;
  }
}

.hinta-ai-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--hinta-ai-muted);
}

/* Two-column body. Left ~60%, right ~40%. Right side gets a subtle
   left border so the visual split survives on minimal-CSS themes. */
.hinta-ai-body {
  /* Grow to fill the dropdown's remaining height; min-height:0 lets the
     grid children actually become scroll containers inside a flex parent
     (without it they'd expand to content height and the dropdown would
     clip instead of scroll). */
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  overflow: hidden;
}

.hinta-ai-col-left {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 0 8px;
  border-right: 1px solid var(--hinta-ai-border);
}

.hinta-ai-col-right {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hinta-ai-section-header {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hinta-ai-muted);
}

/* Category chips row. Wraps to a second line if there are 3 long names. */
.hinta-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 8px;
}

.hinta-ai-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--hinta-ai-chip-bg);
  color: var(--hinta-ai-fg);
  border-radius: 999px;
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.08s ease, color 0.08s ease;
  border: 1px solid transparent;
}

.hinta-ai-chip:hover,
.hinta-ai-chip.hinta-ai-active {
  background: var(--hinta-ai-accent);
  color: var(--hinta-ai-accent-fg);
}

.hinta-ai-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hinta-ai-hit {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--hinta-ai-gap);
  align-items: center;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.08s ease;
}

.hinta-ai-hit.hinta-ai-active,
.hinta-ai-hit:hover {
  background: var(--hinta-ai-active);
}

.hinta-ai-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--hinta-ai-radius-sm);
  overflow: hidden;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hinta-ai-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hinta-ai-thumb-placeholder {
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  font-weight: 700;
  font-size: 18px;
  color: #9a3412;
}

.hinta-ai-info {
  min-width: 0;
  overflow: hidden;
}

.hinta-ai-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hinta-ai-meta {
  color: var(--hinta-ai-muted);
  font-size: 12.5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hinta-ai-price {
  text-align: right;
  white-space: nowrap;
}

.hinta-ai-price strong {
  font-weight: 700;
  font-size: 15px;
}

/* Right preview column. */
.hinta-ai-preview-empty {
  margin: auto;
  color: var(--hinta-ai-muted);
  text-align: center;
  font-size: 13px;
  padding: 24px 8px;
}

.hinta-ai-preview-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: var(--hinta-ai-radius-sm);
  overflow: hidden;
}

.hinta-ai-preview-image img {
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.hinta-ai-preview-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

.hinta-ai-preview-brand {
  color: var(--hinta-ai-muted);
  font-size: 12.5px;
}

.hinta-ai-preview-price-gross {
  font-weight: 700;
  font-size: 18px;
}

.hinta-ai-preview-price-net {
  color: var(--hinta-ai-muted);
  font-size: 12px;
  margin-top: 2px;
}

.hinta-ai-preview-desc {
  color: var(--hinta-ai-fg);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.85;
}

.hinta-ai-preview-cta {
  display: inline-block;
  align-self: flex-start;
  background: var(--hinta-ai-accent);
  color: var(--hinta-ai-accent-fg);
  padding: 8px 14px;
  border-radius: var(--hinta-ai-radius-sm);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  margin-top: 4px;
}

.hinta-ai-preview-cta:hover {
  filter: brightness(0.95);
}

/* Footer: "show all N" link on the left, badge on the right. Pinned
   below the scrolling body so it stays reachable no matter how many
   results render. */
.hinta-ai-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: #fafafa;
  border-top: 1px solid var(--hinta-ai-border);
}

.hinta-ai-more {
  color: var(--hinta-ai-accent);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

.hinta-ai-more:hover {
  text-decoration: underline;
}

.hinta-ai-badge {
  font-size: 11px;
  color: var(--hinta-ai-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.hinta-ai-badge:hover {
  color: var(--hinta-ai-accent);
}

/* Mobile: single column. Right preview drops, the list takes the full
   width, and tap targets grow. The dropdown's height is set inline by
   widget.js from the live available space, so we no longer hardcode a
   vh cap here — the body simply fills it and scrolls. */
@media (max-width: 767px) {
  .hinta-ai-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .hinta-ai-col-left {
    border-right: none;
  }

  .hinta-ai-col-right {
    display: none;
  }

  /* Roomier rows + larger thumbs for finger-sized tap targets. */
  .hinta-ai-hit {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px 14px;
    min-height: 56px;
  }

  .hinta-ai-thumb {
    width: 56px;
    height: 56px;
  }

  .hinta-ai-name {
    font-size: 15px;
  }

  .hinta-ai-price strong {
    font-size: 16px;
  }

  /* Bigger, tappable category chips. */
  .hinta-ai-chip {
    padding: 8px 14px;
    font-size: 14px;
  }

  /* Comfortable footer touch target. */
  .hinta-ai-footer {
    padding: 16px 14px;
  }

  .hinta-ai-more {
    font-size: 14px;
  }
}

.hinta-ai-dropdown.hinta-ai-mobile .hinta-ai-col-right {
  display: none;
}

.hinta-ai-dropdown.hinta-ai-mobile .hinta-ai-body {
  grid-template-columns: minmax(0, 1fr);
}

@media (prefers-color-scheme: dark) {
  .hinta-ai-dropdown {
    --hinta-ai-bg: #1f2937;
    --hinta-ai-fg: #f3f4f6;
    --hinta-ai-muted: #9ca3af;
    --hinta-ai-border: #374151;
    --hinta-ai-active: #374151;
    --hinta-ai-chip-bg: #374151;
  }

  .hinta-ai-thumb,
  .hinta-ai-preview-image {
    background: #111827;
  }

  .hinta-ai-col-right,
  .hinta-ai-footer {
    background: #111827;
  }
}