:root {
  /* Kapruka brand palette — deep royal purple #402970 + gold #F8DA08, warm
     purple-tinted neutrals. (`--blue` keeps its name for compatibility but now
     carries the brand purple, so all existing usages re-skin at once.) */
  --ink: #1a1622;
  --muted: #665c77;
  --soft: #faf9fc;
  --panel: rgba(255, 255, 255, 0.9);
  --surface: #ffffff;
  --surface-2: #faf9fc;
  --sunk: #f3effa;
  --line: rgba(64, 41, 112, 0.12);
  --hair-2: rgba(64, 41, 112, 0.08);
  --blue: #402970;   /* PRIMARY — Kapruka royal purple (was blue) */
  --brand: #402970;
  --brand-700: #37245f;
  --cyan: #0a7cc4;   /* utility/info accent */
  --violet: #7e47d6; /* agent/intelligence violet */
  --pink: #e85f8f;   /* gifting warmth */
  --gold: #f8da08;   /* signature gold accent */
  --gold-cta: #ffb800;
  --gold-ink: #1a1622; /* gold can't carry white text — use dark ink on gold */
  --green: #1fa463;
  --mood: #7e47d6;
  --mood-soft: rgba(126, 71, 214, 0.14);
  --shadow: 0 24px 70px rgba(26, 18, 50, 0.16);
  --soft-shadow: 0 12px 34px rgba(26, 18, 50, 0.10);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-theme="dark"] {
  --ink: #f4f1fa;
  --muted: #c9bfd8;
  --soft: #1c1529;
  --panel: rgba(34, 26, 51, 0.9);
  --surface: #221a33;
  --surface-2: #2b2141;
  --sunk: #1a1427;
  --line: rgba(170, 150, 225, 0.16);
  --hair-2: rgba(170, 150, 225, 0.10);
  --blue: #a98cf0;
  --brand: #a98cf0;
  --brand-700: #c3b4f6;
  --cyan: #45b9f1;
  --violet: #9d6bee;
  --pink: #ff8eb4;
  --gold: #f8da08;
  --gold-cta: #ffcf4d;
  --gold-ink: #1a1622;
  --green: #46d08a;
  --shadow: 0 26px 72px rgba(0, 0, 0, 0.45);
  --soft-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }

body {
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 90%, rgba(64, 41, 112, 0.18), transparent 34%),
    radial-gradient(circle at 83% 12%, rgba(248, 218, 8, 0.22), transparent 32%),
    radial-gradient(circle at 56% 54%, rgba(126, 71, 214, 0.10), transparent 38%),
    linear-gradient(120deg, #f6f2fb 0%, #fbfafe 52%, #fff7e0 100%);
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--mood) 34%, transparent), transparent 34%),
    radial-gradient(circle at 83% 12%, rgba(248, 218, 8, 0.14), transparent 31%),
    linear-gradient(120deg, #171121 0%, #201832 58%, #171121 100%);
}

button, textarea { font: inherit; }
button { cursor: pointer; }
.u-hidden { display: none !important; }
.muted { color: var(--muted); }

.app {
  height: 100dvh;
  padding: 10px;
  overflow: hidden;
}
.app.mood-thinking { --mood: #7e47d6; --mood-soft: rgba(126, 71, 214, 0.14); }
.app.mood-delighted { --mood: #f8da08; --mood-soft: rgba(248, 218, 8, 0.20); }
.app.mood-careful { --mood: #0a7cc4; --mood-soft: rgba(10, 124, 196, 0.13); }
.app.mood-puzzled { --mood: #9a8bb8; --mood-soft: rgba(154, 139, 184, 0.15); }
.app.mood-relieved { --mood: #1fa463; --mood-soft: rgba(31, 164, 99, 0.13); }
.app.mood-listening { --mood: #10c5d6; --mood-soft: rgba(16, 197, 214, 0.15); }

.workspace-shell {
  width: min(1720px, 100%);
  height: calc(100dvh - 20px);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

[data-theme="dark"] .workspace-shell {
  background: rgba(20, 15, 30, 0.58);
  border-color: rgba(170, 150, 225, 0.14);
}

.topbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
}

.logo {
  font-weight: 950;
  font-size: 24px;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--ink);
}
.logo span { color: var(--blue); }

.top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  justify-self: end;
}
.language-pill,
.cart-pill,
.state-pill,
.ghost-action,
.icon-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(49, 59, 90, 0.07);
}
.language-pill {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
}
.language-pill button {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}
.language-pill button[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
}
.ghost-action {
  color: var(--blue);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}
.icon-action {
  width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
  color: var(--blue);
  border: 1px solid var(--line);
}
.ghost-action:disabled { opacity: 0.55; cursor: wait; }
.cart-pill strong { color: var(--blue); }
.cart-pill.bump { animation: cartBump 0.42s var(--ease); }
.state-pill { color: var(--green); }

.mood-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}
.mood-dot {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: var(--dot);
  opacity: 0.52;
  transition: width 0.2s var(--ease), opacity 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mood-dot.is-active {
  width: 16px;
  opacity: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 20%, transparent);
}

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: 10px;
  padding: 0 10px 10px;
  overflow: hidden;
}

.chat-pane {
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
}

/* The results pane is a flat "plane": no card chrome, so results read as floating
   directly on the workspace rather than nested inside a white panel. */
.results-pane {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 6px 4px;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 38px;
  margin: 14px 0 10px;
}
.result-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: var(--surface-2);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--hair-2);
}
.result-chip b { color: var(--ink); }
.filter-row.pulse .result-chip { animation: softPulse 0.42s var(--ease); }

