/* HealthAera Haily skin, light only.
   Palette, type, and radii from vuelo-frontend HailySkin.scss
   and library-theme.scss. Do not invent a second accent. */

:root {
  color-scheme: light;
  --page: #faf9f5;
  --paper: #fdfcf8;
  --stone: #f0ebde;
  --inset: #f6f1e8;
  --ink: #3a352e;
  --ink-soft: #6b6154;
  --slate: #514a40;
  --muted: #9a8f7d;
  --line: #e7dfd0;
  --haily: oklch(0.5 0.05 252);
  --haily-ink: oklch(0.37 0.045 248);
  --haily-deep: oklch(0.44 0.05 252);
  --haily-tint: oklch(0.965 0.015 245);
  --haily-line: oklch(0.88 0.028 248);
  --health-tint: #ffefec;
  --health-line: #eed0ca;
  --health-ink: #5b332c;
  --well-tint: #ebf7ed;
  --well-ink: #2b4733;
  --know-tint: #fbf2e3;
  --know-ink: #564121;
  --danger: #8d3a3a;
  --radius-btn: 14px;
  --radius-card: 16px;
  --radius-bubble: 18px;
  --radius-composer: 20px;
  --shadow: 0 10px 26px rgba(58, 53, 46, 0.07);
  --shadow-blue: 0 12px 26px rgba(40, 60, 110, 0.18);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-brand: cubic-bezier(0.22, 0.7, 0.3, 1);
  --sans: "Mulish", "Avenir Next", sans-serif;
  --serif: "Cormorant Garamond", "Palatino Linotype", serif;
  --z-nav: 20;
  --z-composer: 15;
  --z-skip: 30;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background-color: var(--page);
  background-image:
    radial-gradient(78% 42% at 100% -8%, oklch(0.94 0.02 250 / 0.85), transparent 62%),
    radial-gradient(58% 36% at -8% 100%, rgba(245, 214, 208, 0.55), transparent 58%);
  background-attachment: fixed;
  font: 400 16px/1.5 var(--sans);
}

::selection {
  background: var(--haily-line);
  color: var(--ink);
}

a { color: var(--haily-ink); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--haily);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: var(--z-skip);
  background: var(--paper);
  color: var(--ink);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-btn);
}

.skip:focus { top: 0.5rem; }

h1, h2, h3, .empty-title, .brand-name {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--haily-ink);
}

h1 { font-size: clamp(1.75rem, 2vw, 2.15rem); line-height: 1.12; margin: 0; }

h2 { font-size: 1.35rem; line-height: 1.2; margin: 1.75rem 0 0.55rem; }

h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }

p { margin: 0.4rem 0; }

.quiet, .technical { color: var(--ink-soft); }

.technical { font-size: 0.875rem; }

/* Nav: floating island, one line, content scrolls under it. */

.site {
  position: sticky;
  top: 12px;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(1080px, calc(100% - 32px));
  margin: 16px auto 0;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: rgba(253, 252, 248, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand-name {
  font-size: 1.45rem;
  line-height: 1;
  color: var(--haily-ink);
}

nav { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }

nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

nav a[aria-current="page"] {
  color: var(--haily-ink);
  background: var(--haily-tint);
}

main {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

body:not(:has(#chat-app)) main > section {
  background: rgba(253, 252, 248, 0.72);
  border: 1px solid rgba(231, 223, 208, 0.9);
  border-radius: calc(var(--radius-card) + 8px);
  padding: 28px 28px 36px;
  box-shadow: var(--shadow);
}

.page-head,
.actions,
.history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.page-head { margin-bottom: 0.5rem; }

.callout,
.message {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  color: var(--ink);
}

.field-error { color: var(--danger); font-weight: 600; margin: 0.25rem 0; }

.row { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.85rem 0; }

label { font-weight: 600; color: var(--ink); font-size: 0.92rem; }

input,
select,
textarea,
button,
.button { font: inherit; }

input,
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--inset);
  color: var(--ink);
  transition: border-color 160ms ease, background-color 160ms ease;
}

textarea { resize: vertical; }

input::placeholder,
textarea::placeholder { color: var(--slate); }

input:focus,
select:focus,
textarea:focus { background: var(--paper); border-color: var(--haily-line); }

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--haily-line);
  background: var(--paper);
  color: var(--haily-ink);
  border-radius: var(--radius-btn);
  padding: 0.55rem 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease;
}

