/* ASK-Y — Prism guided-conversation hero. All rules scoped under #prismHero so
   nothing leaks into the rest of the theme. Reuses the theme's hero background
   (.hero-glow-1/2, .hero-dots) and tokens (--accent, --grad, --display, --body). */

#prismHero{
  --p-bg:#f8f9fa; --p-panel:#fff; --p-border:#e5e7eb; --p-hdr:#e0e0e0;
  --p-text:#333; --p-muted:#6b7280; --p-dim:#9ca3af;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  grid-template-columns:none; gap:0; padding:104px 6% 72px;
}
#prismHero [hidden]{display:none!important}
#prismHero .ph-wrap{position:relative; z-index:2; max-width:1200px; width:100%; margin:0 auto}
#prismHero .ph-kicker{text-align:center; margin-bottom:18px}
#prismHero .ph-badge{display:inline-flex; align-items:center; gap:9px; background:rgba(2,132,199,.07); border:1px solid rgba(2,132,199,.2); border-radius:100px; padding:6px 15px; font-size:.78rem; font-weight:500; color:var(--glow,#0EA5E9)}
#prismHero .ph-badge i{width:6px; height:6px; border-radius:50%; background:var(--accent,#0284C7); display:inline-block}

#prismHero .appwin{background:var(--p-panel); border:1px solid rgba(15,23,42,.10); border-radius:16px; overflow:hidden; box-shadow:0 34px 90px rgba(2,132,199,.14),0 6px 24px rgba(15,23,42,.08)}
#prismHero .appbar{height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; background:var(--p-panel); border-bottom:1px solid var(--p-hdr)}
#prismHero .appbar .brand{display:flex; align-items:center; gap:8px; font-size:13px}
#prismHero .appbar .mark{width:18px; height:18px; object-fit:contain}
#prismHero .appbar .brand b{font-family:var(--display); font-weight:700; color:var(--p-text)}
#prismHero .appbar .sep{color:var(--p-dim)}
#prismHero .appbar .sub{color:var(--p-muted)}
#prismHero .appbar .right{display:flex; align-items:center; gap:10px}
#prismHero .appbar .login{font-size:12px; color:var(--p-muted); text-decoration:none}
#prismHero .appbar .login:hover{color:var(--accent,#0284C7)}

#prismHero .appbody{display:flex; height:min(560px,64vh)}
#prismHero .rail{flex:0 0 48px; display:flex; flex-direction:column; align-items:center; gap:16px; padding:12px 0; background:var(--p-panel); border-right:1px solid var(--p-hdr); color:var(--p-dim)}
#prismHero .rail .m{width:22px; height:22px; object-fit:contain}
#prismHero .material-symbols-outlined{font-family:'Material Symbols Outlined'; font-weight:400; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; font-feature-settings:'liga'; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased}
#prismHero .rail .ic{font-size:20px; color:var(--p-dim)}
#prismHero .rail .ic.on{color:var(--accent,#0284C7)}
#prismHero .rail .sp{flex:1}

#prismHero .chat{flex:1; min-width:0; background:var(--p-bg); display:flex; flex-direction:column}
#prismHero .chat .scroll{flex:1; overflow:hidden; padding:18px 18px 6px}

#prismHero .msg{margin-bottom:16px}
#prismHero .card{background:var(--p-panel); border:1px solid var(--p-border); border-radius:12px; padding:14px 15px; max-width:560px}
#prismHero .card .title{font-family:var(--display); font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:var(--p-text); line-height:1.25; margin-bottom:6px}
#prismHero .card p{font-size:13.5px; color:var(--p-muted); line-height:1.6}
#prismHero .user{display:flex; justify-content:flex-end; margin-bottom:16px}
#prismHero .user .bub{background:#EEF4FB; border:1px solid rgba(2,132,199,.18); color:var(--p-text); font-size:13px; border-radius:12px; padding:9px 13px; max-width:360px}

#prismHero .typing{display:none; align-items:center; gap:5px; background:var(--p-panel); border:1px solid var(--p-border); border-radius:12px; padding:12px 14px; width:fit-content; margin-bottom:16px}
#prismHero .typing.in{display:inline-flex}
#prismHero .typing i{width:6px; height:6px; border-radius:50%; background:var(--p-dim); display:inline-block; animation:ph-blink 1.2s infinite}
#prismHero .typing i:nth-child(2){animation-delay:.2s}
#prismHero .typing i:nth-child(3){animation-delay:.4s}

#prismHero .composer{border-top:1px solid var(--p-border); background:var(--p-panel); padding:14px 30px 16px; display:flex; flex-direction:column; align-items:center}
#prismHero .comp-hint{font-size:12px; color:var(--accent,#0284C7); font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:6px}
#prismHero .comp-hint .ha{display:inline-block; font-size:14px; animation:ph-bob 1.2s ease-in-out infinite}
#prismHero .comp-box{display:flex; align-items:center; gap:8px; width:100%; max-width:620px; border:1px solid var(--p-border); border-radius:12px; padding:8px 8px 8px 14px; background:#fff; transition:border-color .3s,transform .3s}
#prismHero .comp-box .at{color:var(--accent,#0284C7); font-size:16px; flex:0 0 auto}
#prismHero .comp-box input{flex:1; border:none; outline:none; font-size:15px; color:var(--p-text); font-family:var(--body); background:transparent; transition:font-size .25s}
#prismHero .comp-box input::placeholder{color:var(--p-dim); opacity:1}
#prismHero .comp-box.live{border-color:var(--accent,#0284C7); border-width:1.5px; transform:scale(1.02); animation:ph-cuePulse 1.6s ease-in-out 3 forwards}
#prismHero .comp-box.live .at{font-size:18px}
#prismHero .comp-box.live input{font-size:17px; font-weight:500}
#prismHero .comp-box.live input::placeholder{color:var(--accent,#0284C7); opacity:.9; font-weight:600}
/* default: a compact chat send icon; becomes the "See your analytics" CTA when live */
#prismHero .send{background:var(--grad); color:#fff; border:none; border-radius:9px; cursor:pointer; font-family:var(--body); display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; width:34px; height:34px; padding:0}
#prismHero .send .send-ic{font-size:18px; line-height:1}
#prismHero .send .send-label{display:none; font-size:13.5px; font-weight:500; white-space:nowrap}
#prismHero .comp-box.live .send{width:auto; height:auto; padding:10px 16px}
#prismHero .comp-box.live .send .send-ic{display:none}
#prismHero .comp-box.live .send .send-label{display:inline}
#prismHero .comp-foot{margin-top:8px; font-size:11px; color:var(--p-dim); display:flex; gap:16px; flex-wrap:wrap}

@keyframes ph-blink{0%,80%,100%{opacity:.25; transform:translateY(0)}40%{opacity:1; transform:translateY(-2px)}}
@keyframes ph-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes ph-cuePulse{0%,100%{box-shadow:0 0 0 3px rgba(2,132,199,.16)}50%{box-shadow:0 0 0 8px rgba(2,132,199,.32)}}

@media (max-width:640px){
  #prismHero{padding:92px 4% 56px}
  #prismHero .rail{display:none}
  #prismHero .appbody{height:auto; min-height:440px}
  #prismHero .composer{padding:14px 16px}
}