/* Controls and role tokens copied from HumanAmp/amp-chatbot experience/humanamp. Source geometry and icon paths preserved; wrapper layout alone is adapted. */
.dave-ui {
  --ha-ink: #2b2a28;
  --ha-ink-raised: #3b3936;
  --ha-ink-soft: #6e645e;
  --ha-paper: #f7f1ee;
  --ha-paper-face: #f2e2c6;
  --ha-card: #fbf7f4;
  --ha-hairline: #e4dad5;
  --ha-bloom: #e77d70;
  --ha-bloom-deep: #a9453b;
  --ha-spread: #e86f5e;
  --ha-dry-edge: #e4a874;
  --ha-dry-edge-text: #8f5a30;
  --ha-violet: #6f5266;
  --ha-soft-on-dark: #b9b2ac;
  --ha-wordmark: #3a3a3d;
  --ha-copper: #b5651d;
  --ha-petrol: #4f6f73;
  --ha-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --ha-emerald: #7c8a67;

  /* HUM-147 preview tokens. The accent is the one value that differs between the
     Bloom (default, prototype baseline) and Ember comparison builds; see
     docs/design/hum-146-amp-experience/ASSET-MAP.md section 3. */
  --xp-accent: var(--ha-bloom);
  --xp-accent-deep: var(--ha-bloom-deep);
  --xp-listen: var(--ha-spread);
  --xp-speak: var(--ha-dry-edge);
  --xp-speak-deep: var(--ha-dry-edge-text);
  --xp-type-problem: var(--xp-accent);
  --xp-type-opportunity: var(--ha-dry-edge);
  --xp-type-idea: #b893ab; /* new colour from the prototype, pending Lee's brand sign-off (D2) */
  /* Conversation metadata and "Add to notes" sit on source tiles over tinted cards; the soft
     ink must clear 4.5:1 on those tiles, not just on the plain card (R2). #5e5550 is Lee's own
     light hover ink: worst case 5.3:1 (Idea tint); ink-soft was 4.2:1 there. */
  --xp-src-soft: #5e5550;
  --xp-ring-you: var(--xp-accent);
  --xp-ring-lee: var(--ha-copper);
  --xp-ring-dave: var(--ha-petrol);
  --xp-ring-contributor: var(--ha-emerald);
  --xp-swatch-match: conic-gradient(#f7ecdd 0 33%, #f9e8e4 0 66%, #efe8ea 0);
  --xp-swatch-paper: #fbf7f4;
  --xp-swatch-blue: #e7eef6;
  --xp-swatch-peach: #fbe9dd;
  --xp-swatch-green: #e7f0e3;

  /* The website's current palette, as captured (HumanAmp/humanamp-www afb724c, 2 October 2026,
     brand/humanamp-tokens.css: --ha-bloom, --ha-spread, --ha-ink). Named --ha-www-* and defined
     only in this experience, so the older values above, the card tints and every customer site's
     global tokens stay exactly as they are. */
  --ha-www-bloom: #f5897c;
  --ha-www-spread: #fc9082;
  --ha-www-ink: #292b2f;

  /* Website button family (hybrid/amp-introduction.css at the same commit), as roles on that
     palette. Candy: bloom-to-spread glass with an ink icon (film Play, dock Talk). Secondary:
     outlined deep coral (Type, Attach, secondary sheet actions); lifted to bloom in dark mode for
     contrast. */
  --xp-candy-bloom: var(--ha-www-bloom);
  --xp-candy-spread: var(--ha-www-spread);
  --xp-candy-ink: var(--ha-www-ink);
  --xp-candy-edge: color-mix(in srgb, var(--ha-paper) 42%, transparent);
  --xp-secondary: var(--ha-bloom-deep);
  --xp-focus: var(--ha-bloom-deep);

  --f-sans: Manrope, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Role tokens — light */
  --bg: var(--ha-paper);
  --fg: var(--ha-ink);
  --fg-soft: var(--ha-ink-soft);
  --card: var(--ha-card);
  --line: var(--ha-hairline);
  --wm: var(--ha-wordmark);
  --sheet: #fbf7f4;
  --shadow: rgba(43, 42, 40, 0.16);
  --ask: rgba(43, 42, 40, 0.055);
  --ask-fg: var(--ha-ink);
  --scrim: rgba(43, 42, 40, 0.26);
  --cta-bg: var(--ha-ink-soft);
  --cta-fg: var(--ha-paper);
  --cta-hover: #5e5550;
  --gl-bg: rgba(255, 255, 255, 0.55);
  --gl-bg-strong: rgba(255, 255, 255, 0.75);
  --gl-brd: rgba(255, 255, 255, 0.85);
  --gl-hi: rgba(255, 255, 255, 0.95);
  --gl-sh: rgba(43, 42, 40, 0.35);
  --new: rgba(228, 168, 116, 0.28);

  --read-font: var(--f-sans);
  --read-size: 17px;
  --read-lh: 1.6;
  color-scheme: light dark;}
.dave-ui .secondary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--xp-secondary);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: transparent;
  color: var(--xp-secondary);
  font: 800 15px/1 var(--f-sans);
  cursor: pointer;
  transition: background-color 180ms var(--ha-ease);
}
.dave-ui .secondary:hover {
  background: color-mix(in srgb, var(--xp-candy-bloom) 12%, transparent);
}
.dave-ui .secondary:focus-visible {
  outline: 3px solid var(--xp-focus);
  outline-offset: 3px;
}
.dave-ui .amp {
  position: relative;
  width: 150px;
  height: 158px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}
