/* ══════════════════════════════════════════════════════════
   app/ios.css — iOS 手感层：缓动 / 按压反馈 / 弹窗入场 / 底部抽屉 / 滚动
   由原 assets/app.css 第 1279–1468 行拆出；七个文件按 index.html 里的顺序加载，层叠顺序与原来一致
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   iOS 手感层 — 全站统一交互规范（追加于级联末端，覆盖生效）
   缓动曲线 / 按压反馈 / 弹窗入场 / 底部 Sheet / 丝滑滚动
   ══════════════════════════════════════════════════════════ */
:root{
  --ios-ease:   cubic-bezier(0.32, 0.72, 0, 1);      /* iOS 系统面板曲线 */
  --ios-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1); /* 轻微回弹 */
}

/* ── 1. 触控基础：去高亮、消 300ms 延迟、禁止误缩放 ── */
button, a, [onclick]{ -webkit-tap-highlight-color: transparent; }
button{ touch-action: manipulation; }
html, body{ overscroll-behavior-y: contain; }   /* 防下拉刷新误触，PWA 更原生 */

/* ── 2. 统一按压反馈：所有按钮按下轻缩 + 提亮，松开弹回 ── */
button{
  transition: transform .16s var(--ios-spring), filter .2s ease, background .2s ease,
              background-color .2s ease, border-color .2s ease, box-shadow .2s ease,
              color .2s ease, opacity .2s ease;
}
button:active{ transform: scale(.96); filter: brightness(1.12); }
/* 大面积按钮/列表行：缩得更含蓄（iOS 表格行手感） */
.pc-nav-btn:active, .nav-more-item:active,
.bell-item:active, .dm-conv-item:active, .dm-friend-item:active,
.note-item:active, .chat-row:active, .pc-navm-row:active, .mtab:active{
  transform: scale(.985);
  transition: transform .12s var(--ios-ease);
}
.nav-more-item:active{ background: rgba(255,255,255,.1); }
/* 主时钟卡片轻按反馈 */
.main-clock-card:active{ transform: scale(.995); }
.main-clock-card{ transition: transform .2s var(--ios-spring), box-shadow .3s ease; }

/* ── 3. 弹窗入场：背景淡入 + 面板弹性浮出（iOS present 手感）── */
@keyframes iosPop{
  from{ opacity: 0; transform: scale(.94) translateY(12px); }
  to  { opacity: 1; transform: none; }
}
@keyframes iosDrop{
  from{ opacity: 0; transform: translateY(-8px) scale(.985); }
  to  { opacity: 1; transform: none; }
}
@keyframes iosSheet{
  from{ transform: translateY(100%); }
  to  { transform: none; }
}
/* 全屏弹窗：遮罩快速淡入，壳弹出 */
.player-center-modal.active{ animation: gmFadeIn .25s ease; }
.player-center-modal.active .pc-shell{ animation: iosPop .42s var(--ios-spring); }
.game-modal.active{ animation: gmFadeIn .25s ease; }
.game-modal.active .gameboy-shell{ animation: iosPop .42s var(--ios-spring); }
.challenge-modal.active > div{ animation: iosPop .42s var(--ios-spring); }
/* 浮动小面板（原先无动画 → 现在轻落下）*/
.cal-modal.open  .cal-panel { animation: iosDrop .3s var(--ios-ease); }
.calc-modal.open .calc-panel{ animation: iosDrop .3s var(--ios-ease); }
.note-modal.open .note-panel{ animation: iosDrop .3s var(--ios-ease); }
.bell-panel.show{ animation: bellIn .24s var(--ios-ease); }
/* 下拉菜单曲线升级 */
.nav-more-dropdown{
  transition: opacity .28s var(--ios-ease), transform .28s var(--ios-ease), visibility .28s;
}

/* ── 4. 手机端：个人中心变 iOS 底部 Sheet ── */
@media (max-width: 560px){
  .player-center-modal{ align-items: flex-end; padding: 0; }
  .pc-shell{
    width: 100%; max-width: 100%;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    border-bottom: none;
  }
  .player-center-modal.active .pc-shell{ animation: iosSheet .4s var(--ios-ease); }
  /* Sheet 顶部拖动指示条（纯视觉）*/
  .pc-header{ position: relative; }
  .pc-header::before{
    content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,.22);
  }
  body.theme-light .pc-header::before{ background:rgba(91,51,71,.25); }
}