.result-stage {
  min-height: 0;
  overflow-y: auto;
  padding: 2px 2px 10px;
  scroll-behavior: smooth;
}
.stage-card {
  animation: stageIn 0.34s var(--ease) both;
}
.stage-copy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.stage-copy h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}
.stage-copy p {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
/* Multi-item (grouped) search: one labelled, ranked section per requested item. */
.product-group {
  margin-bottom: 22px;
}
.product-group-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.product-group-head .pg-label {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: capitalize;
}
.product-group-head .pg-tag {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
.product-group-head .pg-count {
  flex: none;
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.pg-thin-note {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}
.pg-expand {
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--accent);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pg-expand:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.product-browser-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  padding: 10px 12px;
  box-shadow: 0 10px 24px rgba(49, 59, 90, 0.06);
}
.product-browser-bar strong,
.product-browser-bar span {
  display: block;
}
.browse-count {
  color: var(--ink);
  font-size: 13px;
}
.browse-filter {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.pager {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.pager button,
.pager span {
  border: none;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(49, 59, 90, 0.06);
}
.pager button:hover:not(:disabled) {
  color: var(--blue);
  transform: translateY(-1px);
}
.pager button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.compact-products {
  margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.product {
  min-width: 0;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 34px rgba(49, 59, 90, 0.10);
  animation: cardIn 0.35s var(--ease) both;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.product:nth-child(2) { animation-delay: 0.04s; }
.product:nth-child(3) { animation-delay: 0.08s; }
.product:nth-child(4) { animation-delay: 0.12s; }
.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(49, 59, 90, 0.14);
}
.product.featured {
  background:
    linear-gradient(145deg, rgba(248, 218, 8, 0.22), color-mix(in srgb, var(--surface) 82%, transparent) 56%),
    var(--surface);
  border-color: rgba(248, 184, 0, 0.56);
}
.product::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--mood), var(--pink));
  opacity: 0;
}
.product.featured::before { opacity: 1; background: linear-gradient(90deg, var(--gold), var(--gold-cta), var(--pink)); }
.pick-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  border-radius: 999px;
  padding: 5px 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-cta));
  color: var(--gold-ink);
  font-size: 10.5px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(248, 184, 0, 0.28);
}
.product.is-sold { opacity: 0.62; }
.product-top {
  position: relative;
  margin: 10px 10px 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sunk);
}
.product-img {
  position: relative;
  aspect-ratio: 1.12 / 1;
  background:
    linear-gradient(135deg, rgba(64, 41, 112, 0.06), rgba(248, 218, 8, 0.10)),
    var(--sunk);
  background-size: cover;
  background-position: center;
}
.product-top .price {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #1b2a0e;
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.stock-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  max-width: calc(100% - 120px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  padding: 5px 9px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(49, 59, 90, 0.08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-body {
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.product-kicker {
  color: var(--green);
  font-size: 10.5px;
  font-weight: 950;
  text-transform: uppercase;
}
.product-body h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.product-body .note,
.product-body .best-for,
.product-body .delivery-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.38;
  color: var(--muted);
}
.product-body .best-for { color: #344054; font-weight: 750; }
.product-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}
.reason-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(126, 71, 214, 0.08);
  color: var(--blue);
  border: 1px solid rgba(126, 71, 214, 0.14);
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 850;
}
.product-body .delivery-note {
  color: #8a6216;
  background: rgba(248, 218, 8, 0.16);
  border-radius: 8px;
  padding: 6px 8px;
}
.product-body .delivery-note:empty { display: none; }
.product-foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 1px;
}
.product-foot .pid {
  color: #98a2b3;
  font-size: 10px;
}
.product-actions {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 7px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  padding: 5px;
}
.product-actions button {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #344054;
  font-size: 11.5px;
  font-weight: 900;
  padding: 8px 9px;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), transform 0.16s var(--ease);
}
.product-actions button:first-child {
  background: linear-gradient(135deg, var(--gold), var(--gold-cta));
  color: var(--gold-ink);
}
.product-actions button:hover {
  background: rgba(64, 41, 112, 0.10);
  color: var(--blue);
}
.product-actions button:first-child:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
}

.workspace-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.mini-card,
.empty-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(49, 59, 90, 0.08);
  animation: cardIn 0.28s var(--ease) both;
}
.mini-card h4,
.empty-card h4 {
  margin: 0 0 10px;
  font-size: 15px;
}
.empty-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.suggestion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.store-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.store-tile {
  min-width: 0;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(126, 71, 214, 0.10), color-mix(in srgb, var(--surface) 86%, transparent));
  padding: 12px;
  text-align: left;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(49, 59, 90, 0.06);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.store-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(49, 59, 90, 0.10);
}
.store-tile strong,
.store-tile span {
  display: block;
  overflow-wrap: anywhere;
}
.store-tile strong { font-size: 13px; }
.store-tile span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
}
.suggestion {
  min-height: 94px;
  border: none;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 15px;
  text-align: left;
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(49, 59, 90, 0.07);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.suggestion:hover {
  transform: translateY(-2px);
}
.suggestion strong,
.suggestion span {
  display: block;
  overflow-wrap: anywhere;
}
.welcome-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}
.welcome-assurance span,
.fallback-link {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(46, 170, 105, 0.12);
  color: #1e7d4d;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 850;
}
.fallback-link {
  margin-top: 12px;
  text-decoration: none;
  background: rgba(64, 41, 112, 0.10);
  color: var(--blue);
}