.dave-ui .amp:focus-visible {
  outline: 3px solid var(--xp-focus);
  outline-offset: 4px;
  border-radius: 30px;
}
.dave-ui .amp-face {
  position: relative;
  width: 140px;
  height: 132px;
  display: grid;
  place-items: center;
  transition: transform 180ms var(--ha-ease);
  animation: breathe 4.6s ease-in-out infinite;
}
.dave-ui .amp:active .amp-face {
  transform: scale(0.96);
}
.dave-ui .candy-drop {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--xp-candy-bloom) 36%, transparent));
}
.dave-ui .candy {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  clip-path: path('M34,3 Q70,0 106,3 Q137,3 137,34 Q140,66 137,98 Q137,129 106,129 Q70,132 34,129 Q3,129 3,98 Q0,66 3,34 Q3,3 34,3 Z');
  background: linear-gradient(135deg, color-mix(in srgb, var(--ha-paper) 34%, var(--face)), var(--face) 60%, var(--end));
  box-shadow: inset 0 0 0 1.5px var(--xp-candy-edge), inset 0 1px 14px rgba(255, 255, 255, 0.18);
  transition: background 300ms ease;
}
.dave-ui .candy::before,
.dave-ui .candy-glass::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 14%;
  width: 48%;
  height: 24%;
  border-radius: 50%;
  transform: rotate(-22deg);
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  filter: blur(2px);
}
.dave-ui .candy::after,
.dave-ui .candy-glass::after {
  content: '';
  position: absolute;
  bottom: 12%;
  right: 14%;
  width: 35%;
  height: 12%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  filter: blur(5px);
}
.dave-ui .amp-icon {
  position: relative;
  color: var(--xp-candy-ink);
  display: grid;
  place-items: center;
}
.dave-ui .amp {
    transform: scale(var(--amp-scale));
    margin: calc(-79px * (1 - var(--amp-scale))) calc(-75px * (1 - var(--amp-scale)));
  }
.dave-ui .candy-glass {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  height: 59px;
  border-radius: 19px;
  clip-path: path('M 14.96 1.32 Q 30.8 0 46.64 1.32 Q 60.28 1.32 60.28 14.97 Q 61.6 29.05 60.28 43.13 Q 60.28 56.78 46.64 56.78 Q 30.8 58.1 14.96 56.78 Q 1.32 56.78 1.32 43.13 Q 0 29.05 1.32 14.97 Q 1.32 1.32 14.96 1.32 Z');
  background: linear-gradient(135deg, color-mix(in srgb, var(--ha-paper) 34%, var(--xp-candy-bloom)), var(--xp-candy-bloom) 60%, var(--xp-candy-spread));
  box-shadow: inset 0 0 0 1px var(--xp-candy-edge), inset 0 1px 14px rgba(255, 255, 255, 0.18);
  color: var(--xp-candy-ink);
  transition: transform 200ms var(--ha-ease);
}
.compact-starter{border:0;background:transparent;box-shadow:none;border-radius:0;}.compact-starter::before,.compact-starter::after{display:none;}.starter-controls.dave-ui{justify-content:flex-start;gap:24px;}.dave-ui .starter-talk{box-shadow:none;border-radius:0;}.dave-ui .amp-face{animation:none;}.dave-ui .amp-icon svg{width:46px;height:46px;}.dave-ui .secondary svg{width:16px;height:16px;}.dave-ui .starter-free{margin-left:0;}.dave-ui .starter-type{box-shadow:none;}

.dave-ui .cta {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--cta-bg);
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font: 700 15px/1 var(--f-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}