/* ============================================================
   css/panels/panels-file-preview.css — 文件内容预览弹层
   设计系统：韩系法式花艺风 + position:absolute 在 #app 内
   ============================================================ */

.file-preview-panel {
    position: absolute; inset: 0; z-index: 2000;
    background: var(--bg-chat);
    display: flex; flex-direction: column;
    transform: translateY(24px); opacity: 0;
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.file-preview-panel.open {
    transform: translateY(0); opacity: 1;
}

/* Header */
.fpp-header {
    display: flex; align-items: center; gap: 10px;
    padding: calc(10px + var(--safe-top)) 12px;
    background: var(--surface);
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}
.fpp-back {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); padding: 4px;
    border-radius: 8px; display: flex;
    transition: all 0.15s ease;
}
.fpp-back:hover { background: var(--accent-light); color: var(--text-primary); }
.fpp-title-wrap {
    flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
}
.fpp-icon { width: 24px; height: 24px; display: flex; align-items: center; }
.fpp-icon svg { width: 18px; height: 18px; color: var(--text-muted); }
.fpp-title {
    font-size: 14px; font-family: var(--font-body); color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.fpp-meta { font-size: 11px; color: var(--text-muted); }
.fpp-download {
    background: var(--rose); color: var(--surface-solid); border: none;
    padding: 6px 14px; border-radius: 8px; font-size: 12px;
    font-family: var(--font-body); cursor: pointer;
    transition: all 0.15s ease; white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, var(--shadow-xs);
}
.fpp-download:hover { background: var(--rose-hover); }
.fpp-download:active { transform: scale(0.96); }

/* Body */
.fpp-body {
    flex: 1; overflow-y: auto; padding: 16px;
    font-size: 13px; font-family: var(--font-body); color: var(--text-primary);
    line-height: 1.8; white-space: pre-wrap; word-break: break-all;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .file-preview-panel { background: var(--bg-chat); }
    .fpp-header { background: rgba(30,26,24,0.9); }
}

/* Narrow screen */
@media (max-width: 370px) {
    .fpp-header { padding: 8px 10px; gap: 6px; }
    .fpp-body { padding: 12px; font-size: 12px; }
    .fpp-title { font-size: 13px; }
}

/* ============================================================
   全屏文件预览器（v2，iOS 全屏层铁律）
   ============================================================ */
.full-file-preview {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 480px;
    transform: translateX(-50%);
    z-index: 2600;
    background: var(--bg-chat);
    display: flex;
    flex-direction: column;
    padding-top: var(--safe-top);
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
}
.full-file-preview.open { opacity: 1; }

/* Header */
.ffp-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}
.ffp-back {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); padding: 4px;
    border-radius: 8px; display: flex; align-items: center;
    transition: all 0.15s ease;
}
.ffp-back:hover { background: var(--accent-light); color: var(--text-primary); }
.ffp-title-wrap {
    flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
}
.ffp-icon { width: 24px; height: 24px; display: flex; align-items: center; flex-shrink: 0; }
.ffp-icon svg { width: 18px; height: 18px; color: var(--text-muted); }
.ffp-title-info { min-width: 0; }
.ffp-title {
    font-size: 14px; font-family: var(--font-body); color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.ffp-meta { font-size: 11px; color: var(--text-muted); }
.ffp-download {
    background: var(--rose); color: var(--surface-solid); border: none;
    padding: 6px 14px; border-radius: 8px; font-size: 12px;
    font-family: var(--font-body); cursor: pointer;
    transition: all 0.15s ease; white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, var(--shadow-xs);
    flex-shrink: 0;
}
.ffp-download:hover { background: var(--rose-hover); }
.ffp-download:active { transform: scale(0.96); }

/* Body */
.ffp-body {
    flex: 1; overflow-y: auto; padding: 18px;
    padding-bottom: calc(24px + var(--safe-bottom, 0px) + var(--kbd-h, 0px));
    font-size: 13px; font-family: var(--font-body); color: var(--text-primary);
    line-height: 1.8; white-space: pre-wrap; word-break: break-all;
}
.ffp-loading {
    color: var(--text-muted);
    font-size: 13px; text-align: center; padding: 40px 0;
}

/* ★ 2026-09：他写出来发给她的文件（3 天后服务器上就没了）——过期徽标 + 正文被截断提示 */
.ffp-expired {
    font-size: 11px; color: var(--text-muted);
    background: rgba(0,0,0,0.05);
    padding: 4px 10px; border-radius: 8px;
    white-space: nowrap; flex-shrink: 0;
    font-family: var(--font-body);
}
.ffp-trunc-note {
    margin-top: 16px; padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 11.5px; color: var(--text-muted);
    white-space: normal;
}

/* ★ 2028-09 续写改版：版本链（同一份文件写了多版时，在这里来回切着看；每版都是完整的一整份）。
   横向可滑，不换行——版本多了也不会把顶栏挤高；窄屏照样一指滑。 */
.ffp-chain {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(201,168,168,0.06);
}
.ffp-chain-label {
    font-size: 10.5px; color: var(--text-muted);
    white-space: nowrap; flex-shrink: 0;
    font-family: var(--font-body);
}
.ffp-chain-list {
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ffp-chain-list::-webkit-scrollbar { display: none; }
.ffp-chain-chip {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: 11px; line-height: 1;
    color: #6F6558;                 /* 界面核对量出来：--text-secondary #8A8172 只有 3.79:1，小字看不清 → 压深到 ≥4.5 */
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 12px;
    cursor: pointer;
    transition: transform 0.16s cubic-bezier(0.22,0.61,0.36,1), background 0.16s ease, color 0.16s ease;
    white-space: nowrap;
}
.ffp-chain-chip:hover { background: rgba(201,168,168,0.12); }
.ffp-chain-chip:active { transform: scale(0.96); }
/* 当前看的那一版：浅玫瑰底 + **压深的玫瑰棕字**（白字打在 --rose 上只有 2.18:1，手机上根本看不清；
   与聊天卡上「接着写」用同一套颜色口径） */
.ffp-chain-chip.on {
    color: #7E4A57;                  /* 再压深一档：#8C5A66 在半透明的链子底上量出来只有 4.35（差一点点），这档 ≥4.9 */
    background: rgba(201,168,168,0.26);
    border-color: transparent;
}
/* 已被续写取代的那一版：淡一点，但仍然能点开看（内容没丢，这正是她留版本的意义）。
   透明度不许再低：0.72 会把小字对比度压到 4:1 以下（界面核对量的）。 */
.ffp-chain-chip.old { opacity: 0.85; }
[data-theme-mode="dark"] .ffp-chain-chip { color: #A09890; }
[data-theme-mode="dark"] .ffp-chain-chip.on { color: #D4B8B8; background: rgba(201,168,168,0.30); }

/* 「接着往下写」——只有最新那一版还在等他续写时才出现 */
.ffp-cont {
    flex: 0 0 auto;
    display: flex; justify-content: flex-end;
    padding: 8px 18px 0;
}
.ffp-cont-btn {
    font-family: var(--font-body);
    font-size: 11.5px; line-height: 1;
    color: #8C5A66;                      /* 与聊天卡上「接着写」同一套颜色：白字打浅玫瑰只有 2.18:1 */
    background: rgba(201,168,168,0.26);
    border: none; border-radius: 9px;
    padding: 9px 15px;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, var(--shadow-xs);
    transition: transform 0.16s cubic-bezier(0.22,0.61,0.36,1), background 0.16s ease;
}
.ffp-cont-btn:hover { background: rgba(201,168,168,0.38); }
.ffp-cont-btn:active { transform: scale(0.95); }
[data-theme-mode="dark"] .ffp-cont-btn { color: #D4B8B8; background: rgba(201,168,168,0.30); }
[data-theme-mode="dark"] .ffp-cont-btn:hover { background: rgba(201,168,168,0.40); }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .full-file-preview { background: var(--bg-chat); }
    .ffp-header { background: rgba(30,26,24,0.9); }
}

/* Narrow screen (370px) */
@media (max-width: 370px) {
    .ffp-header { padding: 8px 10px; gap: 6px; }
    .ffp-body { padding: 14px 12px; padding-bottom: calc(20px + var(--safe-bottom, 0px) + var(--kbd-h, 0px)); font-size: 12px; }
    .ffp-title { font-size: 13px; }
    .ffp-chain { padding: 7px 12px; }
    .ffp-cont { padding: 7px 12px 0; }
    .ffp-chain-chip { font-size: 10.5px; padding: 5px 9px; }
}