/* Mobile/PWA compatibility and later component additions — order preserved */
/* ===== Foundation viewport fix v84 =====
   不再用独立 safe-area-bottom 占位块制造底部空白；
   底部安全区并入 tab-bar / composer 自身 padding。 */
html, body {
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
}
.app {
  position: fixed;
  inset: 0;
  height: var(--app-height, 100dvh) !important;
  min-height: 0;
}
.safe-area-bottom { display: none !important; height: 0 !important; }
.tab-bar {
  padding: 8px 0 max(8px, env(safe-area-inset-bottom)) !important;
  background: rgba(10,10,15,0.96);
}


/* ===== Clamp broken iOS PWA bottom env v85 =====
   某些 iOS standalone 下 env(safe-area-inset-bottom) 会异常变大，
   不能直接拿它当 padding；底部统一限制在 12px 内。 */
:root { --k-bottom-safe: clamp(0px, env(safe-area-inset-bottom), 12px); }
.safe-area-bottom { display: none !important; height: 0 !important; padding: 0 !important; }
.tab-bar {
  padding-top: 8px !important;
  padding-bottom: var(--k-bottom-safe) !important;
  min-height: 74px;
  align-items: center;
}

/* ===== Fullscreen foundation v88: fixed bottom nav + calmer top safe ===== */
:root {
  --k-top-safe: max(54px, env(safe-area-inset-top));
  --k-tab-h: 86px;
}
.safe-area-top {
  height: var(--k-top-safe) !important;
  flex-shrink: 0;
}
.app {
  overflow: hidden;
}
.page.active {
  /* tabbar is fixed now, so page needs its own bottom breathing room */
  padding-bottom: var(--k-tab-h);
}
.scroll-container {
  padding-bottom: 24px;
}
.tab-bar {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  height: var(--k-tab-h) !important;
  min-height: var(--k-tab-h) !important;
  padding: 6px 0 8px !important;
  z-index: 80;
  background: rgba(10,10,15,0.98);
  border-top: 1px solid var(--border-subtle);
}

/* ===== Status-bar black test v89 =====
   iOS chin-gap often appears with black-translucent + viewport-fit.
   Switch status bar to black, then let app begin below system bar and keep bottom fixed. */
:root { --k-top-safe: 32px; }
.safe-area-top { height: var(--k-top-safe) !important; }
.tab-bar { bottom: 0 !important; }


/* ===== White gap diagnostic v90 =====
   临时把 html/body 底色调白，用来判断底部黑空是不是 WebView 外部系统区域。
   .app 本身仍保持深色。 */
