/* ────────── chat test — iMessage-flavoured, brand-coloured ──────────
   Inherits tokens from ../styles.css. Overrides chat-specific surfaces.
   Animations (bubbles, chips) driven by Motion vanilla JS — CSS keyframes
   retained only as fallback for prefers-reduced-motion.
*/
:root{
  --chat-bg: #f6efe6;
  --chat-bg-2: #ede2d0;
  --chat-paper: #ffffff;
  --bubble-ai: #e9e9eb;
  --bubble-ai-ink: #1a1815;
  --me-grad: linear-gradient(180deg, #7c7cf8 0%, #6366f1 100%);
  --shell-card: rgba(255,250,242,.62);
  /* Calm indigo accent — replaces coral for psychology test context */
  --coral: #6366f1;
  --coral-soft: #818cf8;
  --coral-tint: rgba(99,102,241,.08);
  --coral-deep: #4f46e5;
}
html.dark{
  --chat-bg:#0c0a09;
  --chat-bg-2:#1a1612;
  --chat-paper:#1f1c19;
  --bubble-ai:#28282b;
  --bubble-ai-ink:#f1ebe1;
  --me-grad: linear-gradient(180deg, #9698f8 0%, #818cf8 100%);
  --shell-card: rgba(28,24,20,.62);
  --coral: #818cf8;
  --coral-soft: #a5b4fc;
  --coral-tint: rgba(129,140,248,.10);
  --coral-deep: #6366f1;
}

html,body{height:100%}
.test-body{
  margin:0;background:var(--chat-bg);
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  min-height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;
  letter-spacing: -0.005em;
}
body.test-body::before{display:none}    /* kill global page grain */

/* ────────── Three.js ambient canvas (replaces CSS aurora) ────────── */
#bg-canvas{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
  /* fallback bg shown before WebGL initialises */
  background:transparent;
}

/* ────────── chat shell ────────── */
.chat-shell{
  position:relative;z-index:1;
  width:100%;max-width:520px;
  margin:0 auto;flex:1;
  display:flex;flex-direction:column;
  min-height:100dvh;
  padding: max(env(safe-area-inset-top),10px) 12px max(env(safe-area-inset-bottom),10px);
}

/* top bar */
.chat-top{
  display:grid;grid-template-columns:40px 1fr auto;
  align-items:center;gap:10px;
  padding:7px 7px 7px 10px;
  background:rgba(255,250,242,.78);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  box-shadow: 0 4px 18px rgba(60,40,20,.05);
}
html.dark .chat-top{background:rgba(28,24,20,.72);border-color:rgba(255,255,255,.06)}
.chat-back, .chat-theme{
  width:36px;height:36px;border-radius:999px;
  display:grid;place-items:center;color:var(--ink);
  background:transparent;border:0;cursor:pointer;
  transition:background .25s;
}
.chat-back:hover, .chat-theme:hover{background:rgba(0,0,0,.05)}
html.dark .chat-back:hover, html.dark .chat-theme:hover{background:rgba(255,255,255,.06)}
.chat-theme .ico-moon{display:none}
html.dark .chat-theme .ico-sun{display:none}
html.dark .chat-theme .ico-moon{display:block}

.chat-id{display:flex;align-items:center;gap:10px;justify-content:center;min-width:0}
.chat-id-text{display:flex;flex-direction:column;gap:0;line-height:1.15;min-width:0}
.chat-name{
  font-family:'Instrument Serif',serif;font-size:18px;letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-status{
  font-size:11px;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dot-live{
  width:6px;height:6px;border-radius:999px;background:var(--coral);
  box-shadow:0 0 0 0 rgba(99,102,241,.6);
  animation:pulse 1.8s ease-out infinite;flex-shrink:0;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(99,102,241,.6)}
  70%{box-shadow:0 0 0 6px rgba(99,102,241,0)}
  100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}
}

.chat-actions{display:flex;align-items:center;gap:6px}
.lang-switch{
  display:inline-flex;
  background:rgba(0,0,0,.05);border-radius:999px;padding:3px;
}
html.dark .lang-switch{background:rgba(255,255,255,.06)}
.lang-pill{
  font:600 11px/1 'Inter',sans-serif;
  letter-spacing:.06em;
  padding:6px 10px;border-radius:999px;
  background:transparent;border:0;color:var(--muted);cursor:pointer;
  transition:background .25s, color .25s;
}
.lang-pill.active{background:var(--chat-paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
html.dark .lang-pill.active{background:#3a3530;color:var(--ink)}

/* orb */
.orb{position:relative;width:30px;height:30px;flex-shrink:0}
.orb-ring{position:absolute;inset:0;border-radius:999px;background:conic-gradient(from 0deg,var(--coral),var(--coral-soft),#ffd0b8,var(--coral));animation:orbSpin 6s linear infinite;filter:blur(.5px)}
.orb-core{position:absolute;inset:3.5px;border-radius:999px;background:var(--chat-bg);display:grid;place-items:center}
.orb-core::before{content:"";width:9px;height:9px;border-radius:999px;background:var(--coral);box-shadow:0 0 14px var(--coral);animation:orbBreathe 2.6s ease-in-out infinite}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbBreathe{0%,100%{transform:scale(.85);opacity:.85}50%{transform:scale(1.05);opacity:1}}

/* progress */
.chat-progress{display:flex;align-items:center;gap:10px;padding:12px 8px 4px}
.bar{flex:1;height:4px;border-radius:999px;background:rgba(0,0,0,.07);overflow:hidden}
html.dark .bar{background:rgba(255,255,255,.08)}
.bar-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--coral-soft),var(--coral));border-radius:999px;box-shadow:0 0 12px rgba(99,102,241,.45)}
/* width transition handled by Motion — CSS transition here as fallback */
.bar-fill{transition:width .55s cubic-bezier(.2,.7,.2,1)}
.count{font:600 11px/1 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);min-width:42px;text-align:right}

/* ────────── chat stream ────────── */
.chat-stream{
  flex:1;
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;
  padding:18px 2px 14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.12) transparent;
}
.chat-stream::-webkit-scrollbar{width:6px}
.chat-stream::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:999px}
html.dark .chat-stream::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}