/* ── 5. 丝滑滚动：惯性、包含、细滚动条 ── */
.pc-body, .bell-panel, .nav-more-dropdown, .note-panel,
.cal-panel, .dm-panel, .chat-body, .chat-messages{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
*::-webkit-scrollbar{ width: 4px; height: 4px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: rgba(167,139,250,.28); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(167,139,250,.5); }
body.theme-light *::-webkit-scrollbar-thumb{ background: rgba(200,120,150,.3); }

/* ── 6. 输入控件：聚焦柔和过渡（iOS 聚焦光环）── */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], textarea, select{
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
input[type=range]{ transition: none; }   /* 滑块拖动不允许延迟 */

/* ── 7. 可访问性：用户偏好减少动效时全部关闭 ── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.tz-empty{ grid-column:1/-1; text-align:center; padding:26px 12px; font-size:.82rem; color:var(--text-dim,rgba(233,228,255,.45)); }

/* ── 时区管理弹窗 ── */
.tz-manage-modal{ position:fixed; inset:0; z-index:9992; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(4,6,20,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.tz-manage-modal.open{ display:flex; animation:gmFadeIn .25s ease; }
.tz-manage-list{ flex:1; overflow-y:auto; padding:0 14px; }
.tz-mrow{ display:flex; align-items:center; gap:9px; padding:9px 6px; border-bottom:1px solid rgba(255,255,255,.06); }
.tz-mrow:last-child{ border-bottom:none; }
.tz-mflag{ font-size:1.2rem; width:26px; text-align:center; flex-shrink:0; }
.tz-minfo{ flex:1; min-width:0; }
.tz-mname{ font-size:.86rem; font-weight:700; color:var(--text-main,#e9e4ff); }
.tz-mmain{ font-size:.6rem; color:#93c5fd; font-weight:800; margin-left:4px; }
.tz-mzone{ font-size:.62rem; color:var(--text-dim,rgba(210,220,255,.4)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tz-mdel{ width:26px; height:26px; border-radius:8px; cursor:pointer; font-size:.66rem; flex-shrink:0;
  border:1px solid rgba(248,113,113,.3); background:rgba(248,113,113,.12); color:#fca5a5; }
.tz-mdel:hover{ background:rgba(248,113,113,.4); color:#fff; }
.tz-mempty{ text-align:center; padding:24px 8px; font-size:.8rem; color:var(--text-dim,rgba(210,220,255,.4)); }
.tz-manage-add-title{ font-size:.72rem; font-weight:700; color:var(--text-dim,rgba(210,220,255,.55)); padding:12px 18px 6px; }
.tz-manage-add{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 6px; }
.tz-addchip{ display:inline-flex; align-items:center; gap:4px; padding:6px 11px; border-radius:18px; cursor:pointer; font-size:.74rem;
  background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3); color:#86efac; transition:background .18s ease; }
.tz-addchip:hover{ background:rgba(74,222,128,.22); }
.tz-addchip .p{ opacity:.7; font-size:.66rem; }
body.theme-light .tz-mname{ color:#3b2840; }

/* ── 时光进度卡（人生进度条）── */
.life-set-btn{font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:20px;cursor:pointer;
  border:1px solid rgba(255,183,197,.35);background:rgba(255,183,197,.12);color:#ffcede;transition:background .2s ease,transform .12s ease;}
.life-set-btn:hover{background:rgba(255,183,197,.24);}
.life-set-btn:active{transform:scale(.95);}
.life-bars{display:flex;flex-direction:column;gap:14px;padding-top:4px;}
.life-row-head{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:.82rem;}
.life-ico{font-size:.95rem;}
.life-name{font-weight:700;color:var(--text-main);}
.life-sub{font-size:.68rem;color:var(--text-dim,rgba(233,228,255,.45));margin-left:2px;}
.life-pct{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;color:#ffb7c5;font-size:.86rem;}
.life-track{height:9px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;position:relative;}
.life-fill{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.16,1,.3,1);box-shadow:0 0 10px rgba(255,183,197,.35);position:relative;}
.life-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-100%);animation:lifeShine 2.6s ease-in-out infinite;}
@keyframes lifeShine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(220%)}}
body.theme-light .life-set-btn{background:rgba(220,80,130,.1);color:#8b1535;border-color:rgba(220,80,130,.28);}
body.theme-light .life-pct{color:#d4537e;}
body.theme-light .life-track{background:rgba(120,80,130,.1);}
body.theme-light .life-sub{color:rgba(91,51,71,.5);}

/* ── 翻面卡：全球时区(正面) ⇄ 时光进度(背面)，下滑翻面 ── */
.flip-card{ perspective:2000px; }
.flip-inner{ display:grid; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.16,1,.3,1); }
.flip-card.flipped .flip-inner{ transform:rotateX(180deg); }
.flip-face{ grid-area:1/1; margin:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flip-back{ transform:rotateX(180deg); display:flex; flex-direction:column; }
.flip-hint{ font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:20px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(196,181,253,.32);background:rgba(196,181,253,.1);color:#c4b5fd;transition:background .2s ease,transform .12s ease; }
.flip-hint:hover{ background:rgba(196,181,253,.24); }
.flip-hint:active{ transform:scale(.94); }
.life-title-btns{ display:flex; gap:8px; align-items:center; }
body.theme-light .flip-hint{ background:rgba(120,80,130,.1); color:#8b1535; border-color:rgba(120,80,130,.26); }

/* ── 时光进度 · 精修 ── */
.flip-back .life-bars{ flex:1; justify-content:center; gap:18px; }
.life-row{ padding:11px 13px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); transition:background .2s; }
.life-row:hover{ background:rgba(255,183,197,.06); }
.life-row-head{ margin-bottom:8px; }
.life-name{ font-size:.9rem; }
.life-track{ height:11px; border-radius:7px; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 3px rgba(0,0,0,.3); }
.life-fill{ border-radius:7px; box-shadow:0 0 12px rgba(255,183,197,.45); }
.life-pct{ font-size:.95rem; }
body.theme-light .life-row{ background:rgba(120,80,130,.05); border-color:rgba(120,80,130,.1); }

/* 翻面卡两面标题：标题居左，按钮统一居右上角 */
.flip-face .card-title{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }

/* 站内输入弹窗（sakuraPrompt）输入框，跟随主题 */
.sakura-prompt-input{ width:100%; box-sizing:border-box; margin:8px 0 2px; padding:11px 14px; border-radius:12px;
  border:1px solid var(--glass-border,rgba(255,183,197,.3)); background:rgba(255,255,255,.06); color:var(--text-main,#eef2ff);
  font-size:1rem; outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
.sakura-prompt-input:focus{ border-color:rgba(255,183,197,.6); box-shadow:0 0 0 3px rgba(255,183,197,.12); }
body.theme-light .sakura-prompt-input{ background:rgba(255,255,255,.75); color:#3b2840; border-color:rgba(200,120,150,.35); }