/* ui.css — 第二大脑 · 时光之城 v2.0「星语」新 UI 层（W3 交付）
 * 引用 §1 设计 token（由 city.css 的 :root 定义）；不改写 city.css 的 #hud/#legend/#panel/#axis 视觉域，
 * 仅按 §2 契约追加模式显隐所需的 opacity/pointer-events。
 * 全部动画用 @keyframes；无内联 style。 */

/* v3 增量：仅新增变量，不覆盖 city.css 既有 token */
:root { --star-violet: #a78bfa; }

/* ============ 模式显隐（§2） ============ */
#forge, #mycity { display: none; }

body[data-mode="create"] #forge { display: block; }
body[data-mode="mine"]   #mycity { display: block; }

#hud, #legend, #axis { transition: opacity .3s ease; }
body[data-mode="create"] #hud,
body[data-mode="create"] #legend,
body[data-mode="create"] #axis,
body[data-mode="mine"] #hud,
body[data-mode="mine"] #legend,
body[data-mode="mine"] #axis { opacity: 0; pointer-events: none; }

/* ============ 科幻叠加层 #fx（扫描线 + 暗角） ============ */
#fx {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; overflow: hidden;
}
#fx::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(51,225,255,.045) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 0 42%, rgba(51,225,255,.10) 50%, transparent 58%);
  background-size: auto, 100% 220%;
  mix-blend-mode: screen;
  animation: fxScan 7s linear infinite;
}
#fx::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55));
}
@keyframes fxScan {
  0%   { background-position: 0 0, 0 -120%; }
  100% { background-position: 0 0, 0 220%; }
}

/* ============ 顶栏模式切换 .mode-tab（§7 玻璃 + 霓虹下划线） ============ */
#modeTabs { display: flex; gap: 6px; flex: none; }
.mode-tab {
  position: relative;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--dim); background: rgba(8,17,38,.55);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 14px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mode-tab:hover { color: var(--ink); border-color: var(--line2); }
.mode-tab.on {
  color: var(--cyan); border-color: var(--line2);
  background: rgba(10,30,60,.72);
  box-shadow: 0 0 0 1px rgba(51,225,255,.25), 0 0 18px rgba(51,225,255,.22);
}
.mode-tab.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

/* ============ 先知条 #oracle ============ */
#oracle {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  z-index: 11; display: none; align-items: center; gap: 8px;
  max-width: min(72vw, 640px);
  font-size: 12.5px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line2); border-radius: 999px;
  padding: 8px 16px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 22px rgba(183,156,255,.28);
}
#oracle.on { display: flex; }
#oracleIcon { color: var(--purple); font-size: 14px; text-shadow: 0 0 12px rgba(183,156,255,.6); }
#oracleText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-mode="create"] #oracle { display: none !important; }

/* ============ 造梦台 #forge / 我的城 #mycity（居中玻璃卡） ============ */
#forge, #mycity {
  position: absolute; z-index: 15;
  left: 50%; top: calc(50% + 18px); transform: translate(-50%, -50%);
  width: min(680px, 92vw); max-height: min(74vh, 660px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line2); border-radius: 16px;
  padding: 22px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 40px rgba(51,225,255,.12), 0 20px 50px rgba(0,0,0,.5);
}
#forgeHead h2, #mycityHead h2 {
  margin: 0; font-size: 18px; letter-spacing: .5px; color: var(--ink);
  text-shadow: 0 0 12px rgba(51,225,255,.35);
}
#forgeHead p, #mycityHead p { margin: 6px 0 16px; font-size: 12px; color: var(--dim); }

/* 输入区 */
#forgeInputWrap { position: relative; display: flex; align-items: flex-end; gap: 10px; }
#forgeIdea {
  flex: 1; min-height: 78px; resize: vertical;
  font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--ink);
  background: rgba(4,12,28,.8); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#forgeIdea::placeholder { color: var(--dim2); }
#forgeIdea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(51,225,255,.45), 0 0 22px rgba(51,225,255,.35);
}
#forgeMic {
  flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cyan);
  background: radial-gradient(circle at 35% 30%, rgba(51,225,255,.28), rgba(8,17,38,.9));
  border: 1px solid var(--line2);
  transition: box-shadow .15s ease, transform .12s ease, color .15s ease;
}
#forgeMic:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(51,225,255,.4); }
#forgeMic.rec { color: #fff; border-color: var(--red); animation: micPulse 1.1s ease-in-out infinite; }
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,117,.55); background: rgba(60,12,24,.9); }
  50%      { box-shadow: 0 0 0 10px rgba(255,90,117,0); background: rgba(120,18,38,.9); }
}

/* 灵感 chips */
#forgeChips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.chip {
  font-family: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer;
  background: rgba(10,30,60,.6); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.chip:hover { color: var(--cyan); border-color: var(--line2); box-shadow: 0 0 16px rgba(51,225,255,.28); }