button.primary,
.button.primary {
  background: var(--haily-deep);
  border-color: var(--haily-deep);
  color: #fff;
  box-shadow: var(--shadow-blue);
}

button:disabled:not(.is-sending),
.button:disabled:not(.is-sending) {
  cursor: not-allowed;
  background: var(--stone);
  color: var(--slate);
  border-color: var(--line);
  box-shadow: none;
  opacity: 1;
}

.send.is-sending:disabled {
  background: var(--haily-deep);
  color: #fff;
  border-color: var(--haily-deep);
  cursor: progress;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin: 1rem 0;
  padding: 0.8rem 1rem 1rem;
  background: var(--paper);
}

legend { font-weight: 600; padding: 0 0.35rem; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
  margin: 1.25rem 0 1.5rem;
}

.filters .field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 9rem; }

.filters .grow { flex: 1 1 16rem; }

.filters label { display: flex; flex-direction: column; gap: 0.35rem; }

.filters input,
.filters select { width: auto; min-width: 11rem; }

.filters .field input,
.filters .field select { width: 100%; min-width: 0; }

.lede { margin: 0.2rem 0 0; color: var(--ink-soft); }

.foot { margin-top: 0.8rem; }

.status-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.prompt-row { cursor: pointer; }

.prompt-row:hover td,
.prompt-row:focus-within td { background: var(--haily-tint); }

.row-link { font-weight: 700; color: inherit; text-decoration: none; }

.row-link:hover { text-decoration: underline; }

.editor-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.live-line { margin: 0; }

.back { margin-top: 0; }

.step-rail h2:first-child { margin-top: 0; }

.step-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.step-list li { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-soft); }

.step-list li.is-current { color: var(--ink); font-weight: 700; }

.step-list li.is-done { color: var(--well-ink); }

.step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.72rem;
  font-weight: 700;
}

.step-list li.is-current .step-index {
  background: var(--haily-deep);
  border-color: var(--haily-deep);
  color: #fff;
}

.step-list li.is-done .step-index {
  background: var(--well-tint);
  border-color: #caddcd;
  color: var(--well-ink);
}

.step-rail .actions { flex-direction: column; align-items: stretch; margin: 0.4rem 0 0.8rem; }

.step-rail .actions .button,
.step-rail .actions button { width: 100%; }

.history-compact li { padding: 0.55rem 0.7rem; }

.restore-block form {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.sign-out {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.sign-out button { padding: 0.4rem 0.75rem; }

.who { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

body[data-bare="1"] { display: block; height: auto; overflow: auto; }

body[data-bare="1"] main { width: min(34rem, calc(100% - 32px)); padding-top: 8vh; }

.login-brand { text-align: center; margin-bottom: 1.25rem; }

.login-brand .orb--hero { margin: 0 auto 0.6rem; }

.account-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.7rem;
}

.account-list li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 0.75rem 0.9rem;
}

.account-label { font-weight: 700; margin: 0 0 0.2rem; }

.login-form .primary { width: 100%; }

.table-wrap, table { width: 100%; }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

caption { text-align: left; margin-bottom: 0.45rem; }

th,
td {
  text-align: left;
  padding: 0.8rem 0.85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

tr:last-child td { border-bottom: 0; }

th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  background: var(--haily-tint);
}

.tag {
  display: inline-block;
  border: 1px solid var(--haily-line);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--haily-ink);
  background: var(--haily-tint);
}

.tag[data-status="Draft"] { color: var(--slate); background: var(--stone); border-color: var(--line); }
.tag[data-status="In review"] { color: var(--know-ink); background: var(--know-tint); border-color: #e9d8be; }
.tag[data-status="Approved"] { color: var(--well-ink); background: var(--well-tint); border-color: #caddcd; }
.tag[data-status="Live"] { color: var(--haily-ink); background: var(--haily-tint); border-color: var(--haily-line); }
.tag[data-status="Retired"] { color: var(--ink-soft); background: transparent; border-color: var(--line); }

.steps { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; list-style: none; margin: 0.4rem 0 0; }

.steps li {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  color: var(--ink-soft);
  background: transparent;
}

.steps li[aria-current="step"] {
  font-weight: 700;
  color: var(--haily-ink);
  background: var(--haily-tint);
}

.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.8fr);
  gap: 1.5rem;
  align-items: start;
}

.editor-grid aside {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1rem 1.1rem 1.2rem;
}

