:root {
  --wine-deep: #1c0b14;   /* background */
  --velvet: #2c1220;      /* raised surfaces */
  --velvet-2: #3a1829;    /* borders, hover */
  --blush: #f3dfe5;       /* main text */
  --mauve: #a8838f;       /* secondary text */
  --rose: #e48ea6;        /* stage directions, focus */
  --gold: #e2b45f;        /* kintsugi */
  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --body: "Figtree", system-ui, -apple-system, sans-serif;
  --col: 44rem;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(194, 73, 106, 0.16), transparent 70%),
    var(--wine-deep);
  color: var(--blush);
  font: 400 1rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
button, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}

/* Header */
.bar {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 1rem 1rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: opacity 0.4s;
}
.app[data-state="empty"] .bar .who { opacity: 0; pointer-events: none; }
.app[data-state="empty"] #resetBtn { visibility: hidden; }
.who > div { min-width: 0; }
.who { display: flex; align-items: center; gap: 0.75rem; transition: opacity 0.4s; min-width: 0; }
.name {
  margin: 0;
  font: italic 600 1.5rem/1 var(--display);
  letter-spacing: 0.01em;
}
.status {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  color: var(--mauve);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-actions { flex-shrink: 0; }
.confirm { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--mauve); }
.confirm[hidden] { display: none; }
.ghost {
  background: none;
  border: 1px solid var(--velvet-2);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  color: var(--mauve);
  cursor: pointer;
}
.ghost:hover { color: var(--blush); border-color: var(--mauve); }
.ghost--danger:hover { color: var(--rose); border-color: var(--rose); }

/* Heart */
.heart { display: block; overflow: visible; }
.heart--sm { width: 2.25rem; height: 2rem; flex-shrink: 0; }
.heart--lg { width: 7.5rem; height: 6.75rem; margin: 0 auto; }
.heart .crack { transition: filter 0.4s; }
.app[data-typing="true"] .heart { animation: beat 1.4s ease-in-out infinite; }
.app[data-typing="true"] .heart .crack { filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 8px rgba(226, 180, 95, 0.6)); }
@keyframes beat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.08); }
  24% { transform: scale(0.98); }
  36% { transform: scale(1.05); }
}

/* Scroll area */
.scroll { overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }

/* Intro */
.intro {
  max-width: var(--col);
  margin: 0 auto;
  padding: 10vh 1rem 2rem;
  text-align: center;
}
.app[data-state="chat"] .intro { display: none; }
.intro .heart--lg { animation: arrive 1.2s cubic-bezier(.2,.7,.2,1) both; }
.intro-name {
  margin: 1.25rem 0 0;
  font: italic 400 clamp(3.75rem, 14vw, 7rem)/0.95 var(--display);
  letter-spacing: -0.02em;
}
.intro-line {
  margin: 1rem auto 0;
  max-width: 26rem;
  color: var(--mauve);
  font-size: 1.0625rem;
}
.starters {
  margin: 2.5rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 32rem;
}
.starters button {
  background: var(--velvet);
  border: 1px solid var(--velvet-2);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-size: 0.9375rem;
  cursor: pointer;
}
.starters button:hover { border-color: var(--rose); }
@keyframes arrive {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: none; }
}

/* Messages */
.log {
  list-style: none;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  max-width: var(--col);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.msg { max-width: 85%; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg--user {
  align-self: flex-end;
  background: var(--velvet);
  border: 1px solid var(--velvet-2);
  border-radius: 1.25rem 1.25rem 0.375rem 1.25rem;
  padding: 0.6rem 1rem;
}
.msg--lindsay {
  align-self: flex-start;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  font-size: 1.0625rem;
}
.msg--lindsay em { color: var(--rose); font-style: italic; }
.msg--lindsay strong { font-weight: 600; color: #fff; }
.msg--lindsay.is-pending::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--gold);
  animation: blink 1s steps(2) infinite;
}
.msg--note {
  align-self: center;
  text-align: center;
  font-size: 0.875rem;
  color: var(--mauve);
  max-width: 30rem;
}
.msg--note button { margin-left: 0.5rem; }
@keyframes blink { 50% { opacity: 0; } }

/* Composer */
.composer {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.composer textarea {
  flex: 1;
  resize: none;
  max-height: 10rem;
  background: var(--velvet);
  border: 1px solid var(--velvet-2);
  border-radius: 1.5rem;
  padding: 0.75rem 1.1rem;
  line-height: 1.4;
  font-size: 1rem;
}
.composer textarea::placeholder { color: var(--mauve); }
.composer textarea:focus { outline: none; border-color: var(--rose); }
.send {
  flex-shrink: 0;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: var(--wine-deep);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.send svg { width: 1.25rem; height: 1.25rem; }
.send:disabled { opacity: 0.4; cursor: default; }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}