.gift-progress {
  position: sticky;
  top: 0;
  z-index: 3;
  margin-bottom: 14px;
  border: 1px solid rgba(64, 41, 112, 0.10);
}
.gift-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.gift-step {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--muted);
}
.gift-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(102, 112, 133, 0.34);
  margin-top: 3px;
  background: #fff;
}
.gift-step.is-done .gift-dot {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(46, 170, 105, 0.10);
}
.gift-step.is-active .gift-dot {
  border-color: var(--blue);
  box-shadow: 0 0 0 5px rgba(64, 41, 112, 0.10);
}
.gift-step strong,
.gift-step p {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gift-step strong {
  color: var(--ink);
  font-size: 12px;
}
.gift-step p {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.3;
}

.bundle-card {
  display: grid;
  gap: 14px;
}
.bundle-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.bundle-head span {
  display: block;
  color: var(--green);
  font-size: 10.5px;
  font-weight: 950;
  text-transform: uppercase;
}
.bundle-head h4 {
  margin: 3px 0 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}
.bundle-total {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 18px;
}
.bundle-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.bundle-product {
  min-width: 0;
  border-radius: 13px;
  background: var(--surface-2);
  overflow: hidden;
}
.bundle-img {
  aspect-ratio: 1.25 / 1;
  background:
    linear-gradient(135deg, rgba(64, 41, 112, 0.08), rgba(248, 218, 8, 0.16)),
    #eef2f7;
  background-size: cover;
  background-position: center;
}
.bundle-meta {
  display: grid;
  gap: 5px;
  padding: 10px;
}
.bundle-role {
  color: var(--green);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}
.bundle-meta h5,
.bundle-meta p {
  margin: 0;
  overflow-wrap: anywhere;
}
.bundle-meta h5 {
  font-size: 13px;
  line-height: 1.22;
}
.bundle-meta p {
  min-height: 34px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.bundle-meta strong {
  color: var(--ink);
  font-size: 13px;
}
.bundle-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.bundle-actions button {
  border: none;
  border-radius: 999px;
  background: #10111f;
  color: #fff;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 950;
}
.bundle-actions button:hover:not(:disabled) {
  background: #000;
  transform: translateY(-1px);
}
.bundle-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.bundle-actions span {
  color: var(--muted);
  font-size: 12px;
}

.skeleton-card {
  pointer-events: none;
}
.skeleton-img,
.skeleton-card h3,
.skeleton-card p,
.skeleton-card .product-body span {
  display: block;
  border-radius: 10px;
  background: linear-gradient(90deg, #eef2f7, #f8fafc, #eef2f7);
  background-size: 220% 100%;
  animation: shimmer 1.2s linear infinite;
}
.skeleton-img {
  aspect-ratio: 1.12 / 1;
}
.skeleton-card .product-body span { width: 34%; height: 10px; }
.skeleton-card h3 { width: 78%; height: 22px; }
.skeleton-card p { width: 92%; height: 12px; }
.skeleton-card p:last-child { width: 62%; }
.suggestion strong {
  font-size: 15px;
  line-height: 1.25;
}
.suggestion span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.cart-lines { display: grid; gap: 10px; }
.cart-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 28px;
  gap: 11px;
  align-items: center;
  font-size: 12.5px;
  background: var(--surface-2);
  border-radius: 13px;
  padding: 8px;
  animation: cartRowIn 0.28s var(--ease) both;
}
.cart-line:nth-child(2) { animation-delay: 0.04s; }
.cart-line:nth-child(3) { animation-delay: 0.08s; }
.cart-thumb,
.chat-cart-thumb {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(64, 41, 112, 0.08), rgba(248, 218, 8, 0.13)),
    #eef2f7;
  background-size: cover;
  background-position: center;
}
.cart-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.cart-line .cl-name { overflow-wrap: anywhere; }
.cart-line .cl-qty { color: var(--muted); font-size: 12px; }
.cart-remove {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(23, 25, 39, 0.07);
  color: #667085;
  font-weight: 900;
  line-height: 1;
}
.cart-remove:hover { background: rgba(232, 95, 143, 0.14); color: var(--pink); }
.cart-foot {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  font-size: 15px;
}
.cart-foot-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}
.cart-subtotal,
.cart-delivery {
  display: none;
  color: var(--muted);
  font-size: 13px;
}
.has-delivery-fee .cart-subtotal,
.has-delivery-fee .cart-delivery { display: flex; }
.cart-updated .cart-foot strong { animation: totalPulse 0.55s var(--ease); }
.cart-foot strong { color: var(--blue); }
.cart-subtotal strong,
.cart-delivery strong {
  color: var(--muted);
  font-size: 13px;
}

/* Order-level gift message: shows on the cart card so the shopper can see
   what message will ride through to Kapruka, and offers quick edit/remove
   actions that pre-fill chat prompts. */
.cart-gift {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(232, 95, 143, 0.16), rgba(232, 95, 143, 0.08));
  border: 1px solid rgba(232, 95, 143, 0.22);
  border-radius: 12px;
  font-size: 13px;
}
.cart-gift-icon { font-size: 18px; line-height: 1; }
.cart-gift-body { display: grid; gap: 2px; min-width: 0; }
.cart-gift-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.cart-gift-text {
  margin: 0;
  color: var(--ink);
  font-style: italic;
  overflow-wrap: anywhere;
}
.cart-gift-empty .cart-gift-label { color: var(--muted); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 13px; }
.cart-gift-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cart-gift-action {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(232, 95, 143, 0.25);
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s var(--ease);
}
.cart-gift-action:hover { background: rgba(232, 95, 143, 0.12); }

.delivery-card {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
}
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(46, 170, 105, 0.12);
  margin-top: 4px;
}
.delivery-card.is-unavailable .status-dot {
  background: var(--pink);
  box-shadow: 0 0 0 6px rgba(232, 95, 143, 0.12);
}
.delivery-main,
.delivery-warning,
.track-status {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.delivery-warning { margin-top: 6px; color: #8a6216; }

.pay-card { border-color: rgba(46, 170, 105, 0.38); }
.pay-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--surface-2) 72%, rgba(248, 218, 8, 0.14)));
}
.pay-card::before {
  content: "";
  position: absolute;
  top: -90px;
  left: 50%;
  width: 220px;
  height: 220px;
  margin-left: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 218, 8, 0.26), transparent 68%);
  filter: blur(20px);
  pointer-events: none;
}
.pay-card > * { position: relative; }
.pay-badge {
  display: inline-block;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(46, 170, 105, 0.14);
  color: #1e7d4d;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 10px;
}
.pay-open {
  display: inline-block;
  margin: 2px 0 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--green), #1f8350);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  padding: 10px 14px;
}
.pay-url {
  display: block;
  color: var(--muted);
  font-size: 12px;
  word-break: break-all;
}

.review-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  min-width: 0;
}
.review-head span,
.review-head strong {
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.review-grid div {
  min-width: 0;
  border-radius: 13px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--hair-2);
}
.review-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.review-grid strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.review-address,
.review-gift,
.review-note,
.intent-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.intent-note {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  border-radius: 10px;
  background: rgba(64, 41, 112, 0.08);
  padding: 8px 10px;
  min-width: 0;
}
.intent-note span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.intent-note code {
  color: #344054;
  font-size: 11.5px;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: normal;
}
.review-gift,
.gift-preview {
  background: linear-gradient(135deg, rgba(248, 218, 8, 0.18), rgba(232, 95, 143, 0.10));
}
.gift-preview span {
  color: #8a6216;
  display: block;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.gift-preview p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

.compare-table {
  display: grid;
  gap: 10px;
}
.compare-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 9px;
  align-items: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 11px;
}
.compare-row .rank {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}
.compare-row strong { font-size: 13px; overflow-wrap: anywhere; }
.compare-price { color: var(--blue); font-size: 13px; font-weight: 950; }
.compare-note {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 12px;
}

.timeline {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.timeline-row {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
}
.timeline-row > span {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--cyan);
}
.timeline-row strong { font-size: 13px; }
.timeline-row p,
.timeline-row time {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.order-history-card {
  display: grid;
  gap: 12px;
}
.order-history-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.order-list {
  display: grid;
  gap: 10px;
}
.order-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(64, 41, 112, 0.12);
  border-radius: 12px;
  background: rgba(245, 247, 251, 0.72);
  position: relative;
  overflow: hidden;
}
.order-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--order-accent, var(--violet));
}
.order-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.order-main strong,
.order-main span,
.order-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}
.order-main strong {
  color: var(--ink);
  font-size: 13px;
}
.order-main span {
  color: var(--order-accent, var(--green));
  font-size: 12px;
  font-weight: 900;
  text-transform: capitalize;
}
.order-meta {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.order-track {
  border: none;
  border-radius: 999px;
  background: #10111f;
  color: #fff;
  padding: 8px 11px;
  font-size: 11.5px;
  font-weight: 950;
}
.order-progress {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--hair-2);
  overflow: hidden;
}
.order-progress span {
  display: block;
  width: var(--order-progress, 18%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--order-accent, var(--violet)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--order-accent, var(--violet)) 42%, transparent);
}
.order-track:hover {
  background: #000;
  transform: translateY(-1px);
}