/* 动作区 */
#forgeActions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; }
#forgeGo {
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  color: var(--bg); background: var(--cyan); border: none; border-radius: 10px;
  padding: 10px 22px;
  box-shadow: 0 0 0 1px rgba(51,225,255,.5), 0 8px 24px rgba(51,225,255,.3);
  transition: transform .12s ease, background .12s ease;
}
#forgeGo:hover { transform: translateY(-1px); background: #5fe9ff; }
#forgeGo:active { transform: translateY(0); }
#forgeGo[disabled] { opacity: .55; cursor: default; transform: none; }
#forgeStatus { font-size: 12.5px; color: var(--dim); }
#forgeStatus.busy { color: var(--cyan); }
#forgeStatus.err { color: var(--red); }

/* 示例卡 */
#forgeExamples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.example {
  text-align: left; font-family: inherit; cursor: pointer; color: var(--ink);
  background: rgba(8,17,38,.6); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.example:hover { border-color: var(--line2); box-shadow: 0 0 18px rgba(51,225,255,.2); transform: translateY(-1px); }
.example b { display: block; font-size: 13px; margin-bottom: 4px; color: var(--cyan); }
.example span { font-size: 11.5px; line-height: 1.4; color: var(--dim); }

/* 我的城列表 + 卡片 */
#mycityList { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.city-card {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(8,17,38,.7); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.city-card:hover { border-color: var(--line2); box-shadow: 0 0 22px rgba(51,225,255,.18); transform: translateY(-2px); }
.card-title { margin: 0; font-size: 15px; color: var(--ink); }
.card-sub { margin: 0; font-size: 12px; color: var(--dim); min-height: 16px; }
.card-time { font-family: var(--mono, Consolas, monospace); font-size: 11px; color: var(--dim2); }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.card-btn {
  font-family: inherit; font-size: 12px; cursor: pointer; border-radius: 8px;
  padding: 6px 11px; color: var(--ink); background: rgba(10,30,60,.6);
  border: 1px solid var(--line);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.card-btn:hover { color: var(--cyan); border-color: var(--line2); }
.card-btn.primary { color: var(--bg); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.card-btn.primary:hover { background: #5fe9ff; color: var(--bg); }
.card-btn.danger:hover { color: var(--red); border-color: var(--red); }
#mycityEmpty { font-size: 13px; color: var(--dim); font-style: italic; text-align: center; padding: 18px 4px; }

/* ============ AI 意识体 #ai（星语之眼 + 数字人门面） ============ */
#ai { position: fixed; right: 20px; bottom: 78px; z-index: 40; }

/* 星语之眼：内核亮点 + 3 层错频旋转光环 + 呼吸 + 悬停辉光 */
#aiOrb {
  position: relative; width: 58px; height: 58px; min-width: 52px; min-height: 52px;
  border-radius: 50%; cursor: pointer; border: 1px solid rgba(183,156,255,.5);
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 3%, #22d3ee 9%, rgba(34,211,238,.42) 24%, rgba(167,139,250,.32) 46%, rgba(6,16,34,.96) 78%);
  box-shadow:
    0 0 26px rgba(34,211,238,.55),
    0 0 46px rgba(167,139,250,.32),
    inset 0 0 22px rgba(34,211,238,.4),
    inset 0 0 10px rgba(255,255,255,.35);
  animation: orbBreathe 3.4s ease-in-out infinite;
  transition: box-shadow .2s ease;
}
#aiOrb:hover {
  box-shadow:
    0 0 34px rgba(34,211,238,.85),
    0 0 68px rgba(167,139,250,.6),
    inset 0 0 26px rgba(34,211,238,.6),
    inset 0 0 12px rgba(255,255,255,.5);
}
/* 光环层 1：虚线，慢速顺时针 */
#aiOrb::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px dashed rgba(34,211,238,.7);
  animation: orbSpin 14s linear infinite;
}
/* 光环层 2：双色弧光，中速逆时针 */
#aiOrb::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--star-violet);
  border-right-color: rgba(34,211,238,.75);
  animation: orbSpinRev 9s linear infinite;
}
/* 光环层 3：内层倾斜细环，高速异频 */
#aiOrbRing {
  position: absolute; inset: 4px; border-radius: 50%;
  border: 1.5px solid rgba(167,139,250,.6);
  border-left-color: transparent; border-bottom-color: transparent;
  transform: rotate(20deg);
  animation: orbSpin 5.5s linear infinite;
  pointer-events: none;
}
/* 内核亮点 */
#aiOrbCore {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #eafcff;
  box-shadow: 0 0 12px 4px rgba(34,211,238,.9), 0 0 24px 8px rgba(34,211,238,.4);
  animation: orbCorePulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes orbBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbSpinRev { to { transform: rotate(-360deg); } }
