/* Lumen — kodeshway.org/lumen
   The app's Lumen conversation in the parchment idiom
   (KodeshWaySpecs/lumen/LUMEN_FIRST_LIGHT.md §3–4): a thread of turns under
   a small identity head, the input capsule pinned at the foot. Lumen's own
   ink (--kw-lumen, champagne-bronze) for Lumen's own things, gold for the
   Word, Yeshua's words crimson. The waiting state is the lamp being lit.
   Nothing here stores the conversation: it lives in the page and is gone
   when the page is. */

body.is-chat { min-height: 100dvh; }

.chat {
  --chat-bar-h: 132px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 72px);
}

/* ── Identity head ─────────────────────────────────────────────────────── */
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 14px;
  border-bottom: 1px solid var(--kw-card-border);
}
.chat-head__id { display: flex; align-items: center; gap: 12px; }
.chat-head__lamp { width: 22px; height: 22px; color: var(--kw-lumen); flex: 0 0 auto; }
.chat-head__eyebrow {
  margin: 0;
  font-family: var(--kw-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-lumen);
}
.chat-head__line {
  margin: 2px 0 0;
  font-family: var(--kw-font-verse);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--kw-label-2);
}
.chat-head__again {
  border: 1px solid color-mix(in srgb, var(--kw-lumen) 40%, transparent);
  background: transparent;
  color: var(--kw-lumen);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--kw-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.chat-head__again[hidden] { display: none; }

/* ── Thread ────────────────────────────────────────────────────────────── */
.chat-thread {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 0 28px;
}

/* Empty conversation: the brand mark (lamp in a hairline ring, the ring
   always whole), the verse, and openers. */
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 0 16px;
  margin: auto 0;
}
.chat-empty[hidden] { display: none; }
.chat-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--kw-lumen);
  display: grid;
  place-items: center;
  color: var(--kw-lumen);
  margin-bottom: 22px;
  position: relative;
}
.chat-mark::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kw-lumen-glow) 0%, transparent 66%);
  opacity: 0.35;
  z-index: -1;
}
.chat-mark svg { width: 28px; height: 28px; }
.chat-empty__verse {
  max-width: 34rem;
  margin: 0;
  font-family: var(--kw-font-verse);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--kw-label);
}
.chat-empty__verse cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--kw-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kw-accent);
}
.chat-empty__note {
  margin: 18px 0 0;
  font-family: var(--kw-font-ui);
  font-size: 0.9rem;
  color: var(--kw-label-3, #8A8478);
}
.chat-openers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.chat-openers button {
  border: 1px solid color-mix(in srgb, var(--kw-lumen) 40%, transparent);
  background: transparent;
  color: var(--kw-lumen);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: var(--kw-font-verse);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.3;
  cursor: pointer;
}

/* ── Turns ─────────────────────────────────────────────────────────────── */
.turn { max-width: 100%; }
.turn--you {
  align-self: flex-end;
  max-width: 82%;
  padding: 12px 16px;
  border: 1px solid var(--kw-card-border);
  border-radius: 16px;
  background: var(--kw-surface);
  font-family: var(--kw-font-verse);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--kw-label);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.turn--lumen { align-self: stretch; scroll-margin-top: 88px; }
.turn__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--kw-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-lumen);
}
.turn__head svg { width: 12px; height: 12px; display: block; }

/* Waiting: the lamp being lit, with honest verbs. */
.turn__wait { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.lamp { position: relative; width: 26px; height: 26px; flex: 0 0 auto; color: var(--kw-lumen); }
.lamp svg { position: relative; width: 26px; height: 26px; display: block; z-index: 1; }
.lamp .lamp-flame { transform-origin: 19.5px 9px; }
.lamp__glow {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kw-lumen-glow) 0%, transparent 68%);
  opacity: 0.3;
  pointer-events: none;
}
.turn__wait-line {
  font-family: var(--kw-font-verse);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--kw-lumen);
  transition: opacity 0.28s var(--kw-ease-settle, ease);
}
.turn__wait-line.is-swapping { opacity: 0; }
body.kw-motion:not(.kw-reduced) .turn__wait.is-lit .lamp-flame { animation: lumen-kindle 0.55s var(--kw-ease-settle, ease) both; }
body.kw-motion:not(.kw-reduced) .turn__wait.is-lit .lamp__glow { animation: lumen-bloom 0.55s var(--kw-ease-settle, ease) both, lumen-breathe 2.4s ease-in-out 0.55s infinite; }
@keyframes lumen-kindle { 0% { transform: scale(0); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes lumen-bloom { 0% { opacity: 0; } 60% { opacity: 0.45; } 100% { opacity: 0.3; } }
@keyframes lumen-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.42; } }