#fill-ins { display: flex; flex-wrap: wrap; gap: 0.4rem; }

#fill-ins button { font-size: 0.85rem; padding: 0.35rem 0.7rem; border-radius: 999px; }

.req { font-size: 0.72rem; font-weight: 700; color: var(--haily-ink); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

pre,
.diff {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 0.75rem;
  color: var(--ink);
}

.diff-label { font-weight: 700; font-size: 0.75rem; }

.diff-added { text-decoration: underline; }

.diff-removed { text-decoration: line-through; }

.history,
.activity { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }

.history li,
.activity li {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 0.9rem 1rem;
}

.activity time { display: block; color: var(--ink-soft); font-size: 0.85rem; }

/* Chat */

body:has(#chat-app) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

body:has(#chat-app) .site { flex: none; width: min(920px, calc(100% - 24px)); }

body:has(#chat-app) main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: min(920px, calc(100% - 24px));
  max-width: 920px;
  padding: 8px 0 14px;
  overflow: hidden;
}

#chat-app.chat-desk {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.stage-head {
  position: relative;
  z-index: 4;
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 6px 4px;
}

.stage-title h1 { font-size: 2rem; }

.session { position: relative; flex: none; }

.session > summary,
.extras > summary,
.turn-details > summary {
  list-style: none;
  cursor: pointer;
}

.session > summary::-webkit-details-marker,
.extras > summary::-webkit-details-marker,
.turn-details > summary::-webkit-details-marker { display: none; }

.session > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--haily-line);
  color: var(--haily-ink);
  font-weight: 600;
  font-size: 0.9rem;
}

.session > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms var(--ease-out);
}

.session[open] > summary::after { transform: translateY(1px) rotate(225deg); }

.session-body {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: var(--z-nav);
  width: min(26rem, 78vw);
  max-height: min(60dvh, 28rem);
  overflow: auto;
  padding: 0.9rem 1rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.mode {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0.4rem 0 0.2rem;
}

.mode legend { width: 100%; padding: 0; margin-bottom: 0.15rem; }

.mode-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--inset);
  font-weight: 600;
}

.mode-option:has(input:checked) {
  border-color: var(--haily);
  background: var(--haily-tint);
  color: var(--haily-ink);
}

.mode input,
.check input,
.row input[type="checkbox"] { width: auto; }

.check { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }

.extras { margin-top: 0.4rem; }

.extras > summary { color: var(--haily-ink); font-weight: 600; font-size: 0.9rem; }

.transcript {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.6rem 0.35rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--haily-line) transparent;
}

.transcript-alert {
  align-self: stretch;
  border-color: var(--health-line);
  background: var(--health-tint);
  color: var(--health-ink);
}

.empty-hero {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  padding: 12px 16px 24px;
}

.empty-title {
  margin: 10px 0 0;
  font-size: 2rem;
  line-height: 1.12;
}

.empty-copy {
  margin: 0;
  max-width: 28ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.bubble-row {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  max-width: min(34rem, 88%);
  transform-origin: 0% 100%;
}

.bubble-row:has(table) { max-width: 100%; }

.bubble-row.user { align-self: flex-end; align-items: flex-end; transform-origin: 100% 100%; }

.bubble-row.haily { align-self: flex-start; align-items: flex-start; }

.who {
  margin: 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.bubble {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--haily-line);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 5px;
  background: #fff;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow);
}

.bubble-row.user .bubble {
  background: var(--haily-deep);
  color: #fff;
  border-color: var(--haily-deep);
  border-radius: var(--radius-bubble) var(--radius-bubble) 5px var(--radius-bubble);
  box-shadow: var(--shadow-blue);
}

.bubble.error {
  color: var(--health-ink);
  border-color: var(--health-line);
  background: var(--health-tint);
  box-shadow: none;
  font-style: normal;
}

.bubble.markdown {
  white-space: normal;
}

.bubble.markdown > :first-child { margin-top: 0; }

.bubble.markdown > :last-child { margin-bottom: 0; }

.bubble.markdown :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--haily-ink);
  margin: 0.8rem 0 0.28rem;
  line-height: 1.25;
}

.bubble.markdown h1 { font-size: 1.35rem; }

.bubble.markdown h2 { font-size: 1.2rem; }

.bubble.markdown h3 { font-size: 1.08rem; }

.bubble.markdown :is(h4, h5, h6) { font-size: 1rem; }

.bubble.markdown p { margin: 0.45rem 0; }

