/* Filament Radar web chatbot — mobile-first, no framework. */

:root {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --bg-bubble-user: #2563eb;
  --bg-bubble-bot: #1e293b;
  --bg-input: #1e293b;
  --bg-chip: #334155;
  --bg-chip-hover: #475569;
  --bg-product: #1e293b;
  --bg-variant: #0f172a;
  --fg: #e2e8f0;
  --fg-muted: #94a3b8;
  --fg-strong: #f8fafc;
  --accent: #60a5fa;
  --accent-strong: #3b82f6;
  --price: #10b981;
  --strike: #94a3b8;
  --discount: #f87171;
  --deal: #fbbf24;
  --border: #334155;
  --radius: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

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

/* ─── Topbar ────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px 8px;
  padding-top: max(12px, env(safe-area-inset-top));
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 760px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.brand-logo { font-size: 22px; }
.brand-name { font-size: 18px; color: var(--fg-strong); }

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topbar-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.topbar-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .topbar-nav { gap: 10px; }
  .topbar-link { font-size: 13px; }
}

.disclosure {
  margin: 8px auto 0;
  max-width: 760px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-muted);
}

/* ─── Chat stream ───────────────────────────────────────────────── */

.chat {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--radius);
  line-height: 1.5;
  font-size: 15px;
  word-wrap: break-word;
}

.bubble-user {
  align-self: flex-end;
  background: var(--bg-bubble-user);
  color: white;
  border-bottom-right-radius: 4px;
}

.bubble-bot {
  align-self: flex-start;
  background: var(--bg-bubble-bot);
  color: var(--fg);
  border-bottom-left-radius: 4px;
  max-width: 95%;
}

.bubble p {
  margin: 0 0 8px;
}
.bubble p:last-child { margin-bottom: 0; }

/* ─── Example chips ─────────────────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chip {
  background: var(--bg-chip);
  color: var(--fg);
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.chip:hover, .chip:focus {
  background: var(--bg-chip-hover);
  outline: none;
}

.chip-help {
  background: rgba(96, 165, 250, 0.18);
  color: var(--accent);
  font-weight: 600;
}

.chip-help:hover, .chip-help:focus {
  background: rgba(96, 165, 250, 0.28);
}

/* Subtle one-line nudge below the example chips pointing at the
   Hilfe command for users who want to learn the syntax. */
.help-tip {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.help-tip strong { color: var(--accent); }

/* ─── Product cards ─────────────────────────────────────────────── */

.results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.product {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-product);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.product-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  background: var(--bg-variant);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-image-placeholder {
  color: var(--fg-muted);
  font-size: 24px;
}

.product-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-strong);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-title a {
  color: inherit;
  text-decoration: none;
}
.product-title a:hover { text-decoration: underline; }

.product-meta {
  font-size: 12px;
  color: var(--fg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.product-meta .dot::before {
  content: "·";
  margin-right: 4px;
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.price-now {
  font-size: 17px;
  font-weight: 700;
  color: var(--price);
}

.price-per-kg {
  font-size: 12px;
  color: var(--fg-muted);
}

.price-was {
  font-size: 13px;
  color: var(--strike);
  text-decoration: line-through;
}

.price-discount {
  font-size: 12px;
  color: var(--discount);
  font-weight: 600;
}

.price-rise {
  font-size: 12px;
  color: var(--deal);
  font-weight: 600;
}

.deal-badge {
  display: inline-block;
  background: var(--deal);
  color: #1f2937;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
}

/* ─── Price-history button + reduction bar ──────────────────────── */

.price-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.ph-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-chip);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.ph-btn:hover, .ph-btn:focus { background: var(--bg-chip-hover); outline: none; }
.ph-btn[aria-expanded="true"] { background: var(--bg-chip-hover); }
.ph-btn-icon { font-size: 13px; }

/* The reduction bar starts right of the button and fills the rest of
   the row. A coloured fill visualises the deviation from the 4-week
   average; the label states the verdict. */
.reduction-bar {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-variant);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.reduction-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px 0 0 6px;
  opacity: 0.85;
}

.reduction-bar-label {
  position: relative;
  z-index: 1;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-strong);
}

.reduction-bar--echte_reduzierung .reduction-bar-fill { background: var(--price); }
.reduction-bar--lockangebot_verdacht .reduction-bar-fill { background: var(--deal); }
.reduction-bar--teurer .reduction-bar-fill { background: var(--discount); }
.reduction-bar--marktueblich .reduction-bar-fill { background: var(--bg-chip-hover); }

/* ─── Price-history chart panel ─────────────────────────────────── */

