/* ══════════════════════════════════════════════════════════════
   Aha · 设计系统（计划第三章令牌）
   纪律：橙是界面的能量(UI)，金是内容里的光(回复正文)，除此无第三彩色。
   动画只用 transform / opacity。
   ══════════════════════════════════════════════════════════════ */
:root {
  --bg-void:  #0B0C10;
  --bg-panel: #12141B;
  --bg-elev:  #1A1D26;
  --ink-hi:   #F2F0EA;
  --ink-mid:  #9AA0AE;
  --ink-low:  #5A6072;
  --aha:      #FF5C28;
  --aha-soft: rgba(255, 92, 40, .12);
  --gold:     #F7C948;
  --line:     rgba(255, 255, 255, .07);

  --font-display: ui-serif, 'New York', 'Songti SC', 'Noto Serif SC', serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-door:   cubic-bezier(0.22, 1, 0.36, 1);

  --void-glow: radial-gradient(120% 80% at 50% 42%, #14161F 0%, var(--bg-void) 60%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-void);
  color: var(--ink-hi);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

.stage { position: fixed; inset: 0; }

/* ══════ 舱内主界面 = 对话舱 ══════════════════════════════════ */
.main {
  position: absolute; inset: 0; z-index: 0;
  background: var(--void-glow);
  display: flex; flex-direction: column;
  /* 顶部留呼吸，底部交给 composer */
  padding-top: env(safe-area-inset-top);
}

/* 顶栏：极简，只放品牌字（侧边栏按钮批次 3 加） */
.topbar {
  flex: 0 0 auto;
  height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 300; letter-spacing: .06em;
  color: var(--aha); opacity: .9;
  position: relative;
}
.topbar::after {
  content: ''; position: absolute; left: 24px; right: 24px; bottom: 0;
  height: 1px; background: var(--line);
}

/* 消息滚动区 */
.scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: auto;
}
.thread {
  max-width: 720px; margin: 0 auto;
  padding: 24px 18px 8px;
  display: flex; flex-direction: column; gap: 18px;
}

/* 空状态：宣言大字 */
.empty {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 32px 28px;
  gap: 14px;
}
.empty .manifesto {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(23px, 6.6vw, 31px); line-height: 1.5;
  letter-spacing: .01em; max-width: 15em;
}
.empty .manifesto em { font-style: italic; color: var(--gold); }
.empty .hint { font-size: 14px; color: var(--ink-mid); letter-spacing: .04em; }
.empty.hidden { display: none; }

/* 消息气泡 */
.msg { display: flex; max-width: 100%; animation: rise 240ms var(--ease-out) backwards; }
.msg.user { justify-content: flex-end; }
.msg.aha  { justify-content: flex-start; }

.bubble {
  max-width: 86%;
  font-size: 16px; line-height: 1.7;
  word-break: break-word; white-space: pre-wrap;
}
/* 用户：离子橙软底胶囊，指向角 */
.msg.user .bubble {
  background: var(--aha-soft);
  color: var(--ink-hi);
  padding: 11px 15px;
  border-radius: 16px 16px 4px 16px;
}
/* Aha：浮起surface，借色阶+描边，不投影（暗色纪律）；指向角在左 */
.msg.aha .bubble {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink-hi);
  padding: 13px 16px;
  border-radius: 16px 16px 16px 4px;
  white-space: normal;            /* aha 走 md 渲染，自己管换行 */
}

/* md 渲染：鎏金强调 = 内容的光 */
.bubble strong {
  color: var(--gold); font-weight: 600;
  text-shadow: 0 0 12px rgba(247, 201, 72, .22);
}
.bubble p { margin: 0 0 .6em; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul { margin: .3em 0 .6em; padding-left: 1.25em; }
.bubble li { margin: .2em 0; }
.bubble blockquote {
  font-family: var(--font-display); font-style: italic;
  color: var(--ink-hi);
  border-left: 1px solid var(--aha);
  padding-left: 12px; margin: .4em 0;
}

/* 等待波形「高能注入中…」 */
.wave { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-mid); }
.wave .dots { display: inline-flex; gap: 5px; }
.wave .dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--aha); display: block;
  animation: pulse 1.2s var(--ease-out) infinite;
}
.wave .dots i:nth-child(2) { animation-delay: .18s; }
.wave .dots i:nth-child(3) { animation-delay: .36s; }
.wave .label { font-size: 14px; letter-spacing: .04em; }

/* 流式光标（M7）：字尾呼吸竖线 */
.cursor {
  display: inline-block; width: 2px; height: 1.05em;
  background: var(--aha); margin-left: 2px;
  vertical-align: text-bottom; border-radius: 1px;
  animation: blink 1.2s steps(1,end) infinite;
}

/* 错误气泡：可点重试 */
.msg.aha .bubble.error {
  background: transparent; border: 1px dashed rgba(255,92,40,.5);
  color: var(--ink-mid); cursor: pointer;
}
.msg.aha .bubble.error:active { transform: scale(.99); }

