/* Why Are You Alive? — Daimon
   Midnight blue + moonlight silver. The loneliest loneliness, made hospitable.
   Georgia for the big question; Carlito for the conversation. Mobile-first. */

:root {
  --night: #0c1120;        /* page background: deep midnight blue-black */
  --night-soft: #131b30;   /* panels, coach bubbles */
  --night-warm: #1a2440;   /* user bubbles, practice box */
  --line: #263252;
  --ink: #e8edf6;          /* moonlit text */
  --ink-soft: #93a0ba;
  --moon: #cdd9ec;         /* moonlight silver (accent) */
  --moon-2: #8fb4e3;       /* pale moon-blue (accent 2) */
  --moon-dim: #46536f;     /* unlit star */
  --radius: 14px;
  --font: "Carlito", Calibri, "Segoe UI", -apple-system, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  font-family: var(--font);
  font-size: 18.5px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--night);
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px env(safe-area-inset-bottom);
  position: relative;
}

/* a soft moon-glow behind the header */
.moonglow {
  position: absolute;
  top: -140px; left: 50%;
  transform: translateX(-50%);
  width: 480px; height: 320px;
  background: radial-gradient(ellipse at center, rgba(205, 217, 236, 0.13), transparent 65%);
  pointer-events: none;
}

/* ---------- header ---------- */
header { padding: 26px 4px 8px; text-align: center; position: relative; }

.brand {
  font-size: 13.5px;
  letter-spacing: 0.3em;
  font-weight: 700;
  background: linear-gradient(100deg, var(--moon) 20%, var(--moon-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}

h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.tagline {
  color: var(--ink-soft);
  font-size: 15.5px;
  margin-top: 7px;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.tagline a { color: var(--moon-2); text-decoration: none; border-bottom: 1px dotted var(--moon-2); white-space: nowrap; }

/* ---------- constellation ---------- */
.stars {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--line);
}

.star { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.star .glyph {
  font-size: 13px;
  color: var(--moon-dim);
  transition: color 0.6s, text-shadow 0.6s, transform 0.6s;
}

.star .lbl { font-size: 10.5px; color: var(--moon-dim); letter-spacing: 0.05em; transition: color 0.6s; }

.star.lit .glyph {
  color: var(--moon);
  text-shadow: 0 0 10px rgba(205, 217, 236, 0.8);
  transform: scale(1.25);
}
.star.lit .lbl { color: var(--ink-soft); }

/* ---------- chat ---------- */
main#chat {
  flex: 1;
  overflow-y: auto;
  padding: 18px 2px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.msg.coach { background: var(--night-soft); align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid var(--line); }
.msg.user  { background: var(--night-warm); align-self: flex-end; border-bottom-right-radius: 4px; }

.msg.typing { color: var(--ink-soft); }
.msg.typing span { animation: blink 1.2s infinite; }
.msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.msg.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.msg.error {
  background: none;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: 15px;
  align-self: center;
  text-align: center;
}

/* ---------- inline film player ---------- */
.clip-frame {
  align-self: stretch;
  position: relative;
  padding-top: 56.25%; /* 16:9 — padding-% resolves against width, reliable inside flex columns */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  margin: 4px 0;
  flex-shrink: 0;
}

.clip-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---------- the page (card) ---------- */
.card {
  align-self: stretch;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--night-soft), var(--night-soft)) padding-box,
    linear-gradient(135deg, var(--moon), var(--moon-2)) border-box;
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  margin: 4px 0;
}

.card .card-brand {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 12px;
}

.card dl { display: grid; gap: 10px; }

.card dt {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card dd { margin: 1px 0 0; }

.card dd.words { font-family: var(--serif); font-style: italic; }

.card .practice-box {
  margin-top: 12px;
  background: var(--night-warm);
  border-radius: 10px;
  padding: 10px 12px;
}

.card .practice-box dt { color: var(--moon-2); }
.card .practice-box dd { font-weight: 700; }

.card .question {
  font-size: 15.5px;
  color: var(--moon);
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  text-align: center;
}

.card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.card-actions button, .card-actions a {
  font-family: var(--font);
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ink-soft);
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}

.card-actions .primary { background: var(--moon); border-color: var(--moon); color: var(--night); font-weight: 700; }

.card-hint {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* ---------- page bar ---------- */
#pagebar { text-align: center; padding: 2px 0 6px; }

#pagebar button {
  font-family: var(--font);
  font-size: 13.5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}

#pagebar button:hover { color: var(--moon); border-color: var(--moon-dim); }

/* ---------- recall + phrase overlays ---------- */
#recall, #phrase {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
}

#recall[hidden], #phrase[hidden] { display: none; }

#recall-input {
  width: 100%;
  font-family: var(--font);
  font-size: 18.5px;
  padding: 11px 14px;
  margin-top: 6px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--night);
  color: var(--ink);
}

#recall-input:focus { outline: none; border-color: var(--moon-2); }

.phrase-words {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--moon);
  text-align: center;
  padding: 14px 0 6px;
  text-shadow: 0 0 18px rgba(205, 217, 236, 0.35);
}

/* ---------- composer ---------- */
#composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 0 14px;
  border-top: 1px solid var(--line);
  background: var(--night);
  position: sticky;
  bottom: 0;
}

#input {
  flex: 1;
  font-family: var(--font);
  font-size: 18.5px;
  line-height: 1.4;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  resize: none;
  max-height: 130px;
  background: var(--night-soft);
  color: var(--ink);
}

#input::placeholder { color: var(--moon-dim); }

#input:focus { outline: none; border-color: var(--moon-2); }

#send {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--moon), var(--moon-2));
  color: var(--night);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

#send:disabled { opacity: 0.4; cursor: default; }

/* ---------- footer ---------- */
footer {
  padding: 6px 4px 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
}

footer a { color: inherit; }

.journal-line { margin-top: 4px; }

/* ---------- overlays (about + journal) ---------- */
#about, #journal {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
}

#about[hidden], #journal[hidden] { display: none; }

.about-inner, .journal-inner {
  background: var(--night-soft);
  border-top: 1px solid var(--line);
  color: var(--ink);
  width: 100%;
  max-width: 640px;
  max-height: 82dvh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  padding: 24px 20px 30px;
}

.about-inner blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--moon);
}

.about-inner cite {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: normal;
}

.about-inner > .about-inner p { margin-top: 14px; }

.about-inner p + p { margin-top: 12px; }

.about-inner blockquote { margin-bottom: 16px; }

#about-close, #journal-close {
  font-family: var(--font);
  font-size: 15px;
  margin-top: 16px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink-soft);
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.journal-inner h2 { font-size: 20px; font-family: var(--serif); font-style: italic; font-weight: 400; }

.journal-note { font-size: 13px; color: var(--ink-soft); margin: 4px 0 14px; }

#journal-cards .card { margin-bottom: 12px; }

@media (min-width: 480px) {
  header { padding-top: 38px; }
  h1 { font-size: 35px; }
  .stars { gap: 22px; }
  .star .lbl { font-size: 11.5px; }
}