/* time pill */
.time-pill{
  align-self:center;
  font:500 11.5px/1 'Inter',sans-serif;letter-spacing:.04em;
  color:var(--muted);
  padding:10px 0 6px;
}
.time-pill::first-letter{text-transform:uppercase}

/* sys note (handwritten interjection) */
.sys-note{
  align-self:center;font-family:'Caveat',cursive;font-size:16px;color:var(--muted);
  padding:10px 14px;
  /* entry animation via Motion JS; CSS fallback: */
  opacity:0;animation:msgIn .5s cubic-bezier(.2,.7,.2,1) forwards;
}

/* ────────── messages (iMessage-style) ────────── */
.msg{
  display:flex;gap:6px;align-items:flex-end;max-width:88%;
  margin-top:2px;
  /* Motion JS handles entry animation; CSS opacity:0 initial state */
  opacity:0;
}
.msg.ai{align-self:flex-start}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.grouped{margin-top:1px}
.msg + .msg:not(.grouped){margin-top:8px}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* avatar — only on AI's last in a run */
.msg .avatar{
  width:26px;height:26px;flex-shrink:0;
  display:grid;place-items:center;margin-bottom:3px;
  visibility:hidden;
}
.msg.ai.tail .avatar{visibility:visible}
.msg.me .avatar{display:none}
.orb-mini{
  width:22px;height:22px;border-radius:999px;
  background: conic-gradient(from 0deg,var(--coral),var(--coral-soft),#ffd0b8,var(--coral));
  position:relative;animation:orbSpin 7s linear infinite;
}
.orb-mini::after{content:"";position:absolute;inset:3px;border-radius:999px;background:var(--chat-paper)}

/* bubbles */
.bubble{
  position:relative;
  padding:9px 14px 10px;
  border-radius:18px;
  font-size:15.5px;line-height:1.42;
  max-width:100%;word-wrap:break-word;
}
.msg.ai .bubble{
  background:var(--bubble-ai);color:var(--bubble-ai-ink);
}
.msg.me .bubble{
  background:var(--me-grad);color:#fff;
}
.msg.ai .bubble em{
  font-family:'Instrument Serif',serif;font-style:italic;color:var(--coral);
  font-weight:400;font-size:1.05em;
}
.msg.me .bubble em{font-style:italic;color:#fff;opacity:.9}

/* iMessage tails (only on group-end bubbles) */
.msg.ai.tail .bubble{border-bottom-left-radius:6px}
.msg.me.tail .bubble{border-bottom-right-radius:6px}
.msg.ai.tail .bubble::before{
  content:"";position:absolute;left:-7px;bottom:0;
  width:15px;height:18px;background:var(--bubble-ai);
  border-bottom-right-radius:14px 18px;
  z-index:-1;
}
.msg.ai.tail .bubble::after{
  content:"";position:absolute;left:-12px;bottom:0;
  width:12px;height:18px;background:var(--chat-bg);
  border-bottom-right-radius:8px 14px;
  z-index:-1;
}
.msg.me.tail .bubble::before{
  content:"";position:absolute;right:-7px;bottom:0;
  width:15px;height:18px;background:linear-gradient(180deg, transparent 0%, #6366f1 100%);
  border-bottom-left-radius:14px 18px;
  z-index:-1;
}
.msg.me.tail .bubble::after{
  content:"";position:absolute;right:-12px;bottom:0;
  width:12px;height:18px;background:var(--chat-bg);
  border-bottom-left-radius:8px 14px;
  z-index:-1;
}
@media (min-width:760px){
  .msg.ai.tail .bubble::after,
  .msg.me.tail .bubble::after{background:transparent}
}

/* typing indicator */
.typing-bubble{padding:13px 16px;display:inline-flex;gap:5px;align-items:center}
.typing-bubble span{width:7px;height:7px;border-radius:999px;background:var(--muted);opacity:.5;animation:typing 1.2s ease-in-out infinite}
.typing-bubble span:nth-child(2){animation-delay:.15s}
.typing-bubble span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}

/* read receipt */
.read-receipt{
  align-self:flex-end;
  font:500 11px/1 'Inter',sans-serif;
  color:var(--muted);letter-spacing:.04em;
  padding:4px 4px 6px;
  margin-right:4px;
  opacity:0;animation:msgIn .4s .15s cubic-bezier(.2,.7,.2,1) forwards;
}

/* intro block (centered) */
.intro-block{
  align-self:center;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 6px 14px;
  opacity:0;animation:msgIn .6s cubic-bezier(.2,.7,.2,1) forwards;
}
.intro-block .eyebrow-sm{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.intro-block h1{
  font-family:'Instrument Serif',serif;font-weight:400;
  font-size:clamp(34px,8.6vw,42px);line-height:1.04;
  margin:2px 0 0;color:var(--ink);letter-spacing:-.01em;
}
.intro-block h1 em{font-style:italic;color:var(--coral-soft);font-family:'Instrument Serif',serif}

/* ────────── footer / options / compose ────────── */
.chat-foot{
  position:sticky;bottom:0;
  padding:8px 4px max(env(safe-area-inset-bottom),8px);
  background:linear-gradient(180deg,rgba(246,239,230,0) 0%,rgba(246,239,230,.92) 30%,var(--chat-bg) 70%);
  backdrop-filter:blur(8px);
  display:flex;flex-direction:column;gap:6px;
}
html.dark .chat-foot{background:linear-gradient(180deg,rgba(12,10,9,0) 0%,rgba(12,10,9,.92) 30%,var(--chat-bg) 70%)}
.opts{display:flex;flex-direction:column;gap:8px;min-height:1px}

.opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:13px 18px;
  background:var(--chat-paper);border:1px solid var(--line);
  border-radius:16px;
  font:inherit;font-size:15px;color:var(--ink);text-align:left;cursor:pointer;
  transition:transform .2s,border-color .25s,background .25s,box-shadow .25s;
  /* Motion JS handles entry; initial state hidden */
  opacity:0;
}
.opt:hover{border-color:rgba(99,102,241,.5);transform:translateY(-1px)}
.opt:active{transform:scale(.985)}
.opt::after{
  content:"";width:18px;height:18px;border-radius:999px;
  border:1.5px solid var(--line);flex-shrink:0;
  transition:border-color .2s,background .2s;
}
.opt:hover::after{border-color:var(--coral)}
.opt.tapped{background:var(--coral-tint);border-color:var(--coral)}
.opt.tapped::after{background:var(--coral);border-color:var(--coral);box-shadow:inset 0 0 0 3px var(--chat-paper)}

.foot-hint{
  margin:0;text-align:center;
  font-family:'Caveat',cursive;font-size:15px;color:var(--muted);min-height:18px;
}
.foot-row{display:flex;gap:8px;width:100%}
.foot-row > *{flex:1}

/* iMessage-y compose input */
.compose{
  display:flex;align-items:center;gap:6px;
  background:var(--chat-paper);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 4px 4px 16px;
  transition:border-color .25s, box-shadow .25s;
}
.compose:focus-within{
  border-color:var(--coral);
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}
.compose.err{
  border-color:var(--coral);
  animation: shake .35s;
}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.compose input{
  flex:1;border:0;outline:0;background:transparent;
  font:inherit;font-size:15px;color:var(--ink);padding:10px 0;
  min-width:0;
}
.compose input::placeholder{color:var(--muted-2)}
.compose button{
  width:36px;height:36px;border-radius:999px;
  background:var(--coral);color:#fff;
  display:grid;place-items:center;border:0;cursor:pointer;flex-shrink:0;
  transition:background .25s,transform .2s;
}
.compose button:hover{background:var(--coral-deep)}
.compose button:active{transform:scale(.94)}

/* consent row (inside compose, for email step) */
.consent-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;font-size:12.5px;color:var(--muted);line-height:1.5;
  background:var(--chat-paper);border:1px solid var(--line);border-radius:14px;
  margin-top:4px;
}
.consent-row input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--coral);flex-shrink:0;margin-top:1px;cursor:pointer;
}
.consent-row a{color:var(--coral);text-decoration:underline;text-underline-offset:2px}
.consent-row a:hover{color:var(--coral-deep)}

