/* ============================================================
   extsite-view.css —— 外接站点标准容器（ExtsiteView）样式
   ------------------------------------------------------------
   全屏形态：iframe 占满画面装载同源代理 /x/<ref>/，无标题栏，右上角叠半透明
   悬浮 ×（关闭）与 JSON（查看配置源码）钮。铬件按钮由
   shared/layer-chrome.js 的 controlsHtml 渲染（哑按钮），本文件负责
   xv-* 类名的定位与视觉；JSON 钮是本容器自己的业务动作钮。
   X 类无 ‹、无右滑返回：站内导航交给站点自身，退出只有 ×（及
   浏览器后退键 / ESC）。
   ============================================================ */

.xv-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    /* 基线 z 与 .pv-overlay 同档；实际层级由 LayerManager.topZ + 1 内联抬价，
       从 PlainView 详情里打开时能盖住下层。 */
    z-index: 4000;
}

/* 站点主体：iframe 全幅铺满（无标题栏让位） */
.xv-body {
    position: absolute;
    inset: 0;
}
.xv-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 悬浮铬件层：只承载右上角 ×；容器本身 pointer-events 关掉，
   不挡站点交互，按钮自己开回来。 */
.xv-controls {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
    z-index: 2;
    display: flex;
    gap: 8px;
    pointer-events: none;
}
.xv-close {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    /* 半透明玻璃钮：深浅页面都能看清，又不过分抢站点画面 */
    background: rgba(30, 40, 50, 0.38);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xv-close:active { background: rgba(30, 40, 50, 0.6); }

/* 悬浮 JSON 源码钮：与 × 同层玻璃视觉，胶囊形态（文字钮），点击弹 stdModal */
.xv-src {
    pointer-events: auto;
    height: 40px;
    padding: 0 14px;
    border: none;
    border-radius: 20px;
    background: rgba(30, 40, 50, 0.38);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xv-src:active { background: rgba(30, 40, 50, 0.6); }

/* 源码弹窗正文（stdModal 内）：软换行防长行撑爆，等宽字体 */
.xv-src-pre {
    margin: 0;
    padding: 2px 0 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: text;
}

/* 首帧加载指示：盖在 iframe 上，首个 load 事件后摘除 */
.xv-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: var(--text-2, #4a5568);
    font-size: 0.9rem;
}
.xv-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-soft, #edf2f7);
    border-top-color: #4a90d9;
    border-radius: 50%;
    animation: xvSpin 0.8s linear infinite;
}
@keyframes xvSpin { to { transform: rotate(360deg); } }

/* 预检失败（502 / 网络错误）错误态：× 仍可关闭容器 */
.xv-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    color: var(--text-2, #4a5568);
}
.xv-error-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-1, #2d3748);
}
.xv-error-sub { font-size: 0.85rem; }