/* Gentika landing v3 - card styles for the LIVE launcher shell (Aug 10).
   shell.css is the verbatim canonical port and carries no card CSS; the card
   recipes exist only in demo_shell.css, scoped to the demo film's .gxs-stage.
   This file gives the real assistant (#messages, shell_core.js renderers)
   the cards the Aug-10 agent actually emits: the ask_followups question form
   and the show_pricing quote card. Recipes follow demo_shell.css:624-647 /
   the supermarket baseline's shell_cards_core.css:295-347, re-scoped and
   extended with the scale / stepper / text inputs the live renderer has and
   the scripted demo never used. Tokens (--ink, --line, --accent,
   --user-bubble...) come from shell.css's :root + the page's #brand-tokens. */

/* ---------- question form (ask_followups -> renderQuestionForm) ---------- */
#messages .qform-card {
  align-self: stretch;
  background: color-mix(in srgb, #ffffff 78%, transparent);
  border: 1px solid var(--line, #e4e4e7);
  border-radius: 14px;
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
#messages .qform-intro { font-size: 13.5px; color: var(--muted, #8a8d93); }
#messages .qform-q { display: flex; flex-direction: column; gap: 8px; }
#messages .qform-label { font-size: 13.5px; font-weight: 600; color: var(--ink, #2b2b30); }
#messages .qform-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#messages .qform-chip {
  border: 1px solid var(--line, #e4e4e7); background: #fff; color: var(--ink, #2b2b30);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
}
/* the picked chip wears the conversation's own bubble tone (cofounder, Aug 9) */
#messages .qform-chip.on {
  background: color-mix(in srgb, var(--user-bubble, #4a4a50) 78%, transparent);
  border-color: transparent;
  color: var(--user-ink, #fff);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
#messages .qform-card.sent .qform-chip:not(.on) { opacity: 0.5; }

/* scale question: range + live readout + end labels */
#messages .qform-scale { display: flex; align-items: center; gap: 12px; }
#messages .qform-scale input[type="range"] { flex: 1; accent-color: var(--accent, #17171a); }
#messages .qform-val { font-size: 13px; font-weight: 600; color: var(--ink, #2b2b30); min-width: 44px; text-align: right; }
#messages .qform-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted, #8a8d93); }

/* number question: − field + with unit */
#messages .qform-stepper { display: flex; align-items: center; gap: 8px; }
#messages .qform-stepper .qa {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  border: 1px solid var(--line, #e4e4e7); background: #fff; color: var(--ink, #2b2b30);
  font-size: 16px; line-height: 1; cursor: pointer; font-family: inherit;
}
#messages .qform-stepper .qa:disabled { opacity: 0.5; cursor: default; }
#messages .qform-stepper input[type="number"] {
  width: 96px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--ink, #2b2b30);
  border: 1px solid var(--line, #e4e4e7); border-radius: 10px; background: #fff;
}
#messages .qs-unit { font-size: 12.5px; color: var(--muted, #8a8d93); }

/* free-text question */
#messages .qform-text {
  padding: 9px 12px; font: inherit; font-size: 13.5px; color: var(--ink, #2b2b30);
  border: 1px solid var(--line, #e4e4e7); border-radius: 10px; background: #fff;
}

/* footer + submit (renderer emits .add-btn.qform-send; .add-btn has no shell
   style of its own on this site, so the recipe lives here) */
#messages .qform-foot { display: flex; justify-content: flex-end; }
#messages .qform-send {
  border: none; border-radius: 999px; padding: 9px 18px;
  background: var(--send-bg, var(--accent, #17171a)); color: var(--accent-ink, #fff);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#messages .qform-send:hover { transform: translateY(-1px); }
#messages .qform-send:disabled { opacity: 0.55; cursor: default; transform: none; }
#messages .qform-card.sent { opacity: 0.85; }

/* ---------- pricing quote card (show_pricing -> renderPricingCard) ---------- */
#messages .pricing-card {
  align-self: stretch;
  background: color-mix(in srgb, #ffffff 84%, transparent);
  border: 1px solid var(--line, #e4e4e7);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
#messages .pricing-card .pc-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted, #8a8d93);
}
#messages .pricing-card .pc-price {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink, #2b2b30);
  line-height: 1.1;
}
#messages .pricing-card .pc-per { font-size: 14px; font-weight: 500; color: var(--muted, #8a8d93); margin-left: 2px; }
#messages .pricing-card .pc-sub { font-size: 13px; color: var(--ink, #2b2b30); }
#messages .pricing-card .pc-note { font-size: 12.5px; color: var(--muted, #8a8d93); }
#messages .pricing-card .pc-link {
  margin-top: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--ink, #2b2b30); text-decoration: none; opacity: 0.75;
  transition: opacity 0.15s ease;
}
#messages .pricing-card .pc-link:hover { opacity: 1; text-decoration: underline; }

/* interactive quote card: volume slider + billing toggle (client-side
   recompute - no model calls while the visitor explores) */
#messages .pricing-card .pc-slider { margin-top: 8px; display: flex; }
#messages .pricing-card .pc-slider input[type="range"] { flex: 1; accent-color: var(--accent, #17171a); }
#messages .pricing-card .pc-toggle { display: flex; gap: 6px; margin-top: 2px; }
#messages .pricing-card .pc-toggle button {
  border: 1px solid var(--line, #e4e4e7); background: #fff; color: var(--ink, #2b2b30);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#messages .pricing-card .pc-toggle button.on {
  background: var(--accent, #17171a); border-color: transparent; color: var(--accent-ink, #fff);
}