:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 100%;
  color: #20242b;
  background: #fff;
  --surface: #fff;
  --bot: #f5f6f8;
  --answer: #dfeaf5;
  --answer-text: #263d54;
  --choice: #30343a;
  --choice-text: #fff;
  --choice-hover: #41464d;
  --action: #15803d;
  --action-hover: #166534;
  --border: #d4dfea;
  --border-hover: #91adc9;
  --focus: #50769a;
  --muted: #64748b;
  --controls-width: 420px;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#viewport {
  position: fixed;
  inset-inline: 0;
  top: var(--chat-viewport-top, 0px);
  width: 100%;
  height: 100vh;
  height: var(--chat-viewport-height, 100dvh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  overflow-anchor: none;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#chat {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
#messages { display: flex; flex-direction: column; gap: 8px; }
.message { display: flex; max-width: 100%; align-items: flex-end; gap: 8px; animation: appear 150ms ease-out; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.message.bot:not(.last-in-group) .avatar { visibility: hidden; }
.bubble {
  min-width: 0;
  max-width: min(88%, calc(100% - 40px));
  padding: 12px 15px;
  border-radius: 16px;
  background: var(--bot);
  font-size: 1rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bubble p { margin: 0; }
.message.user { justify-content: flex-end; }
.message.user .bubble { max-width: 85%; background: var(--answer); color: var(--answer-text); }
.bubble.media { padding: 0; background: transparent; overflow: hidden; }
.media img { display: block; max-width: 100%; height: auto; border-radius: 16px; }
#chat img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#controls {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: var(--controls-width);
  margin: 16px auto 0;
}
#controls:empty { display: none; margin: 0; }
.choice, .submit, .checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--choice);
  color: var(--choice-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 1px 2px #26344508;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  white-space: normal;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.action { position: relative; background: var(--action); }
.button-label { width: 100%; padding-inline: 1.375em; }
.action-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; }
.choice:active, .submit:active, .checkout:active { background: var(--choice-hover); transform: translateY(1px); box-shadow: inset 0 2px 3px #00000026; }
.action:active { background: var(--action-hover); }
#latest {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .choice:hover, .submit:hover, .checkout:hover { background: var(--choice-hover); }
  .action:hover { background: var(--action-hover); }
  #latest:hover { color: var(--focus); }
}
button:disabled { cursor: progress; transform: none; box-shadow: none; }
button.is-selected { box-shadow: inset 0 0 0 2px #fff; background: var(--choice-hover); }
button.action.is-selected { background: var(--action-hover); }
button:disabled .button-label { text-decoration: underline; text-underline-offset: 3px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.input-form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: center; background: var(--surface); border: 1px solid #8391a1; border-radius: 12px; padding: 5px; scroll-margin-block: 16px; }
.input-form:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; }
.field-entry { display: flex; flex: 1 1 9rem; align-items: center; min-width: 0; }
.name-form .field-entry { flex-basis: 12rem; }
.field-unit { padding-right: 12px; color: var(--muted); font-size: 1rem; }
.input-form input { width: 100%; min-width: 0; min-height: 52px; padding: 10px 12px; border: 0; outline: none; background: transparent; color: #20242b; line-height: 1.5; font-size: max(16px, 1rem); }
.input-form input[aria-invalid="true"] { box-shadow: inset 0 -2px #b42318; }
.input-form input::placeholder { color: var(--muted); opacity: 1; }
.input-form .submit { width: auto; max-width: 100%; flex: 0 0 auto; margin-left: auto; }
#error { max-width: var(--controls-width); color: #b42318; font-size: .875rem; line-height: 1.45; margin: 10px auto 0; }
#error:empty { display: none; }
.typing { animation: none; }
.typing .bubble { display: flex; align-items: center; justify-content: center; gap: 5px; width: 64px; height: 46px; padding: 12px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
.bubble.goal {
  width: calc(100% - 40px);
  max-width: calc(100% - 40px);
  padding: 16px;
  white-space: normal;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 3px 18px #1720330a, 0 0 0 1px #17203306;
}
.goal-card { margin: 0; container-type: inline-size; }
.goal-title { font-size: 1.125rem; font-weight: 700; color: #172033; line-height: 1.3; }
.goal-values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; margin: 18px 0 12px; }
.goal-values > div { min-width: 0; }
.goal-weight + .goal-weight { padding-inline-start: 18px; border-inline-start: 1px solid #e6eaf0; }
.goal-values dt { color: #627086; font-size: .8125rem; }
.goal-values dd { margin: 3px 0 0; font-size: 1.375rem; font-weight: 700; color: #172033; line-height: 1.25; }
.goal-date { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.goal-date dt, .goal-date dd { font-size: .875rem; color: #526174; }
.goal-date dd { margin: 0; font-weight: 600; }
.goal-plot { display: block; width: 100%; height: auto; aspect-ratio: 2; overflow: visible; }
.goal-grid { stroke: #e9edf2; stroke-width: 1; fill: none; }
.goal-line { stroke-width: 4.5; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px #10b98118); }
.goal-reveal { stroke-dasharray: 100; stroke-dashoffset: 0; }
.goal-area { opacity: 1; }
.goal-point { stroke: #fff; stroke-width: 2.5; opacity: 1; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 1px 1px #17203312); }
.goal-end { stroke-width: 3; filter: drop-shadow(0 0 3px #10b98130); }
.goal-halo { fill: #10b981; opacity: .14; transform-box: fill-box; transform-origin: center; }
.goal-ticks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 4px -6.25% 0; color: #627086; text-align: center; font-size: .75rem; line-height: 1.5; }
@container (max-width: 11rem) {
  .goal-ticks span { white-space: nowrap; overflow-wrap: normal; min-width: 0; justify-self: center; }
  .goal-ticks span:nth-child(even) { padding-top: 1.5em; }
}
.goal-neutral { min-height: 160px; padding-top: 16px; color: #526174; }
/* The static/default rendering is complete. Only observed, animatable charts
   wait to reveal; missing APIs, animation failures and restored sessions stay visible. */
.goal-card.will-animate:not(.is-visible) :is(.goal-line, .goal-point, .goal-area, .goal-halo) { opacity: 0; }
.goal-card.will-animate.is-visible .goal-reveal { animation: goal-draw 800ms cubic-bezier(.22,.61,.36,1) both; }
.goal-card.will-animate.is-visible .goal-point { animation: goal-point-in 180ms var(--point-delay, 800ms) ease-out both; }
.goal-card.will-animate.is-visible .goal-area { animation: goal-area-in 300ms 800ms ease-out both; }
.goal-card.will-animate.is-visible .goal-halo { animation: goal-halo-in 550ms 800ms ease-out both; }
@keyframes goal-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes goal-point-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes goal-area-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes goal-halo-in { from { opacity: 0; transform: scale(.5); } to { opacity: .14; transform: scale(1); } }
@media (min-width: 600px) {
  .goal-title { font-size: 1.25rem; }
  .goal-values { grid-template-columns: 1fr 1fr 1.35fr; gap: 16px; }
  .goal-weight + .goal-weight { padding-inline-start: 16px; }
  .goal-date { grid-column: auto; display: block; padding-inline-start: 16px; border-inline-start: 1px solid #e6eaf0; }
  .goal-date dd { margin-top: 5px; }
}
[hidden] { display: none !important; }
@keyframes appear { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 50% { opacity: .35; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-motion: reduce) {
  .goal-card.will-animate :is(.goal-line, .goal-point, .goal-area) { opacity: 1; transform: none; }
  .goal-card.will-animate .goal-halo { opacity: .14; transform: none; }
  .goal-reveal { stroke-dashoffset: 0; }
}