/* Astrology Guide prelander — all styles. No external fonts, no images. */

:root {
  --ag-bg: #12102B;
  --ag-panel: #1E1A45;
  --ag-line: #282350;
  --ag-line-2: #3A3470;
  --ag-gold: #E8B94A;
  --ag-gold-hi: #F0C55F;
  --ag-lilac: #B8B3DC;
  --ag-muted: #6B6890;
  --ag-font: 'Century Gothic', CenturyGothic, AppleGothic, 'URW Gothic',
             'Avenir Next', Avenir, 'Trebuchet MS', sans-serif;
}

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

html, body { background: var(--ag-bg); }

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  background-image: radial-gradient(120% 60% at 50% -10%, rgba(60, 52, 120, .55) 0%, rgba(18, 16, 43, 0) 70%);
  font-family: var(--ag-font);
  color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

input, button, textarea { font-family: inherit; }

a { color: var(--ag-lilac); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ag-gold-hi); }

/* ---------- decorative background ---------- */

.ag-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.ag-blob { position: absolute; border-radius: 50%; }

.ag-blob-a {
  top: -22%; left: -12%; width: 90%; height: 62%;
  filter: blur(70px);
  background: radial-gradient(circle, rgba(96, 84, 178, .5) 0%, rgba(96, 84, 178, 0) 70%);
  animation: agDriftA 22s ease-in-out infinite;
}
.ag-blob-b {
  top: -14%; right: -18%; width: 80%; height: 56%;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(58, 96, 168, .38) 0%, rgba(58, 96, 168, 0) 70%);
  animation: agDriftB 28s ease-in-out infinite;
}
.ag-blob-c {
  bottom: -18%; left: 18%; width: 70%; height: 46%;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(232, 185, 74, .1) 0%, rgba(232, 185, 74, 0) 70%);
  animation: agDriftA 34s ease-in-out infinite;
}

.ag-rings {
  position: absolute; top: -14%; left: 50%;
  width: min(150%, 860px);
  transform: translateX(-50%);
  opacity: .5;
  animation: agSpin 220s linear infinite;
}

.ag-constellation {
  position: absolute; bottom: 6%; left: 0;
  width: 100%; height: 44%;
  opacity: .55;
}