/* ── The answer: one anatomy (§3) ──────────────────────────────────────── */
.turn__body > * + * { margin-top: 14px; }
.turn__body p.lu-prose {
  margin: 0;
  font-family: var(--kw-font-verse);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--kw-label);
}
.turn__body p.lu-prose strong { font-weight: 600; color: var(--kw-label); }
.turn__body p.lu-lead { font-size: 1.1875rem; }
.turn__body .lu-list { margin: 10px 0 0; padding-left: 22px; font-family: var(--kw-font-verse); font-size: 1.0625rem; line-height: 1.55; color: var(--kw-label); }
.turn__body .lu-list li + li { margin-top: 6px; }
.turn__body hr.lu-divider { border: 0; height: 1px; background: var(--kw-rule-gold); margin: 20px auto; width: 40%; }
.turn__body p.lu-eyebrow {
  margin: 20px 0 0;
  font-family: var(--kw-font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--kw-label);
}
.turn__body p.lu-eyebrow + * { margin-top: 6px; }
/* Tappable references inside prose: gold, no underline until hover. */
.turn__body a.lu-ref {
  color: var(--kw-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--kw-accent) 40%, transparent);
}
.turn__body a.lu-ref:hover { border-bottom-color: var(--kw-accent); }

/* Scripture card: leading rule in the voice tint (gold; Yeshua crimson;
   Ruach blue), serif italic, the reference small-caps gold beneath, tap →
   the reader. No quote marks are added: the type is the quotation. */
.turn__body a.lu-scripture,
.turn__body .lu-scripture {
  display: block;
  margin: 8px 0 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--kw-accent);
  font-family: var(--kw-font-verse);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--kw-label);
  text-decoration: none;
}
.turn__body .lu-scripture.is-yeshua { border-left-color: var(--kw-ink-yeshua, #B83E1E); color: var(--kw-ink-yeshua, #B83E1E); }
.turn__body .lu-scripture.is-ruach { border-left-color: var(--kw-havdalah, #3E5C8A); color: var(--kw-havdalah, #3E5C8A); }
html[data-theme="dark"] .turn__body .lu-scripture.is-yeshua { color: #E1673F; border-left-color: #E1673F; }
.turn__body .lu-scripture cite {
  display: block;
  font-style: normal;
  font-family: var(--kw-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kw-accent);
  margin-top: 6px;
}
.turn__body a.lu-scripture:hover cite { text-decoration: underline; }

/* Pull quote: gold hairlines, serif italic centred, reference gold. */
.turn__body .lu-pull {
  margin: 18px 0 0;
  padding: 16px 12px;
  border-top: 1px solid var(--kw-rule-gold);
  border-bottom: 1px solid var(--kw-rule-gold);
  text-align: center;
  font-family: var(--kw-font-verse);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--kw-label);
}
.turn__body .lu-pull cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--kw-font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kw-accent);
}

/* Callout: NOTE in Lumen ink, CONTEXT in the deep inset accent. */
.turn__body .lu-callout {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--kw-surface);
  border: 1px solid var(--kw-card-border);
  font-family: var(--kw-font-verse);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--kw-label);
}
.turn__body .lu-callout__kind {
  display: block;
  font-family: var(--kw-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-lumen);
  margin-bottom: 6px;
}
.turn__body .lu-callout--context .lu-callout__kind { color: var(--kw-accent-deep); }

/* Hebrew / Greek word: the word large, transliteration and meaning beneath. */
.turn__body .lu-word {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-left: 2px solid var(--kw-lumen);
}
.turn__body .lu-word__lex { font-family: var(--kw-font-serif); font-size: 1.4rem; color: var(--kw-label); }
.turn__body .lu-word__lex[lang="he"] { direction: rtl; unicode-bidi: isolate; }
.turn__body .lu-word__tr { font-family: var(--kw-font-verse); font-style: italic; color: var(--kw-lumen); margin-left: 10px; }
.turn__body .lu-word__gloss { display: block; margin-top: 4px; font-family: var(--kw-font-verse); font-size: 1.0625rem; color: var(--kw-label-2); }

/* Two-column: two gold cards side by side (stack on a phone). */
.turn__body .lu-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 0; }
.turn__body .lu-two > div {
  padding: 12px 14px;
  border: 1px solid var(--kw-rule-gold);
  border-radius: 12px;
  font-family: var(--kw-font-verse);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--kw-label);
}
.turn__body .lu-two > div > b { display: block; font-family: var(--kw-font-ui); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kw-accent); margin-bottom: 6px; font-weight: 700; }

/* Illuminated cards (prophecy, yeshua, blessing, prayer, moed, chain,
   timeline, parasha): inverted, with the glow as halo. */
