@font-face {
  font-family: 'Echo Source Han Serif';
  src: url('./assets/fonts/SourceHanSerifCN-Regular.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Echo Source Han Sans';
  src: url('./assets/fonts/SourceHanSansCN-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Echo Source Han Sans';
  src: url('./assets/fonts/SourceHanSansCN-Medium.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #1a1a2e; --phone-bg: #070811; --nav-w: 200px; --sat: env(safe-area-inset-top, 0px);
  /* 字体策略：宋体管"故事内容"（旁白/对话/历史），黑体管"系统语言"（UI 标签/操作提示）。*/
  --serif: 'Echo Source Han Serif', 'Source Han Serif SC VF', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --sans:  'Echo Source Han Sans', 'Source Han Sans CN', 'Source Han Sans SC', 'PingFang SC', 'HarmonyOS Sans SC', sans-serif;
  --system-gold: rgba(255,221,154,0.92);
  --system-gold-soft: rgba(255,198,106,0.18);
  --system-panel-bg: linear-gradient(90deg, rgba(255,246,226,0.86), rgba(239,208,151,0.76));
  --system-panel-border: rgba(255,232,184,0.46);
  --system-panel-text: rgba(55,38,18,0.92);
  --system-panel-muted: rgba(105,75,34,0.72);
  --system-icon-bg: rgba(64,48,25,0.42);
  --system-icon-border: rgba(255,231,176,0.32);
  --user-warm: rgba(78,51,31,0.86);
  --role-ink: rgba(31,31,49,0.82);
  --role-line: rgba(190,204,255,0.16);
}
/* 让自定义属性可被 transition / animation 插值（气泡压栈、入场、呼吸各管各的） */
@property --stack-shift { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --enter-y     { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --breath-y    { syntax: '<length>'; initial-value: 0px; inherits: false; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  font-family: var(--sans);
  color: rgba(255,235,210,0.9);
}

/* ============ 桌面布局 ============ */
.desktop-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  gap: 32px;
}

/* ---- 控制菜单面板（左侧，未来填控制项） ---- */
.nav-panel {
  width: var(--nav-w);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-l1 {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,235,210,0.45);
  padding: 0 10px 4px; margin-top: 16px;
}
.nav-l1:first-child { margin-top: 0; }
.nav-l2 {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255,235,210,0.25);
  padding: 6px 10px 3px 18px;
}
.nav-hint {
  font-size: 11px; font-style: italic;
  color: rgba(255,235,210,0.25);
  padding: 2px 10px 6px 18px;
  letter-spacing: 0.04em;
}
.nav-status {
  font-style: normal;
  color: rgba(255,235,210,0.38);
}
.nav-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px 10px 6px;
}
.nav-tabs-3 {
  grid-template-columns: repeat(3, 1fr);
}
.nav-tab {
  min-width: 0;
  height: 30px;
  border: 1px solid rgba(255,235,210,0.1);
  border-radius: 6px;
  background: rgba(255,235,210,0.035);
  color: rgba(255,235,210,0.42);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-tab:hover {
  background: rgba(255,235,210,0.07);
  color: rgba(255,235,210,0.66);
}
.nav-tab.active {
  background: rgba(255,200,130,0.14);
  border-color: rgba(255,200,130,0.28);
  color: rgba(255,235,210,0.9);
}
.nav-item {
  padding: 7px 10px 7px 26px; border-radius: 6px;
  font-size: 13px; color: rgba(255,235,210,0.5);
  cursor: pointer; transition: background 0.2s, color 0.2s;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.nav-item:hover { background: rgba(255,235,210,0.06); color: rgba(255,235,210,0.7); }
.nav-item.active { background: rgba(255,200,130,0.12); color: rgba(255,235,210,0.9); }
.nav-item.disabled { color: rgba(255,235,210,0.2); cursor: default; pointer-events: none; }
.nav-divider { height:1px; background:rgba(255,235,210,0.08); margin:10px 10px; }
.nav-action { padding:7px 10px; margin-top:4px; border-radius:6px; font-size:12px; color:rgba(255,235,210,0.35); cursor:pointer; transition:background 0.2s,color 0.2s; }
.nav-action:hover { background:rgba(255,235,210,0.06); color:rgba(255,235,210,0.5); }
.nav-back {
  width: calc(100% - 20px);
  height: 32px;
  margin: 0 10px 10px;
  border: 1px solid rgba(255,235,210,0.12);
  border-radius: 6px;
  background: rgba(255,235,210,0.045);
  color: rgba(255,235,210,0.72);
  font-family: var(--sans);
  font-size: 12px;
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
}
.nav-back:hover {
  background: rgba(255,235,210,0.08);
  color: rgba(255,244,226,0.92);
}
.nav-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px 7px 26px; border-radius: 6px;
  font-size: 13px; color: rgba(255,235,210,0.5);
  cursor: pointer; transition: background 0.2s, color 0.2s;
}
.nav-toggle:hover { background: rgba(255,235,210,0.06); color: rgba(255,235,210,0.7); }
.nav-toggle.on { color: rgba(255,235,210,0.9); }
.nav-toggle .toggle-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,235,210,0.15);
  border: 1px solid rgba(255,235,210,0.3);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.nav-toggle.on .toggle-dot {
  background: rgba(255,200,130,0.85);
  border-color: rgba(255,200,130,1);
  box-shadow: 0 0 8px rgba(255,200,130,0.5);
}
.screenshot-generator-controls {
  padding: 8px 10px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.screenshot-generator-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: rgba(255,235,210,0.44);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.screenshot-generator-input,
.screenshot-generator-select,
.screenshot-generator-textarea {
  width: 100%;
  border: 1px solid rgba(255,235,210,0.14);
  border-radius: 6px;
  background: rgba(255,235,210,0.055);
  color: rgba(255,244,226,0.9);
  font-family: var(--sans);
  font-size: 12px;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  touch-action: auto;
}
.screenshot-generator-input,
.screenshot-generator-select {
  height: 30px;
  padding: 0 9px;
}
.screenshot-generator-select {
  color-scheme: dark;
}
.screenshot-generator-textarea {
  min-height: 238px;
  resize: vertical;
  padding: 9px;
  line-height: 1.55;
}
.screenshot-generator-format,
.screenshot-generator-errors,
.screenshot-generator-message {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255,235,210,0.36);
}
.screenshot-generator-errors {
  color: rgba(255,190,150,0.78);
}
.screenshot-generator-message {
  color: rgba(180,232,205,0.76);
}
.screenshot-generator-download {
  height: 34px;
  border: 1px solid rgba(255,200,130,0.34);
  border-radius: 6px;
  background: rgba(255,200,130,0.16);
  color: rgba(255,244,226,0.92);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.screenshot-generator-download:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ---- 手机框 ---- */
.phone-frame {
  height: 95vh; aspect-ratio: 1280 / 2800; border-radius: 0;
  background: var(--phone-bg); position: relative; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 20px 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.phone-notch { display: none; }
.phone-home { display: none; }

.phone-frame.login-view-active .stage {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ---- 舞台 ---- */
.stage { position:absolute; inset:0; overflow:hidden; touch-action:none; isolation:isolate; }
.stage.arc-mode-bottom-glow::before {
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:56%;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(120% 82% at 50% 104%,
      rgba(2,4,9,0.92) 0%,
      rgba(3,5,10,0.74) 34%,
      rgba(4,6,12,0.36) 66%,
      rgba(5,7,14,0) 100%),
    linear-gradient(to top,
      rgba(2,4,9,0.78) 0%,
      rgba(3,5,10,0.58) 28%,
      rgba(4,6,12,0.24) 68%,
      rgba(5,7,14,0) 100%);
}
.stage.account-panel-open .history-anchor,
.stage.account-panel-open .stage-goal,
.stage.account-panel-open .insight-orb,
.stage.account-panel-open .typing-layer,
.stage.account-panel-open .voice-hint,
.stage.account-panel-open .arc-hint {
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
}
.stage.history-panel-open .account-entry {
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
}
.stage.main-stage-frozen { touch-action:pan-y; }
.stage.main-stage-frozen::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,198,132,0.07), rgba(255,220,174,0.018) 45%, rgba(255,176,116,0.052)),
    rgba(255,206,154,0.024);
}

/* 场景 & 角色（canvas 之下） */
.scene-bg {
  position:absolute; inset:0; z-index:0;
  background: url('../../src/images/cj5.jpg') center/cover no-repeat;
  opacity: 0; transition: opacity 0.8s ease;
}
.scene-bg.visible { opacity: 1; }
.scene-bg-overlay { z-index: 0; }

/* ---- 过场卡：开篇剧情 / 剧情演化 ---- */
.story-card {
  position:absolute; inset:0; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 calc(34 * var(--u));
  /* 整屏压暗：比场景冻结更重，把注意力收到文字上 */
  background:radial-gradient(120% 90% at 50% 45%, rgba(6,7,13,0.82), rgba(4,5,10,0.93));
  opacity:0; pointer-events:none;
  transition:opacity 0.8s ease;
}
.story-card.visible { opacity:1; pointer-events:auto; cursor:pointer; }
/* 过场卡期间隐藏一切干扰元素，只留角色立绘做氛围 */
.stage.story-card-open .stage-goal,
.stage.story-card-open .account-entry,
.stage.story-card-open .history-anchor,
.stage.story-card-open .narration-zone,
.stage.story-card-open .bubble-zone,
.stage.story-card-open .arc-hint,
.stage.story-card-open .insight-orb {
  opacity:0 !important; pointer-events:none !important;
  transition:opacity 0.6s ease;
}
.story-card-body {
  width:100%; max-width:calc(360 * var(--u));
  display:flex; flex-direction:column; gap:calc(22 * var(--u));
}
.story-card-para {
  margin:0; text-align:center;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:calc(14.5 * var(--u)); line-height:1.92; letter-spacing:0.05em;
  color:rgba(255,242,222,0.9);
  text-shadow:0 0 6px rgba(0,0,0,0.7);
  opacity:0; transform:translateY(calc(10 * var(--u)));
  transition:opacity 1s ease, transform 1s cubic-bezier(0.22,0.61,0.36,1);
}
.story-card-para.visible { opacity:1; transform:translateY(0); }
.story-card-hint {
  position:absolute; left:0; right:0; bottom:calc(40 * var(--u) + var(--sat));
  text-align:center;
  font-family:var(--sans); font-size:calc(11.5 * var(--u)); letter-spacing:0.32em;
  color:rgba(255,235,210,0.45);
  opacity:0; transition:opacity 0.7s ease;
  animation:storyHintBreath 2.6s ease-in-out infinite;
}
.story-card-hint.visible { opacity:1; }
@keyframes storyHintBreath { 0%,100%{ opacity:0.32; } 50%{ opacity:0.6; } }
.stage.main-stage-frozen .scene-bg {
  filter: brightness(0.94) saturate(0.96) contrast(0.96) hue-rotate(-3deg);
  transition: opacity 0.8s ease, filter 0.28s ease;
}
.character {
  position:absolute; z-index:1;
  left:calc(50% - 50vh); top:0;
  width:100vh; height:100vh;
  transform: translateY(17vh) scale(0.7);
  transform-origin: 50% 20%;
  pointer-events:none;
  opacity: 0; transition: opacity 0.8s ease;
}
.character.visible { opacity: 1; }
.stage.main-stage-frozen .character {
  opacity:0.94;
  filter: brightness(0.92) saturate(0.95) contrast(0.96) hue-rotate(-2deg);
  transition: opacity 0.8s ease, filter 0.28s ease;
}
.stage.screenshot-generator-mode .character {
  opacity:0.95;
  transform: translateY(12vh) scale(0.88);
  filter: brightness(0.92) saturate(0.95) contrast(0.96) hue-rotate(-2deg);
}
.stage.screenshot-generator-mode .character:not(.l2d-active) {
  transform: translateY(17vh) scale(0.72);
}
.stage.screenshot-generator-mode .character .l2d-canvas {
  transform: scale(1.06);
  transform-origin: 50% 78%;
}
.character img {
  width:100%; height:100%;
  object-fit:contain; object-position:center bottom;
}
.character .l2d-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
}
.character.l2d-active img { display:none; }
.stage.screenshot-exporting .character img {
  display:block !important;
}
.stage.screenshot-exporting .character .l2d-canvas {
  display:none !important;
}

.stage-goal {
  position:absolute;
  top:calc(20 * var(--u) + var(--sat)); right:calc(18 * var(--u));
  z-index:36;
  max-width:calc(68% - 18 * var(--u));
  height:calc(36 * var(--u));
  padding:0;
  display:inline-flex; align-items:center; justify-content:flex-end;
  border:0;
  border-radius:calc(17 * var(--u));
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  font-family:var(--sans);
  font-size:calc(10.5 * var(--u)); line-height:1.3; font-weight:500;
  letter-spacing:0.08em;
  color:var(--system-panel-text);
  text-shadow:none;
  white-space:nowrap;
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
.stage-goal-text {
  display:flex;
  align-items:center;
  min-width:0;
  max-width:calc(100vw - 90 * var(--u));
  height:calc(36 * var(--u));
  overflow:hidden;
  text-align:left;
  padding:0 calc(42 * var(--u)) 0 calc(14 * var(--u));
  margin-right:calc(-24 * var(--u));
  border:1px solid var(--system-panel-border);
  border-radius:calc(17 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)) calc(17 * var(--u));
  background:var(--system-panel-bg);
  box-shadow:
    0 0 calc(16 * var(--u)) rgba(255,210,130,0.12),
    0 1px calc(2 * var(--u)) rgba(0,0,0,0.32);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform-origin:right center;
  transition:max-width 0.32s ease, opacity 0.22s ease, padding 0.32s ease, border-width 0.32s ease;
}
.stage-emotion-panel {
  position:absolute;
  top:calc(42 * var(--u));
  right:calc(12 * var(--u));
  z-index:1;
  display:flex;
  align-items:center;
  gap:calc(8 * var(--u));
  width:max-content;
  max-width:min(calc(100vw - 96 * var(--u)), calc(256 * var(--u)));
  height:calc(28 * var(--u));
  padding:0 calc(12 * var(--u));
  overflow:hidden;
  border:1px solid rgba(239,209,151,0.3);
  border-radius:calc(14 * var(--u));
  background:rgba(52,39,24,0.62);
  box-shadow:
    0 0 calc(12 * var(--u)) rgba(226,177,91,0.1),
    0 1px calc(3 * var(--u)) rgba(0,0,0,0.24);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:rgba(241,224,193,0.82);
  font-size:calc(9.4 * var(--u));
  line-height:1.15;
  font-weight:400;
  letter-spacing:0.02em;
  opacity:0;
  transform:translateY(calc(-4 * var(--u)));
  transform-origin:right top;
  pointer-events:none;
  transition:opacity 0.22s ease, transform 0.26s ease;
}
.stage-goal.expanded .stage-emotion-panel {
  opacity:1;
  transform:translateY(0);
}
.stage-emotion-label {
  flex:0 0 auto;
  color:rgba(248,229,190,0.92);
  font-weight:500;
}
.stage-emotion-pad {
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.system-panel-label {
  position:relative;
  z-index:1;
  flex:0 0 auto;
  font-weight:700;
}
.system-panel-content,
.insight-text {
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
}
.system-panel-content {
  font-weight:650;
}
.insight-text {
  position:relative;
  z-index:1;
  font-weight:500;
}
.stage-goal-icon {
  position:relative;
  z-index:2;
  width:calc(36 * var(--u)); height:calc(36 * var(--u));
  flex:0 0 calc(36 * var(--u));
  border-radius:50%;
  border:1px solid var(--system-icon-border);
  background:rgba(52,41,24,0.18);
  box-shadow:
    0 0 calc(8 * var(--u)) rgba(255,202,119,0.08),
    0 1px calc(2 * var(--u)) rgba(0,0,0,0.16);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.stage-goal.pending .stage-goal-icon {
  animation:stageGoalPendingIcon 1.7s ease-in-out infinite;
}
.stage-goal.pending .stage-goal-text {
  animation:stageGoalPendingPanel 1.7s ease-in-out infinite;
}
.stage-goal.pending .stage-goal-icon::before {
  animation:stageGoalPendingStar 1.7s ease-in-out infinite;
}
.stage-goal-icon::before,
.stage-goal-icon::after {
  content:'';
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
}
.stage-goal-icon::before {
  width:calc(14 * var(--u));
  height:calc(17 * var(--u));
  background:rgba(255,231,176,0.62);
  clip-path:polygon(
    50% 0,
    58% 39%,
    100% 50%,
    58% 61%,
    50% 100%,
    42% 61%,
    0 50%,
    42% 39%
  );
}
.stage-goal-icon::after {
  width:calc(9 * var(--u));
  height:calc(11 * var(--u));
  background:rgba(52,41,24,0.9);
  clip-path:polygon(
    50% 0,
    56% 42%,
    100% 50%,
    56% 58%,
    50% 100%,
    44% 58%,
    0 50%,
    44% 42%
  );
  opacity:0;
  transform:translate(-50%, -50%) scale(0.68);
  transition:opacity 0.22s ease, transform 0.22s ease;
}
.stage-goal:not(.expanded) .stage-goal-icon::after {
  opacity:1;
  transform:translate(-50%, -50%) scale(0.68);
}
.stage-goal.expanded .stage-goal-icon::before {
  background:rgba(255,231,176,0.72);
}
.stage-goal:not(.expanded) .stage-goal-text {
  max-width:0;
  opacity:0;
  padding-left:0;
  padding-right:0;
  margin-right:0;
  border-width:0;
}
.stage-goal:not(.expanded) .stage-emotion-panel {
  opacity:0;
  transform:translateY(calc(-4 * var(--u)));
}
.stage-goal:focus-visible {
  outline:1px solid rgba(255,221,154,0.7);
  outline-offset:calc(3 * var(--u));
}
@keyframes stageGoalPendingIcon {
  0%, 100% {
    border-color:rgba(255,230,176,0.34);
    box-shadow:
      0 0 calc(8 * var(--u)) rgba(255,202,119,0.1),
      0 1px calc(2 * var(--u)) rgba(0,0,0,0.16);
    filter:brightness(1);
  }
  50% {
    border-color:rgba(255,235,190,0.82);
    box-shadow:
      0 0 calc(12 * var(--u)) rgba(255,215,142,0.42),
      0 0 calc(22 * var(--u)) rgba(255,183,82,0.22),
      0 1px calc(2 * var(--u)) rgba(0,0,0,0.16);
    filter:brightness(1.16);
  }
}
@keyframes stageGoalPendingPanel {
  0%, 100% {
    box-shadow:
      0 0 calc(16 * var(--u)) rgba(255,210,130,0.12),
      0 1px calc(2 * var(--u)) rgba(0,0,0,0.32);
  }
  50% {
    box-shadow:
      0 0 calc(18 * var(--u)) rgba(255,218,144,0.28),
      0 0 calc(30 * var(--u)) rgba(255,185,84,0.16),
      0 1px calc(2 * var(--u)) rgba(0,0,0,0.32);
  }
}
@keyframes stageGoalPendingStar {
  0%, 100% { background:rgba(255,231,176,0.62); transform:translate(-50%, -50%) scale(1); }
  50% { background:rgba(255,244,204,0.98); transform:translate(-50%, -50%) scale(1.08); }
}

canvas { position:absolute; inset:0; width:100%; height:100%; }
/* 层级：历史(1000+) > 目标(36) > 锦囊(26) > 输入层(20) > 输入弧/光晕(4-16) > 剧情文字(2) > 角色/场景 */
#c-glow { z-index:4; }
#c { z-index:5; }

/* ---- 打字层：输入条 + 发送按钮，靠真实系统键盘抬高（移动端 visualViewport.height 变化写到 --kb-inset） ---- */
/* 注意：input 不能用 display:none 切显隐，否则 iOS Safari 首次 focus() 不弹键盘——
   始终保持 input 在 layout 树里，靠 opacity + pointer-events 控显隐。 */
.typing-layer { position:absolute; inset:0; z-index:20; pointer-events:none; }
/* 输入条 = 拉长版用户气泡：沿用 .bubble-user 同款墨纸介质（暖棕底 + 白字 + 外阴影 + 文字阴影），
   做成横向胶囊形（border-radius = height/2），让"敲字"和"成气泡"是同一容器在变形 */
.typing-input {
  position:absolute; left:calc(24 * var(--u)); right:calc(62 * var(--u));
  bottom:calc(14 * var(--u) + var(--kb-inset, 0px));
  height:calc(36 * var(--u)); padding:0 calc(18 * var(--u));
  background:var(--user-warm);
  border:1px solid rgba(255,225,184,0.16); outline:none;
  border-radius:calc(18 * var(--u));
  color:rgba(255,255,255,1);
  caret-color:rgba(255,255,255,1);
  text-shadow:0 1px 2px rgba(0,0,0,0.7);
  box-shadow:0 0 14px rgba(0,0,0,0.34), 0 0 16px rgba(255,184,105,0.08);
  text-align:center;
  font-family: var(--sans);
  font-size:calc(15.5 * var(--u)); letter-spacing:0.04em;
  pointer-events:none;
  opacity:0; transition:opacity 0.22s ease;
}
.typing-input::placeholder { color:rgba(255,255,255,0.35); font-style:italic; }
.typing-input::-webkit-input-placeholder { color:rgba(255,255,255,0.35); font-style:italic; }
.typing-send {
  position:absolute; right:calc(18 * var(--u));
  bottom:calc(14 * var(--u) + var(--kb-inset, 0px));
  width:calc(36 * var(--u)); height:calc(36 * var(--u)); padding:0;
  display:flex; align-items:center; justify-content:center;
  border:none;
  background:rgba(32,23,14,0.86);
  border:1px solid rgba(255,225,184,0.14);
  border-radius:50%;
  box-shadow:0 0 14px rgba(0,0,0,0.34), 0 0 14px rgba(255,184,105,0.08);
  cursor:default;
  pointer-events:none;
  opacity:0; transition:opacity 0.22s ease, background-color 0.22s ease;
}
.typing-send svg { display:block; overflow:visible; }
.typing-send .send-core {
  fill:rgba(255,235,210,0.5);
  transition:fill 0.22s ease;
}
.typing-layer.entered .typing-input { opacity:1; pointer-events:auto; }
.typing-layer.entered .typing-send { opacity:1; }
.typing-layer.entered .typing-send.active {
  background:rgba(255,229,184,0.96);
  cursor:pointer;
  pointer-events:auto;
}
.typing-layer.entered .typing-send.active .send-core {
  fill:rgba(20,15,8,1);
}
.voice-hint {
  position:absolute;
  left:50%;
  bottom:calc(64 * var(--u) + var(--kb-inset, 0px));
  transform:translate(-50%, calc(8 * var(--u)));
  z-index:19;
  max-width:calc(250 * var(--u));
  min-height:calc(26 * var(--u));
  padding:calc(6 * var(--u)) calc(13 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:calc(13 * var(--u));
  background:rgba(16,18,33,0.72);
  border:1px solid rgba(195,210,255,0.2);
  box-shadow:0 0 calc(18 * var(--u)) rgba(0,0,0,0.32);
  color:rgba(220,228,255,0.92);
  font-family:var(--sans);
  font-size:calc(12 * var(--u));
  line-height:1.35;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,0.72);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.voice-hint.visible {
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
  transition:opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.voice-hint.error {
  border-color:rgba(255,205,160,0.24);
  color:rgba(255,228,198,0.95);
}

/* ---- 左上角历史入口：保留但弱化，只作为聊天式历史记录入口 ---- */
.history-anchor {
  position: absolute;
  top: calc(20 * var(--u) + var(--sat)); left: calc(18 * var(--u));
  width: calc(36 * var(--u)); height: calc(36 * var(--u));
  z-index: 1010;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255, 231, 176, 0.58);
  opacity: 0.82;
  border:1px solid var(--system-icon-border);
  border-radius:50%;
  background:rgba(52,41,24,0.18);
  box-shadow:
    0 0 calc(8 * var(--u)) rgba(255,202,119,0.08),
    0 1px calc(2 * var(--u)) rgba(0,0,0,0.16);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.history-anchor svg { display: block; width: calc(21 * var(--u)); height: calc(21 * var(--u)); overflow: visible; }
.history-anchor .anchor-history-arrow,
.history-anchor .anchor-history-arc,
.history-anchor .anchor-history-hand {
  stroke:currentColor;
  fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.history-anchor:hover { opacity: 1; color: rgba(255, 232, 176, 0.78); border-color:rgba(255,232,176,0.45); }
.history-anchor.panel-open .anchor-history-arrow,
.history-anchor.panel-open .anchor-history-arc,
.history-anchor.panel-open .anchor-history-hand {
  opacity:0;
}
.history-anchor.panel-open::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: calc(10 * var(--u)); height: calc(10 * var(--u));
  border-top: calc(1.5 * var(--u)) solid currentColor;
  border-left: calc(1.5 * var(--u)) solid currentColor;
  transform: translate(-50%, -42%) rotate(45deg);
}
/* 文字层：用户每完成一次交互（语音/打字）触发一次的"放大→缩回"提示；
   首次点过锚点后不再触发（由 JS 控制添加/移除）。 */
.history-anchor.hint-pulse {
  animation: anchorHintPulse 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}
.history-anchor.demo-flash {
  animation: anchorDemoFlash 1.45s ease-in-out;
  transform-origin:center;
}
.account-entry {
  position:absolute;
  top:calc(20 * var(--u) + var(--sat));
  left:calc(62 * var(--u));
  z-index:1010;
  width:calc(36 * var(--u));
  height:calc(36 * var(--u));
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--system-icon-border);
  border-radius:50%;
  background:rgba(52,41,24,0.18);
  box-shadow:
    0 0 calc(8 * var(--u)) rgba(255,202,119,0.08),
    0 1px calc(2 * var(--u)) rgba(0,0,0,0.16);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:rgba(255,231,176,0.58);
  opacity:0.82;
  cursor:pointer;
  transition:opacity 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.account-entry svg {
  width:calc(21 * var(--u));
  height:calc(21 * var(--u));
  stroke:currentColor;
  fill:none;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.account-entry:hover,
.account-entry.open {
  opacity:1;
  color:rgba(255,244,207,0.98);
  border-color:rgba(255,232,176,0.50);
}
.account-entry:active { transform:translateY(calc(1 * var(--u))); }
@keyframes anchorHintPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55); }
  100% { transform: scale(1); }
}
@keyframes anchorDemoFlash {
  0%, 100% {
    opacity:0.82;
    color:rgba(255,231,176,0.58);
    border-color:var(--system-icon-border);
    box-shadow:
      0 0 calc(8 * var(--u)) rgba(255,202,119,0.08),
      0 1px calc(2 * var(--u)) rgba(0,0,0,0.16);
    transform:scale(1);
  }
  18%, 56% {
    opacity:1;
    color:rgba(255,244,207,0.96);
    border-color:rgba(255,232,176,0.82);
    box-shadow:
      0 0 calc(12 * var(--u)) rgba(255,223,150,0.5),
      0 0 calc(22 * var(--u)) rgba(255,180,76,0.24),
      0 1px calc(2 * var(--u)) rgba(0,0,0,0.16);
    transform:scale(1.08);
  }
  36%, 76% {
    opacity:0.9;
    color:rgba(255,231,176,0.68);
    border-color:rgba(255,232,176,0.42);
    box-shadow:
      0 0 calc(9 * var(--u)) rgba(255,202,119,0.16),
      0 1px calc(2 * var(--u)) rgba(0,0,0,0.16);
    transform:scale(1);
  }
}

/* ---- 聊天式历史记录：下拉进入，浮在原场景/立绘上，不做整屏遮罩 ---- */
.history-panel {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: transparent;
  pointer-events: none;
  touch-action: pan-y;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-18 * var(--u)));
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.history-panel.visible {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s;
  cursor: grab;
}
.history-panel.visible.dragging {
  cursor: grabbing;
}
.history-scroll {
  position: absolute;
  top: calc(50 * var(--u) + var(--sat)); left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: calc(42 * var(--u)) calc(28 * var(--u)) calc(300 * var(--u));
  font-family: var(--serif);
  color: rgba(255,255,255,0.96);
  line-height: 1.55;
  letter-spacing: 0.03em;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(130 * var(--u)), #000 calc(100% - 158 * var(--u)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 calc(130 * var(--u)), #000 calc(100% - 158 * var(--u)), transparent 100%);
}
.history-scroll::-webkit-scrollbar { width: 3px; }
.history-scroll::-webkit-scrollbar-thumb { background: rgba(255,235,210,0.22); border-radius: 2px; }
.account-backdrop {
  position:absolute;
  inset:0;
  z-index:1190;
  background:rgba(4,5,10,0.38);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.24s ease, visibility 0s linear 0.24s;
}
.account-backdrop.visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 0.24s ease, visibility 0s;
}
.account-panel {
  position:absolute;
  top:calc(68 * var(--u) + var(--sat));
  left:calc(18 * var(--u));
  right:calc(18 * var(--u));
  z-index:1200;
  max-height:calc(100% - 108 * var(--u) - var(--sat));
  overflow-y:auto;
  padding:calc(18 * var(--u));
  border:1px solid rgba(255,232,184,0.26);
  border-radius:calc(18 * var(--u));
  background:rgba(23,18,14,0.86);
  box-shadow:
    0 calc(18 * var(--u)) calc(46 * var(--u)) rgba(0,0,0,0.42),
    0 0 calc(20 * var(--u)) rgba(255,190,100,0.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:rgba(255,239,211,0.94);
  font-family:var(--sans);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(calc(-10 * var(--u)));
  transition:opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
}
.account-panel.visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity 0.24s ease, transform 0.24s ease, visibility 0s;
}
.account-panel::-webkit-scrollbar { width:3px; }
.account-panel::-webkit-scrollbar-thumb { background:rgba(255,235,210,0.22); border-radius:2px; }
.account-panel-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:calc(14 * var(--u));
}
.account-kicker {
  margin-top:calc(6 * var(--u));
  color:rgba(255,224,178,0.48);
  font-size:calc(10 * var(--u));
  letter-spacing:0.16em;
}
.account-phone-title {
  color:rgba(255,246,230,0.92);
  font-size:calc(17 * var(--u));
  line-height:1.15;
  font-weight:650;
  letter-spacing:0.04em;
}
.account-title-row {
  display:flex;
  align-items:center;
  gap:calc(12 * var(--u));
  margin-top:calc(10 * var(--u));
}
.account-title-row .account-phone-title {
  flex:1;
  min-width:0;
}
.account-switch-icon {
  flex:0 0 calc(34 * var(--u));
  width:calc(34 * var(--u));
  height:calc(34 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,232,184,0.18);
  border-radius:50%;
  background:rgba(255,235,210,0.055);
  color:rgba(255,239,211,0.70);
  cursor:pointer;
}
.account-switch-icon svg {
  width:calc(18 * var(--u));
  height:calc(18 * var(--u));
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.account-switch-icon:hover {
  color:rgba(255,246,230,0.92);
  border-color:rgba(255,232,184,0.36);
}
.account-close {
  width:calc(32 * var(--u));
  height:calc(32 * var(--u));
  border:1px solid rgba(255,232,184,0.16);
  border-radius:50%;
  background:rgba(255,235,210,0.05);
  color:rgba(255,235,210,0.65);
  font-size:calc(22 * var(--u));
  line-height:1;
  cursor:pointer;
}
.account-section-title {
  color:rgba(255,224,178,0.58);
  font-size:calc(10.5 * var(--u));
  line-height:1.2;
  letter-spacing:0.12em;
}
.account-section {
  margin-top:calc(18 * var(--u));
  padding-top:calc(16 * var(--u));
  border-top:1px solid rgba(255,232,184,0.12);
}
.account-section[hidden] {
  display:none;
}
.account-section-card,
.account-section-primary {
  margin-top:calc(12 * var(--u));
  padding:calc(14 * var(--u));
  border:1px solid rgba(255,232,184,0.16);
  border-radius:calc(12 * var(--u));
  background:rgba(255,235,210,0.045);
}
.account-section-card + .account-section-card {
  margin-top:calc(12 * var(--u));
}
.account-section-card .account-section-title {
  margin-bottom:calc(12 * var(--u));
}
.account-section-primary .account-info-row + .account-info-row {
  margin-top:calc(10 * var(--u));
}
.account-section-card .account-info-row + .account-info-row {
  margin-top:calc(10 * var(--u));
}
.account-subsection-title {
  margin-top:calc(14 * var(--u));
  color:rgba(255,224,178,0.58);
  font-size:calc(10.5 * var(--u));
  line-height:1.2;
  letter-spacing:0.12em;
}
.account-invite-subsection[hidden] {
  display:none;
}
.account-invite-subsection {
  margin-top:calc(22 * var(--u));
}
.account-panel-footer {
  margin-top:calc(42 * var(--u));
  padding-top:0;
}
.account-role-card {
  margin-top:calc(18 * var(--u));
  padding:calc(14 * var(--u));
  border:1px solid rgba(255,232,184,0.28);
  border-radius:calc(12 * var(--u));
  background:
    linear-gradient(to bottom, rgba(255,235,210,0.085), rgba(255,235,210,0.048)),
    rgba(255,235,210,0.045);
  box-shadow:
    inset 0 1px 0 rgba(255,246,230,0.055),
    0 0 calc(22 * var(--u)) rgba(255,190,100,0.08);
}
.account-role-title {
  margin-bottom:calc(12 * var(--u));
  color:rgba(255,224,178,0.66);
  font-size:calc(10.5 * var(--u));
  line-height:1.2;
  letter-spacing:0.12em;
}
.account-role-summary {
  display:grid;
  grid-template-columns:calc(48 * var(--u)) minmax(0, 1fr) auto;
  align-items:center;
  gap:calc(12 * var(--u));
}
.account-role-avatar {
  display:block;
  width:calc(48 * var(--u));
  height:calc(48 * var(--u));
  border:1px solid rgba(255,232,184,0.18);
  border-radius:50%;
  background:rgba(255,235,210,0.055);
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,235,210,0.045),
    0 10px 24px rgba(0,0,0,0.26);
}
.account-role-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.account-role-summary strong {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,246,230,0.94);
  font-size:calc(14 * var(--u));
  line-height:1.2;
  font-weight:650;
}
.account-inline-action {
  height:calc(32 * var(--u));
  padding:0 calc(12 * var(--u));
  border:1px solid rgba(255,232,184,0.26);
  border-radius:calc(9 * var(--u));
  background:rgba(255,218,160,0.075);
  color:rgba(255,239,211,0.82);
  font-family:var(--sans);
  font-size:calc(11.5 * var(--u));
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.account-records {
  padding-top:calc(18 * var(--u));
  border-top:1px solid rgba(255,232,184,0.12);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(18 * var(--u));
}
.account-records .account-info-row {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(6 * var(--u));
  min-width:0;
  font-size:calc(10 * var(--u));
  line-height:1.25;
}
.account-records .account-info-row span {
  display:flex;
  align-items:center;
  gap:calc(5 * var(--u));
  color:rgba(255,224,178,0.42);
  font-weight:400;
}
.account-help-icon {
  flex:0 0 calc(14 * var(--u));
  width:calc(14 * var(--u));
  height:calc(14 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,232,184,0.26);
  border-radius:50%;
  background:rgba(255,235,210,0.045);
  color:rgba(255,224,178,0.62);
  font-family:var(--sans);
  font-size:calc(9 * var(--u));
  line-height:1;
  font-weight:700;
  cursor:pointer;
}
.account-records .account-info-row strong {
  color:rgba(255,239,211,0.70);
  font-size:calc(12.5 * var(--u));
  font-weight:550;
}
.logout-action {
  width:100%;
  height:calc(40 * var(--u));
  margin-top:calc(14 * var(--u));
  border:1px solid rgba(255,232,184,0.20);
  border-radius:calc(10 * var(--u));
  background:rgba(255,235,210,0.065);
  color:rgba(255,239,211,0.88);
  font-family:var(--sans);
  font-size:calc(12 * var(--u));
  cursor:pointer;
}
.account-action-restart {
  background:rgba(255,235,210,0.055);
}
.account-action-secondary {
  margin-top:calc(10 * var(--u));
  border-color:rgba(255,232,184,0.36);
  background:rgba(255,218,160,0.14);
  color:rgba(255,246,230,0.94);
}
.account-action {
  height:calc(38 * var(--u));
  padding:0 calc(14 * var(--u));
  border:1px solid rgba(255,232,184,0.24);
  border-radius:calc(10 * var(--u));
  background:rgba(255,235,210,0.09);
  color:rgba(255,239,211,0.92);
  font-family:var(--sans);
  font-size:calc(12 * var(--u));
  cursor:pointer;
}
.account-action:disabled {
  cursor:default;
  opacity:0.45;
}
.invite-list {
  display:flex;
  flex-direction:column;
  gap:calc(8 * var(--u));
  margin-top:calc(12 * var(--u));
}
.entitlement-summary {
  margin-top:calc(12 * var(--u));
  padding:calc(10 * var(--u)) calc(12 * var(--u));
  border:1px solid rgba(255,232,184,0.14);
  border-radius:calc(12 * var(--u));
  background:rgba(255,200,130,0.075);
}
.entitlement-summary[hidden] {
  display:none;
}
.entitlement-row {
  display:flex;
  flex-direction:column;
  gap:calc(5 * var(--u));
}
.entitlement-row strong {
  color:rgba(255,246,230,0.94);
  font-size:calc(12.5 * var(--u));
  line-height:1.2;
  font-weight:650;
}
.entitlement-row span {
  color:rgba(255,224,178,0.56);
  font-size:calc(10.5 * var(--u));
  line-height:1.3;
}
.invite-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(12 * var(--u));
  min-height:calc(54 * var(--u));
  padding:0 calc(12 * var(--u));
  border-radius:calc(14 * var(--u));
  background:rgba(255,235,210,0.045);
}
.invite-code {
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,246,230,0.94);
  font-size:calc(13 * var(--u));
  line-height:1;
  font-weight:700;
  letter-spacing:0.08em;
}
.invite-state {
  flex:0 0 auto;
  color:rgba(255,224,178,0.58);
  font-size:calc(12 * var(--u));
  line-height:1;
  font-weight:650;
  letter-spacing:0.04em;
}
.invite-share-icon {
  flex:0 0 calc(34 * var(--u));
  width:calc(34 * var(--u));
  height:calc(34 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,232,184,0.22);
  border-radius:50%;
  background:rgba(255,235,210,0.055);
  color:rgba(255,239,211,0.82);
  cursor:pointer;
}
.invite-share-icon svg {
  width:calc(18 * var(--u));
  height:calc(18 * var(--u));
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.invite-share-icon:hover {
  color:rgba(255,246,230,0.96);
  border-color:rgba(255,232,184,0.42);
}
.account-info-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(12 * var(--u));
  padding:0;
  font-size:calc(11.5 * var(--u));
}
.account-info-row strong {
  color:rgba(255,239,211,0.86);
  font-weight:550;
}
.account-info-row .account-state {
  color:rgba(255,224,178,0.58);
}
.account-toast {
  min-height:calc(17 * var(--u));
  margin-top:calc(12 * var(--u));
  color:rgba(255,224,178,0.72);
  font-size:calc(11 * var(--u));
  text-align:center;
  opacity:0;
  transition:opacity 0.18s ease;
}
.account-toast.visible { opacity:1; }

