/* One focused conversation: original imagery is now ambient decor behind it. */
html:not(.in-telegram) body { background: #160d1a; }
html:not(.in-telegram) .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%); }
html:not(.in-telegram) .bg-wrap { opacity:.09; filter:saturate(.75) contrast(1.1); }
html:not(.in-telegram) .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)); }

html:not(.in-telegram) .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); }
html:not(.in-telegram) .brand,html:not(.in-telegram) .nav-btn { color:rgba(255,255,255,.75); }
html:not(.in-telegram) .brand strong { color:#fff8fb; }
html:not(.in-telegram) .brand span { color:rgba(255,255,255,.48); }
html:not(.in-telegram) .nav-btn:hover,html:not(.in-telegram) .nav-btn.active { color:#fff; }
html:not(.in-telegram) .nav-btn.active::after { background:#ff83a8; }
html:not(.in-telegram) .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); }

html:not(.in-telegram) .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; }
html:not(.in-telegram) .relationship-decor { position:absolute; z-index:1; inset:0; overflow:hidden; pointer-events:none; }
html:not(.in-telegram) .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)); }
html:not(.in-telegram) .gallery-card::after { content:""; position:absolute; inset:0; background:linear-gradient(150deg,rgba(255,255,255,.15),transparent 35%,rgba(24,4,19,.34)); }
html:not(.in-telegram) .gallery-card img { display:block; width:100%; height:100%; object-fit:cover; }
html:not(.in-telegram) .gallery-card-main { --angle:-10deg; left:-3vw; top:7%; width:min(30vw,430px); height:min(43vh,440px); }
html:not(.in-telegram) .gallery-card-letter { --angle:8deg; right:-4vw; top:5%; width:min(27vw,380px); height:min(35vh,350px); }
html:not(.in-telegram) .gallery-card-mirror { --angle:7deg; left:3vw; bottom:-6%; width:min(25vw,350px); height:min(32vh,300px); }
html:not(.in-telegram) .gallery-card-rain { --angle:-8deg; right:2vw; bottom:-9%; width:min(30vw,415px); height:min(41vh,390px); }

