/* Pocket XV app, part 2: onboarding, chat, quiz, sheets, toast. */

/* Onboarding */
.onboard{z-index:8}
.ob-top{display:flex;align-items:center;gap:6px;padding:calc(var(--sat) + 10px) 14px 8px 6px;min-height:58px}
.ob-top .logo{margin-left:10px}
.ob-progress{height:4px;background:var(--line);margin:0 18px;border-radius:4px;overflow:hidden}
.ob-progress i{display:block;height:100%;width:10%;background:var(--acc);transition:width .3s}
.ob-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ob-body{max-width:480px;margin:0 auto;padding:26px 18px calc(var(--sab) + 30px)}
.ob-title{font-size:40px;margin:2px 0 18px;outline:none}
.ob-coach{display:flex;align-items:center;gap:10px;margin:-6px 0 18px;color:var(--muted);font-size:15px}
.opts{display:grid;gap:10px}
.opt{display:block;width:100%;text-align:left;min-height:58px;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--ink2);font-size:18px;font-weight:600;transition:transform .1s,border-color .15s}
.opt:active{transform:scale(.98);border-color:var(--acc)}
.opt.on{border-color:var(--acc);background:var(--accbg)}
.pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pos{min-height:54px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--ink2);font-weight:600;font-size:16px;text-align:left}
.pos.on,.pos:active{border-color:var(--acc);background:var(--accbg)}
.ob-form{margin-top:16px}
.ob-form input,.sheet input{width:100%;min-height:56px;border-radius:12px;border:1px solid var(--line);background:#060807;padding:0 16px;font-size:18px;outline:none}
.ob-form input:focus,.sheet input:focus{border-color:var(--acc)}
.code-in{text-align:center;font-family:var(--mono);font-size:28px!important;letter-spacing:.4em}
.form-msg{color:var(--warn);font-size:15px;margin-top:10px}
.form-msg:empty{display:none}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--acc);animation:spin .8s linear infinite;margin:20px 0}
@keyframes spin{to{transform:rotate(360deg)}}
.week-body{padding:16px 2px 0}
.q-h{font-size:21px;margin:22px 0 10px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{min-height:46px;min-width:56px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--ink2);font-weight:600;font-size:16px}
.chip-btn.on{border-color:var(--acc);background:var(--acc);color:var(--acc-ink)}

/* Chat */
.chat{background:#090C0A}
.chat-top{display:flex;align-items:center;gap:8px;padding:calc(var(--sat) + 8px) 10px 10px 2px;background:var(--ink2);border-bottom:1px solid var(--line)}
.chat-who{flex:1;min-width:0}
.chat-name{font-weight:700;font-size:18px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.04em;border:1px solid var(--acc);color:var(--acc);border-radius:999px;padding:0 10px;min-height:34px;white-space:nowrap}
.pill.low{border-color:var(--warn);color:var(--warn)}
.pill.zero{border-color:var(--bad);color:var(--bad)}
.chat-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 12px 8px;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:18px 18px}
.msg{display:flex;flex-wrap:wrap;margin:3px 0;animation:pop .2s ease both}
.msg.me{justify-content:flex-end}
.msg.first{margin-top:10px}
.bubble{max-width:86%;padding:9px 12px 6px;border-radius:16px;font-size:16.5px;line-height:1.4;word-wrap:break-word}
.btext{white-space:pre-wrap}
.them .bubble{background:var(--ink3);border-top-left-radius:5px;color:#EEF3F0}
.me .bubble{background:var(--acc);color:var(--acc-ink);border-top-right-radius:5px}
.msg.cont .bubble{border-radius:16px}
.time{display:block;text-align:right;font-size:11px;opacity:.55;margin-top:2px}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.typing-dots{display:inline-flex;gap:4px;padding:6px 2px}
.typing-dots i{width:7px;height:7px;border-radius:50%;background:#8A9A91;animation:dot 1.1s infinite ease-in-out}
.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.rate{flex-basis:100%;display:flex;gap:2px;margin:2px 0 0 2px}
.rate-btn{width:44px;height:36px;border-radius:10px;font-size:17px;opacity:.55;filter:grayscale(1)}
.rate-btn.on{opacity:1;filter:none;background:var(--ink3)}
.chat-note{text-align:center;font-size:13px;color:var(--muted);margin:10px auto;max-width:90%}
.chat-card{margin:10px 0 10px 0;max-width:92%;border-radius:14px;padding:14px;border:1px solid var(--line);background:var(--ink2);animation:pop .25s ease both}
.plan-card{border-color:#1D5B39;background:linear-gradient(160deg,#0F2A1C,var(--ink2))}
.pc-top{display:flex;align-items:center;gap:8px}
.pc-top .kicker{margin:0}
.pc-icon{width:22px;height:22px;border-radius:6px;background:var(--acc) center/15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304130A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.pc-title{display:block;font-size:17px;margin:8px 0 12px}
.hand-card{border-color:#33295A;background:#13111D}
.hc-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hand-card .fine{margin:0}
.err-card{border-color:#4A2A12;background:#1A120B}
.err-card p{margin-bottom:10px;color:var(--soft)}
.crisis-card{max-width:100%;border-color:#3B4A63;background:#111722;color:#E6ECF5}
.cc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cc-icon{flex:none;width:28px;height:28px;border-radius:50%;background:#2A3A55 center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9CCF0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E")}
.crisis-card p{font-size:16px;line-height:1.45}
.chat-foot{background:var(--ink2);border-top:1px solid var(--line);padding:8px 10px calc(var(--sab) + 6px)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.chips:empty{display:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;max-width:78%;border:1px solid #1D5B39;background:#0E2016;border-radius:18px;padding:9px 14px;min-height:44px;font-size:15px;font-weight:600;text-align:left;line-height:1.25}
.chip:active{background:var(--acc);color:var(--acc-ink)}
.composer{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;min-width:0;min-height:44px;max-height:140px;border-radius:22px;border:1px solid var(--line);background:var(--ink);font-size:16px;padding:11px 16px;outline:none;resize:none;line-height:1.35}
.composer textarea:focus{border-color:#4A5A51}
.send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center}
.send span{width:20px;height:20px;background:var(--acc-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20.5 21 12 3 3.5 3 10l12 2-12 2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20.5 21 12 3 3.5 3 10l12 2-12 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.disclaimer{text-align:center;font-size:11.5px;color:var(--faint);margin-top:6px}

/* Quiz */
.quiz{background:var(--ink)}
.quiz-top{display:flex;align-items:center;gap:12px;padding:calc(var(--sat) + 10px) 16px 10px 8px}
.close-x{flex:none;width:44px;height:44px;position:relative}
.close-x::before,.close-x::after{content:"";position:absolute;left:12px;top:21px;width:20px;height:2.5px;background:var(--muted);border-radius:2px;transform:rotate(45deg)}
.close-x::after{transform:rotate(-45deg)}
.quiz-dots{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.quiz-dots i{height:12px;border-radius:6px;background:var(--line);transition:background .3s}
.quiz-dots i.past{background:var(--acc)}
.quiz-dots i.now{background:#3C5A48}
.quiz-streak{display:flex;align-items:center;gap:4px;font-family:var(--cond);font-weight:900;font-size:22px;color:#FF9A1F}
.q-coach{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;margin-top:14px}
.q-text{font-size:32px;line-height:1.05;margin:12px 0 20px;outline:none}
.answers{display:grid;gap:10px}
.ans{display:flex;align-items:center;gap:14px;text-align:left;min-height:62px;padding:12px 16px;border-radius:16px;border:2px solid var(--line);border-bottom-width:4px;background:var(--ink2);font-size:17.5px;font-weight:600;transition:transform .1s,border-color .15s,background .15s}
.ans:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}
.ans-k{flex:none;width:30px;height:30px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--muted)}
.ans.picked{border-color:#4A5A51}
.ans.right{border-color:var(--acc);background:var(--accbg)}
.ans.right .ans-k{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.ans.wrong{border-color:var(--bad);background:var(--badbg);animation:shake .35s}
.ans.wrong .ans-k{background:var(--bad);border-color:var(--bad);color:#fff}
.ans:disabled:not(.right):not(.wrong){opacity:.55}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.q-feedback{margin:18px 0 calc(var(--sab) + 24px);padding:16px;border-radius:16px;background:var(--ink2);border:1px solid var(--line);animation:sheetUp .28s cubic-bezier(.2,.8,.2,1) both}
.q-feedback.ok{background:#0E2016;border-color:#1D5B39}
.q-feedback.no{background:#1C1010;border-color:#4A2020}
.fb-h{display:block;font-family:var(--cond);font-weight:900;font-size:24px;text-transform:uppercase;margin-bottom:6px}
.ok .fb-h{color:var(--acc)}
.no .fb-h{color:var(--bad)}
.q-feedback p{color:var(--soft)}
.q-feedback .btn-sm{margin-top:12px}
.xp-pop{position:absolute;left:50%;top:38%;transform:translateX(-50%);font-family:var(--cond);font-weight:900;font-size:44px;color:var(--acc);text-shadow:0 4px 24px rgba(43,214,123,.5);pointer-events:none;animation:xp 1.2s cubic-bezier(.2,.8,.2,1) both;z-index:9}
@keyframes xp{0%{opacity:0;transform:translate(-50%,20px) scale(.7)}25%{opacity:1;transform:translate(-50%,0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
.quiz-end{text-align:center;padding:30px 4px calc(var(--sab) + 24px)}
.big-flame{width:120px;height:120px;margin:0 auto;border-radius:36px;background:var(--ink3) center/80px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2373827A' d='M12 2c1 3.5 5 5.8 5 11a5 5 0 0 1-10 0c0-2.6 1.3-4.3 2.5-5.5.3 1.7 1.2 2.7 2.2 3.1C11 8 11.4 4.6 12 2z'/%3E%3C/svg%3E")}
.big-flame.lit{background-color:#2A1A08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF9A1F' d='M12 2c1 3.5 5 5.8 5 11a5 5 0 0 1-10 0c0-2.6 1.3-4.3 2.5-5.5.3 1.7 1.2 2.7 2.2 3.1C11 8 11.4 4.6 12 2z'/%3E%3Cpath fill='%23FFD23F' d='M12 12c.6 1.6 2.4 2.4 2.4 4.6a2.4 2.4 0 0 1-4.8 0c0-1.4.8-2.3 1.4-2.9.2.8.6 1.1 1 1.2-.3-1-.3-2 0-2.9z'/%3E%3C/svg%3E");animation:flick 1.6s ease-in-out infinite}
@keyframes flick{50%{transform:scale(1.05) rotate(-2deg)}}
.end-streak{font-family:var(--cond);font-weight:900;font-size:72px;line-height:1;margin-top:14px;color:#FF9A1F}
.quiz-end .kicker{justify-content:center;color:var(--muted)}
.quiz-end h2{margin:18px 0 8px}
.xp-total{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--acc);border:1px solid #1D5B39;border-radius:99px;padding:6px 12px}

/* Sheets */
.sheet-wrap{position:absolute;inset:0;z-index:20}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.62);animation:fadeIn .2s both}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--ink2);border-top-left-radius:22px;border-top-right-radius:22px;border:1px solid var(--line);border-bottom:0;
  padding:10px 20px calc(var(--sab) + 18px);max-height:92%;overflow-y:auto;animation:sheetUp .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.grabber{width:40px;height:5px;border-radius:3px;background:#3A4740;margin:0 auto 16px}
.sheet h2{font-size:30px;margin-bottom:8px;outline:none}
.sheet .muted{margin-bottom:6px}
.sheet input{margin-top:12px}
.sheet-icon{border-radius:15px;display:block;margin:0 auto 12px}
.sheet-av{display:flex;justify-content:center;margin-bottom:10px}
.lbl{display:block;margin-top:16px;font-size:14px;color:var(--muted)}
.plan-opt{display:block;width:100%;text-align:left;background:var(--ink3);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:12px;min-height:64px}
.plan-opt.best{border-color:var(--acc);background:#0E1F16}
.plan-r{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plan-n{font-family:var(--cond);font-weight:900;font-size:36px;line-height:1}
.plan-n.sm{font-size:26px}
.plan-n small{font-family:'Barlow',sans-serif;font-weight:500;font-size:14px;color:var(--muted)}
.plan-opt>small{display:block;color:var(--muted);font-size:14px;margin-top:6px;line-height:1.35}
.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--acc-ink);background:var(--acc);border-radius:4px;padding:2px 6px;margin-bottom:4px}
.steps{list-style:none;margin-top:16px;counter-reset:s}
.steps li{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:16px;counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:22px;font-family:var(--cond);font-weight:900;font-size:24px;color:var(--acc);text-align:center}
.sicon{flex:none;width:44px;height:44px;border-radius:10px;background:#fff center/24px no-repeat;color:#0A84FF;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.si-share{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A84FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M8 7l4-4 4 4'/%3E%3Cpath d='M8 11H6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2'/%3E%3C/svg%3E")}
.si-add{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
.picker .coach{min-height:64px}
.picker .coach b{flex:1}

/* Me */
.me-email{padding:0 4px 10px;font-size:15px;word-break:break-all}
.early{border-color:#1D5B39}
.usage{margin-top:4px}
.usage-n{font-family:var(--cond);font-weight:900;font-size:44px;line-height:1}
.row-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-weight:600}
.switch{flex:none;width:58px;height:34px;border-radius:17px;background:var(--line);position:relative;transition:background .2s}
.switch i{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;transition:transform .2s}
.switch[aria-checked="true"]{background:var(--acc)}
.switch[aria-checked="true"] i{transform:translateX(24px)}
.switch:disabled{opacity:.4}

/* Toast */
.toast{position:absolute;left:16px;right:16px;bottom:calc(var(--tabh) + var(--sab) + 14px);z-index:40;background:#E9F5EE;color:var(--ink);border-radius:12px;padding:12px 16px;font-weight:600;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:sheetUp .25s both}
.toast.out{opacity:0;transition:opacity .25s}

@media (min-width:600px){
  #app{max-width:480px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}