@keyframes orbCorePulse { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

/* 数字人门面：#starStage（左，数字人）+ #starSide（右，对话） */
#aiPanel {
  position: absolute; right: 0; bottom: 70px;
  width: min(720px, 94vw); height: min(72vh, 580px);
  display: flex; flex-direction: row; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 16px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 40px rgba(34,211,238,.14), 0 20px 50px rgba(0,0,0,.5);
  transform: translateY(10px) scale(.98); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
#aiPanel.on { transform: none; opacity: 1; pointer-events: auto; }
#aiPanel.speaking { box-shadow: 0 0 46px rgba(34,211,238,.34), 0 20px 50px rgba(0,0,0,.5); }

#starStage { position: relative; flex: 1 1 auto; min-width: 0; background: #030712; overflow: hidden; }
#starFrame { display: block; border: 0; width: 100%; height: 100%; background: #030712; }

#starSide {
  position: relative; flex: none; width: 340px; min-width: 0;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line); background: rgba(4,12,28,.35);
}

#aiHead {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
#aiTitle {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--cyan);
  text-shadow: 0 0 12px rgba(34,211,238,.35);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#starProfile {
  flex: none; max-width: 132px; font-family: inherit; font-size: 12px; color: var(--ink);
  background: rgba(8,17,38,.85); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 6px; outline: none; cursor: pointer;
}
#starProfile:focus { border-color: var(--cyan); }
#starProfile:disabled { opacity: .5; cursor: default; }
#aiClose {
  flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--dim);
  background: transparent; border: 1px solid var(--line);
}
#aiClose:hover { color: var(--ink); border-color: var(--line2); }

/* 记忆条 */
#starMem {
  flex: none; font-size: 11.5px; color: var(--dim2); padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#aiLog { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bubble {
  max-width: 80%; font-size: 13px; line-height: 1.55;
  padding: 9px 12px; border-radius: 12px;
  white-space: pre-wrap; word-break: break-word;
}
.bubble.user { align-self: flex-end; color: var(--bg); background: var(--cyan); border-bottom-right-radius: 4px; }
.bubble.ai {
  align-self: flex-start; color: var(--ink);
  background: rgba(10,30,60,.75); border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.bubble.ai.stream::after { content: "▍"; color: var(--cyan); animation: caret .8s steps(1) infinite; }
.bubble.ai.err { color: var(--amber); border-color: rgba(255,195,77,.5); }
@keyframes caret { 50% { opacity: 0; } }

#aiInputWrap { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
#aiInput {
  flex: 1; min-width: 0; font-family: inherit; font-size: 13px; color: var(--ink);
  background: rgba(4,12,28,.8); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; outline: none;
}
#aiInput:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(34,211,238,.4); }
/* 4 个底部按钮统一尺寸 */
#aiSend, #starMic, #starSpeak, #starRecord {
  flex: none; height: 34px; min-width: 34px; font-family: inherit; font-size: 12.5px;
  cursor: pointer; border-radius: 9px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); background: rgba(10,30,60,.7); border: 1px solid var(--line);
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#aiSend { padding: 0 12px; color: var(--bg); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
#aiSend:hover { background: #5fe9ff; }
#starMic:hover, #starSpeak:hover, #starRecord:hover { color: var(--cyan); border-color: var(--line2); box-shadow: 0 0 14px rgba(34,211,238,.28); }
#starSpeak.on { color: var(--amber); border-color: var(--amber); }
#starMic.rec { color: #fff; border-color: var(--red); animation: micPulse 1.1s ease-in-out infinite; }

/* ============ 轻提示 #toast ============ */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px);
  z-index: 60; pointer-events: none;
  max-width: min(80vw, 420px);
  font-size: 13px; color: var(--ink);
  background: rgba(8,17,38,.94); border: 1px solid var(--line2); border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0 0 26px rgba(51,225,255,.24), 0 12px 30px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============ 移动端 ≤720px（满宽卡片 + 全屏抽屉 + 先知下移） ============ */
@media (max-width: 720px) {
  #modeTabs { gap: 4px; }
  .mode-tab { padding: 6px 10px; font-size: 12px; }

  #forge, #mycity {
    left: 0; right: 0; top: auto; bottom: 0; transform: none;
    width: 100%; max-height: 80vh;
    border-radius: 16px 16px 0 0; border-bottom: none;
  }
  #forgeExamples { grid-template-columns: 1fr; }
  #mycityList { grid-template-columns: 1fr; }

  #oracle { top: auto; bottom: 62px; max-width: 88vw; font-size: 12px; }

  #ai { right: 14px; bottom: 70px; }
  /* 移动端：数字人门面全屏 + 上下布局（上=数字人，下=对话） */
  #aiPanel {
    position: fixed; inset: 0; width: auto; height: auto;
    max-height: none; border-radius: 0; bottom: 0; right: 0; border: none;
    flex-direction: column;
  }
  #aiPanel.on { transform: none; }
  #starStage { flex: none; height: 46%; }
  #starSide { flex: 1 1 auto; width: auto; border-left: none; border-top: 1px solid var(--line); }

  #toast { bottom: 150px; }
}