/* ---- 登录页 登录激活视图：账号面板同款暗色玻璃系统界面 ---- */
.login-demo-view {
  position:absolute;
  inset:0;
  z-index:80;
  overflow:hidden;
  background:var(--phone-bg);
  color:rgba(255,239,211,0.94);
  font-family:var(--sans);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.28s ease, visibility 0s linear 0.28s;
}
.login-demo-view.visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 0.28s ease, visibility 0s;
}
.login-world-preview,
.login-gate-mask {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.login-world-preview {
  z-index:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.72), rgba(0,0,0,0.24) 50%, rgba(0,0,0,0.82)),
    url('../../src/images/cj5.jpg') 62% center/cover no-repeat;
  opacity:0.14;
  filter:blur(calc(22 * var(--u))) brightness(0.54) saturate(0.86);
  transform:scale(1.08);
  transition:opacity 0.8s ease, filter 0.8s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.login-gate-mask {
  z-index:1;
  background:
    radial-gradient(ellipse 92% 22% at 50% -2%, rgba(255,215,142,0.042), rgba(255,235,210,0.016) 30%, transparent 58%),
    radial-gradient(ellipse 110% 28% at 50% 102%, rgba(255,205,125,0.26), rgba(255,235,210,0.095) 36%, transparent 68%),
    linear-gradient(to bottom, rgba(0,0,0,0.94), rgba(4,5,11,0.91) 42%, rgba(0,0,0,0.94));
}
.login-gate-mask::before {
  content:none;
}
.login-demo-view.activation-open .login-world-preview {
  opacity:0.78;
  filter:blur(calc(5 * var(--u))) brightness(0.96) saturate(0.98);
  transform:scale(1.02);
}
.login-demo-view.activation-open .login-gate-mask {
  background:
    radial-gradient(circle at 50% 54%, rgba(255,215,142,0.13), transparent 38%),
    linear-gradient(to bottom, rgba(0,0,0,0.54), rgba(8,7,12,0.22) 50%, rgba(0,0,0,0.58));
}
#login-c-glow { z-index:2; filter:blur(calc(9 * var(--u))); opacity:0.95; }
#login-c { z-index:3; opacity:1; }