.bubble.markdown ul,
.bubble.markdown ol {
  margin: 0.35rem 0;
  padding-left: 1.25rem;
}

.bubble.markdown li { margin: 0.15rem 0; }

.bubble.markdown strong { font-weight: 700; }

.bubble.markdown em { font-style: italic; }

.bubble.markdown:has(table) {
  width: 100%;
  overflow-x: auto;
}

.bubble.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.55rem 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.35;
}

.bubble.markdown th,
.bubble.markdown td {
  border: 1px solid var(--line);
  padding: 0.42rem 0.55rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.bubble.markdown th:nth-child(1),
.bubble.markdown td:nth-child(1),
.bubble.markdown th:nth-child(2),
.bubble.markdown td:nth-child(2) {
  white-space: nowrap;
  width: 1%;
}

.bubble.markdown th {
  background: var(--page);
  font-weight: 700;
}

.think {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 12px 16px 12px 12px;
  background: #fff;
  border: 1px solid var(--haily-line);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 5px;
  box-shadow: var(--shadow);
}

.think-stage {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.5em;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
}

.think-sizer {
  display: block;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  height: 1.5em;
}

.think-copy {
  position: absolute;
  left: 0;
  top: 0;
  height: 1.5em;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ink-soft);
}

.think-marks {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 14px;
}

.think-marks i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--haily);
  font-style: normal;
}

.think-copy.is-arriving { opacity: 0; }

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

.turn-details {
  width: min(100%, 34rem);
  margin-top: 0.1rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.turn-details > summary {
  display: inline-flex;
  color: var(--haily-ink);
  font-weight: 600;
}

.turn-meta {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  margin: 0.7rem 0;
}

.turn-meta dt { font-weight: 600; color: var(--ink); }

.turn-meta dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.meta-label { margin: 0.75rem 0 0.25rem; font-weight: 600; color: var(--ink); }

.turn-details pre {
  max-height: 14rem;
  overflow: auto;
  margin: 0;
  font-size: 0.78rem;
}

.composer {
  position: relative;
  z-index: var(--z-composer);
  flex: none;
  padding-top: 0.35rem;
}

.composer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
}

.composer textarea {
  width: 100%;
  min-height: 3rem;
  max-height: 9rem;
  resize: none;
  background: #fff;
  border-radius: 16px;
}

.send {
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  min-height: 46px;
}

.send-glyph {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  transition: transform 160ms var(--ease-out);
}

.send:disabled .send-glyph { background: rgba(58, 53, 46, 0.08); }

/* The mark. Same ring and spark as the product Haily orb. */

.orb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--haily);
  background: radial-gradient(60% 60% at 34% 28%, rgba(255, 255, 255, 0.96) 0%, rgba(226, 236, 250, 0.5) 55%, rgba(255, 255, 255, 0) 100%);
}

.orb-star { color: var(--haily); line-height: 1; }

.orb--nav { width: 28px; height: 28px; }
.orb--nav .orb-star { font-size: 9px; }

.orb--think { width: 36px; height: 36px; animation: thinkPulse 2.8s var(--ease-in-out) infinite; }
.orb--think .orb-star { font-size: 12px; position: relative; animation: thinkTwinkle 2.2s var(--ease-in-out) infinite; }
.orb--think .orb-orbit {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px dashed var(--haily-line);
}

.orb--hero {
  width: 96px;
  height: 96px;
  border-width: 3px;
  box-shadow: 0 0 34px rgba(70, 110, 190, 0.22), inset 0 0 18px rgba(120, 160, 225, 0.25);
}
.orb--hero .orb-star { font-size: 22px; }

.orb-stage {
  position: relative;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orb-stage-outer,
.orb-stage-orbit {
  position: absolute;
  border-radius: 50%;
}

.orb-stage-outer { inset: 0; border: 1px solid var(--haily-line); }

.orb-stage-orbit { inset: 12px; border: 1px dashed var(--haily-line); }

.orb-stage-dot { position: absolute; border-radius: 50%; }

.orb-stage-dot--blue {
  top: 24px;
  right: 14px;
  width: 6px;
  height: 6px;
  background: oklch(0.62 0.06 252);
}

.orb-stage-dot--gold {
  bottom: 18px;
  left: 26px;
  width: 5px;
  height: 5px;
  background: oklch(0.55 0.06 72);
}

.skeleton {
  height: 0.9rem;
  margin: 0.4rem 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--stone), var(--paper), var(--stone));
  background-size: 200% 100%;
}