/* ---- Unified orders overview (Orders List prototype port) ------------ */

@keyframes ovDash { to { background-position: 14px 0; } }
@keyframes ovShimmer { 0% { background-position: 160% 0; } 100% { background-position: -160% 0; } }
@keyframes ovBob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -64%); } }
@keyframes ovHalo { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.7; } 70% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } 100% { opacity: 0; } }
@keyframes ovBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
@keyframes ovPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ov-accent) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }

/* Orders overview floats directly on the plane — drop the outer mini-card chrome so the
   only visible cards are the individual order rows, not a card-inside-a-card stack. */
.mini-card.ov-wrap {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.ov-wrap { display: grid; gap: 14px; }
.ov-head-row { display: flex; align-items: center; gap: 12px; }
.ov-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; color: #fff; background: linear-gradient(135deg, #7e47d6, #402970);
  box-shadow: 0 6px 16px -6px rgba(126, 71, 214, 0.7);
}
.ov-headtext { min-width: 0; flex: 1; display: grid; gap: 2px; }
.ov-headtext strong { font-size: 16px; color: var(--ink); letter-spacing: -0.01em; }
.ov-headtext span { font-size: 12px; color: var(--muted); }
.ov-livecount {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 20px;
  font-size: 11.5px; font-weight: 800; color: #b5680e; background: rgba(255, 158, 44, 0.12);
  border: 1px solid rgba(255, 158, 44, 0.35);
}
[data-theme="dark"] .ov-livecount { color: #ffc76b; background: rgba(255, 158, 44, 0.14); }
.ov-livecount::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff9e2c; animation: ovBlink 1.1s steps(1) infinite; }

.ov-list { display: grid; gap: 11px; }
.ov-card {
  border-radius: 16px; background: var(--surface); border: 1px solid var(--hair-2);
  overflow: hidden; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ov-card.is-open { border-color: color-mix(in srgb, var(--ov-accent) 40%, transparent); box-shadow: var(--soft-shadow); }
.ov-cardhead {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  background: transparent; border: none; cursor: pointer; font: inherit; color: var(--ink);
}
.ov-cardhead:hover { background: color-mix(in srgb, var(--ov-accent) 4%, transparent); }

.ov-thumbs { position: relative; display: flex; align-items: center; flex: none; }
.ov-thumb {
  width: 40px; height: 48px; flex: none; border-radius: 11px; position: relative; display: grid; place-items: center;
  border: 2px solid var(--surface); box-shadow: 0 4px 10px -6px rgba(64, 41, 112, 0.4);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ov-accent) 16%, transparent) 0 8px, transparent 8px 16px), var(--sunk);
  margin-left: calc(var(--i) * -16px); z-index: calc(3 - var(--i)); overflow: hidden;
  transform: rotate(calc((var(--i) - 1) * 3deg));
}
.ov-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ov-thumb-label { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 7.5px; font-weight: 700; letter-spacing: 0.04em; color: color-mix(in srgb, var(--ov-accent) 70%, var(--muted)); text-align: center; }
.ov-thumb-glyph { font-size: 17px; }

