/* ── Aion Common Styles ── */
:root {
  /* 07-25 换皮:与 chat/今天页同一套 token(昼) */
  --bg: #aeaeaa;
  --surface: rgba(234,234,230,0.85);
  --surface2: rgba(240,240,236,0.55);
  --border: rgba(38,37,31,0.16);
  --text: #26251f;
  --text2: rgba(38,37,31,0.66);
  --text3: rgba(38,37,31,0.4);
  --accent: #96762f;
  --user-bg: rgba(240,240,236,0.5);
  --ai-bg: rgba(150,118,47,0.08);
  --danger: #a8493c;
}
/* ── Dark mode ── */
body[data-theme="dark"] {
  /* 夜 */
  --bg: #08080a;
  --surface: rgba(14,14,18,0.86);
  --surface2: rgba(20,20,26,0.6);
  --border: rgba(232,228,218,0.13);
  --text: #e8e4da;
  --text2: rgba(232,228,218,0.55);
  --text3: rgba(232,228,218,0.32);
  --accent: #d4b98c;
  --user-bg: rgba(232,228,218,0.08);
  --ai-bg: rgba(212,185,140,0.07);
  --danger: #c96b5e;
}
body[data-theme="dark"] .top-bar {
  background: rgba(8,8,10,0.86);
  border-bottom-color: rgba(232,228,218,0.1);
}
body[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.12);
}
body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,0.25);
}
body[data-theme="dark"] .toast-msg {
  background: rgba(200, 185, 160, 0.9);
  color: #141822;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }

/* ── 自定义滚动条 ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.3); }

/* ── 子页面布局 ── */
.sub-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  /* width 必须显式给。flex column 在交叉轴上按内容收缩,缺了它,
     只要有一行的自然宽度超过屏宽就会一路撑到 max-width,
     在窄屏上横向溢出 —— 而 body{overflow:hidden} 会把溢出裁掉,
     内容既看不见也滑不到(2026-07-29 监控台金额被切的根因)。 */
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

html.aion-app:not(.aion-iframe) .sub-page {
  padding-top: 34px;
}

html.aion-app:not(.aion-iframe) .sub-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  z-index: 999;
  pointer-events: none;
  background: var(--aion-safe-bg, var(--bg));
}

