/* P0 空间层：不改变主题、文字缩放或业务数据。高度只受当前可见视口约束。 */
:root {
  --layout-viewport: 100vh;
  --layout-gap: 6px;
  --layout-top: max(var(--layout-gap), env(safe-area-inset-top, 0px));
  --layout-bottom: max(var(--layout-gap), env(safe-area-inset-bottom, 0px));
  --layout-left: max(var(--layout-gap), env(safe-area-inset-left, 0px));
  --layout-right: max(var(--layout-gap), env(safe-area-inset-right, 0px));
  --layout-available: max(0px, calc(var(--layout-viewport) - var(--layout-top) - var(--layout-bottom)));
  --layout-available-width: calc(100vw - var(--layout-left) - var(--layout-right));
  /* 标准/加长共享预览宽度，只有屏幕比例改变；字体和按钮不参与缩放。 */
  --layout-fit-width: min(var(--layout-available-width), calc((var(--layout-available) - 22px) / 1.9 + 22px));
  --layout-preview-width: var(--layout-fit-width);
  --layout-phone-width: min(var(--layout-preview-width), calc((var(--layout-available) - 22px) / 1.85 + 22px));
  --layout-phone-height: var(--layout-available);
}
@supports(height:100dvh) { :root { --layout-viewport:100dvh; } }
:root[data-display-mode=auto] { --layout-fit-width:min(var(--layout-available-width), calc((var(--layout-available) - 22px) / 1.85 + 22px)); --layout-phone-height:min(var(--layout-available), calc((var(--layout-phone-width) - 22px) * 1.85 + 22px)); }
:root[data-display-mode=standard] { --layout-phone-width:var(--layout-preview-width); --layout-phone-height:min(var(--layout-available), calc((var(--layout-phone-width) - 22px) * 1.7 + 22px)); }
:root[data-display-mode=tall] { --layout-phone-width:var(--layout-preview-width); --layout-phone-height:min(var(--layout-available), calc((var(--layout-phone-width) - 22px) * 1.9 + 22px)); }
:root[data-preview-size="100"] { --layout-preview-width:min(var(--layout-fit-width), 410px); }
:root[data-preview-size="125"] { --layout-preview-width:min(var(--layout-fit-width), 512.5px); }
:root[data-preview-size="150"] { --layout-preview-width:min(var(--layout-fit-width), 615px); }
body { min-height:var(--layout-viewport); padding:var(--layout-top) var(--layout-right) var(--layout-bottom) var(--layout-left); }
.phone { width:min(var(--layout-phone-width), 100%); height:var(--layout-phone-height); min-height:0; max-height:var(--layout-available); padding:10px; }
.screen { min-width:0; min-height:0; }
.status-bar { height:40px; padding-top:6px; }
.camera { top:9px; }
.bottom-bar { margin:7px auto 5px; }
/* 桌面导航独立于滚动页；显式零基准避免百分比高度参与内容撑高。 */
.home-view > .desktop-pager { flex:1 1 0; height:0; min-height:0; }
.home-view > .desktop-tabs, .home-view > .desktop-dock { flex:0 0 auto; }
.desktop-page { padding-bottom:max(28px, env(safe-area-inset-bottom, 0px)); scroll-padding-bottom:28px; }
/* 每个重点页只有 layout-scroll 滚动，标题和必要操作不参与滚动。 */
.view.layout-page { display:flex; flex-direction:column; overflow:hidden; }
.layout-page > .page-header { flex:0 0 auto; min-height:60px; padding:8px 14px; }
.layout-page > .page-header .back-button { min-width:44px; min-height:44px; }
.layout-scroll { flex:1 1 auto; min-height:0; min-width:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--color-border) transparent; scroll-padding-block:12px; padding-bottom:24px; }
.layout-scroll > .page-content { padding:16px 16px 24px; }
.layout-scroll.page-content { padding:16px 16px 24px; }
.layout-fold { margin:12px 0; border:1px solid var(--color-border); border-radius:16px; background:var(--color-surface); min-width:0; }
.layout-fold > summary { cursor:pointer; min-height:46px; padding:12px 14px; font-size:14px; font-weight:600; line-height:1.6; overflow-wrap:anywhere; }
.layout-fold[open] > summary { border-bottom:1px solid var(--color-border); }
.layout-fold > :not(summary) { margin:12px 14px; }
.layout-fold > .memory-form { border:0; padding:0; background:transparent; box-shadow:none; }
.layout-fold :is(input,select,textarea) { max-width:100%; min-width:0; }
.layout-fold summary:focus-visible { outline:var(--focus-ring); outline-offset:2px; border-radius:15px; }
.layout-fold .settings-group { margin:0; border:0; }
.layout-footer { flex:0 0 auto; margin:0; padding:10px 14px; border-top:1px solid var(--color-border); background:var(--color-surface); z-index:2; }
.layout-footer button { min-height:44px; }
.layout-footer p { margin:5px 0 0; }
.layout-footer p:empty { display:none; }
.layout-footer .study-actions { margin:0; }
.layout-size { padding:0 16px 12px; }
.layout-size h3 { margin:0 0 10px; font-size:15px; }
.layout-size label { display:block; font-size:13px; margin-bottom:8px; }
.layout-size select { width:100%; min-height:44px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); color:var(--color-text); padding:8px; font:inherit; }
.layout-size p { font-size:12px; color:var(--color-text-muted); line-height:1.8; margin:8px 0 0; }
.layout-settings-link { display:block; width:100%; min-height:48px; text-align:left; padding:12px 14px; margin:10px 0; }
#settings-view .layout-scroll > .page-content { padding-block:10px; }
#desktop-settings { padding-top:0; }
#desktop-settings > .layout-fold { margin-top:0; }
#desktop-settings .decor-intro { margin-top:0; }
.layout-relation-overview { margin:10px 0; padding:12px 14px; border-left:3px solid var(--color-primary); background:var(--color-surface); line-height:1.8; font-size:14px; overflow-wrap:anywhere; }
.layout-relation-overview small { display:block; color:var(--color-text-muted); font-size:12px; }
.layout-page .memory-intro h3, .layout-page #relationship-owner { margin-top:0; }
.layout-page :is(.memory-content,.relationship-content) { gap:12px; }
.layout-page :is(.memory-content,.relationship-content) > .layout-fold { margin-block:0; }
.layout-page :is(.memory-toolbar,.memory-item-actions,.relationship-experience-actions) button { min-height:44px; }
.layout-page :is(#memory-instance,#relationship-instance) { display:block; overflow-wrap:anywhere; }
#character-detail-view .profile-hero { padding:12px 0; }
#character-detail-view .profile-hero h3 { margin:10px 0 6px; }
#character-detail-view .form-actions { margin:10px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#character-detail-view .form-actions button { min-height:44px; }
#character-detail-view #detail-chat { grid-column:1/-1; }
#character-detail-view #detail-delete { grid-column:1/-1; }
#vault-view .vault-card { margin:0; padding:14px; }
#vault-view .vault-actions { margin-top:12px; }
#vault-view #vault-feedback:empty, #vault-view #vault-result:empty, #vault-view #vault-issues:empty { display:none; }
#focus-view .study-content { display:flex; flex-direction:column; gap:12px; }
#focus-view .study-intro { display:none; } /* 原文仍在 DOM；标题区已提供页面名称。 */
#focus-view .study-clock { padding:16px; }
#focus-view .study-clock #focus-time { margin:6px 0; }
#focus-view .study-progress { margin-bottom:12px; }
#focus-view .study-companion { padding:10px 12px; gap:5px 10px; border-radius:18px; }
#focus-view .study-companion small { font-size:11px; }
#focus-view .study-companion p { line-height:1.6; }
#focus-view .study-summary { padding-block:10px; }
#focus-view .layout-fold { margin:0; }
#focus-view .study-policy { padding-top:0; }
/* 模态弹层出现时只锁定该页的滚动拥有者，不清零滚动位置。 */
.screen.layout-modal-open .layout-scroll, .screen.layout-modal-open .view:not(.layout-page), .screen.layout-modal-open .messages, .screen.layout-modal-open .desktop-page, .screen.layout-modal-open .desktop-pager { overflow:hidden; }
.screen.layout-media-open .messages { overflow:hidden; }
.screen dialog { position:fixed; inset:var(--layout-screen-top, 0px) var(--layout-screen-right, 0px) var(--layout-screen-bottom, 0px) var(--layout-screen-left, 0px); max-width:calc(var(--layout-screen-width, 100vw) - 24px); max-height:calc(var(--layout-screen-height, 100dvh) - 32px); margin:auto; overscroll-behavior:contain; }
.layout-scroll :is(button,select,input,textarea) { scroll-margin-block:14px; }
@media(max-width:480px) {
  :root { --layout-gap:4px; }
  .phone { width:100%; height:var(--layout-available); max-height:var(--layout-available); padding:5px; --radius-phone:34px; --radius-screen:28px; }
  .status-bar { padding-inline:22px; }
}
@media(max-height:480px) {
  :root { --layout-gap:4px; }
  .status-bar { height:36px; }
  .camera { top:6px; }
  .layout-page > .page-header { padding-block:3px; min-height:50px; }
}
/* 极矮横向窗口优先保留操作宽度；正常桌面仍按上面的屏幕比例适配。 */
@media(min-width:481px) and (max-height:520px) {
  .phone { width:min(360px, 100%); height:var(--layout-available); }
}
@media(prefers-reduced-motion:reduce) { .layout-scroll { scroll-behavior:auto; } }