html, body { background: #ffffff !important; }
.app { background: var(--bg-primary) !important; }
:root { --k-top-safe: max(54px, env(safe-area-inset-top)); }
.safe-area-top { height: var(--k-top-safe) !important; }

/* ===== Viewport max fix v91 ===== */
html, body { background: var(--bg-primary) !important; }
.app { background: var(--bg-primary) !important; }
:root { --k-top-safe: max(54px, env(safe-area-inset-top)); }
.safe-area-top { height: var(--k-top-safe) !important; }


/* ===== Visual bottom blend v92 =====
   iOS 26 PWA chin gap cannot be reached by CSS viewport in Lina's device.
   Blend html/body/background with app and extend a fixed bottom backdrop behind the system gap. */
html, body {
  background: var(--bg-primary) !important;
}
body::after {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  background: var(--bg-primary);
  z-index: 1;
  pointer-events: none;
}
.app { background: var(--bg-primary) !important; z-index: 2; }
.tab-bar { z-index: 90 !important; }

/* ===== Browser-only top safe fix v94 =====
   In Safari/normal browsers the system/browser chrome already reserves top space.
   Keep the bigger safe top only for installed standalone PWA. */
@media not all and (display-mode: standalone) {
  :root { --k-top-safe: 12px; }
  .safe-area-top { height: var(--k-top-safe) !important; }
}
@media (display-mode: standalone) {
  :root { --k-top-safe: max(54px, env(safe-area-inset-top)); }
  .safe-area-top { height: var(--k-top-safe) !important; }
}



/* ===== UI rescue v99: valid DOM + subpage safe top + settings visible ===== */
.page-settings.active { display: flex !important; flex-direction: column !important; background: var(--bg-primary) !important; }
.page-settings > .scroll-container { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 20px 20px calc(var(--k-tab-h, 86px) + 40px) !important; }
.life-subpage.open { top: 0 !important; bottom: 0 !important; }
.life-subpage .sub-header { flex-shrink: 0 !important; min-height: 58px !important; padding: 18px 20px 14px !important; background: var(--bg-primary) !important; z-index: 20 !important; }
.life-subpage > .scroll-container { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: calc(var(--k-tab-h, 86px) + 44px) !important; }
#sub-stats .memory-panel { margin-bottom: 14px !important; }
#sub-stats .memory-star-card { padding: 12px 13px !important; }
#sub-stats .intimacy-enter { margin-top: 8px !important; margin-bottom: 14px !important; }


/* ===== Afterglow / 余温手记 v103 ===== */
.afterglow-section {
  background: linear-gradient(180deg, rgba(212,160,83,0.08), rgba(255,255,255,0.025));
  border: 1px solid rgba(212,160,83,0.14);
  border-radius: 18px;
  padding: 15px;
  margin: 2px 0 24px;
}
.afterglow-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.afterglow-title { color: var(--gold-primary); font-size:16px; letter-spacing:1px; }
.afterglow-desc { color: var(--text-muted); font-size:12px; line-height:1.5; margin-top:4px; }
.afterglow-count { min-width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:var(--gold-primary); background:rgba(212,160,83,0.08); border:1px solid rgba(212,160,83,0.16); font-size:12px; }
.afterglow-empty { color: var(--text-secondary); font-size:13px; line-height:1.75; background:rgba(10,10,15,0.35); border:1px dashed rgba(212,160,83,0.18); border-radius:14px; padding:14px; }
.afterglow-list { display:flex; flex-direction:column; gap:10px; }
.afterglow-card { background:rgba(10,10,15,0.36); border:1px solid rgba(255,255,255,0.07); border-radius:14px; padding:13px; cursor:pointer; }
.afterglow-card:active { transform:scale(.985); opacity:.9; }
.afterglow-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.afterglow-card-title { color:var(--text-primary); font-size:14px; line-height:1.35; }
.afterglow-date { color:var(--gold-primary); font-size:11px; white-space:nowrap; opacity:.86; }
.afterglow-scene { color:var(--text-secondary); font-size:12px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.afterglow-quote { margin-top:10px; color:var(--gold-primary); font-size:13px; line-height:1.55; font-style:italic; }
.afterglow-modal { max-width: 340px !important; max-height: 78vh; overflow-y:auto; -webkit-overflow-scrolling:touch; text-align:left !important; }
.afterglow-modal .int-modal-emoji, .afterglow-modal .int-modal-name, .afterglow-modal .int-modal-date, .afterglow-modal .int-modal-close { text-align:center; }
.afterglow-modal-block { margin-top:14px; }
.afterglow-modal-label { color:var(--gold-primary); font-size:12px; letter-spacing:1px; margin-bottom:6px; }
.afterglow-modal-text { color:var(--text-secondary); font-size:14px; line-height:1.75; white-space:pre-wrap; }
.afterglow-modal-quote { margin-top:16px; padding:13px; border-radius:14px; background:rgba(212,160,83,0.08); border:1px solid rgba(212,160,83,0.16); color:var(--gold-primary); font-size:15px; line-height:1.65; font-style:italic; text-align:center; }


/* ===== Afterglow delete + mobile modal fix v103 ===== */
.afterglow-card { position: relative; padding-right: 42px !important; }
.afterglow-delete {
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:999px;
  border:1px solid rgba(212,160,83,0.24); background:rgba(10,10,15,0.58); color:rgba(212,160,83,0.9);
  font-size:18px; line-height:22px; padding:0; cursor:pointer; z-index:2;
}
.afterglow-delete:active { transform:scale(.92); opacity:.75; }
.int-modal-overlay { align-items:flex-start !important; padding: max(18px, env(safe-area-inset-top, 0px)) 0 calc(var(--k-tab-h, 86px) + env(safe-area-inset-bottom, 0px) + 24px) !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; }
.afterglow-modal { box-sizing:border-box; margin: 8px auto 28px !important; max-height:none !important; width: calc(100vw - 56px) !important; max-width: 360px !important; padding:28px 24px 22px !important; }
.afterglow-modal-actions { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px; }
.afterglow-modal-actions .int-modal-close, .afterglow-modal-delete { margin-top:0; border-radius:999px; padding:9px 18px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.035); color:var(--text-muted); font-size:13px; cursor:pointer; }
.afterglow-modal-delete { color:#d79a9a; border-color:rgba(215,154,154,0.25); background:rgba(215,154,154,0.06); }

/* ===== Play notes / 玩法便签墙 v116 ===== */
.playnote-section {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 15px;
  margin: 0 0 24px;
}
.playnote-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.playnote-title { color:var(--text-primary); font-size:16px; letter-spacing:1px; }
.playnote-desc { color:var(--text-muted); font-size:12px; line-height:1.5; margin-top:4px; }
.playnote-count { min-width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:var(--gold-primary); background:rgba(212,160,83,0.08); border:1px solid rgba(212,160,83,0.16); font-size:12px; }
.playnote-add { border:1px dashed rgba(212,160,83,0.28); background:rgba(212,160,83,0.06); color:var(--gold-primary); border-radius:14px; padding:12px; text-align:center; font-size:13px; margin-bottom:12px; cursor:pointer; }
.playnote-form { border:1px solid rgba(212,160,83,0.16); background:rgba(10,10,15,0.28); border-radius:14px; padding:12px; margin-bottom:12px; }
.playnote-author-row, .playnote-comment-author-row { display:flex; gap:8px; margin-bottom:10px; }
.playnote-author, .playnote-comment-author-btn { flex:1; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.035); color:var(--text-muted); border-radius:999px; padding:8px 10px; font-size:12px; }
.playnote-author.active, .playnote-comment-author-btn.active { border-color:rgba(212,160,83,0.35); background:rgba(212,160,83,0.12); color:var(--gold-primary); }
.playnote-input, .playnote-textarea { width:100%; box-sizing:border-box; border:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.16); color:var(--text-primary); border-radius:12px; padding:10px 12px; font-size:13px; margin-bottom:9px; outline:none; }
.playnote-textarea { resize:vertical; min-height:82px; line-height:1.6; }
.playnote-input:focus, .playnote-textarea:focus, .playnote-comment-input:focus { border-color:rgba(212,160,83,0.38); }
.playnote-form-actions { display:flex; justify-content:flex-end; gap:10px; }
.playnote-btn, .playnote-comment-send { border:0; border-radius:999px; padding:9px 15px; font-size:13px; cursor:pointer; }
.playnote-btn.ghost { background:transparent; color:var(--text-muted); border:1px solid rgba(255,255,255,0.08); }
.playnote-btn.save, .playnote-comment-send { background:var(--gold-primary); color:var(--bg-primary); }
.playnote-empty { color:var(--text-muted); font-size:13px; line-height:1.75; text-align:center; padding:24px 8px; }
.playnote-list { display:flex; flex-direction:column; gap:10px; }
.playnote-card { position:relative; background:rgba(10,10,15,0.34); border:1px solid rgba(255,255,255,0.07); border-radius:14px; overflow:hidden; }
.playnote-card::before { content:''; position:absolute; left:14px; top:0; width:34px; height:5px; border-radius:0 0 6px 6px; background:rgba(212,160,83,0.58); }
.playnote-card-main { padding:18px 13px 12px; cursor:pointer; }
.playnote-actions { top:8px; right:8px; }
.playnote-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-right:74px; }
.playnote-card-title { color:var(--text-primary); font-size:14px; line-height:1.35; }
.playnote-card-time { color:var(--text-muted); font-size:10px; margin-top:4px; }
.playnote-card-author { flex-shrink:0; border-radius:999px; padding:4px 9px; font-size:11px; border:1px solid rgba(255,255,255,0.10); }
.playnote-card-author.lina, .playnote-comment-author.lina { color:#e8a0bf; }
.playnote-card-author.kyle, .playnote-comment-author.kyle { color:var(--gold-primary); }
.playnote-card-content { color:var(--text-secondary); font-size:13px; line-height:1.65; margin-top:10px; white-space:pre-wrap; word-break:break-word; }
.playnote-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.playnote-tags span { color:var(--gold-primary); background:var(--gold-dim); border:1px solid var(--border-gold); border-radius:999px; padding:3px 8px; font-size:10px; }
.playnote-tags span.tried { color:#9ee6c5; background:rgba(120,220,170,0.10); border-color:rgba(120,220,170,0.28); }
.playnote-tried.active { color:#9ee6c5 !important; border-color:rgba(120,220,170,0.35) !important; background:rgba(120,220,170,0.10) !important; }
.playnote-expand-hint { margin-left:auto; }
.playnote-comments-area { max-height:0; overflow:hidden; transition:max-height .28s ease; border-top:0 solid rgba(255,255,255,0.06); }
.playnote-card.expanded .playnote-comments-area { max-height:1400px; border-top-width:1px; }
.playnote-comments-inner { padding:12px 13px 13px; }
.playnote-comment { padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.playnote-comment-author { font-size:12px; margin-bottom:4px; }
.playnote-comment-content { color:var(--text-secondary); font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.playnote-comment-time { color:var(--text-muted); font-size:10px; margin-top:4px; }
.playnote-no-comments { color:var(--text-muted); font-size:12px; text-align:center; padding:8px 0 12px; }
.playnote-comment-input-row { display:flex; gap:8px; align-items:flex-end; }
.playnote-comment-input { flex:1; min-height:38px; max-height:120px; resize:vertical; border:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.16); color:var(--text-primary); border-radius:12px; padding:9px 10px; font-size:13px; line-height:1.5; outline:none; }

/* ===== Weather card v104 ===== */
.weather-card { animation: fadeInUp 0.8s ease-out 0.22s both; }
.weather-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; }
.weather-updated { font-size:10px; color:var(--text-muted); letter-spacing:.5px; padding-top:1px; white-space:nowrap; }
.weather-days { display:grid; grid-template-columns:1fr 1fr; gap:10px; position:relative; }
.weather-day { border:1px solid rgba(212,160,83,.12); border-radius:14px; padding:12px; background:rgba(255,255,255,.018); }
.weather-day-top { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.weather-icon { font-size:19px; }
.weather-date { font-size:11px; color:var(--text-secondary); letter-spacing:.4px; }
.weather-main { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:7px; }
.weather-temp { font-size:18px; color:var(--gold-light); font-weight:300; }
.weather-text { font-size:12px; color:var(--text-primary); white-space:nowrap; }
.weather-meta { font-size:10px; color:var(--text-muted); line-height:1.4; }
.weather-advice { margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.04); font-size:13px; line-height:1.7; color:var(--text-secondary); position:relative; font-weight:300; }
@media (max-width: 360px) { .weather-days { grid-template-columns:1fr; } }


/* ===== Weather card center fix v106 ===== */
.weather-days { justify-items: center; align-items: stretch; }
.weather-day { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.weather-day-top { justify-content: center; width: 100%; }
.weather-main { justify-content: center; width: 100%; gap: 10px; }
.weather-meta { text-align: center; width: 100%; }


/* ===== Weather card mobile grid fix v107 ===== */
.weather-days {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  justify-items: stretch;
  align-items: stretch;
  overflow: hidden;
}
.weather-day {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.weather-day-top {
  width: 100%;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
.weather-main {
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 4px 8px;
  flex-wrap: wrap;
  text-align: center;
}
.weather-temp {
  font-size: 17px;
  line-height: 1.25;
  white-space: nowrap;
}
.weather-text {
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}
.weather-meta {
  width: 100%;
  text-align: center;
  font-size: 10px;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 390px) {
  .weather-days { gap: 7px; }
  .weather-day { padding: 10px 6px; }
  .weather-temp { font-size: 16px; }
  .weather-text { font-size: 11px; }
  .weather-date { font-size: 10px; }
}


/* ===== Settings sub-panel scroll fix v109 =====
   SET child panels are absolute overlays. Reserve fixed tabbar space inside
   their own scroller so long panels can reach the end. */
.set-panel {
  bottom: var(--k-tab-h, 86px) !important;
  min-height: 0 !important;
}
.set-panel > .scroll-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  padding-bottom: calc(var(--k-tab-h, 86px) + env(safe-area-inset-bottom, 0px) + 48px) !important;
}

/* ===== 共享内容编辑/删除 ===== */
.entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px 0;
  position: relative;
  z-index: 2;
}
.entry-action {
  appearance: none;
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.entry-action:active { transform: scale(0.96); }
.entry-action.danger { color: #e8a0a0; border-color: rgba(232, 120, 120, 0.25); }
.diary-actions + .diary-entry-header { padding-top: 8px; }
.note-actions { padding: 0 0 8px; }
.bm-card .entry-actions { padding: 12px 14px 0; }

.entry-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.58);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}
.entry-editor-overlay.show { display: flex; }
.entry-editor-panel {
  width: min(680px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}
.entry-editor-title {
  color: var(--text-primary);
  font-size: 16px;
  margin-bottom: 14px;
}
.entry-editor-label {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin: 10px 0 6px;
}
.entry-editor-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-main);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  padding: 11px 13px;
  font-family: inherit;
  outline: none;
}
.entry-editor-input:focus { border-color: var(--accent-gold); }
.entry-editor-textarea {
  min-height: 220px;
  resize: vertical;
  line-height: 1.7;
  white-space: pre-wrap;
}
.entry-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.entry-editor-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.entry-editor-btn.cancel { background: transparent; color: var(--text-muted); }
.entry-editor-btn.save { background: var(--accent-gold); color: var(--bg-primary); font-weight: 600; }
.entry-editor-btn:disabled { opacity: 0.65; }