html:not(.in-telegram) .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); }
html:not(.in-telegram) .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); }
html:not(.in-telegram) .avatar-dot { box-shadow:0 0 0 5px rgba(255,255,255,.1); }
html:not(.in-telegram) .chat-title strong { color:#fff; }
html:not(.in-telegram) .chat-title span { color:rgba(255,255,255,.6); }
html:not(.in-telegram) .status-pill { color:rgba(255,255,255,.74); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
html:not(.in-telegram) .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); }
html:not(.in-telegram) .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; }
html:not(.in-telegram) .idle-dice-guide:hover { background:#fff; transform:translateY(-2px); }
html:not(.in-telegram) .idle-dice-guide.is-hidden { display:none; }
html:not(.in-telegram) .idle-dice-roll { position:relative; width:48px; height:42px; flex:0 0 48px; }
html:not(.in-telegram) .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; }
html:not(.in-telegram) .idle-dice-roll i:nth-child(1) { left:0; top:9px; animation-delay:-1.72s; } html:not(.in-telegram) .idle-dice-roll i:nth-child(2) { left:12px; top:0; animation-delay:-.86s; } html:not(.in-telegram) .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; } }
html:not(.in-telegram) .idle-dice-copy { display:grid; gap:3px; flex:1; min-width:0; }
html:not(.in-telegram) .idle-dice-copy b { color:#4a2145; font-size:.78rem; }
html:not(.in-telegram) .idle-dice-copy small { color:#93677f; font-size:.68rem; line-height:1.35; }
html:not(.in-telegram) .idle-dice-arrow { color:#b64278; font-size:1.1rem; }
html:not(.in-telegram) .msg { max-width:82%; }
html:not(.in-telegram) .msg.dorothy .msg-bubble { border-color:rgba(138,50,103,.12); background:#fff; box-shadow:0 10px 27px rgba(78,22,62,.07); }
html:not(.in-telegram) .msg.user .msg-bubble { background:linear-gradient(135deg,#d65083,#792a68); }
html:not(.in-telegram) .example-qs { padding:9px 18px; background:#fff0f6; border:0; }
html:not(.in-telegram) .eq { color:#6b2b58; border-color:rgba(126,43,96,.17); background:rgba(255,255,255,.82); }
html:not(.in-telegram) .eq:hover { color:#541d47; background:#fff; border-color:rgba(126,43,96,.34); }
html:not(.in-telegram) .chat-form { padding:10px 16px 12px; border-top-color:rgba(126,43,96,.1); background:rgba(255,255,255,.94); }
html:not(.in-telegram) .tarot-option { margin-bottom:8px; }
html:not(.in-telegram) textarea { background:#fff8fb; }
html:not(.in-telegram) .btn-main { background:linear-gradient(135deg,#df5d90,#7d2d6b); box-shadow:0 10px 24px rgba(111,37,88,.28); }
html:not(.in-telegram) .chat-privacy-note,html:not(.in-telegram) .privacy-statement { display:none; }

/* Colored, concise purchase layer rather than the previous white/red split. */
html:not(.in-telegram) .modal-overlay { background:rgba(12,5,15,.66); backdrop-filter:blur(16px); }
html:not(.in-telegram) .plan-modal { width:min(340px,100%); padding:0; overflow:visible; color:#fff; border:0; border-radius:0; background:transparent; box-shadow:none; }
html:not(.in-telegram) .plan-modal > * { position:relative; z-index:1; }
html:not(.in-telegram) .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); }
html:not(.in-telegram) .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); }
html:not(.in-telegram) .plan-modal .plan-grid { margin:0; }
html:not(.in-telegram) .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); }
html:not(.in-telegram) .plan-modal .price { margin:0; color:#fff4cc; font-size:2.3rem; letter-spacing:-.05em; }
html:not(.in-telegram) .plan-modal .price small { color:rgba(255,255,255,.62); font-size:.68rem; font-weight:600; letter-spacing:0; }
html:not(.in-telegram) .plan-credit-note { margin-top:6px; color:rgba(255,255,255,.72); font-size:.7rem; }
html:not(.in-telegram) .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; }
html:not(.in-telegram) .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; }
html:not(.in-telegram) .butterfly-one { top:62px; left:-34px; font-size:2.2rem; transform:rotate(-22deg); }
html:not(.in-telegram) .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) {
  html:not(.in-telegram) .top-actions { gap:12px; }
  html:not(.in-telegram) .sign-in,html:not(.in-telegram) .start-reading-btn { display:none; }
  html:not(.in-telegram) .workspace { height:calc(100svh - 64px); padding:10px; }
  html:not(.in-telegram) .chat-panel { height:100%; border-radius:22px; }
  html:not(.in-telegram) .gallery-card { opacity:.28; }
  html:not(.in-telegram) .gallery-card-main { left:-24%; top:1%; width:58vw; height:31vh; }
  html:not(.in-telegram) .gallery-card-letter { right:-25%; top:10%; width:56vw; height:28vh; }
  html:not(.in-telegram) .gallery-card-mirror { left:-18%; bottom:-5%; width:54vw; height:29vh; }
  html:not(.in-telegram) .gallery-card-rain { right:-24%; bottom:-3%; width:60vw; height:32vh; }
  html:not(.in-telegram) .chat-head { padding:12px 14px; }
  html:not(.in-telegram) .status-pill { display:none; }
  html:not(.in-telegram) .chat-log { padding:18px 14px 12px; }
  html:not(.in-telegram) .idle-dice-guide { margin-left:0; }
  html:not(.in-telegram) .example-qs { padding-left:14px; padding-right:14px; }
  html:not(.in-telegram) .chat-form { padding:9px 12px 11px; }
}
@media (max-width:460px) {
  html:not(.in-telegram) .brand span,html:not(.in-telegram) .top-actions .nav-btn.active { display:none; }
  html:not(.in-telegram) .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); }
  html:not(.in-telegram) .msg { max-width:90%; }
  html:not(.in-telegram) .plan-modal { padding:0; }
}
html.in-telegram .idle-dice-guide { display:flex; align-items:center; gap:12px; width:100%; margin:8px 0; padding:12px; border:1px solid rgba(200,40,88,.13); border-radius:14px; color:#632946; background:#fff7fa; text-align:left; }
html.in-telegram .idle-dice-guide.is-hidden { display:none; }
html.in-telegram .idle-dice-roll { position:relative; display:block; width:42px; height:34px; flex:0 0 42px; } html.in-telegram .idle-dice-roll i { position:absolute; display:grid; place-items:center; width:22px; height:22px; border-radius:6px; color:#ffe3a4; background:linear-gradient(145deg,#4c2441,#c94879); font-size:.62rem; animation:idleDiceRoll 2.6s ease-in-out infinite; } html.in-telegram .idle-dice-roll i:nth-child(1){left:0;top:8px;animation-delay:-1.72s}html.in-telegram .idle-dice-roll i:nth-child(2){left:10px;top:0;animation-delay:-.86s}html.in-telegram .idle-dice-roll i:nth-child(3){left:20px;top:10px}
html.in-telegram .idle-dice-copy { display:grid; gap:3px; flex:1; }html.in-telegram .idle-dice-copy b{font-size:.75rem}html.in-telegram .idle-dice-copy small{font-size:.65rem;color:#916679}.idle-dice-arrow{font-size:1rem;color:#bb3e72}
@media (prefers-reduced-motion:reduce) { html:not(.in-telegram) * { scroll-behavior:auto !important; } }