/* Misty migration: reading / gift / screentime.
   Visual layer only; feature DOM hooks and scripts stay untouched. */

body.misty-content {
  --bg: var(--canvas);
  --text: var(--ink);
  --text2: var(--muted);
  --text3: var(--faint);
  --accent: var(--rose);
  --danger: #c25454;
  --green: var(--sage);
  --card: color-mix(in srgb, var(--surface) 76%, transparent);
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  background: transparent;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body.misty-content[data-theme="dark"] {
  --canvas: #171210;
  --canvas-warm: #211815;
  --surface: #2b201d;
  --surface-soft: #33241f;
  --ink: #f3e9dd;
  --muted: #b8a39a;
  --faint: #8f7970;
  --rose: #e28a99;
  --rose-deep: #f0a2af;
  --rose-soft: #4a2c33;
  --rose-mist: #372228;
  --cream: #352821;
  --sage: #92c0aa;
  --sage-soft: #21352d;
  --blue: #9bb4cc;
  --blue-soft: #24333f;
  --amber: #e4b873;
  --amber-soft: #41321d;
  --border: #493630;
  --border-strong: #59433b;
  --shadow: 0 20px 55px rgba(0, 0, 0, .28);
  --shadow-soft: 0 8px 25px rgba(0, 0, 0, .22);
  --bg: var(--canvas);
  --text: var(--ink);
  --text2: var(--muted);
  --text3: var(--faint);
  --accent: var(--rose);
  --danger: #e07a7a;
  --green: var(--sage);
  --card: color-mix(in srgb, var(--surface) 76%, transparent);
}

body.misty-content::after {
  background: color-mix(in srgb, var(--canvas) 43%, transparent);
}

body.misty-content .sub-page {
  width: min(100%, 720px);
  max-width: 720px;
  background: color-mix(in srgb, var(--canvas) 18%, transparent);
}

body.misty-content .top-bar {
  min-height: 82px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: max(13px, env(safe-area-inset-top)) 18px 10px;
  border: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--canvas) 95%, transparent),
    color-mix(in srgb, var(--canvas) 74%, transparent),
    transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
}

body.misty-content .top-bar h2 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Songti SC", "Noto Serif SC", serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .05em;
  text-align: center;
  overflow: visible;
  white-space: normal;
}

body.misty-content .top-bar h2::before {
  display: block;
  margin-bottom: 5px;
  color: var(--rose);
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: 8px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .23em;
}

body.feature-reading .top-bar h2::before { content: "STELLAN · READING"; }
body.feature-gift .top-bar h2::before { content: "STELLAN · LOVE MARKS"; }
body.feature-screentime .top-bar h2::before { content: "STELLAN · SCREEN TIME"; }

body.feature-reading .top-bar::after,
body.feature-screentime .top-bar::after {
  width: 44px;
  content: "";
}

body.misty-content .top-bar h2 > i { display: none; }

body.misty-content .back-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 15px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 6px 18px rgba(67, 48, 44, .06), inset 0 1px rgba(255,255,255,.34);
  font-family: Georgia, serif;
  font-size: 0;
  transition: transform .2s var(--ease), border-color .2s, color .2s;
}

body.misty-content .back-btn::before {
  content: "‹";
  font-size: 27px;
  line-height: 1;
  transform: translateY(-1px);
}

body.misty-content .back-btn:active { transform: scale(.92); }

body.misty-content .page-content {
  width: min(100%, 680px);
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 18px max(42px, env(safe-area-inset-bottom));
}

body.misty-content :is(.book-card, .today-card, .breakdown-card, .chart-card, .guide-card) {
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--surface) 68%, transparent),
    color-mix(in srgb, var(--surface) 48%, transparent));
  box-shadow: 0 12px 34px rgba(67, 48, 44, .075), inset 0 1px rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(11px) saturate(1.06);
  backdrop-filter: blur(11px) saturate(1.06);
}

body.misty-content button,
body.misty-content .book-card,
body.misty-content .gift-thumb { -webkit-tap-highlight-color: transparent; }

@media (hover: hover) {
  body.misty-content :is(.book-card, .gift-thumb) { transition: transform .22s var(--ease), box-shadow .22s, border-color .22s; }
  body.misty-content :is(.book-card, .gift-thumb):hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--rose) 42%, var(--border));
    box-shadow: 0 17px 38px rgba(67, 48, 44, .11), inset 0 1px rgba(255,255,255,.38);
  }
}

