/* =====================================================================
   硅基物语 · Silicon Story OS — 落地工程包设计基座
   Halo(光晕·亮，默认) / Obsidian(黑曜石·暗) 双主题
   字体：Space Grotesk(拉丁/数字) + Noto Sans SC / PingFang SC(中文)
   该文件最后加载，以 ID 选择器覆盖既有 .app-shell 整页滚动布局。
   ===================================================================== */

/* ---------- 主题令牌 ---------- */
#app.app-shell {
  --cn: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  --mono: "Space Grotesk", "PingFang SC", "Noto Sans SC", sans-serif;
}

#app.app-shell[data-theme="halo"] {
  --bg: #EEF2F7;
  --panel: #FFFFFF;
  --panel2: #F3F7FC;
  --panelHi: #FFFFFF;
  --line: rgba(18, 30, 52, 0.085);
  --line2: rgba(18, 30, 52, 0.15);
  --ink: #0F1722;
  --ink2: rgba(15, 23, 34, 0.60);
  --ink3: rgba(15, 23, 34, 0.40);
  --copper: #C2552A;
  --cyan: #2C63F4;
  --grid: rgba(18, 30, 52, 0.045);
  --glow: rgba(44, 99, 244, 0.14);
  --cardshadow: 0 2px 4px rgba(20, 32, 54, 0.04), 0 18px 38px rgba(20, 32, 54, 0.07);
  --core-bg: #0E1626;
  --core-line: rgba(255, 255, 255, 0.18);
  --core-grid: rgba(255, 255, 255, 0.08);
  --core-scan: rgba(255, 255, 255, 0.12);
}

#app.app-shell[data-theme="obsidian"] {
  --bg: #0A0D11;
  --panel: #10141A;
  --panel2: #171D26;
  --panelHi: #1C232C;
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.15);
  --ink: #EDF0F4;
  --ink2: rgba(237, 240, 244, 0.62);
  --ink3: rgba(237, 240, 244, 0.40);
  --copper: #EC9C57;
  --cyan: #5FD6E4;
  --grid: rgba(255, 255, 255, 0.045);
  --glow: rgba(236, 156, 86, 0.16);
  --cardshadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --core-bg: #10141A;
  --core-line: rgba(255, 255, 255, 0.14);
  --core-grid: rgba(255, 255, 255, 0.06);
  --core-scan: rgba(255, 255, 255, 0.10);
}

/* ---------- 设备外壳：头部固定 / 内容滚动 / Tab 固定 ---------- */
#app.app-shell {
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg) !important;
  background-image: none !important;
  color: var(--ink) !important;
  font-family: var(--cn);
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

@media (min-width: 900px) {
  #app.app-shell {
    height: min(860px, calc(100vh - 64px));
  }
}

/* 背景：发丝网格 + 顶部光晕（固定背板，不随内容滚动） */
#app.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.9;
  animation: none;
}

#app.app-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% -8%, var(--glow), transparent 44%);
  opacity: 1;
  transform: none;
  filter: none;
}

/* 关掉既有 realm/micro-feedback 浮层，避免与新主题打架 */
#app.app-shell.realm-shift::after { animation: none; }
#app.app-shell.micro-feedback::before,
#app.app-shell[data-feedback]::before { display: none !important; content: none !important; }
#app.app-shell.is-transitioning { opacity: 1 !important; }

/* 所有交互元素：触感缩放 + hover 微透明 */
#app.app-shell button { transition: transform .13s ease, opacity .13s ease, box-shadow .2s ease; }
#app.app-shell button:active { transform: scale(0.975); }
@media (hover: hover) {
  #app.app-shell button:hover { opacity: 0.92; }
}

/* ---------- 状态栏 + 头部 ---------- */
.ss-status,
.ss-header,
.ss-scroll,
.ss-tabbar { position: relative; z-index: 2; }

.ss-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 24px 6px;
  color: var(--ink);
}
.ss-status .ss-clock {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ss-status .ss-sysright {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink2);
}
.ss-bars { display: inline-flex; gap: 1.5px; align-items: flex-end; height: 11px; }
.ss-bars i { width: 2.5px; border-radius: 1px; display: block; background: var(--ink); }
.ss-bars i:nth-child(1) { height: 4px; }
.ss-bars i:nth-child(2) { height: 6px; }
.ss-bars i:nth-child(3) { height: 8px; }
.ss-bars i:nth-child(4) { height: 11px; background: var(--ink2); }
.ss-battery {
  width: 22px; height: 11px; border: 1.4px solid var(--ink2);
  border-radius: 3px; position: relative; display: inline-block;
}
.ss-battery i { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 72%; background: var(--ink); border-radius: 1px; display: block; }

.ss-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.ss-brand { display: flex; align-items: center; gap: 11px; }
.ss-brand-name { color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; }
.ss-brand-os { font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em; color: var(--copper); margin-top: 4px; white-space: nowrap; }
.ss-header-actions { display: flex; align-items: center; gap: 8px; }
.ss-mode-btn {
  width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center; color: var(--ink); background: transparent;
}
.ss-upgrade-pill {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 5px 0 4px;
  border-radius: 999px; border: 1px solid var(--line2); background: transparent;
}
.ss-upgrade-pill span { font-size: 11px; font-weight: 700; color: var(--ink); padding-right: 4px; }