/* 回到最新 胶囊 */
.jump {
  position: absolute; left: 50%; bottom: 96px;
  transform: translateX(-50%) translateY(8px);
  background: var(--bg-elev); border: 1px solid var(--line);
  color: var(--ink-hi); font-size: 13px; letter-spacing: .03em;
  padding: 8px 16px; border-radius: 999px;
  display: flex; align-items: center; gap: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-spring);
  z-index: 5; cursor: pointer;
}
.jump.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.jump svg { width: 14px; height: 14px; }

/* 输入条 composer */
.composer {
  flex: 0 0 auto;
  padding: 10px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(to top, var(--bg-void) 72%, transparent);
}
.composer-inner {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 6px 6px 6px 16px;
  transition: border-color 200ms var(--ease-out);
}
.composer-inner:focus-within { border-color: rgba(255,92,40,.45); }
.composer textarea {
  flex: 1 1 auto;
  background: transparent; border: none; outline: none; resize: none;
  color: var(--ink-hi); font-family: var(--font-body);
  font-size: 16px; line-height: 1.5;       /* ≥16px 防 iOS 缩放 */
  max-height: 120px; padding: 7px 0;
}
.composer textarea::placeholder { color: var(--ink-low); }
.send {
  flex: 0 0 auto;
  height: 38px; min-width: 56px; padding: 0 16px;
  border: none; border-radius: 16px;
  background: var(--aha); color: #1A0E08;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
  transition: transform 120ms var(--ease-spring), opacity 200ms ease;
}
.send:active { transform: scale(.96); }
.send:disabled { opacity: .35; cursor: default; }

/* ══════ 舱门（PIN，批次 1，原样保留）══════════════════════════ */
.door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  z-index: 10; will-change: transform;
  transition: transform 600ms var(--ease-door);
}
.door-left  { left: 0;
  background: radial-gradient(135% 90% at 100% 42%, #14161F 0%, var(--bg-void) 60%); }
.door-right { right: 0;
  background: radial-gradient(135% 90% at 0% 42%,   #14161F 0%, var(--bg-void) 60%); }

.gate {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 32px) 28px
           calc(env(safe-area-inset-bottom) + 40px);
  transition: opacity 320ms ease, transform 320ms var(--ease-out);
}
.brand {
  font-family: var(--font-display); font-weight: 300;
  font-size: 26px; letter-spacing: .04em; color: var(--aha);
  margin-bottom: 44px; opacity: .92;
}
.title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(24px, 7vw, 30px); letter-spacing: .04em;
  color: var(--ink-hi); margin-bottom: 12px;
}
.subtitle { font-size: 14px; color: var(--ink-mid); letter-spacing: .05em; margin-bottom: 40px; }

.cells { display: flex; gap: 14px; margin-bottom: 28px; }
.cell {
  width: 56px; height: 68px;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 14px;
  font-family: var(--font-mono); font-size: 30px; font-weight: 500;
  text-align: center; color: var(--ink-hi); caret-color: var(--aha);
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out),
              transform 200ms var(--ease-spring);
}
.cell:focus  { border-color: var(--aha); background: var(--bg-elev); }
.cell.filled { border-color: rgba(255, 92, 40, .5); }
.cell.lit    { border-color: var(--aha); background: var(--aha-soft); transform: translateY(-3px); }

.status { min-height: 22px; font-size: 14px; letter-spacing: .03em; color: var(--ink-mid); text-align: center; transition: color 200ms ease; }
.status.error   { color: var(--aha); }
.status.success { color: var(--gold); }

/* ══════ 动效 ════════════════════════════════════════════════ */
@keyframes shake {
  0%{transform:translateX(0)} 15%{transform:translateX(-10px)} 30%{transform:translateX(9px)}
  45%{transform:translateX(-6px)} 60%{transform:translateX(5px)} 75%{transform:translateX(-3px)}
  90%{transform:translateX(2px)} 100%{transform:translateX(0)}
}
.cells.shake { animation: shake 400ms var(--ease-out); }

.stage.opening .door-left  { transform: translateX(-100%); }
.stage.opening .door-right { transform: translateX(100%); }
.stage.opening .gate { opacity: 0; transform: scale(.97); pointer-events: none; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100%{opacity:.3;transform:scale(1)} 50%{opacity:1;transform:scale(1.35)} }
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

.gate > * { animation: riseIn 520ms var(--ease-out) backwards; }
.brand{animation-delay:40ms} .title{animation-delay:120ms} .subtitle{animation-delay:180ms}
.cells{animation-delay:240ms} .status{animation-delay:300ms}

/* 可达性 */
@media (prefers-reduced-motion: reduce) {
  .door { transition: opacity 300ms ease; }
  .stage.opening .door-left, .stage.opening .door-right { transform: none; opacity: 0; }
  .cells.shake { animation: none; }
  .gate > *, .msg { animation: none; }
  .cell.lit { transform: none; }
  .wave .dots i, .cursor { animation: none; }
}