/* MarSpArk 设计语言层，最后加载。三个母题各管一摊：
   Mars  火星 · 目的地：轨道、航线、坐标读数 → 导航、加载、空状态、品牌标
   Spark 火种 · 行动：只有「被点燃」的东西才用火种色 → 主操作、指挥官自己的消息、当前位置、点击火花
   Ark   方舟 · 承载：舱体结构 → 面板对接入位、HUD 角标、遥测数字
   冷色是舱体，暖色是火。火种色只给动作和当前位置，不拿来装饰。动效全部尊重 prefers-reduced-motion。 */

:root{
  --spark-200:#ffd2b3;--spark-300:#ffb07a;--spark-400:#ff8a4c;--spark-500:#f2643a;--spark-600:#cf4a22;--spark-700:#a8361a;
  --spark-glow:rgb(242 100 58 / .45);--spark-soft:rgb(242 100 58 / .12);
  --orbit-line:color-mix(in srgb,var(--hull-ink,#141821) 12%,transparent);
  --ease-dock:cubic-bezier(.16,1,.3,1);--ease-ignite:cubic-bezier(.34,1.56,.64,1);
  --hud-tick:color-mix(in srgb,var(--spark-500) 85%,transparent);
  /* 指挥官的消息是火种 */
  --me:linear-gradient(135deg,var(--spark-600),var(--spark-700));--me-glow:rgb(207 74 34 / .28);
}
html[data-theme=dark]{--spark-glow:rgb(255 122 72 / .55);--spark-soft:rgb(255 122 72 / .14);--me-glow:rgb(242 100 58 / .32)}

/* ---------- 品牌：MarSpArk 字标 + 轨道标 ---------- */
html body #appShell .window-title{cursor:default;position:relative;font-weight:600;letter-spacing:.02em}
html body #appShell .window-title::before{background:none!important;width:30px;height:30px}
html body #appShell .window-title .mp-mark{position:absolute;left:0;top:50%;width:30px;height:30px;margin-top:-15px;pointer-events:none}
html body #appShell .window-title .mp-word b{font-weight:700;color:var(--spark-500);transition:text-shadow .4s var(--ease-dock)}
html body #appShell .window-title:hover .mp-word b{text-shadow:0 0 10px var(--spark-glow)}
.mp-mark .orbit{fill:none;stroke:var(--hull-mute,#7d8799);stroke-width:1.2;opacity:.75}
.mp-mark .planet{fill:var(--spark-500)}
.mp-mark .shade{fill:#000;opacity:.18}
.mp-mark .hull{fill:none;stroke:var(--hull-ink,#141821);stroke-width:1.6;stroke-linecap:round;opacity:.85}
.mp-mark .ember{fill:var(--spark-300);filter:drop-shadow(0 0 2px var(--spark-500))}
.mp-mark .ember-path{offset-path:path("M30.5 16a14.5 5.2 0 1 1 -29 0a14.5 5.2 0 1 1 29 0");animation:mp-orbit 18s linear infinite}
@keyframes mp-orbit{to{offset-distance:100%}}

/* 悬停字标：Mars / Spark / Ark 三条航线叠在同一个词上 */
.mp-etym{position:fixed;z-index:120;display:grid;grid-template-columns:auto auto;column-gap:18px;align-items:end;padding:14px 18px 12px 16px;border-radius:14px;background:var(--hud);border:1px solid var(--hud-line);box-shadow:var(--hud-shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:var(--n-800);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s var(--ease-dock),transform .35s var(--ease-dock)}
.mp-etym.on{opacity:1;transform:none}
.mp-etym .word{grid-column:1;position:relative;font:600 26px/1.1 var(--font-sans);letter-spacing:.06em;color:var(--n-900);white-space:nowrap}
.mp-etym .word span{display:inline-block}
.mp-etym .word .cap{color:var(--spark-500)}
.mp-etym .lanes{grid-column:1;grid-row:2;position:relative;height:66px;margin-top:4px}
.mp-etym .labels{grid-column:2;grid-row:2;margin-top:4px}
.mp-etym .lane{position:absolute;height:2px;border-radius:2px;transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease-dock)}
.mp-etym.on .lane{transform:scaleX(1)}
.mp-etym .lane::before,.mp-etym .lane::after{content:"";position:absolute;top:-3px;width:2px;height:8px;border-radius:1px;background:inherit}
.mp-etym .lane::before{left:0}.mp-etym .lane::after{right:0}
.mp-etym .labels i{display:flex;align-items:center;gap:8px;height:22px;font:500 12px var(--font-sans);font-style:normal;color:var(--n-600);white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .5s var(--ease-dock)}
.mp-etym.on .labels i{opacity:1;transform:none}
.mp-etym .labels i:nth-child(2){transition-delay:.08s}.mp-etym .labels i:nth-child(3){transition-delay:.16s}
.mp-etym .labels b{min-width:44px;font:600 11px var(--font-mono);letter-spacing:.06em}
.mp-etym .labels i:nth-child(1) b{color:var(--n-600)}.mp-etym .labels i:nth-child(2) b{color:var(--spark-500)}.mp-etym .labels i:nth-child(3) b{color:var(--p-500)}
.mp-etym .l-mars{top:10px;background:var(--n-500)}
.mp-etym .l-spark{top:32px;background:var(--spark-500);transition-delay:.08s}
.mp-etym .l-ark{top:54px;background:var(--p-500);transition-delay:.16s}

/* ---------- 导航：图标排在一条轨道上，当前位置是一颗火种 ---------- */
html body #appShell .sidebar::before{content:"";position:absolute;left:-14px;right:-14px;bottom:7px;height:1px;background:linear-gradient(90deg,transparent,var(--orbit-line) 12%,var(--orbit-line) 88%,transparent);pointer-events:none}
html body #appShell .rail-button[aria-current=true]::after{display:none!important}
html body #appShell .sidebar .rail-button[aria-current=true]{color:var(--spark-500)!important;filter:none!important}
html[data-theme=dark] body #appShell .sidebar .rail-button[aria-current=true]{color:var(--spark-400)!important}
.mp-navdot{position:absolute;bottom:4px;left:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--spark-400);box-shadow:0 0 0 2px color-mix(in srgb,var(--spark-500) 25%,transparent),0 0 12px 2px var(--spark-glow);pointer-events:none;transition:transform .7s var(--ease-dock);z-index:2}
.mp-navdot::after{content:"";position:absolute;top:2.5px;height:2px;right:3px;width:var(--trail,0px);border-radius:2px;background:linear-gradient(90deg,transparent,var(--spark-400));transition:width .5s var(--ease-dock)}
.mp-navdot.rev::after{right:auto;left:3px;background:linear-gradient(270deg,transparent,var(--spark-400))}

/* ---------- 主操作 = 点火 ---------- */
html body #appShell .send-button,html body #appShell .composer button[type=submit]{background:radial-gradient(circle at 35% 30%,var(--spark-400),var(--spark-600) 70%)!important;color:var(--on-accent)!important;box-shadow:0 4px 14px var(--me-glow);transition:transform .2s var(--ease-ignite),box-shadow .3s}
html body #appShell .send-button:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 6px 22px var(--spark-glow)}
html body #appShell .send-button:active{transform:scale(.92)}
html body #appShell .primary-action:not([hidden]){background:linear-gradient(135deg,var(--spark-600),var(--spark-700))!important;border-color:transparent!important;color:var(--on-accent)!important}
html body #appShell .primary-action:not([hidden]):hover{box-shadow:0 6px 18px var(--me-glow)!important}

/* 输入框获得焦点：一根引信沿着边缘慢慢烧 */
@property --fuse{syntax:"<angle>";inherits:false;initial-value:0deg}
html body #appShell .conversation>.composer-area{position:relative}
html body #appShell .conversation>.composer-area::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--fuse),transparent 0 62%,color-mix(in srgb,var(--spark-500) 40%,transparent) 78%,var(--spark-300) 84%,transparent 86% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
html body #appShell .conversation>.composer-area:focus-within::after{opacity:1;animation:mp-fuse 6s linear infinite}
@keyframes mp-fuse{to{--fuse:360deg}}

/* 指挥官的消息：发出去时亮一下 */
html body #appShell .user-message{color:var(--on-accent)!important}
html body #appShell .user-message.mp-ignite{animation:mp-ignite 1.1s var(--ease-dock)}
@keyframes mp-ignite{0%{box-shadow:0 0 0 0 var(--spark-glow),0 0 30px 6px var(--spark-glow);filter:brightness(1.35)}100%{box-shadow:0 0 0 14px transparent,0 10px 26px var(--me-glow);filter:none}}
.mp-comet{position:fixed;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--spark-200);box-shadow:0 0 6px 2px var(--spark-400),0 0 18px 6px var(--spark-glow);pointer-events:none;z-index:200}
.mp-comet-trail{position:fixed;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--spark-400);pointer-events:none;z-index:199;animation:mp-fade .5s linear forwards}
@keyframes mp-fade{to{opacity:0;transform:scale(.2)}}

/* ---------- Mars：头像外的轨道，回复先「计算航线」再对接入位 ---------- */
html body #appShell .identity{position:relative}
html body #appShell .identity .role-avatar{position:relative;z-index:1}
.mp-orbit-ring{position:absolute;left:50%;top:0;width:50px;height:50px;margin-left:-25px;margin-top:-7px;border-radius:50%;border:1px dashed var(--orbit-line);pointer-events:none;animation:mp-spin 40s linear infinite}
.mp-orbit-ring::after{content:"";position:absolute;top:-3px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--spark-400);box-shadow:0 0 8px var(--spark-glow)}
@keyframes mp-spin{to{transform:rotate(360deg)}}

html body #appShell .assistant-row.mp-plotting .message-content{opacity:0;transform:translateY(10px)}
html body #appShell .assistant-row.mp-plotting .mp-orbit-ring{animation-duration:2.4s;border-color:color-mix(in srgb,var(--spark-500) 45%,transparent)}
.mp-plot{display:flex;align-items:center;gap:10px;margin:10px 0 0 4px;z-index:2;font:500 12px var(--font-mono);letter-spacing:.06em;color:var(--n-500);position:absolute}
.mp-plot .o{position:relative;width:22px;height:22px;border-radius:50%;border:1px solid var(--orbit-line)}
.mp-plot .o i{position:absolute;inset:-1px;border-radius:50%;animation:mp-spin 1.1s linear infinite}
.mp-plot .o i::after{content:"";position:absolute;top:-2.5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--spark-400);box-shadow:0 0 6px var(--spark-glow)}
.mp-plot .o i:nth-child(2){animation-duration:1.7s;opacity:.55}
.mp-plot .o i:nth-child(3){animation-duration:2.6s;opacity:.3}
html body #appShell .assistant-row.mp-arrive .message-content{animation:mp-dock .7s var(--ease-dock) backwards}
html body #appShell .assistant-row.mp-arrive .message-content>*:first-child{position:relative}
@keyframes mp-dock{from{opacity:0;transform:translateY(12px) scale(.985);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
/* 对接时一道扫描线从上到下 */
.mp-scan{position:absolute;left:0;right:0;top:0;height:40px;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--spark-400) 16%,transparent) 70%,color-mix(in srgb,var(--spark-300) 70%,transparent) 98%,transparent);animation:mp-scan .9s var(--ease-dock) forwards;z-index:3;border-radius:inherit}
@keyframes mp-scan{from{transform:translateY(-40px);opacity:1}85%{opacity:1}to{transform:translateY(var(--h,200px));opacity:0}}

/* ---------- Ark：面板对接、HUD 角标 ---------- */
html body #appShell .interaction-page.mp-docking{animation:mp-dock-side .75s var(--ease-dock) backwards}
html body #appShell .interaction-page.mp-docking.rev{animation-name:mp-dock-side-rev}
@keyframes mp-dock-side{from{opacity:0;transform:translateX(28px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mp-dock-side-rev{from{opacity:0;transform:translateX(-28px) scale(.98)}to{opacity:1;transform:none}}
#sceneDetails.mp-docking{animation:mp-dock .6s var(--ease-dock) backwards}

/* 角标：四个折角，悬停/选中时从外向内锁定 */
.mp-ticks{position:relative}
.mp-ticks::after{content:"";position:absolute;inset:-5px;pointer-events:none;border-radius:4px;opacity:0;transform:scale(1.04);transition:opacity .25s,transform .45s var(--ease-dock);
  background:
   linear-gradient(var(--hud-tick),var(--hud-tick)) left top/10px 1.5px,linear-gradient(var(--hud-tick),var(--hud-tick)) left top/1.5px 10px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) right top/10px 1.5px,linear-gradient(var(--hud-tick),var(--hud-tick)) right top/1.5px 10px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) left bottom/10px 1.5px,linear-gradient(var(--hud-tick),var(--hud-tick)) left bottom/1.5px 10px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) right bottom/10px 1.5px,linear-gradient(var(--hud-tick),var(--hud-tick)) right bottom/1.5px 10px;background-repeat:no-repeat}
.mp-ticks:hover::after,.mp-ticks:focus-within::after,.mp-ticks.mp-locked::after{opacity:1;transform:none}

/* 场景页手机热区：瞄准框 */
html body #appShell .scene-region{border-color:transparent!important;box-shadow:none!important;border-radius:3px!important;transition:background-color .25s}
html body #appShell .scene-region::after{content:"";position:absolute;inset:-3px;pointer-events:none;opacity:0;transform:scale(1.12);transition:opacity .2s,transform .4s var(--ease-dock);
  background:
   linear-gradient(var(--hud-tick),var(--hud-tick)) left top/12px 2px,linear-gradient(var(--hud-tick),var(--hud-tick)) left top/2px 12px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) right top/12px 2px,linear-gradient(var(--hud-tick),var(--hud-tick)) right top/2px 12px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) left bottom/12px 2px,linear-gradient(var(--hud-tick),var(--hud-tick)) left bottom/2px 12px,
   linear-gradient(var(--hud-tick),var(--hud-tick)) right bottom/12px 2px,linear-gradient(var(--hud-tick),var(--hud-tick)) right bottom/2px 12px;background-repeat:no-repeat}