/* ---------- 滚动内容区 ---------- */
.ss-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.ss-scroll::-webkit-scrollbar { width: 0; height: 0; }
.ss-scroll { scrollbar-width: none; }
.ss-x { overflow-x: auto; scrollbar-width: none; }
.ss-x::-webkit-scrollbar { width: 0; height: 0; }

.ss-screen { padding: 18px 18px 28px; }

/* ---------- 底部 Tab ---------- */
.ss-tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 9px 8px;
  padding-bottom: max(9px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.ss-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 9px 0 5px;
  background: transparent;
  border: 0;
}
.ss-tab-bar {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2.5px; border-radius: 0 0 3px 3px;
  background: transparent;
}
.ss-tab.active .ss-tab-bar { background: var(--copper); box-shadow: 0 0 10px var(--glow); }
.ss-tab-ico { display: flex; }
.ss-tab.active .ss-tab-ico { filter: drop-shadow(0 0 8px var(--glow)); }
.ss-tab-label { font-size: 10px; font-weight: 500; color: var(--ink3); }
.ss-tab.active .ss-tab-label { font-weight: 700; color: var(--ink); }

/* ---------- SiliconCore 头像 ---------- */
.ss-core { position: relative; flex: 0 0 auto; overflow: hidden; }

/* ---------- 返回按钮（浮层顶部） ---------- */
.ss-back {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink2); font-size: 13px; font-weight: 600;
  margin-bottom: 14px; background: transparent; border: 0;
}
.ss-back-ico {
  width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono);
}

/* ---------- 命题飞跃浮层（ssComet 共享元素过渡） ---------- */
.ss-flying {
  position: absolute; left: 50%; top: 104px; z-index: 20;
  width: 344px; max-width: 86%; pointer-events: none;
  animation: ssComet .72s cubic-bezier(.4, 0, .2, 1) both;
}
.ss-flying-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--copper); border-radius: 15px; background: var(--panel); padding: 13px 14px;
  animation: ssCometGlow .72s ease both;
}

/* ---------- 共享小工具 ---------- */
.ss-eyebrow { font-family: var(--mono); font-weight: 600; color: var(--copper); }
.ss-card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--cardshadow); }
.ss-screen-enter { animation: ssFadeUp .32s ease both; }

/* ---------- 复用组件 ---------- */
.ss-btn-copper {
  background: var(--copper); color: #fff; font-weight: 700; border: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ss-btn-ghost {
  background: transparent; color: var(--ink); font-weight: 700;
  border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ss-btn-ink {
  background: var(--ink); color: var(--panel); font-weight: 600; border: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

.ss-scan-input {
  width: 100%; margin-top: 14px; min-height: 84px; resize: none;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel2);
  padding: 15px; color: var(--ink); font-size: 15px; line-height: 1.6; font-family: inherit;
}
.ss-scan-input::placeholder { color: var(--ink3); }

.ss-scan-chip {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: var(--ink2);
  border: 1px solid var(--line2); border-radius: 999px; padding: 7px 12px;
  background: var(--panel2); white-space: nowrap;
}

.ss-chat-input {
  flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line2); border-radius: 13px;
  background: var(--panel2); padding: 0 14px; color: var(--ink); font-size: 13px;
  font-family: inherit; outline: none;
}
.ss-chat-input::placeholder { color: var(--ink3); }

.ss-ghost-video {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; width: 100%; background: transparent; border: 0;
  color: var(--ink3); font-size: 12px;
}
.ss-ghost-play {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center; color: var(--copper); font-size: 7px;
}

.ss-explore-card {
  text-align: left; border: 1px solid var(--line); border-radius: 15px;
  background: var(--panel); box-shadow: var(--cardshadow); padding: 15px;
  display: flex; flex-direction: column; gap: 7px; min-height: 130px;
}
.ss-explore-mark {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line2);
  background: var(--panel2); color: var(--copper); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.ss-explore-arrow {
  width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--panel);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px;
}

/* ---------- 关键帧 ---------- */
@keyframes ssBlink { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes ssFly { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 25% { opacity: 1; transform: translateY(-4px) scale(1.1); } 100% { opacity: 0; transform: translateY(-30px) scale(0.9); } }
@keyframes ssSeal { 0% { opacity: 0; transform: scale(0.6) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes ssComet { 0% { opacity: 0; transform: translateX(-50%) translateY(190px) scale(0.78); } 16% { opacity: 1; } 64% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(1.01); } }
@keyframes ssCometGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 85, 42, 0); } 50% { box-shadow: 0 14px 40px rgba(20, 32, 54, 0.28), 0 0 26px 2px rgba(194, 85, 42, 0.35); } }
@keyframes ssPropIn { 0% { opacity: 0; transform: translateY(-10px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ssMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ssPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes ssGlow { 0%, 100% { box-shadow: 0 0 0 0 var(--glow, rgba(236, 156, 86, 0.18)); } 50% { box-shadow: 0 0 18px 3px var(--glow, rgba(236, 156, 86, 0.18)); } }
@keyframes ssFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ssPop { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #app.app-shell *,
  #app.app-shell *::before,
  #app.app-shell *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}