/* ── 顶部导航栏 ── */
.top-bar {
  /* 2026-07-26:没有 .sub-page 的页面 body 自己滚,头栏会跟着滚走、翻下去就没法返回。
     有 .sub-page 的页面滚的是内容区,sticky 对它们是空操作。 */
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(234,234,230,0.85);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  flex-shrink: 0;
  z-index: 10;
}
.top-bar .back-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.top-bar h2 {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 内容区 ── */
.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* reskin 给 .page-content 加了 margin:0 auto;而在 column flex 容器里,
   交叉轴上的 auto 边距会取消 align-items:stretch(flexbox spec 9.6)。
   一旦不 stretch,宽度就退化成按内容收缩,在窄屏上撑破 —— 真机量到 435px
   对 390px 的屏(2026-07-31 监控台右侧金额被切的根因)。
   和上面 .sub-page 那条是同一个病,一个在容器,一个在子项。
   只管 .sub-page 里的那种;没有 .sub-page 的页(如梦境)本来就是对的。 */
.sub-page > .page-content { width: 100%; }

/* ── 通用 toggle ── */
.toggle-switch { position:relative; width:42px; height:24px; cursor:pointer; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--surface2); border:1px solid var(--border); border-radius:12px; transition:0.2s; }
.toggle-slider:before { content:""; position:absolute; height:18px; width:18px; left:2px; top:2px; background:var(--text3); border-radius:50%; transition:0.2s; }
.toggle-switch input:checked + .toggle-slider { background:var(--accent); border-color:var(--accent); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(18px); background:#fff; }

/* ── 通用按钮 ── */
.btn-row { display:flex; gap:8px; margin-top:16px; justify-content:flex-end; }
.btn-row button { padding:8px 18px; border:none; border-radius:8px; font-size:14px; cursor:pointer; }
.btn-save { background:var(--accent); color:#fff; }
.btn-save:hover { opacity:0.85; }
.btn-cancel { background:var(--surface2); color:var(--text); }

/* ── 通用表单 ── */
.form-label { display:block; font-size:13px; color:var(--text2); margin-bottom:4px; margin-top:14px; }
.form-label:first-child { margin-top:0; }
.form-input {
  width:100%;
  background:var(--surface2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  font-family: inherit;
  box-sizing: border-box;
}
.form-input:focus { border-color:var(--accent); }
textarea.form-input { resize:vertical; min-height:120px; line-height:1.6; }
.form-hint { font-size:11px; color:var(--text3); margin-top:2px; }

/* ── 通用列表 ── */
.list-container {
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg);
  padding:4px;
  overflow-y:auto;
}
.list-empty { padding:24px; text-align:center; color:var(--text3); font-size:14px; }

/* ── 闹铃弹窗（全局，每个页面都需要） ── */
.alarm-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:100; align-items:center; justify-content:center; }
.alarm-overlay.show { display:flex; }
.alarm-box { background:var(--surface); border:2px solid #f59e0b; border-radius:16px; padding:24px 28px; max-width:380px; width:90%; text-align:center; animation:alarmPulse 1s ease-in-out infinite alternate; }
.alarm-box h3 { font-size:20px; margin-bottom:12px; }
.alarm-box .alarm-icon { font-size:48px; margin-bottom:8px; }
.alarm-box .alarm-content { font-size:15px; margin-bottom:6px; line-height:1.5; }
.alarm-box .alarm-time { font-size:12px; color:var(--text3); margin-bottom:16px; }
.alarm-box button { padding:10px 32px; border:none; border-radius:8px; background:#f59e0b; color:#000; font-size:14px; font-weight:600; cursor:pointer; }
.alarm-box button:hover { background:#d97706; }
@keyframes alarmPulse { from { box-shadow:0 0 20px rgba(245,158,11,0.3); } to { box-shadow:0 0 40px rgba(245,158,11,0.6); } }

/* ── Toast 提示 ── */
.toast-msg {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(74,59,50,0.9);
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
  z-index: 200;
  white-space: nowrap;
}
.toast-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 礼物弹窗 ──
   ⚠️ 2026-07-27 起这批规则已经失效,活的那份在 static/gift-popup.js
   (它注入的 <style> 在本文件之后进 head,同名规则后来者赢)。
   要改样式去改那边,改这里不会有任何效果。留着只是没必要冒险动它。 */
.gift-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s;
}
.gift-overlay.show { display: flex; opacity: 1; }

.gift-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.6s cubic-bezier(.4,0,.2,1);
}
.gift-scene.fly-away {
  transform: scale(0.1) translate(200px, -400px);
  opacity: 0;
}

/* 礼物盒 */
.gift-box-wrap {
  cursor: pointer;
  animation: giftBounceIn 0.8s cubic-bezier(.34,1.56,.64,1) both;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.gift-box-wrap:hover .gift-box-svg { transform: scale(1.05); }
.gift-box-svg { transition: transform 0.2s; filter: drop-shadow(0 8px 24px rgba(255,131,89,0.4)); }

.gift-tap-hint {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  animation: hintPulse 1.5s ease-in-out infinite;
}

.gift-lid { transform-origin: 100px 90px; transition: transform 0.5s cubic-bezier(.4,0,.2,1); }
.gift-lid.lid-open { transform: translateY(-80px) rotate(-30deg); opacity: 0; }
.box-opening .gift-body { animation: boxShake 0.3s ease-in-out; }

@keyframes giftBounceIn {
  0% { transform: translateY(100vh) scale(0.5); opacity: 0; }
  60% { transform: translateY(-20px) scale(1.05); opacity: 1; }
  80% { transform: translateY(8px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes hintPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes boxShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* 礼花 */
.confetti-container { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 310; }
.confetti-piece {
  position: absolute;
  animation: confettiFall var(--duration, 1.5s) var(--delay, 0s) cubic-bezier(.25,.46,.45,.94) forwards;
}
.confetti-rect { width: 10px; height: 6px; border-radius: 1px; }
.confetti-circle { width: 8px; height: 8px; border-radius: 50%; }
.confetti-ribbon { width: 4px; height: 16px; border-radius: 2px; }

@keyframes confettiFall {
  0% { transform: translate(0,0) rotate(0deg); opacity: 1; }
  30% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 1; }
  100% { transform: translate(var(--x), calc(var(--y) + 500px)) rotate(var(--r)); opacity: 0; }
}

/* 礼物图片展示 */
.gift-reveal {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 360px;
  width: 90%;
}
.gift-image-wrap {
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.6s cubic-bezier(.34,1.56,.64,1);
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(255,131,89,0.3);
}
.gift-image-wrap.show { opacity: 1; transform: scale(1); }
.gift-image {
  width: 100%;
  max-width: 320px;
  display: block;
  border-radius: 16px;
}

.gift-message-wrap {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 16px 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.4s ease-out;
}
.gift-message-wrap.show { opacity: 1; transform: translateY(0); }
.gift-message-text {
  color: #fff;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
  margin: 0;
}

.gift-receive-btn {
  display: none;
  padding: 12px 36px;
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg, #8aadca, #7ba0be);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.4s ease-out;
  box-shadow: 0 4px 16px rgba(138,173,202,0.3);
}
.gift-receive-btn.show { opacity: 1; transform: translateY(0); }
.gift-receive-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,157,0.5); }