/*
 * style.css — shared styles for The Nine Doors
 * Palette: midnight #141127 / #1C1735, gold #D4AF6A, cream #F5EFE2,
 * violet #6E5BA6, muted #9B93B8. Cormorant Garamond (headings) + Inter (UI).
 */

:root {
  --bg-1: #141127;
  --bg-2: #1c1735;
  --gold: #d4af6a;
  --gold-soft: rgba(212, 175, 106, 0.35);
  --cream: #f5efe2;
  --violet: #6e5ba6;
  --violet-soft: rgba(110, 91, 166, 0.35);
  --muted: #9b93b8;
  --danger-bg: #241a2e;
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg-1);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

/* --- Background: cheap CSS starfield + aurora, no canvas loops --------- */

.bg-aurora,
.bg-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-aurora {
  background:
    radial-gradient(60% 45% at 20% 15%, rgba(110, 91, 166, 0.35), transparent 70%),
    radial-gradient(50% 40% at 85% 10%, rgba(212, 175, 106, 0.18), transparent 70%),
    radial-gradient(70% 55% at 50% 100%, rgba(110, 91, 166, 0.25), transparent 70%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  animation: aurora-drift 24s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  from {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0 0;
  }
  to {
    background-position: 4% 6%, -4% 3%, 3% -4%, 0 0;
  }
}

.bg-stars {
  opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(245, 239, 226, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, rgba(245, 239, 226, 0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 35%, rgba(245, 239, 226, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 80%, rgba(245, 239, 226, 0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 25%, rgba(245, 239, 226, 0.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 55%, rgba(245, 239, 226, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 10%, rgba(245, 239, 226, 0.6) 50%, transparent 51%);
  background-size: 340px 340px;
  background-repeat: repeat;
}

/* --- Layout shell -------------------------------------------------------- */

.page {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 20px 32px;
}

/* --- Hero ------------------------------------------------------------------ */

.hero {
  text-align: center;
  margin-bottom: 40px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.site-title {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--cream);
  margin-bottom: 14px;
}

.headline {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  color: var(--gold);
  margin-bottom: 10px;
}

.sub-line {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 480px;
  margin: 0 auto;
}

/* --- Masters grid: ALWAYS 3 columns, even on mobile --------------------- */

.masters-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.master-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  text-decoration: none;
  color: var(--cream);
  background: rgba(28, 23, 53, 0.55);
  border: 1px solid rgba(212, 175, 106, 0.22);
  border-radius: var(--radius-md);
  backdrop-filter: blur(2px);
  transition: transform 160ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.master-tile:hover,
.master-tile:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-soft), 0 0 28px var(--gold-soft);
  transform: translateY(-2px);
  outline: none;
}

.master-tile:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 0 0 1px var(--gold-soft), 0 0 14px var(--gold-soft);
}

.tile-symbol {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1;
}

.tile-door {
  font-size: clamp(0.7rem, 2.4vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}

.tile-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
  text-align: center;
}

.tile-tagline {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
}

/* Art tiles: full-bleed illustration, door label anchored over a bottom scrim. */
.master-tile--art {
  background-size: cover;
  background-position: center;
  justify-content: flex-end;
  padding-bottom: 14px;
  overflow: hidden;
}

.master-tile--art::after {
  content: "";
  position: absolute;
  inset: 50% 0 0 0;
  background: linear-gradient(to bottom, rgba(20, 17, 39, 0), rgba(20, 17, 39, 0.88));
  pointer-events: none;
}

.master-tile--art .tile-door {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.master-tile--art .tile-symbol,
.master-tile--art .tile-name,
.master-tile--art .tile-tagline {
  display: none;
}

/* Chat header avatar when the Master has artwork. */
.chat-symbol--art {
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

/* The center door (Abundance) is the live path — let it glow softly. */
.master-tile--featured {
  border-color: rgba(212, 175, 106, 0.55);
  box-shadow: 0 0 22px rgba(212, 175, 106, 0.16), inset 0 0 18px rgba(212, 175, 106, 0.06);
}

/* Persona name + tagline are desktop flourishes; mobile keeps door labels. */
@media (max-width: 640px) {
  .tile-tagline,
  .tile-name {
    display: none;
  }

  .tile-door {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }
}

/* --- Footer ------------------------------------------------------------------ */

.site-footer {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 40px auto 0;
  padding: 0 20px 36px;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.site-footer .disclosure {
  color: var(--gold);
  margin-bottom: 4px;
}

/* =====================================================================
   Chat shell (chat.html)
   ===================================================================== */

.chat-body {
  /* min-height, not height: the page now scrolls past the chat shell to the
     static door notes below (crawlable text AdSense can actually price). */
  min-height: 100vh;
  min-height: 100dvh;
}

/* Page-scroll chat. The shell used to be a fixed 100dvh box with an inner
   scroll region, but Google's auto-ads script stamps `height: auto
   !important` INLINE on containers it injects into, which no stylesheet can
   override - the shell blew open and carried the input off-screen. So the
   layout stopped fighting: the page itself scrolls, the header and the
   input dock are sticky, and anything auto ads inserts just scrolls away
   like a message. min-height still holds (Google only stamps height). */
.chat-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.chat-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(212, 175, 106, 0.18);
  background: rgba(20, 17, 39, 0.88);
  backdrop-filter: blur(6px);
}

.back-link {
  text-decoration: none;
  color: var(--gold);
  font-size: 1.2rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.back-link:hover,
.back-link:focus-visible {
  background: rgba(212, 175, 106, 0.12);
  outline: none;
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-symbol {
  font-size: 1.6rem;
}

.chat-master-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--cream);
}

.chat-master-title {
  font-size: 0.72rem;
  color: var(--muted);
}

.chat-disclosure {
  font-size: 0.66rem;
  color: var(--gold);
  opacity: 0.85;
  margin-top: 2px;
}

.chat-messages {
  /* Grows with the conversation; the page scrolls, not this box. flex: 1
     keeps the sticky dock parked at the viewport bottom while the thread is
     still short. */
  flex: 1 0 auto;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Bubbles --------------------------------------------------------------- */

.bubble {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.bubble-master {
  align-self: flex-start;
  background: rgba(28, 23, 53, 0.75);
  border: 1px solid var(--gold-soft);
  border-top-left-radius: 4px;
  color: var(--cream);
  cursor: pointer;
}

.bubble-master.streaming::after {
  content: "";
}

.bubble-user {
  align-self: flex-end;
  background: rgba(110, 91, 166, 0.28);
  border: 1px solid var(--violet-soft);
  border-top-right-radius: 4px;
  color: var(--cream);
}

/* Distress reply: deliberately breaks character with plain, calm styling. */
.bubble-plain {
  background: var(--danger-bg);
  border: 1px solid rgba(245, 239, 226, 0.25);
  cursor: default;
}

/* Typing indicator: 3 pulsing dots */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 16px;
  cursor: default;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.35;
  animation: typing-pulse 1.1s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing-pulse {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* --- Inline date input bubble ------------------------------------------------ */

.bubble-input {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(28, 23, 53, 0.75);
  border: 1px solid var(--gold-soft);
  cursor: default;
}

.inline-date-input {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 239, 226, 0.3);
  background: rgba(20, 17, 39, 0.7);
  color: var(--cream);
}

.inline-date-submit {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.inline-date-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.inline-date-submit:not(:disabled):hover {
  background: var(--gold);
  color: var(--bg-1);
}

/* --- Funnel cards ------------------------------------------------------------- */

.funnel-card {
  align-self: center;
  width: 100%;
  max-width: 88%;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(212, 175, 106, 0.14), rgba(110, 91, 166, 0.14));
  border: 1px solid var(--gold-soft);
  text-align: center;
}

.funnel-card-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 6px;
}

.funnel-card-pitch {
  font-size: 0.85rem;
  color: var(--cream);
  margin-bottom: 14px;
}

.funnel-card-confirm {
  font-size: 0.9rem;
  color: var(--gold);
  font-family: var(--font-heading);
}

.funnel-cta {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--bg-1);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 200ms ease;
}

.funnel-cta:hover {
  box-shadow: 0 0 18px var(--gold-soft);
  transform: translateY(-1px);
}

.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.waitlist-email {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 239, 226, 0.3);
  background: rgba(20, 17, 39, 0.7);
  color: var(--cream);
  font-family: inherit;
  font-size: 0.85rem;
}

/* --- Chips ------------------------------------------------------------------- */

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
}

.chip {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 106, 0.4);
  background: rgba(212, 175, 106, 0.08);
  color: var(--cream);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.chip:hover,
.chip:focus-visible {
  border-color: var(--gold);
  background: rgba(212, 175, 106, 0.18);
  outline: none;
}

.chip:active {
  transform: scale(0.96);
}

.chip-home {
  display: inline-block;
}

/* --- Input row ------------------------------------------------------------------ */

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(212, 175, 106, 0.18);
  background: rgba(20, 17, 39, 0.6);
  backdrop-filter: blur(4px);
}

.chat-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(245, 239, 226, 0.25);
  background: rgba(28, 23, 53, 0.6);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem; /* ≥16px — prevents iOS Safari auto-zoom on focus */
}

.chat-input:focus {
  outline: none;
  border-color: var(--gold);
}

.chat-input:disabled {
  opacity: 0.4;
}

.chat-send {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--bg-1);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 120ms ease, opacity 160ms ease;
}

