/* ---------- quiz: conversational diagnostic ---------- */
.qbody{min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(900px 700px at 50% -10%,rgba(99,102,241,.22),transparent 60%),var(--ink)}
.qtop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--edge);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:rgba(7,8,26,.78);backdrop-filter:blur(16px)}
.qtop .brand{font-size:.95rem}
.qtop .brand img{width:22px;height:22px}
.qprog-wrap{flex:1;max-width:280px;margin-inline:auto}
.qprog{height:2px;background:rgba(165,180,252,.14);border-radius:2px;overflow:hidden}
.qprog i{display:block;height:100%;width:0;background:var(--grad);transition:width .6s var(--ease)}
.qcount{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--mute);white-space:nowrap}
.qexit{font-size:.76rem;color:var(--mute);white-space:nowrap}
.qexit:hover{color:var(--paper)}

.thread{flex:1;width:100%;max-width:760px;margin:0 auto;padding:clamp(26px,5vh,54px) var(--edge) 170px;display:flex;flex-direction:column;gap:20px}

.msg{display:flex;gap:12px;max-width:92%;animation:msgIn .55s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.msg .ava{width:30px;height:30px;font-size:.7rem;margin-top:2px}
.msg .bubble{padding:15px 18px;border-radius:16px;border-top-left-radius:5px;background:rgba(17,19,46,.92);box-shadow:0 0 0 1px var(--line) inset;font-size:1rem;line-height:1.5;letter-spacing:-.01em;color:var(--paper)}
.msg .bubble strong{font-weight:600}
.msg .bubble .soft{color:var(--soft);font-size:.86rem;display:block;margin-top:8px;line-height:1.5}
.msg.me{align-self:flex-end;flex-direction:row-reverse;max-width:86%}
.msg.me .bubble{background:rgba(99,102,241,.20);border-top-left-radius:16px;border-top-right-radius:5px;box-shadow:0 0 0 1px rgba(167,139,250,.35) inset}
.msg.me .ava{background:rgba(255,255,255,.10);background-image:none;color:var(--paper);font-size:.62rem;letter-spacing:.02em}
.msg .bubble em{font-style:normal;color:var(--violet)}

.typing{display:inline-flex;gap:5px;padding:16px 18px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* options dock */
.opts{margin-top:4px;display:flex;flex-direction:column;gap:8px;animation:msgIn .5s var(--ease) both}
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;min-height:52px;padding:13px 18px;border-radius:12px;background:rgba(255,255,255,.025);box-shadow:0 0 0 1px var(--line) inset;color:var(--paper);font-size:.98rem;transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
.opt:hover{background:rgba(165,180,252,.10);box-shadow:0 0 0 1px var(--line-strong) inset;transform:translateX(2px)}
.opt[aria-pressed="true"]{background:rgba(99,102,241,.20);box-shadow:0 0 0 1px rgba(167,139,250,.55) inset}
.opt .k{font-family:var(--mono);font-size:.6rem;color:var(--mute);letter-spacing:.1em;flex:none}
.opt[aria-pressed="true"] .k{color:var(--violet)}
.opt .tick{width:18px;height:18px;border-radius:6px;box-shadow:0 0 0 1px var(--line-strong) inset;display:grid;place-items:center;flex:none;font-size:.6rem;color:transparent;transition:background .2s,color .2s}
.opt[aria-pressed="true"] .tick{background:var(--violet);color:#07081a}
.opts-note{font-size:.72rem;color:var(--mute);margin-top:2px}
.dock{margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dock .btn{height:46px;padding:0 20px;font-size:.86rem}
.dock .ghost{background:none;color:var(--mute);font-size:.78rem;padding:0 6px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.dock .ghost:hover{color:var(--paper)}

/* inline text field inside thread */
.answer-inline{display:flex;gap:10px;align-items:center;background:rgba(11,13,34,.8);border-radius:14px;padding:8px 8px 8px 16px;box-shadow:0 0 0 1px var(--line-strong) inset}
.answer-inline input{flex:1;border:0;background:none;color:var(--paper);font:400 1rem/1.4 var(--text);outline:none;min-height:34px}
.answer-inline input::placeholder{color:var(--mute)}
.answer-inline button{width:36px;height:36px;border-radius:10px;background:var(--paper);color:#07081a;display:grid;place-items:center;flex:none}

/* composer pinned to bottom of quiz */
.qcomposer{position:fixed;inset:auto 0 0;z-index:30;padding:14px var(--edge) max(14px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(7,8,26,0),rgba(7,8,26,.9) 40%);pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.qcomposer.show{opacity:1;transform:none;pointer-events:auto}
.qcomposer .inner{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:12px;background:rgba(11,13,34,.92);border-radius:16px;padding:10px 10px 10px 16px;box-shadow:0 0 0 1px var(--line-strong) inset,0 20px 50px -30px #000;backdrop-filter:blur(14px)}
.qcomposer .inner span{flex:1;font-size:.92rem;color:var(--mute)}
.qcomposer .inner b{color:var(--soft);font-weight:400}

/* result role card */
.rescard{border-radius:18px;padding:clamp(22px,3vw,32px);background:linear-gradient(150deg,rgba(99,102,241,.22),rgba(167,139,250,.10) 45%,rgba(11,13,34,.7));box-shadow:0 0 0 1px rgba(167,139,250,.4) inset,0 40px 80px -50px rgba(129,140,248,.9);animation:msgIn .6s var(--ease) both}
.rescard .rl{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--violet)}
.rescard h2{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:-.045em;line-height:1.02;margin:10px 0 6px}
.rescard .taskline{font-size:.95rem;color:var(--paper);padding:12px 14px;border-radius:10px;background:rgba(7,8,26,.5);box-shadow:0 0 0 1px var(--line) inset;margin-top:14px}
.rescard .taskline span{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--mute);display:block;margin-bottom:4px}
.rescard dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0}
.rescard dt{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.rescard dd{margin:0;font-size:.86rem;color:var(--soft);line-height:1.45}
.rescard .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.rescard .cta .btn{height:48px;font-size:.9rem}
@media(max-width:520px){.rescard dl{grid-template-columns:1fr}.rescard .cta .btn{width:100%}}
.form-row{display:flex;flex-direction:column;gap:8px}
.form-row label{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.form-row input{width:100%;min-height:48px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px var(--line-strong) inset;border:0;color:var(--paper);font:400 16px/1.4 var(--text);outline:none}
.form-row input:focus{box-shadow:0 0 0 1px rgba(167,139,250,.7) inset}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.76rem;color:var(--mute);line-height:1.5}
.consent input{width:18px;height:18px;margin-top:1px;accent-color:var(--violet);flex:none}
.consent a{color:var(--soft);text-decoration:underline;text-underline-offset:2px}
.err{color:#fb7185;font-size:.76rem;min-height:1.2em}
.done-note{font-size:.74rem;color:var(--mute);text-align:center;padding:8px 0 40px}