/* Reading: airy library outside, quiet paper inside. */
body.feature-reading .upload-area {
  margin: 6px 0 18px;
  padding: 25px 20px;
  border: 1px dashed color-mix(in srgb, var(--rose) 48%, var(--border));
  border-radius: 24px;
  color: var(--muted);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--rose-mist) 58%, transparent),
    color-mix(in srgb, var(--surface) 42%, transparent));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

body.feature-reading .upload-area .upload-icon {
  margin-bottom: 9px;
  color: var(--rose);
  font-size: 30px;
}

body.feature-reading .upload-area .upload-text { font-size: 13px; letter-spacing: .02em; }
body.feature-reading .book-list { gap: 14px; }
body.feature-reading .book-card { padding: 14px; border-radius: 22px; }
body.feature-reading .book-cover { width: 62px; height: 86px; border-radius: 12px; background: var(--rose-mist); }
body.feature-reading .book-title { color: var(--ink); font-family: Georgia, "Songti SC", serif; font-size: 16px; font-weight: 500; }
body.feature-reading .book-author { color: var(--muted); }
body.feature-reading .book-meta { color: var(--faint); }
body.feature-reading .book-delete { color: var(--faint); }

body.feature-reading .reader-view {
  color: var(--ink);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--canvas) 92%, transparent),
    color-mix(in srgb, var(--canvas-warm) 82%, transparent));
}

body.feature-reading .reader-topbar,
body.feature-reading .reader-footer {
  border-color: color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
}

body.feature-reading .reader-topbar { padding-top: max(10px, env(safe-area-inset-top)); }
body.feature-reading .reader-topbar .chapter-title { font-family: Georgia, "Songti SC", serif; font-weight: 500; }
body.feature-reading .reader-topbar .back-reader,
body.feature-reading .topbar-icon-btn { color: var(--muted); }
body.feature-reading .reader-topbar .invite-btn,
body.feature-reading .ask-send,
body.feature-reading .rc-send { color: white; background: var(--rose); box-shadow: 0 7px 18px rgba(201,111,125,.22); }
body.feature-reading .reader-content { width: min(100%, 700px); margin: 0 auto; padding-inline: clamp(20px, 6vw, 46px); font-family: Georgia, "Songti SC", "Noto Serif SC", serif; }
body.feature-reading .segment-status { color: var(--muted); background: color-mix(in srgb, var(--rose-mist) 64%, transparent); }
body.feature-reading .segment-status .seg-block.done { background: var(--sage); }
body.feature-reading .user-hl { text-decoration-color: var(--rose); }
body.feature-reading :is(.anno-popup-card, .hl-popup-card, .ask-popup-card, .reader-reply, .toc-panel) {
  color: var(--ink);
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}
body.feature-reading :is(.anno-popup-card, .hl-popup-card, .ask-popup-card) { border-radius: 26px 26px 0 0; }
body.feature-reading :is(.ask-input-row input, .reader-reply-input input, .hl-quote, .ask-quote, .anno-music-card, .summary-btn) {
  color: var(--ink);
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-soft) 80%, transparent);
}
body.feature-reading .rc-bubble { color: var(--ink); }
body.feature-reading .rc-row.user .rc-bubble { background: color-mix(in srgb, var(--rose-soft) 72%, transparent); border-color: color-mix(in srgb, var(--rose) 28%, transparent); }
body.feature-reading .rc-row.assistant .rc-bubble { background: color-mix(in srgb, var(--sage-soft) 72%, transparent); border-color: color-mix(in srgb, var(--sage) 28%, transparent); }
body.feature-reading .rc-row.connor .rc-bubble { background: color-mix(in srgb, var(--blue-soft) 74%, transparent); border-color: color-mix(in srgb, var(--blue) 28%, transparent); }

/* Gift: keeps an intimate gallery, but moves it into the shared warm palette. */
body.feature-gift .test-gift-btn {
  justify-self: end;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--rose) 30%, var(--border));
  border-radius: 13px;
  color: var(--rose-deep);
  background: color-mix(in srgb, var(--rose-mist) 76%, transparent);
  font-size: 10px;
  white-space: nowrap;
}