.chat-send:hover:not(:disabled) {
  transform: scale(1.05);
}

.chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Scrollbar polish (progressive enhancement only) --------------------- */

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 106, 0.3);
  border-radius: 999px;
}

/* --- Ad slots --------------------------------------------------------------
   Real AdSense units (assets/js/ads.js). Styled deliberately *unlike* the
   tiles and the chat bubbles — no gold border, no bubble radius, always an
   "Advertisement" label — because an ad that reads as a master's reply is
   both a policy problem and a trust problem. Heights are reserved so a late
   fill (or a no-fill collapse) can't shift text someone is mid-way through
   reading. */

.ad-slot {
  width: 100%;
  text-align: center;
}

.ad-label {
  display: block;
  font-family: var(--font-body, inherit);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.55;
  margin-bottom: 6px;
}

.ad-slot .adsbygoogle {
  display: block;
  width: 100%;
}

/* Top of page, both pages (Bryan 2026-08-30). On chat.html this is a flex
   item of the 100dvh shell, so flex-shrink is pinned off — the message list
   below it is the box that gives, not the ad. No reserved min-height here:
   an unfilled top unit should collapse to nothing rather than hold an empty
   band above the content. */
.ad-slot--top {
  max-width: 640px;
  margin: 0 auto 12px;
  /* On chat.html this is a child of the flex-column message list, so it has
     to opt out of the bubble alignment the way the other feed units do. */
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}


