:root {
  --bg: #0b0b0f;
  --bg-raised: #13131a;
  --fg: #e8e4d8;
  --fg-muted: #8e8a7e;
  --accent: #c9a44a;
  --accent-dim: #6b5624;
  --user-bg: #1d1d26;
  --jesus-bg: #16130c;
  --border: #2a2722;
  --danger: #8b3a3a;
  --serif: "Crimson Pro", Georgia, serif;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); min-height: 100vh; }
body { display: flex; flex-direction: column; }

.header { padding: 32px 24px 12px; text-align: center; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: baseline; gap: 10px; }
.brand .mark { color: var(--accent); font-size: 22px; }
.brand h1 { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: 0.12em; margin: 0; }
.brand h1 span { color: var(--accent); }
.tagline { color: var(--fg-muted); font-size: 14px; margin: 6px 0 0; font-style: italic; }

.chat { flex: 1; max-width: 760px; width: 100%; margin: 0 auto; padding: 24px 16px 160px; }

.welcome { text-align: center; padding: 60px 20px; color: var(--fg-muted); }
.welcome .prompt { font-family: var(--serif); font-size: 20px; font-style: italic; margin-bottom: 24px; }
.suggestions { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin: 0 auto; }
.suggestions button { background: var(--bg-raised); color: var(--fg); border: 1px solid var(--border); padding: 12px 18px; border-radius: 10px; font-family: var(--serif); font-size: 16px; cursor: pointer; transition: border-color .2s; }
.suggestions button:hover { border-color: var(--accent-dim); }

.messages { display: flex; flex-direction: column; gap: 18px; }
.msg { padding: 14px 18px; border-radius: 14px; line-height: 1.55; max-width: 88%; word-wrap: break-word; }
.msg.user { background: var(--user-bg); align-self: flex-end; color: var(--fg); }
.msg.jesus { background: var(--jesus-bg); border: 1px solid var(--accent-dim); font-family: var(--serif); font-size: 17px; align-self: flex-start; color: var(--fg); white-space: pre-wrap; }
.msg.jesus .cite { color: var(--accent); cursor: pointer; text-decoration: underline dotted; font-family: var(--sans); font-size: 12px; padding: 0 2px; }
.msg.error { background: #2a1414; border: 1px solid var(--danger); color: #f2c8c8; align-self: flex-start; }

.typing { display: inline-flex; gap: 4px; }
.typing span { width: 6px; height: 6px; background: var(--accent-dim); border-radius: 50%; animation: pulse 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

.composer { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--border); padding: 14px 16px 20px; z-index: 10; }
.composer .row { max-width: 760px; margin: 0 auto; display: flex; gap: 8px; align-items: end; }
.composer textarea { flex: 1; resize: none; background: var(--bg-raised); color: var(--fg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font-family: var(--sans); font-size: 15px; line-height: 1.4; max-height: 160px; outline: none; }
.composer textarea:focus { border-color: var(--accent-dim); }
.composer button { background: var(--bg-raised); color: var(--fg); border: 1px solid var(--border); border-radius: 10px; width: 44px; height: 44px; font-size: 18px; cursor: pointer; transition: all .2s; flex-shrink: 0; }
.composer button:hover { border-color: var(--accent-dim); }
.composer button#send { background: var(--accent); color: #0b0b0f; border-color: var(--accent); font-weight: 600; }
.composer button.active { background: var(--accent); color: #0b0b0f; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201,164,74,.15); }
.disclaimer { text-align: center; color: var(--fg-muted); font-size: 11px; margin: 8px 0 0; }

dialog#source-modal { background: var(--bg-raised); color: var(--fg); border: 1px solid var(--border); border-radius: 12px; max-width: 640px; padding: 24px; font-family: var(--serif); }
dialog#source-modal::backdrop { background: rgba(0,0,0,.6); }
dialog#source-modal h3 { font-family: var(--sans); font-weight: 500; margin-top: 0; }
dialog#source-modal #source-content { max-height: 60vh; overflow-y: auto; line-height: 1.6; font-size: 15px; }
dialog#source-modal .chunk { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); white-space: pre-wrap; }
dialog#source-modal .chunk:last-child { border-bottom: none; }
dialog#source-modal button#close-modal { margin-top: 16px; background: var(--accent); color: var(--bg); border: 0; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-family: var(--sans); }

.orb { position: fixed; inset: 0; background: rgba(11,11,15,.92); display: flex; align-items: center; justify-content: center; z-index: 100; flex-direction: column; gap: 40px; }
.orb .bubble { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #e2c977, #8b6e24 70%); box-shadow: 0 0 80px rgba(201,164,74,.4); animation: breathe 2.4s ease-in-out infinite; }
.orb .end { background: var(--user-bg); color: var(--fg); border: 1px solid var(--border); padding: 10px 24px; border-radius: 10px; cursor: pointer; font-family: var(--sans); font-size: 14px; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (max-width: 640px) {
  .brand h1 { font-size: 24px; }
  .msg { max-width: 94%; }
}