.turn__body .lu-card {
  margin: 16px 0 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: #1C140C;
  color: #F0EAD6;
  box-shadow: 0 0 0 1px rgba(255, 243, 210, 0.12), 0 10px 30px color-mix(in srgb, var(--kw-lumen-glow) 22%, transparent);
  font-family: var(--kw-font-verse);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.turn__body .lu-card__kind { display: block; font-family: var(--kw-font-ui); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #C49040; margin-bottom: 8px; font-weight: 700; }
.turn__body .lu-card p { margin: 0 0 8px; }
.turn__body .lu-card p:last-child { margin-bottom: 0; }
.turn__body .lu-card a.lu-ref { color: #C49040; border-bottom-color: rgba(196, 144, 64, 0.4); }
.turn__body .lu-card ol { margin: 6px 0 0; padding-left: 20px; }

/* Sit with this: eyebrow gold, the question serif italic centred. */
.turn__body .lu-reflect { margin: 22px 0 0; text-align: center; }
.turn__body .lu-reflect__eyebrow { display: block; font-family: var(--kw-font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kw-accent); margin: 0 0 8px; }
.turn__body .lu-reflect p { margin: 0; font-family: var(--kw-font-verse); font-style: italic; font-size: 1.1875rem; line-height: 1.5; color: var(--kw-label); }

/* Reply chips the answer offers. */
.turn__replies { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.turn__replies button {
  border: 1px solid color-mix(in srgb, var(--kw-lumen) 40%, transparent);
  background: transparent;
  color: var(--kw-lumen);
  border-radius: 999px;
  padding: 8px 13px;
  font-family: var(--kw-font-verse);
  font-style: italic;
  font-size: 0.92rem;
  cursor: pointer;
}

/* Foot: scripture capsules (every reference the answer touched), tap → reader. */
.turn__capsules { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.turn__capsules a {
  display: inline-block;
  border: 1px solid var(--kw-rule-gold);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--kw-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kw-accent);
  text-decoration: none;
}

/* A notice (off-topic, dim, door) in one quiet voice. */
.turn__body p.lu-note {
  margin: 0;
  font-family: var(--kw-font-verse);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--kw-label-2);
}

/* ── Input bar, pinned at the foot ─────────────────────────────────────── */
.chat-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 10px 0 max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--kw-bg) 72%, transparent);
}
.chat-bar__gate { margin: 0 0 8px; }
.chat-bar__gate:empty { display: none; }
.chat-bar__capsule {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 18px;
  border-radius: 28px;
  border: 1px solid var(--kw-card-border);
  background: var(--kw-surface-2, var(--kw-surface));
  box-shadow: var(--kw-card-shadow);
  transition: border-color 0.24s var(--kw-ease-settle, ease);
}
.chat-bar__capsule:focus-within { border-color: color-mix(in srgb, var(--kw-lumen) 60%, transparent); }
.chat-bar__field {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 180px;
  padding: 11px 0;
  border: 0;
  background: transparent;
  resize: none;
  color: var(--kw-label);
  font-family: var(--kw-font-verse);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.4;
  overflow-y: auto;
}
.chat-bar__field:focus { outline: none; }
.chat-bar__field::placeholder { color: var(--kw-label-3, #8A8478); }
.chat-bar__send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--kw-lumen);
  color: var(--kw-bg);
  display: grid;
  place-items: center;
  cursor: pointer;
}
html[data-theme="dark"] .chat-bar__send { color: #14100E; }
.chat-bar__send svg { width: 20px; height: 20px; }
.chat-bar__send:disabled { opacity: 0.45; cursor: default; }
.chat-bar__note {
  margin: 8px 6px 0;
  font-family: var(--kw-font-ui);
  font-size: 11px;
  line-height: 1.5;
  color: var(--kw-label-3, #8A8478);
  text-align: center;
}
.chat-bar__note a { color: inherit; text-decoration: underline; }
.chat-bar__count { margin-right: 10px; }
.chat-bar__count[hidden] { display: none; }
.chat-bar__count.is-near { color: var(--kw-accent-deep); }
.chat-bar__count.is-over { color: var(--kw-ink-yeshua, #B83E1E); }

/* Turns arrive on the cascade; the group is new each time, so lumen.js
   adds .is-in itself. */
.turn.kw-cascade { --kw-cascade-offset: 0s; }

@media (max-width: 640px) {
  .chat { padding: 0 16px; min-height: calc(100dvh - 64px); }
  .chat-head { padding: 16px 0 12px; }
  .chat-head__line { display: none; }
  .turn--you { max-width: 90%; }
  .turn__body .lu-two { grid-template-columns: 1fr; }
  .chat-openers { justify-content: flex-start; }
  .chat-openers button { text-align: left; }
}