/* primary cta */
.chat-cta{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:13px 13px 13px 22px;
  background:var(--me-grad);color:#fff;
  border-radius:999px;font-weight:600;font-size:15px;
  box-shadow:0 18px 38px -14px rgba(79,70,229,.65),inset 0 1px 0 rgba(255,255,255,.3);
  cursor:pointer;border:0;
  transition:transform .25s;
  opacity:0;animation:msgIn .55s cubic-bezier(.2,.7,.2,1) forwards;
  text-decoration:none;
}
.chat-cta:hover{transform:translateY(-2px)}
.chat-cta:active{transform:scale(.985)}
.cta-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.cta-sub{font-size:11.5px;opacity:.9;font-weight:400;margin-top:2px}
.chat-cta .arr{width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0}
.chat-cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.chat-cta.ghost .arr{background:transparent;border:1px solid var(--line);color:var(--ink)}

/* ────────── analyzing ────────── */
.analyze{
  align-self:center;display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:30px 10px;width:100%;opacity:0;animation:msgIn .6s cubic-bezier(.2,.7,.2,1) forwards;
}
/* Three.js orb canvas injected here by chat.js */
.analyze-canvas-wrap{
  width:140px;height:140px;position:relative;
}
/* CSS fallback orb (shown if WebGL unavailable) */
.analyze-orb{position:relative;width:140px;height:140px}
.analyze-orb::before,.analyze-orb::after,.analyze-orb .core{content:"";position:absolute;inset:0;border-radius:999px}
.analyze-orb::before{background:conic-gradient(from 0deg,var(--coral),var(--coral-soft),#ffd0b8,transparent,var(--coral));animation:orbSpin 4s linear infinite;filter:blur(2px)}
.analyze-orb::after{inset:12px;background:radial-gradient(circle at 35% 30%,#ffd0b8,var(--coral) 70%);filter:blur(2px);animation:orbBreathe 2.4s ease-in-out infinite}
.analyze-orb .core{inset:34px;background:var(--chat-paper);display:grid;place-items:center;font-family:'Instrument Serif',serif;font-size:30px;color:var(--coral)}
.analyze-text{font-family:'Instrument Serif',serif;font-size:24px;line-height:1.35;color:var(--ink);text-align:center;max-width:360px;min-height:64px}
.analyze-text .swap{display:inline-block;opacity:0;animation:swapIn .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes swapIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ────────── result + share ────────── */
.result-card{
  align-self:stretch;
  background:var(--chat-paper);
  border:1px solid var(--line);border-radius:24px;
  padding:24px 22px 22px;
  box-shadow:0 14px 40px rgba(60,40,20,.08);
  /* Motion JS handles entry */
  opacity:0;
  display:flex;flex-direction:column;gap:14px;
  margin-top:10px;
}
.result-eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);font-weight:600}
.result-style{font-family:'Instrument Serif',serif;font-size:38px;line-height:1;letter-spacing:-.01em;margin:0;color:var(--ink)}
.result-tag{font-family:'Instrument Serif',serif;font-style:italic;font-size:18px;color:var(--coral);margin:0}
.result-body{margin:0;color:var(--ink-2);font-size:15px;line-height:1.7}
.result-body em{font-style:italic;color:var(--coral);font-family:'Instrument Serif',serif;font-size:1.05em}

.bars{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.bars-row{display:flex;align-items:center;gap:10px}
.bars-row .b-l{flex:0 0 110px;font-size:13px;color:var(--ink-2)}
.bars-row .b-track{flex:1;height:8px;border-radius:999px;background:rgba(0,0,0,.05);overflow:hidden}
html.dark .bars-row .b-track{background:rgba(255,255,255,.06)}
.bars-row .b-fill{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--coral-soft),var(--coral))}
.bars-row[data-self="1"] .b-l{color:var(--coral);font-weight:600}
.bars-row .b-pct{flex:0 0 36px;text-align:right;font-family:'Instrument Serif',serif;font-size:14px;color:var(--muted)}

.result-actions{
  align-self:stretch;display:flex;gap:8px;margin-top:6px;
  opacity:0;animation:msgIn .6s .1s cubic-bezier(.2,.7,.2,1) forwards;
}
.rct-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:14px;
  background:var(--chat-paper);border:1px solid var(--line);
  color:var(--ink);font:600 14px/1 'Inter',sans-serif;cursor:pointer;
  transition:transform .2s,border-color .25s,background .25s,color .25s;
}
.rct-btn:hover{transform:translateY(-1px);border-color:rgba(99,102,241,.5)}
.rct-btn:active{transform:scale(.98)}
.rct-btn.primary{background:var(--coral);color:#fff;border-color:transparent;box-shadow:0 10px 24px -8px rgba(79,70,229,.45)}
.rct-btn.primary:hover{background:var(--coral-deep);border-color:transparent}

/* ────────── premium tease ────────── */
.premium{
  align-self:stretch;
  background:linear-gradient(180deg,var(--chat-paper) 0%,#fef0e9 100%);
  border:1px solid var(--line);border-radius:24px;
  padding:22px;display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
  /* GSAP handles entry */
  opacity:0;
  margin-top:14px;
}
html.dark .premium{background:linear-gradient(180deg,var(--chat-paper) 0%,#1a1a38 100%)}
.premium::before{content:"";position:absolute;width:280px;height:280px;right:-120px;top:-120px;border-radius:999px;background:radial-gradient(circle,rgba(165,180,252,.5),transparent 70%);filter:blur(20px)}
.premium-head{display:flex;flex-direction:column;gap:6px;position:relative}
.premium-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--coral);color:#fff;font-size:10.5px;letter-spacing:.1em;font-weight:700;text-transform:uppercase}
.premium-head h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:24px;line-height:1.15;margin:2px 0 0;letter-spacing:-.005em}
.premium-head h3 em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--coral)}
.premium-head p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}