.ph-panel {
  margin-top: 8px;
  padding: 10px;
  background: var(--bg-variant);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.ph-loading { display: flex; justify-content: center; padding: 12px; }

.ph-empty {
  margin: 0;
  font-size: 12px;
  color: var(--fg-muted);
}

.ph-svg {
  width: 100%;
  height: auto;
  display: block;
}

.ph-area { fill: var(--accent); opacity: 0.08; }
.ph-line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.ph-dot  { fill: var(--accent); stroke: var(--bg-card); stroke-width: 1.5; }

.ph-svg--echte_reduzierung .ph-line,
.ph-svg--echte_reduzierung .ph-dot { stroke: var(--price); }
.ph-svg--echte_reduzierung .ph-dot { fill: var(--price); }
.ph-svg--echte_reduzierung .ph-area { fill: var(--price); }

.ph-svg--lockangebot_verdacht .ph-line,
.ph-svg--lockangebot_verdacht .ph-dot { stroke: var(--deal); }
.ph-svg--lockangebot_verdacht .ph-dot { fill: var(--deal); }
.ph-svg--lockangebot_verdacht .ph-area { fill: var(--deal); }

.ph-svg--teurer .ph-line,
.ph-svg--teurer .ph-dot { stroke: var(--discount); }
.ph-svg--teurer .ph-dot { fill: var(--discount); }
.ph-svg--teurer .ph-area { fill: var(--discount); }

.ph-avg-line {
  stroke: var(--fg-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}

.ph-jump { stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.55; }
.ph-jump-up { stroke: var(--discount); }
.ph-jump-down { stroke: var(--price); }

.ph-axis {
  fill: var(--fg-muted);
  font-size: 8px;
  font-family: inherit;
}
.ph-avg-label { font-size: 7.5px; }

.ph-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg);
}
.ph-note--echte_reduzierung { color: var(--price); }
.ph-note--lockangebot_verdacht { color: var(--deal); }
.ph-note--teurer { color: var(--discount); }

.ph-extremes {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--fg-muted);
}

.flags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.flag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-variant);
  color: var(--fg-muted);
}

.flag-ams { color: var(--accent); }
.flag-abrasive { color: var(--discount); }

.reviews {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.reviews-stars { color: var(--deal); }

.variants {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.variant {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--bg-variant);
  color: var(--fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.variant:hover { background: var(--bg-chip-hover); }

.variant-emoji { font-size: 12px; }

.product-cta {
  display: block;
  margin-top: 8px;
  background: var(--accent-strong);
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
}

.product-cta:hover { background: var(--accent); }

/* ─── Composer (bottom input) ───────────────────────────────────── */

.composer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg);
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  position: sticky;
  bottom: 0;
}

#composer-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--fg);
  outline: none;
  font-family: inherit;
}

#composer-input:focus {
  border-color: var(--accent);
}

#composer-send {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent-strong);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

#composer-send:hover { background: var(--accent); }
#composer-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Brand-correction + palette hints ─────────────────────────── */

.brand-correction,
.palette-hint,
.related-hint {
  margin: 4px 0 8px;
  padding: 8px 12px;
  background: rgba(96, 165, 250, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--fg);
}

.related-hint {
  margin-top: 12px;
}

.brand-correction strong { color: var(--fg-strong); }

/* ─── CMYK block ────────────────────────────────────────────────── */

.cmyk-heading {
  margin: 14px 0 6px;
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
}

.cmyk-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cmyk-slot-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  padding-left: 4px;
}

/* ─── Pack-mix hint ─────────────────────────────────────────────── */

.pack-hint {
  margin: 4px 0 8px;
  padding: 8px 12px;
  background: rgba(96, 165, 250, 0.1);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--fg);
}

/* ─── Privacy / cookieless note in the welcome bubble ───────────── */

.privacy-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(96, 165, 250, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.privacy-note strong { color: var(--fg); }

.privacy-note a {
  color: var(--accent);
  text-decoration: none;
}

.privacy-note a:hover { text-decoration: underline; }

/* ─── Help content ──────────────────────────────────────────────── */

.help h4 {
  margin: 12px 0 4px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.help h4:first-child { margin-top: 0; }

.help ul {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
}

.help li {
  margin: 2px 0;
}

.help strong {
  color: var(--fg-strong);
  font-weight: 600;
}

/* ─── Typing indicator ──────────────────────────────────────────── */

.typing {
  display: inline-flex;
  gap: 4px;
}

.typing span {
  width: 6px;
  height: 6px;
  background: var(--fg-muted);
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite ease-in-out;
}

.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ─── Responsive tweaks ─────────────────────────────────────────── */

@media (min-width: 600px) {
  .bubble { font-size: 15px; }
  .product-image { width: 96px; height: 96px; }
}