/* 首页 · Apollo（阿珀）语音助手：全屏有机生命体 + 字幕 + 极简控件 */
:root{
  --jv-bg:#02060b; --jv-cyan:#49c6ff; --jv-cyan-2:#9fe0ff; --jv-amber:#f3c27a;
  --jv-text:#e8f5ff; --jv-muted:#7f9ab0; --jv-dim:#71899b; --jv-line:rgba(73,198,255,.22);
  --mono:"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
body.home{background:var(--jv-bg);color:var(--jv-text);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* 导航：首页只留右上角一个淡淡的菜单图标，点开才出现各页面入口 */
.home nav{background:none;z-index:50}
.home nav .wrap{justify-content:flex-end;height:60px}
.home .menu{display:none}
.home .nav-toggle{display:inline-flex;width:40px;height:40px;border:0;background:transparent;color:rgba(232,245,255,.5);transition:color .2s}
.home .nav-toggle:hover,.home nav.open .nav-toggle{color:#fff}
.home .nav-toggle:focus{outline:none}
.home .nav-toggle:focus-visible{outline:1px solid rgba(73,198,255,.5);outline-offset:2px;border-radius:10px}
.home nav.open .menu{display:grid;position:absolute;top:56px;right:16px;left:auto;width:min(300px,calc(100vw - 32px));grid-template-columns:1fr 1fr;gap:6px;padding:10px;
  border-radius:16px;background:rgba(4,12,20,.92);backdrop-filter:blur(12px);border:1px solid var(--jv-line);box-shadow:0 16px 40px rgba(0,0,0,.5);color:var(--jv-text);font-size:14px}
.home nav.open .menu a{padding:10px 12px;border-radius:10px;background:rgba(73,198,255,.06)}
.home nav.open .menu a:hover{background:rgba(73,198,255,.14);color:#fff}
.home nav.open .menu a[href="/offer/"]{grid-column:1/-1;text-align:center;color:var(--jv-amber);background:rgba(243,194,122,.08)}

/* 背景：深海一样的暗蓝，四周压暗 */
.jv::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(10,70,140,.22),transparent 70%),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.6)),var(--jv-bg)}
/* 生命体画布铺满屏幕：在背景之上、文字之下 */
.jv-orb{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}

