/* PlainView —— 内容视图的原生弹层宿主。
   设计原则：布局全部普通文档流 + 纯 CSS，不读任何 JS 视口变量、不做键盘补偿、
   不做 position:fixed 锁 body、不起 rAF 对账。Safari 对普通页面的键盘处理
   （聚焦自动滚动露出输入框）是原生可靠的；此前容器窗口在真机 Safari 上的
   「画面混乱 / 飞出屏幕 / 卡死」全部来自与浏览器对抗的视口同步机制。 */
.pv-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: #f7fafc;
    display: flex;
    flex-direction: column;
}
/* 左缘右滑返回（plainview.js attachSwipeBack）：
   拖动时顶层加左侧投影、下层用 --pv-dim 蒙层随拉开逐渐变亮，营造「上层被拉开、
   露出下一层」的层级感。蒙层只动 opacity（GPU 友好）、pointer-events:none 不挡
   触摸；--pv-dim 由 JS 在拖动时实时写入，松手归 0。 */
.pv-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #0f172a;
    opacity: var(--pv-dim, 0);
    pointer-events: none;
}
.pv-overlay.pv-dragging {
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.22);
}
.pv-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* 滚到头不把滚动链给背景 */
    touch-action: pan-y;            /* 纵向滚动归浏览器，横向手势干净地交给左缘右滑返回 */
    display: flex;                 /* 让 .pv-head / .pv-body 在纵向 flex 排布，
                                      内容视图（chatview 等）才能用 flex:1 撑满中间区域。
                                      sticky 元素在 flex 容器内仍正常工作 */
    flex-direction: column;
}
.pv-scroll:focus { outline: none; }
/* 内容宿主：纵向 flex 容器；flex:1 占满 .pv-scroll 剩余高度，
   这样内容视图（chatview 的 .gct、itemeditview 的 ChatFrame 骨架等）
   才能用 flex:1 在纵向铺开 head / 内容 / 底栏。
   其它视图（profileview .gfp 等）的 root 仍为 display:block，无 flex:1，
   作为自然尺寸 flex item 排布——和改之前完全一致。 */
.pv-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
/* 头部吸附在弹层滚动区顶部（纯 CSS，iOS 安全）。
   .pv-head 只承担「安全区占位」+ 吸顶 + 背景；下方 .pv-titlebar 是真正的
   「可视标题栏」，高度固定为 60px（44 按钮 + 上下 8px padding），
   标题在 .pv-titlebar 里居中后必然跟 ‹ / × 按钮同一中线，
   不依赖 env(safe-area-inset-top) 在不同浏览器/容器里的实现差异
   （桌面端 / iframe / 老 WebView 等都可能返回 0 或被忽略）。 */
.pv-head {
    position: sticky;
    top: 0;
    /* 必须压过弹层内容里带层叠抬升的元素：卡片 ⋮ 菜单给 .item-card.menu-open
       挂 z-index:30（itemcard.css），弹层宿主（用户/角色管理面板等）复用同一套
       卡片模板；本标题栏原先 z:2 会被菜单整个盖住。取 100 与整页 PageChrome
       的 .pc-head 同语义（顶栏恒高于内容弹层）。 */
    z-index: 100;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(247, 250, 252, 0.96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-soft, #edf2f7);
}
/* 可视标题栏：flex 容器承载 ‹ / 标题 / actions / × ；
   高度 = 8 + 44 + 8 = 60，跟旧版 .pv-head 内容区一致，行为对调用方透明。 */
.pv-titlebar {
    position: relative;     /* 标题 absolute 的 containing block */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
}
.pv-back {
    flex: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-2, #4a5568);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pv-back:active { background: var(--border-soft, #edf2f7); }
/* 右上角 × 关闭是两种容器共享的框架标准（样式对齐 mobile-shell.css 的 .std-modal-close） */
.pv-close {
    flex: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-2, #4a5568);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;   /* 标题改成绝对居中后，close 自己负责推到头部最右侧 */
}
.pv-close:active { background: var(--border-soft, #edf2f7); }
/* 标题右侧辅助操作槽（PlainView.open({ actions })）：调用方注入的按钮等节点。
   容器本身不开 margin-left:auto，由 .pv-close 的 margin-left:auto 统一负责
   把右段（actions + close 整体）推至最右；actions 自然 flex 顺序排在 close 之前，
   这样 actions 与 close 紧邻不会撑出意外的间距。title 仍为绝对居中，不参与 flex。
   :empty 兜底在 plainview.js 里就没有节点，本规则再补一道让纯 CSS 单测时也不留盒。 */
.pv-actions {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pv-actions:empty { display: none; }
/* PlainView actions 槽里塞的辅助按钮样式：用于「我的收藏」管理窗口的
   「取消」+「保存」。小药丸风格与主视图 .fav-edit-btn 视觉一致；主操作
   「保存」走 .pv-action-btn-primary 实心填充形成层级。 */
.pv-action-btn {
    min-height: 28px;
    padding: 4px 14px;
    background: transparent;
    color: #4a90d9;
    border: 1px solid #4a90d9;
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s, color .15s;
}
.pv-action-btn:hover { background: #ebf3fb; }
.pv-action-btn:active { background: #d6e6f5; }
.pv-action-btn:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
.pv-action-btn-primary {
    background: #4a90d9;
    color: #fff;
}
.pv-action-btn-primary:hover { background: #3b7bc0; }
.pv-action-btn-primary:active { background: #2f6da6; }
.pv-action-btn-primary:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
/* 圆形图标按钮：与社区搜索按钮同款（蓝色圆形 + 白色图标），供各页面顶栏复用 */
.pv-action-icon-btn {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.1s ease;
    flex: none;
}
.pv-action-icon-btn:hover { background: var(--primary-2); }
.pv-action-icon-btn:active { transform: scale(0.92); }
.pv-action-icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pv-action-icon-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}
/* 文本 + 号变体：与消息页 msg-add-btn 同款（font-size 1.4rem 文本加号） */
.pv-action-icon-btn-text {
    font-size: 1.4rem;
    line-height: 1;
}
/* 标题绝对定位到 .pv-titlebar 的正中（left:50% + top:50% + translate(-50%,-50%)），
   与 back / close 按钮完全解耦——无论是否有 back 按钮、close 按钮占多宽，都严格居中
   （微信顶栏的同款做法；之前用 flex:1 + text-align:center 会让文字偏左，
   因为 flex 区域不包含 close 按钮占的 44px）。
   .pv-titlebar 高度固定 60px，top:50% 即落在按钮的同一中线，无需 env() 补偿。 */
.pv-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* box 已经居中到 .pv-titlebar 中线 (y=30)，但 <h3> 文字默认贴上沿，
       视觉上仍比 ‹/× 高。这里把 box 变 flex 让文字真正贴 box 中线，
       跟按钮里的 ‹/× 字符完全同 y。 */
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 96px);   /* 留出左右各一个 44px 按钮 + 边距 */
    height: 44px;                   /* 跟按钮同高,flex align 才有意义 */
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;               /* 显式 line-height,避免不同浏览器 normal 值不同 */
    color: var(--text-1, #2d3748);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}