.ag-stars { position: absolute; inset: 0; }
.ag-stars-a {
  animation: agTwinkleA 4.5s ease-in-out infinite;
  background-image:
    radial-gradient(1px 1px at 12% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 34% 17%, #fff, transparent),
    radial-gradient(1px 1px at 88% 30%, #fff, transparent),
    radial-gradient(1px 1px at 50% 42%, #cfc9f5, transparent),
    radial-gradient(1px 1px at 70% 60%, #b8b3dc, transparent),
    radial-gradient(1px 1px at 26% 88%, #fff, transparent);
}
.ag-stars-b {
  animation: agTwinkleB 6.5s ease-in-out infinite;
  background-image:
    radial-gradient(1px 1px at 78% 5%, #cfc9f5, transparent),
    radial-gradient(1px 1px at 62% 22%, #b8b3dc, transparent),
    radial-gradient(1px 1px at 22% 34%, #b8b3dc, transparent),
    radial-gradient(1.5px 1.5px at 8% 55%, #fff, transparent),
    radial-gradient(1px 1px at 40% 72%, #cfc9f5, transparent),
    radial-gradient(1px 1px at 92% 78%, #fff, transparent);
}

/* ---------- app column ---------- */

.ag-app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: rgba(18, 16, 43, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 1px solid var(--ag-panel);
  border-right: 1px solid var(--ag-panel);
}

/* ---------- header ---------- */

.ag-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(30, 26, 69, .85);
  border-bottom: 1px solid var(--ag-line);
}

.ag-header-avatar { flex: 0 0 auto; display: block; }
.ag-header-text { flex: 1; min-width: 0; }
.ag-title { font-size: 16px; line-height: 22px; letter-spacing: .2px; }
.ag-subtitle { font-size: 12px; line-height: 16px; color: var(--ag-lilac); }

.ag-badge {
  font-size: 12px;
  line-height: 16px;
  color: var(--ag-lilac);
  border: 1px solid var(--ag-line);
  border-radius: 12px;
  padding: 4px 8px;
}

/* ---------- chat ---------- */

.ag-chat {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-repeat: no-repeat;
  background-attachment: local;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 12%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.2px 1.2px at 74% 9%, rgba(232,185,74,.6), transparent 100%),
    radial-gradient(1px 1px at 88% 28%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1.3px 1.3px at 34% 34%, rgba(255,255,255,.35), transparent 100%),
    radial-gradient(1px 1px at 62% 48%, rgba(184,179,220,.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 9% 56%, rgba(232,185,74,.45), transparent 100%),
    radial-gradient(1px 1px at 82% 66%, rgba(255,255,255,.35), transparent 100%),
    radial-gradient(1.2px 1.2px at 45% 84%, rgba(255,255,255,.3), transparent 100%),
    radial-gradient(1px 1px at 26% 94%, rgba(184,179,220,.45), transparent 100%);
}

.ag-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: agBubbleIn 240ms cubic-bezier(.2, .7, .3, 1) both;
}
.ag-row-bot { justify-content: flex-start; }
.ag-row-user { justify-content: flex-end; }

.ag-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ag-line);
  border: 1px solid rgba(232, 185, 74, .35);
  color: var(--ag-gold);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* second and later bubbles of the same bot burst keep the slot, lose the mark */
.ag-avatar-ghost { background: transparent; border-color: transparent; color: transparent; }

.ag-bubble {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 22px;
}
.ag-bubble-bot {
  max-width: 82%;
  background: var(--ag-panel);
  color: #FFFFFF;
  text-wrap: pretty;
}
.ag-bubble-user {
  max-width: 78%;
  background: rgba(232, 185, 74, .16);
  border: 1px solid rgba(232, 185, 74, .32);
  color: #F5E7C4;
}

.ag-blur-lead { display: block; }
.ag-blur-text {
  display: block;
  margin-top: 4px;
  filter: blur(5px);
  opacity: .85;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.ag-typing { display: flex; align-items: flex-end; gap: 8px; }
.ag-typing[hidden] { display: none; }

.ag-typing-bubble {
  background: var(--ag-panel);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.ag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ag-lilac);
  animation: agDotPulse 1.2s infinite ease-in-out;
}
.ag-dot:nth-child(2) { animation-delay: .18s; }
.ag-dot:nth-child(3) { animation-delay: .36s; }

/* ---------- dock ---------- */

.ag-dock {
  flex: 0 0 auto;
  background: rgba(30, 26, 69, .9);
  border-top: 1px solid var(--ag-line);
  padding: 16px;
}

.ag-dock-label {
  font-size: 12px;
  line-height: 16px;
  color: var(--ag-muted);
  margin-bottom: 8px;
}

/* name entry */

.ag-input-row { display: flex; gap: 8px; align-items: center; }
.ag-input-row[hidden] { display: none; }

.ag-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--ag-line);
  background: var(--ag-bg);
  color: #FFFFFF;
  padding: 0 14px;
  font-size: 16px;
  outline: none;
  transition: border-color 160ms ease;
}
.ag-input:focus { border-color: var(--ag-gold); }
.ag-input::placeholder { color: var(--ag-muted); }

.ag-send {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: none;
  background: var(--ag-gold);
  color: var(--ag-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.ag-send:hover:not(:disabled) { background: var(--ag-gold-hi); }
.ag-send:active:not(:disabled) { transform: translateY(1px); }
.ag-send:focus-visible { outline: 3px solid rgba(232, 185, 74, .45); outline-offset: 2px; }
.ag-send:disabled { background: var(--ag-line); color: var(--ag-muted); cursor: default; }

/* zodiac signs */

.ag-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ag-signs-scroll {
  display: flex;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ag-signs-scroll::-webkit-scrollbar { display: none; }

.ag-sign {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--ag-bg);
  border: 1px solid var(--ag-line);
  color: #FFFFFF;
  font-size: 13px;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.ag-signs-scroll .ag-sign { flex: 0 0 auto; padding: 0 14px; }
.ag-sign:hover { background: var(--ag-line); border-color: var(--ag-line-2); }
.ag-sign:active { transform: scale(.98); }
.ag-sign:focus-visible { outline: 2px solid var(--ag-gold); outline-offset: 2px; }
.ag-sign-selected { background: var(--ag-line); border-color: var(--ag-gold); }

/* zodiac glyphs are emoji-capable code points: force the text presentation so
   they render as gold symbols rather than the platform's colour emoji */
.ag-glyph {
  font-size: 17px;
  color: var(--ag-gold);
  line-height: 1;
  font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', var(--ag-font);
  font-variant-emoji: text;
}

/* branch cards */

.ag-branches { display: flex; flex-direction: column; gap: 8px; }
.ag-branches[hidden] { display: none; }

.ag-branch {
  min-height: 56px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ag-bg);
  border: 1px solid var(--ag-line);
  color: #FFFFFF;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.ag-branch:hover { background: var(--ag-line); border-color: var(--ag-line-2); }
.ag-branch:active { transform: scale(.99); }
.ag-branch:focus-visible { outline: 2px solid var(--ag-gold); outline-offset: 2px; }

/* inert placeholder shown while the bot is speaking */

.ag-waiting {
  display: flex;
  gap: 8px;
  align-items: center;
  opacity: .5;
  pointer-events: none;
}
.ag-waiting[hidden] { display: none; }

.ag-waiting-field {
  flex: 1;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--ag-line);
  background: var(--ag-bg);
  color: var(--ag-muted);
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.ag-waiting-send {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ag-line);
  color: var(--ag-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* call to action */

.ag-cta {
  width: 100%;
  min-height: 56px;
  border-radius: 12px;
  border: none;
  background: var(--ag-gold);
  color: var(--ag-bg);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background 160ms ease;
}
.ag-cta:hover { background: var(--ag-gold-hi); }
.ag-cta:active { transform: translateY(1px); }
.ag-cta:focus-visible { outline: 3px solid rgba(232, 185, 74, .45); outline-offset: 2px; }

.ag-legal {
  margin-top: 16px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ag-lilac);
}
.ag-legal-links { display: flex; gap: 16px; margin-top: 8px; }

/* ---------- animations ---------- */

@keyframes agBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes agDotPulse {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}
@keyframes agTwinkleA {
  0%, 100% { opacity: .28; }
  50%      { opacity: .75; }
}
@keyframes agTwinkleB {
  0%, 100% { opacity: .7; }
  50%      { opacity: .22; }
}
@keyframes agDriftA {
  0%   { transform: translate3d(-6%, -4%, 0) scale(1); }
  50%  { transform: translate3d(6%, 3%, 0) scale(1.12); }
  100% { transform: translate3d(-6%, -4%, 0) scale(1); }
}
@keyframes agDriftB {
  0%   { transform: translate3d(5%, 2%, 0) scale(1.08); }
  50%  { transform: translate3d(-5%, -3%, 0) scale(.96); }
  100% { transform: translate3d(5%, 2%, 0) scale(1.08); }
}
@keyframes agSpin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

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