.login-content {
  position:absolute;
  left:50%;
  width:88%;
  max-width:360px;
  z-index:6;
  display:none;
  flex-direction:column;
  opacity:0;
  transform:translate(-50%, calc(8 * var(--u)));
  transition:opacity 0.28s ease, transform 0.28s ease;
}
.login-content.active {
  display:flex;
  opacity:1;
  transform:translate(-50%, 0);
}
.login-content-main {
  top:24%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.login-content-activation,
.login-content-character,
.login-content-confirm,
.login-content-info {
  top:50%;
  padding:28px 22px 22px;
  border:1px solid rgba(255,235,210,0.16);
  border-radius:16px;
  background:
    linear-gradient(to bottom, rgba(16,17,25,0.92), rgba(10,11,18,0.86)),
    rgba(10,11,18,0.88);
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.035),
    0 0 48px rgba(255,215,0,0.08),
    0 28px 80px rgba(0,0,0,0.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transform:translate(-50%, calc(-50% + 8 * var(--u)));
}
.login-content-activation.active,
.login-content-character.active,
.login-content-confirm.active,
.login-content-info.active {
  transform:translate(-50%, -50%);
}
.login-title {
  margin:0 0 34px;
  color:#ffffff;
  font-size:27px;
  line-height:1.18;
  font-weight:600;
  letter-spacing:0.02em;
  text-shadow:
    0 2px 24px rgba(255,215,0,0.10),
    0 16px 44px rgba(0,0,0,0.56);
}
.login-content-activation .login-title,
.login-content-character .login-title,
.login-content-confirm .login-title {
  margin-bottom:16px;
  font-size:24px;
}
.account-confirm-message {
  color:rgba(255,239,211,0.76);
  font-size:14px;
  line-height:1.62;
}
.account-confirm-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px;
}
.account-confirm-cancel,
.account-confirm-submit {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:46px;
  margin-top:0;
  line-height:1;
}
.account-confirm-actions .login-primary-btn {
  height:46px;
  margin-top:0;
}
.account-confirm-actions .login-primary-btn.active:active {
  transform:none;
}
.account-confirm-cancel {
  border:1px solid rgba(255,232,184,0.16);
  border-radius:12px;
  background:rgba(255,235,210,0.055);
  color:rgba(255,239,211,0.72);
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.login-content-info {
  padding:calc(54 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
}
.account-info-close {
  position:absolute;
  top:calc(12 * var(--u));
  right:calc(12 * var(--u));
  width:calc(30 * var(--u));
  height:calc(30 * var(--u));
  border:1px solid rgba(255,232,184,0.16);
  border-radius:50%;
  background:rgba(255,235,210,0.05);
  color:rgba(255,235,210,0.68);
  font-size:calc(20 * var(--u));
  line-height:1;
  cursor:pointer;
}
.account-info-dialog-text {
  margin:0;
  padding-left:calc(18 * var(--u));
  color:rgba(255,239,211,0.76);
  font-size:calc(11.5 * var(--u));
  line-height:1.58;
  font-weight:400;
}
.account-info-dialog-text li {
  margin:0 0 calc(10 * var(--u));
  padding-left:calc(2 * var(--u));
}
.account-info-dialog-text li:last-child {
  margin-bottom:0;
}
.character-picker {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:2px;
}
.character-option {
  flex:0 0 auto;
  width:92px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(255,239,211,0.82);
  font-family:var(--sans);
  cursor:pointer;
}
.character-avatar {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  margin:0 auto 10px;
  border:1px solid rgba(255,232,184,0.18);
  border-radius:50%;
  background:rgba(255,235,210,0.055);
  box-shadow:
    inset 0 1px 0 rgba(255,235,210,0.045),
    0 14px 32px rgba(0,0,0,0.32);
  overflow:hidden;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.character-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.character-name {
  display:block;
  min-height:18px;
  color:rgba(255,224,178,0.68);
  font-size:13px;
  line-height:1.35;
  text-align:center;
  transition:color 0.2s ease;
}
.character-option:hover .character-avatar,
.character-option.selected .character-avatar {
  border-color:rgba(255,232,184,0.62);
  box-shadow:
    inset 0 1px 0 rgba(255,235,210,0.08),
    0 16px 36px rgba(0,0,0,0.36),
    0 0 24px rgba(255,190,100,0.18);
  transform:translateY(-1px);
}
.character-option.selected .character-name {
  color:rgba(255,246,230,0.96);
}
.character-option:disabled {
  cursor:default;
  opacity:0.45;
}
.login-fields {
  display:none;
  flex-direction:column;
  gap:12px;
}
.login-fields.active { display:flex; }
.login-input-wrap {
  display:flex;
  align-items:center;
  height:52px;
  border:1px solid rgba(255,232,184,0.16);
  border-radius:12px;
  background:rgba(23,18,14,0.86);
  box-shadow:
    inset 0 1px 0 rgba(255,235,210,0.035),
    0 10px 30px rgba(0,0,0,0.30),
    0 0 18px rgba(255,190,100,0.035);
  overflow:hidden;
  transition:background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.login-input-wrap:focus-within {
  background:rgba(30,23,17,0.90);
  border-color:rgba(255,232,184,0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,235,210,0.05),
    0 0 24px rgba(255,190,100,0.12),
    0 10px 30px rgba(0,0,0,0.32);
}
.login-input-wrap.shake { animation:loginShake 0.32s ease-in-out; }
@keyframes loginShake {
  0%, 100% { transform:translateX(0); }
  20% { transform:translateX(calc(-5 * var(--u))); }
  40% { transform:translateX(calc(5 * var(--u))); }
  60% { transform:translateX(calc(-4 * var(--u))); }
  80% { transform:translateX(calc(3 * var(--u))); }
}
.login-country-code {
  flex:0 0 auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border-right:1px solid rgba(255,232,184,0.13);
  color:rgba(255,239,211,0.88);
  font-size:16px;
  font-weight:500;
  letter-spacing:0.02em;
}
.login-input {
  flex:1;
  min-width:0;
  height:100%;
  padding:0 16px;
  border:0;
  outline:0;
  background:transparent;
  color:rgba(255,246,230,0.94);
  caret-color:rgba(255,246,230,0.94);
  font:inherit;
  font-size:16px;
  font-weight:500;
  letter-spacing:0.02em;
}
.login-input::placeholder {
  color:rgba(255,224,178,0.38);
  font-weight:400;
  letter-spacing:0.05em;
}
.login-inline-action {
  flex:0 0 auto;
  height:100%;
  margin-right:0;
  padding:0 16px;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(255,239,211,0.88);
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.login-inline-action:hover:not(:disabled) {
  color:rgba(255,246,230,0.98);
}
.login-inline-action:disabled {
  color:rgba(255,224,178,0.40);
  cursor:default;
}
.login-error-text {
  min-height:16px;
  margin-top:10px;
  color:rgba(255,130,112,0.86);
  font-size:12px;
  line-height:1.45;
  opacity:0;
  transition:opacity 0.2s ease;
}
.login-error-text.visible { opacity:1; }
.login-primary-btn {
  width:100%;
  height:52px;
  margin-top:24px;
  border:1px solid rgba(255,232,184,0.16);
  border-radius:12px;
  background:rgba(23,18,14,0.86);
  color:rgba(255,224,178,0.34);
  font-family:var(--sans);
  font-size:16px;
  font-weight:600;
  letter-spacing:0.02em;
  cursor:default;
  box-shadow:
    inset 0 1px 0 rgba(255,235,210,0.035),
    0 10px 30px rgba(0,0,0,0.28),
    0 0 18px rgba(255,190,100,0.035);
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.08s ease;
}
.login-primary-btn.active {
  background:linear-gradient(90deg, rgba(255,246,226,0.94), rgba(239,208,151,0.86));
  border-color:rgba(255,232,184,0.82);
  color:rgba(45,30,16,0.98);
  box-shadow:
    0 0 28px rgba(255,215,142,0.24),
    0 14px 36px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.22);
  cursor:pointer;
}
.login-primary-btn.active:active {
  transform:translateY(calc(1 * var(--u)));
}
.login-switch-link {
  align-self:center;
  margin-top:14px;
  border:0;
  background:transparent;
  color:rgba(255,224,178,0.58);
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:color 0.2s ease;
}
.login-switch-link:hover {
  color:rgba(255,246,230,0.92);
}
.login-status-text {
  min-height:calc(17 * var(--u));
  margin-top:calc(10 * var(--u));
  color:rgba(255,224,178,0.72);
  font-size:calc(11 * var(--u));
  line-height:1.45;
  text-align:center;
  opacity:0;
  transition:opacity 0.18s ease;
}
.login-status-text.visible { opacity:1; }
.history-empty {
  margin-top: calc(30 * var(--u));
  text-align: center;
  font-family: var(--sans);
  font-size: calc(12 * var(--u));
  color: rgba(255,235,210,0.46);
  letter-spacing: 0.12em;
}
.history-row {
  display: flex;
  margin: calc(7 * var(--u)) 0 0;
}
.history-row:first-child { margin-top: 0; }
.history-row.history-after-same { margin-top: calc(7 * var(--u)); }
.history-row.history-speaker-change { margin-top: calc(16 * var(--u)); }
.history-row.history-round-start { margin-top: calc(24 * var(--u)); }
.history-row.history-him { justify-content: flex-start; }
.history-row.history-you { justify-content: flex-end; }
.history-bubble {
  font-family: var(--sans);
  max-width: calc(214 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(14 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.52;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
  border:1px solid rgba(255,235,210,0.13);
  box-shadow: 0 0 calc(15 * var(--u)) rgba(0,0,0,0.32), 0 1px calc(2 * var(--u)) rgba(0,0,0,0.25);
  text-shadow:
    0 1px 1px rgba(0,0,0,1),
    0 0 calc(8 * var(--u)) rgba(0,0,0,0.82);
}
.history-him .history-bubble {
  color: rgba(235,240,255,0.95);
  background: rgba(31,31,49,0.72);
  border-top-left-radius: calc(6 * var(--u));
}
.history-him.history-after-same .history-bubble {
  color: rgba(232,238,255,0.9);
  background: rgba(31,31,49,0.64);
}
.history-you .history-bubble {
  color: rgba(255,255,255,1);
  background: rgba(78,51,31,0.84);
  border-color:rgba(255,226,184,0.2);
  box-shadow:
    0 0 calc(15 * var(--u)) rgba(255,184,105,0.1),
    0 0 calc(15 * var(--u)) rgba(0,0,0,0.32),
    0 1px calc(2 * var(--u)) rgba(0,0,0,0.28);
  border-top-right-radius: calc(6 * var(--u));
}
.stage.screenshot-generator-mode .history-bubble {
  max-width: calc(246 * var(--u));
  padding: calc(9 * var(--u)) calc(13 * var(--u));
  font-size: calc(15.2 * var(--u));
}
.stage.screenshot-generator-mode .stage-goal,
.stage.screenshot-generator-mode .account-entry,
.stage.screenshot-generator-mode .narration-zone,
.stage.screenshot-generator-mode .bubble-zone,
.stage.screenshot-generator-mode .typing-layer,
.stage.screenshot-generator-mode .voice-hint,
.stage.screenshot-generator-mode .arc-hint,
.stage.screenshot-generator-mode .insight-orb,
.stage.screenshot-generator-mode #c,
.stage.screenshot-generator-mode #c-glow {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.stage.screenshot-generator-mode .history-anchor {
  opacity: 0.86;
  visibility: visible;
  pointer-events: auto;
}

/* ---- 移动端 ---- */
.menu-toggle {
  display:none; position:fixed; top:calc(12px + var(--sat)); left:50%; transform:translateX(-50%);
  z-index:3100; width:40px; height:40px; border-radius:10px; border:none;
  background:rgba(255,235,210,0.08); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0;
}
.menu-toggle span { display:block; width:18px; height:1.5px; background:rgba(255,235,210,0.6); border-radius:1px; transition:transform 0.3s,opacity 0.3s; }
.menu-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; }
.menu-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.drawer-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:2900; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.drawer-backdrop.visible { opacity:1; pointer-events:auto; }
.drawer { display:none; position:fixed; top:0; left:0; bottom:0; width:240px; background:rgba(20,20,40,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:3000; padding:68px 16px 24px; overflow-y:auto; transform:translateX(-100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.drawer.open { transform:translateX(0) !important; }

/* ---- 历史面板打开期间：主屏所有"会冒新内容"的层临时藏起来，避免穿帮 ---- */
.stage.main-stage-frozen .stage-goal,
.stage.main-stage-frozen .narration-zone,
.stage.main-stage-frozen .bubble-zone,
.stage.main-stage-frozen .typing-layer {
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
}

/* ---- 文字层 ⑨：旁白 / 角色动作（narration-zone）+ 对话气泡（bubble-zone） ---- */
/* ④ 固定中心线：容器中心锚在角色表现区下半段，内容以此为中心向上下两边对称展开 */
.narration-zone {
  position:absolute; left:50%; top:58%; width:88%;
  transform:translate(-50%, -50%);
  text-align:center; z-index:2; pointer-events:none;
}
.narration {
  display:inline-block; position:relative; max-width:100%; margin:0;
  font-family: var(--serif); font-style:italic; font-weight:300;
  font-size:calc(13.5 * var(--u)); line-height:1.86; letter-spacing:0.055em;
  color:rgba(255,240,218,0.88);
  text-shadow:0 0 5px rgba(0,0,0,0.76), 0 1px 0 rgba(0,0,0,0.58);
  opacity:0; transition:opacity 0.7s ease, filter 0.25s ease; z-index:0;
}
.narration.visible { opacity:1; }
/* 角色动作：偏蓝紫的白（他的主题色），跟旁白的香槟金和用户气泡的纯白区分 */
.narration.narration-action { color:rgba(205,214,255,0.9); }
/* ⑤ 暗带：保持可读性，但降低厚重感，上下用渐变羽化融入画面 */
.narration.line-banner:not(:empty)::before {
  content:''; position:absolute; left:-50vw; right:-50vw;
  top:calc(-20 * var(--u)); bottom:auto; height:var(--banner-h, 0);
  background:linear-gradient(to bottom,
    rgba(6,6,12,0) 0,
    rgba(10,10,18,0.62) calc(14 * var(--u)),
    rgba(10,10,18,0.62) calc(100% - 14 * var(--u)),
    rgba(6,6,12,0) 100%);
  z-index:-1; pointer-events:none;
  transition:height 0.55s cubic-bezier(0.22,0.61,0.36,1);
}
.narration.narration-action.line-banner:not(:empty)::before {
  background:linear-gradient(to bottom,
    rgba(38,35,54,0) 0,
    rgba(31,31,49,0.58) calc(14 * var(--u)),
    rgba(31,31,49,0.58) calc(100% - 14 * var(--u)),
    rgba(38,35,54,0) 100%);
}
.gen-chunk { display:inline; }
.gen-chunk.pending { opacity:0; }
.gen-chunk.reveal {
  opacity:1; animation:chunkRise 0.7s ease forwards;
}
@keyframes chunkRise {
  from { opacity:0; transform:translateY(calc(4 * var(--u))); filter:blur(2px); }
  to   { opacity:1; transform:translateY(0);   filter:blur(0); }
}
.narration.drifting { animation:narrDrift 1s ease forwards; }
@keyframes narrDrift {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0; transform:translateY(calc(-14 * var(--u))); }
}

/* ---- 弧顶输入提示轮播：贴在圆弧顶端正上方，跟弧一起呼吸/出现/消失 ---- */
/* 弧顶输入提示：位置由 JS 用圆弧真实顶点逐帧写入，文字动画不改变锚点。 */
.arc-hint {
  position:absolute; left:50%; top:0;
  transform:translate(-50%, calc(var(--arc-hint-y, 76vh) - 100%));
  width:max-content; max-width:86%;
  z-index:16; pointer-events:none;
  opacity:0; transition:opacity 0.6s ease;
}
.arc-hint.visible { opacity:1; }
.arc-hint-breath { will-change:auto; }
/* 单条文字：只做淡入淡出，不改相对圆弧的位置。 */
.arc-hint-item {
  display:inline-block; white-space:nowrap;
  font-family: var(--sans); font-style:normal; font-weight:500;
  font-size:calc(12.5 * var(--u)); letter-spacing:0.06em;
  color:rgba(255,242,220,0.88);
  text-shadow:0 0 5px rgba(0,0,0,0.72), 0 1px 0 rgba(0,0,0,0.54);
  opacity:0;
}
.arc-hint-item.enter { animation: arcHintIn 0.55s ease forwards; }
.arc-hint-item.leave { animation: arcHintOut 0.55s ease forwards; }
@keyframes arcHintIn {
  from { opacity:0; filter:blur(2px); }
  to   { opacity:1; filter:blur(0); }
}
@keyframes arcHintOut {
  from { opacity:1; }
  to   { opacity:0; }
}

/* ---- 锦囊光球：固定在输入弧右上区域，默认收起为彩色灵感球 ---- */
.insight-orb {
  position:absolute;
  right:calc(18 * var(--u));
  bottom:calc(178 * var(--u));
  z-index:26;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  height:calc(40 * var(--u));
  max-width:calc(72% - 24 * var(--u));
  padding:0;
  border:0;
  border-radius:calc(20 * var(--u));
  background:transparent;
  color:rgba(255,255,255,0.94);
  font-family:var(--sans);
  cursor:pointer;
  pointer-events:auto;
  opacity:0;
  --insight-orb-y:calc(6 * var(--u));
  --insight-orb-scale:0.82;
  transform:translateY(var(--insight-orb-y)) scale(var(--insight-orb-scale));
  transition:opacity 0.28s ease, filter 0.25s ease;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.stage.arc-mode-bottom-glow .insight-orb {
  bottom:calc(112 * var(--u));
}
.insight-orb::after {
  content:'';
  position:absolute;
  right:calc(-4 * var(--u));
  top:50%;
  z-index:1;
  width:calc(50 * var(--u));
  height:calc(50 * var(--u));
  border-radius:50%;
  transform:translateY(-50%) scale(0.9);
  border:0;
  box-shadow:none;
  opacity:0;
  pointer-events:none;
}
.insight-orb.available {
  opacity:0.72;
  --insight-orb-scale:1;
  filter:saturate(0.78) brightness(0.88);
}
.insight-orb.available.expanded {
  opacity:1;
  filter:saturate(1) brightness(1);
}
.insight-orb.available.pending {
  opacity:1;
  filter:saturate(1.28) brightness(1.16);
}
.insight-orb.available.pending::after {
  box-shadow:
    0 0 calc(20 * var(--u)) rgba(117,225,255,0.34),
    0 0 calc(36 * var(--u)) rgba(255,111,209,0.28),
    0 0 calc(52 * var(--u)) rgba(255,199,93,0.22);
  opacity:1;
  filter:blur(calc(3 * var(--u)));
  animation:insightHaloPulse 2.8s ease-in-out infinite;
}
.insight-orb:not(.available) {
  pointer-events:none;
}
.insight-orb.temporarily-hidden {
  opacity:0 !important;
  pointer-events:none;
}
.insight-core {
  position:relative;
  z-index:2;
  width:calc(38 * var(--u));
  height:calc(38 * var(--u));
  flex:0 0 calc(38 * var(--u));
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.94) 0 calc(4 * var(--u)), transparent calc(4.6 * var(--u))),
    conic-gradient(from 35deg, #64f6ff, #8b7cff, #ff66c4, #ffbd59, #72ffb6, #64f6ff);
  box-shadow:
    0 0 calc(12 * var(--u)) rgba(117,225,255,0.34),
    0 0 calc(18 * var(--u)) rgba(255,111,209,0.2),
    0 0 calc(26 * var(--u)) rgba(255,199,93,0.12),
    inset 0 0 calc(12 * var(--u)) rgba(255,255,255,0.16);
  border:1px solid rgba(255,250,220,0.36);
  overflow:hidden;
  animation:insightCoreSpin 12s linear infinite, insightCorePulse 4.4s ease-in-out infinite;
}
.insight-orb.available:not(.expanded):not(.pending) .insight-core {
  box-shadow:
    0 0 calc(9 * var(--u)) rgba(117,225,255,0.26),
    0 0 calc(14 * var(--u)) rgba(255,111,209,0.14),
    0 0 calc(19 * var(--u)) rgba(255,199,93,0.1),
    inset 0 0 calc(11 * var(--u)) rgba(255,255,255,0.13);
  border-color:rgba(255,250,220,0.58);
}
.insight-orb.available.pending .insight-core {
  box-shadow:
    0 0 calc(18 * var(--u)) rgba(117,225,255,0.58),
    0 0 calc(28 * var(--u)) rgba(255,111,209,0.42),
    0 0 calc(40 * var(--u)) rgba(255,199,93,0.28),
    inset 0 0 calc(15 * var(--u)) rgba(255,255,255,0.28);
  border-color:rgba(255,252,226,0.08);
  animation:insightCoreSpin 9s linear infinite, insightCoreAttention 2.8s ease-in-out infinite;
}
.insight-core::before {
  content:'';
  position:absolute;
  inset:calc(5 * var(--u));
  border-radius:50%;
  background:
    radial-gradient(circle at 68% 64%, rgba(255,255,255,0.36), transparent calc(9 * var(--u))),
    radial-gradient(circle at 38% 38%, rgba(20,25,46,0.08), rgba(25,18,55,0.38));
  filter:blur(calc(1 * var(--u)));
}
.insight-shine {
  position:absolute;
  inset:calc(-8 * var(--u));
  border-radius:50%;
  background:linear-gradient(115deg, transparent 18%, rgba(255,255,255,0.38) 44%, transparent 62%);
  animation:insightShine 3.6s ease-in-out infinite;
}
.insight-panel {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  min-width:0;
  width:max-content;
  max-width:calc(100vw - 82 * var(--u));
  height:calc(36 * var(--u));
  overflow:hidden;
  text-align:left;
  padding:0 calc(42 * var(--u)) 0 calc(15 * var(--u));
  margin-right:calc(-24 * var(--u));
  border:1px solid rgba(245,226,180,0.56);
  border-radius:calc(17 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)) calc(17 * var(--u));
  background:
    linear-gradient(100deg,
      rgba(236,248,232,0.88),
      rgba(247,226,232,0.84) 42%,
      rgba(246,224,181,0.88) 72%,
      rgba(242,229,197,0.9));
  box-shadow:
    0 0 calc(8 * var(--u)) rgba(100,246,255,0.14),
    0 0 calc(12 * var(--u)) rgba(255,102,196,0.12),
    0 0 calc(16 * var(--u)) rgba(255,189,89,0.1),
    0 1px calc(2 * var(--u)) rgba(0,0,0,0.34);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:calc(10.5 * var(--u));
  line-height:1.3;
  letter-spacing:0.08em;
  color:var(--system-panel-text);
  opacity:0;
  transform:translateX(calc(12 * var(--u))) scaleX(0.82);
  transform-origin:right center;
  pointer-events:none;
  transition:opacity 0.22s ease, transform 0.3s cubic-bezier(0.22,0.61,0.36,1), max-width 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
}
.insight-panel::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(100deg,
    rgba(100,246,255,0.12),
    transparent 32%,
    rgba(255,102,196,0.1) 52%,
    rgba(255,189,89,0.12) 82%);
  pointer-events:none;
}
.insight-panel::after {
  content:'';
  position:absolute;
  right:calc(25 * var(--u));
  top:50%;
  width:calc(26 * var(--u));
  height:calc(24 * var(--u));
  border-radius:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle,
    rgba(100,246,255,0.22),
    rgba(255,102,196,0.14) 48%,
    transparent 72%);
  filter:blur(calc(4 * var(--u)));
  opacity:0.6;
  pointer-events:none;
}
.insight-orb.expanded .insight-panel {
  opacity:1;
  transform:translateX(0) scaleX(1);
  pointer-events:auto;
}
.insight-text {
  display:block;
  font-size:calc(10.5 * var(--u));
  line-height:1.3;
  letter-spacing:0.08em;
  color:var(--system-panel-text);
  text-shadow:none;
}
.insight-orb:not(.expanded) .insight-panel {
  max-width:0;
  padding-left:0;
  padding-right:0;
  margin-right:0;
  border-width:0;
}
.insight-orb:focus-visible {
  outline:1px solid rgba(144,236,255,0.72);
  outline-offset:calc(4 * var(--u));
}
@keyframes insightCoreSpin {
  to { filter:hue-rotate(360deg); }
}
@keyframes insightCorePulse {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.045); }
}
@keyframes insightCoreAttention {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.09); }
}
@keyframes insightHaloPulse {
  0%, 100% { opacity:0.48; transform:translateY(-50%) scale(0.9); }
  50% { opacity:1; transform:translateY(-50%) scale(1.16); }
}
@keyframes insightShine {
  0%, 100% { transform:translateX(calc(-16 * var(--u))) rotate(0deg); opacity:0.18; }
  50% { transform:translateX(calc(14 * var(--u))) rotate(18deg); opacity:0.42; }
}

