/* 舷窗皮肤：舱壁（标题栏与外框）/ 玻璃（内容区）/ 窗外（舷窗）/ HUD（面板）。
   html[data-theme=light|dark] 由 skin.js 按「跟随系统 / 浅色 / 深色」设定；html[data-porthole=on|off] 控制对话区舷窗。最后加载。 */

:root{--on-accent:#fff;
  --hull:linear-gradient(180deg,#f4f5f7,#e7e9ed);--hull-ink:#141821;--hull-mute:#5d6576;
  --field:linear-gradient(162deg,#f8fafd 0%,#f1f5fb 55%,#e9effa 100%);
  --tint:rgba(255,226,206,.35);
  --glass-edge:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 2px 0 #fff,inset 0 0 90px rgba(40,60,110,.10);
  --sheen:rgba(255,255,255,.35);
  --hud:rgba(255,255,255,.86);--hud-line:#fff;--hud-shadow:0 1px 2px rgba(10,20,40,.06),0 18px 48px rgba(10,20,40,.10);
  --me:linear-gradient(135deg,#2f80ff,#1557d6);--me-glow:rgba(26,115,255,.30);
}

/* ---------- 深色：中性色与色阶整体重映射，所有页面（含编辑器）一起变深 ---------- */
html[data-theme=dark]{color-scheme:dark;
  --n-0:#121620;--n-25:#141925;--n-50:#171c28;--n-100:#1b2130;--n-150:#212839;--n-200:#283043;--n-250:#313a4f;
  --n-300:#3b455c;--n-400:#6b7690;--n-500:#a3acbe;--n-600:#bfc7d4;--n-700:#d3d9e3;--n-800:#e0e5ec;--n-900:#f0f3f7;
  --p-25:#141b2e;--p-50:#162039;--p-100:#1b2a4d;--p-200:#24396b;--p-300:#34559c;--p-400:#4e78d8;--p-500:#5d8bff;--p-600:#4f7dff;--p-700:#86a8ff;--p-800:#afc6ff;
  --g-50:#0f261d;--g-100:#133224;--g-300:#2a8a5d;--g-500:#34c483;--g-600:#43d391;--g-700:#73e3ac;--g-800:#a1efc8;
  --a-50:#2a200d;--a-100:#3a2b10;--a-200:#4f3a14;--a-300:#e0a83a;--a-500:#f0a52a;--a-600:#f5b041;--a-700:#f7c26a;--a-800:#f9d38f;--a-900:#fbe2b5;
  --r-50:#2c1316;--r-100:#3a171b;--r-300:#7d2c33;--r-500:#ff6b6b;--r-600:#ff7f7f;--r-700:#ffa3a3;
  --v-50:#1e1736;--v-100:#281e4b;--v-300:#5b47aa;--v-500:#9c7cff;--v-700:#c3aeff;
  --hull:linear-gradient(180deg,#10131a,#0b0d12);--hull-ink:#eef1f6;--hull-mute:#8a93a6;
  --field:radial-gradient(1200px 760px at 50% -10%,#141b2c 0,#0d111b 55%,#090b12 100%);
  --tint:rgba(120,90,255,.10);
  --glass-edge:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 0 rgba(255,255,255,.06),inset 0 0 0 7px rgba(0,0,0,.25),inset 0 0 120px rgba(0,0,0,.5);
  --sheen:rgba(255,255,255,.05);
  --hud:rgba(26,31,45,.94);--hud-line:rgba(255,255,255,.13);--hud-shadow:0 1px 2px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.35);
  --me:linear-gradient(135deg,#4f7dff,#3156d8);--me-glow:rgba(79,125,255,.30);
}

/* ---------- 舱壁：整窗、标题栏 ---------- */
html body{padding:0!important;background:var(--hull)!important}
html #appShell.app-shell{position:fixed;inset:0;height:auto;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--hull)!important;overflow:hidden}
html #appShell .window-bar,html #appShell .sidebar,html #appShell .utility-bar{-webkit-user-select:none;user-select:none}
html #appShell .window-bar{height:52px!important;padding:0 172px 0 16px!important;gap:10px;background:transparent!important;border:0!important;-webkit-app-region:drag}
html #appShell .window-bar button{-webkit-app-region:no-drag}
html #appShell .window-controls{gap:8px;margin-right:12px}
html #appShell .window-control{width:12px;height:12px}
html #appShell .window-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--hull-ink)!important;letter-spacing:.01em}
html #appShell .window-title::before{content:"";width:28px;height:28px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='16' rx='14.5' ry='5.2' transform='rotate(-24 16 16)' fill='none' stroke='%237d8799' stroke-width='1.3'/%3E%3Ccircle cx='16' cy='16' r='7' fill='%23f2643a'/%3E%3Ccircle cx='13.6' cy='13.8' r='1.6' fill='%23fff' opacity='.3'/%3E%3C/svg%3E") center/contain no-repeat}
html #appShell .history-button{color:var(--hull-mute)!important;background:transparent!important}
html #appShell .history-button:hover{color:var(--hull-ink)!important;background:color-mix(in srgb,var(--hull-ink) 7%,transparent)!important}
html #appShell #historyButton span{display:none}
html #appShell #historyButton{width:36px;height:36px;justify-content:center;padding:0!important;border-radius:10px}
html #appShell #hfInbox{height:30px;padding:0 12px!important;border-radius:999px!important;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--hull-ink) 6%,transparent)!important;color:var(--hull-ink)!important;border:0!important}

/* 导航：从左侧栏搬进标题栏，纯图标，当前项是强调色图标 + 底边细线 */
html #appShell .sidebar{position:fixed!important;top:0;left:0;right:0;margin:0 auto;width:max-content;height:52px;padding:0!important;display:flex!important;flex-direction:row!important;align-items:stretch;gap:6px;background:transparent!important;border:0!important;z-index:40}
html #appShell .rail-button{position:relative;width:44px!important;height:52px!important;margin:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--hull-mute)!important;display:grid;place-items:center}
html #appShell .rail-button:hover{color:var(--hull-ink)!important}
html #appShell .sidebar .rail-button[aria-current=true]{color:var(--p-600)!important;background:transparent!important;box-shadow:none!important}
html[data-theme=dark] #appShell .sidebar .rail-button[aria-current=true]{color:#8fb4ff!important;filter:drop-shadow(0 0 6px rgba(120,170,255,.55))}
html #appShell .rail-button[aria-current=true]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:currentColor}
html #appShell .rail-button svg{width:20px;height:20px}
html #appShell .nav-tooltip{left:50%!important;top:50px!important;transform:translateX(-50%)!important;white-space:nowrap}
html #appShell .rail-button:hover .nav-tooltip{transform:translateX(-50%)!important}
/* 右上角工具：语言、通知、头像 */
html #appShell .utility-bar{position:fixed!important;top:0;right:14px;height:52px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;display:flex;align-items:center}
html #appShell .utility-group{flex-direction:row!important;gap:4px!important}
html #appShell .utility-divider{display:none}
html #appShell .utility-button{width:36px;height:36px;border-radius:10px;color:var(--hull-mute)!important;background:transparent!important}
html #appShell .utility-button:hover{color:var(--hull-ink)!important;background:color-mix(in srgb,var(--hull-ink) 7%,transparent)!important}
html #appShell .account-button{margin-left:4px}
html #appShell #reloadButton svg{width:18px;height:18px}
html #appShell .account-avatar{width:32px!important;height:32px!important;border-radius:50%!important;display:grid!important;place-items:center;background:var(--n-0)!important;color:var(--n-800)!important;box-shadow:inset 0 0 0 1px var(--n-250),0 1px 2px rgba(0,0,0,.08)!important;font-weight:600}
html #appShell .utility-anchor{position:relative}
html #appShell .utility-menu{position:absolute!important;top:46px!important;right:0!important;left:auto!important;bottom:auto!important;z-index:60;width:300px}

/* ---------- 玻璃：内容区是一块嵌进舱壁的厚玻璃 ---------- */
html #appShell .app-body{position:relative;flex:1;margin:0 10px 10px;border-radius:24px;overflow:hidden;background:radial-gradient(700px 420px at 0% 0%,var(--tint),transparent 70%),var(--field)!important;box-shadow:var(--glass-edge)}
html #appShell .app-body::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:24px;background:linear-gradient(118deg,transparent 26%,var(--sheen) 33%,transparent 40%,transparent 62%,color-mix(in srgb,var(--sheen) 60%,transparent) 66%,transparent 71%)}
html #appShell .workspace{position:relative;z-index:1;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;
  grid-template-columns:clamp(400px,40%,820px) minmax(0,1fr)!important;justify-content:stretch!important;gap:36px!important;padding:26px 32px 28px!important}

/* ---------- HUD：贴在玻璃上的磨砂面板 ---------- */
html #appShell .interaction-page,html #appShell .interaction-page.user-center,html #appShell .interaction-page.activity-home{background:var(--hud)!important;backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);border:0!important;border-radius:22px!important;box-shadow:inset 0 0 0 1px var(--hud-line),var(--hud-shadow)!important}
html #appShell .user-pool{background:linear-gradient(120deg,var(--n-0),color-mix(in srgb,var(--n-0) 60%,transparent))!important;box-shadow:inset 0 0 0 1px var(--hud-line);color:var(--n-600)}
html #appShell .user-pool{padding:16px 18px!important;border:0!important;border-radius:14px!important;align-items:center!important}
html #appShell .user-pool button{color:var(--n-600)!important;display:flex;align-items:baseline;gap:10px;font-size:13px}
html #appShell .user-pool strong{font-size:28px!important;line-height:1.1;color:var(--n-900)!important;font-family:var(--font-sans)!important;font-weight:600!important;letter-spacing:-.02em}
html #appShell .user-pool .demo-badge{background:var(--n-150)!important;color:var(--n-600)!important;border:0!important}
html #appShell .segment-card{background:transparent!important;border:0!important;border-top:1px solid var(--n-200)!important;border-radius:0!important;box-shadow:none!important}
html #appShell .segment-card:hover{box-shadow:none!important}
html #appShell .segment-metrics strong{font-family:var(--font-sans)!important;font-weight:600!important}

/* 对话区：气泡同为磨砂，用户消息用主色渐变 */
html #appShell .conversation{position:relative;max-width:960px!important;width:100%;justify-self:start!important}
html #appShell .conversation>.messages,html #appShell .conversation>.composer-area{position:relative;z-index:2}
html #appShell .greeting,html #appShell .plain-response,html #appShell .hf-task-message,html #appShell .oneform-row .plain-response{background:var(--hud)!important;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);border:0!important;box-shadow:inset 0 0 0 1px var(--hud-line),0 8px 24px rgba(10,20,40,.08)!important;color:var(--n-800)!important}
html #appShell .user-message{background:var(--me)!important;color:#fff!important;box-shadow:0 10px 26px var(--me-glow)!important}
html #appShell .identity small{color:var(--n-500)!important}

/* 输入框：限宽、两行高 */
html #appShell .composer-area{width:100%;max-width:820px;margin-inline:auto!important;background:var(--hud)!important;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:0!important;border-radius:20px!important;padding:14px 12px 12px 18px!important;box-shadow:inset 0 0 0 1px var(--hud-line),0 18px 44px rgba(10,20,40,.12)!important}
html #appShell .composer{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html #appShell .composer-mascot{display:none!important}
html #appShell .composer textarea{min-height:48px!important;background:transparent!important;font-size:14px;color:var(--n-800)}
html #appShell .send-button{width:38px;height:38px;min-width:38px;border-radius:50%!important}

/* ---------- 舷窗 ---------- */
.porthole{--d:260px;position:absolute;left:50%;top:50%;width:calc(var(--d) + 36px);height:calc(var(--d) + 36px);transform:translate(-50%,-50%);z-index:1;border-radius:50%;pointer-events:none;transition:opacity .4s}
html[data-porthole=off] .porthole{display:none}
.porthole .bezel{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 200deg,#fff,#d4dae3 18%,#f6f8fb 32%,#b8c1cd 50%,#f9fafc 66%,#cfd6e0 82%,#fff);box-shadow:0 1px 0 #fff inset,0 -1px 0 rgba(0,0,0,.08) inset,0 18px 40px rgba(20,35,70,.18),0 4px 10px rgba(20,35,70,.10)}
.porthole .bezel::after{content:"";position:absolute;inset:7px;border-radius:50%;background:conic-gradient(from 20deg,#eef1f5,#c3cbd6,#f3f5f8,#aeb8c5,#eef1f5);box-shadow:inset 0 1px 1px rgba(255,255,255,.9)}
html[data-theme=dark] .porthole .bezel{background:conic-gradient(from 200deg,#4a5160,#1c2029 18%,#3b414e 32%,#121519 50%,#454c5a 66%,#1a1e25 82%,#4a5160);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 20px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}
html[data-theme=dark] .porthole .bezel::after{background:conic-gradient(from 20deg,#2a2f39,#14171c,#323844,#0e1014,#2a2f39);box-shadow:inset 0 1px 1px rgba(255,255,255,.10)}
.porthole .space{position:absolute;inset:18px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 55%,#0d1430 0,#060a1c 55%,#02030a 100%);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.55),inset 0 10px 24px rgba(0,0,0,.65),inset 0 -6px 18px rgba(0,0,0,.4)}
html[data-theme=dark] .porthole .space{background:#020308}
.porthole canvas{position:absolute;inset:0;width:100%;height:100%}
.porthole .flow{position:absolute;border-radius:50%;filter:blur(30px);mix-blend-mode:screen;opacity:.75;will-change:transform}
.porthole .f1{width:62%;height:44%;left:-8%;top:18%;background:radial-gradient(closest-side,#ff3fae,transparent);animation:ph-d1 160s ease-in-out infinite alternate}
.porthole .f2{width:58%;height:58%;right:-12%;top:-6%;background:radial-gradient(closest-side,#5b5bff,transparent);animation:ph-d2 240s ease-in-out infinite alternate}
.porthole .f3{width:70%;height:40%;left:14%;bottom:-8%;background:radial-gradient(closest-side,#18e0d0,transparent);animation:ph-d3 130s ease-in-out infinite alternate}
.porthole .f4{width:40%;height:30%;left:40%;top:40%;background:radial-gradient(closest-side,#ffb35c,transparent);opacity:.45;animation:ph-d4 200s ease-in-out infinite alternate}
.porthole .veil{position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent,rgba(120,90,255,.18),transparent 30%,rgba(0,220,200,.14),transparent 60%,rgba(255,80,170,.16),transparent);mix-blend-mode:screen;filter:blur(22px);animation:ph-spin 600s linear infinite}
.porthole[data-scene=drift] .flow{opacity:.42}.porthole[data-scene=drift] .veil{opacity:.6}
.porthole[data-scene=aurora] .flow,.porthole[data-scene=aurora] .veil{display:none}
.porthole .lens{position:absolute;inset:18px;border-radius:50%;pointer-events:none;background:radial-gradient(120% 80% at 28% 18%,rgba(255,255,255,.22),rgba(255,255,255,.04) 38%,transparent 52%),radial-gradient(60% 40% at 75% 85%,rgba(255,255,255,.06),transparent 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
@keyframes ph-d1{to{transform:translate(38%,22%) scale(1.25) rotate(25deg)}}
@keyframes ph-d2{to{transform:translate(-30%,34%) scale(.85) rotate(-30deg)}}
@keyframes ph-d3{to{transform:translate(-26%,-30%) scale(1.3)}}
@keyframes ph-d4{to{transform:translate(-60%,30%) scale(1.6)}}
@keyframes ph-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.porthole .flow,.porthole .veil{animation:none}}

/* ---------- 头像菜单里的外观设置 ---------- */
.skin-panel{margin-top:14px;padding-top:12px;border-top:1px solid var(--n-200);display:grid;gap:10px}
.skin-panel b{font-size:12px;color:var(--n-500);font-weight:500}
.skin-toggle{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--n-800);cursor:pointer}
.skin-toggle input{appearance:none;width:34px;height:20px;border-radius:999px;background:var(--n-300);position:relative;cursor:pointer;transition:background .15s;margin:0}
.skin-toggle input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.skin-toggle input:checked{background:var(--p-600)}
.skin-toggle input:checked::after{transform:translateX(14px)}

/* 皮肤选择 */
.skin-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.skin-grid button{white-space:nowrap;display:grid;gap:5px;justify-items:center;padding:0;border:0;background:none;color:var(--n-600);font-size:11px;cursor:pointer}
.skin-grid i{width:36px;height:36px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.15)}
.skin-grid button[aria-pressed=true]{color:var(--n-900);font-weight:600}
.skin-grid button[aria-pressed=true] i{box-shadow:0 0 0 2px var(--n-0),0 0 0 4px var(--p-600)}
.skin-grid button.kept i{box-shadow:0 0 0 2px var(--n-0),0 0 0 3.5px var(--n-400)}
.skin-grid [data-group=light][data-skin-pick=porthole] i{background:radial-gradient(circle at 50% 50%,#2a1f55 0 34%,#d9dee6 36% 44%,#eef1f6 46%)}
.skin-grid [data-group=dark][data-skin-pick=porthole] i{background:radial-gradient(circle at 50% 50%,#3a3f8a 0 30%,#1d2030 32% 42%,#0d111b 44%)}
.skin-grid [data-group=light][data-skin-pick=plain] i{background:linear-gradient(160deg,#fbfcfe,#e9eef6)}
.skin-grid [data-group=dark][data-skin-pick=plain] i{background:linear-gradient(160deg,#1e2433,#0b0d12)}
.skin-grid [data-skin-pick=mars] i{background:radial-gradient(circle at 120% 130%,#c4511f 0 52%,#8fb0ff 53%,#02030a 56%)}
.skin-grid [data-skin-pick=aurora] i{background:linear-gradient(180deg,#020409 30%,#2fd88c 62%,#6b4fd8 75%,#020409 80%)}
.skin-grid [data-skin-pick=earth] i{background:radial-gradient(circle at 125% 135%,#bcd4ff 0 50%,#5a96ff 51%,#e9f0fb 54%)}
.skin-grid [data-skin-pick=dune] i{background:radial-gradient(circle at 125% 135%,#f3c3a6 0 50%,#e6783f 51%,#f8efe8 54%)}
.skin-grid [data-skin-pick=sun] i{background:radial-gradient(circle at 85% 10%,#fff 0 18%,#ffe3b0 34%,#f6f2ec 62%)}
.skin-grid [data-skin-pick=corona] i{background:radial-gradient(circle at 60% 40%,#000 0 26%,#ffe9b8 28%,#c78a3a 36%,#010103 52%)}