/* One focused conversation: original imagery is now ambient decor behind it. */
body { background: #160d1a; }
.app-shell { min-height:100svh; background:radial-gradient(circle at 18% 12%,rgba(238,110,157,.25),transparent 28%),radial-gradient(circle at 88% 84%,rgba(91,55,151,.3),transparent 34%),linear-gradient(140deg,#241126 0%,#4a193a 48%,#21152f 100%); }
.bg-wrap { opacity:.09; filter:saturate(.75) contrast(1.1); }
.app-shell::after { z-index:1; background:radial-gradient(circle at 50% 52%,transparent 16%,rgba(14,7,18,.18) 74%),linear-gradient(110deg,rgba(255,154,185,.08),rgba(89,53,142,.1)); }

.topbar { height:64px; padding:0 clamp(18px,4vw,56px); border-bottom:1px solid rgba(255,255,255,.11); background:rgba(22,11,25,.68); backdrop-filter:blur(20px); }
.brand,.nav-btn { color:rgba(255,255,255,.75); }
.brand strong { color:#fff8fb; }
.brand span { color:rgba(255,255,255,.48); }
.nav-btn:hover,.nav-btn.active { color:#fff; }
.nav-btn.active::after { background:#ff83a8; }
.start-reading-btn { border:1px solid rgba(255,255,255,.17); border-radius:999px; background:linear-gradient(135deg,#f66c9b,#bc3f7c); box-shadow:0 9px 24px rgba(36,7,29,.35); }

.workspace { position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1fr)!important; place-items:center; height:calc(100svh - 64px); padding:clamp(16px,3.4vh,38px) clamp(14px,4vw,62px); overflow:hidden; border:0; background:transparent; }
.relationship-decor { position:absolute; z-index:1; inset:0; overflow:hidden; pointer-events:none; }
.gallery-card { position:absolute; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.3); border-radius:24px; background:#291226; box-shadow:0 24px 64px rgba(23,4,19,.3),inset 0 1px 0 rgba(255,255,255,.25); opacity:.48; filter:saturate(.72) contrast(1.04); transform:rotate(var(--angle)); }
.gallery-card::after { content:""; position:absolute; inset:0; background:linear-gradient(150deg,rgba(255,255,255,.15),transparent 35%,rgba(24,4,19,.34)); }
.gallery-card img { display:block; width:100%; height:100%; object-fit:cover; }
.gallery-card-main { --angle:-10deg; left:-3vw; top:7%; width:min(30vw,430px); height:min(43vh,440px); }
.gallery-card-letter { --angle:8deg; right:-4vw; top:5%; width:min(27vw,380px); height:min(35vh,350px); }
.gallery-card-mirror { --angle:7deg; left:3vw; bottom:-6%; width:min(25vw,350px); height:min(32vh,300px); }
.gallery-card-rain { --angle:-8deg; right:2vw; bottom:-9%; width:min(30vw,415px); height:min(41vh,390px); }

.chat-panel { grid-column:1/-1; position:relative; z-index:4; display:flex; flex-direction:column; width:min(760px,100%); height:min(810px,calc(100svh - 106px)); min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.5); border-radius:28px; background:rgba(255,250,253,.94); box-shadow:0 34px 100px rgba(20,3,17,.46),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(18px); }
.chat-head { min-height:70px; padding:13px 20px; border-bottom:1px solid rgba(255,255,255,.14); background:linear-gradient(105deg,#251127,#5f254e 65%,#9e3f71); }
.avatar-dot { box-shadow:0 0 0 5px rgba(255,255,255,.1); }
.chat-title strong { color:#fff; }
.chat-title span { color:rgba(255,255,255,.6); }
.status-pill { color:rgba(255,255,255,.74); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
.chat-log { padding:24px 22px 14px; background:radial-gradient(circle at 92% 4%,rgba(240,151,190,.21),transparent 25%),linear-gradient(180deg,#fff9fc,#fff0f6); }
.idle-dice-guide { display:flex; align-items:center; gap:16px; width:min(100%,460px); margin:8px 0 2px 46px; padding:13px 15px; border:1px solid rgba(124,48,99,.14); border-radius:18px; color:#5b2852; background:rgba(255,255,255,.76); box-shadow:0 12px 30px rgba(91,24,67,.06); text-align:left; transition:opacity .25s ease,transform .25s ease; }
.idle-dice-guide:hover { background:#fff; transform:translateY(-2px); }
.idle-dice-guide.is-hidden { display:none; }
.idle-dice-roll { position:relative; width:48px; height:42px; flex:0 0 48px; }
.idle-dice-roll i { position:absolute; display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(143,52,105,.28); border-radius:7px; color:#fff4d2; background:linear-gradient(145deg,#4a2451,#c45183); box-shadow:0 6px 12px rgba(74,17,55,.16); font:700 .7rem/1 Georgia,serif; animation:idleDiceRoll 2.6s ease-in-out infinite; }
.idle-dice-roll i:nth-child(1) { left:0; top:9px; animation-delay:-1.72s; } .idle-dice-roll i:nth-child(2) { left:12px; top:0; animation-delay:-.86s; } .idle-dice-roll i:nth-child(3) { left:24px; top:13px; animation-delay:0s; }
@keyframes idleDiceRoll { 0%,18%,100% { transform:translate(0,0) rotate(0); opacity:.58; } 46% { transform:translate(7px,-8px) rotate(145deg); opacity:1; } 67% { transform:translate(1px,-2px) rotate(210deg); opacity:.88; } }
.idle-dice-copy { display:grid; gap:3px; flex:1; min-width:0; }
.idle-dice-copy b { color:#4a2145; font-size:.78rem; }
.idle-dice-copy small { color:#93677f; font-size:.68rem; line-height:1.35; }
.idle-dice-arrow { color:#b64278; font-size:1.1rem; }
.msg { max-width:82%; }
.msg.dorothy .msg-bubble { border-color:rgba(138,50,103,.12); background:#fff; box-shadow:0 10px 27px rgba(78,22,62,.07); }
.msg.user .msg-bubble { background:linear-gradient(135deg,#d65083,#792a68); }
.example-qs { padding:9px 18px; background:#fff0f6; border:0; }
.eq { color:#6b2b58; border-color:rgba(126,43,96,.17); background:rgba(255,255,255,.82); }
.eq:hover { color:#541d47; background:#fff; border-color:rgba(126,43,96,.34); }
.chat-form { padding:10px 16px 12px; border-top-color:rgba(126,43,96,.1); background:rgba(255,255,255,.94); }
.tarot-option { margin-bottom:8px; }
textarea { background:#fff8fb; }
.btn-main { background:linear-gradient(135deg,#df5d90,#7d2d6b); box-shadow:0 10px 24px rgba(111,37,88,.28); }
.chat-privacy-note,.privacy-statement { display:none; }

/* Colored, concise purchase layer rather than the previous white/red split. */
.modal-overlay { background:rgba(12,5,15,.66); backdrop-filter:blur(16px); }
.plan-modal { width:min(340px,100%); padding:0; overflow:visible; color:#fff; border:0; border-radius:0; background:transparent; box-shadow:none; }
.plan-modal > * { position:relative; z-index:1; }
.plan-modal .modal-close { top:-12px; right:-12px; z-index:3; color:#fff; background:rgba(55,20,52,.68); box-shadow:0 5px 15px rgba(0,0,0,.2); }
.plan-tagline { margin:0 auto 13px; color:#fff8ef; font:700 1rem/1.35 Georgia,'Times New Roman',serif; text-align:center; text-shadow:0 2px 10px rgba(34,5,27,.36); }
.plan-modal .plan-grid { margin:0; }
.plan-modal .plan-card { display:grid; place-items:center; min-height:220px; padding:30px 22px; border:1px solid rgba(255,255,255,.28); border-radius:24px; background:radial-gradient(circle at 85% 8%,rgba(255,186,210,.32),transparent 30%),radial-gradient(circle at 12% 96%,rgba(148,109,217,.33),transparent 36%),linear-gradient(145deg,#4f234c,#271a3e); box-shadow:0 24px 58px rgba(6,1,13,.38),inset 0 1px 0 rgba(255,255,255,.16); }
.plan-modal .price { margin:0; color:#fff4cc; font-size:2.3rem; letter-spacing:-.05em; }
.plan-modal .price small { color:rgba(255,255,255,.62); font-size:.68rem; font-weight:600; letter-spacing:0; }
.plan-credit-note { margin-top:6px; color:rgba(255,255,255,.72); font-size:.7rem; }
.plan-modal .pack-buy { width:100%; margin-top:18px; background:linear-gradient(135deg,#ffca76,#f173a0); box-shadow:0 12px 28px rgba(242,91,139,.28); color:#371328; }
.plan-butterfly { position:absolute; z-index:0; color:#ffd6e5; opacity:.82; pointer-events:none; text-shadow:0 7px 18px rgba(22,2,18,.32); animation:planFlutter 4.8s ease-in-out infinite; }
.butterfly-one { top:62px; left:-34px; font-size:2.2rem; transform:rotate(-22deg); }
.butterfly-two { right:-27px; bottom:22px; color:#ffe0a3; font-size:1.7rem; animation-delay:-2.1s; }
@keyframes planFlutter { 0%,100%{margin-top:0;transform:rotate(-16deg)}50%{margin-top:-9px;transform:rotate(12deg)} }

@media (max-width:720px) {
  .top-actions { gap:12px; }
  .sign-in,.start-reading-btn { display:none; }
  /* Full-screen direct chat: the screen itself is the chat surface, not a
     centered card. --app-height/--app-shift are driven by the visualViewport
     script in index.html so the whole app shrinks to the visible area and the
     composer rides above the iOS keyboard instead of disappearing under it. */
  .app-shell { height:var(--app-height,100dvh); min-height:0; transform:translateY(var(--app-shift,0px)); }
  .topbar { height:calc(56px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
  .workspace { flex:1 1 auto; height:auto; min-height:0; padding:0; grid-template-rows: minmax(0, 1fr); }
  /* stray legacy children created a second implicit row and shrank the
     chat panel to the first row's content height; pin everything to row 1 */
  .workspace > * { grid-row: 1; }
  .relationship-decor { display:none; }
  .chat-panel { width:100%; height:100%; min-height:0; align-self:stretch; margin:0; border:0; border-radius:0; box-shadow:none; }
  .chat-log { min-height:0; }
  .gallery-card { opacity:.28; }
  .gallery-card-main { left:-24%; top:1%; width:58vw; height:31vh; }
  .gallery-card-letter { right:-25%; top:10%; width:56vw; height:28vh; }
  .gallery-card-mirror { left:-18%; bottom:-5%; width:54vw; height:29vh; }
  .gallery-card-rain { right:-24%; bottom:-3%; width:60vw; height:32vh; }
  .chat-head { padding:12px 14px; }
  .status-pill { display:none; }
  .chat-log { padding:14px 10px 10px; }
  .idle-dice-guide { margin-left:0; }
  .example-qs { padding-left:10px; padding-right:10px; }
  .chat-form { padding:7px 10px calc(9px + env(safe-area-inset-bottom)); }
  .mode-btn { padding:5px 10px; font-size:.74rem; gap:5px; }
  .mode-btn .mode-copy small { display:none; }
  .profile-strip { padding:5px 8px; margin-bottom:6px; }
  .tarot-option { margin-bottom:6px; }
  /* rigid composer: fixed height + >=16px font stops iOS focus-zoom rescaling the page */
  textarea { height:64px; min-height:64px; max-height:64px; padding:11px 50px 11px 14px; font-size:16px; line-height:1.35; }
  .btn-main { width:34px; height:34px; right:8px; bottom:8px; }
  .chat-log { min-height:0; }
  /* The chat is one fixed screen on phones; the SEO block under it made the
     page scrollable, so focusing the input jumped the page down to it. */
  body .seo-faq,
  body .privacy-statement.home-privacy,
  body .dorothy-cross-links,
  body .guide-links { display:none !important; }
}
@media (max-width:460px) {
  .brand span,.top-actions .nav-btn.active { display:none; }
  .options-nav-btn { display:inline-flex; padding:8px 12px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:#fff; background:rgba(255,255,255,.08); }
  .msg { max-width:90%; }
  .plan-modal { padding:0; }
}
.idle-dice-arrow{font-size:1rem;color:#bb3e72}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }