/* ==========================================================================
   quest.css — 需求評估任務 (/assess). The game console is a "terminal" surface,
   so it stays dark in both themes; the result card follows the page theme.
   ========================================================================== */
.quest .blk-body{max-width:1100px}
.q-head{margin-bottom:28px}
.q-eyebrow{font:500 12.5px/1.4 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.q-head h1{font-size:clamp(1.9rem,1.2rem + 3vw,3.2rem);font-weight:900;line-height:1.18;letter-spacing:-.01em;margin-bottom:16px}
.q-hl{color:var(--accent)}
.q-lead{font-size:16px;line-height:1.85;color:var(--fg-2);max-width:40em;text-wrap:pretty}

/* ---------- console ---------- */
.q-console{--c-bg:#0B1C2E;--c-panel:#0F2439;--c-line:#1C3652;--c-fg:#EAF3FA;--c-fg2:#B9CCDB;--c-muted:#8AA1B5;--c-accent:#3CC6F2;--c-ok:#4ADE80;--c-gold:#F5B942;
  position:relative;background:var(--c-bg);border:1px solid var(--c-line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;color:var(--c-fg2)}
.q-titlebar{display:flex;align-items:center;gap:12px;height:36px;padding:0 16px;border-bottom:1px solid var(--c-line);font:12px var(--font-mono);color:var(--c-muted)}
.q-titlebar .dots{display:flex;gap:6px}
.q-titlebar .dots i{width:10px;height:10px;border-radius:50%;background:#F87171}
.q-titlebar .dots i:nth-child(2){background:#FBBF24}
.q-titlebar .dots i:nth-child(3){background:#34D399}
.q-hud{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:12px 18px;border-bottom:1px dashed var(--c-line);font:600 12.5px var(--font-mono);color:var(--c-muted)}
.q-round b{color:var(--c-accent);font-size:15px}
.q-xp{display:flex;align-items:center;gap:10px;min-width:0}
.q-xpbar{flex:1;max-width:320px;height:12px;display:grid;grid-template-columns:repeat(20,1fr);gap:2px;padding:2px;background:#07121F;border:1px solid var(--c-line)}
.q-xpbar i{background:#132A43;transition:background .25s}
.q-xpbar i.on{background:var(--c-accent);box-shadow:0 0 6px rgba(60,198,242,.6)}
.q-xp b{color:var(--c-fg);min-width:2.5em;text-align:right}
.q-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.q-badge{font:600 11.5px var(--font-sans);color:#1B1300;background:var(--c-gold);border-radius:99px;padding:2px 9px;white-space:nowrap;animation:q-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes q-pop{from{transform:scale(.3);opacity:0}}

.q-screen{position:relative;height:min(56vh,500px);min-height:340px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--c-line) transparent}
.q-log{display:flex;flex-direction:column;gap:14px;padding:20px 18px}
.q-msg{display:flex;gap:10px;align-items:flex-start;max-width:92%;animation:q-rise .3s ease}
@keyframes q-rise{from{opacity:0;transform:translateY(6px)}}
.q-av{width:34px;height:34px;flex:none;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(60,198,242,.45)}
.q-av img{width:22px;height:22px}
.q-who{font:600 11.5px var(--font-mono);color:var(--c-accent);margin-bottom:4px}
.q-bubble{background:var(--c-panel);border:1px solid var(--c-line);border-radius:4px 14px 14px 14px;padding:10px 14px;color:var(--c-fg2);font:15px/1.75 var(--font-sans)}
.q-bubble .q-q{display:block;margin-top:6px;color:#fff;font-weight:700}
.q-msg.me{align-self:flex-end;flex-direction:row-reverse}
.q-msg.me .q-bubble{background:#0A74AE;border-color:#0A74AE;color:#fff;border-radius:14px 4px 14px 14px}
.q-sys{align-self:center;font:12px var(--font-mono);color:var(--c-muted);text-align:center}
.q-sys.ok{color:var(--c-ok)}
.q-sys.gold{color:var(--c-gold)}
.q-typing{display:inline-flex;gap:4px;vertical-align:middle;margin-left:6px}
.q-typing i{width:6px;height:6px;border-radius:50%;background:var(--c-accent);animation:q-dot 1s infinite}
.q-typing i:nth-child(2){animation-delay:.15s}
.q-typing i:nth-child(3){animation-delay:.3s}
@keyframes q-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.q-float{position:absolute;right:22px;top:14px;font:800 16px var(--font-mono);color:var(--c-ok);pointer-events:none;animation:q-float 1.1s ease forwards}
@keyframes q-float{from{opacity:0;transform:translateY(10px)}25%{opacity:1}to{opacity:0;transform:translateY(-26px)}}

/* start screen */
.q-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:20px;background:radial-gradient(60% 60% at 50% 45%,rgba(60,198,242,.12),transparent 70%),var(--c-bg)}
.q-start[hidden]{display:none}
.q-dog{width:88px;height:72px}
.q-dog svg{width:88px;height:72px;image-rendering:pixelated;animation:husky-swagger .5s ease-in-out infinite alternate}
.q-dog .legs-a{animation:husky-frame-a .28s steps(1) infinite}
.q-dog .legs-b{animation:husky-frame-b .28s steps(1) infinite}
.q-dog .tongue-a{animation:tongue-a .42s steps(1) infinite}
.q-dog .tongue-b{animation:tongue-b .42s steps(1) infinite}
.q-dog .tongue-c{animation:tongue-c .42s steps(1) infinite}
.q-insert{font:700 14px var(--font-mono);letter-spacing:.24em;color:var(--c-gold);animation:blink 1.1s steps(1) infinite}
.q-startbtn{font:800 17px var(--font-sans);letter-spacing:.06em;color:#04121D;background:var(--c-accent);border:0;border-radius:6px;padding:14px 30px;cursor:pointer;box-shadow:4px 4px 0 #0A5F8F;transition:transform .1s,box-shadow .1s}
.q-startbtn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #0A5F8F}
.q-startbtn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #0A5F8F}
.q-hint{font:12px var(--font-mono);color:var(--c-muted)}

/* choices + input */
.q-choices{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px 0;border-top:1px solid var(--c-line)}
.q-choices:empty{display:none}
.q-choice{font:600 14px var(--font-sans);color:var(--c-fg);background:transparent;border:1px solid var(--c-line);border-radius:10px;padding:8px 14px;cursor:pointer;transition:border-color .15s,background .15s;animation:q-rise .3s ease both}
.q-choice::before{content:"▸ ";color:var(--c-accent)}
.q-choice:hover{border-color:var(--c-accent);background:rgba(60,198,242,.1)}
.q-form{display:flex;align-items:center;gap:8px;padding:12px 18px 16px}
.q-choices:empty + .q-form{border-top:1px solid var(--c-line)}
.q-form .p{font:700 15px var(--font-mono);color:var(--c-ok)}
.q-form input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--c-line);background:#07121F;color:var(--c-fg);font:15px var(--font-sans);outline:none;transition:border-color .15s,box-shadow .15s}
.q-form input::placeholder{color:var(--c-muted)}
.q-form input:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(60,198,242,.15)}
.q-form input:disabled{opacity:.5}
.q-form button{height:46px;padding:0 18px;border:0;border-radius:10px;background:var(--c-accent);color:#04121D;font:700 14px var(--font-sans);cursor:pointer}
.q-form button:disabled{opacity:.4;cursor:default}

/* ---------- result card (page theme) ---------- */
.q-result{margin-top:30px}
.q-result[hidden]{display:none}
.q-card{--rar:var(--accent);position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--card-shadow);overflow:hidden;animation:q-card-in .6s cubic-bezier(.2,.9,.3,1.2)}
@keyframes q-card-in{from{opacity:0;transform:translateY(24px) rotateX(18deg) scale(.96)}}
.q-card.v-can{--rar:#F5B942}
.q-card.v-partial{--rar:var(--accent)}
.q-card.v-no{--rar:var(--muted)}
.q-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--rar)}
.q-card-top{display:grid;gap:14px;padding:26px 26px 22px;background:radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--rar) 14%,transparent),transparent 60%);border-bottom:1px solid var(--line-soft)}
.q-loot-label{font:700 12px var(--font-mono);letter-spacing:.2em;color:var(--rar)}
.q-card h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);font-weight:900;line-height:1.25}
.q-verdict{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--font-sans);padding:6px 14px;border-radius:99px;width:max-content;max-width:100%}
.q-verdict.can{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.q-verdict.partial{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.q-verdict.no{background:color-mix(in srgb,var(--pain) 12%,transparent);color:var(--pain)}
.q-vtext{font-size:16px;color:var(--fg);font-weight:600;line-height:1.6}
.q-stats{display:flex;flex-wrap:wrap;gap:10px 28px;font:13px var(--font-mono);color:var(--muted)}
.q-stats b{color:var(--fg);font-family:var(--font-sans);font-size:14px}
.q-stars{color:var(--rar);letter-spacing:2px;font-size:16px}
.q-stars .off{color:var(--line)}
.q-meter{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.q-meter i{width:14px;height:10px;background:var(--line)}
.q-meter i.on{background:var(--rar)}
.q-card-body{display:grid;gap:22px;padding:24px 26px 26px}
.q-sec h3{font:600 12.5px var(--font-mono);letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.q-sec p{font-size:15.5px;line-height:1.85;color:var(--fg-2)}
.q-fits{display:grid;gap:10px}
.q-fit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--editor);transition:border-color .15s,transform .15s}
.q-fit:hover{border-color:var(--accent-line);transform:translateY(-1px)}
.q-fit .t{font:600 11px var(--font-mono);padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.q-fit .t.sub{background:var(--data-soft);color:var(--data)}
.q-fit b{color:var(--fg);font-size:15.5px}
.q-fit .why{grid-column:2 / -1;font-size:14px;color:var(--fg-2);line-height:1.6}
.q-fit .go{color:var(--accent);font-size:14px;font-weight:600}
.q-risks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.q-risks li{display:flex;gap:10px;font-size:15px;line-height:1.6;color:var(--fg-2)}
.q-risks li::before{content:"⚠";color:var(--warn);flex:none}
.q-loot{font:600 14px var(--font-mono);color:var(--rar);text-align:center;padding-top:6px}
.q-actions{display:flex;flex-wrap:wrap;gap:10px;padding:0 26px 26px}
.q-lead{margin:0 26px 26px;padding:18px;border:1px dashed var(--accent-line);border-radius:12px;background:var(--accent-soft)}
.q-lead[hidden]{display:none}
.q-lead p{font-size:14.5px;color:var(--fg-2);margin-bottom:10px}
.q-lead form{display:flex;flex-wrap:wrap;gap:8px}
.q-lead input{flex:1 1 240px;min-width:0;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--editor);color:var(--fg);font:15px var(--font-sans);outline:none}
.q-lead input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.q-lead .msg{width:100%;font-size:14px;margin-top:6px}
.q-lead .msg.ok{color:var(--ok)}
.q-lead .msg.err{color:var(--pain)}
/* pixel confetti */
.q-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.q-confetti i{position:absolute;top:-10px;width:7px;height:7px;animation:q-fall 1.6s ease-in forwards}
@keyframes q-fall{to{transform:translateY(420px) rotate(260deg);opacity:0}}

@media (max-width:719px){
  .q-hud{grid-template-columns:auto minmax(0,1fr);gap:10px 14px}
  .q-badges{grid-column:1 / -1;justify-content:flex-start}
  .q-screen{height:min(58vh,480px)}
  .q-msg{max-width:100%}
  .q-card-top,.q-card-body{padding-left:18px;padding-right:18px}
  .q-actions{padding:0 18px 22px}
  .q-lead{margin:0 18px 22px}
  .q-fit{grid-template-columns:auto minmax(0,1fr)}
  .q-fit .go{grid-column:2}
}
/* hide the floating 小浪 launcher while the quest console/result is on screen (quest.js toggles body.quest-on);
   it would otherwise cover the send button. An already-open chat panel is left alone. */
.ide-body .fa-widget .fa-trigger{transition:opacity .2s,transform .2s}
.ide-body.quest-on .fa-widget[data-open="false"],
.ide-body.quest-on .fa-widget[data-open="false"] *{pointer-events:none}
.ide-body.quest-on .fa-widget[data-open="false"] .fa-trigger{opacity:0;transform:translateY(14px)}

@media (prefers-reduced-motion:reduce){
  .q-insert,.q-dog svg,.q-card,.q-msg,.q-choice,.q-badge{animation:none}
}