/* Chat: a child of the flex-column message list, so it has to opt out of
   the bubble alignment and stretch. It scrolls away with the conversation
   instead of sitting over the input, and the margins keep it clear of the
   send button (no accidental-click adjacency). */
.ad-slot--feed {
  align-self: stretch;
  margin: 16px 0;
  min-height: 120px;
}

/* End-of-session multiplex, shown only once the daily cap closes the chat. */
.ad-slot--end {
  align-self: stretch;
  margin: 18px 0 4px;
  min-height: 220px;
}


/* --- Door notes ------------------------------------------------------------
   Static, crawlable copy below the chat shell (and on the landing page under
   the grid). This is what lets AdSense's crawler classify the pages - the
   chat itself is empty HTML to a crawler, and unclassifiable inventory gets
   priced as filler. Real visible content, never hidden text. */

.door-notes {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px 24px;
  color: var(--cream);
}

.door-notes h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--gold);
  margin: 0 0 6px;
}

.door-notes h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--cream);
  margin: 22px 0 4px;
}

.door-notes p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 6px 0;
}

.door-notes .note-links a {
  color: var(--gold);
  text-decoration: none;
}

.door-notes .note-links a:hover,
.door-notes .note-links a:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* "Another door" chips: same look as chips, but they are links. */
.chip-door {
  text-decoration: none;
}


/* Sticky input dock: chips + input pinned to the viewport bottom while the
   visitor is anywhere in the chat, lifted by however much of the viewport
   bottom an auto-ads anchor overlay occupies (measured by ads.js), so the
   send button always clears it. Once scrolled past the shell into the door
   notes, the dock parks at the shell's end - sticky is contained. */
.chat-dock {
  position: sticky;
  bottom: var(--google-anchor-h, 0px);
  z-index: 3;
  background: rgba(20, 17, 39, 0.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(212, 175, 106, 0.14);
}