/* ① 气泡 · 暖灰墨纸：跟历史面板共用一种介质；底色明显，靠文字色区分说话人 */
.bubble-zone { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.bubble {
  /* 宽度跟随内容（max-content），上限 286 → 触顶换 2 行，内容区 254 → 15 字/行 → 2 行 30 字容量。 */
  position:absolute; width:max-content; max-width:calc(286 * var(--u)); min-width:calc(80 * var(--u));
  --stack-shift: 0px;
  --enter-y: 0px;
  --breath-y: 0px;
  transform: translate(-50%, calc(var(--stack-shift) + var(--enter-y) + var(--breath-y)));
  padding:calc(9.5 * var(--u)) calc(15 * var(--u)); border-radius:calc(17 * var(--u));
  font-family: var(--sans); font-size:calc(15.5 * var(--u)); line-height:1.52; font-weight:500;
  letter-spacing:0.045em; text-align:center; white-space:normal;
  opacity:0; transition: --stack-shift 0.45s ease, --enter-y 0.45s ease, opacity 0.45s ease, filter 0.25s ease;
}
.bubble.visible { opacity:1; }
.bubble.bubble-char { --enter-y: calc(28 * var(--u)); }
.bubble.bubble-char.settled { --enter-y: 0px; }
/* 呼吸：上下浮动 ±0/-3，周期 4.2s（和底部弧 arcBreathPeriod 同源） */
.bubble.bubble-char.settled:not(.drifting) { animation: bubbleBreath 4.2s ease-in-out infinite; }
@keyframes bubbleBreath {
  0%, 100% { --breath-y: 0px; }
  50%      { --breath-y: calc(-3 * var(--u)); }
}
/* 用户气泡走 inline transform（slide-in），保留 transform transition */
.bubble.bubble-user { transition: opacity 0.45s ease, transform 0.5s ease; }
/* 用户输入暂态把旁白 + 角色气泡压暗一档 */
.bubble.dimmed-for-recording,
.narration.dimmed-for-recording {
  filter: opacity(0.5);
}
.bubble-char {
  color:rgba(235,240,255,0.94);
  background:var(--role-ink);
  border:1px solid var(--role-line);
  box-shadow:0 0 16px rgba(0,0,0,0.36), 0 1px 2px rgba(0,0,0,0.24);
  text-shadow:0 1px 2px rgba(0,0,0,0.78), 0 0 6px rgba(0,0,0,0.5);
}
.bubble-user {
  color:rgba(255,255,255,1);
  background:var(--user-warm);
  border:1px solid rgba(255,226,184,0.19);
  box-shadow:0 0 16px rgba(255,184,105,0.09), 0 0 16px rgba(0,0,0,0.34), 0 1px 2px rgba(0,0,0,0.24);
  text-shadow:0 1px 2px rgba(0,0,0,0.78), 0 0 6px rgba(0,0,0,0.46);
}
.bubble.drifting { animation:bubbleDrift 1s ease forwards; }
@keyframes bubbleDrift {
  from { opacity:0.85; transform:translate(-50%, var(--stack-shift, 0px)); filter:blur(0); }
  to   { opacity:0;    transform:translate(-50%, calc(var(--stack-shift, 0px) - 14 * var(--u))); filter:blur(0.8px); }
}

@media (max-width: 768px) {
  :root { --bg: #070811; }
  .desktop-wrap { display:block; width:100%; height:100%; }
  .desktop-wrap > .nav-panel { display:none; }
  .phone-frame { width:100%; height:100%; border-radius:0; box-shadow:none; }
  .phone-notch, .phone-home { display:none; }
  .menu-toggle { display:none; }
  .drawer-backdrop { display:block; }
  .drawer { display:block; }
  .drawer .nav-panel { width:100%; }
  .drawer .nav-item { padding:10px 10px 10px 26px; }
}