body.feature-gift .page-content { background: transparent; }
body.feature-gift .gallery-header { padding: 18px 16px 24px; }
body.feature-gift .gallery-header::after { width: 66px; height: 1px; margin-top: 15px; background: linear-gradient(90deg, transparent, var(--rose), transparent); }
body.feature-gift .gallery-title { color: var(--ink); font-family: Georgia, "Songti SC", serif; font-size: 23px; font-weight: 500; letter-spacing: .2em; }
body.feature-gift .gallery-subtitle { margin-top: 7px; color: var(--rose); font-size: 9px; font-weight: 700; letter-spacing: .24em; }
body.feature-gift .gallery-list { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 14px; padding: 0; }
body.feature-gift .gift-thumb {
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  box-shadow: 0 12px 30px rgba(67,48,44,.07), inset 0 1px rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.feature-gift .gift-thumb-img { aspect-ratio: 1.04; }
body.feature-gift .gift-thumb-date { padding: 9px 6px 10px; color: var(--muted); background: transparent; font-size: 10px; }
body.feature-gift .gallery-empty { color: var(--muted); }
body.feature-gift .gallery-empty-icon { color: var(--rose); }
body.feature-gift .gift-detail-overlay,
body.feature-gift .confirm-overlay { background: rgba(44,32,29,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.feature-gift .gift-detail-box,
body.feature-gift .confirm-box {
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 25px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}
body.feature-gift .gift-detail-img { border-radius: 24px 24px 0 0; }
body.feature-gift .gift-detail-date { color: var(--rose-deep); }
body.feature-gift .gift-detail-msg,
body.feature-gift .confirm-box p { color: var(--ink); }
body.feature-gift :is(.btn-detail-close, .btn-confirm-cancel) { color: var(--muted); background: var(--cream); }
body.feature-gift :is(.btn-detail-delete, .btn-confirm-del) { color: white; background: #c86f75; }

/* Screen time: a calmer dashboard, with clear numbers and softer charts. */
body.feature-screentime { overflow-y: auto; }
body.feature-screentime .top-bar { max-width: 720px; margin: 0 auto; }
body.feature-screentime .page-content { padding-top: 12px; }
body.feature-screentime :is(.today-card, .breakdown-card, .chart-card, .guide-card) { margin-bottom: 15px; border-radius: 24px; }
body.feature-screentime .today-card { padding: 27px 22px; text-align: left; background: linear-gradient(145deg, color-mix(in srgb, var(--rose-mist) 52%, transparent), color-mix(in srgb, var(--surface) 54%, transparent)); }
body.feature-screentime .today-label { color: var(--rose-deep); font-size: 10px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
body.feature-screentime .today-hours { margin-top: 7px; color: var(--ink); font-family: Georgia, "Songti SC", serif; font-size: 50px; font-weight: 500; letter-spacing: -.03em; }
body.feature-screentime .today-unit { color: var(--muted); font-family: Inter, sans-serif; font-size: 16px; }
body.feature-screentime .today-sub { color: var(--muted); }
body.feature-screentime .battery-row { justify-content: flex-start; color: var(--muted); }
body.feature-screentime .battery-icon { color: var(--sage); }
body.feature-screentime .battery-bar,
body.feature-screentime .app-bar-wrap { background: color-mix(in srgb, var(--border) 70%, transparent); }
body.feature-screentime .battery-fill { background: var(--sage); }
body.feature-screentime .battery-fill.low { background: var(--rose); }
body.feature-screentime :is(.breakdown-card, .chart-card, .guide-card) { padding: 21px; }
body.feature-screentime :is(.breakdown-card h3, .chart-card h3, .guide-card h3) { color: var(--ink); font-family: Georgia, "Songti SC", serif; font-size: 16px; font-weight: 500; }
body.feature-screentime .app-row:not(:last-child) { border-bottom-color: color-mix(in srgb, var(--border) 64%, transparent); }
body.feature-screentime .app-icon-placeholder { color: var(--rose-deep); background: var(--rose-mist); }
body.feature-screentime .app-name { color: var(--ink); }
body.feature-screentime .app-time,
body.feature-screentime .guide-card ol { color: var(--muted); }
body.feature-screentime .app-bar-fill { background: linear-gradient(90deg, var(--rose), var(--amber)); }
body.feature-screentime .guide-card code { color: var(--rose-deep); background: var(--rose-mist); }

@media (max-width: 520px) {
  body.misty-content .top-bar { grid-template-columns: 42px minmax(0, 1fr) 42px; padding-inline: 14px; }
  body.misty-content .page-content { padding-inline: 14px; }
  body.feature-gift .test-gift-btn { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; font-size: 0; border-radius: 15px; }
  body.feature-gift .test-gift-btn i { font-size: 18px; }
  body.feature-gift .gallery-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  body.feature-reading .reader-content { font-size: 16px; line-height: 1.9; }
  body.feature-screentime .today-hours { font-size: 44px; }
  body.feature-screentime .app-bar-wrap { flex-basis: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  body.misty-content *, body.misty-content *::before, body.misty-content *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}