.jv{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;width:100%;padding:56px 16px 0;min-height:0}
.jv-core{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:820px;padding:0;min-height:0}
.jv-stage{position:relative;flex:1 1 auto;width:100%;min-height:280px}
.jv-orb-btn{position:absolute;left:50%;top:50%;width:min(58%,52vh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:transparent;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.jv-orb-btn:focus-visible{outline:1px solid rgba(73,198,255,.5);outline-offset:6px}
.jv-orb-btn{cursor:grab;touch-action:none}
.jv-orb-btn.is-held{cursor:grabbing}
.jv-presence{display:flex;align-items:center;gap:8px;color:#bbd6e6;font-size:12px;letter-spacing:.06em;min-height:20px;margin-top:4px}
.jv-life-dot{width:5px;height:5px;border-radius:50%;background:#7be4df;box-shadow:0 0 8px rgba(123,228,223,.4)}
.jv-gesture{font-size:11px;color:#718a9b;letter-spacing:.08em;margin:6px 0 12px}
.jv[data-state="listen"] .jv-life-dot{background:#8de9f0}
.jv[data-state="think"] .jv-life-dot,.jv[data-state="search"] .jv-life-dot{background:#b4a1f3}
.jv[data-state="speak"] .jv-life-dot{background:#f3c27a}

@keyframes jvBlink{50%{opacity:.35}}

/* 字幕：你说的一行小字，Apollo 的回答像电影字幕 */
.jv-cap{width:100%;max-width:700px;height:132px;margin:4px 0 6px;text-align:center;display:flex;flex-direction:column;align-items:center}
.jv-you{min-height:22px;font-size:14px;line-height:1.5;color:#86a9c1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s}
.jv-you.live{color:#fff}
.jv-you.note{color:var(--jv-amber);animation:jvIn .3s ease-out}
.jv-say{flex:1;width:100%;overflow-y:auto;margin-top:6px;scrollbar-width:none;overscroll-behavior:contain}
.jv-say::-webkit-scrollbar{display:none}
.jv-say .tx{font-size:clamp(17px,2vw,20px);line-height:1.6;color:#f2faff;text-shadow:0 0 18px rgba(73,198,255,.28);animation:jvIn .35s ease-out}
.jv-say .tw p+p{margin-top:2px}
.jv-say .err{color:var(--jv-amber)}
@keyframes jvIn{from{opacity:0;transform:translateY(6px)}}
.jv-say .typing .dots{display:inline-flex;gap:6px;padding-top:12px}
.jv-say .typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--jv-cyan);animation:jvDot 1s infinite}
.jv-say .typing .dots i:nth-child(2){animation-delay:.15s}.jv-say .typing .dots i:nth-child(3){animation-delay:.3s}
.jv-say em{display:block;font-style:normal;font-size:12px;color:var(--jv-muted);margin-top:4px}
@keyframes jvDot{50%{opacity:.2;transform:translateY(-3px)}}
.jv-say .rp,.jv-say .retry{font:inherit;font-size:12px;margin-top:6px;padding:2px 10px;border-radius:999px;border:1px solid var(--jv-line);background:transparent;color:var(--jv-cyan-2);cursor:pointer;text-shadow:none}
.jv-say .rp:hover,.jv-say .retry:hover{border-color:var(--jv-cyan);color:#fff}
.jv-say .rp.hot{border-color:var(--orange);color:#ffd9a0;animation:jvBlink 1.2s 3}
/* 查过资料：来源链接 */
.jv-say .src{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.jv-say .src a{font-size:12px;line-height:1;padding:5px 10px;border-radius:999px;border:1px solid rgba(243,194,122,.32);color:#f3d6a8;background:rgba(40,24,6,.35);text-shadow:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:border-color .2s,color .2s}
.jv-say .src a:hover{border-color:var(--jv-amber);color:#fff}


/* 控件：唤醒开关 · 大话筒 · 小输入框 · 出声开关 */
.jv-ctrl{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 0 10px}
.jv-ctrl button{-webkit-tap-highlight-color:transparent;cursor:pointer}
.jv-mic{flex:none;width:64px;height:64px;border-radius:50%;border:0;display:grid;place-items:center;color:#021220;
  background:radial-gradient(circle at 50% 35%,#8fe2ff,#0a84e0 72%);box-shadow:0 0 26px rgba(73,198,255,.5),0 0 0 6px rgba(73,198,255,.08);transition:transform .2s,box-shadow .2s}
.jv-mic svg{width:24px;height:24px}
.jv-mic:hover{transform:scale(1.06);box-shadow:0 0 36px rgba(73,198,255,.75),0 0 0 8px rgba(73,198,255,.1)}
.jv-mic[aria-pressed="true"]{background:radial-gradient(circle at 50% 35%,#ffe3b4,#ed8d23 72%);animation:jvRing 1.3s infinite}
@keyframes jvRing{0%{box-shadow:0 0 0 0 rgba(237,141,35,.55)}100%{box-shadow:0 0 0 18px rgba(237,141,35,0)}}
.jv-type{display:flex;align-items:center;width:150px;height:40px;border-radius:999px;border:1px solid var(--jv-line);background:rgba(4,14,24,.55);backdrop-filter:blur(8px);transition:width .3s ease,border-color .2s}
.jv-type:focus-within{width:min(320px,52vw);border-color:rgba(73,198,255,.55)}
.jv-type input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:0;color:#f2faff;font:inherit;font-size:16px;padding:0 4px 0 16px}
.jv-type input::placeholder{color:#5f7b90}
.jv-type button{display:none;place-items:center;width:30px;height:30px;margin-right:5px;border-radius:50%;border:0;background:var(--jv-cyan);color:#021220;flex:none}
.jv-type button svg{width:16px;height:16px}
.jv-type input:not(:placeholder-shown)+button{display:grid}
.jv-sound,.jv-wake{flex:none;height:40px;border-radius:999px;border:1px solid var(--jv-line);background:rgba(4,14,24,.55);color:var(--jv-muted);display:inline-flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s}
.jv-sound{width:40px}
.jv-sound svg{width:18px;height:18px}
.jv-sound .off{display:none}
.jv-sound[aria-pressed="false"] .on{display:none}
.jv-sound[aria-pressed="false"] .off{display:block}
.jv-sound:hover,.jv-wake:hover{color:#fff;border-color:var(--jv-cyan)}
.jv-wake{gap:7px;padding:0 13px 0 9px;font:500 12px/1 var(--sans)}
.jv-wake i{width:24px;height:14px;border-radius:999px;background:rgba(127,154,176,.35);position:relative;transition:background .2s}
.jv-wake i::after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#cfe6f6;transition:transform .2s}
.jv-wake[aria-pressed="true"]{color:var(--jv-cyan-2);border-color:rgba(73,198,255,.5)}
.jv-wake[aria-pressed="true"] i{background:var(--jv-cyan)}
.jv-wake[aria-pressed="true"] i::after{transform:translateX(10px);background:#fff}
.jv-wake[hidden]{display:none}
.jv-noscript{margin-top:12px;font-size:14px;color:var(--jv-amber);text-align:center}
.jv-noscript a{text-decoration:underline}

.jv-foot{position:relative;z-index:1;background:transparent;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;padding:2px 16px calc(10px + env(safe-area-inset-bottom));font-size:11px;color:var(--jv-dim);text-align:center}
.jv-foot a:hover{color:var(--jv-cyan-2)}
.jv-foot{opacity:.38}

@media(max-width:640px){
  .jv{padding-top:52px}
  .jv-stage{min-height:240px}
  .jv-cap{height:120px;margin-top:8px}
  .jv-say .tx{font-size:17px}
  .jv-ctrl{gap:9px}
  .jv-mic{width:58px;height:58px}
  .jv-type{width:120px}
  .jv-type:focus-within{width:min(260px,64vw)}
  .jv-ctrl:has(.jv-type:focus-within) .jv-wake{display:none}
}
@media(max-height:620px){.jv-cap{height:96px}.jv-stage{min-height:200px}}
@media(max-width:380px){
  .jv-ctrl{width:100%;gap:7px}
  .jv-type{flex:1;width:auto;min-width:0;max-width:180px}
  .jv-wake{padding-right:9px;padding-left:7px;gap:5px}
}
@media(prefers-reduced-motion:reduce){
  .jv-say .tx,.jv-mic[aria-pressed="true"],.jv-you.note{animation:none!important}
}

/* ===== 打开站内页面（2026-10-17）：页面在上层框里打开，Apollo 缩小后直接浮在页面上（没有底板），对话不断 ===== */
:root{--ap-w:clamp(150px,23vw,204px);--ap-h:calc(var(--ap-w)*1.42);--ap-right:max(4px,env(safe-area-inset-right));--ap-bottom:calc(2px + env(safe-area-inset-bottom))}
.ap-page{position:fixed;inset:0;z-index:40;background:#f6f3ec;opacity:0;transform:translateY(28px) scale(.985);transform-origin:50% 100%;
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.ap-page.show{opacity:1;transform:none}
.ap-page.hide{opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .45s ease;pointer-events:none}
.ap-page iframe{display:block;width:100%;height:100%;border:0;background:transparent}
body.apollo-page #nav,body.apollo-page .jv-foot{visibility:hidden;pointer-events:none}
body.apollo-page .jv-core{z-index:auto}
/* 小水母：只有本体、粒子和说话时的水波，直接飘在页面上；边缘柔和淡出，不会被画布切出硬边。
   贴着身体的一层淡影让它在浅色页面上也立得住；听你说话时泛青光，它说话时泛琥珀光。点它照样开始 / 结束语音，摸它、拖它都有反应 */
body.apollo-page .jv-stage{position:fixed;right:var(--ap-right);bottom:var(--ap-bottom);width:var(--ap-w);height:var(--ap-h);min-height:0;flex:none;z-index:61;animation:apFloat 7s ease-in-out infinite}
body.apollo-page .jv-orb-btn{left:50%;top:38%;width:60%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%)}
body.apollo-page .jv-orb{inset:auto var(--ap-right) var(--ap-bottom) auto;width:var(--ap-w);height:var(--ap-h);z-index:62;animation:apFloat 7s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 70%,transparent 100%);
  filter:drop-shadow(0 6px 10px rgba(6,26,60,.22));transition:filter .5s ease}
body.apollo-page[data-ap-state="listen"] .jv-orb{filter:drop-shadow(0 0 9px rgba(73,198,255,.55)) drop-shadow(0 6px 10px rgba(6,26,60,.2))}
body.apollo-page[data-ap-state="think"] .jv-orb,body.apollo-page[data-ap-state="search"] .jv-orb{filter:drop-shadow(0 0 9px rgba(180,161,243,.45)) drop-shadow(0 6px 10px rgba(6,26,60,.2))}
body.apollo-page[data-ap-state="speak"] .jv-orb{filter:drop-shadow(0 0 10px rgba(243,194,122,.55)) drop-shadow(0 6px 10px rgba(6,26,60,.2))}
body.apollo-page.no-life-mini .jv-orb{display:none}
@keyframes apFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
/* 小字幕：看页面时在水母旁边轻轻显示你说的、Apollo 说的，几秒后淡出 */
.ap-caption{position:fixed;z-index:62;right:calc(var(--ap-right) + var(--ap-w)*.82);bottom:calc(var(--ap-bottom) + var(--ap-h)*.5);max-width:min(62vw,340px);
  padding:8px 12px;border-radius:14px 14px 4px 14px;background:rgba(4,14,26,.88);color:#e8f5ff;font-size:13px;line-height:1.55;
  border:1px solid rgba(73,198,255,.2);box-shadow:0 8px 24px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ap-caption.show{opacity:1;transform:none}
.ap-caption[data-who="you"]{color:#9fc4dc}
@media (max-width:520px){.ap-caption{max-width:calc(100vw - var(--ap-w) - 24px)}}
@media (prefers-reduced-motion:reduce){body.apollo-page .jv-stage,body.apollo-page .jv-orb{animation:none}.ap-page{transition:opacity .2s}}
/* OpenDots 待办（2026-10-19）：只有在这个浏览器登录过 OpenDots 的主人看得到 */
.home .nav-toggle{position:relative}
.ap-dots-badge{position:absolute;top:5px;right:3px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#f3c27a;color:#1a1206;font:700 9px/15px -apple-system,BlinkMacSystemFont,sans-serif;text-align:center;box-shadow:0 0 0 2px #02060b;pointer-events:none}
.home nav.open .menu a.ap-dots-link{grid-column:1/-1;text-align:center;color:#d3f3a2;background:rgba(211,243,162,.08)}

/* OpenDots 卡片：等确认 / 已交出去（可撤回）/ 做完了（2026-10-19） */
.ap-dot-card{position:fixed;z-index:63;left:50%;bottom:calc(52px + env(safe-area-inset-bottom));width:max-content;max-width:min(92vw,440px);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 14px;padding:11px 12px 11px 16px;border-radius:16px;
  background:rgba(4,14,26,.9);color:#e8f5ff;border:1px solid rgba(73,198,255,.22);box-shadow:0 14px 40px rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:13px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  opacity:0;transform:translate(-50%,10px);transition:opacity .28s,transform .28s;pointer-events:none}
.ap-dot-card.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ap-dot-label{grid-column:1;font-size:11px;letter-spacing:.04em;color:#8fd3ff}
.ap-dot-text{grid-column:1;color:#e8f5ff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ap-dot-actions{grid-column:2;grid-row:1/span 2;display:flex;gap:6px}
.ap-dot-actions button{appearance:none;border:1px solid rgba(232,245,255,.22);background:transparent;color:#e8f5ff;border-radius:999px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.ap-dot-actions button.primary{background:#f3c27a;border-color:#f3c27a;color:#1a1206;font-weight:600}
.ap-dot-actions button:focus-visible{outline:2px solid #8fd3ff;outline-offset:2px}
.ap-dot-card[data-tone="pending"]{border-color:rgba(243,194,122,.55)}
.ap-dot-card[data-tone="pending"] .ap-dot-label{color:#f3c27a}
.ap-dot-card[data-tone="ok"] .ap-dot-label{color:#d3f3a2}
.ap-dot-card[data-tone="error"]{border-color:rgba(255,138,128,.45)}
.ap-dot-card[data-tone="error"] .ap-dot-label{color:#ffb4a8}
body.apollo-page .ap-dot-card{left:auto;right:calc(var(--ap-right) + var(--ap-w)*.82);bottom:calc(var(--ap-bottom) + 6px);transform:translateY(10px)}
body.apollo-page .ap-dot-card.show{transform:none}
@media (max-width:520px){.ap-dot-card{grid-template-columns:1fr}.ap-dot-actions{grid-column:1;grid-row:auto;margin-top:6px}
  body.apollo-page .ap-dot-card{right:12px;left:12px;max-width:none;bottom:calc(var(--ap-bottom) + var(--ap-h)*.9)}}
@media (prefers-reduced-motion:reduce){.ap-dot-card{transition:opacity .2s}}