.ov-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ov-titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ov-title { font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-gift { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 11px; color: #b5680e; background: rgba(255, 158, 44, 0.12); }
.ov-metaline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.ov-metaline .ov-id { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-weight: 700; color: var(--muted); }
.ov-sep { color: var(--muted); opacity: 0.5; }

.ov-route { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.ov-origin { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: #fff; background: linear-gradient(135deg, #9d6bee, #5a37a8); }
.ov-track { position: relative; flex: 1; height: 20px; min-width: 70px; }
.ov-dash { position: absolute; left: 0; right: 0; top: 50%; height: 2.5px; transform: translateY(-50%); border-radius: 3px; background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 11px); background-size: 11px 2.5px; animation: ovDash 1s linear infinite; }
.ov-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 3.5px; width: var(--ov-progress, 0%); border-radius: 4px; background: linear-gradient(90deg, #7e47d6, #9d6bee 45%, var(--ov-accent)); background-size: 220% 100%; box-shadow: 0 0 10px color-mix(in srgb, var(--ov-accent) 60%, transparent); animation: ovShimmer 2.4s linear infinite; transition: width 0.8s var(--ease); }
.ov-card.is-delivered .ov-fill { background: var(--green); animation: none; }
.ov-token { position: absolute; left: var(--ov-progress, 0%); top: 50%; z-index: 3; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: #fff; color: var(--ov-accent); box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.4), 0 0 0 3px color-mix(in srgb, var(--ov-accent) 25%, transparent); animation: ovBob 2.6s ease-in-out infinite; }
.ov-card.is-delivered .ov-token { background: var(--green); color: #fff; animation: none; }
.ov-card.order-shipped .ov-token, .ov-card.order-out_for_delivery .ov-token { transform: translate(-50%, -50%) scaleX(-1); }
.ov-dest { width: 18px; flex: none; text-align: center; font-size: 14px; }

.ov-note { font-size: 11.5px; font-weight: 600; color: var(--ov-accent); margin-top: 2px; }
.ov-card.is-delivered .ov-note { color: var(--green); }
.ov-card.is-purchase .ov-note { color: var(--muted); }

.ov-rail { flex: none; width: 118px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.ov-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--ov-accent); box-shadow: 0 5px 14px -6px color-mix(in srgb, var(--ov-accent) 90%, transparent); white-space: nowrap; }
.ov-card.is-delivered .ov-pill { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); box-shadow: none; }
.ov-card.is-purchase .ov-pill { color: var(--brand); background: var(--sunk); border: 1px solid var(--line); box-shadow: none; }
.ov-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ov-card.order-shipped .ov-pill-dot, .ov-card.order-out_for_delivery .ov-pill-dot { background: #fff; animation: ovBlink 1.1s steps(1) infinite; }
.ov-eta { line-height: 1.15; }
.ov-eta-kicker { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ov-eta-val { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.ov-chevron { font-size: 16px; color: var(--muted); line-height: 1; transition: transform 0.35s var(--ease); }
.ov-card.is-open .ov-chevron { transform: rotate(180deg); }

.ov-detail { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease); }
.ov-card.is-open .ov-detail { max-height: 460px; opacity: 1; }
.ov-detail > * { padding: 0 16px; }
.ov-stepper { display: flex; gap: 0; margin-top: 6px; padding-top: 12px; padding-bottom: 4px; border-top: 1px dashed var(--line); overflow-x: auto; }
.ov-step { position: relative; flex: 1 0 0; min-width: 80px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 3px; }
.ov-step-conn { position: absolute; top: 13px; left: -50%; width: 100%; height: 2.5px; border-radius: 3px; z-index: 0; background: var(--line); }
.ov-step:first-child .ov-step-conn { display: none; }
.ov-step.state-done .ov-step-conn, .ov-step.state-current .ov-step-conn { background: var(--green); }
.ov-step-node { position: relative; z-index: 1; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--sunk); color: var(--muted); border: 1.5px solid var(--line); }
.ov-step.state-done .ov-step-node { background: var(--green); color: #fff; border: none; }
.ov-step.state-current .ov-step-node { background: var(--ov-accent); color: #fff; border: none; animation: ovPulse 1.7s ease-in-out infinite; }
.ov-step-label { margin-top: 7px; font-size: 10.5px; font-weight: 700; line-height: 1.2; color: var(--muted); }
.ov-step.state-done .ov-step-label, .ov-step.state-current .ov-step-label { color: var(--ink); }
.ov-step-time { margin-top: 2px; font-size: 9px; font-weight: 600; color: var(--muted); min-height: 11px; }
.ov-step.state-current .ov-step-time { color: var(--ov-accent); }

.ov-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-bottom: 16px; }
.ov-amount { display: flex; flex-direction: column; gap: 1px; }
.ov-amount span { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ov-amount strong { font-size: 16px; font-weight: 800; color: var(--ink); }
.ov-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-action { padding: 9px 15px; border-radius: 20px; cursor: pointer; font-weight: 700; font-size: 12.5px; font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--brand); transition: transform 0.2s var(--ease); }
.ov-action.primary { border: none; background: linear-gradient(135deg, #f8da08, #ffb800); color: #1a1622; box-shadow: 0 7px 18px -8px rgba(248, 184, 0, 0.6); }
.ov-action:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .ov-dash, .ov-fill, .ov-token, .ov-pill-dot, .ov-livecount::before, .ov-step.state-current .ov-step-node { animation: none !important; }
}

@media (max-width: 560px) {
  .ov-rail { width: auto; }
  .ov-cardhead { flex-wrap: wrap; }
}

/* ---- Tracking timeline (rich delivery-path UI) ----------------------- */

.tracking-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(64, 41, 112, 0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 86%, transparent));
  box-shadow: 0 12px 30px rgba(49, 59, 90, 0.08);
  position: relative;
  overflow: hidden;
}
.tracking-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  opacity: 0.78;
}
.tracking-card.tone-success::before { background: linear-gradient(90deg, #1aa45a, #2eaa69, #67c98a); }
.tracking-card.tone-active::before { background: linear-gradient(90deg, #402970, #7e47d6, #9b6be8); }
.tracking-card.tone-danger::before { background: linear-gradient(90deg, #c33b58, #e85f8f, #f0a3b6); }
.tracking-card.tone-info::before  { background: linear-gradient(90deg, #402970, #7e47d6); }

.track-head {
  display: grid;
  gap: 6px;
}
.track-pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.track-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(126, 71, 214, 0.14);
  color: var(--blue);
  border: 1px solid rgba(126, 71, 214, 0.34);
}
.tone-success .track-pill {
  background: rgba(46, 170, 105, 0.16);
  color: #1f7a4c;
  border-color: rgba(46, 170, 105, 0.36);
}
.tone-active .track-pill {
  background: rgba(64, 41, 112, 0.14);
  color: #402970;
  border-color: rgba(64, 41, 112, 0.36);
}
.tone-danger .track-pill {
  background: rgba(232, 95, 143, 0.16);
  color: #b0305b;
  border-color: rgba(232, 95, 143, 0.36);
}
.track-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
  animation: trackDot 2.6s ease-in-out infinite;
}
.tone-success .track-pill::before,
.tracking-card.step-delivered .track-pill::before {
  animation: none;
}
@keyframes trackDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.55; }
}
.track-order-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 3px 7px;
}
.track-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 950;
}
.track-meta {
  display: grid;
  gap: 6px 14px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding: 12px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--hair-2);
}
.track-meta.is-empty { display: none; }
.track-meta-row {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.track-meta-row span {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 850;
}
.track-meta-row strong {
  font-size: 13px;
  color: var(--ink);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.track-greeting {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(255, 247, 228, 0.85);
  border: 1px solid rgba(248, 218, 8, 0.32);
  position: relative;
}
/* ---- Order Tracking hero (Order Tracking prototype port) ------------- */
@keyframes trkGrid { from { background-position: 0 0; } to { background-position: 24px 0; } }
@keyframes trkBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
@keyframes trkConfetti { 0% { transform: translateY(-14px) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(230px) rotate(420deg); opacity: 0; } }

.track-hero {
  position: relative; overflow: hidden; border-radius: 18px; padding: 18px 18px 16px; color: #fff;
  display: grid; gap: 16px;
  background: radial-gradient(120% 150% at 16% 0%, #3a2566 0%, #251838 52%, #170f27 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px -22px rgba(40, 22, 90, 0.8);
}
.track-hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 24px 24px; animation: trkGrid 7s linear infinite; }
.track-hero-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.track-hero-copy { min-width: 0; }
.track-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.6); }
.track-eta { font-size: 22px; font-weight: 800; letter-spacing: -0.012em; margin-top: 4px; line-height: 1.1; }
.track-hero-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); margin-top: 5px; font-weight: 500; }
.track-live-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
  padding: 6px 11px; border-radius: 20px; color: #fff; white-space: nowrap;
  background: color-mix(in srgb, var(--route-accent, #7e47d6) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--route-accent, #7e47d6) 55%, transparent);
}
.track-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffc76b; }
.tracking-card.step-delivered .track-live-dot { background: #46e08a; }
.tracking-card.step-shipped .track-live-dot,
.tracking-card.step-out_for_delivery .track-live-dot,
.tracking-card.step-out .track-live-dot { animation: trkBlink 1s steps(1) infinite; }

.track-confetti { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.track-confetti-piece { position: absolute; top: -14px; width: 6px; height: 9px; border-radius: 2px; opacity: 0; background: #ffb800; animation: trkConfetti calc(2s + var(--i) * 0.12s) calc(var(--i) * 0.16s) ease-in infinite; }
.track-confetti-piece:nth-child(5n + 1) { background: #ffb800; }
.track-confetti-piece:nth-child(5n + 2) { background: #9d6bee; }
.track-confetti-piece:nth-child(5n + 3) { background: #1fa463; }
.track-confetti-piece:nth-child(5n + 4) { background: #e85f8f; }
.track-confetti-piece:nth-child(5n + 5) { background: #46e08a; }

.track-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.track-stats.is-empty { display: none; }
.track-stat { padding: 10px 12px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--hair-2); display: grid; gap: 3px; min-width: 0; }
.track-stat span { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.track-stat strong { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.track-stat.is-accent { background: color-mix(in srgb, var(--route-accent, #7e47d6) 9%, transparent); border-color: color-mix(in srgb, var(--route-accent, #7e47d6) 30%, transparent); }
.track-stat.is-accent strong { color: var(--route-accent, var(--violet)); }
.tracking-card.is-completed .track-stat.is-accent strong { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .track-hero-grid, .track-live-dot, .track-confetti-piece { animation: none !important; }
  .track-confetti-piece { display: none; }
}

.track-route {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 15px;
  background: linear-gradient(135deg, #211733, #402970);
  color: #fff;
  overflow: hidden;
  position: relative;
}
/* Inside the hero the route sits directly on the dark panel (no nested card). */
.track-hero .track-route { background: transparent; padding: 0; border-radius: 0; position: relative; z-index: 2; }
.track-hero .track-route::after { display: none; }
.track-route::after {
  content: "";
  position: absolute;
  inset: auto -10% 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.30) 0 8px, transparent 8px 15px);
  top: 50%;
  animation: routeDash 1.2s linear infinite;
}
.track-route-labels,
.track-route-rail {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.track-route-labels span {
  font-size: 11px;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.78);
}
.track-route-rail {
  min-height: 42px;
}
.route-line,
.route-fill {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
}
.route-line {
  background: rgba(255, 255, 255, 0.22);
}
.route-fill {
  right: auto;
  width: var(--track-progress, 8%);
  background: linear-gradient(90deg, #7e47d6, #9d6bee, #ffb800, #1fa463);
  box-shadow: 0 0 18px rgba(248, 218, 8, 0.32);
}
.route-node {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.route-token {
  position: absolute;
  z-index: 2;
  left: var(--track-progress, 8%);
  top: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--route-accent, #7e47d6);
  font-weight: 950;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32), 0 0 0 5px color-mix(in srgb, var(--route-accent, #7e47d6) 28%, transparent);
  animation: routeBob 2.8s ease-in-out infinite;
}
.track-greeting::before {
  content: "💌";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 18px;
  opacity: 0.85;
}
.track-greeting p {
  margin: 0;
  font-size: 13px;
  color: #4a3d12;
  line-height: 1.45;
  font-style: italic;
}

.track-path {
  position: relative;
  display: grid;
  gap: 0;
  padding: 4px 0 4px 18px;
  margin-left: 6px;
  border-left: 2px dashed rgba(64, 41, 112, 0.18);
}
.track-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 8px 0 14px 0;
  min-width: 0;
}
.track-step .track-dot {
  position: absolute;
  left: -25px;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(64, 41, 112, 0.3);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85);
  transition: transform 240ms var(--ease), background 240ms var(--ease), border-color 240ms var(--ease);
}
.track-step.state-done .track-dot {
  background: var(--green);
  border-color: rgba(46, 170, 105, 0.5);
}
.track-step.state-active .track-dot {
  background: var(--mood);
  border-color: color-mix(in srgb, var(--mood) 55%, transparent);
  transform: scale(1.15);
  animation: trackPulse 2s ease-in-out infinite;
}
.tone-success .track-step.state-active .track-dot { background: var(--green); border-color: rgba(46, 170, 105, 0.5); }
@keyframes trackPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 0 6px rgba(64, 41, 112, 0.18); }
  50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 0 12px rgba(64, 41, 112, 0.05); }
}
.track-step-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.track-step-body strong {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 850;
  overflow-wrap: anywhere;
}
.track-step.state-pending .track-step-body strong {
  color: var(--muted);
  font-weight: 700;
}
.track-step.state-pending .track-dot {
  background: rgba(245, 247, 251, 0.92);
  border-color: rgba(64, 41, 112, 0.18);
}
.track-time {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.track-step.state-active .track-time {
  color: var(--blue);
  font-weight: 850;
}
.tone-success .track-step.state-active .track-time { color: var(--green); }
.track-detail {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.track-step.last { padding-bottom: 0; }

.track-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.track-followup {
  font-weight: 800;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .track-path { padding-left: 14px; margin-left: 4px; }
  .track-step .track-dot { left: -21px; }
  .track-meta { grid-template-columns: 1fr 1fr; }
}
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chat-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 12px;
  overflow: hidden;
}
.agent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--hair-2);
}
.agent-copy { min-width: 0; }
.agent-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.agent-mark,
.avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  box-shadow: 0 8px 18px rgba(81, 79, 195, 0.26);
  position: relative;
  overflow: hidden;
  transform-origin: center;
}
.agent-mark::after,
.avatar::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.42);
  opacity: 0;
  pointer-events: none;
}
.mood-chip {
  min-width: 0;
  max-width: 150px;
  display: inline-block;
  border-radius: 999px;
  background: rgba(64, 41, 112, 0.09);
  color: var(--blue);
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mood-thinking .agent-mark,
.avatar.mood-thinking {
  background: linear-gradient(135deg, var(--violet), var(--blue));
  animation: siaThinking 1.7s ease-in-out infinite;
}
.mood-delighted .agent-mark,
.avatar.mood-delighted {
  background: linear-gradient(135deg, var(--gold), var(--pink));
  animation: siaDelighted 0.82s var(--ease) both;
  box-shadow: 0 10px 24px rgba(248, 218, 8, 0.28);
}
.mood-delighted .agent-mark::after,
.avatar.mood-delighted::after {
  animation: siaSparkle 0.82s var(--ease) both;
}
.mood-careful .agent-mark,
.avatar.mood-careful {
  background: linear-gradient(135deg, #64748b, var(--violet));
  animation: siaCareful 1.8s ease-in-out infinite;
  box-shadow: 0 8px 18px rgba(100, 116, 139, 0.24);
}
.mood-puzzled .agent-mark,
.avatar.mood-puzzled {
  background: linear-gradient(135deg, var(--pink), #b7791f);
  animation: siaPuzzled 0.78s var(--ease) both;
  box-shadow: 0 8px 18px rgba(232, 95, 143, 0.22);
}
.mood-relieved .agent-mark,
.avatar.mood-relieved {
  background: linear-gradient(135deg, var(--green), var(--cyan));
  animation: siaRelieved 1.05s var(--ease) both;
  box-shadow: 0 10px 24px rgba(46, 170, 105, 0.22);
}
.mood-thinking .mood-chip { background: rgba(64, 41, 112, 0.09); color: var(--blue); }
.mood-delighted .mood-chip { background: rgba(248, 218, 8, 0.18); color: #8a6216; }
.mood-careful .mood-chip { background: rgba(100, 116, 139, 0.13); color: #475467; }
.mood-puzzled .mood-chip { background: rgba(232, 95, 143, 0.14); color: #b43b67; }
.mood-relieved .mood-chip { background: rgba(46, 170, 105, 0.13); color: #1e7d4d; }
.agent-card p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.agent-card strong {
  display: block;
  font-size: 13px;
}

.thread {
  min-height: 0;
  overflow-y: auto;
  padding: 8px 2px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  scroll-behavior: smooth;
}
.msg {
  display: flex;
  gap: 8px;
  max-width: 100%;
  animation: messageIn 0.28s var(--ease) both;
}
.msg.user { justify-content: flex-end; }
.msg.user .bubble {
  background: linear-gradient(135deg, #5b3fa0, #402970);
  color: #fff;
  border-top-right-radius: 6px;
  box-shadow: 0 12px 24px rgba(64, 41, 112, 0.22);
}
.msg.bot .bubble {
  background: linear-gradient(135deg, var(--mood-soft), var(--surface) 42%);
  border: 1px solid color-mix(in srgb, var(--mood) 18%, transparent);
  border-top-left-radius: 6px;
}
.bubble {
  max-width: min(84%, 304px);
  padding: 9px 11px;
  border-radius: 14px;
  line-height: 1.43;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(49, 59, 90, 0.07);
  overflow-wrap: anywhere;
}
.msg.bot.typing .bubble {
  background: var(--surface);
}
.message-body p {
  margin: 0;
  white-space: pre-wrap;
}
.message-body p + p,
.message-body ul + p,
.message-body ol + p {
  margin-top: 8px;
}
.message-body ul,
.message-body ol {
  margin: 0;
  padding-left: 18px;
}
.message-body li + li { margin-top: 4px; }
.message-body strong { font-weight: 900; }
/* Markdown tables in chat bubbles (SIA-010): render as a real table, scrollable on narrow widths. */
.msg-table-wrap {
  margin: 8px 0 2px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.msg-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
.msg-table th,
.msg-table td {
  padding: 6px 9px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.msg-table thead th {
  font-weight: 850;
  background: var(--surface-2);
  color: var(--ink);
  white-space: nowrap;
}
.msg-table tbody tr:last-child td { border-bottom: 0; }
.activity-label {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 850;
}
.dots {
  display: inline-flex;
  gap: 5px;
  padding: 2px;
}
.dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.48;
  animation: blink 1.2s infinite ease-in-out;
}
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  animation: quickIn 0.24s var(--ease) both;
}
.quick-reply {
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--muted);
  padding: 7px 11px;
  font-size: 11.5px;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(49, 59, 90, 0.07);
}
.quick-reply:hover {
  color: var(--blue);
  background: #fff;
  transform: translateY(-1px);
}

.composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}
.chips {
  display: none;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.chips.show { display: flex; animation: messageIn 0.18s var(--ease); }
.chip-lead {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
}
.chip-ico { font-size: 11px; }
.chip.cat { color: var(--blue); }
.chip.color { color: var(--pink); }
.chip.size { color: var(--violet); }
.chip.city { color: var(--green); }
.chip.budget { color: #b7791f; }
.chip.lang { color: #6b4fd6; }

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--mood) 22%, var(--line));
  padding: 8px 8px 8px 15px;
  box-shadow: 0 14px 34px rgba(49, 59, 90, 0.11);
}
.input-row textarea {
  flex: 1;
  min-width: 0;
  max-height: 140px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  padding: 7px 0;
}
.chat-cart {
  width: min(100%, 304px);
}
.chat-cart > strong {
  display: block;
  margin-bottom: 8px;
}
.chat-cart-lines {
  display: grid;
  gap: 7px;
}
.chat-cart-line {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.chat-cart-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}
.chat-cart-line span:nth-child(2) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.chat-cart-line b {
  color: var(--blue);
  white-space: nowrap;
}
.chat-cart-total {
  display: grid;
  gap: 10px;
  margin-top: 9px;
  padding-top: 9px;
  color: var(--muted);
}
.chat-cart-total-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.chat-cart-subtotal,
.chat-cart-delivery { display: none; }
.has-delivery-fee .chat-cart-subtotal,
.has-delivery-fee .chat-cart-delivery { display: flex; }
.chat-cart-total b { color: var(--blue); }
.chat-cart-subtotal b,
.chat-cart-delivery b { color: var(--muted); }
.chat-cart-gift {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(244, 196, 220, 0.22);
  border-radius: 8px;
  font-size: 12px;
  font-style: italic;
}
.chat-cart-gift-icon { font-style: normal; }
.chat-cart-gift-text.muted { color: var(--muted); }
.send {
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  color: var(--gold-ink);
  background: linear-gradient(135deg, #ffd000, var(--gold));
  box-shadow: 0 10px 22px rgba(248, 218, 8, 0.30);
  transition: transform 0.15s var(--ease), opacity 0.15s;
}
.send:hover { transform: translateY(-1px); }
.send:active { transform: translateY(1px); }
.voice {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--mood);
  background: var(--surface-2);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--mood) 14%, transparent);
}
.voice.is-listening {
  color: #fff;
  background: #10c5d6;
  animation: voicePulse 1.4s ease-in-out infinite;
}
.voice-panel {
  display: grid;
  grid-template-columns: auto auto minmax(52px, 92px) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid rgba(16, 197, 214, 0.34);
  box-shadow: 0 12px 28px rgba(16, 197, 214, 0.12);
}
.voice-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10c5d6;
  box-shadow: 0 0 0 5px rgba(16, 197, 214, 0.14);
  animation: trackDot 1.2s ease-in-out infinite;
}
.voice-panel span,
.voice-panel strong {
  font-size: 12px;
}
.voice-panel strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-wave {
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.voice-wave span {
  width: 4px;
  height: 9px;
  border-radius: 999px;
  background: #10c5d6;
  animation: voiceBar 0.92s ease-in-out infinite;
}
.voice-wave span:nth-child(2) { animation-delay: 0.08s; }
.voice-wave span:nth-child(3) { animation-delay: 0.16s; }
.voice-wave span:nth-child(4) { animation-delay: 0.24s; }
.voice-wave span:nth-child(5) { animation-delay: 0.32s; }
.composer-foot {
  margin: 0;
  text-align: center;
  color: #98a2b3;
  font-size: 11px;
}

.lang-si .bubble,
.lang-si textarea,
.lang-si .stage-copy,
.lang-si .product-body,
.lang-si .quick-reply,
.lang-singlish .bubble,
.lang-singlish textarea {
  line-height: 1.58;
}

@media (max-width: 1040px) {
  .app { padding: 8px; }
  .workspace-shell {
    height: calc(100dvh - 16px);
    border-radius: 18px;
  }
  .topbar {
    grid-template-columns: auto 1fr;
  }
  .top-actions {
    justify-self: end;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }
  .top-actions::-webkit-scrollbar { display: none; }
  .workspace {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .chat-pane { order: 1; height: 58dvh; min-height: 420px; }
  .state-welcome .chat-pane { height: 44dvh; min-height: 310px; }
  .results-pane { order: 2; height: 58dvh; min-height: 520px; }
}

@media (max-width: 640px) {
  .app { padding: 0; }
  .workspace-shell {
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .topbar {
    padding: 14px;
    gap: 10px;
  }
  .logo { font-size: 20px; }
  .mood-dots { display: none; }
  .language-pill button { padding: 6px 8px; }
  .ghost-action { padding: 7px 10px; }
  .workspace { padding: 10px; gap: 10px; }
  .chat-pane {
    height: 70dvh;
    min-height: 430px;
    border-radius: 14px;
  }
  .state-welcome .chat-pane {
    height: 42dvh;
    min-height: 300px;
  }
  .results-pane {
    height: 72dvh;
    min-height: 500px;
    padding: 6px 2px;
  }
  .stage-copy {
    display: grid;
    gap: 8px;
  }
  .product-browser-bar {
    display: grid;
    gap: 9px;
  }
  .pager {
    justify-content: flex-start;
  }
  .suggestion-grid,
.store-strip,
  .gift-steps,
  .bundle-products,
  .review-grid {
    grid-template-columns: 1fr;
  }
  .order-row {
    grid-template-columns: 1fr;
  }
  .order-track {
    justify-self: start;
  }
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .product-top .price { font-size: 16px; }
  .stock-badge { max-width: calc(100% - 90px); font-size: 10px; }
  .product-body { padding: 10px; }
  .product-body h3 { font-size: 14px; }
  .product-body .note,
  .product-body .best-for,
  .product-body .delivery-note { font-size: 11.5px; }
  .product-actions { grid-template-columns: 1fr; border-radius: 12px; }
  .voice-panel { grid-template-columns: auto 1fr; }
  .voice-wave { display: none; }
  .voice-panel strong { grid-column: 1 / -1; }
  .workspace-panels { grid-template-columns: 1fr; }
  .bubble { max-width: min(88%, 300px); }
  .mood-chip { max-width: 118px; }
  .composer {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
  }
}

@media (max-width: 390px) {
  .products { grid-template-columns: 1fr; }
  .cart-pill { padding: 7px 10px; }
  .top-actions { gap: 6px; }
  .language-pill { display: none; }
}

@keyframes stageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes messageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes quickIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cartRowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cartBump {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); box-shadow: 0 14px 30px rgba(64, 41, 112, 0.18); }
  100% { transform: scale(1); }
}
@keyframes totalPulse {
  from { color: var(--green); transform: scale(1.08); }
  to { color: var(--blue); transform: scale(1); }
}
@keyframes softPulse {
  from { transform: scale(0.97); background: #eef6ff; }
  to { transform: scale(1); }
}
@keyframes blink {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes shimmer {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}
@keyframes siaThinking {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.06); filter: saturate(1.18); }
}
@keyframes siaDelighted {
  0% { transform: scale(0.94) rotate(-4deg); }
  45% { transform: scale(1.14) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes siaSparkle {
  0% { opacity: 0; transform: scale(0.35) rotate(0); }
  48% { opacity: 1; transform: scale(1.15) rotate(35deg); }
  100% { opacity: 0; transform: scale(1.45) rotate(60deg); }
}
@keyframes siaCareful {
  0%, 100% { transform: scale(1); opacity: 0.88; }
  50% { transform: scale(0.96); opacity: 1; }
}
@keyframes siaPuzzled {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-1px) rotate(-5deg); }
  55% { transform: translateX(1px) rotate(4deg); }
}
@keyframes siaRelieved {
  0% { transform: scale(1.08); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 197, 214, 0.28); }
  50% { box-shadow: 0 0 0 8px rgba(16, 197, 214, 0.06); }
}
@keyframes voiceBar {
  0%, 100% { height: 8px; opacity: 0.55; }
  50% { height: 22px; opacity: 1; }
}
@keyframes routeDash {
  from { transform: translateX(0); }
  to { transform: translateX(15px); }
}
@keyframes routeBob {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 4px)); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Returning-customer cards (buy again, wishlist, recipients, occasions,
   memory controls, cart recovery). Lightweight, reuses .stage-card / .mini-card. ---- */
.buy-again-list,
.reorder-lines,
.recipient-list,
.occasion-list,
.memory-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.returning-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(49, 59, 90, 0.06);
}
.returning-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.returning-meta strong {
  font-size: 13px;
  color: #1d2939;
  overflow: hidden;
  text-overflow: ellipsis;
}
.returning-meta span {
  font-size: 11.5px;
  color: #667085;
}
.returning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.reorder-status {
  font-size: 10.5px;
  font-weight: 850;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.reorder-status.status-available { background: rgba(46, 160, 92, 0.14); color: #1c7a44; }
.reorder-status.status-price_changed { background: rgba(214, 158, 46, 0.16); color: #9a6a12; }
.reorder-status.status-out_of_stock,
.reorder-status.status-not_found { background: rgba(217, 80, 80, 0.14); color: #a13434; }
.quick-reply--danger { color: #a13434; }
.quick-reply--danger:hover { color: #fff; background: #c0504e; }
.memory-consent-card span,
.cart-recovery-card strong { font-weight: 850; color: #1d2939; }
.memory-consent-card p { color: #475467; margin-top: 4px; }