html body #appShell .scene-region:hover::after,html body #appShell .scene-region:focus-visible::after{opacity:1;transform:none}
html body #appShell .scene-region:hover{background:color-mix(in srgb,var(--spark-500) 8%,transparent)!important}
html body #appShell .scene-region.is-selected{background:color-mix(in srgb,var(--spark-500) 12%,transparent)!important}
html body #appShell .scene-region.is-selected::after{opacity:1;transform:none;animation:mp-lock .5s var(--ease-ignite)}
@keyframes mp-lock{from{transform:scale(1.35);opacity:0}}

/* 卡片：鼠标处有一团火光贴着边缘走 */
.mp-glow{position:relative;isolation:isolate}
.mp-glow>.mp-glow-layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;opacity:0;transition:opacity .35s;padding:1px;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--spark-400) 75%,transparent),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mp-glow:hover>.mp-glow-layer{opacity:1}

/* 遥测数字：等宽数位，滚动时不抖 */
html body #appShell .segment-metrics strong,html body #appShell .user-pool strong,html body #appShell .center-card strong,html body #appShell .scene-metrics strong,html body #appShell .detail-metrics strong{font-variant-numeric:tabular-nums}

/* 运行中：火种在烧，绿点会呼吸 */
html body #appShell .segment-status::before{animation:mp-breathe 2.8s ease-in-out infinite}
@keyframes mp-breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--g-500) 50%,transparent)}50%{box-shadow:0 0 0 4px transparent}}