.skeleton.short { width: 45%; }

button:active,
.button:active,
.mode-option:active,
.session > summary:active {
  transform: scale(0.97);
}

/* Motion. Page open is the first-look beat. Bubbles, thinking, and send are shorter. */

.site { animation: rise 480ms var(--ease-brand) both; }

.empty-hero { animation: rise 620ms var(--ease-brand) 80ms both; }

.stage-head { animation: rise 520ms var(--ease-brand) 40ms both; }

.composer { animation: rise 500ms var(--ease-brand) 150ms both; }

body:not(:has(#chat-app)) main > section { animation: rise 460ms var(--ease-brand) 40ms both; }

.session[open] .session-body { animation: rise 220ms var(--ease-out) both; transform-origin: top right; }

.bubble-row.user { animation: userIn 260ms var(--ease-out) both; }

.bubble-row.haily { animation: hailyIn 280ms var(--ease-out) both; }

.bubble.just-arrived { animation: arrive 240ms var(--ease-out) both; }

.orb-stage-orbit { animation: spin 28s linear infinite; }

.orb--hero { animation: breathe 3.2s var(--ease-in-out) infinite; }

.orb--think .orb-orbit { animation: spin 10s linear infinite; }

.think-copy { animation: thinkFade 2.4s var(--ease-in-out) infinite; }

.think-marks i { animation: mark 1.4s var(--ease-in-out) infinite; }

.think-marks i:nth-child(2) { animation-delay: 120ms; }

.think-marks i:nth-child(3) { animation-delay: 240ms; }

.skeleton { animation: shimmer 1.2s linear infinite; }

.send.is-sending .send-glyph { animation: sendAway 420ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  nav a:hover { background: var(--haily-tint); color: var(--haily-ink); }
  button:hover,
  .button:hover { border-color: var(--haily); }
  button.primary:hover,
  .button.primary:hover { background: var(--haily-ink); }
  .send:hover .send-glyph { transform: translate(1px, -1px); }
  button:disabled:not(.is-sending):hover,
  .button:disabled:not(.is-sending):hover { background: var(--stone); border-color: var(--line); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes userIn {
  from { opacity: 0; transform: translate(12px, 8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes hailyIn {
  from { opacity: 0; transform: translate(-12px, 8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes thinkFade {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

@keyframes thinkPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes thinkTwinkle {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

@keyframes mark {
  0%, 70%, 100% { opacity: 0.4; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-2px); }
}

@keyframes sendAway {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(-7px); opacity: 0; }
  55% { transform: translateY(6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site,
  .empty-hero,
  .stage-head,
  .composer,
  body:not(:has(#chat-app)) main > section,
  .session[open] .session-body,
  .bubble-row.user,
  .bubble-row.haily,
  .bubble.just-arrived {
    animation: fade 180ms ease both;
  }

  .orb-stage-orbit,
  .orb--hero,
  .orb--think,
  .orb--think .orb-orbit,
  .orb--think .orb-star,
  .think-copy,
  .think-marks i,
  .skeleton,
  .send.is-sending .send-glyph {
    animation: none;
  }

  .think-copy { opacity: 1; }

  .think-marks i { opacity: 1; transform: none; }

  button:active,
  .button:active,
  .mode-option:active,
  .session > summary:active,
  .send:hover .send-glyph {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site,
  body:not(:has(#chat-app)) main > section {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 767px) {
  .site,
  body:has(#chat-app) .site,
  main,
  body:has(#chat-app) main {
    width: calc(100% - 16px);
  }

  .site { margin-top: 8px; padding-left: 10px; }

  nav a { padding: 8px 10px; font-size: 0.85rem; }

  body:not(:has(#chat-app)) main > section { padding: 18px 14px 24px; }

  .editor-grid,
  .compare { grid-template-columns: 1fr; }

  .composer-row { grid-template-columns: 1fr; }

  .send { width: 100%; }

  .orb-stage { width: 132px; height: 132px; }
  .orb--hero { width: 76px; height: 76px; }
  .orb--hero .orb-star { font-size: 18px; }
  .empty-title, .stage-title h1 { font-size: 1.7rem; }

  .session-body { right: 0; width: min(100%, 22rem); }

  .bubble-row { max-width: 92%; }
}

@media (max-width: 1024px) {
  .editor-grid,
  .compare { grid-template-columns: 1fr; }
}