.locks{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.lock{
  position:relative;padding:14px;
  background:var(--chat-paper);border:1px solid var(--line);
  border-radius:16px;min-height:96px;overflow:hidden;
}
.lock h4{font:600 13px/1.2 'Inter',sans-serif;margin:0 0 6px;color:var(--ink)}
.lock p{margin:0;font-size:12px;color:var(--ink-2);line-height:1.55;filter:blur(4px);user-select:none}
html.dark .lock p{filter:blur(4px) brightness(.9)}
.lock-pad{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:8px;background:var(--coral-tint);color:var(--coral);display:grid;place-items:center}
.lock-pad svg{width:12px;height:12px}

.premium-cta-row{display:none}
.premium-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:999px;
  background:var(--ink);color:var(--chat-bg);font-weight:600;font-size:14px;
  border:0;cursor:pointer;transition:background .25s,transform .25s,color .25s;
}
html.dark .premium-cta{background:var(--coral);color:#fff}
.premium-cta:hover{background:var(--coral);color:#fff;transform:translateY(-2px)}
html.dark .premium-cta:hover{background:var(--coral-deep)}
.premium-foot{font-size:11.5px;color:var(--muted);text-align:center;position:relative}

/* ───── richer premium card ───── */
.premium-band{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin:-2px 0 4px;position:relative;
}
.premium-social{font-size:11.5px;color:var(--muted);font-weight:500}
.value-props{
  list-style:none;padding:0;margin:6px 0 4px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;
  position:relative;
}
.value-props li{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-2);line-height:1.3}
.vp-ico{
  width:22px;height:22px;border-radius:7px;
  background:var(--coral-tint);color:var(--coral);
  display:grid;place-items:center;flex-shrink:0;
  font-family:'Instrument Serif',serif;font-size:13px;
}
.premium-tsts{display:flex;flex-direction:column;gap:10px;position:relative}
.premium-tsts figure{margin:0;padding:12px 14px;border-radius:14px;background:var(--chat-paper);border:1px solid var(--line)}
.premium-tsts blockquote{margin:0;font-family:'Instrument Serif',serif;font-size:15px;line-height:1.4;color:var(--ink)}
.premium-tsts figcaption{font-size:11.5px;color:var(--ink-2);margin-top:6px;font-weight:600}
.premium-tsts .muted{color:var(--muted);font-weight:400}

.premium-unlock{
  position:relative;
  background:var(--chat-paper);
  border:1px solid var(--coral);
  border-radius:18px;
  padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 14px 30px -10px rgba(99,102,241,.25);
  margin-top:4px;
}
.pu-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.pu-price{display:flex;align-items:baseline;gap:8px}
.pu-price .now{font-family:'Instrument Serif',serif;font-size:36px;line-height:1;color:var(--ink)}
.pu-price .was{font-family:'Instrument Serif',serif;font-size:18px;color:var(--muted);text-decoration:line-through}
.pu-tag{font-size:10.5px;letter-spacing:.08em;font-weight:700;color:var(--coral);text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--coral-tint)}
.premium-cta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:14px 14px 14px 20px;
  background:var(--me-grad);color:#fff;
  border:0;border-radius:14px;font:600 15px 'Inter',sans-serif;cursor:pointer;
  box-shadow:0 14px 30px -10px rgba(79,70,229,.55),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .25s;
}
.premium-cta:hover{transform:translateY(-2px)}
.premium-cta:active{transform:scale(.99)}
.pc-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;gap:2px}
.pc-sub{font-size:11.5px;opacity:.92;font-weight:400}
.pc-arr{width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex-shrink:0}
.pu-foot{font-size:11px;color:var(--muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:0}
.pu-check{color:#1b8a4e;font-weight:600}
html.dark .pu-check{color:#5fd494}
.pu-sep{opacity:.5}

/* sticky inline unlock in the footer (last screen) */
.sticky-unlock{box-shadow:0 18px 38px -14px rgba(79,70,229,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.ghost-row{padding:10px 18px;font-size:13px}
.ghost-row .arr{width:24px;height:24px}

@media (max-width: 380px){
  .value-props{grid-template-columns:1fr}
}

/* ────────── checkout sheet ────────── */
.sheet-overlay{
  position:fixed;inset:0;z-index:80;
  background:rgba(20,15,10,.5);
  backdrop-filter:blur(10px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.sheet-overlay.open{opacity:1;pointer-events:auto}
.sheet{
  width:100%;max-width:520px;
  background:var(--chat-paper);color:var(--ink);
  border-radius:28px 28px 0 0;
  padding:24px 22px max(env(safe-area-inset-bottom),24px);
  display:flex;flex-direction:column;gap:14px;
  transform:translateY(20px);transition:transform .35s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 -30px 80px rgba(0,0,0,.25);
  position:relative;
}
.sheet-overlay.open .sheet{transform:none}
.sheet::before{content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);width:40px;height:4px;border-radius:999px;background:var(--line)}
.sheet-close{position:absolute;top:16px;right:14px;width:34px;height:34px;border-radius:999px;background:transparent;border:0;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .25s}
.sheet-close:hover{background:rgba(0,0,0,.05)}
html.dark .sheet-close:hover{background:rgba(255,255,255,.06)}
.sheet-head{margin-top:12px}
.sheet-head h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:26px;line-height:1.15;margin:0 0 4px;letter-spacing:-.005em}
.sheet-head p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.sheet-field{display:flex;flex-direction:column;gap:6px}
.sheet-field > span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sheet-field input{font:500 16px 'Inter',sans-serif;padding:14px 16px;border-radius:14px;background:var(--chat-bg);border:1px solid var(--line);color:var(--ink);outline:0;transition:border-color .25s, box-shadow .25s}
.sheet-field input:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(99,102,241,.12)}
.sheet-err{margin:-6px 0 0;color:var(--coral);font-size:13px}
.sheet-summary{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:14px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.sheet-summary > div{display:contents}
.sheet-summary .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;align-self:center}
.sheet-summary .v{font-family:'Instrument Serif',serif;font-size:18px;color:var(--ink);text-align:right}
.sheet-summary .v.price{display:inline-flex;align-items:baseline;gap:8px;justify-content:flex-end}
.sheet-summary .v.price .now{font-size:22px}
.sheet-summary .v.price .was{font-size:14px;color:var(--muted);text-decoration:line-through}
.sheet-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px 18px;background:var(--me-grad);color:#fff;border:0;border-radius:999px;font:600 15px 'Inter',sans-serif;cursor:pointer;box-shadow:0 18px 38px -14px rgba(79,70,229,.65);transition:transform .25s}
.sheet-cta:hover{transform:translateY(-2px)}
.sheet-cta:active{transform:scale(.985)}
.sheet-foot{margin:0;text-align:center;font-size:11.5px;color:var(--muted)}

/* ────────── legal footer ────────── */
.legal-footer{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;
  padding:14px 20px max(env(safe-area-inset-bottom),14px);
  font-size:11.5px;color:var(--muted);
}
.legal-footer a{color:var(--muted);text-decoration:none;transition:color .2s}
.legal-footer a:hover{color:var(--coral)}
.legal-footer span[aria-hidden]{color:var(--line)}

/* ────────── responsive (desktop letterbox) ────────── */
@media (min-width: 760px){
  .test-body{
    background:
      radial-gradient(ellipse 60% 50% at 20% 30%, rgba(165,180,252,.25), transparent 70%),
      radial-gradient(ellipse 50% 40% at 80% 70%, rgba(148,163,250,.18), transparent 70%),
      var(--chat-bg);
  }
  html.dark .test-body{
    background:
      radial-gradient(ellipse 60% 50% at 20% 30%, rgba(49,46,129,.35), transparent 70%),
      radial-gradient(ellipse 50% 40% at 80% 70%, rgba(49,46,129,.25), transparent 70%),
      var(--chat-bg);
  }
  .chat-shell{
    margin:22px auto;max-width:540px;
    min-height:calc(100dvh - 44px);
    border-radius:36px;
    border:1px solid rgba(255,255,255,.55);
    background:var(--shell-card);
    backdrop-filter:blur(22px) saturate(1.2);
    -webkit-backdrop-filter:blur(22px) saturate(1.2);
    box-shadow:0 30px 80px rgba(60,40,20,.12);
    overflow:hidden;
    padding:14px 16px;
  }
  html.dark .chat-shell{border-color:rgba(255,255,255,.06);box-shadow:0 30px 80px rgba(0,0,0,.5)}
  .chat-foot{background:linear-gradient(180deg,rgba(255,250,242,0) 0%,rgba(255,250,242,.5) 50%,transparent 100%)}
  html.dark .chat-foot{background:linear-gradient(180deg,rgba(28,24,20,0) 0%,rgba(28,24,20,.5) 50%,transparent 100%)}
}

/* tiny phones */
@media (max-width: 360px){
  .bubble{font-size:14.5px;padding:9px 13px}
  .opt{font-size:14px;padding:12px 16px}
  .locks{grid-template-columns:1fr}
  .lang-switch{display:none}
}

@media (prefers-reduced-motion: reduce){
  .aurora,.orb-ring,.orb-core::before,.analyze-orb::before,.analyze-orb::after,.dot-live{animation:none!important}
  .msg,.opt,.chat-cta,.result-card,.premium,.analyze,.intro-block,.read-receipt,
  .result-actions,.sys-note,.analyze-text .swap{animation:none!important;opacity:1!important}
  .bar-fill,.b-fill{transition:none!important}
}

/* ────────── WhatsApp-style profile photo avatar ────────── */
.chat-avatar{
  width:36px;height:36px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  box-shadow:0 0 0 2px var(--chat-bg);
}
.msg-avatar-img{
  width:22px;height:22px;border-radius:50%;
  object-fit:cover;display:block;
}