/* ---------- 还没开拓的页面：未抵达的星域 ---------- */
html body #appShell .page-placeholder{position:relative;gap:22px;letter-spacing:.3em}
html body #appShell .page-placeholder svg{position:relative;z-index:1;width:34px;height:34px;color:var(--n-400)!important}
html body #appShell .page-placeholder::before{content:"";position:absolute;left:50%;top:-43px;width:120px;height:120px;margin-left:-60px;border-radius:50%;border:1px dashed var(--orbit-line);animation:mp-spin 60s linear infinite}
html body #appShell .page-placeholder::after{content:"航线规划中 · 尚未抵达";font:500 11px var(--font-mono);letter-spacing:.18em;color:var(--n-400);margin-top:-8px}
html[lang=en] body #appShell .page-placeholder::after{content:"COURSE PLOTTED · NOT YET LANDED"}

/* ---------- 点击火花 & 星星之火 ---------- */
.mp-sparks{position:fixed;inset:0;pointer-events:none;z-index:210}
.mp-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;-webkit-mask-image:linear-gradient(to top,#000 0,#000 30%,transparent 75%);mask-image:linear-gradient(to top,#000 0,#000 30%,transparent 75%)}
.mp-embers i{position:absolute;bottom:-6px;width:3px;height:3px;border-radius:50%;background:var(--spark-300);box-shadow:0 0 6px 1px var(--spark-glow);opacity:0;animation:mp-rise var(--d,34s) linear var(--delay,0s) infinite}
@keyframes mp-rise{0%{opacity:0;transform:translate(0,0)}10%{opacity:.75}60%{opacity:.5}100%{opacity:0;transform:translate(var(--dx,20px),-62vh)}}
html[data-theme=light] .mp-embers i{background:var(--spark-500);box-shadow:0 0 5px var(--spark-glow)}

/* ---------- 启航序列（每个会话一次） ---------- */
.mp-boot{position:fixed;inset:0;z-index:500;pointer-events:none;display:grid;place-items:center;background:radial-gradient(900px 600px at 50% 55%,#1a1210 0,#0b0a10 55%,#05060a 100%);color:#f3eee9;clip-path:circle(150% at 50% 50%);transition:clip-path .9s var(--ease-dock),opacity .5s .5s}
.mp-boot.open{clip-path:circle(0% at 50% 46%);opacity:0}
.mp-boot .stage{display:flex;flex-direction:column;align-items:center;gap:22px;transform:translateY(-4%)}
.mp-boot svg{width:132px;height:132px;overflow:visible}
.mp-boot .orbit{fill:none;stroke:rgb(243 238 233 / .45);stroke-width:.6;stroke-dasharray:100;stroke-dashoffset:100;animation:mp-draw 1s .1s var(--ease-dock) forwards}
.mp-boot .planet{fill:var(--spark-500);transform-origin:16px 16px;transform:scale(0);animation:mp-pop .7s .35s var(--ease-ignite) forwards}
.mp-boot .shade{fill:#000;opacity:.25;transform-origin:16px 16px;transform:scale(0);animation:mp-pop .7s .35s var(--ease-ignite) forwards}
.mp-boot .hull{fill:none;stroke:#f3eee9;stroke-width:.9;stroke-linecap:round;stroke-dasharray:30;stroke-dashoffset:30;animation:mp-draw .8s .65s var(--ease-dock) forwards}
.mp-boot .ember{fill:var(--spark-200);filter:drop-shadow(0 0 1.5px var(--spark-400)) drop-shadow(0 0 4px var(--spark-500));offset-path:path("M30.5 16a14.5 5.2 0 1 1 -29 0a14.5 5.2 0 1 1 29 0");offset-distance:0%;opacity:0;animation:mp-boot-ember 1.4s .55s cubic-bezier(.45,0,.2,1) forwards}
@keyframes mp-boot-ember{0%{opacity:0;offset-distance:0%}12%{opacity:1}100%{opacity:1;offset-distance:100%}}
@keyframes mp-draw{to{stroke-dashoffset:0}}
@keyframes mp-pop{to{transform:scale(1)}}
.mp-boot .word{font:600 30px/1 var(--font-sans);letter-spacing:.32em;margin-right:-.32em;display:flex}
.mp-boot .word span{opacity:0;transform:translateY(8px);animation:mp-letter .6s var(--ease-dock) forwards;animation-delay:calc(.75s + var(--i) * .05s)}
.mp-boot .word .cap{color:var(--spark-400);animation-name:mp-letter,mp-cap;animation-duration:.6s,1.2s;animation-delay:calc(.75s + var(--i) * .05s),calc(1.2s + var(--i) * .05s)}
@keyframes mp-letter{to{opacity:1;transform:none}}
@keyframes mp-cap{0%,100%{text-shadow:none}40%{text-shadow:0 0 14px var(--spark-500),0 0 30px var(--spark-500)}}
.mp-boot .tele{font:500 11px/1.9 var(--font-mono);letter-spacing:.14em;color:rgb(243 238 233 / .55);min-width:280px}
.mp-boot .tele div{display:flex;gap:8px;opacity:0;animation:mp-letter .4s var(--ease-dock) forwards}
.mp-boot .tele div::after{content:"";order:1;flex:1;border-bottom:1px dotted rgb(243 238 233 / .22);margin-bottom:6px}
.mp-boot .tele b{order:2;font-weight:600;color:var(--spark-300)}
.mp-boot .tele div:nth-child(1){animation-delay:1.05s}.mp-boot .tele div:nth-child(2){animation-delay:1.25s}.mp-boot .tele div:nth-child(3){animation-delay:1.45s}
.mp-boot .skip{position:absolute;bottom:28px;font:500 11px var(--font-mono);letter-spacing:.2em;color:rgb(243 238 233 / .3)}
/* 启航后面板依次入位 */
html.mp-booting body #appShell .interaction-area,html.mp-booting body #appShell .conversation,html.mp-booting body #appShell .window-bar{opacity:0}
html.mp-landing body #appShell .window-bar{animation:mp-fall .8s var(--ease-dock) backwards}
html.mp-landing body #appShell .interaction-area{animation:mp-dock-side-rev .9s .1s var(--ease-dock) backwards}
html.mp-landing body #appShell .conversation{animation:mp-dock-side .9s .2s var(--ease-dock) backwards}
@keyframes mp-fall{from{opacity:0;transform:translateY(-12px)}}

/* 欢迎语逐字落下 */
#greeting .mp-ch{opacity:0;animation:mp-letter .35s var(--ease-dock) forwards}

@media (prefers-reduced-motion:reduce){
  .mp-mark .ember-path,.mp-orbit-ring,.mp-embers,.mp-comet,.mp-comet-trail,.mp-boot{animation:none!important;display:none!important}
  html body #appShell .conversation>.composer-area:focus-within::after{animation:none}
  html body #appShell .interaction-page.mp-docking,html body #appShell .assistant-row.mp-arrive .message-content,#sceneDetails.mp-docking,html body #appShell .segment-status::before,html body #appShell .page-placeholder::before{animation:none!important}
  .mp-navdot{transition:none}
}