/* ============================================================
   岁阅记 - 适老化聊天界面
   设计原则：大字体、高对比度、温暖色调、简洁布局
   主题系统：3 套配色方案，通过 data-theme 属性切换
   默认 = 赭红怀古
   ============================================================ */

:root, [data-theme="terra"] {
    --color-primary: #B5563B;
    --color-primary-light: #E8C9BD;
    --color-primary-dark: #8B3D2A;
    --color-primary-bg: #FAF3F0;
    --color-ink: #3D2B1F;
    --color-ink-light: #7A6B5D;
    --color-ink-lighter: #A89A8E;
    --color-ink-lightest: #C9BCB0;
    --color-bg: #FBF9F7;
    --color-chat-bg: #F7F2EF;
    --color-card: #FFFFFF;
    --color-border: #E5DAD4;
    --color-border-light: #EFE7E2;
    --color-bubble-user: #F5EAE5;
    --color-panel-bg: #F6F0EC;
    --color-success: #5A8A5A;
    --color-success-light: #E8F0E8;
    --color-danger: #D94F4F;
    --icon-color: #B8A99E;
    --icon-color-hover: #8B7355;
    --icon-color-active: #B5563B;
    --color-primary-lightest: #FDF5F1;
    --color-text: var(--color-ink);
    --color-text-muted: var(--color-ink-light);
    --theme-shadow: rgba(181,86,59,0.10);
    --tint-04: rgba(181,86,59,0.04);
    --tint-06: rgba(181,86,59,0.06);
    --tint-08: rgba(181,86,59,0.08);
    --tint-12: rgba(181,86,59,0.12);
    --tint-15: rgba(181,86,59,0.15);
    --tint-20: rgba(181,86,59,0.20);
    --tint-25: rgba(181,86,59,0.25);
    --tint-30: rgba(181,86,59,0.30);
}
[data-theme="amber"] {
    --color-primary: #C7873B;
    --color-primary-light: #F5E6D3;
    --color-primary-dark: #A06B2A;
    --color-primary-bg: #FDF6EC;
    --color-ink: #3D2B1F;
    --color-ink-light: #8B7355;
    --color-ink-lighter: #B0A095;
    --color-ink-lightest: #D4C4B0;
    --color-bg: #FDFBF7;
    --color-chat-bg: #FAF6F0;
    --color-card: #FFFFFF;
    --color-border: #E8DFD3;
    --color-border-light: #F0E8DC;
    --color-bubble-user: #FFF3E0;
    --color-panel-bg: #F8F4ED;
    --color-success: #5A8A5A;
    --color-success-light: #E8F0E8;
    --color-danger: #D94F4F;
    --icon-color: #C4B5A5;
    --icon-color-hover: #9B8569;
    --icon-color-active: #C7873B;
    --theme-shadow: rgba(199,135,59,0.10);
    --tint-04: rgba(199,135,59,0.04);
    --tint-06: rgba(199,135,59,0.06);
    --tint-08: rgba(199,135,59,0.08);
    --tint-12: rgba(199,135,59,0.12);
    --tint-15: rgba(199,135,59,0.15);
    --tint-20: rgba(199,135,59,0.20);
    --tint-25: rgba(199,135,59,0.25);
    --tint-30: rgba(199,135,59,0.30);
}
[data-theme="pine"] {
    --color-primary: #4A6B5C;
    --color-primary-light: #C8DDD3;
    --color-primary-dark: #345046;
    --color-primary-bg: #F0F5F2;
    --color-ink: #2D3D2F;
    --color-ink-light: #6B7D72;
    --color-ink-lighter: #9BABA0;
    --color-ink-lightest: #C4D0C8;
    --color-bg: #FAFBFA;
    --color-chat-bg: #F5F7F5;
    --color-card: #FFFFFF;
    --color-border: #D8DFDB;
    --color-border-light: #E5EBE8;
    --color-bubble-user: #E5EEE9;
    --color-panel-bg: #F3F6F3;
    --color-success: #5A8A5A;
    --color-success-light: #E8F0E8;
    --color-danger: #D94F4F;
    --icon-color: #A8B5AE;
    --icon-color-hover: #6B7D72;
    --icon-color-active: #4A6B5C;
    --theme-shadow: rgba(74,107,92,0.10);
    --tint-04: rgba(74,107,92,0.04);
    --tint-06: rgba(74,107,92,0.06);
    --tint-08: rgba(74,107,92,0.08);
    --tint-12: rgba(74,107,92,0.12);
    --tint-15: rgba(74,107,92,0.15);
    --tint-20: rgba(74,107,92,0.20);
    --tint-25: rgba(74,107,92,0.25);
    --tint-30: rgba(74,107,92,0.30);
}
[data-theme="ink"] {
    --color-primary: #4A5B6B;
    --color-primary-light: #C8D2DA;
    --color-primary-dark: #344251;
    --color-primary-bg: #F0F3F5;
    --color-ink: #2D3340;
    --color-ink-light: #6B7580;
    --color-ink-lighter: #9BA3AE;
    --color-ink-lightest: #C4CBD3;
    --color-bg: #FAFBFC;
    --color-chat-bg: #F5F7F8;
    --color-card: #FFFFFF;
    --color-border: #D8DDE3;
    --color-border-light: #E5E8EC;
    --color-bubble-user: #E5E9ED;
    --color-panel-bg: #F3F5F6;
    --color-success: #5A8A5A;
    --color-success-light: #E8F0E8;
    --color-danger: #D94F4F;
    --icon-color: #A8AFB8;
    --icon-color-hover: #6B7580;
    --icon-color-active: #4A5B6B;
    --theme-shadow: rgba(74,91,107,0.10);
    --tint-04: rgba(74,91,107,0.04);
    --tint-06: rgba(74,91,107,0.06);
    --tint-08: rgba(74,91,107,0.08);
    --tint-12: rgba(74,91,107,0.12);
    --tint-15: rgba(74,91,107,0.15);
    --tint-20: rgba(74,91,107,0.20);
    --tint-25: rgba(74,91,107,0.25);
    --tint-30: rgba(74,91,107,0.30);
}
[data-theme="celadon"] {
    --color-primary: #5B8E8E;
    --color-primary-light: #BFDCDC;
    --color-primary-dark: #427272;
    --color-primary-bg: #F0F6F5;
    --color-ink: #2D3D3D;
    --color-ink-light: #6B7D7D;
    --color-ink-lighter: #9BAEAE;
    --color-ink-lightest: #C4D2D2;
    --color-bg: #F8FBFA;
    --color-chat-bg: #F2F7F6;
    --color-card: #FFFFFF;
    --color-border: #D5E0DF;
    --color-border-light: #E2EBEA;
    --color-bubble-user: #E8F2F1;
    --color-panel-bg: #F1F6F5;
    --color-success: #5A8A5A;
    --color-success-light: #E8F0E8;
    --color-danger: #D94F4F;
    --icon-color: #A8BBBA;
    --icon-color-hover: #6B7D7D;
    --icon-color-active: #5B8E8E;
    --theme-shadow: rgba(91,142,142,0.10);
    --tint-04: rgba(91,142,142,0.04);
    --tint-06: rgba(91,142,142,0.06);
    --tint-08: rgba(91,142,142,0.08);
    --tint-12: rgba(91,142,142,0.12);
    --tint-15: rgba(91,142,142,0.15);
    --tint-20: rgba(91,142,142,0.20);
    --tint-25: rgba(91,142,142,0.25);
    --tint-30: rgba(91,142,142,0.30);
}
[data-theme="dusk"] {
    --color-primary: #7B5C8A;
    --color-primary-light: #D2C2DC;
    --color-primary-dark: #5C4466;
    --color-primary-bg: #F5F0F8;
    --color-ink: #33283D;
    --color-ink-light: #6B5C78;
    --color-ink-lighter: #9B8DAB;
    --color-ink-lightest: #C4BACE;
    --color-bg: #FAF8FB;
    --color-chat-bg: #F5F0F7;
    --color-card: #FFFFFF;
    --color-border: #DDD5E3;
    --color-border-light: #E8E1ED;
    --color-bubble-user: #EEE5F2;
    --color-panel-bg: #F4EFF6;
    --color-success: #5A8A5A;
    --color-success-light: #E8F0E8;
    --color-danger: #D94F4F;
    --icon-color: #AB9DBA;
    --icon-color-hover: #6B5C78;
    --icon-color-active: #7B5C8A;
    --theme-shadow: rgba(123,92,138,0.10);
    --tint-04: rgba(123,92,138,0.04);
    --tint-06: rgba(123,92,138,0.06);
    --tint-08: rgba(123,92,138,0.08);
    --tint-12: rgba(123,92,138,0.12);
    --tint-15: rgba(123,92,138,0.15);
    --tint-20: rgba(123,92,138,0.20);
    --tint-25: rgba(123,92,138,0.25);
    --tint-30: rgba(123,92,138,0.30);
}
[data-theme="sunset"] {
    --color-primary: #C9784E;
    --color-primary-light: #F0CDB8;
    --color-primary-dark: #9C5D3B;
    --color-primary-bg: #FAF2EC;
    --color-ink: #3D2B1F;
    --color-ink-light: #7A6457;
    --color-ink-lighter: #A89A8E;
    --color-ink-lightest: #C9BCB0;
    --color-bg: #FCFAF7;
    --color-chat-bg: #F7F0EB;
    --color-card: #FFFFFF;
    --color-border: #E5D8D0;
    --color-border-light: #EFE5DE;
    --color-bubble-user: #F5E8E0;
    --color-panel-bg: #F6EEEA;
    --color-success: #5A8A5A;
    --color-success-light: #E8F0E8;
    --color-danger: #D94F4F;
    --icon-color: #B8A99E;
    --icon-color-hover: #7A6457;
    --icon-color-active: #C9784E;
    --theme-shadow: rgba(201,120,78,0.10);
    --tint-04: rgba(201,120,78,0.04);
    --tint-06: rgba(201,120,78,0.06);
    --tint-08: rgba(201,120,78,0.08);
    --tint-12: rgba(201,120,78,0.12);
    --tint-15: rgba(201,120,78,0.15);
    --tint-20: rgba(201,120,78,0.20);
    --tint-25: rgba(201,120,78,0.25);
    --tint-30: rgba(201,120,78,0.30);
}
[data-theme="smoke"] {
    --color-primary: #6B6B6B;
    --color-primary-light: #C8C8C8;
    --color-primary-dark: #4A4A4A;
    --color-primary-bg: #F2F2F2;
    --color-ink: #2D2D2D;
    --color-ink-light: #6B6B6B;
    --color-ink-lighter: #9B9B9B;
    --color-ink-lightest: #C4C4C4;
    --color-bg: #FAFAFA;
    --color-chat-bg: #F5F5F5;
    --color-card: #FFFFFF;
    --color-border: #D8D8D8;
    --color-border-light: #E5E5E5;
    --color-bubble-user: #E8E8E8;
    --color-panel-bg: #F3F3F3;
    --color-success: #5A8A5A;
    --color-success-light: #E8F0E8;
    --color-danger: #D94F4F;
    --icon-color: #AAAAAA;
    --icon-color-hover: #6B6B6B;
    --icon-color-active: #6B6B6B;
    --theme-shadow: rgba(107,107,107,0.10);
    --tint-04: rgba(107,107,107,0.04);
    --tint-06: rgba(107,107,107,0.06);
    --tint-08: rgba(107,107,107,0.08);
    --tint-12: rgba(107,107,107,0.12);
    --tint-15: rgba(107,107,107,0.15);
    --tint-20: rgba(107,107,107,0.20);
    --tint-25: rgba(107,107,107,0.25);
    --tint-30: rgba(107,107,107,0.30);
}
:root {
    /* === 向后兼容别名（让现有 CSS 继续工作）=== */
    --color-text: var(--color-ink);
    --color-text-light: var(--color-ink-light);
    --color-text-white: #FFFFFF;
    --color-bubble-agent: var(--color-card);
    --color-sidebar: var(--color-panel-bg);
    --color-warning: #FF9800;

    /* === 尺寸 === */
    --font-size: 20px;
    --sidebar-width: 320px;
    --header-height: 72px;
    --max-content-width: 800px;
    --border-radius: 12px;

    /* === 字体双轨制：UI 用黑体，内容用宋体 === */
    --font-ui: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
    --font-content: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "FangSong", serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    height: 100dvh; /* dynamic viewport height — fixes iOS Safari address bar issue inside iframe */
    font-size: var(--font-size);
    font-family: var(--font-ui);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   字体双轨制：内容区域使用宋体
   ============================================================ */
.message-bubble,
.greeting-bubble,
.article-view,
.archive-reader-content,
.export-content {
    font-family: var(--font-content);
}

/* ============================================================
   Top Nav (故事转绘本风格)
   ============================================================ */

.top-nav {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px var(--theme-shadow);
}

/* v7.97: 移动端导航条 — 桌面端默认隐藏 */
.mobile-top-nav { display: none; }

.nav-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 56px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.nav-brand-icon {
    font-size: 1.3em;
}

.nav-brand-text {
    font-family: var(--font-content);
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-primary-dark);
    letter-spacing: 1px;
}

.nav-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.nav-tab {
    background: none;
    border: none;
    padding: 7px 18px;
    font-size: 0.88em;
    font-weight: 500;
    color: var(--color-text-light);
    cursor: pointer;
    font-family: inherit;
    border-radius: 20px;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-tab:hover {
    color: var(--color-text);
    background: var(--tint-06);
}

.nav-tab.active {
    color: var(--color-primary);
    background: var(--tint-15);
    font-weight: 600;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nav-settings-btn {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.nav-settings-btn:hover {
    color: var(--color-primary);
    background: var(--tint-08);
}

.mode-indicator {
    font-size: 0.72em;
    color: var(--color-text-light);
    opacity: 0.5;
}

/* ============================================================
   Views (全页面切换)
   ============================================================ */

.view {
    display: none;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px); /* dynamic viewport height — fixes iOS Safari */
    overflow: hidden;
}

.view.active {
    display: flex;
    flex-direction: column;
}

/* ---- Chat View ---- */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    background: var(--color-chat-bg);
}

/* 对话栏 */
/* (conversation bar and new-chat button styles removed) */

/* (conversation list panel and search styles removed) */

.mod-empty {
    padding: 16px;
    font-size: 0.85em;
    color: var(--color-text-light);
    opacity: 0.5;
    text-align: center;
}

/* ============================================================
   聊天欢迎页（说说话空状态）
   ============================================================ */

/* ---- Chat Welcome (极简风格) ---- */

.chat-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    gap: 48px;
    animation: fadeIn 0.6s ease;
}

.welcome-hero {
    text-align: center;
}

.welcome-greeting {
    font-family: var(--font-content);
    font-size: 2em;
    font-weight: 600;
    color: #3D2B1F;
    letter-spacing: 2px;
    line-height: 1.3;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.welcome-tagline {
    font-size: 0.88em;
    color: #8B7355;
    margin-top: 14px;
    letter-spacing: 4px;
    font-weight: 400;
}

/* ---- Welcome Guide (使用指南) ---- */
.welcome-intro {
    text-align: center;
    max-width: 480px;
}
.welcome-intro-text {
    font-size: 0.88em;
    color: #8B7355;
    line-height: 1.7;
    letter-spacing: 0.5px;
}
/* v7.73: 欢迎屏流程展示 */
.welcome-flow {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.flow-step {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border-light);
    transition: all 0.2s;
    cursor: default;
    text-align: left;
}
.flow-step:first-child {
    cursor: pointer;
}
.flow-step:first-child:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px var(--theme-shadow);
}
.flow-number {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1;
}
.flow-content {
    flex: 1;
    min-width: 0;
}
.flow-title {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 3px;
}
.flow-desc {
    font-size: 0.78em;
    color: var(--color-ink-lighter);
    line-height: 1.5;
    margin-bottom: 6px;
}
.flow-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.flow-tags span {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--color-bg, #f8f5f0);
    color: var(--color-ink-lighter);
    font-size: 0.72em;
    border: 1px solid var(--color-border-light);
}
.flow-connector {
    text-align: center;
    color: var(--color-border-light);
    font-size: 0.85em;
    padding: 2px 0;
    line-height: 1;
}

/* v7.73: 话题选择卡片 */
.topic-section {
    width: 100%;
    max-width: 460px;
    margin-bottom: 16px;
}
.topic-section-title {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--color-ink-lighter);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.topic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.topic-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border-light);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.topic-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px var(--theme-shadow);
}
.topic-card:active {
    transform: scale(0.98);
}
.topic-emoji {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 6px;
}
.topic-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 2px;
}
.topic-hint {
    font-size: 0.72em;
    color: var(--color-ink-lighter);
    line-height: 1.4;
}
.topic-actions {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin-top: 8px;
}
.topic-back {
    border: none;
    background: none;
    color: var(--color-ink-lighter);
    font-size: 0.8em;
    cursor: pointer;
    font-family: var(--font-ui);
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}
.topic-back:hover {
    color: var(--color-ink);
    background: var(--color-bg, #f8f5f0);
}

/* v7.74: 简洁话题标签 */
.suggest-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 0 2px;
}
.suggest-tag {
    padding: 4px 12px;
    border-radius: 14px;
    border: 1px solid var(--color-border-light);
    background: var(--color-card, #fff);
    color: var(--color-ink);
    font-size: 0.78em;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.15s;
}

/* v8.xx: 话题建议坞 — 固定在输入框上方，不打断对话流 */
.suggest-tags-dock {
    display: none;
    max-width: var(--max-content-width);
    margin: 0 auto 8px;
    padding: 8px 10px 10px;
    background: var(--color-panel-bg, #fff);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    box-sizing: border-box;
}
.suggest-tags-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.suggest-tags-hint {
    font-size: 0.8em;
    color: var(--color-text-light);
    font-family: var(--font-ui);
}
.suggest-tags-close {
    border: none;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 0.8em;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.15s;
}
.suggest-tags-close:hover {
    background: var(--tint-06);
    color: var(--color-primary);
}
.suggest-tags-dock .suggest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
}
.suggest-tag:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-bg, #f8f5f0);
}
.suggest-tag-back {
    color: var(--color-ink-lighter);
    border-style: dashed;
}

/* 欢迎屏主 CTA 按钮 */
.welcome-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 28px; margin-top: 4px;
    border-radius: 24px;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.92em; font-weight: 500;
    font-family: var(--font-ui);
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
}
.welcome-cta:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 16px rgba(139, 61, 42, 0.25);
    transform: translateY(-1px);
}
.welcome-cta::after {
    content: '→';
    font-size: 0.95em;
}

/* v7.63: 欢迎屏 — 风格选择入口 */
.welcome-style-hint {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; margin-top: 4px;
    border-radius: 12px;
    background: var(--color-chat-bg);
    border: 1px dashed var(--color-border);
    cursor: pointer; transition: all 0.18s ease;
    font-size: 13.5px; color: var(--color-ink-light);
}
.welcome-style-hint:hover {
    border-color: var(--color-primary-light);
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
}
.welcome-style-hint-icon { font-size: 16px; }
.welcome-style-hint-text { flex: 1; }
.welcome-style-hint-arrow { font-size: 14px; opacity: 0.5; }
.welcome-style-hint:hover .welcome-style-hint-arrow { opacity: 1; }

/* v7.63: 欢迎屏 — 示例回忆录入口 */
.welcome-sample-hint {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; margin-top: 4px;
    border-radius: 12px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    cursor: pointer; transition: all 0.18s ease;
    font-size: 13.5px; color: var(--color-ink-light);
}
.welcome-sample-hint:hover {
    border-color: var(--color-primary-light);
    background: #faf8f0;
    color: var(--color-ink);
}
.welcome-sample-hint-icon { font-size: 16px; }
.welcome-sample-hint-text { flex: 1; }
.welcome-sample-hint-arrow { font-size: 14px; opacity: 0.5; }
.welcome-sample-hint:hover .welcome-sample-hint-arrow { opacity: 1; }

.welcome-footer-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76em;
    color: var(--icon-color);
    opacity: 0.7;
    letter-spacing: 0.5px;
}

/* ---- v7.60: 动态进度卡 ---- */
.chat-welcome-compact {
    gap: 20px !important;
    padding: 32px 24px !important;
    justify-content: flex-start !important;
}
.pc-hero {
    text-align: center;
}
.pc-greeting {
    font-family: var(--font-content);
    font-size: 1.6em;
    font-weight: 600;
    color: #3D2B1F;
    letter-spacing: 1px;
    line-height: 1.3;
    overflow-wrap: break-word;
    text-wrap: balance;
}
.pc-book-title {
    font-size: 0.92em;
    color: var(--color-primary);
    margin-top: 8px;
    font-weight: 500;
    letter-spacing: 1px;
}
.pc-tagline {
    font-size: 0.82em;
    color: #8B7355;
    margin-top: 10px;
    letter-spacing: 3px;
}
.pc-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 380px;
}
.pc-progress-track {
    flex: 1;
    height: 6px;
    background: var(--color-border-light);
    border-radius: 3px;
    overflow: hidden;
}
.pc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #8B7355);
    border-radius: 3px;
    transition: width 0.6s ease;
}
.pc-progress-pct {
    font-size: 0.76em;
    color: var(--color-text-light);
    font-family: var(--font-ui);
    font-weight: 600;
    min-width: 32px;
    text-align: right;
}
.pc-steps {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 380px;
}
.pc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.pc-step-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--color-border-light);
    color: var(--color-text-light);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-ui);
    line-height: 1;
    transition: all 0.3s;
}
.pc-step-name {
    font-size: 0.66em;
    color: var(--color-text-light);
    white-space: nowrap;
    transition: color 0.3s;
}
.pc-step.done .pc-step-num {
    background: var(--color-primary);
    color: #fff;
}
.pc-step.done .pc-step-name {
    color: var(--color-primary);
}
.pc-step.active .pc-step-num {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.15);
}
.pc-step.active .pc-step-name {
    color: var(--color-text);
    font-weight: 600;
}
.pc-step-line {
    flex: 1;
    height: 2px;
    background: var(--color-border-light);
    margin: 0 4px;
    margin-bottom: 16px; /* 对齐 step-num 中心 */
    border-radius: 1px;
}
.pc-next-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #faf6f0 0%, #f5f0e8 100%);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    max-width: 380px;
}
.pc-next-card:hover {
    border-color: #6B5A48;
    box-shadow: 0 3px 12px rgba(139, 115, 85, 0.12);
    transform: translateY(-1px);
}
.pc-next-emoji {
    font-size: 1.4em;
    flex-shrink: 0;
    line-height: 1;
}
.pc-next-body {
    flex: 1;
    min-width: 0;
}
.pc-next-label {
    font-size: 0.68em;
    color: var(--color-text-light);
    letter-spacing: 1px;
    margin-bottom: 3px;
}
.pc-next-text {
    font-size: 0.86em;
    color: #3D2B1F;
    font-weight: 500;
    line-height: 1.4;
}
.pc-next-arrow {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 1.2em;
    font-weight: 600;
    transition: transform 0.15s;
}
.pc-next-card:hover .pc-next-arrow {
    transform: translateX(3px);
}
/* 移动端进度卡适配 */
@media (max-width: 768px) {
    .chat-welcome-compact { padding: 24px 16px !important; gap: 16px !important; }
    .pc-greeting { font-size: 1.4em; }
    .pc-steps { max-width: 100%; }
    .pc-next-card { max-width: 100%; }
}
.welcome-footer-hint svg { width: 14px; height: 14px; }

/* ---- List Views (整理初稿/正式归档/照片和文件) ---- */
.list-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px 48px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.list-header {
    text-align: center;
    margin-bottom: 24px;
}

.list-header h1 {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 6px;
}

.list-subtitle {
    color: var(--color-text-light);
    font-size: 0.88em;
}

.list-header-actions {
    margin-top: 14px;
}

/* .btn-generate-draft 已废弃，改用 article-tool-btn */

.list-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--color-text-white);
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 20px;
    transition: border-color 0.2s;
}

.list-search-bar:focus-within {
    border-color: var(--color-primary);
}

.list-search-bar svg {
    color: var(--color-text-light);
    opacity: 0.4;
    flex-shrink: 0;
}

.list-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.92em;
    font-family: inherit;
    color: var(--color-text);
    padding: 4px 0;
}

.list-search-bar input::placeholder {
    color: var(--color-text-light);
    opacity: 0.5;
}

.list-search-clear {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 0.78em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
}

.list-search-clear:hover {
    background: rgba(0,0,0,0.06);
    color: var(--color-text);
}

/* 卡片网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.list-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-light);
    font-size: 1em;
    opacity: 0.6;
}

/* 整理稿/归档卡片 */
.draft-card {
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.draft-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px var(--theme-shadow);
    transform: translateY(-1px);
}

.draft-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.draft-card-icon {
    font-size: 1.2em;
    flex-shrink: 0;
}

.draft-card-title {
    flex: 1;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-card-version {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--color-secondary);
    background: var(--color-secondary-light, #fef3c7);
    padding: 2px 8px;
    border-radius: 8px;
    flex-shrink: 0;
}

.draft-card-preview {
    font-size: 0.82em;
    color: var(--color-text-light);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.draft-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.draft-card-date {
    font-size: 0.78em;
    color: var(--color-text-light);
    opacity: 0.6;
}

.draft-card-delete {
    display: none;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 0.85em;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

.draft-card:hover .draft-card-delete {
    display: flex;
}

.draft-card-delete:hover {
    color: var(--color-danger);
    background: rgba(229,57,53,0.08);
}

/* 文件卡片 */
.file-card {
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.file-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px var(--theme-shadow);
    transform: translateY(-1px);
}

.file-card-thumb {
    aspect-ratio: 4 / 3;
    background: var(--color-sidebar);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.file-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-card-thumb-icon {
    font-size: 2.5em;
    color: var(--color-text-light);
    opacity: 0.4;
}

.file-card-info {
    padding: 12px 14px;
}

.file-card-name {
    font-size: 0.88em;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card-meta {
    font-size: 0.76em;
    color: var(--color-text-light);
    display: flex;
    gap: 8px;
    align-items: center;
}

.file-card-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.file-card-restore {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-light);
    font-size: 0.76em;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.file-card-restore:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.file-card-delete {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-light);
    font-size: 0.76em;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.file-card-delete:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* ---- File Table (Windows Detail List) ---- */
.file-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-text-white);
}

.file-row-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--color-sidebar);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.82em;
    font-weight: 600;
    color: var(--color-text-light);
    user-select: none;
}

.file-row {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.12s;
    font-size: 0.88em;
}

.file-row:last-child {
    border-bottom: none;
}

.file-row:hover {
    background: var(--tint-04);
}

.file-row-cell {
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-row-name {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.file-row-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--color-sidebar);
}

.file-row-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    flex-shrink: 0;
}

.file-row-filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}

.file-row-size {
    width: 80px;
    text-align: right;
    color: var(--color-text-light);
    font-size: 0.9em;
}

.file-row-type {
    width: 60px;
    text-align: center;
    color: var(--color-text-light);
    font-size: 0.9em;
}

.file-row-date {
    width: 100px;
    text-align: center;
    color: var(--color-text-light);
    font-size: 0.9em;
}

.file-row-actions {
    width: 140px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.file-row-btn {
    padding: 3px 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-light);
    font-size: 0.82em;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    line-height: 1.4;
}

.file-row-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.file-row-delete:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.file-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-light);
    font-size: 1em;
    opacity: 0.6;
}

/* ---- Drafts Editor (整理初稿新版) ---- */
.drafts-editor-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

.drafts-editor-toolbar {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.drafts-toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.drafts-toolbar-right .tb-sep {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 2px;
    flex-shrink: 0;
}

.version-selector-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: var(--color-bg-alt, #f5f0ea);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    height: 28px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.version-label {
    font-size: 0.82em;
    color: var(--color-text-light);
    font-weight: 600;
    line-height: 1;
}

.version-select {
    border: none;
    background: transparent;
    font-size: 0.82em;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
    outline: none;
    font-family: inherit;
    height: 100%;
    line-height: 1;
}

.version-select:focus {
    outline: none;
}

.drafts-editor-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px 0;
}

.drafts-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-light);
}

.drafts-empty-icon {
    font-size: 3em;
    margin-bottom: 12px;
    opacity: 0.6;
}

.drafts-empty-state p {
    margin: 0;
    font-size: 1.1em;
}

.drafts-empty-hint {
    font-size: 0.85em !important;
    opacity: 0.6;
    margin-top: 6px !important;
}

/* ---- TinyMCE 编辑器容器 ---- */
.draft-editor {
    width: 100%;
}

#draft-editor-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#draft-editor-wrapper .tox-tinymce {
    flex: 1;
    min-height: 0;
}

/* TinyMCE 内图片样式 */
.draft-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 12px 0;
    display: block;
}

/* ---- Image Picker Modal ---- */
.image-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-picker-dialog {
    background: #fff;
    border-radius: 16px;
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.image-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 1.05em;
}
.image-picker-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 50%;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-picker-close:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
}
.image-picker-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 20px 0;
    border-bottom: 1px solid var(--color-border);
}
.image-picker-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    border-radius: 20px 20px 0 0;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 500;
    color: var(--color-text-light);
    font-family: var(--font-ui);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.image-picker-tab:hover {
    color: var(--color-primary);
}
.image-picker-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: var(--color-primary-lightest, #FBF3E9);
    font-weight: 600;
}
.image-picker-grid.illustration-grid .image-picker-item {
    background: #FFF;
    border-color: var(--color-border);
}
#illustration-picker-grid.illustration-grid {
    display: block;
}
.illustration-category {
    margin-bottom: 18px;
}
.illustration-category:last-child {
    margin-bottom: 0;
}
.illustration-category-title {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.illustration-category-title::before {
    content: '';
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--color-primary);
}
.illustration-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 640px) {
    .illustration-category-grid { grid-template-columns: repeat(3, 1fr); }
}
.image-picker-grid.illustration-grid .image-picker-item img {
    object-fit: cover;
}
.image-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px;
    overflow-y: auto;
}
.image-picker-grid .image-picker-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--color-text-light);
    font-size: 0.95em;
}
.image-picker-item {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--color-bg-light);
}
.image-picker-item:hover {
    border-color: var(--color-primary);
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.image-picker-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-picker-item.image-picker-video {
    position: relative;
}
.image-picker-item.image-picker-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-picker-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    pointer-events: none;
}
.image-picker-play svg {
    width: 28px;
    height: 28px;
    fill: #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.image-picker-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    background: var(--color-bg-light);
}

/* ---- 图片浮动工具栏 ---- */
.image-float-toolbar {
    position: absolute;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
    white-space: nowrap;
    transform: translateX(-50%);
    animation: ift-fadeIn 0.18s ease-out;
}
@keyframes ift-fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.image-float-toolbar::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #FFFFFF;
}
.image-float-toolbar::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #E0E0E0;
}
/* 下方空间不足时工具栏显示在图片下方（箭头朝上） */
.image-float-toolbar.below::after {
    bottom: auto; top: -8px;
    border-top: none;
    border-bottom: 8px solid #FFFFFF;
}
.image-float-toolbar.below::before {
    bottom: auto; top: -10px;
    border-top: none;
    border-bottom: 9px solid #E0E0E0;
}
.ift-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    line-height: 1.4;
}
.ift-btn:hover {
    background: #F5F0EB;
    color: #8B6914;
}
.ift-btn:active {
    background: #EDE4D8;
}
.ift-icon {
    font-size: 14px;
}
.ift-divider {
    width: 1px;
    height: 18px;
    background: #E8E0D8;
    margin: 0 2px;
    flex-shrink: 0;
}
.ift-repair { color: #8B6914; font-weight: 500; }
.ift-repair:hover { background: #FDF6E8; color: #6B4F10; }
.ift-repair:disabled,
.ift-repair.repaired {
    color: #A8A29E;
    cursor: not-allowed;
    background: transparent !important;
}
.ift-size { 
    font-size: 12px;
    min-width: 28px;
    justify-content: center;
    padding: 3px 8px;
}
.ift-size.active {
    background: #8B6914;
    color: #FFFFFF;
    font-weight: 600;
}
.ift-delete { color: #C0392B; }
.ift-delete:hover { background: #FDEDEC; color: #A93226; }
.ift-original { color: #888; font-size: 12px; }

/* ---- Old image styles (legacy, kept for backward compat) ---- */
.draft-editor h2 {
    font-size: 1.3em;
    margin: 1.2em 0 0.5em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}
.draft-editor h3 {
    font-size: 1.1em;
    margin: 1em 0 0.4em;
}
.draft-editor ul, .draft-editor ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}
.draft-editor li {
    margin: 0.3em 0;
}
.draft-viewer-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.draft-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    gap: 12px;
    flex-shrink: 0;
}

.draft-viewer-title {
    flex: 1;
    font-size: 1em;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-viewer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.draft-viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
}

/* ---- 内联修订标记（Word 修订模式） ---- */
.rev-del {
    color: #dc3545;
    background: #fff5f5;
    text-decoration: line-through;
    text-decoration-color: #dc3545;
    border-radius: 2px;
    padding: 0 2px;
}

.rev-ins {
    color: #28a745;
    background: #f0fff4;
    text-decoration: underline;
    text-decoration-color: #28a745;
    text-underline-offset: 2px;
    border-radius: 2px;
    padding: 0 2px;
}

.rev-accept {
    background: #f0fff4 !important;
    color: #28a745 !important;
    border-color: #28a745 !important;
}

.rev-accept:hover {
    background: #d4edda !important;
}

.rev-reject {
    background: #fff5f5 !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.rev-reject:hover {
    background: #f8d7da !important;
}

/* (sidebar footer removed — now in top nav) */

/* ============================================================
   聊天区 (在 view-chat 内部)
   ============================================================ */

/* (old draft-panel styles replaced by draft-viewer styles above) */

.article-tool-btn {
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.8em;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    height: 28px;
    box-sizing: border-box;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.article-tool-btn:hover {
    background: var(--tint-08);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.article-view {
    width: 100%;
}

.article-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-light);
}

.article-empty-icon {
    font-size: 3em;
    margin-bottom: 16px;
}

.article-empty h3 {
    color: var(--color-text);
    font-size: 1.2em;
    margin-bottom: 8px;
}

.article-empty p {
    font-size: 0.9em;
    margin-bottom: 6px;
}

.article-options {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 28px;
    flex-wrap: wrap;
}

.article-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 28px;
    background: var(--color-text-white);
    border: 2px solid var(--color-border);
    border-radius: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 140px;
}

.article-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.article-btn-icon {
    font-size: 2em;
}

.article-btn span:nth-child(2) {
    font-size: 1em;
    font-weight: 500;
    color: var(--color-text);
}

.article-btn-desc {
    font-size: 0.78em !important;
    color: var(--color-text-light) !important;
    font-weight: normal !important;
}

.article-btn-draft:hover { border-color: #888; }
.article-btn-formal:hover { border-color: #4A7A9B; }
.article-btn-ai:hover { border-color: var(--color-primary); }

.mock-warning {
    background: #FFF8E1;
    border-bottom: 1px solid #FFE082;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.85em;
    color: #6B5300;
}

.mock-warning button {
    background: transparent;
    border: 1px solid #C7873B;
    color: #C7873B;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.9em;
    cursor: pointer;
    white-space: nowrap;
}

.mock-warning button:hover {
    background: var(--tint-08);
}

/* (btn-toggle-sidebar removed — no sidebar) */

.btn-export {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary-dark);
    border-radius: 8px;
    font-size: 0.85em;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-export:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.btn-ai-memoir {
    background: linear-gradient(135deg, #C7873B, #D4A055);
    color: white;
    border-color: transparent;
    font-weight: 600;
}

.btn-ai-memoir:hover {
    background: linear-gradient(135deg, #B5762F, #C7873B);
    color: white;
}

.btn-article {
    background: linear-gradient(135deg, #4A7A9B, #5B8DAB);
    color: white;
    border-color: transparent;
    font-weight: 600;
}

.btn-article:hover {
    background: linear-gradient(135deg, #3A6A8B, #4A7A9B);
    color: white;
}

.export-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-light);
    font-size: 1.1em;
}

/* 聊天消息区 */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* AI 开场白气泡 */
.greeting-bubble {
    line-height: 1.8;
}

.greeting-bubble p {
    margin-bottom: 10px;
}

.greeting-bubble p:last-child {
    margin-bottom: 0;
}

.greeting-style-list {
    list-style: none;
    padding: 12px 16px;
    margin: 10px 0;
    background: var(--tint-06);
    border-radius: 10px;
}

.greeting-style-list li {
    padding: 5px 0;
    line-height: 1.6;
}

/* 消息气泡 */
.message {
    max-width: var(--max-content-width);
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 12px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message.agent {
    justify-content: flex-start;
}

.message.agent .message-content-wrap {
    align-items: flex-start;
}

.message.user {
    flex-direction: row-reverse;
}

.message-content-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.message.user .message-content-wrap {
    align-items: flex-end;
}

/* v7.10: AI 助手的"系统表示"小标签（替代原 emoji 头像） */
.ai-system-label {
    font-size: 0.7em;
    color: var(--color-text-light);
    margin-bottom: 4px;
    text-align: left;
    letter-spacing: 0.5px;
}

.message-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    color: var(--color-text-white);
}

.message.agent .message-avatar {
    background: var(--color-primary);
}

.message.user .message-avatar {
    background: var(--color-primary-dark);
}

/* 头像选择弹窗（我的头像，20 位中国特质预制头像） */
.avatar-picker-mask {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15,18,26,0.45); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.avatar-picker {
    width: 640px; max-width: 96vw; max-height: 86vh;
    background: var(--color-panel-bg);
    border: 1px solid var(--color-border); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.28);
    display: flex; flex-direction: column; overflow: hidden;
}
.avatar-picker-head {
    position: relative; padding: 18px 20px 12px;
    border-bottom: 1px solid var(--color-border-light); flex-shrink: 0;
}
.avatar-picker-title { font-size: 16px; font-weight: 700; color: var(--color-ink); }
.avatar-picker-sub { margin-top: 3px; font-size: 12px; color: var(--color-ink-light); }
.avatar-picker-close {
    position: absolute; top: 14px; right: 14px;
    width: 30px; height: 30px; border: none; border-radius: 8px;
    background: none; color: var(--icon-color); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.avatar-picker-close:hover { background: var(--tint-08); color: var(--color-primary); }
.avatar-picker-close svg { width: 16px; height: 16px; }
.avatar-picker-grid {
    flex: 1; overflow-y: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px; padding: 16px 20px;
}
.avatar-picker-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 6px 8px;
    border: 1.5px solid transparent; border-radius: 12px;
    background: var(--color-card); cursor: pointer;
    transition: all .15s ease;
}
.avatar-picker-item:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
.avatar-picker-item.active {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}
.avatar-picker-item img {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--color-border-light);
}
.avatar-picker-item.active img { border-color: var(--color-primary); }
.avatar-picker-label {
    font-size: 12px; color: var(--color-ink); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px;
}
.avatar-picker-foot {
    padding: 12px 20px; border-top: 1px solid var(--color-border-light);
    display: flex; justify-content: center; flex-shrink: 0;
}
.avatar-picker-reset {
    border: none; background: none; color: var(--color-ink-light);
    font-size: 12.5px; cursor: pointer; padding: 6px 14px; border-radius: 8px;
    transition: background .15s, color .15s;
}
.avatar-picker-reset:hover { background: var(--tint-08); color: var(--color-primary); }
@media (max-width: 768px) {
    .avatar-picker { width: 94vw; }
    .avatar-picker-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 12px; }
}

.avatar-picker-foot { justify-content: space-between; align-items: center; }
.avatar-picker-hint { font-size: 11.5px; color: var(--color-ink-lighter); text-align: right; }

/* 我的头像（聊天用户消息 + 设置区） */
.message.user .message-avatar.user-img-avatar {
    background: var(--color-chat-bg);
    overflow: hidden;
    border: 2px solid var(--color-primary-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.user-img-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.settings-account-avatar { cursor: pointer; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.settings-account-avatar:hover { box-shadow: 0 0 0 2px var(--color-primary-light); transform: translateY(-1px); }
.settings-account-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

.message-bubble {
    padding: 14px 18px;
    border-radius: var(--border-radius);
    font-size: 1em;
    line-height: 1.7;
    width: max-content;        /* 气泡按内容自然撑开，避免短文字被压成竖排 */
    max-width: 75%;
    word-break: normal;          /* 中文不按字断行 */
    overflow-wrap: break-word;  /* 仅长英文/URL 断行 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.message.agent .message-bubble {
    background: var(--color-bubble-agent);
    border: 1px solid var(--color-border);
    border-top-left-radius: 4px;
}

.message.user .message-bubble {
    background: var(--color-bubble-user);
    border-top-right-radius: 4px;
}

.message-meta {
    font-size: 0.75em;
    color: var(--color-text-light);
    margin-top: 4px;
    padding: 0 4px;
}

/* v8.24: 聊天日期分隔符 */
.msg-date-divider {
    display: flex; align-items: center;
    margin: 14px 0 10px;
    gap: 12px;
}
.msg-date-divider::before,
.msg-date-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}
.msg-date-divider span {
    font-size: 12px; color: var(--color-text-lighter);
    background: var(--color-bubble-agent);
    padding: 2px 14px; border-radius: 12px;
    border: 1px solid var(--color-border);
    white-space: nowrap;
    font-family: var(--font-ui);
}

/* v7.15: 消息操作按钮（复制/重新生成/点赞/点踩） */
.msg-actions {
    display: none;
    position: absolute;
    bottom: 6px;
    right: 8px;
    gap: 2px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    line-height: 0;
}
.message-bubble {
    position: relative;
}
.message-bubble:hover .msg-actions {
    display: inline-flex;
}
.msg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.15s;
}
.msg-action-btn:hover {
    color: var(--color-primary);
    background: var(--tint-06);
}
/* 激活态：已点赞 / 已点踩 */
.msg-action-btn.msg-like-active {
    color: #2E7D5F;
    background: rgba(46, 125, 95, 0.12);
}
.msg-action-btn.msg-like-active:hover {
    background: rgba(46, 125, 95, 0.2);
}
.msg-action-btn.msg-dislike-active {
    color: #C0392B;
    background: rgba(192, 57, 43, 0.12);
}
.msg-action-btn.msg-dislike-active:hover {
    background: rgba(192, 57, 43, 0.2);
}

/* 撤销发送按钮（5秒窗口） */
.msg-undo-btn {
    position: absolute; top: -12px; right: 4px;
    padding: 2px 8px; font-size: 11px;
    white-space: nowrap;
    color: var(--color-ink-light); background: var(--color-chat-bg);
    border: 1px solid var(--color-border-light); border-radius: 10px;
    cursor: pointer; opacity: 0; transition: opacity 0.2s;
    z-index: 2;
}
.message.user:hover .msg-undo-btn, .msg-undo-btn { opacity: 0.7; }
.msg-undo-btn:hover { opacity: 1; color: #e74c3c; border-color: #e74c3c; }

/* v7.36: AI 消息快捷操作按钮（仅最新一条默认显示，其他 hover 显示） */
.msg-quick-actions {
    display: none;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.message.agent.is-latest-ai .msg-quick-actions,
.message.agent:hover .msg-quick-actions,
.message.user .msg-quick-actions {
    display: flex;
}
.quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-panel-bg);
    color: var(--color-text-light);
    font-size: 0.78em;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}
.quick-action-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--tint-06);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.quick-action-btn:active {
    transform: translateY(0);
}
.quick-action-btn svg {
    flex-shrink: 0;
}
/* v7.59: 主色按钮（当前阶段推荐动作） */
.quick-action-btn.primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.quick-action-btn.primary:hover {
    background: #74604A;
    color: #fff;
    border-color: #74604A;
}
/* v7.59: 禁用按钮（灰显） */
.quick-action-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--color-border);
    color: var(--color-text-light);
    background: var(--color-panel-bg);
}
/* v7.59: 进度徽章 */
.qa-badge {
    display: inline-block;
    background: rgba(139, 115, 85, 0.12);
    color: var(--color-primary);
    font-size: 0.85em;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    margin-left: 2px;
    line-height: 1.3;
}
/* v7.55: 记录按钮 */
.qa-record.recorded {
    border-color: #2E7D5F;
    color: #2E7D5F;
    background: rgba(46, 125, 95, 0.08);
    cursor: default;
    opacity: 0.85;
}
.qa-record.recorded:hover {
    background: rgba(46, 125, 95, 0.08);
    transform: none;
    box-shadow: none;
}

/* v7.55: 进度总结卡片 */
.progress-summary-card {
    background: var(--color-panel-bg, #fff);
    border: 1px solid var(--color-border, #ebdfd0);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
}
.ps-header {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--color-text, #3D322B);
    margin-bottom: 8px;
}
.ps-pct {
    font-size: 2em;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 6px;
}
.ps-bar {
    height: 6px;
    background: var(--color-border-light, #f0ebe3);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 14px;
}
.ps-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 0.6s ease;
}
.ps-section { margin-bottom: 10px; }
.ps-section-title {
    font-size: 0.78em;
    color: var(--color-text-light, #9A8B7A);
    margin-bottom: 4px;
}
.ps-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ps-cov, .ps-uncov {
    font-size: 0.78em;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.ps-cov {
    background: rgba(46, 125, 95, 0.1);
    color: #2E7D5F;
}
.ps-uncov {
    background: var(--color-border-light, #f0ebe3);
    color: var(--color-text-light, #9A8B7A);
}
.ps-next {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(212, 165, 116, 0.08);
    border-radius: 8px;
    font-size: 0.82em;
    color: var(--color-primary);
    line-height: 1.5;
}
.ps-hint {
    font-size: 0.75em;
    color: var(--color-text-light, #9A8B7A);
    font-style: italic;
    margin-top: 4px;
}

/* v7.55: 大纲预览 */
.outline-preview { }
.ol-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--color-text, #3D322B);
}
.ol-count {
    font-size: 0.78em;
    color: var(--color-text-light, #9A8B7A);
    font-weight: 400;
    background: var(--color-border-light, #f0ebe3);
    padding: 3px 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    vertical-align: middle;
}
.ol-list { margin-bottom: 12px; }
.ol-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light, #f0ebe3);
}
.ol-item:last-child { border-bottom: none; }
.ol-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.75em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ol-title {
    font-size: 0.88em;
    font-weight: 500;
    color: var(--color-text, #3D322B);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    line-height: 1.4;
    flex-wrap: wrap;
}
.ol-desc {
    font-size: 0.78em;
    color: var(--color-text-light, #9A8B7A);
    margin-top: 6px;
    line-height: 1.5;
}
.ol-stage-tag {
    font-size: 0.7em;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--color-border-light, #f0ebe3);
    color: var(--color-text-light, #9A8B7A);
    font-weight: 400;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    vertical-align: middle;
}

/* P1-5: 大纲编辑控件 */
.ol-title[contenteditable="true"]:focus,
.ol-desc[contenteditable="true"]:focus {
    outline: 2px solid var(--color-primary, #8b6914);
    outline-offset: 2px;
    border-radius: 4px;
    background: rgba(139,105,20,0.05);
}
.ol-item { position: relative; }
.ol-delete-btn {
    position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: #f5f5f5; color: #c62828; font-size: 16px; line-height: 1;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.ol-item:hover .ol-delete-btn { display: flex; }
.ol-delete-btn:hover { background: #c62828; color: #fff; }
.ol-add-btn {
    display: inline-block; margin-top: 8px; padding: 6px 16px;
    border: 1px dashed var(--color-primary, #8b6914); border-radius: 8px;
    background: transparent; color: var(--color-primary, #8b6914);
    font-size: 0.82em; font-weight: 500; cursor: pointer;
    transition: all 0.2s; font-family: inherit;
}
.ol-add-btn:hover { background: rgba(139,105,20,0.08); }

.ol-footer {
    padding: 10px 0 0;
    border-top: 1px solid var(--color-border-light, #f0ebe3);
}
.ol-note {
    font-size: 0.78em;
    color: var(--color-text-light, #9A8B7A);
    margin: 0;
    line-height: 1.5;
    text-wrap: balance;
}
/* v8.27: 大纲确认气泡在窄栏下可用更宽空间 */
.message.agent .message-bubble:has(.outline-confirm-bubble) {
    max-width: min(520px, 92%);
    width: max-content;
}
.outline-confirm-bubble {
    width: min(420px, 90vw);
    max-width: 100%;
    box-sizing: border-box;
}
.outline-confirm-actions {
    margin-top: 12px;
    padding-top: 10px;
    padding-bottom: 6px;
    border-top: 1px solid var(--color-border-light, #f0ebe3);
    gap: 12px;
}
.outline-confirm-actions .file-confirm-btn {
    flex: 1;
    min-width: 0;
}
.message:has(.outline-confirm-bubble) {
    margin-bottom: 12px;
}

/* v7.48: 移动端底部 Tab Bar（默认隐藏） */
.mobile-tab-bar { display: none; }

/* v7.43: 新消息提示 */
.new-message-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding: 6px 12px;
    border: 1px solid var(--color-primary);
    border-radius: 16px;
    background: var(--color-panel-bg);
    color: var(--color-primary);
    font-size: 0.75em;
    font-family: var(--font-ui);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.new-message-indicator.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.new-message-indicator:hover {
    background: var(--color-primary);
    color: #fff;
}
.new-message-indicator svg {
    flex-shrink: 0;
}

/* v7.36: 输入区上下文提示 */
.input-context-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    font-size: 0.72em;
    color: var(--color-text-light);
    font-family: var(--font-ui);
    white-space: nowrap;
}
.input-context-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    animation: context-pulse 2s ease-in-out infinite;
}
@keyframes context-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* v7.36: "给我灵感"按钮（胶囊内图标按钮） */
.inspire-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--icon-color);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.inspire-btn:hover {
    background: var(--color-chat-bg);
    color: var(--color-primary);
}
.inspire-btn svg {
    width: 15px;
    height: 15px;
}

.stage-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-radius: 10px;
    font-size: 0.8em;
    margin-left: 8px;
}

/* 打字指示器 */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-light);
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* v7.28: 打字场景文案 */
.typing-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
}
.typing-text {
    font-size: 0.82em;
    color: var(--color-text-light);
    animation: typingTextFade 1.8s ease-in-out infinite;
}
/* v7.55: 超时软提示 — 网络慢/AI 响应慢时给用户一个安抚信号 */
.typing-text-slow {
    color: #b87535;
    font-style: italic;
}
@keyframes typingTextFade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* v7.28: AI 身份标签 */
.ai-identity-label {
    font-size: 0.72em;
    color: var(--color-text-light);
    margin-bottom: 6px;
    text-align: left;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    opacity: 0.85;
    user-select: none;
}
.ai-identity-icon {
    font-size: 0.9em;
}

/* v7.28: 不同模式 AI 消息的微妙视觉区分 */
/* 访谈模式 — 稍微暖一点的色调 */
.interview-mode .message.agent .message-bubble:not(.greeting-bubble) {
    border-left: 2px solid var(--color-primary-light);
}
/* 倾听模式 — 更柔和 */
.listen-mode .message.agent .message-bubble:not(.greeting-bubble) {
    border-left: 2px solid var(--color-border);
}

/* v7.28: Markdown 列表样式 */
.md-list {
    margin: 4px 0;
    padding-left: 20px;
    line-height: 1.8;
}
.md-list li {
    margin: 2px 0;
}

/* v7.28: 行内代码 */
.md-code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92em;
    font-family: inherit;
}

/* v7.28: AI 消息中的提问句强调 */
.message.agent .message-bubble p:has(strong) {
    /* 包含加粗的段落 */
}
.message.agent .message-bubble {
    line-height: 1.85;
}
.message.agent .message-bubble strong {
    color: var(--color-primary-dark);
    font-weight: 600;
}

/* v7.28: AI 消息中的段落间距 */
.message.agent .message-bubble p + p {
    margin-top: 8px;
}
.message.agent .message-bubble p + .md-list {
    margin-top: 4px;
}
.message.agent .message-bubble .md-list + p {
    margin-top: 4px;
}

/* ============================================================
   输入区 — 极简胶囊设计
   ============================================================ */

.chat-input-area {
    padding: 12px 20px 16px;
    background: var(--color-bg);
}

.input-capsule {
    max-width: var(--max-content-width);
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    background: var(--color-text-white);
    border: 1.5px solid var(--color-border);
    border-radius: 28px;
    padding: 6px 6px 6px 14px;
    box-shadow: 0 2px 12px var(--theme-shadow);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-capsule:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 2px 20px var(--tint-12);
}

#chat-input {
    flex: 1;
    padding: 10px 6px;
    border: none;
    border-radius: 0;
    font-size: 0.95em;
    font-family: var(--font-content);
    line-height: 1.5;
    resize: none;
    max-height: 140px;
    outline: none;
    background: transparent;
    color: var(--color-text);
    min-height: 38px;
}

#chat-input::placeholder {
    color: var(--color-text-light);
    opacity: 0.5;
}

.capsule-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.capsule-btn:hover {
    background: var(--tint-08);
    color: var(--color-primary);
}

.capsule-send {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.capsule-send:hover {
    background: var(--color-primary-dark);
    color: var(--color-text-white);
    transform: scale(1.05);
}

.capsule-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.capsule-voice.recording {
    color: var(--color-danger);
    background: rgba(229, 57, 53, 0.1);
    animation: voice-pulse 1.2s ease-in-out infinite;
}

@keyframes voice-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* 模式药丸 */
.input-modes {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 10px;
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
}

.mode-pill {
    background: none;
    border: none;
    padding: 5px 14px;
    font-size: 0.8em;
    color: var(--color-text-light);
    cursor: pointer;
    border-radius: 14px;
    transition: all 0.2s;
    font-family: inherit;
    font-weight: 400;
}

.mode-pill:hover {
    color: var(--color-text);
    background: rgba(0, 0, 0, 0.03);
}

.mode-pill.active {
    background: var(--tint-12);
    color: var(--color-primary-dark);
    font-weight: 500;
}

/* ============================================================
   弹窗
   ============================================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: var(--color-bg);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.modal-large {
    max-width: 720px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
    font-size: 1.2em;
    color: var(--color-primary-dark);
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: var(--color-text-light);
    padding: 4px 8px;
    border-radius: 6px;
}

.btn-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* ============================================================
   内联修订按钮
   ============================================================ */

.btn-secondary {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.95em;
}

.btn-secondary:hover {
    background: var(--color-bg-secondary);
}

.btn-primary {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    font-size: 0.95em;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: var(--color-text);
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    background: var(--color-text-white);
    color: var(--color-text);
}

.form-group input:focus {
    border-color: var(--color-primary);
}

.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    background: var(--color-text-white);
    color: var(--color-text);
    cursor: pointer;
}

.form-group select:focus {
    border-color: var(--color-primary);
}

.btn-save, .btn-copy {
    padding: 12px 28px;
    background: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-save:hover, .btn-copy:hover {
    background: var(--color-primary-dark);
}

/* 导出内容 */
.export-content {
    font-size: 0.95em;
    line-height: 1.8;
    color: var(--color-text);
}

.export-content h1 {
    font-size: 1.4em;
    color: var(--color-primary-dark);
    margin-bottom: 16px;
    text-align: center;
}

.export-content h2 {
    font-size: 1.15em;
    color: var(--color-primary-dark);
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 6px;
}

.export-content p {
    margin-bottom: 12px;
    text-indent: 2em;
}

.export-empty {
    text-align: center;
    color: var(--color-text-light);
    padding: 40px 0;
}

/* ============================================================
   响应式 - 移动端
   ============================================================ */

@media (max-width: 768px) {
    .nav-inner {
        padding: 0 8px;
        gap: 4px;
    }

    .nav-brand-text {
        display: none;
    }

    .nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex: 1;
    }
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tab {
        padding: 7px 12px;
        font-size: 0.82em;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mode-indicator {
        display: none;
    }

    /* v7.52: 移动端隐藏顶部"我的"按钮和换肤按钮，改用底部 Tab Bar */
    #nav-settings-btn {
        display: none !important;
    }
    .theme-picker-wrap {
        display: none !important;
    }
    /* v7.97: 移动端隐藏桌面导航，改用极简移动端导航条 */
    .top-nav { display: none !important; }
    .mobile-top-nav {
        display: flex !important;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 48px;
        padding: 0 12px;
        padding-top: env(safe-area-inset-top);
        height: calc(48px + env(safe-area-inset-top));
        align-items: center;
        justify-content: space-between;
        background: var(--color-panel-bg);
        border-bottom: 1px solid var(--color-border);
        z-index: 1003;
    }
    .mobile-nav-brand {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        white-space: nowrap;
        font-family: var(--font-heading);
        font-size: 16px;
        font-weight: 600;
        color: var(--color-text);
    }
    .mobile-nav-brand svg { width: 20px !important; height: 20px !important; }
    .mobile-nav-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mobile-nav-billing {
        display: flex;
        align-items: center;
        gap: 3px;
        background: var(--color-soft-bg);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        padding: 4px 10px;
        font-size: 13px;
        color: var(--color-text);
        cursor: pointer;
    }
    .mobile-nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        background: var(--color-panel-bg);
        color: var(--color-text);
        cursor: pointer;
    }
    .mobile-nav-btn svg { width: 18px !important; height: 18px !important; }
    /* v8.32: 移动端主视图切换（编辑/书架/工具集） */
    .mobile-nav-tabs {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-shrink: 1;
        min-width: 0;
        background: var(--color-panel-bg);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        padding: 2px;
    }
    .mobile-nav-tab {
        border: none;
        background: transparent;
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-light);
        padding: 5px 10px;
        border-radius: 16px;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s;
    }
    .mobile-nav-tab.active {
        background: var(--color-card);
        color: var(--color-primary-dark);
        box-shadow: 0 1px 3px var(--theme-shadow);
    }
    /* 移动端书架/工具集页面避让固定导航条 */
    .bookshelf-page,
    .tools-page {
        height: calc(100dvh - 48px - env(safe-area-inset-top));
        margin-top: calc(48px + env(safe-area-inset-top));
    }
    .tools-workbench {
        height: calc(100dvh - 48px - env(safe-area-inset-top));
        margin-top: calc(48px + env(safe-area-inset-top));
    }
    @media (max-width: 480px) {
        .mobile-nav-brand span { display: none; }
        .mobile-nav-tab { padding: 5px 8px; font-size: 11.5px; }
    }
    /* 移动端面板顶部留出导航条空间 */
    .outline-pane { top: calc(48px + env(safe-area-inset-top)) !important; }
    .ai-pane { top: calc(48px + env(safe-area-inset-top)) !important; }
    .draft-pane:not(.collapsed) { top: calc(48px + env(safe-area-inset-top)) !important; }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .message-bubble {
        max-width: 85%;
    }

    .chat-messages {
        padding: 12px;
    }

    .chat-input-area {
        padding: 8px 12px 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .chat-welcome {
        padding: 24px 16px;
        gap: 32px;
    }

    .welcome-greeting {
        font-size: 1.6em;
    }

    .welcome-tagline {
        font-size: 0.82em;
        letter-spacing: 2px;
    }

    .capsule-btn {
        width: 34px;
        height: 34px;
    }
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-light);
}

/* ============================================================
   设置弹窗 - 人物画像
   ============================================================ */

.settings-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 24px 0;
}

.profile-hint {
    font-size: 0.8em;
    color: var(--color-text-light);
    margin-bottom: 12px;
    line-height: 1.5;
}

.profile-content {
    background: #F8F5F0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    min-height: 80px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.profile-empty {
    color: var(--color-text-light);
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
}

.profile-loading {
    color: var(--color-primary-dark);
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
    line-height: 1.6;
}

.profile-text h4 {
    font-size: 0.95em;
    color: var(--color-primary-dark);
    margin-top: 12px;
    margin-bottom: 6px;
}

.profile-text h4:first-child {
    margin-top: 0;
}

.profile-text p {
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 6px;
}

.profile-text li {
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--color-text);
    margin-left: 16px;
}

/* ============================================================
   聊天更多菜单
   ============================================================ */

.chat-menu-wrapper {
    position: relative;
}

.chat-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 4px 0;
    z-index: 200;
    min-width: 180px;
}

.chat-menu-dropdown.show {
    display: block;
    animation: fadeIn 0.15s ease;
}

.chat-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 0.88em;
    color: var(--color-text);
}

.chat-menu-item:hover {
    background: var(--tint-08);
}

.chat-menu-item svg {
    color: var(--color-text-light);
    flex-shrink: 0;
}

.chat-menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}

.chat-menu-danger {
    color: var(--color-danger) !important;
}

.chat-menu-danger:hover {
    background: rgba(229,57,53,0.06) !important;
}

.chat-menu-danger svg {
    color: var(--color-danger) !important;
}

/* ============================================================
   聊天内搜索栏
   ============================================================ */

.chat-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.chat-search-bar svg {
    color: var(--color-text-light);
    opacity: 0.5;
    flex-shrink: 0;
}

.chat-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9em;
    font-family: inherit;
    color: var(--color-text);
    padding: 4px 0;
}

.chat-search-bar input::placeholder {
    color: var(--color-text-light);
    opacity: 0.6;
}

.chat-search-count {
    font-size: 0.78em;
    color: var(--color-text-light);
    white-space: nowrap;
    flex-shrink: 0;
}

.chat-search-nav {
    width: 26px;
    height: 26px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    flex-shrink: 0;
}

.chat-search-nav:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.chat-search-pos {
    font-size: 0.78em;
    color: var(--color-text-light);
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.chat-search-close {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
}

.chat-search-close:hover {
    background: rgba(0,0,0,0.06);
    color: var(--color-text);
}

/* 搜索高亮 */
.chat-search-highlight {
    background: rgba(255,200,0,0.35);
    border-radius: 2px;
    padding: 0 1px;
}

.chat-search-highlight.active {
    background: rgba(255,140,0,0.5);
}

/* ============================================================
   聊天背景选择
   ============================================================ */

.chat-bg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.chat-bg-item {
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 10px;
    padding: 6px;
}

.chat-bg-item:hover {
    background: var(--tint-06);
}

.chat-bg-item.active {
    background: var(--tint-12);
    box-shadow: 0 0 0 2px var(--color-primary) inset;
}

.chat-bg-preview {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    margin-bottom: 6px;
}

.chat-bg-default { background: #FAF6F0; }
.chat-bg-warm { background: linear-gradient(135deg, #FFF8E1, #FFE0B2); }
.chat-bg-paper { background: linear-gradient(135deg, #F5F0E8, #E8DFD3); }
.chat-bg-ink { background: linear-gradient(135deg, #ECEFF1, #CFD8DC); }
.chat-bg-bamboo { background: linear-gradient(135deg, #F1F8E9, #DCEDC8); }
.chat-bg-sunset { background: linear-gradient(135deg, #FFF3E0, #FFCCBC); }

.chat-bg-item span {
    font-size: 0.82em;
    color: var(--color-text);
}

.chat-bg-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.chat-bg-upload-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88em;
    color: var(--color-text);
}

.chat-bg-upload-btn,
.chat-bg-reset-btn {
    padding: 6px 16px;
    font-size: 0.85em;
}

/* ============================================================
   聊天背景应用
   ============================================================ */

.chat-messages.bg-warm { background: linear-gradient(135deg, #FFF8E1, #FFE0B2); }
.chat-messages.bg-paper { background: linear-gradient(135deg, #F5F0E8, #E8DFD3); }
.chat-messages.bg-ink { background: linear-gradient(135deg, #ECEFF1, #CFD8DC); }
.chat-messages.bg-bamboo { background: linear-gradient(135deg, #F1F8E9, #DCEDC8); }
.chat-messages.bg-sunset { background: linear-gradient(135deg, #FFF3E0, #FFCCBC); }
.chat-messages.bg-custom { background-size: cover; background-position: center; }

.btn-refresh-profile {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #4A7A9B, #5B8DAB);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9em;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-refresh-profile:hover {
    background: linear-gradient(135deg, #3A6A8B, #4A7A9B);
}

.btn-refresh-profile:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   文件上传
   ============================================================ */

/* 附件按钮 */
.btn-attach {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    margin-bottom: 2px;
}

.btn-attach:hover {
    color: var(--color-primary);
    background: var(--tint-08);
}

/* 上传中的遮罩 */
.upload-progress {
    text-align: center;
    padding: 12px 16px;
    background: var(--color-primary-light);
    border-radius: var(--border-radius);
    color: var(--color-primary-dark);
    font-size: 0.9em;
    margin-bottom: 8px;
    max-width: var(--max-content-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    animation: fadeIn 0.3s ease;
}

/* 聊天中的文件消息 */
.message-file {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message-image-preview {
    max-width: 280px;
    max-height: 200px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: transform 0.2s;
    object-fit: cover;
}

.message-image-preview:hover {
    transform: scale(1.02);
}

.message-image-wrap {
    position: relative;
    display: inline-block;
    max-width: 280px;
}

.message-image-preview.uploading {
    opacity: 0.6;
    cursor: default;
}

.message-image-uploading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0,0,0,0.35);
    border-radius: 8px;
    color: #fff;
    font-size: 0.85em;
    pointer-events: none;
}

.upload-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* 按钮内小尺寸 loading，适配浅色背景 */
.btn-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(0,0,0,0.12);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.message-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 280px;
}

.message-file-card:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.message-file-icon {
    font-size: 1.5em;
    flex-shrink: 0;
}

.message-file-info {
    flex: 1;
    min-width: 0;
}

.message-file-name {
    font-size: 0.9em;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-file-size {
    font-size: 0.75em;
    color: var(--color-text-light);
}

/* 侧边栏文件列表 */
.file-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ---- Tree Node: Files ---- */
.file-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 0.84em;
    color: var(--color-text);
    line-height: 1.35;
}

.file-item:hover {
    background: rgba(0,0,0,0.035);
}

.file-item-icon {
    font-size: 0.95em;
    flex-shrink: 0;
    opacity: 0.5;
}

.file-item-info {
    flex: 1;
    min-width: 0;
}

.file-item-name {
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-item-date {
    font-size: 0.72em;
    color: var(--color-text-light);
    opacity: 0.5;
}

.file-item-thumb {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}

.file-item-delete {
    display: none;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--color-text-light);
    font-size: 0.75em;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.5;
    transition: all 0.12s;
}

.file-item:hover .file-item-delete {
    display: flex;
}

.file-item-delete:hover {
    color: var(--color-danger);
    opacity: 1;
    background: rgba(229,57,53,0.08);
}

.file-item-restore {
    display: none;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85em;
    transition: all 0.12s;
    opacity: 0.5;
}

.file-item:hover .file-item-restore {
    display: flex;
}

.file-item-restore:hover {
    opacity: 1;
    background: var(--tint-12);
}

/* ---- Unified item delete button (all modules) ---- */
.item-delete-btn {
    display: none;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 2px;
    transition: all 0.12s;
    opacity: 0.4;
}

.draft-item:hover .item-delete-btn,
.file-item:hover .file-item-delete {
    display: flex;
}

.item-delete-btn:hover,
.file-item-delete:hover {
    color: var(--color-danger);
    opacity: 1;
    background: rgba(229,57,53,0.08);
}

/* Draft version badge */
.draft-item-version {
    font-size: 0.7em;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--tint-12);
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
    min-width: 24px;
    text-align: center;
}

/* ---- List Item: Drafts & Archives ---- */
.draft-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 0.84em;
    color: var(--color-text);
    line-height: 1.35;
}

.draft-item:hover {
    background: rgba(0,0,0,0.035);
}

.draft-item.draft-latest {
    color: var(--color-primary-dark);
}

.draft-item.draft-archived {
    color: var(--color-text-light);
    opacity: 0.65;
}

.draft-item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-item-date {
    font-size: 0.72em;
    color: var(--color-text-light);
    white-space: nowrap;
    opacity: 0.5;
}

/* 整理稿查看面板 */
/* (old panel-drafts styles removed — now using view-draft-viewer) */

/* ===== 文件上传消息卡片 ===== */
.file-upload-card {
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--tint-12);
    margin-bottom: 8px;
}

.file-upload-card.image-card {
    padding: 0;
    max-width: 280px;
}

.file-upload-card .upload-image-preview {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border-radius: 12px 12px 0 0;
}

.file-upload-card .upload-image-name {
    padding: 6px 10px;
    font-size: 0.75em;
    color: var(--color-text-light);
    background: rgba(255, 255, 255, 0.5);
    border-top: 1px solid var(--tint-08);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-upload-card.doc-card {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
    max-width: 280px;
}

.file-upload-card .doc-icon {
    font-size: 1.6em;
    flex-shrink: 0;
}

.file-upload-card .doc-info {
    flex: 1;
    min-width: 0;
}

.file-upload-card .doc-name {
    font-size: 0.85em;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-upload-card .doc-type {
    font-size: 0.72em;
    color: var(--color-text-light);
    margin-top: 2px;
}

.upload-text-content {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--tint-15);
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--color-text);
    white-space: pre-wrap;
    word-wrap: break-word;
}
/* v7.97: 长文档折叠样式 */
.upload-text-collapsed {
    max-height: 100px;
    overflow: hidden;
    position: relative;
}
.upload-text-ellipsis {
    color: var(--color-text-light);
}
.upload-text-toggle {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 12px;
    background: var(--color-soft-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 0.85em;
    color: var(--color-primary);
    cursor: pointer;
    white-space: nowrap;
}

/* ===== 文件整合确认气泡 ===== */
.file-confirm-bubble {
    max-width: 380px;
}

.file-confirm-text {
    line-height: 1.7;
    margin-bottom: 14px;
}

.file-confirm-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== 文件操作卡片 ===== */
.file-action-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-action-card {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--tint-15);
    background: var(--color-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 2px;
}

.file-action-card:hover {
    border-color: var(--color-primary);
    background: var(--tint-7);
    transform: translateX(4px);
}

.file-action-card.file-action-primary {
    border-color: var(--color-primary);
    background: var(--tint-7);
}

.file-action-card.file-action-primary:hover {
    background: var(--tint-12);
}

.file-action-label {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--color-text);
}

.file-action-primary .file-action-label {
    color: var(--color-primary);
}

.file-action-desc {
    font-size: 0.78em;
    color: var(--color-text-light);
    line-height: 1.4;
}

/* ===== 章节选择器 ===== */
.chapter-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chapter-selector-title {
    font-size: 0.82em;
    color: var(--color-text-light);
    margin-bottom: 6px;
    padding: 0 4px;
}

.chapter-selector-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--color-bg);
    border: 1px solid var(--tint-12);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chapter-selector-item:hover {
    border-color: var(--color-primary);
    background: var(--tint-7);
}

.chapter-selector-item.chapter-selector-new {
    border-style: dashed;
    border-color: var(--tint-15);
}

.chapter-selector-item.chapter-selector-new:hover {
    border-color: var(--color-primary);
    background: var(--tint-7);
}

.chapter-selector-name {
    font-size: 0.9em;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}

.chapter-selector-arrow {
    font-size: 0.85em;
    color: var(--color-text-light);
    flex-shrink: 0;
}

.file-confirm-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-confirm-btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: #fff;
}

.file-confirm-btn.file-confirm-yes {
    background: var(--color-primary);
    color: #fff;
}

.file-confirm-btn.file-confirm-yes:hover:not(:disabled) {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.file-confirm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.file-confirm-spinner {
    font-size: 0.85em;
    color: var(--color-text-light);
}

/* v8.4x: 照片 EXIF 信息卡片 */
.exif-card {
    background: var(--color-bubble-agent, #f7f3ec);
    border: 1px solid var(--color-border, #e8ddcb);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.exif-card-title {
    font-weight: 600;
    color: var(--color-ink-dark, #5c4a30);
    margin-bottom: 6px;
}
.exif-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}
.exif-key {
    color: var(--color-ink-light, #9a8a70);
    white-space: nowrap;
}
.exif-val {
    color: var(--color-ink, #5c4a30);
    text-align: right;
    word-break: break-all;
}

/* v7.54: 生成初稿确认气泡需要更宽，避免内容被压成竖排 */
.generate-draft-confirm-bubble {
    width: 320px;
    max-width: 100%;
    box-sizing: border-box;
}

.generate-draft-confirm-bubble .file-confirm-text {
    white-space: normal;
}

/* ============================================================
   SVG 图标系统（1.25px线宽，温暖可见色）
   ============================================================ */
.icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--icon-color); }
.icon-sm { width: 16px; height: 16px; flex-shrink: 0; color: var(--icon-color); }
.icon-xs { width: 14px; height: 14px; flex-shrink: 0; color: var(--icon-color); }
.icon-lg { width: 24px; height: 24px; flex-shrink: 0; color: var(--icon-color); }
.icon, .icon-sm, .icon-xs, .icon-lg { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.icon path, .icon circle, .icon line, .icon rect, .icon polyline, .icon polygon,
.icon-sm path, .icon-sm circle, .icon-sm line, .icon-sm rect, .icon-sm polyline, .icon-sm polygon,
.icon-xs path, .icon-xs circle, .icon-xs line, .icon-xs rect, .icon-xs polyline, .icon-xs polygon,
.icon-lg path, .icon-lg circle, .icon-lg line, .icon-lg rect, .icon-lg polyline, .icon-lg polygon,
.icon use, .icon-sm use, .icon-xs use, .icon-lg use {
    fill: none; stroke: currentColor; stroke-width: 1.25;
    stroke-linecap: round; stroke-linejoin: round;
}
.nav-btn {
    background: none; border: none; cursor: pointer;
    color: var(--icon-color); padding: 6px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.nav-btn:hover { color: var(--icon-color-hover); background: var(--tint-06); }
.nav-btn:active { color: var(--icon-color-active); }

/* ============================================================
   主题选择器（调色板下拉）
   ============================================================ */
.theme-picker-wrap { position: relative; }
.theme-dropdown {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    padding: 16px; width: 320px; z-index: 1000;
}
.theme-dropdown.open { display: block; animation: themeFadeIn 0.2s ease; }
@keyframes themeFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.theme-dropdown-title {
    font-size: 13px; font-weight: 700; color: var(--color-ink);
    margin-bottom: 14px; padding: 0 4px;
    display: flex; align-items: center; gap: 6px;
}

/* 3 列主题卡片网格 */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.theme-card {
    position: relative; border-radius: 12px;
    border: 2px solid transparent; background: var(--color-chat-bg);
    cursor: pointer; transition: all 0.2s ease;
    padding: 10px; text-align: center; overflow: hidden;
}
.theme-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--color-border);
}
.theme-card.active {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.theme-card-swatch {
    width: 100%; height: 44px; border-radius: 8px;
    margin-bottom: 8px; position: relative; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.theme-card-swatch::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 10px;
}
.theme-card-name { font-size: 13px; font-weight: 700; color: var(--color-ink); margin-bottom: 2px; }
.theme-card-desc { font-size: 10px; color: var(--color-ink-lighter); line-height: 1.3; }
.theme-card-badge {
    position: absolute; top: 6px; right: 6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.6);
    transition: all 0.2s ease;
}
.theme-card.active .theme-card-badge { opacity: 1; transform: scale(1); }
.theme-card-badge svg { width: 10px; height: 10px; color: #fff; }

/* 色卡对应 */
.theme-card[data-theme-val="terra"] .theme-card-swatch { background: #B5563B; }
.theme-card[data-theme-val="terra"] .theme-card-swatch::after { background: #FBF9F7; }
.theme-card[data-theme-val="amber"] .theme-card-swatch { background: #C7873B; }
.theme-card[data-theme-val="amber"] .theme-card-swatch::after { background: #FDFBF7; }
.theme-card[data-theme-val="smoke"] .theme-card-swatch { background: #6B6B6B; }
.theme-card[data-theme-val="smoke"] .theme-card-swatch::after { background: #FAFAFA; }

/* ============================================================
   设置面板（右侧滑入抽屉）
   ============================================================ */
.settings-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 2000; opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
.settings-overlay.open { opacity: 1; pointer-events: auto; }
.settings-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 400px; max-width: 90vw;
    background: var(--color-bg); z-index: 2001;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.08);
}
.settings-drawer.open { transform: translateX(0); }
.settings-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.settings-header-title {
    font-size: 16px; font-weight: 700; color: var(--color-ink);
    display: flex; align-items: center; gap: 8px;
}
.settings-close {
    width: 32px; height: 32px; border-radius: 8px;
    border: none; background: var(--color-chat-bg); cursor: pointer;
    color: var(--color-ink-light); display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.settings-close:hover { background: var(--tint-12); color: var(--color-ink); }
.settings-body {
    flex: 1; overflow-y: auto; padding: 0;
}
.settings-section {
    padding: 20px; border-bottom: 1px solid var(--color-border-light);
}
.settings-section:last-child { border-bottom: none; }
.settings-section-title {
    font-size: 12px; font-weight: 600; color: var(--color-ink-light);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
}
.settings-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0;
}
.settings-row + .settings-row { border-top: 1px solid var(--color-border-light); }
.settings-row-label {
    font-size: 14px; color: var(--color-ink); flex-shrink: 0;
}
.settings-row-desc {
    font-size: 12px; color: var(--color-ink-lighter); margin-top: 2px;
}
/* v8.08: 设置抽屉叙事风格 badge */
.settings-style-badge {
    font-size: 13px; font-weight: 500; color: var(--color-primary);
    padding: 4px 12px; border-radius: 12px;
    background: var(--color-primary-bg); white-space: nowrap;
    flex-shrink: 0; cursor: pointer;
    transition: background 0.15s;
}
.settings-style-badge:hover { background: var(--color-primary-light); }
/* v7.45: 账号卡片 */
.settings-account-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: 10px;
    background: var(--color-chat-bg); margin-bottom: 12px;
}
.settings-account-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--color-panel-bg); display: flex;
    align-items: center; justify-content: center;
    font-size: 22px; border: 1px solid var(--color-border);
}
.settings-account-info { flex: 1; }
.settings-account-name { font-size: 15px; font-weight: 600; color: var(--color-ink); }
.settings-account-desc { font-size: 12px; color: var(--color-ink-lighter); margin-top: 2px; }
.settings-logout-btn { width: 100%; justify-content: center; }
/* v7.45: 魔力豆卡片 */
.settings-billing-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px; border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary-bg) 0%, var(--color-card) 100%);
    border: 1px solid var(--color-border); margin-bottom: 12px;
}
.settings-billing-main { flex: 1; }
.settings-billing-amount {
    font-size: 24px; font-weight: 700; color: var(--color-primary-dark);
    line-height: 1.2;
}
.settings-billing-amount.low { color: #D46B6B; }
.settings-billing-plan {
    font-size: 12px; color: var(--color-ink-light); margin-top: 4px;
}
.settings-recharge-btn {
    padding: 8px 16px; border: none; border-radius: 8px;
    background: var(--color-primary); color: #fff;
    font-size: 13px; font-family: var(--font-ui);
    cursor: pointer; transition: all 0.15s;
}
.settings-recharge-btn:hover { background: var(--color-primary-dark); }
.settings-billing-summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; font-size: 13px; color: var(--color-ink-light);
}
.settings-billing-summary-title { color: var(--color-ink-lighter); }
.settings-billing-summary-value { font-weight: 600; color: var(--color-ink); }

/* 存储用量进度条 */
.settings-storage-card {
    margin: 8px 0; padding: 10px 12px;
    background: var(--color-bg-card, rgba(128,128,128,0.06));
    border-radius: 8px;
}
.settings-storage-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.settings-storage-title {
    font-size: 12px; color: var(--color-ink-lighter);
}
.settings-storage-value {
    font-size: 12px; font-weight: 600; color: var(--color-ink);
}
.settings-storage-bar-track {
    width: 100%; height: 6px;
    background: var(--color-border, rgba(128,128,128,0.15));
    border-radius: 3px; overflow: hidden;
}
.settings-storage-bar-fill {
    height: 100%; width: 0%;
    background: var(--color-primary, #4a90d9);
    border-radius: 3px;
    transition: width 0.6s ease;
}
.settings-storage-bar-fill.warn {
    background: #f0ad4e;
}
.settings-storage-bar-fill.danger {
    background: #e74c3c;
}

/* 用量明细 */
.settings-link-btn {
    display: block; width: 100%; padding: 8px;
    text-align: center; font-size: 13px; color: var(--color-primary);
    background: none; border: 1px solid var(--color-border);
    border-radius: 8px; cursor: pointer; transition: all 0.15s;
}
.settings-link-btn:hover { background: var(--color-primary-bg); border-color: var(--color-primary-light); }
.usage-stats-row {
    display: flex; gap: 8px; margin-top: 10px;
}
.usage-stat-card {
    flex: 1; padding: 10px 8px; border-radius: 8px;
    background: var(--color-bg); text-align: center;
}
.usage-stat-num { font-size: 18px; font-weight: 700; color: var(--color-ink); }
.usage-stat-label { font-size: 11px; color: var(--color-ink-lighter); margin-top: 2px; }
.usage-model-list { margin-top: 10px; }
.usage-model-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--color-border-lighter);
}
.usage-model-row:last-child { border-bottom: none; }
.usage-model-name { color: var(--color-ink); font-family: monospace; font-size: 12px; }
.usage-model-meta { color: var(--color-ink-lighter); font-size: 12px; }
.usage-model-cost { font-weight: 600; color: var(--color-primary); }
.usage-detail-table {
    margin-top: 10px; font-size: 12px; overflow-x: auto;
}
.usage-detail-table table { width: 100%; border-collapse: collapse; }
.usage-detail-table th {
    text-align: left; padding: 6px 4px; color: var(--color-ink-lighter);
    font-weight: 500; border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.usage-detail-table td {
    padding: 6px 4px; border-bottom: 1px solid var(--color-border-lighter);
    color: var(--color-ink-light); white-space: nowrap;
}
.usage-detail-table td.model { font-family: monospace; color: var(--color-ink); }
.usage-detail-table td.cost { font-weight: 600; color: var(--color-primary); text-align: right; }
.usage-detail-pager {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 10px; font-size: 13px; color: var(--color-ink-light);
}
.usage-detail-pager button {
    padding: 4px 12px; border: 1px solid var(--color-border);
    border-radius: 6px; background: none; cursor: pointer; color: var(--color-ink-light);
}
.usage-detail-pager button:hover:not(:disabled) { background: var(--color-primary-bg); color: var(--color-primary); }
.usage-detail-pager button:disabled { opacity: 0.4; cursor: default; }
.usage-tab-row {
    display: flex; gap: 4px; margin-top: 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}
.usage-tab {
    padding: 6px 12px; font-size: 13px; color: var(--color-ink-lighter);
    border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.usage-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
/* 叙事风格选择卡片 */
.narrative-styles {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.narrative-card {
    padding: 12px 10px; border-radius: 10px;
    border: 1.5px solid var(--color-border); cursor: pointer;
    transition: all 0.15s; text-align: center;
    background: var(--color-card);
}
.narrative-card:hover { border-color: var(--color-primary-light); }
.narrative-card.active {
    border-color: var(--color-primary); background: var(--color-primary-bg);
}
.narrative-card-icon { font-size: 20px; margin-bottom: 4px; line-height: 1; }
.narrative-card-name { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.narrative-card.active .narrative-card-name { color: var(--color-primary-dark); }
.narrative-card-desc { font-size: 11px; color: var(--color-ink-lighter); margin-top: 2px; }
.narrative-sample {
    margin-top: 12px; padding: 12px 14px; border-radius: 10px;
    background: var(--color-chat-bg); border-left: 3px solid var(--color-primary);
}
.narrative-sample-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 8px;
}
.narrative-sample-label {
    font-size: 12px; color: var(--color-ink-lighter);
}
.narrative-sample-style {
    font-size: 11px; font-weight: 600; color: var(--color-primary-dark);
    background: var(--color-primary-bg); padding: 2px 8px; border-radius: 12px;
}
.narrative-sample-text {
    font-size: 13px; line-height: 1.7; color: var(--color-ink);
    font-family: var(--font-body); font-style: italic;
}

/* v7.63: 对话式叙事风格选择卡片 */
.style-pick-bubble {
    width: 100%;
}
.style-pick-text {
    font-size: 13.5px; line-height: 1.6; color: var(--color-ink);
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
}
.style-pick-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.style-pick-card {
    padding: 11px 12px; border-radius: 12px;
    border: 1.5px solid var(--color-border); cursor: pointer;
    transition: all 0.18s ease; background: var(--color-card);
    position: relative;
}
.style-pick-card:hover { border-color: var(--color-primary-light); transform: translateY(-1px); }
.style-pick-card.active {
    border-color: var(--color-primary); background: var(--color-primary-bg);
    box-shadow: 0 2px 8px rgba(99,102,241,0.12);
}
.spc-head {
    display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.spc-icon { font-size: 17px; line-height: 1; }
.spc-name { font-size: 13px; font-weight: 600; color: var(--color-ink); flex: 1; }
.style-pick-card.active .spc-name { color: var(--color-primary-dark); }
.spc-check {
    font-size: 12px; color: #fff; background: var(--color-primary);
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.spc-preview {
    font-size: 11.5px; line-height: 1.6; color: var(--color-ink-light);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-style: italic;
}
.style-pick-feedback {
    margin-top: 10px; padding: 6px 12px; border-radius: 8px;
    background: var(--color-primary-bg); color: var(--color-primary-dark);
    font-size: 12.5px; font-weight: 500; text-align: center;
    transition: opacity 0.4s ease;
}

/* 字号切换组 */
.size-group { display: flex; gap: 0; }
.size-btn {
    padding: 6px 16px; border: 1px solid var(--color-border);
    background: var(--color-card); cursor: pointer;
    font-family: var(--font-ui); transition: all 0.15s;
    color: var(--color-ink-light);
}
.size-btn:first-child { border-radius: 8px 0 0 8px; }
.size-btn:last-child { border-radius: 0 8px 8px 0; }
.size-btn + .size-btn { border-left: none; }
.size-btn.active {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.size-btn-s { font-size: 12px; }
.size-btn-m { font-size: 14px; }
.size-btn-l { font-size: 16px; }
/* 开关 toggle */
.toggle-switch {
    position: relative; width: 40px; height: 22px;
    border-radius: 11px; background: var(--color-border);
    cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.toggle-switch.on { background: var(--color-primary); }
.toggle-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-switch.on::after { transform: translateX(18px); }
/* 滑块 */
.range-wrap { flex: 1; max-width: 160px; display: flex; align-items: center; gap: 8px; }
.range-slider {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 4px; border-radius: 2px;
    background: var(--color-border); outline: none;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--color-primary); cursor: pointer;
    box-shadow: 0 1px 3px var(--theme-shadow);
}
.range-value {
    font-size: 12px; color: var(--color-primary-dark); font-weight: 600;
    min-width: 28px; text-align: right;
}
/* 设置项按钮 */
.settings-action-btn {
    padding: 8px 16px; border-radius: 8px;
    border: 1px solid var(--color-border); background: var(--color-card);
    font-size: 13px; color: var(--color-ink); cursor: pointer;
    font-family: var(--font-ui); transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.settings-action-btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.settings-action-btn.danger:hover { border-color: var(--color-danger); color: var(--color-danger); }
/* 关于 */
.about-block { text-align: center; padding: 8px 0; }
.about-logo { font-size: 24px; font-weight: 700; color: var(--color-primary); margin-bottom: 4px; }
.about-version { font-size: 12px; color: var(--color-ink-lighter); }
/* 设置面板内的输入框样式 */
.settings-input {
    width: 100%; padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--color-border); background: var(--color-card);
    font-size: 14px; color: var(--color-ink);
    font-family: var(--font-ui); transition: border-color 0.15s;
}
.settings-input:focus { outline: none; border-color: var(--color-primary); }
.settings-select {
    width: 100%; padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--color-border); background: var(--color-card);
    font-size: 14px; color: var(--color-ink);
    font-family: var(--font-ui); cursor: pointer;
}
.settings-field-group { margin-bottom: 14px; }
.settings-field-label { font-size: 13px; font-weight: 600; color: var(--color-ink-light); margin-bottom: 6px; }
.settings-save-btn {
    width: 100%; padding: 10px; border-radius: 10px;
    border: none; background: var(--color-primary); color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: var(--font-ui); transition: opacity 0.15s;
}
.settings-save-btn:hover { opacity: 0.9; }
.settings-profile-block {
    background: var(--color-chat-bg); border-radius: 10px;
    padding: 14px; margin-top: 10px;
}
.settings-profile-text { font-size: 13px; line-height: 1.6; color: var(--color-ink); }
.settings-profile-text h4 { font-size: 14px; color: var(--color-primary-dark); margin: 8px 0 4px; }
.settings-profile-text li { margin-left: 16px; color: var(--color-ink-light); }
.settings-profile-text p { margin: 4px 0; }
.settings-profile-empty { font-size: 13px; color: var(--color-ink-lighter); text-align: center; padding: 8px; }
.settings-profile-btn {
    width: 100%; padding: 8px; margin-top: 10px;
    border-radius: 8px; border: 1px solid var(--color-primary);
    background: var(--color-primary-bg); color: var(--color-primary-dark);
    font-size: 13px; cursor: pointer; font-family: var(--font-ui);
    transition: all 0.15s;
}
.settings-profile-btn:hover { background: var(--tint-12); }
.settings-profile-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   v7.0 三栏布局：写回忆录
   ============================================================ */

/* --- 导航栏加宽适配三栏 --- */
.nav-inner { max-width: 1400px; }
.nav-tabs { flex: 1; justify-content: center; gap: 4px; background: var(--color-chat-bg); padding: 4px; border-radius: 14px; }
.nav-tab { border-radius: 10px; padding: 6px 18px; }
.nav-tab.active { background: var(--color-card); color: var(--color-primary-dark); font-weight: 600; box-shadow: 0 1px 3px rgba(61,43,31,0.06); }
.nav-btn {
    width: 34px; height: 34px; border: none; background: transparent;
    border-radius: 50%; cursor: pointer; color: var(--icon-color);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.nav-btn:hover { background: var(--color-chat-bg); color: var(--icon-color-hover); }

/* v7.45: 导航魔力豆胶囊 */
.nav-billing-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-panel-bg);
    color: var(--color-text);
    font-size: 12px;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.15s;
    margin-right: 6px;
}
.nav-billing-pill:hover {
    border-color: var(--color-primary);
    background: var(--tint-06);
}
.nav-billing-icon {
    font-size: 12px;
}
.nav-billing-value {
    font-weight: 600;
    color: var(--color-primary-dark);
}
.nav-billing-value.low {
    color: #D46B6B;
}

/* v7.86: 导航存储用量胶囊（魔粒余额旁） */
.nav-storage-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 6px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-panel-bg);
    color: var(--color-text);
    font-size: 12px;
    font-family: var(--font-ui);
    margin-right: 6px;
    cursor: default;
    transition: all 0.15s;
    min-width: 64px;
}
.nav-storage-pill:hover {
    border-color: var(--color-primary);
    background: var(--tint-06);
}
.nav-storage-pill.warning {
    border-color: #E6B45C;
}
.nav-storage-pill.danger {
    border-color: #D46B6B;
    background: rgba(212, 107, 107, 0.06);
}
.nav-storage-icon {
    font-size: 11px;
    line-height: 1;
}
.nav-storage-value {
    font-weight: 600;
    color: var(--color-primary-dark);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}
.nav-storage-pill.warning .nav-storage-value { color: #B8862E; }
.nav-storage-pill.danger .nav-storage-value { color: #D46B6B; }
.nav-storage-bar {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 2px;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
    overflow: hidden;
}
.nav-storage-bar-fill {
    height: 100%;
    background: var(--color-primary);
    width: 0%;
    transition: width 0.3s, background 0.3s;
}
.nav-storage-pill.warning .nav-storage-bar-fill { background: #E6B45C; }
.nav-storage-pill.danger  .nav-storage-bar-fill { background: #D46B6B; }

/* --- 充值弹窗 --- */
.recharge-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 2000;
    display: none;
}
.recharge-overlay.show { display: block; }
.recharge-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 360px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 60px);
    background: var(--color-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    z-index: 2001;
    visibility: hidden;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.recharge-modal.show {
    visibility: visible;
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.recharge-header {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--tint-10);
}
.recharge-header h3 {
    font-family: var(--font-ui); font-size: 17px; font-weight: 600;
    color: var(--color-ink); margin: 0;
}
.recharge-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: none; border-radius: 8px;
    background: transparent; color: var(--icon-color); cursor: pointer;
    transition: all 0.15s;
}
.recharge-close:hover { background: var(--tint-06); color: var(--color-ink); }
.recharge-body { padding: 20px; min-height: 0; overflow-y: auto; }
.recharge-balance {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary-bg), var(--color-card));
    border: 1px solid var(--color-border); margin-bottom: 20px;
}
.recharge-balance-label {
    font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-lighter);
}
.recharge-balance-value {
    font-family: var(--font-ui); font-size: 20px; font-weight: 700;
    color: var(--color-primary-dark);
}
.recharge-balance-value.low { color: #D46B6B; }
.recharge-plan-label {
    font-family: var(--font-ui); font-size: 13px; font-weight: 500;
    color: var(--color-ink-light); margin-bottom: 10px;
}
.recharge-plans {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-bottom: 20px;
}
.recharge-plan {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 14px 10px; border: 1.5px solid var(--color-border); border-radius: 12px;
    background: var(--color-card); cursor: pointer;
    transition: all 0.15s; font-family: var(--font-ui);
}
.recharge-plan:hover { border-color: var(--color-primary-light); background: var(--color-primary-bg); }
.recharge-plan.selected {
    border-color: var(--color-primary); background: var(--color-primary-bg);
    box-shadow: 0 0 0 3px var(--tint-06);
}
.recharge-plan-amount { font-size: 15px; font-weight: 600; color: var(--color-ink); }
.recharge-plan-price { font-size: 13px; color: var(--color-ink-lighter); }
.recharge-plan-tag {
    position: absolute; top: -7px; right: -4px;
    padding: 2px 7px; border-radius: 8px;
    background: var(--color-primary); color: #fff;
    font-size: 10px; font-weight: 600; line-height: 1.5;
    font-family: var(--font-ui);
}
.recharge-submit {
    width: 100%; padding: 12px;
    border: none; border-radius: 10px;
    background: var(--color-primary); color: #fff;
    font-size: 15px; font-weight: 600; font-family: var(--font-ui);
    cursor: pointer; transition: all 0.15s;
    margin-bottom: 10px;
}
.recharge-submit:hover:not(:disabled) { background: var(--color-primary-dark); }
.recharge-submit:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.recharge-hint {
    text-align: center;
    font-family: var(--font-ui); font-size: 12px; color: var(--color-ink-lighter);
}
.recharge-service-status {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--color-primary-bg);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.6;
}
.recharge-service-status:empty { display: none; }
.recharge-service-status strong { display: block; margin-bottom: 6px; font-size: 18px; color: var(--color-ink); }
.recharge-service-status span { display: block; font-size: 14px; font-weight: 400; color: var(--color-ink-light); }
.recharge-service-status[data-state="unavailable"] { padding: 18px 16px; border: 1px solid var(--color-border); background: var(--color-primary-bg); }
.recharge-continue { width: 100%; padding: 11px 12px; margin: 0 0 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-card); color: var(--color-ink); font: 500 14px var(--font-ui); cursor: pointer; }
.recharge-continue:hover { background: var(--color-primary-bg); border-color: var(--color-primary); }
.recharge-continue:focus-visible, .recharge-submit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.recharge-methods { display: flex; gap: 10px; margin-bottom: 16px; }
.recharge-method {
    flex: 1;
    padding: 10px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-card);
    color: var(--color-ink);
    font: inherit;
    cursor: pointer;
}
.recharge-method.selected { border-color: var(--color-primary); background: var(--color-primary-bg); }
.recharge-method:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.recharge-plan:disabled { cursor: not-allowed; opacity: 0.65; }
.recharge-plan:disabled:hover { border-color: var(--color-border); background: var(--color-card); }
.recharge-pay-panel {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 8px 0 4px;
}
.recharge-pay-qr {
    width: 210px; height: 210px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: 12px; padding: 6px;
}
.recharge-pay-qr img, .recharge-pay-qr canvas { display: block; }
.recharge-pay-tip { font-size: 14px; font-weight: 600; color: var(--color-ink); font-family: var(--font-ui); }
.recharge-pay-status { font-size: 12px; color: var(--color-ink-lighter); font-family: var(--font-ui); text-align: center; }
.recharge-pay-cancel {
    margin-top: 4px; padding: 8px 22px;
    border: 1px solid var(--color-border); border-radius: 18px;
    background: var(--color-card); color: var(--color-text-light);
    font-size: 13px; font-family: var(--font-ui); cursor: pointer;
}
.recharge-pay-cancel:hover { border-color: var(--color-danger, #e53e3e); color: var(--color-danger, #e53e3e); }

/* --- 快捷键面板 --- */
.shortcuts-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 2000; display: none;
}
.shortcuts-overlay.show { display: block; }
.shortcuts-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 520px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 60px);
    background: var(--color-card);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    z-index: 2001;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.shortcuts-modal.show {
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.shortcuts-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--tint-10);
}
.shortcuts-title {
    font-family: var(--font-ui); font-size: 17px; font-weight: 600;
    color: var(--color-ink);
}
.shortcuts-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: none; border-radius: 8px;
    background: transparent; color: var(--icon-color); cursor: pointer;
    transition: all 0.15s; font-size: 16px;
}
.shortcuts-close:hover { background: var(--tint-06); color: var(--color-ink); }
.shortcuts-body {
    padding: 16px 20px 20px; overflow-y: auto;
}
.shortcuts-section { margin-bottom: 18px; }
.shortcuts-section:last-of-type { margin-bottom: 8px; }
.shortcuts-section-title {
    font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    color: var(--color-ink-lighter);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--tint-06);
}
.shortcuts-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.shortcut-item {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: 13px;
    color: var(--color-ink-light);
}
.shortcut-item kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600;
    color: var(--color-ink);
    background: var(--tint-06);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    box-shadow: 0 1px 0 var(--color-border);
}
.shortcut-item span { flex: 1; }
.shortcuts-hint {
    text-align: center; font-family: var(--font-ui);
    font-size: 12px; color: var(--color-ink-lighter);
    padding-top: 12px; border-top: 1px solid var(--tint-06);
}
.shortcuts-hint kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 5px;
    font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600;
    background: var(--tint-06); border: 1px solid var(--color-border);
    border-radius: 4px;
}

/* --- 三栏主布局 --- */
.main-layout {
    display: flex;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    overflow: hidden;
    position: relative;
}

/* === 左栏面板（目录/时光轴/资料共用） === */
.resize-handle-left,
.resize-handle-right { margin-top: 44px; }

/* === 左栏：工作空间 === */
.outline-pane {
    width: 280px; flex-shrink: 0;
    background: var(--color-panel-bg);
    border-right: 1px solid var(--color-border);
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: width 0.3s ease, opacity 0.25s ease, transform 0.3s ease;
}
.outline-pane.collapsed {
    width: 0 !important; opacity: 0; transform: translateX(-30px);
    border-right: none; overflow: hidden; flex-shrink: 0;
}
/* 左侧分隔线在目录面板收起时隐藏 */
.outline-pane.collapsed + .resize-handle-left,
.resize-handle-left.hidden {
    display: none;
}
/* 收起按钮 */
.outline-collapse-btn {
    width: 26px; height: 26px; border: none; background: transparent;
    border-radius: 6px; cursor: pointer; color: var(--icon-color);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s; padding: 0;
}
.outline-collapse-btn:hover { background: var(--color-chat-bg); color: var(--color-primary); }
.outline-collapse-btn svg { width: 16px; height: 16px; }
/* 目录面板交换按钮 */
.outline-swap-btn {
    width: 26px; height: 26px; border: none; background: transparent;
    border-radius: 6px; cursor: pointer; color: var(--icon-color);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s; padding: 0;
}
.outline-swap-btn:hover { background: var(--color-chat-bg); color: var(--color-primary); }
.outline-swap-btn svg { width: 15px; height: 15px; }
.outline-swap-btn.active { background: var(--tint-08); color: var(--color-primary); }
/* 编辑区交换按钮高亮态 */
.draft-swap-btn.active { background: var(--tint-08); color: var(--color-primary); }
.workspace-header {
    padding: 8px 14px;
    border-bottom: 1px solid var(--color-border-light);
}
.workspace-section-label {
    font-size: 10px; color: var(--icon-color); letter-spacing: 0.5px;
    font-family: var(--font-ui); flex-shrink: 0;
}
.workspace-title-row { display: flex; align-items: center; gap: 6px; }
.workspace-book-name {
    flex: 1; min-width: 0;
    font-family: var(--font-content); font-size: 15px; font-weight: 600;
    color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; transition: all 0.2s; border-radius: 4px; padding: 2px 4px; margin: -2px -4px;
}
.workspace-book-name:hover { background: var(--color-chat-bg); }
.workspace-edit-icon { color: var(--icon-color); flex-shrink: 0; cursor: pointer; }
.workspace-edit-icon:hover { color: var(--color-primary); }

/* ============================================================
   统一面板控制按钮 (panel-btn)：左/中/右三栏 icon-only 控制按钮统一
   ============================================================ */
.panel-btn {
    border: none; background: transparent; cursor: pointer;
    width: 28px; height: 28px; border-radius: 7px;
    color: var(--icon-color);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.18s ease;
    padding: 0; flex-shrink: 0;
}
.panel-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--color-ink-dark);
}
.panel-btn:active { transform: scale(0.95); }
.panel-btn svg { width: 16px; height: 16px; }

/* 统一树状目录 */
.left-tree { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.left-tree .list-search { padding: 10px 14px; }
.tree-root { flex: 1; overflow-y: auto; padding: 0 8px 12px; }

/* 一级分支 */
/* v8.11: outline groups (my content / AI organized) */
.tree-group { margin-bottom: 2px; }
.tree-group + .tree-group-label {
    margin-top: 8px; padding-top: 10px;
    border-top: 1px solid var(--color-border-light);
}
.tree-group-label {
    display: flex; align-items: center; gap: 5px;
    padding: 0 10px 4px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    color: var(--icon-color); user-select: none;
}
.tree-group-label .tree-group-icon { display: flex; align-items: center; }
.tree-group-label .tree-group-icon svg { width: 13px; height: 13px; }
.tree-group-label.ai { color: var(--color-primary); }

.tree-branch { margin-bottom: 2px; }
.tree-header {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    transition: background 0.15s; user-select: none;
}
.tree-header:hover { background: var(--tint-06); }
.tree-toggle {
    width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
    color: var(--icon-color); transition: transform 0.2s; flex-shrink: 0;
}
.tree-branch.expanded > .tree-header > .tree-toggle .tree-chevron { transform: rotate(0deg); }
.tree-branch:not(.expanded) > .tree-header > .tree-toggle .tree-chevron { transform: rotate(-90deg); }
.tree-icon {
    width: 18px; height: 18px; flex-shrink: 0;
    color: var(--icon-color);
    display: flex; align-items: center; justify-content: center;
}
.tree-icon svg {
    width: 16px; height: 16px;
}
.tree-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-desc { font-size: 11px; color: var(--color-ink-lighter); font-weight: 400; }
.tree-count { font-size: 11px; color: var(--icon-color); background: var(--color-chat-bg); padding: 2px 6px; border-radius: 6px; }
.tree-actions { display: none; align-items: center; gap: 4px; }
.tree-header:hover .tree-actions { display: flex; }
.tree-action-btn {
    width: 22px; height: 22px; border: none; border-radius: 5px;
    background: transparent; color: var(--icon-color); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.tree-action-btn:hover { color: var(--color-primary-dark); background: var(--tint-12); }
.tree-action-btn svg { width: 13px; height: 13px; }
.tree-children { padding-left: 18px; display: none; flex-direction: column; gap: 1px; }
.tree-branch.expanded > .tree-children { display: flex; }

/* v8.06: 线索库红点角标 */
.clue-badge {
    margin-left: 4px;
    font-size: 10px; font-weight: 700; color: #fff;
    background: #e74c3c; min-width: 16px; height: 16px; line-height: 16px;
    text-align: center; border-radius: 8px; padding: 0 4px;
    animation: badgePop 0.3s ease;
}
@keyframes badgePop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* 面板 */
.left-panel { flex: 1; overflow-y: auto; display: none; flex-direction: column; }
.left-panel.active { display: flex; }

/* 列表头部（保留旧结构兼容） */
.list-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 8px;
}
.list-header-title {
    font-size: 12px; font-weight: 600; color: var(--color-ink-light);
    display: flex; align-items: center; gap: 6px;
}
.list-header-title .count {
    font-size: 11px; font-weight: 600; color: var(--icon-color);
    background: var(--color-chat-bg); padding: 1px 6px; border-radius: 8px;
}
.list-actions { display: flex; align-items: center; gap: 4px; }
.list-action-btn {
    width: 26px; height: 26px; border: 1px solid var(--color-border);
    border-radius: 6px; background: var(--color-card);
    color: var(--icon-color); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.list-action-btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); background: var(--color-primary-bg); }
.list-action-btn svg { width: 14px; height: 14px; }

/* 搜索框 */
.list-search { padding: 0 14px 10px; }
.list-search-input {
    width: 100%; height: 32px; border: 1px solid var(--color-border);
    border-radius: 8px; background: var(--color-card); padding: 0 10px;
    font-size: 13px; color: var(--color-ink); outline: none; font-family: var(--font-ui);
    transition: all 0.2s;
}
.list-search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--tint-08); }
.list-search-input::placeholder { color: var(--icon-color); }

/* 目录树 */
.outline-tree { overflow-y: auto; padding: 0 0 8px 10px; border-left: 3px solid #B5563B; margin-left: 4px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.outline-tree.is-empty { border-left-color: transparent; padding-left: 0; margin-left: 0; }
.chapter-group { margin-bottom: 2px; }
.group-header {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    transition: background 0.15s; user-select: none;
}
.group-header:hover { background: var(--tint-06); }
.group-toggle { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--icon-color); transition: transform 0.2s; }
.group-toggle.collapsed { transform: rotate(-90deg); }
.group-icon {
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--color-border-light); color: var(--color-ink-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; font-family: var(--font-ui); letter-spacing: 0.5px;
}
.group-header:hover .group-icon { background: var(--tint-12); color: var(--color-primary-dark); }
.group-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-count { font-size: 11px; color: var(--icon-color); background: var(--color-chat-bg); padding: 2px 6px; border-radius: 6px; }
.group-children { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.group-children.collapsed { display: none; }

/* 章节项 — 与理解层卡片视觉语言统一 */
.chapter-item {
    position: relative; display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px 10px 10px; border-radius: 10px; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
    background: linear-gradient(135deg, rgba(181, 86, 59, 0.06), rgba(181, 86, 59, 0.01));
}
.chapter-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(181, 86, 59, 0.10);
    background: linear-gradient(135deg, rgba(181, 86, 59, 0.10), rgba(181, 86, 59, 0.03));
}
.chapter-item.active {
    background: linear-gradient(135deg, rgba(181, 86, 59, 0.14), rgba(181, 86, 59, 0.05));
}
.chapter-item.active .chapter-name { color: var(--color-primary-dark); font-weight: 600; }
.chapter-status {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 0; background: rgba(181, 86, 59, 0.10);
    border: none; color: var(--color-primary); transition: all 0.2s;
}
.chapter-status.done { background: rgba(46, 204, 113, 0.12); color: var(--color-success); }
.chapter-status.drafting { background: rgba(181, 86, 59, 0.12); color: var(--color-primary); }
.chapter-status.live { background: rgba(45, 125, 94, 0.12); color: #2D7D5E; }
.chapter-status svg { width: 14px; height: 14px; stroke-width: 2; }
.chapter-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chapter-name { font-size: 14px; font-weight: 600; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.chapter-name-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chapter-name-row .chapter-edit-icon { display: none; flex-shrink: 0; width: 14px; height: 14px; cursor: pointer; color: var(--icon-color); opacity: 0.6; transition: opacity 0.15s; }
.chapter-name-row .chapter-edit-icon:hover { opacity: 1; color: var(--color-primary); }
.chapter-item:hover .chapter-edit-icon { display: block; }
.chapter-item.active .chapter-edit-icon { opacity: 0.9; }
.chapter-name-row .chapter-delete-icon { display: none; flex-shrink: 0; width: 14px; height: 14px; cursor: pointer; color: var(--icon-color); opacity: 0.6; transition: opacity 0.15s; }
.chapter-name-row .chapter-delete-icon:hover { opacity: 1; color: #e74c3c; }
.chapter-item:hover .chapter-delete-icon { display: block; }
.chapter-item.active .chapter-delete-icon { opacity: 0.9; }
.chapter-name-input { font-size: 13px; font-weight: 500; color: var(--color-ink); border: 1px solid var(--color-primary); border-radius: 4px; padding: 2px 6px; background: var(--color-surface); outline: none; font-family: inherit; min-width: 60px; box-sizing: border-box; }
.chapter-meta { font-size: 11px; color: var(--icon-color); margin-top: 0; display: flex; align-items: center; gap: 6px; }
.chapter-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--icon-color); }

/* v8.11: document 类型书根节点 + H2 自动章节子节点 — 与理解层卡片统一 */
.chapter-item.chapter-doc {
    background: linear-gradient(135deg, rgba(181, 86, 59, 0.10), rgba(181, 86, 59, 0.02));
}
.chapter-item.chapter-doc .chapter-name { font-weight: 700; font-size: 14px; }
.chapter-item.chapter-doc .chapter-meta { color: var(--color-primary); font-weight: 500; }
.chapter-doc-children { margin: 8px 0 6px 0; padding-left: 0; display: flex; flex-direction: column; gap: 6px; }
.chapter-item.chapter-h2 {
    padding: 8px 12px 8px 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
}
.chapter-item.chapter-h2 .chapter-status {
    background: transparent;
    color: var(--icon-color);
    width: 22px; height: 22px;
}
.chapter-item.chapter-h2 .chapter-status svg { width: 12px; height: 12px; }
.chapter-item.chapter-h2 .chapter-name { font-weight: 500; font-size: 13px; color: var(--color-ink-light); }
.chapter-item.chapter-h2 .chapter-meta { font-size: 10.5px; }
.chapter-item.chapter-h2:hover { background: var(--tint-06); transform: none; box-shadow: none; }
.chapter-item.chapter-h2.parent-active { background: var(--tint-08); }
.chapter-item.chapter-h2.parent-active .chapter-name { color: var(--color-primary); }

/* 多级标题：H3 / H4 缩进子节点 */
.chapter-heading-children { margin: 4px 0; display: flex; flex-direction: column; gap: 4px; }
.chapter-item.chapter-h3 {
    padding: 6px 12px 6px 42px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
}
.chapter-item.chapter-h3 .chapter-status {
    width: 18px; height: 18px; min-width: 18px;
    background: transparent;
    color: var(--icon-color);
}
.chapter-item.chapter-h3 .chapter-status svg { width: 10px; height: 10px; }
.chapter-item.chapter-h3 .chapter-name { font-weight: 400; font-size: 12px; color: var(--color-ink-light); }
.chapter-item.chapter-h3 .chapter-meta { font-size: 10.5px; }
.chapter-item.chapter-h3:hover { background: var(--tint-05); transform: none; box-shadow: none; }
.chapter-item.chapter-h3.parent-active { background: var(--tint-07); }
.chapter-item.chapter-h3.parent-active .chapter-name { color: var(--color-primary); }

.chapter-item.chapter-h4 {
    padding: 5px 12px 5px 56px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
}
.chapter-item.chapter-h4 .chapter-status {
    width: 16px; height: 16px; min-width: 16px;
    background: transparent;
    color: var(--color-ink-lighter);
}
.chapter-item.chapter-h4 .chapter-status svg { width: 9px; height: 9px; }
.chapter-item.chapter-h4 .chapter-name { font-weight: 400; font-size: 11.5px; color: var(--color-ink-lighter); }
.chapter-item.chapter-h4 .chapter-meta { font-size: 10px; }
.chapter-item.chapter-h4:hover { background: var(--tint-04); transform: none; box-shadow: none; }
.chapter-item.chapter-h4.parent-active { background: var(--tint-06); }
.chapter-item.chapter-h4.parent-active .chapter-name { color: var(--color-primary); }

/* 子级 status 图标统一 */
.chapter-item .chapter-status.h-sub {
    background: transparent;
    color: var(--icon-color);
}

/* 目录底部 */
/* v7.80: 目录树中的待整理项 */
.pending-outline-item {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 28px; margin: 2px 0;
    border-radius: 6px; cursor: pointer;
    font-size: 0.78em; color: var(--color-ink-lighter);
    transition: all 0.15s;
}
.pending-outline-item:hover {
    background: var(--tint-06); color: var(--color-primary);
}
.pending-outline-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-primary); opacity: 0.5; flex-shrink: 0;
}
.pending-outline-text {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pending-outline-tag {
    font-size: 0.75em; padding: 1px 6px; border-radius: 8px;
    background: var(--tint-08); color: var(--color-primary); flex-shrink: 0;
    white-space: nowrap;
}
/* 未分配/独立待整理项 */
.pending-outline-item.standalone {
    padding-left: 14px; cursor: default;
}
.pending-group .group-icon {
    font-size: 0.9em; opacity: 0.6;
}

.outline-footer {
    padding: 10px 14px; border-top: 1px solid var(--color-border-light);
    display: flex; justify-content: space-between; font-size: 11px;
    color: var(--icon-color); background: var(--color-panel-bg);
    position: sticky; bottom: 0; z-index: 5;
    flex-shrink: 0;
}
.outline-footer strong { color: var(--color-ink-light); font-weight: 600; }

/* 目录空状态 */
/* === 统一空状态：目录正文 / 资料(照片/文档) / 线索库 / 理解层(时间线/人物/记忆/洞察) === */
.outline-empty, .materials-empty, .extract-empty {
    text-align: center; padding: 40px 14px; color: var(--icon-color); font-size: 13px;
    display: flex; flex-direction: column; align-items: center;
}
.outline-empty-hint, .extract-empty-hint { font-size: 12px; color: var(--icon-color); opacity: 0.7; margin-top: 6px; }

/* 资料面板 — v8.06: mat-filter-bar 已废弃（照片/文档分顶级分支） */
.mat-filter-bar { display: none; }

/* ============================================================
 * v8.11: 照片/文档树 — 与理解层卡片风格统一
 * ============================================================ */
.materials-tree { overflow-y: auto; padding: 6px 0 8px; display: flex; flex-direction: column; gap: 8px; }
#photos-list.materials-tree {
    border-left: 3px solid #2E86C1;
    padding-left: 10px;
    margin-left: 4px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
#photos-list.materials-tree.is-empty { border-left-color: transparent; padding: 0 0 8px 0; margin-left: 0; }
#docs-list.materials-tree {
    border-left: 3px solid #5D6D7E;
    padding-left: 10px;
    margin-left: 4px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
#docs-list.materials-tree.is-empty { border-left-color: transparent; padding: 0 0 8px 0; margin-left: 0; }

/* 树内文件叶子节点容器 */
.mat-tree-children {
    padding: 2px 0 6px 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 单个文件叶子节点 — 与 und-char-card / und-memory-card 风格一致 */
.mat-tree-leaf {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* 照片 — 蓝色系 */
.mat-tree-leaf.mat-leaf-type-photo {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.08), rgba(52, 152, 219, 0.02));
}
.mat-tree-leaf.mat-leaf-type-photo:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.12);
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.12), rgba(52, 152, 219, 0.04));
}

/* 文档 — 青灰系 */
.mat-tree-leaf.mat-leaf-type-doc {
    background: linear-gradient(135deg, rgba(93, 109, 126, 0.08), rgba(93, 109, 126, 0.02));
}
.mat-tree-leaf.mat-leaf-type-doc:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(93, 109, 126, 0.12);
    background: linear-gradient(135deg, rgba(93, 109, 126, 0.12), rgba(93, 109, 126, 0.04));
}

/* 视频 — 紫红系 */
.mat-tree-leaf.mat-leaf-type-video {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.08), rgba(155, 89, 182, 0.02));
}
.mat-tree-leaf.mat-leaf-type-video:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.12);
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.12), rgba(155, 89, 182, 0.04));
}

/* 圆形彩色图标容器 — 与 und-char-avatar / und-memory-icon 一致 */
.mat-leaf-icon-circle {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.mat-leaf-icon-circle svg { width: 16px; height: 16px; }
.mat-leaf-photo { color: #2E86C1; background: rgba(52, 152, 219, 0.12); }
.mat-leaf-doc { color: #5D6D7E; background: rgba(93, 109, 126, 0.12); }
.mat-leaf-video { color: #8E44AD; background: rgba(155, 89, 182, 0.12); }

/* 缩略图预览 (v8.14) — 照片/视频用真实缩略图替代圆形图标 */
.mat-leaf-thumb {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden;
    position: relative; cursor: pointer;
    background: var(--tint-06);
    border: 1px solid var(--border-light, rgba(0,0,0,0.06));
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mat-leaf-thumb img,
.mat-leaf-thumb video {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.mat-leaf-thumb:hover {
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1;
}
/* 视频播放按钮覆盖层 */
.mat-leaf-thumb-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.mat-leaf-thumb-play svg { width: 22px; height: 22px; color: rgba(255,255,255,0.9); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
/* 缩略图加载失败回退 */
.mat-leaf-thumb.thumb-failed {
    display: flex; align-items: center; justify-content: center;
}

/* ===== 媒体预览弹窗 (v8.14) ===== */
.media-preview-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.82);
    z-index: 10000;
    display: none;
    align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.media-preview-overlay.active { display: flex; }
.media-preview-body {
    display: flex; align-items: center; justify-content: center;
    max-width: 90vw; max-height: 85vh;
}
.media-preview-body img,
.media-preview-body video {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.media-preview-close {
    position: fixed; top: 20px; right: 24px;
    width: 40px; height: 40px;
    border: none; background: rgba(255,255,255,0.15);
    color: #fff; border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.15s;
    z-index: 10001;
}
.media-preview-close:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); }
.media-preview-close svg { width: 20px; height: 20px; }

/* 文件名 + 元数据 */
.mat-leaf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mat-leaf-name {
    font-size: 14px; font-weight: 600; color: var(--color-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
}
.mat-leaf-meta {
    font-size: 11px; color: var(--icon-color);
    white-space: nowrap;
}

/* 已引用/已提炼/线索标签 */
.mat-ref-tag {
    font-size: 10px; color: var(--color-primary); background: var(--color-primary-bg);
    padding: 1px 5px; border-radius: 4px; flex-shrink: 0;
}
.mat-clue-badge {
    font-size: 10px; color: var(--color-accent, #B85450);
    background: var(--tint-08, rgba(184,84,80,0.08));
    padding: 1px 5px; border-radius: 4px; cursor: pointer;
    flex-shrink: 0; transition: opacity 0.15s;
    opacity: 0; display: inline-flex; align-items: center; gap: 2px;
}
.mat-clue-badge svg { width: 11px; height: 11px; }
.mat-tree-leaf:hover .mat-clue-badge { opacity: 1; }

/* 叶子节点操作按钮组 */
.mat-leaf-actions {
    display: flex; align-items: center; gap: 1px;
    flex-shrink: 0; opacity: 0;
    transition: opacity 0.15s;
}
.mat-tree-leaf:hover .mat-leaf-actions { opacity: 1; }
.mat-leaf-btn {
    width: 22px; height: 22px; border: none; background: transparent;
    cursor: pointer; color: var(--icon-color);
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; transition: all 0.15s; padding: 0;
}
.mat-leaf-btn:hover { background: var(--tint-08); color: var(--color-ink-dark); }
.mat-leaf-btn.mat-leaf-del:hover { background: var(--color-danger-bg, #fef0f0); color: var(--color-danger, #e54848); }

/* --- 向下兼容：保留旧的 mat-item/materials-group 样式（右栏文件列表等可能引用） --- */
.materials-group { margin-bottom: 4px; }
.materials-group-header {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    transition: background 0.15s; user-select: none;
}
.materials-group-header:hover { background: var(--tint-06); }
.materials-group-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--color-ink); }
.materials-group-count { font-size: 11px; color: var(--icon-color); background: var(--color-chat-bg); padding: 2px 6px; border-radius: 6px; }
.materials-children { padding: 4px 6px 6px 28px; display: flex; flex-direction: column; gap: 2px; }
.materials-children.collapsed { display: none; }
.mat-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 8px; cursor: pointer;
    transition: background 0.15s;
}
.mat-item:hover { background: var(--tint-06); }
.mat-item-thumb {
    width: 40px; height: 40px; border-radius: 6px;
    flex-shrink: 0; overflow: hidden;
    border: 1px solid var(--color-border-light);
    background: var(--color-card);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.mat-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mat-item-thumb.doc {
    background: var(--color-primary-bg); color: var(--color-primary);
    border-color: var(--tint-15);
}
.mat-item-icon { width: 20px; height: 20px; }
.mat-item-ext {
    position: absolute; bottom: 1px; right: 2px;
    font-size: 8px; font-weight: 700; line-height: 1;
    color: var(--color-primary-dark); background: rgba(255,255,255,0.85);
    padding: 1px 3px; border-radius: 3px;
}
.mat-item-info { flex: 1; min-width: 0; }
.mat-item-name {
    font-size: 13px; font-weight: 500; color: var(--color-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
}
.mat-item-meta {
    font-size: 11px; color: var(--icon-color); line-height: 1.4;
    margin-top: 1px;
}
.mat-item-del {
    flex-shrink: 0; width: 24px; height: 24px;
    border: none; background: transparent; cursor: pointer;
    color: var(--icon-color); opacity: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: all 0.15s;
    padding: 0;
}
.mat-item:hover .mat-item-del { opacity: 1; }
.mat-item-del:hover { background: var(--color-danger-bg, #fef0f0); color: var(--color-danger, #e54848); }
.mat-item-actions {
    display: flex; align-items: center; gap: 2px;
    flex-shrink: 0; opacity: 0;
    transition: opacity 0.15s;
}
.mat-item:hover .mat-item-actions { opacity: 1; }
.mat-action-btn {
    width: 24px; height: 24px;
    border: none; background: transparent; cursor: pointer;
    color: var(--icon-color);
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: all 0.15s;
    padding: 0;
}
.mat-action-btn:hover { background: var(--tint-06); color: var(--color-accent, #B85450); }
/* v7.97: 主操作按钮始终可见，次要按钮 hover 才显示 */
.mat-action-primary { opacity: 1 !important; }
.mat-action-more { opacity: 0; transition: opacity 0.15s; }
.mat-item:hover .mat-action-more { opacity: 0.6; }
.mat-action-more:hover { opacity: 1 !important; }
.mat-ref-tag {
    display: inline-block;
    font-size: 10px; font-weight: 600;
    color: var(--color-accent, #B85450);
    background: rgba(184, 84, 80, 0.1);
    padding: 1px 5px; border-radius: 4px;
    margin-left: 4px;
}
.mat-ref-tag.done {
    color: var(--color-success, #7D8B6A);
    background: rgba(125, 139, 106, 0.1);
}
.mat-clue-badge {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 10px; font-weight: 600;
    color: var(--color-primary);
    background: var(--tint-06);
    padding: 1px 6px; border-radius: 4px;
    cursor: pointer; margin-left: 4px;
}
.mat-clue-badge:hover { background: var(--color-primary); color: #fff; }
.material-empty-mini { text-align: center; padding: 16px 8px; color: var(--icon-color); font-size: 12px; }

/* ============================================================
   中栏：引导写作
   ============================================================ */
.guide-pane {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    background: var(--color-bg); overflow: hidden;
}
.guide-header {
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--color-border-light);
    display: flex; align-items: center; justify-content: space-between;
}
.guide-chapter-title {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-content); font-size: 17px; font-weight: 600; color: var(--color-ink);
}
.chapter-badge {
    font-family: var(--font-ui); font-size: 11px; font-weight: 600;
    color: var(--color-primary-dark); background: var(--tint-12);
    padding: 2px 8px; border-radius: 8px;
}
.guide-progress { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-ink-light); }
.progress-bar { width: 60px; height: 4px; background: var(--color-border-light); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-primary); border-radius: 2px; transition: width 0.4s ease; }

.guide-scroll { flex: 1; overflow-y: auto; padding: 20px; }
.guide-content { max-width: 640px; margin: 0 auto; }

/* 聊天消息在 guide-scroll 内部 */
.guide-scroll .chat-messages {
    max-width: 100%; margin: 0; width: 100%;
    display: flex; flex-direction: column; gap: 16px;
    padding-bottom: 8px;
}
.guide-scroll .chat-welcome {
    flex: none; padding: 20px 0;
}

/* ============================================================
   中栏：引导写作场景卡片（章节导读 / 继续提示 / AI引导 / 用户回答 / 追问 / 生成段落）
   ============================================================ */

/* 章节导读卡 */
.chapter-intro {
    background: linear-gradient(135deg, #FFFDF8, #FDF6EC);
    border: 1px solid var(--tint-20);
    border-radius: 14px; padding: 24px; margin-bottom: 16px;
}
.intro-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--color-primary-dark);
    font-weight: 600; margin-bottom: 12px;
}
.intro-label svg { width: 14px; height: 14px; color: var(--color-primary); }
.intro-title {
    font-family: var(--font-content);
    font-size: 18px; font-weight: 600;
    color: var(--color-ink); margin-bottom: 10px;
}
.intro-desc {
    font-family: var(--font-content);
    font-size: 15px; line-height: 1.75; color: var(--color-ink-light);
    margin-bottom: 16px;
}
.intro-topics { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.intro-topic {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--color-ink);
    padding: 8px 10px; background: rgba(255,255,255,0.6);
    border: 1px solid var(--tint-15); border-radius: 8px;
}
.intro-topic svg { width: 12px; height: 12px; color: var(--color-primary); }
.intro-start {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border: none; border-radius: 20px;
    background: var(--color-primary); color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: var(--font-ui); transition: all 0.2s;
    box-shadow: 0 2px 8px var(--tint-20);
}
.intro-start:hover { background: var(--color-primary-dark); }
.intro-start svg { width: 14px; height: 14px; }

/* 继续提示卡 */
.continue-hint {
    display: flex; align-items: center; gap: 12px;
    background: var(--color-card);
    border: 1px solid var(--color-border-light);
    border-radius: 14px; padding: 16px 18px; margin-bottom: 16px;
}
.continue-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-primary-bg); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.continue-avatar svg { width: 20px; height: 20px; }
.continue-text { flex: 1; min-width: 0; }
.continue-title { font-size: 14px; font-weight: 600; color: var(--color-ink); margin-bottom: 2px; }
.continue-desc { font-size: 13px; color: var(--color-ink-light); line-height: 1.5; }
.continue-btn {
    padding: 8px 16px; border: 1px solid var(--color-primary);
    border-radius: 18px; background: var(--color-primary-bg);
    color: var(--color-primary-dark); font-size: 13px;
    font-weight: 600; cursor: pointer; font-family: var(--font-ui);
    transition: all 0.2s; white-space: nowrap;
}
.continue-btn:hover { background: var(--color-primary); color: #fff; }

/* AI引导卡片 */
.guide-card {
    background: var(--color-card);
    border: 1px solid var(--color-border-light);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 14px;
}
.guide-card.ai-prompt { border-left: 3px solid var(--color-primary); }
.prompt-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--color-primary-dark);
    font-weight: 600; margin-bottom: 10px;
}
.prompt-label svg { width: 14px; height: 14px; color: var(--color-primary); }
.prompt-text {
    font-family: var(--font-content);
    font-size: 16px; line-height: 1.7; color: var(--color-ink);
}
.prompt-hint {
    font-size: 12px; color: var(--icon-color);
    margin-top: 10px; line-height: 1.5;
}

/* 用户回答 */
.user-response {
    background: var(--color-bubble-user);
    border-radius: 14px; padding: 16px 18px;
    margin: 0 0 14px 24px;
}
.response-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--color-primary-dark);
    font-weight: 600; margin-bottom: 8px;
}
.response-text {
    font-family: var(--font-content);
    font-size: 15px; line-height: 1.75; color: var(--color-ink);
}
.response-attachment { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.attachment-chip {
    display: flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--tint-20);
    border-radius: 8px; padding: 4px 8px;
    font-size: 11px; color: var(--color-ink-light);
}
.attachment-chip svg { width: 12px; height: 12px; color: var(--color-primary); }

/* AI追问 */
.ai-followup {
    background: #F0F7F0; border: 1px solid #C8DCC8;
    border-left: 3px solid var(--color-success);
    border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
}
.followup-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--color-success);
    font-weight: 600; margin-bottom: 8px;
}
.followup-label svg { width: 14px; height: 14px; }
.followup-text {
    font-family: var(--font-content);
    font-size: 15px; line-height: 1.7; color: var(--color-ink);
}
.followup-hint { font-size: 11px; color: var(--icon-color); margin-top: 6px; }

/* AI生成段落 */
.generated-section {
    background: linear-gradient(135deg, #FFFDF8, #FDF6EC);
    border: 1px solid var(--tint-20);
    border-radius: 14px; padding: 18px 20px;
}
.generated-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--color-primary-dark);
    font-weight: 600; margin-bottom: 10px;
}
.generated-label svg { width: 14px; height: 14px; color: var(--color-primary); }
.generated-text {
    font-family: var(--font-content);
    font-size: 15px; line-height: 1.85; color: var(--color-ink);
}
.generated-text p { text-indent: 2em; margin-bottom: 8px; }
.generated-actions {
    display: flex; gap: 8px; margin-top: 14px;
    padding-top: 12px; border-top: 1px solid var(--tint-15);
}
.gen-action {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 14px; border: 1px solid var(--color-border);
    border-radius: 8px; background: var(--color-card);
    font-size: 13px; color: var(--color-ink-light);
    cursor: pointer; transition: all 0.2s; font-family: var(--font-ui);
}
.gen-action:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.gen-action.accept {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.gen-action svg { width: 13px; height: 13px; }

/* ============================================================
   右栏：成稿预览 — book-page 布局
   ============================================================ */
.book-page {
    background: var(--color-card); border-radius: 10px;
    padding: 16px 18px; margin-bottom: 10px;
    border: 1px solid var(--color-border-light);
    transition: box-shadow 0.2s; position: relative;
}
.book-page:hover { box-shadow: 0 2px 12px var(--tint-08); }
.book-page-title {
    font-family: var(--font-content);
    font-size: 14px; font-weight: 600; color: var(--color-ink);
    margin-bottom: 8px;
    display: flex; align-items: center; justify-content: space-between;
}
.book-page-text {
    font-family: var(--font-content);
    font-size: 13px; line-height: 1.8; color: var(--color-ink-light);
}
.book-page-text p { text-indent: 2em; margin-bottom: 6px; }
.book-page.empty {
    background: var(--color-card);
    border: 1px dashed var(--color-border);
}
.book-page.empty .book-page-title { color: var(--icon-color); }
.book-page.empty .empty-illustration { text-align: center; padding: 16px 0 8px; }
.book-page.empty .empty-illustration svg {
    width: 32px; height: 32px; color: var(--color-border); margin-bottom: 6px;
}
.book-page.empty .empty-text {
    font-family: var(--font-content);
    font-size: 13px; color: var(--icon-color);
    font-style: italic; line-height: 1.6; text-align: center;
}
.book-page.empty .empty-hint {
    font-size: 11px; color: var(--icon-color);
    margin-top: 4px; text-align: center;
}
.book-photo-inline {
    margin: 8px 0; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--color-border-light);
}
.book-photo-inline img { width: 100%; display: block; }
.book-photo-caption {
    font-size: 11px; color: var(--icon-color);
    padding: 4px 8px; background: var(--color-chat-bg);
    text-align: center; font-style: italic;
}
.edit-icon {
    opacity: 0; transition: opacity 0.2s;
    color: var(--color-primary); cursor: pointer;
}
.book-page:hover .edit-icon { opacity: 1; }

/* ============================================================
   输入区（模式切换前置 + 语音模块）
   ============================================================ */
.guide-input-area {
    border-top: 1px solid var(--color-border-light);
    padding: 10px 20px 14px; background: var(--color-bg);
}
.guide-input-inner { max-width: 640px; margin: 0 auto; }

/* v8.32: 语境化「整理成稿」建议条（聊够素材后浮现，可关闭） */
.draft-suggestion {
    display: flex; align-items: center; gap: 10px;
    max-width: 640px; margin: 0 auto 8px; padding: 8px 14px;
    background: linear-gradient(90deg, var(--color-primary-bg), rgba(255,255,255,0.5));
    border: 1px solid var(--color-primary-light);
    border-radius: 14px; font-size: 13px; color: var(--color-ink);
}
.draft-suggestion-text { flex: 1; min-width: 0; }
.draft-suggestion-btn {
    border: none; background: var(--color-primary); color: #fff;
    padding: 5px 14px; border-radius: 14px; cursor: pointer;
    font-size: 13px; white-space: nowrap; font-family: var(--font-ui);
}
.draft-suggestion-btn:hover { filter: brightness(1.06); }
.draft-suggestion-close {
    border: none; background: transparent; color: var(--color-ink-lighter);
    cursor: pointer; font-size: 14px; padding: 2px 6px; line-height: 1;
}
.draft-suggestion-close:hover { color: var(--color-ink); }


/* === v8.21: 示例书预览浮层 === */
.sample-preview-overlay {
    position: fixed; inset: 0; z-index: 1500;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.25s;
    pointer-events: none;
}
.sample-preview-overlay.open { opacity: 1; pointer-events: auto; }
.sample-preview-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.45);
}
.sample-preview-dialog {
    position: relative; z-index: 1;
    width: 620px; max-width: 94vw; max-height: 88vh;
    background: linear-gradient(180deg, #FFFBF5 0%, #FFF8F0 100%);
    border-radius: 16px; box-shadow: 0 12px 48px rgba(61,43,31,0.18);
    overflow-y: auto; padding: 36px 40px 28px;
    transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.sample-preview-overlay.open .sample-preview-dialog { transform: translateY(0); }
.sample-preview-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-ink-light); transition: all 0.15s;
}
.sample-preview-close:hover { background: var(--color-border); color: var(--color-ink); }

/* 封面 */
.sp-cover {
    text-align: center; padding: 32px 0 28px;
    border-bottom: 1px dashed var(--color-border);
    margin-bottom: 24px;
}
.sp-cover-top-line, .sp-cover-bottom-line {
    width: 48px; height: 2px; margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}
.sp-cover-top-line { margin-bottom: 16px; }
.sp-cover-bottom-line { margin-top: 20px; }
.sp-cover-badge {
    display: inline-block; padding: 3px 14px; border-radius: 12px;
    background: var(--color-primary-bg); color: var(--color-primary);
    font-size: 12px; font-weight: 600; letter-spacing: 1px;
    margin-bottom: 16px;
}
.sp-cover-title {
    font-size: 26px; font-weight: 800; color: var(--color-ink);
    font-family: var(--font-ui); line-height: 1.4; margin-bottom: 8px;
}
.sp-cover-subtitle {
    font-size: 13px; color: var(--color-ink-light); letter-spacing: 2px;
    margin-bottom: 4px;
}
.sp-cover-ornament {
    font-size: 22px; color: var(--color-primary-light);
    margin: 12px 0 8px;
}
/* 目录 & 正文 */
.sp-section {
    margin-bottom: 20px;
}
.sp-section-head {
    font-size: 14px; font-weight: 700; color: var(--color-ink);
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}
.sp-toc { padding: 0 8px; }
.sp-toc-item {
    display: flex; align-items: baseline; gap: 12px;
    padding: 7px 0; font-size: 14px; border-bottom: 1px dotted var(--color-border-light);
}
.sp-toc-item:last-child { border-bottom: none; }
.sp-toc-num {
    font-size: 13px; font-weight: 700; color: var(--color-primary);
    min-width: 24px; text-align: right;
}
.sp-toc-title { color: var(--color-ink); }
.sp-content-preview {
    font-size: 14px; line-height: 2; color: var(--color-ink);
    white-space: pre-wrap; padding: 0 4px;
}
.sp-chapter-block {
    margin-bottom: 20px;
}
.sp-chapter-block:last-child { margin-bottom: 0; }
.sp-chapter-title {
    font-size: 16px; font-weight: 700; color: var(--color-ink);
    margin-bottom: 8px; padding-left: 4px;
    border-left: 3px solid var(--color-primary);
}
.sp-chapter-body {
    font-size: 14px; line-height: 2; color: var(--color-ink);
    white-space: normal;
}
.sp-chapter-body img, .sp-chapter-body .draft-photo img {
    display: block; max-width: 100%; height: auto; margin: 12px auto; border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.sp-chapter-body .draft-photo.illustration-inserted img { max-width: 56%; }
@media (max-width: 640px) {
    .draft-photo.illustration-inserted img { max-width: 88%; }
}
.draft-photo-caption {
    text-align: center; font-size: 12px; color: #9a8b7a; margin: -6px 0 10px;
}
/* 章节正文/编辑区插图 */
.draft-photo { text-align: center; margin: 14px 0; }
.draft-photo img {
    max-width: 100%; height: auto; border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.draft-photo.illustration-inserted img { max-width: 56%; }
@media (max-width: 640px) {
    .draft-photo.illustration-inserted img { max-width: 88%; }
}
.draft-photo-caption {
    font-size: 12px; color: #9a8b7a; margin-top: 6px; text-align: center;
}
/* 底部 */
.sp-footer {
    display: flex; gap: 12px; justify-content: center; margin-top: 28px;
    padding-top: 20px; border-top: 1px solid var(--color-border);
}
.sp-btn-primary, .sp-btn-secondary {
    padding: 10px 22px; border-radius: 24px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.15s; font-family: var(--font-ui);
    border: none;
}
.sp-btn-primary {
    background: var(--color-primary); color: #FFF;
}
.sp-btn-primary:hover { background: var(--color-primary-dark); }
.sp-btn-secondary {
    background: var(--color-card); color: var(--color-ink-light);
    border: 1px solid var(--color-border);
}
.sp-btn-secondary:hover { border-color: var(--color-primary); color: var(--color-ink); }

@media (max-width: 640px) {
    .sample-preview-dialog { max-width: 98vw; max-height: 94vh; padding: 28px 20px 20px; border-radius: 12px; }
    .sp-cover-title { font-size: 22px; }
    .sp-footer { flex-direction: column; gap: 8px; }
    .sp-btn-primary, .sp-btn-secondary { width: 100%; text-align: center; }
}

/* 第一行：模式切换 + 提示语 */
.input-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }

/* 模式分段控件 */
.mode-segment {
    display: inline-flex; gap: 2px;
    background: var(--color-chat-bg); border-radius: 8px; padding: 2px; flex-shrink: 0;
}
.mode-seg-btn {
    padding: 4px 14px; border: none; background: transparent;
    font-size: 12px; color: var(--icon-color); cursor: pointer;
    border-radius: 6px; transition: all 0.2s; font-family: var(--font-ui);
    display: flex; align-items: center; gap: 4px;
}
.mode-seg-btn:hover { color: var(--icon-color-hover); }
.mode-seg-btn.active { background: var(--color-primary); color: #fff; box-shadow: 0 1px 3px var(--tint-25); font-weight: 600; }
.mode-seg-btn.active svg { color: #fff; }
.mode-seg-btn svg { width: 14px; height: 14px; }

/* 提示语 */
.guide-input-label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--icon-color); flex: 1; min-width: 0; }
.guide-input-label svg { width: 14px; height: 14px; flex-shrink: 0; }

/* 输入模式（倾听/访谈/聊天） */
.input-modes { display: flex; align-items: center; gap: 4px; }
.mode-pill {
    padding: 4px 12px; border: none; background: transparent;
    font-size: 12px; color: var(--icon-color); cursor: pointer;
    border-radius: 16px; transition: all 0.2s; font-family: var(--font-ui);
}
.mode-pill:hover { background: var(--color-chat-bg); }
.mode-pill.active { background: var(--tint-15); color: var(--color-primary-dark); font-weight: 600; }

/* === 统一胶囊容器 === */
.input-capsule {
    display: flex; align-items: center; gap: 4px;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: 24px; padding: 4px 4px 4px 8px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-height: 44px;
}
.input-capsule:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--tint-08); }
.input-capsule.voice-mode { border-color: var(--tint-30); background: var(--color-primary-bg); }
.input-capsule.recording { border-color: var(--color-danger); background: rgba(217,79,79,0.04); box-shadow: 0 0 0 3px rgba(217,79,79,0.08); }

/* 胶囊内按钮 */
.capsule-btn {
    width: 32px; height: 32px; border: none; background: transparent;
    border-radius: 50%; cursor: pointer; color: var(--icon-color);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
}
.capsule-btn:hover { background: var(--color-chat-bg); color: var(--icon-color-hover); }
.capsule-btn.has-badge { position: relative; }
.capsule-btn .upload-badge {
    position: absolute; top: -2px; right: -2px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--color-primary); color: #fff;
    font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* 文字模式 textarea */
.capsule-textarea {
    flex: 1; border: none; outline: none; resize: none;
    font-family: var(--font-ui); font-size: 15px; line-height: 1.5;
    color: var(--color-ink); background: transparent;
    padding: 8px 4px; max-height: 120px;
}
.capsule-textarea::placeholder { color: var(--icon-color); }

/* === 语音模式 === */
.capsule-voice-zone {
    flex: 1; display: none; align-items: center; gap: 10px;
    padding: 4px 4px; cursor: pointer; user-select: none; min-height: 36px;
}
.capsule-voice-zone.active { display: flex; }
.voice-mic-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s; box-shadow: 0 2px 8px var(--tint-25);
}
.voice-mic-btn svg { width: 20px; height: 20px; stroke-width: 2; }
.capsule-voice-zone.recording .voice-mic-btn {
    background: var(--color-danger); box-shadow: 0 2px 8px rgba(217,79,79,0.3);
    animation: voice-pulse 1.4s ease-in-out infinite;
}
@keyframes voice-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.voice-mic-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.voice-mic-text { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.capsule-voice-zone.recording .voice-mic-text { color: var(--color-danger); }
.voice-mic-sub { font-size: 11px; color: var(--icon-color); }
.voice-mic-timer {
    font-size: 15px; color: var(--color-danger); font-weight: 700;
    font-variant-numeric: tabular-nums; display: none; flex-shrink: 0; padding-right: 4px;
}
.capsule-voice-zone.recording .voice-mic-timer { display: flex; }
.capsule-voice-zone.recording .voice-mic-sub { display: none; }

/* 语音转写中 */
.capsule-transcribing { flex: 1; display: none; align-items: center; gap: 10px; padding: 4px 4px; }
.capsule-transcribing.active { display: flex; }
.transcribing-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-primary-bg); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.transcribing-icon svg { width: 20px; height: 20px; }
.transcribing-info { flex: 1; min-width: 0; }
.transcribing-label {
    font-size: 14px; font-weight: 600; color: var(--color-ink); margin-bottom: 4px;
    display: flex; align-items: center; gap: 6px;
}
.transcribing-dots { display: inline-flex; gap: 3px; }
.transcribing-dots span {
    width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary);
    animation: blink 1.2s ease-in-out infinite;
}
.transcribing-dots span:nth-child(2) { animation-delay: 0.2s; }
.transcribing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.transcribing-bar { height: 3px; background: var(--color-border-light); border-radius: 2px; overflow: hidden; max-width: 180px; }
.transcribing-bar-fill {
    height: 100%; width: 60%; background: var(--color-primary); border-radius: 2px;
    animation: transcribe-progress 1.5s ease-in-out infinite;
}
@keyframes transcribe-progress { 0%, 100% { width: 20%; } 50% { width: 80%; } }

/* 发送按钮 */
.capsule-send { background: var(--color-border-light); color: var(--icon-color); }
.capsule-send:not(.disabled) { background: var(--color-primary); color: #fff; box-shadow: 0 1px 4px var(--tint-20); }
.capsule-send.disabled { cursor: not-allowed; opacity: 0.5; }

/* 语音底部提示 */
.voice-sub-hint { display: none; font-size: 11px; color: var(--icon-color); text-align: center; margin-top: 6px; }
.voice-sub-hint.active { display: block; }

/* ============================================================
   右栏：成稿预览
   ============================================================ */
.preview-pane {
    width: 340px; flex-shrink: 0;
    background: var(--color-panel-bg);
    border-left: 1px solid var(--color-border);
    display: flex; flex-direction: column; overflow: hidden;
}
.preview-header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--color-border-light);
    display: flex; align-items: center; justify-content: space-between;
}
.preview-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: var(--color-ink);
}
.preview-title svg { color: var(--color-primary); }
.preview-actions { display: flex; align-items: center; gap: 2px; }
.preview-action {
    display: flex; align-items: center; gap: 3px;
    padding: 4px 8px; border: none; background: transparent;
    font-size: 12px; color: var(--icon-color); cursor: pointer;
    border-radius: 6px; font-family: var(--font-ui); transition: all 0.2s;
}
.preview-action:hover { color: var(--color-primary-dark); background: var(--color-chat-bg); }
.preview-action svg { color: var(--icon-color); }

.preview-scroll { flex: 1; overflow-y: auto; padding: 12px; }
.preview-empty {
    text-align: center; padding: 60px 16px; color: var(--icon-color);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.preview-empty-icon { opacity: 0.5; }
.preview-empty-text { font-size: 15px; color: var(--color-ink-light); }
.preview-empty-hint { font-size: 12px; color: var(--icon-color); opacity: 0.7; }
.preview-actions { display: flex; align-items: center; gap: 2px; }

/* 预览中的文章 — book-page 内容样式 */
.preview-scroll .article-view { font-size: 13px; line-height: 1.8; }
.preview-scroll .article-view h1, .preview-scroll .article-view h2 { font-size: 15px; }
.preview-scroll .book-page-text h1,
.preview-scroll .book-page-text h2,
.preview-scroll .book-page-text h3 {
    font-family: var(--font-content);
    font-size: 14px; font-weight: 600; color: var(--color-ink);
    margin: 10px 0 6px; text-indent: 0;
}
.preview-scroll .book-page-text p {
    text-indent: 2em; margin-bottom: 6px;
}
.preview-scroll .book-page-text img {
    max-width: 100%; border-radius: 8px; margin: 8px 0;
}

/* ============================================================
   v7.1 布局重构：成稿编辑区(中栏) + AI对话区(右栏可收起)
   ============================================================ */

/* === 中栏：成稿编辑区（可编辑） === */
.draft-pane {
    flex: 1; min-width: 0;
    background: var(--color-panel-bg);
    display: flex; flex-direction: column; overflow: hidden;
    transition: flex 0.3s ease, opacity 0.25s ease, min-width 0.3s ease;
}

/* 中栏收起状态 */
.draft-pane.collapsed {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    border: none;
}

/* 中栏收起时隐藏两侧分隔线 */
.draft-pane.collapsed ~ .resize-handle-right { display: none; }
.resize-handle-left.draft-hidden { display: none; }
.resize-handle-right.draft-hidden { display: none; }

/* === 可拖拽分隔线 === */
.resize-handle {
    width: 6px; flex-shrink: 0;
    background: transparent;
    cursor: col-resize;
    position: relative;
    z-index: 10;
    transition: background 0.15s ease;
}
.resize-handle::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 2px; height: 32px;
    border-radius: 2px;
    background: var(--color-border);
    transition: background 0.15s, height 0.15s;
}
.resize-handle:hover::before,
.resize-handle.dragging::before {
    background: var(--color-primary);
    height: 48px;
}
.resize-handle:hover,
.resize-handle.dragging {
    background: var(--tint-06);
}

/* 右侧分隔线在 AI 面板收起时隐藏 */
.ai-pane.collapsed ~ .resize-handle-right,
.resize-handle-right.hidden {
    display: none;
}

/* 拖拽中禁止文字选区 */
body.resizing {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
body.resizing * {
    cursor: col-resize !important;
    user-select: none !important;
    pointer-events: none !important;
}
body.resizing .resize-handle {
    pointer-events: auto !important;
}

/* 章节条：横向章节导航 */
.chapter-strip-bar {
    display: flex; align-items: center;
    padding: 0 12px;
    background: var(--color-panel-bg);
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0; z-index: 20;
}
.chapter-strip-scroll {
    display: flex; align-items: center; gap: 2px;
    overflow-x: auto; scrollbar-width: none;
    flex: 1; padding: 3px 0;
}
.chapter-strip-scroll::-webkit-scrollbar { display: none; }
.chap-tab {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px; font-weight: 500;
    color: var(--color-ink-light);
    cursor: pointer; white-space: nowrap;
    transition: all 0.15s;
    background: transparent;
    max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.chap-tab:hover { background: var(--tint-06); color: var(--color-ink); }
.chap-tab.active {
    color: var(--color-accent, #B85450);
    background: var(--tint-08, rgba(184,84,80,0.08));
    font-weight: 600;
}
.chap-tab-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--color-success, #7D8B6A);
    flex-shrink: 0;
}
.chap-tab-name { overflow: hidden; text-overflow: ellipsis; }

.draft-header {
    position: sticky; top: 0; z-index: 20;
    padding: 8px 20px;
    background: var(--color-panel-bg);
    border-bottom: 1px solid var(--color-border-light);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    flex-shrink: 0;
}
.draft-title-row {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-content); font-size: 15px; font-weight: 600; color: var(--color-ink);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
}
.draft-type-prefix {
    font-size: 11px; font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-bg);
    padding: 2px 7px; border-radius: 4px;
    flex-shrink: 0; line-height: 1.4;
    letter-spacing: 0.3px;
}
.draft-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}
.draft-action {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 10px; border: none; border-radius: 6px;
    background: transparent;
    font-size: 12px; color: var(--color-ink-light); cursor: pointer;
    font-family: var(--font-ui); transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.draft-action:hover {
    background: rgba(0,0,0,0.06);
    color: var(--color-ink);
}
.draft-action.active,
.draft-action.active:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
}
.draft-action.active svg,
.draft-action.active:hover svg { color: var(--color-primary); }
.draft-action svg { color: var(--icon-color); }
.draft-action:hover svg { color: var(--color-ink-dark); }

/* 禁用状态按钮（语音输入等暂不实现功能） */
.draft-action-disabled,
.draft-action-disabled:hover {
    color: var(--icon-color) !important;
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent !important;
}
.draft-action-disabled svg { color: var(--icon-color) !important; opacity: 0.4; }

/* 字数统计 */
.draft-word-count {
    font-family: var(--font-ui); font-size: 11px;
    color: var(--icon-color);
    background: var(--tint-06);
    padding: 2px 8px; border-radius: 10px;
    flex-shrink: 0;
}

/* 中栏操作按钮分隔线 */
.draft-actions-sep {
    width: 1px; height: 18px; background: var(--color-border-light);
    margin: 0 4px; align-self: center;
}

/* 中栏"更多"下拉菜单 */
.draft-more-menu-wrapper {
    position: relative;
}
.draft-more-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 140px;
    background: var(--color-card);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 100;
    padding: 4px;
    overflow: hidden;
}
.draft-more-dropdown.show {
    display: block;
}
.draft-more-dropdown .chat-menu-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border: none; border-radius: 6px;
    background: transparent; cursor: pointer;
    font-size: 13px; color: var(--color-ink); font-family: var(--font-ui);
    width: 100%; text-align: left; transition: background 0.15s;
}
.draft-more-dropdown .chat-menu-item:hover {
    background: var(--tint-05);
}
.draft-more-dropdown .chat-menu-divider {
    height: 1px; background: var(--color-border-light); margin: 4px 8px;
}

/* 中栏关闭/收起按钮 */
.draft-close-btn.panel-btn:hover {
    background: rgba(217, 83, 79, 0.08);
    color: #d9534f;
}
.draft-close-btn.panel-btn:hover svg { color: #d9534f; }
.draft-close-btn.panel-btn svg { color: var(--icon-color); }

.draft-body { flex: 1; overflow-y: auto; padding: 28px 32px; }
.draft-editable {
    max-width: 720px; margin: 0 auto;
    font-family: var(--font-content); font-size: 15px; line-height: 1.9;
    color: var(--color-ink); outline: none;
    min-height: 300px; padding: 8px 4px;
}
.draft-editable:focus { }
.draft-editable:empty::before {
    content: '在此编辑您的回忆录…';
    color: var(--icon-color); opacity: 0.4; pointer-events: none;
}
.draft-editable h1, .draft-editable h2, .draft-editable h3 {
    font-family: var(--font-content); font-weight: 600;
    margin: 18px 0 8px; text-indent: 0; color: var(--color-ink);
}
.draft-editable h1 { font-size: 20px; }
.draft-editable h2 { font-size: 17px; }
.draft-editable h3 { font-size: 15px; }
.draft-editable p { text-indent: 2em; margin-bottom: 8px; }
.draft-editable img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.draft-editable .book-page { background: var(--color-card); border-radius: 12px; padding: 20px 24px; }

/* === 预览窗格：只读排版，模拟打印效果 === */
.draft-preview-pane {
    flex-direction: column;
    background: #fdfaf5;
}
.preview-header-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-card);
    flex-shrink: 0;
}
.preview-title-text {
    font-family: var(--font-content); font-size: 14px; font-weight: 600;
    color: var(--color-ink);
}
.preview-action-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px; border: 1px solid var(--color-border-light);
    border-radius: 6px; background: var(--tint-06);
    font-size: 12px; color: var(--color-ink-light); cursor: pointer;
    font-family: var(--font-ui); transition: background 0.15s;
}
.preview-action-btn:hover {
    background: var(--tint-12);
    color: var(--color-ink);
}
.preview-action-btn svg { color: var(--icon-color); }
.preview-content-scroll {
    flex: 1; overflow-y: auto; padding: 32px 40px;
}
.book-page-text {
    max-width: 680px; margin: 0 auto;
    font-family: var(--font-content); font-size: 16px; line-height: 2;
    color: #3a3226;
}
.book-page-text h1 { font-size: 24px; margin: 24px 0 16px; text-align: center; }
.book-page-text h2 { font-size: 18px; margin: 20px 0 12px; }
.book-page-text h3 { font-size: 16px; margin: 16px 0 10px; }
.book-page-text p { text-indent: 2em; margin-bottom: 12px; }
.book-page-text img { max-width: 100%; border-radius: 8px; margin: 12px 0; }

/* === 全屏编辑模式 === */
.draft-pane.fullscreen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999; width: 100% !important; max-width: none !important;
    border-radius: 0; background: var(--color-panel-bg);
}

/* === 专注模式：隐藏左/右栏 === */
body.focus-mode .outline-pane { display: none !important; }
body.focus-mode .ai-pane { display: none !important; }
body.focus-mode .resize-handle { display: none !important; }
body.focus-mode .draft-pane { width: 100% !important; max-width: 900px; margin: 0 auto; }
/* 点击页面边缘退出专注 */
body.focus-mode::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1; background: transparent; cursor: pointer;
}
body.focus-mode .draft-pane:hover { cursor: default; }

/* === 中栏富文本工具栏（TinyMCE inline 挂点） === */
.draft-inline-toolbar {
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-card);
    min-height: 0;
}
.draft-inline-toolbar:empty { display: none; }
.draft-inline-toolbar .tox-toolbar-overlord,
.draft-inline-toolbar .tox-toolbar__primary { background: transparent; }
.draft-inline-toolbar .tox-toolbar__group {
    border: none !important;
    padding: 2px 4px !important;
}
.draft-inline-toolbar .tox-tbtn {
    border-radius: 6px !important;
    margin: 2px 1px !important;
    color: var(--color-ink-light) !important;
}
.draft-inline-toolbar .tox-tbtn:hover { background: var(--tint-08) !important; }
.draft-inline-toolbar .tox-tbtn--enabled,
.draft-inline-toolbar .tox-tbtn--enabled:hover {
    background: var(--tint-15) !important;
    color: var(--color-primary-dark) !important;
}
.draft-inline-toolbar .tox-tbtn svg { fill: var(--color-ink-light) !important; }
.draft-inline-toolbar .tox-tbtn--enabled svg { fill: var(--color-primary-dark) !important; }
.draft-inline-toolbar .tox-tbtn--select {
    width: auto !important;
    font-size: 12px !important;
}

/* === 选中文字浮动工具栏 === */
.selection-float-toolbar {
    position: fixed;
    z-index: 9500;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 4px 6px;
    box-shadow: 0 8px 28px rgba(61, 43, 31, 0.18), 0 2px 6px rgba(61, 43, 31, 0.08);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.selection-float-toolbar.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.sel-tool-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: none;
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-ink);
    white-space: nowrap;
    transition: background 0.15s;
}
.sel-tool-btn:hover {
    background: var(--color-primary-bg);
}
.sel-tool-btn:active {
    background: var(--color-primary-light);
}
.sel-tool-btn svg {
    color: var(--icon-color);
    flex-shrink: 0;
}
.sel-tool-btn:hover svg {
    color: var(--icon-color-hover);
}
.sel-tool-ai {
    color: var(--color-primary-dark);
    font-weight: 600;
}
.sel-tool-ai svg {
    color: var(--color-primary);
}
.sel-tool-ai:hover {
    background: var(--color-primary-light);
}
.sel-tool-ai:hover svg {
    color: var(--color-primary-dark);
}
.sel-tool-divider {
    width: 1px;
    height: 18px;
    background: var(--color-border-light);
    margin: 0 2px;
    flex-shrink: 0;
}

/* === AI修改确认弹窗 === */
.aicp-overlay {
    display: none !important; /* 非模态：不遮挡页面交互 */
}
.ai-confirm-popover {
    position: fixed;
    z-index: 9600;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-primary-bg);
    border: 1px solid var(--color-primary-light);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 32px rgba(61, 43, 31, 0.16), 0 2px 6px rgba(181, 86, 59, 0.08);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.ai-confirm-popover.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.aicp-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.aicp-close {
    width: 24px; height: 24px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--color-text-muted);
    cursor: pointer; font-size: 14px; line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.aicp-close:hover {
    background: var(--color-bg);
    color: var(--color-ink);
}
.aicp-compare {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.aicp-orig,
.aicp-polished {
    flex: 1;
    min-width: 0;
}
.aicp-label {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.aicp-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text);
    padding: 10px 12px;
    border-radius: 8px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 180px;
    overflow-y: auto;
}
.aicp-orig .aicp-text {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-light);
    text-decoration: line-through;
    text-decoration-color: rgba(181, 86, 59, 0.3);
    text-decoration-thickness: 1px;
    border-radius: 10px;
}
.aicp-polished .aicp-text {
    background: linear-gradient(135deg, var(--color-primary-lightest) 0%, rgba(181, 86, 59, 0.04) 100%);
    border: 1px solid var(--color-primary-light);
    color: var(--color-text);
    font-weight: 500;
    border-radius: 10px;
}
.aicp-arrow {
    display: flex;
    align-items: center;
    padding-top: 28px;
    color: var(--color-primary);
    flex-shrink: 0;
}
.aicp-arrow svg {
    width: 16px;
    height: 16px;
}
.aicp-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.aicp-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}
.aicp-btn svg {
    width: 14px;
    height: 14px;
}
.aicp-cancel {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.aicp-cancel:hover {
    background: var(--color-border-light);
    color: var(--color-text);
}
.aicp-accept {
    background: var(--color-primary);
    color: #fff;
}
.aicp-accept:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(181, 86, 59, 0.3);
}

.ai-placeholder {
    background: var(--color-primary-lightest);
    border-radius: 4px;
    padding: 1px 6px;
    display: inline-block;
    animation: ai-ph-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-ph-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
/* 标记高亮样式 */
mark.selection-highlight {
    background: linear-gradient(180deg, transparent 55%, rgba(181, 86, 59, 0.22) 55%);
    padding: 0 1px;
    border-radius: 2px;
}
/* AI修改中占位闪烁动画 */
@keyframes ai-placeholder-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.ai-placeholder {
    animation: ai-placeholder-pulse 1.2s ease-in-out infinite;
}

/* === 历史版本面板 === */
.version-history-overlay {
    position: fixed; inset: 0;
    background: rgba(61, 43, 31, 0.45);
    z-index: 9998;
    display: flex; align-items: center; justify-content: center;
}
.version-history-panel {
    background: var(--color-bg);
    border-radius: 16px;
    width: 92%; max-width: 960px;
    height: 82vh; max-height: 760px;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(61, 43, 31, 0.25);
    overflow: hidden;
}
.version-history-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-card);
    flex-shrink: 0;
}
.version-history-title {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-content); font-size: 17px; font-weight: 600;
    color: var(--color-ink);
}
.version-history-title svg { color: var(--color-primary); }
.version-history-sub {
    font-size: 13px; font-weight: 400; color: var(--color-ink-light);
    margin-left: 6px;
}
.version-history-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    background: transparent; color: var(--color-ink-light);
    cursor: pointer; transition: all 0.2s;
}
.version-history-close:hover { background: var(--tint-08); color: var(--color-primary-dark); }

.version-history-body {
    flex: 1; display: flex; min-height: 0;
}
.version-list-col {
    width: 230px; flex-shrink: 0;
    border-right: 1px solid var(--color-border-light);
    background: var(--color-panel-bg);
    overflow-y: auto;
}
.version-list { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.version-list-empty {
    padding: 32px 12px; text-align: center;
    font-size: 13px; color: var(--color-ink-lighter); line-height: 1.8;
}
.version-item {
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-card);
    cursor: pointer;
    transition: all 0.15s;
}
.version-item:hover { border-color: var(--color-primary-light); background: var(--color-primary-bg); }
.version-item.active {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: 0 2px 8px var(--theme-shadow);
}
.version-item-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 5px;
}
.version-time { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.version-latest-badge {
    font-size: 10px; padding: 1px 6px; border-radius: 4px;
    background: var(--color-primary); color: #fff;
}
.version-item-meta { display: flex; align-items: center; gap: 6px; }
.version-source {
    font-size: 11px; padding: 1px 7px; border-radius: 4px;
    background: var(--tint-08); color: var(--color-ink-light);
}
.version-source-generate { background: var(--tint-15); color: var(--color-primary-dark); }
.version-source-polish { background: #E9E3F5; color: #6B5B95; }
.version-source-restore { background: var(--color-success-light); color: var(--color-success); }
.version-words { font-size: 11px; color: var(--color-ink-lighter); margin-left: auto; }

.version-preview-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}
.version-preview-meta {
    padding: 10px 20px;
    font-size: 12px; color: var(--color-ink-light);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-card);
    flex-shrink: 0;
}
.version-preview {
    flex: 1; overflow-y: auto;
    padding: 24px 32px;
    font-family: var(--font-content); font-size: 15px; line-height: 1.9;
    color: var(--color-ink);
}
.version-preview-placeholder {
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: var(--icon-color); opacity: 0.6;
    font-size: 14px;
}

.version-history-footer {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-card);
    flex-shrink: 0;
}
.version-history-tip {
    flex: 1;
    font-size: 12px; color: var(--color-ink-lighter);
}
.version-history-footer .btn-primary:disabled {
    opacity: 0.45; cursor: not-allowed;
}

/* === v7.25: 历史版本内联 Diff 视图 === */
.version-diff-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border-light);
    gap: 12px;
    flex-shrink: 0;
}
.version-diff-left {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px;
}
.version-diff-label { font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.version-diff-select {
    padding: 4px 10px; border: 1px solid var(--color-border);
    border-radius: 8px; background: var(--color-bg); color: var(--color-ink);
    font-size: 13px; font-family: var(--font-content);
    cursor: pointer; outline: none;
    max-width: 220px;
}
.version-diff-select:focus { border-color: var(--color-primary); }
.version-diff-meta { font-size: 12px; color: var(--color-ink-light); white-space: nowrap; }
.version-diff-right {
    display: flex; align-items: center; gap: 10px;
}
.diff-legend { display: flex; gap: 6px; margin-right: 4px; }
.diff-legend-item {
    font-size: 11px; padding: 1px 8px; border-radius: 4px;
    font-weight: 500;
}
.diff-legend-add { background: #e6f4ea; color: #1e7e34; }
.diff-legend-del { background: #fce8e8; color: #c0332d; }
.btn-sm {
    padding: 5px 14px; font-size: 13px; border-radius: 8px;
}

.version-diff-view {
    padding: 24px 32px;
    overflow-y: auto;
    font-family: var(--font-content); font-size: 15px; line-height: 1.9;
    color: var(--color-ink);
}
.diff-block {
    padding: 8px 14px;
    margin-bottom: 2px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    display: flex; align-items: flex-start; gap: 10px;
}
.diff-block-marker {
    flex-shrink: 0;
    width: 18px; text-align: center;
    font-size: 14px; font-weight: 700; font-family: monospace;
    line-height: 1.9;
}
.diff-block-content {
    flex: 1; min-width: 0;
}
.diff-block-content p { margin: 0 0 8px; }
.diff-block-content p:last-child { margin-bottom: 0; }

.diff-block-equal {
    background: transparent;
    border-left-color: transparent;
}
.diff-block-equal .diff-block-marker { color: var(--color-ink-lighter); }

.diff-block-add {
    background: #e6f4ea;
    border-left-color: #1e7e34;
}
.diff-block-add .diff-block-marker { color: #1e7e34; }

.diff-block-del {
    background: #fce8e8;
    border-left-color: #c0332d;
}
.diff-block-del .diff-block-marker { color: #c0332d; }
.diff-block-del .diff-block-content { opacity: 0.85; }

.diff-placeholder {
    text-align: center; padding: 60px 24px;
    color: var(--color-ink-lighter);
}
.diff-placeholder svg { opacity: 0.4; margin-bottom: 12px; }
.diff-placeholder-text { font-size: 14px; }

.diff-stats {
    display: inline-flex; gap: 8px; align-items: center;
    font-size: 12px; color: var(--color-ink-light);
    margin-left: 8px;
}
.diff-stat-add { color: #1e7e34; font-weight: 600; }
.diff-stat-del { color: #c0332d; font-weight: 600; }

.draft-empty {
    text-align: center; padding: 80px 24px; color: var(--icon-color);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.draft-empty-icon { opacity: 0.4; }
.draft-empty-text { font-size: 16px; color: var(--color-ink-light); }
.draft-empty-hint { font-size: 13px; color: var(--icon-color); opacity: 0.7; }
/* P2-10: 生成进度条 */
.draft-gen-progress { margin: 0 auto; }
.draft-gen-progress-bar {
    width: 100%; height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
}
.draft-gen-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #B5563B, #E67E22);
    border-radius: 3px;
    transition: width 0.6s ease;
}
.draft-gen-progress-stages {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    gap: 4px;
}
.draft-gen-stage {
    font-size: 11px;
    color: var(--icon-color);
    opacity: 0.4;
    transition: opacity 0.3s, color 0.3s;
}
.draft-gen-stage.active { opacity: 0.85; }
.draft-gen-stage.current {
    opacity: 1;
    color: #B5563B;
    font-weight: 600;
}
.draft-placeholder {
    text-align: center; color: var(--color-ink-light); margin-top: 40px;
    font-size: 15px; opacity: 0.6;
}

/* ---- 中栏空状态（丰富版） ---- */
.draft-empty-rich {
    padding: 48px 24px 64px;
    gap: 28px;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.draft-empty-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.draft-empty-icon-wrap {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFF8F0 0%, #FFEEE0 100%);
    border: 1px solid #F0E0D0;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary);
    margin-bottom: 4px;
}
.draft-empty-icon-wrap svg {
    width: 30px; height: 30px;
    color: var(--color-primary);
}
.draft-empty-title {
    font-size: 1.35em !important;
    font-weight: 600;
    color: #3D2B1F !important;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.draft-empty-subtitle {
    font-size: 0.9em;
    color: #8B7355;
    line-height: 1.6;
    max-width: 420px;
}
.draft-empty-steps {
    background: var(--color-text-white);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 6px 20px;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
}
.draft-empty-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 4px;
    border-bottom: 1px dashed var(--color-border-light);
    transition: all 0.2s ease;
    position: relative;
}
.draft-empty-step:last-child {
    border-bottom: none;
}
.draft-empty-step:hover {
    background: #FFFBF5;
    border-radius: 10px;
    margin: 0 -6px;
    padding-left: 10px;
    padding-right: 10px;
}
.draft-empty-step:hover + .draft-empty-step {
    border-top: 1px dashed transparent;
}
.draft-empty-step:hover:last-child {
    padding-bottom: 16px;
}
.draft-empty-step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.draft-empty-step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.draft-empty-step-title {
    font-size: 0.9em;
    font-weight: 600;
    color: #3D2B1F;
}
.draft-empty-step-desc {
    font-size: 0.8em;
    color: #8B7355;
    line-height: 1.5;
}
.draft-empty-prompts {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.draft-empty-prompts-title {
    font-size: 0.85em;
    color: var(--color-ink-light);
}
.draft-empty-prompts-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.prompt-chip {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--color-border-light);
    background: var(--color-text-white);
    color: #7A6A5A;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.prompt-chip:hover {
    border-color: var(--color-primary);
    background: #FFFBF5;
    color: var(--color-primary);
    transform: translateY(-1px);
}
.draft-empty-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}
.draft-empty-actions .intro-start.secondary {
    background: transparent;
    border: 1px solid #C4B5A5;
    color: #7A6A5A;
}
.draft-write-model-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.draft-write-model-label {
    font-size: 13px;
    color: var(--color-text-soft, #9A8B7A);
}
#write-model-select {
    max-width: 240px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border-light, #E5DED2);
    background: var(--color-card, #fff);
    color: var(--color-text, #3B3226);
    font-size: 13px;
}

@media (max-width: 1100px) {
    .draft-empty-steps {
        max-width: 420px;
        padding: 4px 16px;
    }
    .draft-empty-step {
        padding: 14px 2px;
    }
    .draft-empty-rich {
        padding: 32px 20px 48px;
    }
}

/* === 右栏：AI 对话区（可收起） === */
.ai-pane {
    width: 360px; flex-shrink: 0;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    display: flex; flex-direction: column; overflow: hidden;
    transition: width 0.3s ease, opacity 0.25s ease, transform 0.3s ease;
    position: relative;
}
.ai-pane.collapsed {
    width: 0 !important; opacity: 0; transform: translateX(30px);
    border-left: none; overflow: hidden; flex-shrink: 0;
}
.ai-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border-light);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.ai-title-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: var(--color-ink);
}
.ai-title-row svg { color: var(--color-primary); }
/* LLM 状态指示灯 */
.llm-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
    background: #9CA3AF; /* 默认灰色：检测中 */
    transition: background 0.4s ease, box-shadow 0.4s ease;
    cursor: help;
}
.llm-status-dot.healthy { background: #22C55E; box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
.llm-status-dot.degraded { background: #F59E0B; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); animation: pulse-yellow 1.5s ease-in-out infinite; }
.llm-status-dot.unavailable { background: #EF4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); animation: pulse-red 1.5s ease-in-out infinite; }
/* LLM 状态文字 */
.llm-status-text {
    font-size: 11px; font-weight: 400;
    color: #9CA3AF; /* 默认灰色 */
    transition: color 0.4s ease;
    white-space: nowrap;
}
.llm-status-text.healthy { color: #22C55E; }
.llm-status-text.degraded { color: #F59E0B; }
.llm-status-text.unavailable { color: #EF4444; }
@keyframes pulse-yellow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.ai-msg-count {
    font-size: 11px; font-weight: 400; color: var(--color-ink-light);
    background: var(--color-chat-bg); padding: 2px 6px; border-radius: 6px;
}
.ai-collapse-btn {
    border: none; background: transparent; cursor: pointer;
    padding: 5px; border-radius: 8px; color: var(--icon-color);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.ai-collapse-btn:hover { background: var(--color-chat-bg); color: var(--color-primary-dark); }
.ai-collapse-btn svg { width: 18px; height: 18px; }

/* AI 助手顶部工具栏（4 个图标按钮） */
.ai-toolbar {
    display: flex; align-items: center; gap: 2px;
    background: var(--color-chat-bg);
    padding: 3px 4px; border-radius: 10px;
}
.ai-style-tag {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 7px;
    background: var(--color-primary-bg);
    border: 1px solid var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 12.5px; font-weight: 500;
    cursor: pointer; transition: all 0.18s ease;
    white-space: nowrap;
}
.ai-style-tag:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}
.ai-style-tag:active { transform: scale(0.97); }
/* ai-tool-btn 复用 panel-btn 基础样式，仅保留差异化覆盖 */
.ai-tool-btn.panel-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-primary-dark);
    transform: translateY(-1px);
}
.ai-tool-btn.panel-btn:active { transform: translateY(0); }
.ai-tool-btn.panel-btn.ai-tool-active {
    background: var(--color-primary);
    color: #fff;
}
.ai-tool-btn.panel-btn#ai-btn-close:hover {
    color: #d9534f;
}

/* scope 标识条（右栏 AI 助手顶部） */
.ai-scope-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px;
    background: var(--color-primary-bg);
    border-bottom: 1px solid var(--color-border-light);
    font-size: 13px; color: var(--color-primary-dark); font-weight: 500;
}
.ai-scope-bar svg { color: var(--color-primary); flex-shrink: 0; }
.ai-scope-bar.empty { color: var(--color-ink-light); font-weight: 400; }

/* scope 模式切换开关（章/全书） */
.scope-mode-toggle {
    display: flex; align-items: center; gap: 4px;
    margin-left: auto; flex-shrink: 0;
    cursor: pointer; user-select: none;
}
.scope-mode-toggle .toggle-label {
    font-size: 11px; color: var(--color-ink-lighter);
    transition: color 0.2s;
}
.scope-mode-toggle .toggle-track {
    position: relative; width: 28px; height: 14px;
    border-radius: 7px; background: var(--color-border);
    transition: background 0.25s;
}
.scope-mode-toggle .toggle-track.on {
    background: var(--color-primary);
}
.scope-mode-toggle .toggle-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: left 0.25s;
}
.scope-mode-toggle .toggle-track.on .toggle-thumb {
    left: 16px;
}
.scope-mode-toggle .toggle-label-ch { font-weight: 500; }
.scope-mode-toggle .toggle-track.on ~ .toggle-label-book { color: var(--color-primary); font-weight: 600; }
.scope-mode-toggle .toggle-track:not(.on) ~ .toggle-label-ch { color: var(--color-primary); font-weight: 600; }

/* === AI 提炼：白卡（线索）=== */
.clue-card {
    background: var(--color-chat-bg);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    border-left: 3px solid var(--color-accent, #B85450);
    transition: background 0.15s;
}
.clue-card:hover { background: var(--tint-06); }
.clue-card.adopted { opacity: 0.6; border-left-color: var(--color-success, #7D8B6A); }
.clue-card-header {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--color-ink-light);
    margin-bottom: 4px;
}
.clue-type-icon { width: 16px; height: 16px; color: var(--icon-color); display: flex; align-items: center; justify-content: center; }
.clue-type-icon svg { width: 14px; height: 14px; }
.clue-type-label { font-weight: 600; }
.clue-source { margin-left: auto; font-size: 10px; color: var(--color-ink-lightest); }
.clue-card-body {
    font-size: 13px; line-height: 1.5; color: var(--color-ink);
    word-break: break-word;
}
.clue-card-actions {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px;
}
.clue-btn {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; padding: 2px 8px;
    border-radius: 4px; border: none;
    background: var(--tint-06); color: var(--color-ink-light);
    cursor: pointer; transition: all 0.15s;
}
.clue-btn:hover { background: var(--color-accent, #B85450); color: #fff; }
.clue-btn:disabled { opacity: 0.4; cursor: default; }
.clue-btn:disabled:hover { background: var(--tint-06); color: var(--color-ink-light); }
.clue-adopted-tag {
    font-size: 10px; color: var(--color-success, #7D8B6A);
    font-weight: 600;
}
.clue-source-line {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--color-primary);
    margin-bottom: 4px; padding: 1px 6px;
    background: var(--tint-06); border-radius: 4px;
    cursor: pointer; width: fit-content; max-width: 100%;
}
.clue-source-line:hover { background: var(--color-primary); color: #fff; }
.clue-source-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clue-card.highlight {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    animation: clueHighlight 1.2s ease;
}
@keyframes clueHighlight {
    0% { background: var(--color-primary); color: #fff; }
    100% { background: var(--color-chat-bg); }
}

/* === AI 提炼：橙卡（理解层产物）=== */
.understanding-card {
    background: linear-gradient(135deg, rgba(232, 145, 74, 0.08), rgba(232, 145, 74, 0.03));
    border-radius: 10px;
    padding: 12px 14px;
    margin: 6px 0;
    border-left: 3px solid #E8914A;
}
.understanding-header {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--color-ink-light);
    margin-bottom: 6px;
}
.understanding-icon { font-size: 14px; }
.understanding-label { font-weight: 600; color: #C77A30; }
.understanding-version { margin-left: auto; font-size: 10px; color: var(--color-ink-lightest); }
.understanding-body {
    font-size: 14px; line-height: 1.7; color: var(--color-ink);
    word-break: break-word;
}
.understanding-card.expanded .understanding-body {
    max-height: none; overflow: visible;
}
.understanding-actions {
    display: flex; gap: 6px; margin-top: 6px;
}
.und-btn {
    display: flex; align-items: center; gap: 3px;
    padding: 3px 8px; border-radius: 4px; border: none;
    font-size: 11px; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
}
.und-btn.view { background: transparent; color: var(--color-ink-light); }
.und-btn.view:hover { background: var(--tint-06); color: var(--color-ink); }
.und-btn.draft { background: rgba(232,145,74,0.1); color: #C77A30; }
.und-btn.draft:hover { background: rgba(232,145,74,0.2); }

/* G1: 溯源高亮闪烁动画 */
@keyframes highlight-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184,84,80,0); }
    50% { box-shadow: 0 0 0 3px rgba(184,84,80,0.3); }
}
.highlight-flash {
    animation: highlight-flash 0.6s ease-in-out 3;
    border-radius: 8px;
}

/* 引用块（正文中的线索/资料引用）*/
.ref-block {
    border-left: 3px solid var(--color-accent, #B85450);
    background: var(--color-chat-bg);
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
}
.ref-block cite {
    display: block; text-align: right;
    font-size: 11px; color: var(--color-ink-light);
    font-style: normal; margin-top: 4px;
}

/* 窗口互换：中栏(编辑区)和右栏(AI对话)交换位置 */
.main-layout.panels-swapped .draft-pane { order: 4; border-right: none; border-left: 1px solid var(--color-border); }
.main-layout.panels-swapped .resize-handle-right { order: 3; }
.main-layout.panels-swapped .ai-pane { order: 2; border-left: none; border-right: 1px solid var(--color-border); }
.main-layout.panels-swapped .resize-handle-left { order: 1; }

/* 窗口互换：中栏(编辑区)和左栏(目录)交换位置 */
.main-layout.swap-draft-outline .outline-pane { order: 3; border-right: none; border-left: 1px solid var(--color-border); }
.main-layout.swap-draft-outline .resize-handle-left { order: 2; }
.main-layout.swap-draft-outline .draft-pane { order: 1; border-left: none; border-right: 1px solid var(--color-border); }
.main-layout.swap-draft-outline .resize-handle-right { order: 4; }
.main-layout.swap-draft-outline .ai-pane { order: 5; }

/* 窗口互换：左栏(目录)和右栏(AI)交换位置 */
.main-layout.swap-outline-ai .ai-pane { order: 1; border-left: none; border-right: 1px solid var(--color-border); }
.main-layout.swap-outline-ai .resize-handle-left { order: 2; }
.main-layout.swap-outline-ai .draft-pane { order: 3; }
.main-layout.swap-outline-ai .resize-handle-right { order: 4; }
.main-layout.swap-outline-ai .outline-pane { order: 5; border-right: none; border-left: 1px solid var(--color-border); }

/* 会话历史浮层 */
.ai-conv-history {
    position: absolute;
    top: 48px; right: 8px;
    width: 360px; max-height: 460px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(61,43,31,0.15);
    z-index: 200;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.ai-conv-history-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}
.ai-conv-history-back,
.ai-conv-history-clear {
    border: none; background: transparent; cursor: pointer;
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--icon-color);
    transition: all 0.18s ease;
    padding: 0;
}
.ai-conv-history-back:hover,
.ai-conv-history-clear:hover {
    background: var(--color-chat-bg);
    color: var(--color-ink);
}
.ai-conv-history-back svg,
.ai-conv-history-clear svg { width: 18px; height: 18px; }
.ai-conv-history-title {
    font-size: 14px; font-weight: 600; color: var(--color-ink);
}
.ai-conv-history-count {
    color: var(--icon-color); font-weight: 500; margin-left: 4px;
}
.ai-conv-history-list {
    overflow-y: auto; flex: 1;
}
.ai-conv-history-empty {
    padding: 32px 16px; text-align: center; color: var(--icon-color);
    font-size: 13px;
}
.ai-conv-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.15s;
}
.ai-conv-item:hover { background: var(--color-chat-bg); }
.ai-conv-item.active { background: var(--color-primary-bg); }
.ai-conv-item-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 5px;
}
.ai-conv-item-top {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
.ai-conv-item-title {
    font-size: 14px; font-weight: 500; color: var(--color-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.ai-conv-item-input {
    flex: 1; font-size: 14px; padding: 3px 8px;
    border: 1px solid var(--color-primary); border-radius: 6px;
    background: var(--color-card); color: var(--color-ink);
    outline: none;
}
.ai-conv-item-tag {
    font-size: 11px; font-weight: 500;
    padding: 2px 7px; border-radius: 12px;
    background: rgba(198, 158, 118, 0.12);
    color: var(--color-primary-dark);
    border: 1px solid rgba(198, 158, 118, 0.25);
    white-space: nowrap;
    flex-shrink: 0;
}
.ai-conv-item-meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px;
    font-size: 12px; color: var(--icon-color);
}
.ai-conv-item-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--color-border);
    flex-shrink: 0;
}
.ai-conv-item-actions {
    display: flex; align-items: center; gap: 2px;
    opacity: 1;
    transition: opacity 0.18s ease;
    flex-shrink: 0;
    margin-top: 2px;
}
.ai-conv-item:hover .ai-conv-item-actions { opacity: 1; }
.ai-conv-item-btn {
    border: none; background: transparent; cursor: pointer;
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: var(--icon-color);
    transition: all 0.18s ease;
    padding: 0;
}
.ai-conv-item:hover .ai-conv-item-btn { color: #9A8B7A; }
.ai-conv-item-btn:hover { background: rgba(255,255,255,0.6); color: var(--color-ink); }
.ai-conv-item-btn.delete:hover { color: #d9534f; }
.ai-conv-item-btn svg { width: 15px; height: 15px; }

/* AI 全屏模式（隐藏左、中栏） */
.ai-pane.ai-fullscreen {
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto;
    border-left: none;
}
.ai-pane.ai-fullscreen + .ai-float-btn,
.ai-pane.ai-fullscreen ~ #ai-float-btn { display: none !important; }

/* AI 对话区内的聊天消息样式（继承 guide-scroll 的规则） */
.ai-scroll { flex: 1; overflow-y: auto; padding: 16px; }
.ai-scroll .chat-messages {
    max-width: 100%; margin: 0; width: 100%;
    display: flex; flex-direction: column; gap: 14px;
    padding-bottom: 8px;
}
.ai-scroll .chat-welcome { flex: none; padding: 16px 0; gap: 24px; }
.ai-scroll .welcome-flow { max-width: 100%; }
.ai-scroll .flow-step { padding: 10px 12px; }
.ai-scroll .welcome-intro-text { font-size: 0.82em; }
/* AI 面板内消息左对齐、气泡更宽 */
.ai-scroll .message.agent .message-bubble { max-width: 92%; width: auto; }
.ai-scroll .message.user .message-bubble { max-width: 80%; }
.ai-scroll .welcome-topics { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.topic-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 24px; border: 1px solid var(--color-border-light); border-radius: 12px;
    background: var(--color-card); cursor: pointer;
    font-family: var(--font-ui); transition: all 0.2s;
    text-align: center; min-width: 130px;
}
.topic-card:hover { border-color: var(--color-primary); background: var(--tint-05); }
.topic-card-single { min-width: 200px; }
.topic-title { font-size: 14px; font-weight: 500; color: var(--color-ink); }
.topic-desc { font-size: 12px; color: var(--icon-color); }
.ai-input-area {
    flex-shrink: 0; padding: 10px 14px 14px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-panel-bg);
}

/* === AI 浮动按钮（收起时显示） === */
.ai-float-btn {
    position: fixed; bottom: 24px; right: 24px;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 100; border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    animation: ai-float-pulse 2.5s ease-in-out infinite;
}
.ai-float-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    background: var(--color-primary-dark);
}
.ai-float-btn svg { color: #fff; }
.ai-float-badge {
    position: absolute; top: -2px; right: -2px;
    background: #e74c3c; color: #fff;
    font-size: 11px; font-weight: 600;
    min-width: 20px; height: 20px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px; border: 2px solid var(--color-bg);
    animation: badge-bounce 0.3s ease;
}

/* === 中栏编辑区浮动按钮（收起时显示） === */
.draft-float-btn {
    position: fixed; bottom: 24px; left: 24px;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 100; border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    animation: ai-float-pulse 2.5s ease-in-out infinite;
}
.draft-float-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    background: var(--color-primary-dark);
}
.draft-float-btn svg { color: #fff; width: 26px; height: 26px; }
@keyframes ai-float-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
    50% { box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 0 0 8px rgba(199,135,59,0.08); }
}
@keyframes badge-bounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* === 目录浮动按钮（收起时显示，可拖拽移动） === */
.outline-float-btn {
    position: fixed; top: 80px; left: 24px;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 22px;
    background: var(--color-primary); color: #fff;
    cursor: grab; z-index: 100; border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    font-size: 13px; font-weight: 600; font-family: var(--font-ui);
    user-select: none; -webkit-user-select: none;
    transition: box-shadow 0.2s, transform 0.15s;
    animation: outline-float-pulse 2.5s ease-in-out infinite;
}
.outline-float-btn:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    background: var(--color-primary-dark);
}
.outline-float-btn:active { cursor: grabbing; transform: scale(0.97); }
.outline-float-btn.dragging { cursor: grabbing; transition: none; animation: none; }
.outline-float-btn svg { color: #fff; width: 18px; height: 18px; flex-shrink: 0; }
.outline-float-btn .outline-float-label { white-space: nowrap; }
@keyframes outline-float-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
    50% { box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 0 0 6px rgba(199,135,59,0.08); }
}

/* ============================================================
   书架页面
   ============================================================ */
.bookshelf-page { display: none; flex-direction: column; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto; background: var(--color-bg); }
.bookshelf-page.active { display: flex; }
.bookshelf-inner { max-width: 1000px; margin: 0 auto; padding: 32px 24px; }
.bookshelf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.bookshelf-title { font-family: var(--font-content); font-size: 24px; font-weight: 700; color: var(--color-ink); }
.bookshelf-subtitle { font-size: 14px; color: var(--color-ink-light); margin-top: 4px; }
.bookshelf-new-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 20px; border: none; border-radius: 20px;
    background: var(--color-primary); color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font-ui);
    transition: all 0.2s; box-shadow: 0 2px 8px var(--tint-20);
}
.bookshelf-new-btn:hover { background: var(--color-primary-dark); }

.bookshelf-timeline-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 20px; border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-card); color: var(--color-ink);
    font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--font-ui);
    transition: all 0.2s;
}
.bookshelf-timeline-btn:hover { background: var(--tint-10); border-color: var(--color-primary); color: var(--color-primary); }

/* 生命周期 */
.lifecycle-bar {
    display: flex; align-items: center; gap: 0; margin-bottom: 28px;
    padding: 16px 20px; background: var(--color-card); border-radius: 14px;
    border: 1px solid var(--color-border-light);
}
.lifecycle-step {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--icon-color); font-weight: 500;
}
.lifecycle-step.active { color: var(--color-primary-dark); font-weight: 600; }
.lifecycle-step.done { color: var(--color-success); }
.lifecycle-step-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--color-border); transition: all 0.2s;
}
.lifecycle-step.active .lifecycle-step-dot { background: var(--color-primary); box-shadow: 0 0 0 4px var(--tint-15); }
.lifecycle-step.done .lifecycle-step-dot { background: var(--color-success); }
.lifecycle-arrow {
    flex: 1; height: 2px; background: var(--color-border); margin: 0 12px;
    border-radius: 1px; transition: background 0.2s;
}
.lifecycle-arrow.done { background: var(--color-success); }

/* 书籍卡片 */
.bookshelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.book-card {
    display: flex; background: var(--color-card); border-radius: 14px; overflow: hidden;
    cursor: pointer; transition: all 0.2s;
    border: 1px solid var(--color-border-light);
}
.book-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px var(--tint-12); transform: translateY(-2px); }
.book-card-spine { width: 6px; flex-shrink: 0; background: var(--color-primary); }
.book-card.drafting .book-card-spine { background: var(--color-primary); }
.book-card.completed .book-card-spine { background: var(--color-success); }
.book-card-body { flex: 1; padding: 16px 18px; min-width: 0; }
.book-card-title { font-family: var(--font-content); font-size: 16px; font-weight: 600; color: var(--color-ink); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-card-desc { font-size: 13px; color: var(--color-ink-light); line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--icon-color); margin-bottom: 10px; }
.book-card-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--icon-color); }
.book-card-progress { display: flex; align-items: center; gap: 8px; }
.book-card-progress-bar { flex: 1; height: 4px; background: var(--color-border-light); border-radius: 2px; overflow: hidden; }
.book-card-progress-fill { height: 100%; background: var(--color-primary); border-radius: 2px; transition: width 0.4s ease; }
.book-card-progress-fill.done { background: var(--color-success); }
.book-card-progress-text { font-size: 11px; color: var(--icon-color); white-space: nowrap; }

/* 示例书角标 */
.book-card-sample-badge {
    position: absolute; top: 10px; right: 38px;
    background: var(--color-primary); color: #fff;
    font-size: 10px; font-weight: 600; line-height: 1;
    padding: 3px 7px; border-radius: 3px; z-index: 2;
}
.book-card.is-sample .book-card-spine { background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light, #b3a0d8)); }
.book-card.is-sample { background: linear-gradient(135deg, rgba(168,150,216,0.06), transparent 60%); }

.book-card.new-book {
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--color-border); background: transparent;
}
.book-card.new-book:hover { border-color: var(--color-primary); background: var(--tint-04); }
.book-card.new-book > div { text-align: center; padding: 24px; }
.new-book-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--tint-12); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.new-book-icon svg { width: 20px; height: 20px; }
.new-book-title { font-size: 14px; font-weight: 600; color: var(--color-ink); margin-bottom: 4px; }
.new-book-desc { font-size: 12px; color: var(--icon-color); }

/* === 书架卡片菜单 === */
.book-card-body { position: relative; }

.book-card-menu-btn {
    position: absolute; top: 10px; right: 8px;
    width: 28px; height: 28px; border-radius: 6px;
    border: none; background: transparent; cursor: pointer;
    color: var(--icon-color);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s, background 0.15s;
    z-index: 5;
}
.book-card:hover .book-card-menu-btn { opacity: 1; }
.book-card-menu-btn:hover { background: var(--tint-08); color: var(--color-ink); }
.book-card-menu-btn .icon-sm { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 768px) {
    .book-card-menu-btn { opacity: 1; }
}

.book-menu-dropdown {
    position: fixed; z-index: 1000;
    min-width: 140px;
    background: var(--color-card);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 0 0 1px var(--color-border-light);
    padding: 6px;
    animation: menuFadeIn 0.12s ease;
}
@keyframes menuFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.book-menu-item {
    width: 100%; border: none; background: transparent; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px;
    font-size: 13px; color: var(--color-ink);
    transition: background 0.12s;
}
.book-menu-item:hover { background: var(--tint-06); }
.book-menu-item .icon-sm { width: 16px; height: 16px; flex-shrink: 0; color: var(--icon-color); }
.book-menu-danger { color: #e53935; }
.book-menu-danger .icon-sm { color: #e53935; }
.book-menu-divider { height: 1px; background: var(--color-border-light); margin: 4px 8px; }

.book-card-title-input {
    width: 100%; font-family: var(--font-content); font-size: 16px; font-weight: 600;
    color: var(--color-ink); background: var(--color-bg);
    border: 1px solid var(--color-primary); border-radius: 6px;
    padding: 2px 6px; margin-bottom: 6px;
    outline: none;
}

/* === 查看模式（已完成书只读） === */
body.view-mode .draft-actions { display: none !important; }
body.view-mode .draft-inline-toolbar { display: none !important; }
body.view-mode .selection-float-toolbar { display: none !important; }
body.view-mode .ai-confirm-popover { display: none !important; }
body.view-mode #drafts-preview { outline: none; cursor: default; }
body.view-mode #drafts-preview:focus { outline: none; }
body.view-mode .tox-tinymce-inline { display: none !important; }

.view-mode-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-card);
}
.view-mode-badge {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--color-success);
    background: rgba(76, 175, 80, 0.08); padding: 3px 10px; border-radius: 12px;
    margin-right: auto;
}
.view-mode-badge .icon-xs { width: 14px; height: 14px; }
.view-mode-bar .draft-action {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; padding: 5px 12px; border-radius: 6px;
    border: 1px solid var(--color-border); background: var(--color-card);
    color: var(--color-ink); cursor: pointer; transition: all 0.15s;
}
.view-mode-bar .draft-action:hover {
    border-color: var(--color-primary); color: var(--color-primary); background: var(--tint-04);
}
.view-mode-bar .draft-action .icon-xs { width: 14px; height: 14px; }

/* 查看模式内容区域：阅读优化 */
body.view-mode #drafts-preview {
    max-width: 720px; margin: 0 auto; padding: 20px 8px;
}
body.view-mode #drafts-preview p { text-indent: 2em; margin-bottom: 0.8em; line-height: 1.9; }
body.view-mode #drafts-preview h2.draft-title {
    text-align: center; font-size: 22px; margin: 20px 0 30px;
    border-bottom: 1px solid var(--color-border-light); padding-bottom: 16px;
}

/* ===== 工具集页面 (v8.30) ===== */
.tools-page { display: none; flex-direction: column; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto; background: var(--color-bg); }
.tools-page.active { display: flex; }
.tools-inner { max-width: 1000px; margin: 0 auto; padding: 32px 24px; width: 100%; }
.tools-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.tools-title { font-family: var(--font-content); font-size: 24px; font-weight: 700; color: var(--color-ink); }
    .tools-quota-banner { display: none; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 20px; border-radius: 10px; background: var(--tint-06, rgba(64,128,255,0.06)); border: 1px solid var(--color-border-light, rgba(0,0,0,0.08)); color: var(--color-ink-light); font-size: 13px; line-height: 1.5; flex-wrap: wrap; }
    .tools-quota-banner.quota-warn { background: rgba(255, 152, 0, 0.08); border-color: rgba(255, 152, 0, 0.35); color: #b26a00; }
    .tools-quota-banner.quota-out { background: rgba(229, 57, 53, 0.08); border-color: rgba(229, 57, 53, 0.4); color: #c62828; }
    .tools-quota-icon { font-size: 16px; }
    .tools-quota-text { flex: 1; min-width: 200px; }
    .tools-quota-btn { border: none; background: var(--color-primary, #4f7cff); color: #fff; border-radius: 16px; padding: 5px 14px; font-size: 13px; cursor: pointer; white-space: nowrap; }
    .tools-quota-btn:hover { opacity: 0.9; }
.tools-subtitle { font-size: 14px; color: var(--color-ink-light); margin-top: 4px; }

/* 工具卡片 */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.tool-card {
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
    gap: 8px; padding: 24px 22px;
    background: var(--color-card); border: 1px solid var(--color-border-light);
    border-radius: 16px; cursor: pointer; font-family: var(--font-ui);
    transition: all 0.2s;
}
.tool-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px var(--tint-12); transform: translateY(-2px); }
.tool-card-icon { font-size: 34px; line-height: 1; }
.tool-card-title { font-family: var(--font-content); font-size: 17px; font-weight: 700; color: var(--color-ink); }
.tool-card-desc { font-size: 13px; color: var(--color-ink-light); line-height: 1.6; }
.tool-card-tag {
    margin-top: auto; padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 600; color: var(--icon-color);
    background: var(--tint-06); border: 1px solid var(--color-border-light);
}
.tool-card-tag-ok { color: var(--color-success); background: rgba(76,175,80,0.08); border-color: rgba(76,175,80,0.25); }

/* 文生图表单 */
.tool-form { display: flex; flex-direction: column; gap: 14px; }
.tool-label { font-size: 13px; font-weight: 600; color: var(--color-ink); display: flex; flex-direction: column; gap: 6px; }
.tool-textarea {
    width: 100%; resize: vertical; min-height: 96px;
    padding: 12px 14px; border: 1px solid var(--color-border);
    border-radius: 10px; background: var(--color-card);
    color: var(--color-ink); font-size: 14px; line-height: 1.6;
    font-family: var(--font-ui); transition: border-color .15s;
}
.tool-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--tint-10); }
.tool-form-row { display: flex; gap: 16px; }
.tool-form-row .tool-label { flex: 1; }
.tool-select {
    padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-card); color: var(--color-ink);
    font-size: 14px; font-family: var(--font-ui); cursor: pointer;
}
.tool-generate-btn { align-self: flex-start; }
.tw-prompt-box { position: relative; }
.tw-prompt-box .tool-textarea { padding-bottom: 48px; padding-right: 14px; }
.tool-generate-inline { position: absolute; right: 10px; bottom: 10px; padding: 7px 16px; border-radius: 16px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.tw-form-grid-3 { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
.btn-secondary {
    padding: 10px 20px; border: 1px solid var(--color-border); border-radius: 20px;
    background: var(--color-card); color: var(--color-ink);
    font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--font-ui);
    transition: all 0.2s;
}
.btn-secondary:hover { background: var(--tint-10); border-color: var(--color-primary); color: var(--color-primary); }

/* 文生图状态与结果 */
.tool-status { min-height: 20px; margin-top: 14px; font-size: 13px; color: var(--color-ink-light); line-height: 1.5; }
.tool-status.info { color: var(--color-primary); }
.tool-status.ok { color: var(--color-success); }
.tool-status.error { color: var(--color-danger, #e53e3e); }
.tool-result { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.tool-result img { max-width: 100%; max-height: 46vh; border-radius: 12px; border: 1px solid var(--color-border-light); box-shadow: 0 6px 20px var(--tint-12); }
.tool-result-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* 即将上线 */
.tool-coming { text-align: center; padding: 48px 16px; }
.tool-coming-icon { font-size: 52px; margin-bottom: 16px; }
.tool-coming-title { font-size: 18px; font-weight: 700; color: var(--color-ink); margin-bottom: 12px; }
.tool-coming-desc { font-size: 14px; color: var(--color-ink-light); line-height: 1.8; }

/* ===== 工具集 · 工作台（左侧树 + 右侧工作区）(v8.31) ===== */
.tools-workbench { display: none; height: calc(100vh - 56px); height: calc(100dvh - 56px); background: var(--color-bg); }
.tools-tree { width: 280px; min-width: 280px; background: var(--color-panel-bg); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; }
.tools-tree-header { padding: 12px 12px; border-bottom: 1px solid var(--color-border-light); flex-shrink: 0; }
.tools-tree-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: none; background: none; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: var(--font-ui); color: var(--color-ink); cursor: pointer; transition: background .15s; }
.tools-tree-back:hover { background: var(--tint-08); color: var(--color-primary); }
.tools-tree-back svg { width: 16px; height: 16px; }
.tools-tree-scroll { flex: 1; overflow-y: auto; padding: 6px 8px 24px; }
/* 节点沿用回忆录目录树的分支/箭头/图标样式，保持整体一致 */
.tools-tree .tree-header { width: 100%; border: none; background: none; font-family: var(--font-ui); color: var(--color-ink); text-align: left; }
.tools-tree .tree-header:hover { background: var(--tint-06); }
.tools-tree .tools-tree-node.active { background: var(--tint-10); color: var(--color-primary); font-weight: 600; }
.tools-tree .tree-icon { font-size: 15px; color: var(--icon-color); }
.tools-tree .node-status { font-size: 11px; color: var(--icon-color); background: var(--color-chat-bg); padding: 2px 6px; border-radius: 6px; flex-shrink: 0; }
.tools-tree .tree-toggle { visibility: hidden; }
.tools-tree .has-children > .tree-toggle { visibility: visible; }
.tools-tree-children { padding-left: 18px; display: flex; flex-direction: column; gap: 1px; }
.tools-tree-label { padding: 10px 10px 3px; font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--color-ink-light); }

/* 工具集目录：分组缩进 + 图标模式 */
.tools-tree-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tools-tree-collapse {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: none; border-radius: 8px;
    background: none; color: var(--icon-color); cursor: pointer;
    transition: background .15s, color .15s; flex-shrink: 0;
}
.tools-tree-collapse:hover { background: var(--tint-08); color: var(--color-primary); }
.tools-tree-collapse svg { width: 16px; height: 16px; }
.tools-tree-collapse .icon-expand { display: none; }
.tools-tree.icons-only .tools-tree-collapse .icon-collapse { display: none; }
.tools-tree.icons-only .tools-tree-collapse .icon-expand { display: block; }

.tools-tree .tree-branch { margin-bottom: 3px; }
.tools-tree .tree-children { padding-left: 18px; }
.tools-tree-branch > .tree-header {
    padding: 7px 10px; font-size: 11.5px; letter-spacing: .04em;
    color: var(--color-ink-light);
}
.tools-tree-branch > .tree-header .tree-icon { font-size: 13px; }
.tools-tree-branch > .tree-header .tree-label { font-weight: 700; color: var(--color-ink-light); }
.tools-tree-branch > .tree-header:hover { color: var(--color-ink); }

/* 图标模式：目录区缩成窄条，只显示小图标 */
@media (min-width: 769px) {
    .tools-tree.icons-only { width: 64px; min-width: 64px; transition: width .18s ease; }
    .tools-tree.icons-only .tools-tree-header { justify-content: center; padding: 12px 6px; }
    .tools-tree.icons-only .tools-tree-back { padding: 7px; justify-content: center; }
    .tools-tree.icons-only .tools-tree-back span { display: none; }
    .tools-tree.icons-only .tools-tree-scroll { padding: 6px 6px 24px; }
    .tools-tree.icons-only .tree-label,
    .tools-tree.icons-only .node-status,
    .tools-tree.icons-only .tree-toggle { display: none; }
    .tools-tree.icons-only .tree-header { justify-content: center; padding: 10px 0; }
    .tools-tree.icons-only .tools-tree-node.active { box-shadow: inset 0 0 0 1.5px var(--color-primary); border-radius: 10px; }
    .tools-tree.icons-only .tree-icon { width: 26px; height: 26px; font-size: 17px; }
    .tools-tree.icons-only .tree-children { padding-left: 0; }
    .tools-tree.icons-only .tools-tree-branch { margin-bottom: 6px; }
    .tools-tree.icons-only .tools-tree-branch > .tree-header {
        border-top: 1px solid var(--color-border-light); border-radius: 0;
        padding: 12px 0 8px; margin-top: 6px; justify-content: center;
    }
    .tools-tree.icons-only .tools-tree-branch:first-child > .tree-header { border-top: none; margin-top: 0; }
}
@media (max-width: 768px) {
    .tools-tree-collapse { display: none; }
}
.tools-workspace { flex: 1; overflow-y: auto; padding: 28px 34px 60px; }
#ws-text2book { max-width: none; }
.tw-embed-wrap { margin-top: 4px; }
.tw-embed-hint { font-size: 12px; color: var(--color-ink-light); line-height: 1.6; margin-top: 10px; }
.tw-pane { max-width: 880px; margin: 0 auto; }
.tw-tool-header { margin-bottom: 24px; }
.tw-tool-title { font-family: var(--font-content); font-size: 22px; font-weight: 700; color: var(--color-ink); }
.tw-tool-desc { font-size: 13px; color: var(--color-ink-light); margin-top: 6px; line-height: 1.6; }
.tw-section-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--color-ink); margin-bottom: 12px; }
.tw-section-hint { font-size: 12px; font-weight: 400; color: var(--color-ink-light); }
.tw-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; margin-bottom: 26px; }
.tw-template-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--color-card); border: 1.5px solid var(--color-border-light); border-radius: 14px; cursor: pointer; text-align: left; font-family: var(--font-ui); transition: all .18s; }
.tw-template-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 14px var(--tint-10); transform: translateY(-2px); }
.tw-template-card.active { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--tint-10); }
.tw-template-preview { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--tint-06); display: block; }
.tw-template-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-template-icon {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    background: rgba(255,255,255,0.94);
    border: 1px solid var(--color-border-light);
    box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}
.tw-template-card:hover .tw-template-preview img { transform: scale(1.06); }
.tw-template-preview img { transition: transform .25s ease; }
.tw-template-preview .free-emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 42px; background: linear-gradient(135deg, var(--tint-06), var(--tint-10)); }
.tw-template-name { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.tw-template-desc { font-size: 11px; color: var(--color-ink-light); line-height: 1.45; min-height: 30px; }
.tw-template-check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 700; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.tw-template-card.active .tw-template-check { display: flex; }
.tw-form-card { background: var(--color-card); border: 1px solid var(--color-border-light); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.tw-prompt-hint { font-size: 12px; color: var(--color-ink-light); background: var(--tint-06); border-radius: 8px; padding: 9px 12px; line-height: 1.6; }
.tw-form-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tw-form-grid { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)) auto; align-items: flex-end; gap: 14px; }
.tw-quality-hint { font-size: 12px; color: var(--color-ink-light); line-height: 1.6; }
.tw-book-fill { display: flex; align-items: flex-end; gap: 12px; margin: 14px 0 4px; }
.tw-book-fill .tool-label { flex: 1; min-width: 0; }
.tw-book-fill .tool-select { width: 100%; }
.tw-book-fill-btn { flex-shrink: 0; padding: 9px 18px; }
.tw-book-fill-hint { font-size: 12px; color: var(--color-ink-light); line-height: 1.6; margin-top: 6px; }
.tool-progress { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.tool-progress-bar { height: 8px; border-radius: 6px; background: var(--color-border-light, #eee); overflow: hidden; }
.tool-progress-fill { display: block; height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, var(--color-primary, #b5563b), #e07a52); transition: width .5s ease; }
.tool-progress-text { font-size: 12px; color: var(--color-ink-light); line-height: 1.5; }
.tool-file-input { padding: 10px 12px; border: 1px dashed var(--color-border); border-radius: 10px; background: var(--color-card); font-size: 14px; color: var(--color-ink); cursor: pointer; }
.tool-file-input::-webkit-file-upload-button { margin-right: 10px; padding: 6px 14px; border: none; border-radius: 8px; background: var(--tint-06, #f3e9df); color: var(--color-ink); font-size: 13px; cursor: pointer; }
.tw-image-preview { display: flex; justify-content: center; }
.tw-image-preview img { max-width: 240px; max-height: 180px; border-radius: 10px; border: 1px solid var(--color-border-light); object-fit: cover; }
.tw-coming { padding: 80px 24px; }

   ============================================================ */
.drafts-editor-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--color-bg); z-index: 200;
    display: flex; flex-direction: column;
}
.drafts-editor-overlay .drafts-editor-wrap {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.drafts-editor-overlay .drafts-editor-toolbar {
    padding: 10px 16px; background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.drafts-editor-overlay .drafts-editor-body {
    flex: 1; overflow: hidden; display: flex; flex-direction: column;
}
.drafts-editor-overlay .draft-editor { flex: 1; overflow: auto; }
.drafts-editor-overlay .drafts-empty-state {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--icon-color); gap: 8px;
}

/* ============================================================
   工作空间名称编辑
   ============================================================ */
.workspace-name-edit {
    flex: 1; min-width: 0; font-family: var(--font-content);
    font-size: 15px; font-weight: 600; color: var(--color-ink);
    border: 1px solid var(--color-primary); border-radius: 4px;
    padding: 2px 4px; outline: none; resize: none; background: var(--color-card);
    box-shadow: 0 0 0 3px var(--tint-08);
}

/* ============================================================
   响应式：小屏隐藏左右栏
   ============================================================ */
@media (max-width: 1024px) {
    .outline-pane { width: 220px; }
    .ai-pane { width: 300px; }
}
@media (max-width: 768px) {
    /* 左栏目录：移动端全屏面板 */
    .outline-pane {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1001; width: 100% !important; max-width: none;
        display: none;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .outline-pane:not(.collapsed) { display: flex !important; }
    .outline-pane:not(.collapsed) ~ #outline-float-btn { display: none !important; }
    .outline-float-btn { display: flex !important; position: fixed; top: 12px; left: 12px; z-index: 100; }
    .outline-collapse-btn { display: none; }
    .outline-backdrop {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.35); z-index: 1000;
        display: none;
    }
    .outline-backdrop.visible { display: block; }
    .ai-pane {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1000; width: 100% !important; max-width: none;
        border-left: none; display: none;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .ai-pane:not(.collapsed) { display: flex !important; }
    .ai-pane:not(.collapsed) ~ #ai-float-btn,
    .ai-pane:not(.collapsed) + .ai-float-btn { display: none !important; }
    .ai-float-btn { display: flex !important; }
    .resize-handle { display: none; }
    .ai-scroll { padding: 12px; }
    .ai-input-area { padding: 8px 12px 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
    .draft-body { padding: 16px; }
    .nav-tabs { gap: 2px; }
    .nav-tab { padding: 6px 12px; font-size: 0.8em; }
    .bookshelf-inner { padding: 20px 16px; }
    .bookshelf-grid { grid-template-columns: 1fr; }
    .tools-inner { padding: 20px 16px; }
    .tools-grid { grid-template-columns: 1fr; gap: 14px; }
    .tools-header { flex-wrap: wrap; gap: 12px; }
    .tools-workbench { flex-direction: column; }
    .tools-tree { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--color-border-light); max-height: 136px; }
    .tools-tree-header { padding: 10px 12px; }
    .tools-tree-scroll { display: flex; align-items: flex-start; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 8px 12px 12px; }
    .tools-tree .tree-branch { display: contents; }
    .tools-tree .tree-children { display: flex; align-items: flex-start; gap: 6px; padding-left: 0; }
    .tools-tree-children { display: flex; align-items: flex-start; gap: 6px; padding-left: 0; }
    .tools-tree-label { display: none; }
    .tools-tree-node { width: auto; white-space: nowrap; padding: 6px 12px; border: 1px solid var(--color-border-light); border-radius: 16px; background: var(--color-card); font-size: 12.5px; }
    .tools-tree .tree-icon { width: 16px; font-size: 13px; }
    .tools-tree .tree-toggle { display: none; }
    .tools-tree-node .node-status { display: none; }
    .tools-workspace { padding: 20px 16px 48px; }
    .tw-embed-wrap iframe { height: 68vh; min-height: 420px; }
    .tw-template-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tw-form-row { flex-direction: column; align-items: stretch; }
    .tw-book-fill { flex-direction: column; align-items: stretch; }
    .tw-form-grid { grid-template-columns: 1fr; }
    .tw-coming { padding: 60px 12px; }
    .lifecycle-bar { flex-wrap: wrap; gap: 8px; }
    .lifecycle-arrow { display: none; }
    .bookshelf-header { flex-wrap: wrap; gap: 12px; }
    .bookshelf-header > div:last-child { display: flex; gap: 8px; width: 100%; }
    .bookshelf-timeline-btn,
    .bookshelf-new-btn,
    .bookshelf-trash-btn { flex: 1; white-space: nowrap; justify-content: center; }
    /* 中栏收起在移动端也需要正常隐藏 */
    .draft-pane.collapsed { display: none; }
    .draft-pane:not(.collapsed) {
        display: flex !important;
        position: fixed;
        top: 56px; left: 0; right: 0; bottom: 56px;
        z-index: 999;
        background: var(--color-panel-bg);
        overflow-y: auto;
    }
    /* 移动端：编辑区操作按钮只显示图标，节省空间 */
    .draft-action span,
    .draft-action:not(.draft-swap-btn):not(.draft-close-btn):not(.draft-action-disabled):not(.panel-btn) { font-size: 0; }
    .draft-action:not(.draft-swap-btn):not(.draft-close-btn):not(.panel-btn) svg { margin: 0; }
    /* 移动端：小文本按钮保持可见（H1/H2/H3/A⁺/A⁻） */
    #btn-fmt-h1, #btn-fmt-h2, #btn-fmt-h3,
    #btn-font-bigger, #btn-font-smaller,
    #btn-voice-input, #btn-insert-refblock {
        font-size: 11px !important; padding: 4px 5px !important;
    }
    #btn-insert-refblock svg { margin: 0 !important; }
    /* 移动端：目录面板交换按钮稍大便于点击 */
    .outline-swap-btn { width: 30px; height: 30px; }
    /* 历史会话浮层移动端适配 */
    .ai-conv-history {
        position: fixed;
        top: 56px; right: 12px; left: 12px;
        width: auto; max-width: none;
        max-height: calc(100vh - 80px);
    }
    /* v7.48: 移动端底部 Tab Bar */
    .mobile-tab-bar {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--color-panel-bg);
        border-top: 1px solid var(--color-border);
        z-index: 1002;
    }
    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: none;
        background: transparent;
        color: var(--color-text-light);
        font-size: 10px;
        font-family: var(--font-ui);
        cursor: pointer;
        transition: color 0.15s;
        padding: 4px 1px;
        min-height: 48px;
        overflow: hidden;
    }
    .mobile-tab span {
        white-space: nowrap;
        line-height: 1.2;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-tab svg {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0;
    }
    .mobile-tab.active {
        color: var(--color-primary);
    }
    /* Tab Bar 显示时隐藏三个浮动按钮 */
    .mobile-tab-bar ~ .outline-float-btn,
    .mobile-tab-bar ~ .ai-float-btn,
    .mobile-tab-bar ~ .draft-float-btn {
        display: none !important;
    }
    /* 面板内容底部留出 Tab Bar 空间 */
    .main-layout {
        padding-bottom: 60px;
    }
    .outline-pane:not(.collapsed),
    .ai-pane:not(.collapsed) {
        bottom: 60px;
    }
    .draft-pane:not(.collapsed) {
        padding-bottom: 60px;
    }
    /* 编辑工具栏：sticky 固定在 draft pane 顶部，键盘弹出时也始终可见 */
    .draft-inline-toolbar {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--color-card);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
}

/* ============================================================
   v7.3: 实时同步 — 对话片段 + 同步指示器 + Badge 状态
   ============================================================ */

/* live 段落：AI 回复实时追加到初稿区域的视觉区分 */
.live-segment {
    position: relative;
    padding: 14px 16px 14px 20px;
    margin-bottom: 14px;
    background: var(--tint-04);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 10px 10px 0;
    transition: background 0.3s ease;
}
.live-segment:hover {
    background: var(--tint-08);
}
.live-segment p {
    margin: 0 0 8px 0;
    line-height: 1.85;
    color: var(--color-ink);
}
.live-segment p:last-child {
    margin-bottom: 0;
}

/* live 段落的阶段标签 */
.live-segment-tag {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 600;
    color: var(--color-primary-dark);
    background: var(--tint-12);
    padding: 1px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* 同步指示器（初稿头部，2秒后淡出） */
.sync-indicator {
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 500;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}
.sync-indicator.visible {
    opacity: 1;
}
.sync-indicator::before {
    content: '✓ ';
    font-weight: 700;
}

/* Badge 状态变体 */
.chapter-badge.badge-live {
    color: #2D7D5E;
    background: rgba(45, 125, 94, 0.12);
    animation: pulse-badge 2s ease-in-out infinite;
}
.chapter-badge.badge-polishing {
    color: var(--color-primary-dark);
    background: var(--tint-20);
    animation: blink 1.2s ease-in-out infinite;
}
@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* === 左栏目录：实时记录分组 === */
.live-group .group-header .live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2D7D5E;
    display: inline-block;
    animation: pulse-dot 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45, 125, 94, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(45, 125, 94, 0); }
}

.chapter-item.live-item {
    cursor: pointer;
    background: linear-gradient(135deg, rgba(45, 125, 94, 0.08), rgba(45, 125, 94, 0.02));
}
.chapter-item.live-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 125, 94, 0.12);
}
.chapter-item.live-item .chapter-status.live {
    background: rgba(45, 125, 94, 0.12);
    color: #2D7D5E;
}
.chapter-item.live-item .chapter-status.live svg {
    color: #2D7D5E;
}
.chapter-item.live-item .chapter-meta {
    color: var(--color-text-tertiary);
}

/* 点击目录项后中栏片段高亮闪烁 */
.live-segment.segment-highlight {
    animation: segment-flash 1.5s ease;
}

/* v8.42: 大纲同步后目录章节高亮闪烁 */
.chapter-item.outline-flash {
    animation: outline-flash 1.8s ease;
}
@keyframes outline-flash {
    0%   { background: transparent; }
    20%  { background: rgba(45, 125, 94, 0.14); }
    100% { background: transparent; }
}
@keyframes segment-flash {
    0%   { background: transparent; }
    15%  { background: rgba(45, 125, 94, 0.12); }
    30%  { background: transparent; }
    45%  { background: rgba(45, 125, 94, 0.12); }
    60%  { background: transparent; }
    100% { background: transparent; }
}

/* ============================================================
   分享（P1 只读分享：创建弹窗 + 我的分享面板）
   ============================================================ */

/* --- 创建弹窗 --- */
.share-modal-content {
    max-width: 440px;
    transition: max-width 0.25s ease;
}

/* --- 分享标签页 --- */
.share-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border-light);
    margin: 0 0 0;
}
.share-tab {
    flex: 1;
    padding: 11px 0;
    border: none;
    background: none;
    font-size: 0.95em;
    color: var(--color-ink-lighter);
    cursor: pointer;
    font-family: inherit;
    position: relative;
    transition: color 0.15s ease;
}
.share-tab:hover {
    color: var(--color-primary);
}
.share-tab.active {
    color: var(--color-primary);
    font-weight: bold;
}
.share-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
}
.share-tab-panel {
    display: none;
}
.share-tab-panel.active {
    display: block;
}

.share-target {
    font-size: 1.05em;
    font-weight: bold;
    color: var(--color-ink);
    padding: 12px 14px;
    background: var(--color-primary-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    margin-bottom: 10px;
    word-break: break-all;
}
.share-version-hint {
    font-size: 0.85em;
    color: var(--color-ink-light);
    background: var(--tint-06);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
}
.share-field {
    margin-top: 16px;
}
.share-field-label {
    font-size: 0.92em;
    color: var(--color-ink);
    margin-bottom: 8px;
    font-weight: bold;
}
.share-field-tip {
    font-size: 0.8em;
    color: var(--color-ink-lighter);
    margin-top: 6px;
}
.share-expire-group {
    display: flex;
    gap: 8px;
}
.share-expire-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-ink-light);
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.15s ease;
}
.share-expire-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.share-expire-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: bold;
}
.share-pw-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 1em;
    font-family: inherit;
    color: var(--color-ink);
    background: var(--color-card);
    outline: none;
    letter-spacing: 2px;
}
.share-pw-input:focus {
    border-color: var(--color-primary);
}
.share-create-btn {
    width: 100%;
    margin-top: 22px;
    padding: 13px 0;
    font-size: 1.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 12px;
}
.share-create-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- 创建成功 --- */
#share-result {
    text-align: center;
    padding: 8px 0 4px;
}
.share-success-icon {
    margin-bottom: 8px;
}
.share-success-icon svg {
    width: 44px;
    height: 44px;
}
.share-success-title {
    font-size: 1.05em;
    font-weight: bold;
    color: var(--color-ink);
    margin-bottom: 18px;
}
.share-link-box {
    display: flex;
    gap: 8px;
}
.share-link-input {
    flex: 1;
    padding: 11px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 0.85em;
    color: var(--color-ink-light);
    background: var(--color-card);
    outline: none;
    min-width: 0;
}
.share-copy-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 10px;
}
.share-result-meta {
    margin-top: 12px;
    font-size: 0.85em;
    color: var(--color-ink-lighter);
}
.share-done-btn {
    width: 100%;
    margin-top: 16px;
    border-radius: 10px;
}

/* --- 分享链接管理（在分享对话框内） --- */
.share-book-btn {
    width: 100%;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 12px;
}
.share-book-hint {
    font-size: 0.78em;
    color: var(--color-ink-lighter);
    text-align: center;
    margin: 6px 0 0;
}
.share-mgmt-top {
    margin-bottom: 16px;
}

/* 统计栏 */
.share-stats-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--color-primary-bg);
    border-radius: 10px;
    font-size: 0.85em;
    color: var(--color-ink-light);
    flex-wrap: wrap;
}
.share-stat b { color: var(--color-ink); font-weight: 700; }
.share-stat-active { color: var(--color-success) !important; }
.share-stat-expired { color: var(--color-warning) !important; }
.share-stat-revoked { color: var(--color-danger) !important; }
.share-stat-divider { color: var(--color-border); margin: 0 2px; }

/* 搜索框 */
.share-search-box {
    position: relative;
    margin-bottom: 14px;
}
.share-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-ink-lighter);
    pointer-events: none;
}
.share-search-input {
    width: 100%;
    padding: 9px 14px 9px 34px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 0.88em;
    color: var(--color-ink);
    background: var(--color-card);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-family: var(--font-ui);
}
.share-search-input:focus {
    border-color: var(--color-primary);
}
.share-search-input::placeholder {
    color: var(--color-ink-lighter);
}

.share-group-count {
    font-weight: normal;
    font-size: 0.85em;
    color: var(--color-ink-lighter);
    margin-left: 4px;
}

.shares-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.shares-empty {
    text-align: center;
    color: var(--color-ink-lighter);
    padding: 32px 0 20px;
    font-size: 0.95em;
}
.shares-empty svg {
    margin-bottom: 10px;
    opacity: 0.5;
}
.shares-empty-hint {
    font-size: 0.82em;
    margin-top: 6px;
}
.share-group-title {
    font-size: 0.88em;
    font-weight: bold;
    color: var(--color-ink);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 8px;
    word-break: break-all;
}
.share-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    background: var(--color-card);
    margin-bottom: 8px;
}
.share-item-disabled {
    opacity: 0.55;
}
.share-item-main {
    flex: 1;
    min-width: 0;
}
.share-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.share-item-version {
    font-size: 0.78em;
    font-weight: bold;
    color: var(--color-primary);
    background: var(--tint-08);
    border-radius: 6px;
    padding: 1px 7px;
}
.share-item-status {
    font-size: 0.78em;
}
.share-status-active {
    color: var(--color-success);
}
.share-status-expired {
    color: var(--color-ink-lighter);
}
.share-status-revoked {
    color: var(--color-danger);
}
.share-item-lock {
    font-size: 0.78em;
}
.share-item-meta {
    font-size: 0.78em;
    color: var(--color-ink-lighter);
    margin-top: 3px;
}
.share-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.share-act-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-ink-light);
    font-size: 0.8em;
    cursor: pointer;
}
.share-act-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.share-act-danger:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* ============================================================
   v7.18: 增加章节弹窗
   ============================================================ */
.chapter-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(61, 43, 31, 0.45);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.chapter-modal-dialog {
    background: var(--color-bg);
    border-radius: 16px;
    width: 90%; max-width: 420px;
    padding: 28px 24px 20px;
    box-shadow: 0 24px 64px rgba(61, 43, 31, 0.25);
    text-align: center;
}
.chapter-modal-title {
    font-size: 18px; font-weight: 600; color: var(--color-ink);
    margin-bottom: 18px;
}
.chapter-modal-input {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px; font-size: 16px;
    color: var(--color-ink); background: var(--color-card);
    outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
}
.chapter-modal-input:focus { border-color: var(--color-primary); }
.chapter-modal-input::placeholder { color: var(--color-ink-light); opacity: 0.6; }
.chapter-modal-hint {
    font-size: 13px; color: var(--color-ink-light);
    margin: 10px 0 18px;
}
.chapter-modal-actions {
    display: flex; gap: 10px; justify-content: center;
}
.chapter-modal-actions button {
    padding: 9px 24px; border-radius: 10px; font-size: 15px; cursor: pointer;
}
.chapter-modal-actions .btn-primary {
    background: var(--color-primary); color: #fff; border: none;
}
.chapter-modal-actions .btn-secondary {
    background: transparent; color: var(--color-ink-light);
    border: 1px solid var(--color-border);
}

/* v7.18: 整理初稿按钮样式 */
.intro-start.secondary:hover { background: rgba(196,181,165,0.1) !important; }

/* ============================================================
   v7.25 时光轴样式
   ============================================================ */

/* --- 导航增强 --- */
.nav-tab-back { font-size: 0.82em; }
.nav-book-name {
    font-family: var(--font-content);
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-primary-dark);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

/* --- 左栏时光轴（窄栏适配） --- */
.timeline-years-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tint-10);
}
.timeline-years-inline .timeline-year-capsule {
    padding: 4px 10px;
    font-size: 12px;
}
.timeline-track-inline {
    position: relative;
    padding: 12px 12px 40px 18px;
    overflow-y: auto;
    flex: 1;
    font-size: 13px; /* 统一基准，避免 em 嵌套放大 */
}
.timeline-track-inline .timeline-year-marker {
    display: flex;
    align-items: center;
    margin: 20px 0 12px -18px;
}
.timeline-track-inline .timeline-year-num {
    font-size: 18px;
    width: 42px;
    padding-right: 10px;
}
.timeline-track-inline .timeline-event {
    margin-bottom: 16px;
    gap: 10px;
}
.timeline-track-inline .timeline-dot {
    width: 10px; height: 10px;
    border-width: 2px;
    margin-top: 5px;
}
.timeline-track-inline .timeline-card-body {
    padding: 10px 12px 10px 18px;
}
.timeline-track-inline .timeline-card-meta {
    font-size: 12px;
    margin-bottom: 6px;
    gap: 6px;
}
.timeline-track-inline .timeline-card-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.timeline-track-inline .timeline-card-summary {
    font-size: 13px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.timeline-track-inline .timeline-card-arrow {
    display: none;
}
.timeline-track-inline .timeline-card-book {
    font-size: 11px;
    padding: 2px 6px;
}
.timeline-empty-inline {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 年份筛选胶囊（共用） --- */
.timeline-year-capsule {
    background: var(--tint-06);
    border: 1px solid var(--color-border);
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 0.82em;
    font-weight: 500;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-ui);
}
.timeline-year-capsule:hover {
    color: var(--color-text);
    background: var(--tint-12);
    border-color: var(--tint-30);
}
.timeline-year-capsule.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    font-weight: 600;
}

/* --- 时间线核心元素（共用） --- */
.timeline-year-marker {
    display: flex;
    align-items: center;
    margin: 32px 0 16px -40px;
}
.timeline-year-num {
    font-family: var(--font-content);
    font-size: 1.8em;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
    width: 60px;
    text-align: right;
    padding-right: 16px;
}
.timeline-year-line {
    flex: 1;
    height: 2px;
    background: var(--tint-30);
    border-radius: 1px;
}
.timeline-event {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
}
.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid;
    flex-shrink: 0;
    margin-top: 6px;
    position: relative;
    z-index: 1;
}
.timeline-dot::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 14px;
    width: 2px;
    height: calc(100% + 30px);
    background: var(--tint-20);
    border-radius: 1px;
}
.timeline-event:last-of-type .timeline-dot::before {
    display: none;
}
.timeline-dot-dashed {
    border-style: dashed;
    background: transparent !important;
    border-color: var(--tint-30) !important;
}
.timeline-dot-dashed::before { display: none; }
.timeline-card {
    flex: 1;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-width: 0;
    transition: box-shadow 0.2s, transform 0.2s;
}
.timeline-card-clickable {
    cursor: pointer;
}
.timeline-card-clickable:hover {
    box-shadow: 0 4px 16px var(--tint-12);
    transform: translateY(-2px);
}
.timeline-card-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 2px 0 0 2px;
}
.timeline-card-book {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.85em;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: var(--font-ui);
}
.timeline-card-body {
    padding: 14px 18px 14px 22px;
}
.timeline-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.timeline-card-date {
    font-family: var(--font-ui);
    font-size: 0.9em;
    color: var(--color-text-tertiary);
    font-weight: 500;
}
.timeline-card-location {
    font-family: var(--font-ui);
    font-size: 0.9em;
    color: var(--color-text-tertiary);
}
.timeline-card-location::before {
    content: '·';
    margin-right: 4px;
    color: var(--tint-30);
}
.timeline-card-cat {
    font-family: var(--font-ui);
    font-size: 0.85em;
    font-weight: 600;
    padding: 3px 10px;
    background: var(--tint-06);
    border-radius: 8px;
}
.timeline-card-title {
    font-family: var(--font-content);
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: 6px;
}
.timeline-card-summary {
    font-family: var(--font-content);
    font-size: 1em;
    color: var(--color-text-light);
    line-height: 1.6;
}
.timeline-card-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tint-30);
    opacity: 0;
    transition: opacity 0.2s, right 0.2s;
}
.timeline-card-clickable:hover .timeline-card-arrow {
    opacity: 0.7;
    right: 10px;
}
.timeline-event-add { opacity: 0.7; }
.timeline-card-add {
    cursor: pointer;
    border-style: dashed;
    background: transparent;
}
.timeline-card-add:hover {
    opacity: 1;
    border-color: var(--color-primary);
    background: var(--tint-06);
}

/* 记一笔按钮 */
.quick-action-btn.record-pending {
    background: var(--tint-06); color: var(--color-primary);
}

/* 待整理清单角标 */
.qa-badge.pending-badge {
    background: var(--color-primary); color: #fff; font-size: 0.7em;
    padding: 1px 6px; border-radius: 10px; margin-left: 2px;
}

/* v117 — 线索筛选/搜索/操作 / 理解层专题渲染 / 消息操作增强 / 拖拽上传 / @mention */

/* === AI 提炼内部分组样式（v8.06 扁平化，.extract-sub 前缀已移除） === */
.clue-group,
.und-group {
    border-radius: 6px;
}
.clue-group > .tree-header,
.und-group > .tree-header {
    padding: 4px 6px;
    font-size: 0.82em;
    color: var(--color-ink-light);
}
.clue-group > .tree-children,
.und-group > .tree-children {
    padding-left: 10px;
}
.clue-group > .tree-children > .clue-card,
.und-group > .tree-children > .understanding-card {
    margin: 4px 0;
}
.clue-file-group > .tree-children {
    padding-left: 10px;
}
.clue-file-group > .tree-header {
    padding: 3px 6px;
    font-size: 0.8em;
    color: var(--color-ink-light);
}
.clue-file-group > .tree-header .tree-label {
    font-weight: 500;
    max-width: 120px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* === 线索删除按钮 === */
.clue-delete-btn {
    margin-left: auto; background: none; border: none; color: var(--color-text-secondary);
    cursor: pointer; padding: 2px; border-radius: 3px; display: flex; align-items: center;
    opacity: 0; transition: opacity 0.15s;
}
.clue-card:hover .clue-delete-btn { opacity: 1; }
.clue-delete-btn:hover { color: #e74c3c; background: rgba(231,76,60,.1); }

/* === 线索改写插入按钮 === */
.clue-btn.rewrite {
    background: var(--color-bg); color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.clue-btn.rewrite:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-bg); }

/* === 已采纳到第X章 === */
.clue-adopted-chapter {
    font-size: 0.7em; color: var(--color-success, #27ae60);
    padding: 2px 6px; background: rgba(39,174,96,.1); border-radius: 3px;
}

/* === 理解层专题卡片 === */

/* 人物表 */
.und-char-list {
    display: flex; flex-direction: column; gap: 8px;
}
.und-char-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.08), rgba(142, 68, 173, 0.02));
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.und-char-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.12);
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.12), rgba(142, 68, 173, 0.04));
}
.und-char-avatar {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #7D3C98;
    background: rgba(142, 68, 173, 0.1);
    border-radius: 50%;
}
.und-char-avatar svg { width: 16px; height: 16px; }
.und-char-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.und-char-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.und-char-name {
    font-size: 14px; font-weight: 700;
    color: var(--color-ink);
}
.und-char-role {
    font-size: 11px; font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(142, 68, 173, 0.12);
    color: #7D3C98;
}
.und-char-desc {
    font-size: 14px; line-height: 1.6;
    color: var(--color-text-light);
}

/* 时间线 — v8.12: 与人物/记忆/洞察卡片风格统一 */
.und-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.und-timeline-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.08), rgba(230, 126, 34, 0.02));
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.und-timeline-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.12);
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.12), rgba(230, 126, 34, 0.04));
}
.und-timeline-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #E67E22;
    background: rgba(230, 126, 34, 0.12);
    border-radius: 50%;
}
.und-timeline-icon svg { width: 16px; height: 16px; }
.und-timeline-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.und-timeline-time {
    font-size: 14px; font-weight: 700;
    color: #D35400;
    font-family: var(--font-ui);
    letter-spacing: 0.01em;
}
.und-timeline-event {
    font-size: 14px; line-height: 1.7;
    color: var(--color-ink);
}

/* 记忆 */
.und-memory-list {
    display: flex; flex-direction: column; gap: 8px;
}
.und-memory-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.08), rgba(255, 193, 7, 0.02));
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.und-memory-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.12);
}
.und-memory-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #F39C12;
    background: rgba(255, 152, 0, 0.12);
    border-radius: 50%;
}
.und-memory-icon svg { width: 16px; height: 16px; }
.und-memory-text {
    flex: 1; min-width: 0;
    font-size: 14px; line-height: 1.7;
    color: var(--color-ink);
}

/* 洞察 */
.und-insight-list {
    display: flex; flex-direction: column; gap: 8px;
}
.und-insight-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.08), rgba(46, 204, 113, 0.02));
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.und-insight-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.12);
}
.und-insight-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #27AE60;
    background: rgba(46, 204, 113, 0.12);
    border-radius: 50%;
}
.und-insight-icon svg { width: 16px; height: 16px; }
.und-insight-text {
    flex: 1; min-width: 0;
    font-size: 14px; line-height: 1.7;
    color: var(--color-ink);
}

/* === 理解层重新生成按钮 === */
.extract-action-btn {
    margin-left: auto; background: none; border: 1px solid var(--color-border);
    color: var(--color-text-secondary); cursor: pointer; padding: 2px 6px;
    border-radius: 4px; font-size: 0.72em; display: flex; align-items: center; gap: 3px;
}
.extract-action-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* === 消息操作增强 === */
.msg-star-btn.starred { color: #f39c12; }
.msg-star-btn.starred svg { fill: #f39c12; stroke: #f39c12; }
.msg-star-btn:hover { color: #f39c12; }
.msg-clue-btn:hover { color: var(--color-primary); }
.msg-del-btn:hover { color: #e74c3c; }

/* === 拖拽上传覆盖层 === */
.drag-drop-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
    background: rgba(0,0,0,.5); display: none; align-items: center;
    justify-content: center; pointer-events: none;
}
.drag-drop-overlay.visible { display: flex; pointer-events: all; }
.drag-drop-content {
    background: var(--color-bg); border-radius: 16px; padding: 32px 48px;
    text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,.2);
    border: 2px dashed var(--color-primary);
}
.drag-drop-text { font-size: 1.1em; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.drag-drop-hint { font-size: 0.82em; color: var(--color-text-secondary); }

/* P0-3: 页面加载骨架屏 */
#page-loading-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000;
    background: var(--color-bg, #faf6ef); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 20px;
    transition: opacity 0.4s ease;
}
#page-loading-overlay.fade-out { opacity: 0; pointer-events: none; }
.page-loading-spinner { display: flex; gap: 8px; animation: plFadeUpIn 0.7s ease 0.15s both; }
.page-loading-spinner .loading-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--color-primary, #8b6914);
    animation: loadingBounce 1.2s ease-in-out infinite;
}
.page-loading-spinner .loading-dot:nth-child(2) { animation-delay: 0.2s; }
.page-loading-spinner .loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes loadingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}
/* 加载界面：登录页「人生舞台」风格（暖色渐变 + 光球 + 光尘 + 叶形 Logo） */
#page-loading-overlay {
    background: linear-gradient(135deg, #FFF9F3 0%, #FAF8F5 50%, #F5F1EC 100%);
    overflow: hidden;
}
#page-loading-overlay::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 120% 90% at 50% 44%,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 252, 247, 0.16) 55%,
        rgba(250, 246, 240, 0.68) 100%);
}
.pl-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pl-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.3; animation: plOrbFloat 18s ease-in-out infinite; }
.pl-orb-1 { width: 300px; height: 300px; background: #C4733E; top: -80px; right: -60px; }
.pl-orb-2 { width: 250px; height: 250px; background: #5B8C5A; bottom: -60px; left: -40px; animation-delay: -6s; }
.pl-orb-3 { width: 200px; height: 200px; background: #D4877B; top: 38%; left: 60%; opacity: 0.2; animation-delay: -12s; }
@keyframes plOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -16px) scale(1.06); }
    66% { transform: translate(-14px, 12px) scale(0.95); }
}
.pl-dust { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(196, 115, 62, 0.4); opacity: 0; animation: plDustRise 8s linear infinite; }
.pl-dust-1 { left: 16%; top: 66%; animation-delay: 0s; }
.pl-dust-2 { left: 30%; top: 58%; animation-delay: 1.6s; width: 4px; height: 4px; }
.pl-dust-3 { left: 68%; top: 70%; animation-delay: 3.2s; }
.pl-dust-4 { left: 82%; top: 60%; animation-delay: 4.6s; width: 4px; height: 4px; }
.pl-dust-5 { left: 46%; top: 74%; animation-delay: 6s; }
.pl-dust-6 { left: 58%; top: 56%; animation-delay: 7.2s; width: 3px; height: 3px; }
@keyframes plDustRise {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 0.85; }
    75% { opacity: 0.45; }
    100% { transform: translateY(-44vh); opacity: 0; }
}

.page-loading-spinner .loading-dot { background: #C4733E; box-shadow: 0 0 10px rgba(196, 115, 62, 0.45); }
/* 加载界面：首页头像小人物 + 金句 */
.page-loading-figure {
    display: flex; align-items: center; gap: 12px; margin-top: 2px;
    animation: plFigureIn 0.7s ease 0.25s both;
}
.pl-figure-avatar {
    width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden;
    background: linear-gradient(150deg, rgba(255,255,255,0.95), rgba(255,246,236,0.80));
    border: 1px solid rgba(196,115,62,0.25);
    box-shadow: 0 10px 26px rgba(196,115,62,0.18);
    display: flex; align-items: center; justify-content: center;
}
.pl-figure-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-figure-bubble {
    position: relative; max-width: 250px; min-height: 44px;
    display: flex; align-items: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(196,115,62,0.16);
    border-radius: 14px 14px 14px 4px;
    padding: 8px 14px;
    color: rgba(90,62,42,0.9);
    font-size: 13px; line-height: 1.6; letter-spacing: 0.5px;
    box-shadow: 0 8px 22px rgba(120,90,60,0.10);
}
.pl-figure-bubble::before {
    content: ""; position: absolute; left: -6px; top: 18px;
    width: 10px; height: 10px;
    background: rgba(255,255,255,0.92);
    border-left: 1px solid rgba(196,115,62,0.16);
    border-bottom: 1px solid rgba(196,115,62,0.16);
    transform: rotate(45deg);
}
@keyframes plFigureIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.pl-quote-swap { animation: plQuoteIn 0.5s ease; }
@keyframes plQuoteIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 加载界面：整体入场节奏同步（文字与小人同拍出现） */
@keyframes plFadeUpIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.pl-figure-avatar { animation: plAvatarBob 3.2s ease-in-out infinite; }
@keyframes plAvatarBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    #page-loading-overlay .pl-orb,
    #page-loading-overlay .pl-dust,
    #page-loading-overlay .page-loading-spinner .loading-dot,
    #page-loading-overlay .page-loading-spinner,
    #page-loading-overlay .page-loading-figure,
    #page-loading-overlay .pl-figure-avatar { animation: none !important; }
    #page-loading-overlay .pl-dust { display: none; }
}


/* P1-9: 自定义确认对话框 */
.confirm-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 11000;
    background: rgba(0,0,0,0.4); display: none; align-items: center;
    justify-content: center; animation: fadeIn 0.2s ease;
}
.confirm-overlay.show { display: flex; }
.confirm-dialog {
    background: var(--color-bg, #fff); border-radius: 16px; padding: 32px 28px 24px;
    max-width: 380px; width: 90%; text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    animation: slideUp 0.25s ease;
}
@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.confirm-icon { font-size: 36px; margin-bottom: 12px; }
.confirm-title { font-size: 1.1em; font-weight: 700; color: var(--color-text, #2c2416); margin-bottom: 8px; }
.confirm-message { font-size: 0.92em; color: var(--color-text-secondary, #888); margin-bottom: 24px; line-height: 1.6; }
.confirm-actions { display: flex; gap: 12px; justify-content: center; }
.confirm-btn {
    padding: 10px 28px; border-radius: 8px; font-size: 0.95em; font-weight: 600;
    border: none; cursor: pointer; transition: all 0.2s;
    font-family: inherit;
}
.confirm-btn.cancel {
    background: var(--color-bg-secondary, #f0ebe0); color: var(--color-text-secondary, #666);
}
.confirm-btn.cancel:hover { background: #e0d5c5; }
.confirm-btn.confirm {
    background: var(--color-primary, #8b6914); color: #fff;
}
.confirm-btn.confirm:hover { background: #a07d1f; }
.confirm-btn.danger {
    background: #c62828; color: #fff;
}
.confirm-btn.danger:hover { background: #e53935; }

/* P1-6: 上传大小限制提示 */
.upload-size-hint {
    font-size: 0.7em; color: var(--color-text-light, #9A8B7A);
    text-align: center; margin-top: 4px;
}

/* P1-7: 上传进度条 */
.upload-progress-container {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 14px; margin: 8px 0;
    background: var(--color-bg-secondary, #faf6ef); border-radius: 10px;
    border: 1px solid var(--color-border-light, #f0ebe3);
}
.upload-progress-info { display: flex; justify-content: space-between; align-items: center; }
.upload-progress-name { font-size: 0.85em; font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.upload-progress-size { font-size: 0.75em; color: var(--color-text-light); }
.upload-progress-track {
    height: 4px; background: var(--color-border-light, #e0d5c0);
    border-radius: 2px; overflow: hidden;
}
.upload-progress-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--color-primary, #8b6914), #c9a227);
    transition: width 0.3s ease; width: 0;
}
.upload-progress-percent {
    font-size: 0.7em; color: var(--color-text-light); text-align: right;
}
.upload-cancel-btn {
    align-self: flex-end; padding: 2px 10px; border: 1px solid #ccc;
    border-radius: 6px; background: #fff; font-size: 0.75em; cursor: pointer;
    color: #999;
}
.upload-cancel-btn:hover { color: #c62828; border-color: #c62828; }

/* P1-7: 图片上传进度条（inline） */
.upload-progress-inline {
    display: inline-block; width: 60px; height: 3px;
    background: #e0d5c0; border-radius: 2px; vertical-align: middle; margin-right: 6px;
    overflow: hidden;
}
.upload-progress-bar {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, #8b6914, #c9a227);
    transition: width 0.3s ease;
    border-radius: 2px;
}

/* P2-13: AI 单价参考表（设置页） */
.settings-pricing-table {
    margin-top: 10px; padding: 12px;
    background: var(--color-bg-secondary, #faf6ef);
    border-radius: 8px; font-size: 0.82em;
}
.settings-pricing-title {
    font-weight: 600; color: var(--color-text, #2c2416);
    margin-bottom: 8px; font-size: 0.92em;
}
.settings-pricing-row {
    display: flex; justify-content: space-between;
    padding: 4px 0; color: var(--color-text-secondary, #888);
}
.settings-pricing-note {
    margin-top: 6px; color: var(--color-text-light, #aaa);
    font-size: 0.85em; font-style: italic;
}
.mention-dropdown {
    position: fixed; z-index: 10000; background: var(--color-bg);
    border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12); max-height: 280px; overflow-y: auto;
    min-width: 280px; padding: 4px 0;
}
.mention-item {
    padding: 6px 12px; cursor: pointer; display: flex; gap: 8px; align-items: center;
    font-size: 0.85em; transition: background 0.1s;
}
.mention-item:hover, .mention-item.selected { background: var(--color-primary-bg); }
.mention-label { color: var(--color-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-sub { color: var(--color-text-secondary); font-size: 0.8em; }

/* === scope 章节选择下拉 === */
.scope-chapter-popup {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
    max-height: 200px; overflow-y: auto; margin-top: 4px;
}
.scope-chapter-item {
    padding: 6px 12px; cursor: pointer; font-size: 0.82em;
    transition: background 0.1s; color: var(--color-text);
}
.scope-chapter-item:hover { background: var(--color-primary-bg); }
.scope-chapter-item.active { color: var(--color-primary); font-weight: 600; }

/* === 统一导出弹窗 === */
.export-overlay {
    display: none; position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.45); align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.export-overlay.show { display: flex; }
.export-dialog {
    background: var(--color-bg); border-radius: 14px;
    width: 400px; max-width: 92vw; box-shadow: 0 12px 40px rgba(0,0,0,.18);
    overflow: hidden; animation: exportSlideIn 0.2s ease;
}
@keyframes exportSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.export-dialog-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--color-border);
}
.export-dialog-title { font-size: 1.05em; font-weight: 600; color: var(--color-text); }
.export-dialog-close {
    background: none; border: none; font-size: 1.4em; color: var(--color-ink-light);
    cursor: pointer; padding: 0 4px; line-height: 1;
}
.export-dialog-close:hover { color: var(--color-text); }
.export-dialog-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.export-section { display: flex; flex-direction: column; gap: 8px; }
.export-label { font-size: 0.82em; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .5px; }
.export-options { display: flex; gap: 8px; }
.export-option {
    flex: 1; display: flex; align-items: flex-start; gap: 10px;
    padding: 12px; border: 2px solid var(--color-border); border-radius: 10px;
    background: var(--color-bg); cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s;
}
.export-option:hover { border-color: var(--color-primary); background: var(--color-primary-bg); }
.export-option.selected { border-color: var(--color-primary); background: var(--color-primary-bg); }
.export-option .icon-sm { flex-shrink: 0; margin-top: 1px; color: var(--color-primary); }
.export-option-title { font-size: 0.9em; font-weight: 600; color: var(--color-text); margin-bottom: 2px; }
.export-option-desc { font-size: 0.75em; color: var(--color-text-secondary); }
.export-dialog-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid var(--color-border);
    background: var(--color-card-bg);
}
.export-cancel-btn {
    padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); color: var(--color-text); font-size: 0.85em;
    cursor: pointer; transition: background .15s;
}
.export-cancel-btn:hover { background: var(--color-hover-bg); }
.export-confirm-btn {
    padding: 8px 20px; border: none; border-radius: 8px;
    background: var(--color-primary); color: #fff; font-size: 0.85em;
    font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: background .15s, opacity .15s;
}
.export-confirm-btn:hover { opacity: 0.9; }
.export-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.export-confirm-btn .icon-xs { color: #fff; }

/* v8.07: 排版模板选择 */
.export-template-options { display: flex; gap: 10px; }
.export-template-card {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 8px; border: 2px solid var(--color-border); border-radius: 10px;
    background: var(--color-bg); cursor: pointer; text-align: center;
    transition: border-color .15s, background .15s;
}
.export-template-card:hover { border-color: var(--color-primary); }
.export-template-card.selected { border-color: var(--color-primary); background: var(--color-primary-bg); }
.template-thumb {
    width: 100%; height: 64px; border-radius: 6px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; margin-bottom: 4px;
}
.template-thumb-title { font-size: 11px; font-weight: 700; }
.template-thumb-line { width: 40%; height: 1px; }
.template-thumb-sub { font-size: 7px; letter-spacing: 2px; }
/* 怀旧经典 */
.template-thumb-classic { background: linear-gradient(135deg, #faf5eb, #f0e4d0); }
.template-thumb-classic .template-thumb-title { color: #5a3e1b; }
.template-thumb-classic .template-thumb-line { background: #c4a052; }
.template-thumb-classic .template-thumb-sub { color: #8b6f47; }
/* 现代简约 */
.template-thumb-modern { background: #fff; border: 1px solid #eee; }
.template-thumb-modern .template-thumb-title { color: #2c2c2c; }
.template-thumb-modern .template-thumb-line { background: #ddd; }
.template-thumb-modern .template-thumb-sub { color: #888; }
/* 水墨国风 */
.template-thumb-ink { background: #f5f0e6; }
.template-thumb-ink .template-thumb-title { color: #1a1a1a; font-family: "KaiTi","楷体",serif; }
.template-thumb-ink .template-thumb-line { background: #8B0000; }
.template-thumb-ink .template-thumb-sub { color: #8B0000; font-family: "KaiTi","楷体",serif; }

/* v8.08: 尾部附录选项 */
.export-checkbox-group { display: flex; gap: 12px; flex-wrap: wrap; }
.export-checkbox {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 2px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); cursor: pointer; transition: border-color .15s, background .15s;
}
.export-checkbox:hover { border-color: var(--color-primary); }
.export-checkbox.checked { border-color: var(--color-primary); background: var(--color-primary-bg); }
.export-checkbox-box {
    width: 16px; height: 16px; border: 2px solid var(--color-border); border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.export-checkbox.checked .export-checkbox-box {
    background: var(--color-primary); border-color: var(--color-primary);
}
.export-checkbox.checked .export-checkbox-box::after {
    content: ''; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg); margin-top: -1px;
}
.export-checkbox-label { font-size: 13px; color: var(--color-text); }

/* v123: AI 提炼纯树状化 + 线索资料双向溯源（四级文件分组 / 来源行 / 资料线索 badge） */

/* ============================================================
   资料详情弹窗 (v125)
   ============================================================ */
.file-detail-overlay {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
}
.file-detail-overlay.show { display: flex; }
.file-detail-panel {
    width: 480px; max-width: 94vw; max-height: 85vh;
    background: #fffdf9; border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
    border: 1px solid rgba(0,0,0,.08);
    display: flex; flex-direction: column; overflow: hidden;
}
.file-detail-header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px; border-bottom: 1px solid #ede8df;
    flex-shrink: 0; background: #fffdf9;
}
.file-detail-close {
    background: rgba(0,0,0,.06); border: none; color: var(--color-text); cursor: pointer;
    padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: all .15s; width: 36px; height: 36px;
}
.file-detail-close:hover { background: rgba(0,0,0,.12); color: var(--color-danger, #e53e3e); }
.file-detail-close svg { width: 18px; height: 18px; }
.file-detail-title {
    flex: 1; font-size: 1em; font-weight: 600; color: var(--color-text);
}
.file-detail-action {
    background: none; border: 1px solid var(--color-border); color: var(--color-text-secondary);
    padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: .8em;
    display: flex; align-items: center; gap: 4px; transition: all .15s;
}
.file-detail-action:hover { background: var(--color-hover); border-color: var(--color-primary); color: var(--color-primary); }
.file-detail-action:disabled,
.file-detail-action.processing {
    opacity: 0.7;
    cursor: not-allowed;
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(184, 134, 11, 0.08);
}
.file-detail-action.processing svg {
    animation: file-detail-action-spin 1s linear infinite;
}
@keyframes file-detail-action-spin {
    to { transform: rotate(360deg); }
}
.file-detail-body { flex: 1; overflow-y: auto; padding: 16px; }
.file-detail-loading {
    text-align: center; color: var(--color-text-secondary); padding: 40px 0; font-size: .9em;
}

/* 资料预览区 */
.file-detail-preview {
    display: flex; align-items: center; justify-content: center;
    min-height: 120px; max-height: 260px; overflow: hidden;
    border-radius: 12px; background: #f5f0e8;
    margin-bottom: 18px; cursor: pointer; position: relative;
    border: 1px solid #ede8df;
}
.file-detail-preview img {
    width: 100%; height: 100%; object-fit: contain; max-height: 260px;
}
.file-detail-preview .file-detail-doc-icon {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 32px; color: var(--color-text-secondary);
}
.file-detail-preview .file-detail-doc-icon svg { width: 48px; height: 48px; opacity: .4; }
.file-detail-preview .file-detail-doc-ext {
    font-size: .85em; font-weight: 600; color: var(--color-text-secondary);
    background: var(--color-surface); padding: 4px 12px; border-radius: 6px;
}

/* 资料元信息 */
.file-detail-meta {
    display: flex; gap: 16px; padding: 0 0 16px;
    font-size: .85em; color: #6b5e51;
    flex-wrap: wrap;
}
.file-detail-meta span { display: flex; align-items: center; gap: 5px; }

/* 资料名称 */
.file-detail-filename {
    font-size: 1.1em; font-weight: 700; color: #3d322b;
    margin-bottom: 10px; word-break: break-all; line-height: 1.4;
}

/* 详情面板分区标题 */
.file-detail-section {
    margin-bottom: 18px;
}
.file-detail-section-title {
    font-size: .86em; font-weight: 700; color: #5a4d40;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.file-detail-section-title .count {
    font-size: .78em; font-weight: 500; color: #6b5e51;
    background: #f5f0e8; padding: 2px 9px; border-radius: 10px;
}

/* 详情中的线索卡片（简化版） */
.file-detail-clue {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 12px 14px; border-radius: 10px; background: #f8f4ed;
    margin-bottom: 8px; font-size: .9em; line-height: 1.6;
    border-left: 3px solid var(--color-primary);
    transition: background .12s;
}
.file-detail-clue:hover { background: #f0e9de; }
.file-detail-clue-body { flex: 1; cursor: pointer; min-width: 0; }
.file-detail-clue .clue-type-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 5px; vertical-align: middle;
    background: var(--color-primary);
}
.file-detail-clue .clue-preview {
    color: #3d322b; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.file-detail-clue-del {
    flex-shrink: 0; background: none; border: none; color: #b0a89e;
    cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center;
    transition: all .15s; margin-top: 1px;
}
.file-detail-clue-del:hover { color: #e53e3e; background: rgba(229,62,62,.08); }
.file-detail-clue-del svg { width: 14px; height: 14px; }

/* 详情中的摘要区块 */
.file-detail-summary {
    padding: 14px; border-radius: 10px; background: #fff7e0;
    font-size: .9em; line-height: 1.7; color: #5a4a0a;
    margin-bottom: 16px; border: 1px solid rgba(232, 196, 104, .25);
}
.file-detail-empty {
    text-align: center; padding: 24px; color: #8a7b6b;
    font-size: .85em; background: #faf8f4; border-radius: 10px;
}
/* 资料详情 - 照片信息（AI 识图 + EXIF） */
.file-detail-photo {
    background: #f2f6fa;
    border: 1px solid rgba(138, 164, 194, .28);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0 16px;
}
.file-detail-photo-title {
    font-size: 13px; font-weight: 600;
    color: var(--color-text, #3a3028);
    margin-bottom: 6px;
}
.file-detail-photo-desc {
    font-size: 13px; line-height: 1.7;
    color: var(--color-text, #3a3028);
    white-space: pre-wrap; word-break: break-word;
    margin-bottom: 8px;
}
.file-detail-photo-desc:last-child { margin-bottom: 0; }
.file-detail-photo-exif {
    border-top: 1px dashed rgba(138, 164, 194, .4);
    padding-top: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.file-detail-photo-exif-row {
    display: flex; gap: 8px; font-size: 12px; line-height: 1.5;
}
.file-detail-photo-exif-key {
    color: var(--color-ink-light, #7a6b5d);
    flex-shrink: 0; min-width: 168px;
}

/* 资料详情 - 照片人物标注（来自聊天，优先展示） */
.file-detail-photo-annotations {
    background: #fdf6ec;
    border-color: rgba(184, 134, 11, .32);
}
.file-detail-photo-annotations .file-detail-photo-title {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.photo-ann-source {
    font-size: 11px; font-weight: 400; color: var(--color-ink-light, #8a7b6b);
    background: rgba(184,134,11,.12); padding: 1px 7px; border-radius: 10px;
}
.photo-ann-refresh {
    margin-left: auto; border: none; background: transparent;
    color: var(--color-primary); font-size: 12px; cursor: pointer;
    padding: 2px 6px; border-radius: 6px; font-family: var(--font-ui);
}
.photo-ann-refresh:hover { background: rgba(139,115,85,.12); }
.photo-ann-people {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px;
}
.photo-ann-person {
    background: #fff; border: 1px solid rgba(184,134,11,.28);
    border-radius: 10px; padding: 8px 10px; flex: 1 1 140px; min-width: 130px;
}
.photo-ann-person-head { display: flex; align-items: center; gap: 6px; }
.photo-ann-person-name { font-size: 13px; font-weight: 600; color: var(--color-text, #3a3028); }
.photo-ann-person-relation {
    font-size: 11px; color: #fff; background: var(--color-primary);
    padding: 1px 8px; border-radius: 10px;
}
.photo-ann-person-note {
    font-size: 12px; color: var(--color-ink-light, #7a6b5d);
    margin-top: 4px; line-height: 1.5;
}
.photo-ann-rows {
    border-top: 1px dashed rgba(184,134,11,.35);
    padding-top: 8px; margin-top: 4px;
    display: flex; flex-direction: column; gap: 4px;
}
.photo-ann-keyinfo {
    margin: 6px 0 0; padding-left: 20px;
    font-size: 12px; line-height: 1.7; color: var(--color-text, #3a3028);
}
.photo-ann-keyinfo li { margin-bottom: 2px; }
/* AI 识图描述默认折叠 */
.file-detail-photo-desc-details {
    border-top: 1px dashed rgba(138, 164, 194, .4);
    padding-top: 8px; margin-top: 8px;
}
.file-detail-photo-desc-details summary {
    font-size: 12px; color: var(--color-primary);
    cursor: pointer; user-select: none; font-family: var(--font-ui);
    outline: none;
}
.file-detail-photo-desc-details summary:hover { text-decoration: underline; }
.file-detail-photo-desc-details .file-detail-photo-desc { margin-top: 6px; margin-bottom: 0; }
.file-detail-photo-exif-val {
    color: var(--color-text, #3a3028);
    word-break: break-word;
}

/* 详情底部操作栏 */
.file-detail-footer {
    display: flex; gap: 8px; padding: 12px 16px;
    border-top: 1px solid #ede8df; flex-shrink: 0; background: #fffdf9;
}
.file-detail-footer button {
    flex: 1; padding: 10px; border-radius: 10px; font-size: .85em;
    font-weight: 500; cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: 6px; transition: all .15s;
    border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text);
}
.file-detail-footer button:hover { background: var(--color-hover); }
.file-detail-footer .btn-primary {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.file-detail-footer .btn-danger { color: var(--color-danger); border-color: var(--color-danger); }
.file-detail-footer .btn-danger:hover { background: var(--color-danger); color: #fff; }
.file-detail-footer .file-detail-btn-restore {
    flex: 1.2;
    background: linear-gradient(135deg, #b8860b, #d4a017) !important;
    color: #fff !important; border: none !important;
    font-weight: 600; box-shadow: 0 2px 6px rgba(184,134,11,0.25);
}
.file-detail-footer .file-detail-btn-restore:hover {
    background: linear-gradient(135deg, #a6780a, #c29215) !important;
    box-shadow: 0 4px 10px rgba(184,134,11,0.35);
    transform: translateY(-1px);
}
.file-detail-footer .file-detail-btn-restore .restore-cost-badge {
    background: rgba(255,255,255,0.35); color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 7px;
    border-radius: 10px; margin-left: 4px;
}

/* 跳转线索库链接 */
.file-detail-jump {
    display: flex; align-items: center; gap: 4px; padding: 8px 0;
    font-size: .8em; color: var(--color-primary); cursor: pointer;
    text-decoration: none; margin-top: 4px;
}
.file-detail-jump:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .file-detail-panel {
        width: 100vw; max-width: 100vw; max-height: 100vh;
        border-radius: 0; height: 100vh;
    }
}

/* ============================================================
   v8.02 P0+P1 UX 修复
   ============================================================ */

/* P1-8: mention 下拉移动端高度限制 */
@media (max-width: 768px) {
    .mention-dropdown {
        max-height: 40vh !important;
    }
}

/* P1-7: 充值/导出弹窗移动端底部抽屉样式 */
@media (max-width: 768px) {
    .recharge-modal {
        top: auto !important; bottom: 0; left: 0; right: 0;
        transform: translateY(100%);
        width: 100% !important; max-width: 100% !important;
        max-height: 85vh; border-radius: 16px 16px 0 0;
        animation: none;
    }
    .recharge-modal.show {
        transform: translateY(0);
    }
    .export-dialog {
        width: 100% !important; max-width: 100% !important;
        max-height: 85vh; border-radius: 14px 14px 0 0;
    }
    .export-overlay {
        align-items: flex-end;
    }
    .export-overlay .export-dialog {
        animation: slideUpDrawer 0.25s ease;
    }
    @keyframes slideUpDrawer {
        from { opacity: 0; transform: translateY(100%); }
        to { opacity: 1; transform: translateY(0); }
    }
}

/* P1-12: 大屏（>1600px）适配 — 限制最大宽度 + 提高字体 */
@media (min-width: 1600px) {
    .nav-inner { max-width: 1600px; margin: 0 auto; }
    .main-layout { max-width: 1600px; margin: 0 auto; }
    .outline-pane { width: 280px; }
    .ai-pane { width: 420px; }
    .draft-body {
        max-width: 820px; margin: 0 auto;
        font-size: 17px; line-height: 1.85;
    }
    .chat-messages { max-width: 720px; margin: 0 auto; }
    .bookshelf-inner { max-width: 1400px; margin: 0 auto; }
}

/* P1-5: 离线提示横条 */
.offline-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 99998;
    background: #c0392b; color: #fff; text-align: center;
    padding: 6px 16px; font-size: 13px; font-family: var(--font-ui);
    display: none; align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    animation: slideDownBanner 0.3s ease;
}
.offline-banner.show { display: flex; }
@keyframes slideDownBanner {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* P1-6: 聊天滚动加载指示器 */
.scroll-load-hint {
    text-align: center; padding: 8px 0; font-size: 12px;
    color: var(--icon-color); display: none;
}
.scroll-load-hint.show { display: block; }
.scroll-load-hint .hint-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--tint-15); border-top-color: var(--color-primary);
    border-radius: 50%; animation: hintSpin 0.8s linear infinite;
    vertical-align: middle; margin-right: 6px;
}
@keyframes hintSpin { to { transform: rotate(360deg); } }

/* P1-10: SSE 断流重试提示 */
.sse-retry-banner {
    margin: 8px 12px; padding: 12px 16px; border-radius: 10px;
    background: #fdf6ec; border: 1px solid #f0d9a8;
    font-size: 13px; color: #8a6d3b; display: flex;
    align-items: center; gap: 10px; justify-content: space-between;
}
.sse-retry-banner button {
    padding: 4px 14px; border-radius: 6px; border: none;
    background: var(--color-primary); color: #fff; font-size: 12px;
    cursor: pointer; white-space: nowrap;
}
.sse-retry-banner button:hover { opacity: 0.85; }

/* v8.03 资料详情 - 用户说明区块 */
.file-detail-description {
    background: var(--color-surface-2, #f9f5f0);
    border: 1px solid var(--color-border-light, #e8ddd0);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0;
}
.file-detail-description-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.file-detail-description-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #3a3028);
}
.file-detail-description-edit-btn {
    background: none; border: 1px solid var(--color-border, #d4c9b8);
    border-radius: 6px; padding: 3px 12px; font-size: 12px;
    color: var(--color-primary, #b8860b); cursor: pointer;
    transition: all .2s;
}
.file-detail-description-edit-btn:hover {
    background: var(--color-primary, #b8860b); color: #fff;
}
.file-detail-description-text {
    font-size: 13px; line-height: 1.6;
    color: var(--color-text, #3a3028);
    white-space: pre-wrap; word-break: break-word;
}
.file-detail-description-placeholder {
    color: var(--color-text-light, #999);
    font-style: italic; font-size: 12px;
}
.file-detail-description-textarea {
    width: 100%; min-height: 80px;
    border: 1px solid var(--color-border, #d4c9b8);
    border-radius: 8px; padding: 8px 10px;
    font-size: 13px; line-height: 1.6;
    font-family: inherit; resize: vertical;
    background: #fff; color: var(--color-text, #3a3028);
    box-sizing: border-box;
}
.file-detail-description-textarea:focus {
    outline: none; border-color: var(--color-primary, #b8860b);
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.15);
}
.file-detail-description-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 8px;
}
.btn-sm {
    padding: 5px 14px; font-size: 12px; border-radius: 6px;
}

/* v8.03 重新提炼加载状态 */
.file-detail-reanalyzing {
    opacity: 0.6; pointer-events: none;
}
.file-detail-reanalyzing-hint {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 0; color: var(--color-text-light, #999);
    font-size: 13px;
}
.reanalyze-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--color-border, #ddd);
    border-top-color: var(--color-primary, #b8860b);
    border-radius: 50%;
    animation: reanalyze-spin 0.8s linear infinite;
}
@keyframes reanalyze-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================ */
/* 引用选择器 */
/* ============================================================ */

/* v8.32 老照片修复 zone */
.file-detail-restore-zone { margin: 0 0 16px; }
.file-detail-restore-loading {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; background: var(--color-hover, #f7f3ee);
    border-radius: 10px; border: 1px dashed var(--color-border, #e0d5c8);
}
.file-detail-restore-loading .reanalyze-spinner {
    width: 20px; height: 20px; border-width: 3px;
}
.file-detail-restore-result {
    background: var(--color-hover, #f7f3ee); border-radius: 12px;
    padding: 16px; border: 1px solid var(--color-border, #e0d5c8);
}
.restore-result-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px dashed var(--color-border, #e0d5c8);
}
.restore-result-title {
    font-size: 15px; font-weight: 700; color: var(--color-text, #3d2b1f);
}
.restore-result-cost {
    font-size: 12px; color: var(--color-text-light, #8c7b6b);
    background: rgba(184,134,11,0.1); padding: 3px 10px;
    border-radius: 20px; font-weight: 600;
}
.restore-compare {
    display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.restore-compare-item {
    flex: 1; text-align: center; cursor: pointer;
    transition: transform 0.2s;
}
.restore-compare-item:hover { transform: translateY(-2px); }
.restore-compare-img-wrap {
    position: relative; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--color-border, #e0d5c8);
    background: #fff;
}
.restore-compare-item img {
    display: block; width: 100%; max-height: 320px; object-fit: contain;
    border-radius: 10px;
}
.restore-img-hint {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 6px 8px; font-size: 11px; color: #fff;
    background: rgba(61,43,31,0.65); text-align: center;
    opacity: 0; transition: opacity 0.2s;
}
.restore-compare-img-wrap:hover .restore-img-hint { opacity: 1; }
.restore-compare-label {
    font-size: 13px; color: var(--color-text-light, #8c7b6b);
    margin-bottom: 8px; font-weight: 700;
}
.restore-compare-arrow {
    font-size: 28px; color: var(--color-primary, #b8860b);
    flex-shrink: 0;
}
.restore-actions {
    display: flex; gap: 10px; justify-content: center;
}
.restore-actions button { font-size: 13px; padding: 8px 14px; }
.btn-restore-photo {
    padding: 7px 12px 7px 14px; font-size: 13px; border-radius: 7px;
    background: linear-gradient(135deg, #b8860b, #d4a017); color: #fff;
    border: none; cursor: pointer; display: inline-flex;
    align-items: center; gap: 6px; transition: all 0.2s;
    white-space: nowrap;
}
.btn-restore-photo:hover { box-shadow: 0 2px 8px rgba(184,134,11,0.35); transform: translateY(-1px); }
.btn-restore-photo.processing {
    opacity: 0.7; pointer-events: none;
}
.btn-restore-photo .reanalyze-spinner {
    border-color: rgba(255,255,255,0.4); border-top-color: #fff;
}
.restore-cost-badge {
    background: rgba(255,255,255,0.22); color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 6px;
    border-radius: 10px; margin-left: 2px;
}
.restore-cost-mini {
    font-size: 10px; opacity: 0.85; margin-left: 2px;
}
.restore-extracting {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px; margin-top: 10px;
    background: #f7f3ee; border-radius: 8px;
    font-size: 12px; color: var(--color-text-light);
}
.restore-extracting .reanalyze-spinner {
    width: 14px; height: 14px; border-width: 2px;
    border-color: rgba(184,134,11,0.25); border-top-color: #b8860b;
}
.restore-extracting-fallback {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 10px; margin-top: 10px;
    background: #fef9ed; border-radius: 8px;
    font-size: 12px; color: var(--color-text);
}
.restore-extracting-fallback .link-btn {
    background: none; border: none; color: var(--color-primary);
    font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
    text-decoration: underline;
}
.file-detail-restore-error {
    padding: 12px; background: #fef0f0; border-radius: 8px;
    color: #c0392b; font-size: 13px; text-align: center;
}

/* 修复前后全屏对比 overlay */
.restore-comparison-overlay {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
}
.restore-comparison-backdrop {
    position: absolute; inset: 0;
    background: rgba(30, 20, 15, 0.92);
    cursor: zoom-out;
}
.restore-comparison-content {
    position: relative; z-index: 1;
    width: 95vw; max-width: 1400px; max-height: 95vh;
    display: flex; flex-direction: column;
}
.restore-comparison-close {
    position: absolute; top: -40px; right: 0;
    background: rgba(255,255,255,0.15); color: #fff;
    border: none; border-radius: 50%; width: 32px; height: 32px;
    font-size: 16px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}
.restore-comparison-close:hover { background: rgba(255,255,255,0.3); }
.restore-comparison-title {
    text-align: center; color: rgba(255,255,255,0.85);
    font-size: 14px; margin-bottom: 12px;
}
.restore-comparison-images {
    display: flex; gap: 16px; overflow: hidden;
    border-radius: 12px; flex: 1;
}
.restore-comparison-panel {
    flex: 1; background: #000; display: flex; flex-direction: column;
    border-radius: 12px; overflow: hidden;
}
.restore-comparison-panel .restore-comparison-label {
    color: #fff; background: rgba(184,134,11,0.9);
    margin: 0; padding: 8px; font-size: 13px; font-weight: 700;
}
.restore-comparison-panel img {
    width: 100%; height: calc(95vh - 80px); object-fit: contain;
    display: block;
}

/* ============================================================ */
/* 引用选择器 (original) */
/* ============================================================ */
.cite-sel-overlay {
    position: fixed; inset: 0;
    background: rgba(61, 43, 31, 0.45);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
.cite-sel-dialog {
    background: var(--color-bg);
    border-radius: 16px;
    width: 90%; max-width: 480px; max-height: 70vh;
    box-shadow: 0 24px 64px rgba(61, 43, 31, 0.25);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.cite-sel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 0;
}
.cite-sel-title {
    font-size: 16px; font-weight: 600; color: var(--color-ink);
}
.cite-sel-close {
    width: 32px; height: 32px; border: none; border-radius: 8px;
    background: var(--color-bg-hover, #f5f0eb);
    color: var(--color-ink-light);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 18px; transition: background 0.2s;
}
.cite-sel-close:hover { background: var(--color-border); }
.cite-sel-tabs {
    display: flex; gap: 4px; padding: 12px 24px 0;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto; white-space: nowrap;
}
.cite-sel-tab {
    padding: 8px 14px; border: none; border-radius: 8px 8px 0 0;
    background: transparent; color: var(--color-ink-light);
    font-size: 13px; cursor: pointer; transition: all 0.2s;
    white-space: nowrap; flex-shrink: 0;
}
.cite-sel-tab.active {
    background: var(--tint-05, rgba(232,145,74,0.08));
    color: var(--color-primary); font-weight: 600;
}
.cite-sel-tab:hover:not(.active) { color: var(--color-ink); }
.cite-sel-list {
    flex: 1; overflow-y: auto; padding: 16px 24px;
    min-height: 120px; max-height: 45vh;
}
.cite-sel-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    cursor: pointer; transition: background 0.15s;
    margin-bottom: 4px;
}
.cite-sel-item:hover { background: var(--tint-05, rgba(232,145,74,0.08)); }
.cite-sel-item-icon {
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--tint-05, rgba(232,145,74,0.1));
    color: var(--color-primary); font-size: 14px;
}
.cite-sel-item-body { flex: 1; min-width: 0; }
.cite-sel-item-text {
    font-size: 13px; color: var(--color-ink); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.cite-sel-item-meta {
    font-size: 11px; color: var(--color-ink-light); margin-top: 2px;
}
.cite-sel-empty {
    text-align: center; padding: 32px 0; color: var(--color-ink-light);
    font-size: 13px;
}
.cite-sel-empty svg { width: 32px; height: 32px; margin-bottom: 8px; opacity: 0.4; }
.cite-sel-footer {
    padding: 12px 24px 16px;
    border-top: 1px solid var(--color-border);
    display: flex; gap: 8px; justify-content: flex-end;
}
.cite-sel-custom-btn {
    padding: 8px 16px; border: 1px solid var(--color-border);
    border-radius: 8px; background: var(--color-card);
    color: var(--color-ink-light); font-size: 13px; cursor: pointer;
    transition: all 0.2s;
}
.cite-sel-custom-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ============================================================
   回收站 & AI 总结弹窗
   ============================================================ */
.recycle-modal-content { max-width: 560px; }
.summary-modal-content { max-width: 520px; }
.recycle-hint {
    padding: 12px 24px; font-size: 13px; color: var(--color-ink-light);
    background: var(--tint-08); border-bottom: 1px solid var(--color-border-light);
}
.recycle-body { padding: 16px 24px; }
.recycle-card {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 16px; margin-bottom: 10px;
    border: 1px solid var(--color-border-light); border-radius: 12px;
    background: var(--color-card);
}
.recycle-card-info { flex: 1; min-width: 0; }
.recycle-card-title { font-weight: 600; color: var(--color-ink); margin-bottom: 6px; word-break: break-all; }
.recycle-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--color-ink-light); }
.recycle-type-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    background: var(--tint-10); color: var(--color-primary-dark); font-size: 11px;
}
.recycle-card-preview {
    margin-top: 6px; font-size: 12px; color: var(--color-ink-light);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recycle-expiring { color: var(--color-danger); font-weight: 600; }
.recycle-card-actions { display: flex; flex-direction: column; gap: 8px; flex: none; }
.recycle-card-actions .btn-primary { padding: 8px 14px; font-size: 13px; }
.recycle-card-actions .btn-danger {
    padding: 8px 14px; font-size: 13px; border-radius: 8px;
    border: 1px solid var(--color-danger); color: var(--color-danger);
    background: transparent; cursor: pointer;
}
.recycle-card-actions .btn-danger:hover { background: var(--color-danger); color: #fff; }
.summary-body { white-space: pre-wrap; line-height: 1.7; color: var(--color-ink); }
.bookshelf-trash-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px; border: 1px solid var(--color-border);
    border-radius: 20px; background: var(--color-card); color: var(--color-ink);
    font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--font-ui);
    transition: all 0.2s;
}
.bookshelf-trash-btn:hover { background: var(--tint-10); border-color: var(--color-danger); color: var(--color-danger); }
@media (max-width: 640px) {
    .recycle-card { flex-direction: column; align-items: stretch; }
    .recycle-card-actions { flex-direction: row; justify-content: flex-end; }
}


/* ============================================================
   工具集：图生图（老照片修复 / 扩图 / 去背景）
   ============================================================ */
.i2i-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.i2i-tab { flex: 1; min-width: 120px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-card); color: var(--color-ink-light); font-size: 14px; cursor: pointer; transition: all .2s ease; }
.i2i-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.i2i-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; box-shadow: 0 3px 10px var(--tint-10); }
.i2i-option { display: flex; flex-direction: column; gap: 14px; }
.i2i-model-row { display: flex; flex-direction: column; gap: 6px; }
.i2i-model-hint { font-size: 12px; color: var(--color-ink-lighter); line-height: 1.6; }
.i2i-example { border: 1px dashed var(--color-border); border-radius: 12px; padding: 12px; background: var(--color-panel-bg, #F6F0EC); }
.i2i-example-title { font-size: 13px; font-weight: 600; color: var(--color-ink); margin-bottom: 10px; }
.i2i-example-imgs { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.i2i-example-imgs figure { margin: 0; text-align: center; }
.i2i-example-imgs img { max-width: 176px; max-height: 240px; width: auto; height: auto; object-fit: contain; border-radius: 10px; border: 1px solid var(--color-border-light); background: #fff; box-shadow: 0 4px 12px var(--tint-08); }
.i2i-example-imgs figcaption { margin-top: 4px; font-size: 11px; color: var(--color-ink-lighter); }
.i2i-example-arrow { font-size: 18px; color: var(--color-ink-lighter); }
.i2i-example-transparent img { object-fit: contain; background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; }
.i2i-example-btn { margin-top: 10px; padding: 7px 14px; border: 1px solid var(--color-primary); border-radius: 9px; background: var(--color-primary-bg, #FAF3F0); color: var(--color-primary); font-size: 12.5px; cursor: pointer; transition: all .2s ease; }
.i2i-example-btn:hover { background: var(--color-primary); color: #fff; }
.i2i-example-btn:disabled { opacity: .6; cursor: default; }
.i2i-merge { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.i2i-merge-controls { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.i2i-merge-demo { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 12px; border: 1px dashed var(--color-border); border-radius: 12px; background: var(--color-panel-bg, #F6F0EC); }
.i2i-merge-demo .i2i-example-title { margin-bottom: 0; }
.i2i-merge-demo .i2i-example-imgs { gap: 8px; }
.i2i-merge-demo .i2i-example-imgs img { max-width: 168px; max-height: 228px; }
.i2i-merge-demo .i2i-example-btn { margin-top: 0; align-self: center; }
@media (max-width: 820px) {
    .i2i-merge { grid-template-columns: 1fr; }
    .i2i-merge-demo { position: static; }
}




/* 工具集：图生图扩展（上色 / 风格化 / 局部重绘 / 去水印 / 超分 / 指令编辑 / 封面裁剪 / 批量修复 / 提取文字） */
.i2i-tab { min-width: 108px; padding: 8px 10px; font-size: 13px; }
.i2i-demo-text { font-size: 12.5px; line-height: 1.7; color: var(--color-ink-light); }
.i2i-mask-editor { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px dashed var(--color-border); border-radius: 12px; background: var(--color-panel-bg, #F6F0EC); }
.i2i-mask-canvas { width: 100%; max-width: 460px; border-radius: 8px; border: 1px solid var(--color-border-light); background: #fff; cursor: crosshair; touch-action: none; }
.i2i-mask-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.i2i-mask-tool { flex: 1; min-width: 150px; margin-bottom: 0; }
.i2i-mask-mode.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.i2i-mask-upload { margin-bottom: 0; }
.i2i-mask-hint { font-size: 12px; color: var(--color-ink-lighter); line-height: 1.6; }
.i2i-batch-count { font-size: 12.5px; color: var(--color-primary); font-weight: 600; min-height: 18px; }
.i2i-batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.i2i-batch-item { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.i2i-batch-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-border-light); background: #fff; }
.i2i-batch-index { font-size: 12px; color: var(--color-ink-lighter); }
.i2i-ocr-result { display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
   人生图谱：书架 · 时间线 · 人物 三要素关联视图
   视觉风格：与登录页「人生舞台」一致 —— 暗场舞台 + 金色追光
   ============================================================ */
.graph-page {
  height: calc(100vh - 60px); padding: 12px 20px 6px; box-sizing: border-box; overflow: hidden;
  color: #F3E7CE;
  background:
    radial-gradient(90% 60% at 50% -8%, rgba(255, 227, 188, 0.16), rgba(255, 227, 188, 0) 62%),
    radial-gradient(120% 90% at 50% 118%, rgba(120, 92, 160, 0.12), rgba(120, 92, 160, 0) 60%),
    linear-gradient(180deg, #141126 0%, #100E1E 55%, #0B0916 100%);
}
.graph-page-inner { display: flex; flex-direction: column; height: 100%; max-width: 1500px; margin: 0 auto; }
.graph-page-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding-bottom: 8px; position: relative; }
.graph-page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(232, 184, 126, 0.55), rgba(232, 184, 126, 0.08) 55%, transparent); }
.graph-page-kicker { font-size: 12px; letter-spacing: 5px; color: #E8B87E; font-weight: 500; }
.graph-page-title { font-family: var(--font-content, "Noto Serif SC", serif); font-size: 23px; color: #FFF6E4; font-weight: 700; letter-spacing: 1px; text-shadow: 0 0 26px rgba(255, 227, 188, 0.28); }
.graph-page-sub { font-size: 12px; color: rgba(232, 184, 126, 0.72); letter-spacing: 1px; margin-top: 2px; }
.graph-page-chips { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.lg-chip { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 246, 228, 0.06); color: #D8CDB8; border: 1px solid rgba(232, 184, 126, 0.22); white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lg-chip-accent { background: linear-gradient(135deg, #E8B87E, #C4733E); color: #2A1B0E; border-color: transparent; font-weight: 600; box-shadow: 0 2px 14px rgba(196, 115, 62, 0.35); }
.graph-page-refresh { font-size: 12px; padding: 4px 12px; border-radius: 9px; border: 1px solid rgba(232, 184, 126, 0.25); background: rgba(255, 246, 228, 0.05); color: #D8CDB8; cursor: pointer; transition: all .2s ease; }
.graph-page-refresh:hover { border-color: #E8B87E; color: #E8B87E; background: rgba(255, 246, 228, 0.08); }
.graph-page-body { flex: 1; display: flex; gap: 0; min-height: 0; position: relative; }
.lg-canvas { position: relative; flex: 1; min-width: 0; border-radius: 18px; overflow: auto; border: 1px solid rgba(232, 184, 126, 0.18); box-shadow: inset 0 0 60px rgba(10, 7, 22, 0.55), 0 10px 40px rgba(5, 3, 12, 0.45); background:
  radial-gradient(120% 95% at 50% -12%, rgba(255, 227, 188, 0.20), rgba(255, 227, 188, 0) 55%),
  radial-gradient(150% 105% at 50% 118%, rgba(255, 227, 188, 0.10), rgba(255, 227, 188, 0) 55%),
  radial-gradient(125% 105% at 50% 50%, rgba(20, 16, 40, 0) 42%, rgba(8, 6, 20, 0.92) 100%),
  #0F0D1C; }
.lg-canvas::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .9;
  background-image:
    radial-gradient(circle at 22% 28%, rgba(255, 227, 188, 0.34) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 72% 18%, rgba(255, 227, 188, 0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 66%, rgba(255, 227, 188, 0.24) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 86% 58%, rgba(255, 227, 188, 0.28) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 12% 82%, rgba(255, 227, 188, 0.2) 0 1px, transparent 2px);
  background-size: 300px 260px, 240px 300px, 280px 240px, 260px 280px, 320px 300px;
  background-position: 0 0, 40px 60px, 90px 20px, 30px 120px, 120px 40px; }
.lg-canvas::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent 32%, rgba(255, 246, 228, 0.05) 50%, transparent 68%);
  background-size: 260% 100%; animation: lg-sweep 10s ease-in-out infinite; }
@keyframes lg-sweep { 0%, 100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
.lg-canvas svg { width: 100%; height: 100%; min-width: 820px; min-height: 560px; display: block; }
.lg-detail { position: absolute; top: 10px; right: 10px; bottom: 10px; width: 262px; z-index: 5; background: rgba(22, 18, 40, 0.66); border: 1px solid rgba(232, 184, 126, 0.18); border-radius: 16px; padding: 14px; overflow: auto; box-sizing: border-box; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 40px rgba(5, 3, 12, 0.55); }
.lg-detail-empty { color: rgba(216, 205, 184, 0.62); font-size: 13px; line-height: 1.8; }
.lg-detail-title { font-family: var(--font-content, "Noto Serif SC", serif); font-size: 17px; font-weight: 700; color: #FFF6E4; margin-bottom: 2px; }
.lg-detail-sub { font-size: 12px; color: rgba(232, 184, 126, 0.75); margin-bottom: 10px; letter-spacing: .5px; }
.lg-detail-desc { font-size: 13px; color: #D8CDB8; line-height: 1.8; margin-bottom: 6px; }
.lg-detail-sec { font-size: 12px; color: rgba(232, 184, 126, 0.85); margin: 14px 0 7px; font-weight: 600; letter-spacing: 1px; }
.lg-link { display: inline-block; margin: 2px 4px 2px 0; padding: 4px 11px; font-size: 12px; border-radius: 999px; background: rgba(255, 246, 228, 0.07); color: #F0E2C4; border: 1px solid rgba(232, 184, 126, 0.24); cursor: pointer; transition: all .18s ease; }
.lg-link:hover { background: linear-gradient(135deg, #E8B87E, #C4733E); color: #2A1B0E; border-color: transparent; }
.lg-act { display: block; width: 100%; margin-top: 16px; padding: 9px 0; font-size: 13px; font-weight: 600; border-radius: 10px; border: none; background: linear-gradient(135deg, #E8B87E, #C4733E); color: #2A1B0E; cursor: pointer; box-shadow: 0 4px 16px rgba(196, 115, 62, 0.35); transition: all .2s ease; }
.lg-act:hover { opacity: .92; transform: translateY(-1px); }
.lg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 7px 4px 0; font-size: 12px; color: rgba(216, 205, 184, 0.7); }
.lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; box-shadow: 0 0 8px currentColor; }
.lg-dot-ch { background: #8FBF9F; color: rgba(143, 191, 159, 0.8); }
.lg-dot-c { background: #E8B87E; color: rgba(232, 184, 126, 0.8); }
.lg-dot-e { background: #C9A227; color: rgba(201, 162, 39, 0.8); }
.lg-legend-note { opacity: .55; }
.lg-node { cursor: pointer; }
.lg-ch rect { fill: rgba(122, 160, 139, 0.10); stroke: rgba(143, 191, 159, 0.45); stroke-width: 1; }
.lg-ch .lg-node-title { fill: #EAF3EC; font-size: 13px; font-weight: 600; }
.lg-ch .lg-node-meta { fill: rgba(159, 184, 170, 0.75); font-size: 10px; }
.lg-c circle { fill: #E8B87E; }
.lg-c .lg-node-initial { fill: #241505; font-size: 16px; font-weight: 700; }
.lg-c .lg-node-title { fill: #F3E7CE; font-size: 12px; }
.lg-c .lg-node-year { fill: rgba(169, 150, 116, 0.85); font-size: 10px; }
.lg-e circle { fill: #C9A227; }
.lg-e .lg-node-title { fill: #D8CDB8; font-size: 11px; }
.lg-e .lg-node-year { fill: rgba(169, 150, 116, 0.85); font-size: 10px; }
.lg-edge { fill: none; stroke-width: 1; opacity: .5; }
.lg-k-cc { stroke: rgba(143, 191, 159, 0.55); }
.lg-k-ce { stroke: rgba(232, 184, 126, 0.6); }
.lg-k-ec { stroke: rgba(160, 150, 200, 0.5); }
.lg-node.dim, .lg-edge.dim { opacity: .06; }
.lg-node.lg-ch.hot rect { stroke: #E8B87E; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(232, 184, 126, 0.55)); }
.lg-node.lg-c.hot circle { stroke: #FFF6E4; stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(232, 184, 126, 0.75)); }
.lg-node.lg-e.hot circle { stroke: #FFF6E4; stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.75)); }
.lg-edge.hot { opacity: .95; stroke-width: 2; }
.lg-axis-line { stroke: rgba(232, 184, 126, 0.30); stroke-width: 1.5; stroke-dasharray: 2 5; }
.lg-axis-tick { stroke: rgba(232, 184, 126, 0.35); }
.lg-axis-label { fill: rgba(169, 150, 116, 0.8); font-size: 10px; letter-spacing: 1px; }
.lg-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: rgba(216, 205, 184, 0.75); text-align: center; gap: 10px; padding: 24px; box-sizing: border-box; border-radius: 18px; border: 1px solid rgba(232, 184, 126, 0.15); background:
  radial-gradient(80% 60% at 50% 0%, rgba(255, 227, 188, 0.14), rgba(255, 227, 188, 0) 60%),
  radial-gradient(120% 100% at 50% 110%, rgba(8, 6, 20, 0.8) 30%, rgba(8, 6, 20, 0) 75%),
  #0F0D1C; }
.lg-empty-title { font-family: var(--font-content, "Noto Serif SC", serif); font-size: 22px; font-weight: 700; color: #FFF6E4; text-shadow: 0 0 22px rgba(255, 227, 188, 0.25); }
.lg-empty-hint { max-width: 480px; font-size: 13px; line-height: 1.9; opacity: .8; }
.lg-empty-btn { margin-top: 12px; padding: 9px 30px; border: none; border-radius: 10px; background: linear-gradient(135deg, #E8B87E, #C4733E); color: #2A1B0E; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 18px rgba(196, 115, 62, 0.35); transition: all .2s ease; }
.lg-empty-btn:hover { opacity: .92; transform: translateY(-1px); }
@media (max-width: 900px) {
  .graph-page { height: auto; min-height: calc(100vh - 120px); }
  .graph-page-body { flex-direction: column; }
  .lg-detail { position: static; top: auto; right: auto; bottom: auto; width: 100%; max-height: 220px; margin-top: 10px; }
  .lg-canvas { min-height: 420px; }
}


/* ============================================================
   用户反馈页面
   ============================================================ */
.feedback-page { display: none; flex-direction: column; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto; background: var(--color-bg); }
.feedback-page.active { display: flex; }
.feedback-inner { max-width: 1000px; margin: 0 auto; padding: 32px 24px; width: 100%; }
.feedback-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.feedback-title { font-family: var(--font-content); font-size: 24px; font-weight: 700; color: var(--color-ink); }
.feedback-subtitle { font-size: 14px; color: var(--color-ink-light); margin-top: 4px; }

/* 提交表单 */
.feedback-card {
    background: var(--color-card); border: 1px solid var(--color-border-light);
    border-radius: 16px; padding: 24px; margin-bottom: 28px;
    box-shadow: 0 2px 10px var(--tint-06);
}
.feedback-card-title { font-family: var(--font-content); font-size: 17px; font-weight: 700; color: var(--color-ink); margin-bottom: 16px; }
.feedback-types { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.feedback-type {
    padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 20px;
    background: var(--color-card); color: var(--color-ink-light);
    font-size: 13px; font-family: var(--font-ui); cursor: pointer; transition: all 0.15s;
}
.feedback-type:hover { border-color: var(--color-primary); color: var(--color-primary); }
.feedback-type.active { background: var(--tint-10); border-color: var(--color-primary); color: var(--color-primary-dark); font-weight: 600; }
.feedback-textarea {
    width: 100%; min-height: 120px; padding: 12px 14px; resize: vertical;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-bg); color: var(--color-ink);
    font-size: 14px; line-height: 1.7; font-family: var(--font-ui); box-sizing: border-box;
    transition: border-color .15s;
}
/* v8.41: 反馈输入框改为富文本 contenteditable，图片内联显示 */
.feedback-rich-input {
    overflow-y: auto; white-space: pre-wrap; word-break: break-word;
    outline: none; min-height: 120px; text-align: left;
}
.feedback-rich-input:empty::before {
    content: attr(data-placeholder);
    color: var(--color-ink-light);
    pointer-events: none;
    user-select: none;
}
/* v8.41: 参考 Codex 输入框 — 图片作为内联块嵌入文字流，保持比例，悬停显示删除按钮 */
.feedback-inline-img {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
    margin: 2px 8px 2px 0;
    max-width: 100%;
}
.feedback-inline-img img {
    display: block;
    max-width: 240px;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    background: #fff;
    cursor: default;
}
.feedback-inline-img .feedback-inline-img-rm {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
}
.feedback-inline-img:hover .feedback-inline-img-rm {
    display: inline-flex;
}
.feedback-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--tint-10); }
.feedback-upload { margin-top: 12px; }
.feedback-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feedback-upload-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1px dashed var(--color-primary); border-radius: 10px;
    background: var(--tint-06); color: var(--color-primary-dark);
    font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font-ui);
    transition: all 0.15s;
}
.feedback-upload-btn:hover { background: var(--tint-10); }
.feedback-upload-ico { font-size: 15px; }
.feedback-upload-hint { font-size: 12px; color: var(--color-ink-light); }
.feedback-file-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.feedback-file-item {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 240px; padding: 5px 6px 5px 5px;
    background: var(--color-card); border: 1px solid var(--color-border-light); border-radius: 10px;
}
.feedback-file-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; }
.feedback-file-ico { font-size: 18px; padding: 0 2px; }
.feedback-file-name {
    font-size: 12px; color: var(--color-ink); max-width: 140px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feedback-file-rm {
    border: none; background: none; cursor: pointer;
    color: var(--color-ink-light); font-size: 16px; line-height: 1;
    padding: 2px 4px; border-radius: 6px;
}
.feedback-file-rm:hover { color: var(--color-danger, #e53e3e); background: var(--tint-06); }
.feedback-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.feedback-contact {
    flex: 1; min-width: 220px; padding: 9px 12px;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-bg); color: var(--color-ink);
    font-size: 13px; font-family: var(--font-ui); box-sizing: border-box;
}
.feedback-contact:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--tint-10); }
.feedback-count { font-size: 12px; color: var(--color-ink-light); }
.feedback-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.feedback-msg { font-size: 13px; color: var(--color-ink-light); }
.feedback-msg.ok { color: var(--color-success); }
.feedback-msg.error { color: var(--color-danger, #e53e3e); }
.feedback-submit-btn {
    padding: 10px 28px; border: none; border-radius: 20px;
    background: var(--color-primary); color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font-ui);
    transition: all 0.2s; box-shadow: 0 2px 8px var(--tint-20);
}
.feedback-submit-btn:hover { background: var(--color-primary-dark); }
.feedback-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* 我的反馈列表 */
.feedback-list-title { font-family: var(--font-content); font-size: 17px; font-weight: 700; color: var(--color-ink); margin-bottom: 14px; }
.feedback-list { display: flex; flex-direction: column; gap: 14px; }
.feedback-loading { padding: 40px 0; text-align: center; color: var(--color-ink-light); font-size: 14px; }
.feedback-empty { text-align: center; padding: 48px 20px; background: var(--color-card); border: 1px dashed var(--color-border); border-radius: 16px; }
.feedback-empty-icon { font-size: 36px; margin-bottom: 10px; }
.feedback-empty-title { font-size: 15px; font-weight: 600; color: var(--color-ink); margin-bottom: 6px; }
.feedback-empty-desc { font-size: 13px; color: var(--color-ink-light); }
.feedback-item { background: var(--color-card); border: 1px solid var(--color-border-light); border-radius: 14px; padding: 18px 20px; }
.feedback-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.feedback-item-cat { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.feedback-item-time { margin-left: auto; font-size: 12px; color: var(--color-ink-light); }
.fb-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.fb-badge-pending { background: var(--tint-10); color: var(--color-primary-dark); }
.fb-badge-replied { background: rgba(76,175,80,0.12); color: var(--color-success); }
.fb-badge-closed { background: var(--tint-06); color: var(--color-ink-light); }
.feedback-item-content { font-size: 14px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; color: var(--color-ink); }
.feedback-item-contact { margin-top: 8px; font-size: 12px; color: var(--color-ink-light); }
.feedback-reply {
    margin-top: 14px; background: rgba(76,175,80,0.06);
    border-left: 3px solid var(--color-success); border-radius: 0 10px 10px 0;
    padding: 12px 16px;
}
.feedback-reply-head { font-size: 12px; font-weight: 600; color: var(--color-success); margin-bottom: 6px; }
.feedback-reply-body { font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--color-ink); }
.feedback-reply-time { margin-top: 6px; font-size: 11px; color: var(--color-ink-light); }
/* 反馈附件展示（列表里） */
.feedback-item-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.feedback-file-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border-light); }
.feedback-file-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; font-size: 12px; color: var(--color-primary-dark);
    background: var(--tint-06); border: 1px solid var(--color-border-light); border-radius: 8px;
    text-decoration: none;
}
.feedback-file-link:hover { background: var(--tint-10); }

/* 导航未读角标（红圈数字，通用 iOS 风格） */
.nav-tab, .mobile-nav-tab { position: relative; }
.feedback-unread-badge {
    position: absolute; top: 0; right: 0; transform: translate(40%, -30%);
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f5222d; color: #fff; border-radius: 999px;
    font-size: 10px; font-weight: 700; line-height: 1; font-family: var(--font-ui);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.2);
    pointer-events: none; z-index: 5;
}

@media (max-width: 768px) {
    .feedback-page { height: calc(100dvh - 48px - env(safe-area-inset-top)); margin-top: calc(48px + env(safe-area-inset-top)); }
    .feedback-inner { padding: 20px 16px 40px; }
    .feedback-card { padding: 18px 16px; }
    .feedback-item { padding: 16px; }
}

/* 页面内滚动条始终预留，保证四个全屏页标题水平位置一致（反馈页内容长会触发滚动条） */
.bookshelf-page, .tools-page, .feedback-page, .space-page { scrollbar-gutter: stable; }

/* ============================================================
   空间管理页
   ============================================================ */
.space-page { display: none; flex-direction: column; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto; background: var(--color-bg); }
.space-page.active { display: flex; }
.space-inner { max-width: 1000px; margin: 0 auto; padding: 32px 24px; width: 100%; }
.space-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.space-title { font-family: var(--font-content); font-size: 24px; font-weight: 700; color: var(--color-ink); }
.space-subtitle { font-size: 14px; color: var(--color-ink-light); margin-top: 4px; }

/* 概览统计（精简单行） */
.space-stats { margin-bottom: 26px; }
.space-stats-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    background: var(--color-card); border: 1px solid var(--color-border-light);
    border-radius: 12px; padding: 10px 14px;
}
.space-stat-item {
    display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
    color: var(--color-text-light); font-size: 13px; cursor: pointer; padding: 4px 10px;
    border-radius: 16px; font-family: var(--font-ui); transition: all 0.15s;
}
.space-stat-item:hover { color: var(--color-primary); background: var(--tint-08); }
.space-stat-item b { color: var(--color-ink); font-weight: 700; font-size: 15px; }
.space-stat-sep { width: 1px; height: 16px; background: var(--color-border-light); }

/* 空间统计加载失败提示 */
.space-stats-error {
    margin-top: 10px; padding: 10px 14px;
    background: #FFF7E6; border: 1px solid #FFD591; color: #AD6800;
    border-radius: 10px; font-size: 13px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.space-stats-retry {
    margin-left: auto; border: 1px solid #FFD591; background: #fff; color: #AD6800;
    border-radius: 14px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: var(--font-ui);
}
.space-stats-retry:hover { background: #FFD591; color: #fff; }

/* 分区 */
.space-section { margin-bottom: 32px; }
.space-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.space-section-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-content); font-size: 17px; font-weight: 700; color: var(--color-ink); }
.space-section-title svg { width: 18px; height: 18px; color: var(--color-primary); }
.space-section-count { font-size: 12px; font-weight: 500; color: var(--icon-color); background: var(--tint-08); padding: 2px 9px; border-radius: 10px; }
.space-section-link { display: flex; align-items: center; gap: 4px; border: none; background: none; color: var(--color-text-light); font-size: 13px; cursor: pointer; padding: 6px 10px; border-radius: 8px; transition: all 0.15s; font-family: var(--font-ui); }
.space-section-link:hover { color: var(--color-primary); background: var(--tint-08); }
.space-recycle-num { color: var(--color-danger); font-weight: 600; }

/* 我的成稿 */
.space-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.space-book-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--color-card); border: 1px solid var(--color-border-light);
    border-radius: 14px; cursor: pointer; transition: all 0.2s;
}
.space-book-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px var(--tint-12); transform: translateY(-2px); }
.space-book-card.selected { border-color: var(--color-primary); background: var(--tint-08); box-shadow: 0 0 0 2px var(--tint-12); }
.space-book-card.archived { opacity: 0.75; }
.space-book-icon {
    width: 40px; height: 40px; border-radius: 10px; background: var(--tint-10);
    display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.space-book-info { flex: 1; min-width: 0; }
.space-book-title { font-family: var(--font-content); font-size: 15px; font-weight: 600; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-book-title-input {
    width: 100%; font-family: var(--font-ui); font-size: 14px; color: var(--color-ink);
    border: 1px solid var(--color-primary); border-radius: 6px; padding: 4px 8px;
    outline: none; background: var(--color-card); box-sizing: border-box;
}
.space-book-sample { font-size: 10px; font-weight: 600; color: #fff; background: var(--color-primary); padding: 2px 6px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; }
.space-book-meta { font-size: 12px; color: var(--icon-color); margin-top: 4px; }
.space-book-menu {
    flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--icon-color); border-radius: 8px; cursor: pointer; transition: all 0.15s;
}
.space-book-menu:hover { color: var(--color-primary); background: var(--tint-08); }

/* 成稿操作菜单 */
.space-book-menu-dropdown {
    position: fixed; z-index: 300; min-width: 172px;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: 10px; box-shadow: 0 8px 24px var(--tint-20); padding: 6px;
}
.space-book-menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px;
    border: none; background: none; color: var(--color-ink); font-size: 13px;
    cursor: pointer; border-radius: 7px; font-family: var(--font-ui); text-align: left;
}
.space-book-menu-item:hover { background: var(--tint-08); }
.space-book-menu-item.danger { color: var(--color-danger); }
.space-book-menu-item svg { width: 15px; height: 15px; }
.space-book-menu-divider { height: 1px; background: var(--color-border-light); margin: 5px 6px; }

/* 素材库：范围 + 分类 合并为一条工具栏 */
.space-material-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px;
}
.space-material-scope { display: flex; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; flex-shrink: 0; }
.space-material-scope-btn {
    padding: 5px 14px; border: none; background: var(--color-card); color: var(--color-text-light);
    font-size: 13px; cursor: pointer; font-family: var(--font-ui); transition: all 0.15s;
}
.space-material-scope-btn + .space-material-scope-btn { border-left: 1px solid var(--color-border); }
.space-material-scope-btn:hover { color: var(--color-primary); }
.space-material-scope-btn.active { background: var(--color-primary); color: #fff; }
.space-material-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

/* 空间页：按书筛选提示条 */
.space-book-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.space-book-filter-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px;
    background: var(--tint-10); border: 1px solid var(--color-primary); color: var(--color-primary);
    border-radius: 16px; font-size: 13px; font-weight: 500;
}
.space-book-filter-chip svg { width: 14px; height: 14px; }
.space-book-filter-clear {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border: none; background: transparent; color: var(--color-primary); cursor: pointer;
    border-radius: 50%; font-size: 12px; line-height: 1;
}
.space-book-filter-clear:hover { background: var(--tint-20); }
.space-book-filter-open {
    border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-ink);
    font-size: 13px; padding: 5px 12px; border-radius: 16px; cursor: pointer; font-family: var(--font-ui); transition: all 0.15s;
}
.space-book-filter-open:hover { border-color: var(--color-primary); color: var(--color-primary); }
.space-material-tab {
    padding: 6px 14px; border: 1px solid var(--color-border); border-radius: 16px;
    background: var(--color-card); color: var(--color-text-light); font-size: 13px;
    cursor: pointer; font-family: var(--font-ui); transition: all 0.15s;
}
.space-material-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.space-material-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.space-materials { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.space-mat-item {
    position: relative; background: var(--color-card); border: 1px solid var(--color-border-light);
    border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.2s;
}
.space-mat-item:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px var(--tint-12); transform: translateY(-2px); }
.space-mat-thumb { aspect-ratio: 1 / 1; background: var(--color-border-light); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.space-mat-thumb img, .space-mat-thumb-video video { width: 100%; height: 100%; object-fit: cover; }
.space-mat-thumb-video { position: relative; }
.space-mat-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, 0.45);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 13px; padding-left: 2px; pointer-events: none;
}
.space-mat-doc { background: var(--tint-08); font-size: 30px; color: var(--color-text-light); }
.space-mat-fallback { font-size: 28px; }
.space-mat-name { padding: 8px 10px 2px; font-size: 13px; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-mat-meta { padding: 0 10px 10px; font-size: 11px; color: var(--icon-color); }
.space-mat-del {
    position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
    border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff;
    font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
}
.space-mat-item:hover .space-mat-del { opacity: 1; }

/* 空态与加载 */
.space-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 36px 16px; color: var(--color-ink-light); background: var(--color-card);
    border: 1px dashed var(--color-border); border-radius: 14px; text-align: center;
}
.space-empty-hint { font-size: 12px; color: var(--icon-color); margin-top: 6px; }
.space-loading { padding: 30px; text-align: center; color: var(--icon-color); font-size: 13px; }

/* 移动端 */
@media (max-width: 768px) {
    .space-page { height: calc(100dvh - 48px - env(safe-area-inset-top)); margin-top: calc(48px + env(safe-area-inset-top)); }
    .space-inner { padding: 20px 16px; }
    .space-header { flex-wrap: wrap; gap: 12px; }
    .space-stats-bar { padding: 9px 10px; }
    .space-stat-item { padding: 4px 7px; font-size: 12px; }
    .space-materials { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
    .space-books { grid-template-columns: 1fr; }
}

/* ============================================================
   v8.35 图生图 · AI 照片实验室 视觉升级
   ============================================================ */
/* 分区标签：上传照片 / 选择技能 */
.i2i-section-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--color-ink-light);
    font-family: var(--font-ui); margin: 6px 0 2px;
}
.i2i-section-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
/* 技能卡片网格 */
.i2i-skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}
#ws-image2image .i2i-tab {
    flex: none;
    min-width: 0; padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-card);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all .2s ease;
    display: block;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
/* 示例封面：与功能按钮合并，Lovart 风格 */
#ws-image2image .i2i-tab .i2i-skill-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #F6F0EC;
    overflow: hidden;
}
#ws-image2image .i2i-tab .i2i-skill-preview img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
#ws-image2image .i2i-tab:hover .i2i-skill-preview img { transform: scale(1.06); }
/* 底部渐变遮罩 */
#ws-image2image .i2i-tab .i2i-skill-shade {
    position: absolute; inset: auto 0 0 0; height: 80%;
    background: linear-gradient(180deg, rgba(30,20,15,0) 0%, rgba(30,20,15,0.22) 52%, rgba(30,20,15,0.8) 100%);
    pointer-events: none;
}
/* 文字叠加在封面上 */
#ws-image2image .i2i-tab .i2i-skill-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 13px 13px;
    color: #fff;
    text-align: left;
}
#ws-image2image .i2i-tab .i2i-skill-icon {
    flex: none;
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; border-radius: 10px;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#ws-image2image .i2i-tab .i2i-skill-meta {
    display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
#ws-image2image .i2i-tab .i2i-skill-name {
    font-size: 15px; line-height: 1.25; font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
#ws-image2image .i2i-tab .i2i-skill-desc {
    font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,0.84); line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#ws-image2image .i2i-tab:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px var(--tint-12);
}
#ws-image2image .i2i-tab.active {
    border: 2px solid var(--color-primary);
    background: var(--color-card);
    box-shadow: 0 0 0 4px var(--tint-08), 0 10px 24px rgba(139,95,71,0.25);
    transform: translateY(-2px);
}
#ws-image2image .i2i-tab.active .i2i-skill-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-color: transparent;
}
/* 选中标记 */
#ws-image2image .i2i-tab.active::after {
    content: '✓ 已选择';
    position: absolute; top: 8px; right: 8px; z-index: 2;
    font-size: 10px; font-weight: 700; color: #fff; line-height: 1;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 20px; padding: 5px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
@media (max-width: 640px) {
    .i2i-skill-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
    #ws-image2image .i2i-tab .i2i-skill-body { padding: 8px 10px 10px; gap: 6px; }
    #ws-image2image .i2i-tab .i2i-skill-icon { width: 28px; height: 28px; font-size: 14px; }
    #ws-image2image .i2i-tab .i2i-skill-name { font-size: 12.5px; }
    #ws-image2image .i2i-tab .i2i-skill-desc { font-size: 10px; }
}
/* 统一创作台：模式切换 + 统一输入 */
.i2i-mode-switch {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--color-panel-bg, #F6F0EC);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    margin-bottom: 14px;
}
.i2i-mode-btn {
    border: none; cursor: pointer; padding: 8px 18px;
    border-radius: 10px; font-size: 13.5px; font-weight: 600;
    background: transparent; color: var(--color-ink-lighter);
    transition: all .18s ease;
}
.i2i-mode-btn:hover { color: var(--color-ink); }
.i2i-mode-btn.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    box-shadow: 0 4px 12px rgba(139,95,71,0.3);
}
.i2i-unified-prompt {
    min-height: 78px;
    font-size: 14px;
}
.i2i-unified-prompt-hint {
    font-weight: 400; font-size: 11px; color: var(--color-ink-lighter);
    margin-left: 8px;
}
.i2i-section-hint {
    font-weight: 400; font-size: 11px; color: var(--color-ink-lighter);
    margin-left: 6px;
}
/* 统一输入卡：输入 + 参数 + 动作收在一起 */
.i2i-composer {
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-card);
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 16px;
}
.i2i-composer .i2i-dropzone { padding: 14px 16px; }
.i2i-composer .i2i-dropzone-icon { width: 40px; height: 40px; font-size: 18px; }
.i2i-composer .i2i-dropzone-text { font-size: 13.5px; }
.i2i-composer .i2i-dropzone-sub { font-size: 11px; }
.i2i-unified-prompt { min-height: 58px; }
.i2i-composer-params {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border-light, rgba(0,0,0,0.1));
}
/* Codex 风格输入框：一体圆角 + 底部参数条 + 右侧生成 */
.i2i-promptbox {
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-card);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.i2i-promptbox:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--tint-08);
}
.i2i-promptbox .i2i-unified-prompt {
    border: none; box-shadow: none; background: transparent; border-radius: 0;
    min-height: 92px;
}
.i2i-promptbox .i2i-unified-prompt:focus { box-shadow: none; }
/* 框内上传区：紧凑横排 */
.i2i-promptbox .i2i-dropzone {
    flex-direction: row; justify-content: flex-start; gap: 10px;
    padding: 8px 12px; margin: 0;
    border: none; border-bottom: 1px solid var(--color-border-light, rgba(0,0,0,0.06));
    border-radius: 0;
    background: var(--color-panel-bg, #F6F0EC);
}
.i2i-promptbox .i2i-dropzone:hover,
.i2i-promptbox .i2i-dropzone.drag-over {
    box-shadow: none; transform: none;
    background: var(--tint-06);
    border-color: transparent;
}
.i2i-promptbox .i2i-dropzone-icon { width: 28px; height: 28px; font-size: 14px; margin-bottom: 0; }
.i2i-promptbox .i2i-dropzone-text { font-size: 13px; }
.i2i-promptbox .i2i-dropzone-sub { display: none; }
.i2i-promptbox .i2i-toolbar-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--color-border-light, rgba(0,0,0,0.07));
    background: var(--color-panel-bg, #F6F0EC);
}
.i2i-promptbox .i2i-toolbar-row .tool-select {
    flex: none;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: border-color .15s;
}
.i2i-promptbox .i2i-toolbar-row .tool-select:hover { border-color: var(--color-primary); }
.i2i-promptbox .i2i-toolbar-row .tool-generate-btn {
    flex: none; margin-left: auto;
    min-width: 0; padding: 8px 20px;
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 4px 12px rgba(139,95,71,0.28);
}
.i2i-promptbox-hints {
    margin-top: 6px;
    padding: 0 4px;
}
.i2i-promptbox-hints .tw-prompt-hint { margin: 0; font-size: 12px; }
@media (max-width: 640px) {
    .i2i-promptbox .i2i-toolbar-row .tool-select { flex: 1 1 auto; }
    .i2i-promptbox .i2i-toolbar-row .tool-generate-btn { margin-left: auto; width: auto; }
}
.i2i-composer-action {
    display: flex; justify-content: flex-end;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border-light, rgba(0,0,0,0.1));
}
#ws-image2image .i2i-composer-action .tool-generate-btn {
    min-width: 200px;
}
#i2i-t2i-templates { margin-bottom: 16px; }
#i2i-skill-section { margin-bottom: 8px; }
/* 技能详情页 */
#i2i-skill-detail { margin-bottom: 8px; }
.i2i-detail-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-card);
    margin-bottom: 12px;
}
.i2i-detail-title { font-size: 16px; font-weight: 700; color: var(--color-ink); }
.i2i-detail-summary {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    background: var(--color-panel-bg, #F6F0EC);
    margin-bottom: 12px;
    font-size: 12.5px; color: var(--color-ink-lighter);
}
.i2i-detail-summary-thumb {
    width: 46px; height: 46px; border-radius: 8px; overflow: hidden; flex: none;
    border: 1px solid var(--color-border-light);
    background: #fff;
}
.i2i-detail-summary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.i2i-detail-action { justify-content: center; }
#ws-image2image .i2i-detail-action .tool-generate-btn { min-width: 260px; }
/* 已并入统一输入卡的技能描述框：隐藏，避免重复 */
.i2i-dup-prompt { display: none; }
/* 上传区：大拖拽卡 */
.i2i-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 30px 20px; cursor: pointer; text-align: center;
    border: 1.5px dashed var(--color-border);
    border-radius: 16px;
    background: radial-gradient(120% 140% at 50% 0%, var(--color-primary-bg, #FAF3F0) 0%, var(--color-card) 60%);
    transition: all .2s ease;
    font-family: var(--font-ui);
}
.i2i-dropzone:hover, .i2i-dropzone.drag-over {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--tint-06), 0 8px 24px var(--tint-12);
    transform: translateY(-1px);
}
.i2i-dropzone-icon {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary-bg, #FAF3F0), var(--tint-06));
    border: 1px solid var(--color-border-light);
    box-shadow: 0 4px 10px var(--tint-10);
    margin-bottom: 2px;
}
.i2i-dropzone-text { font-size: 15px; font-weight: 600; color: var(--color-ink); }
.i2i-dropzone-sub { font-size: 12px; color: var(--color-ink-lighter); }
.i2i-dropzone .tool-file-input { display: none; }
/* 预览：相片展示台 */
#i2i-preview.i2i-photo-stage {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 18px 18px 12px;
    border-radius: 16px;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.9), rgba(0,0,0,0) 70%),
        linear-gradient(160deg, var(--color-panel-bg, #F6F0EC), var(--tint-06));
    border: 1px solid var(--color-border-light);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 24px var(--tint-10);
}
#i2i-preview.i2i-photo-stage img {
    max-width: 300px; max-height: 220px; width: auto;
    border-radius: 10px;
    border: 4px solid #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    object-fit: cover;
    background: #fff;
}
.i2i-photo-stage-label {
    font-size: 11.5px; color: var(--color-ink-lighter);
    letter-spacing: 1px;
    font-family: var(--font-ui);
}
/* 处理按钮：光效 */
#ws-image2image #i2i-generate-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    box-shadow: 0 6px 18px rgba(139,95,71,0.35);
    transition: all .18s ease;
}
#ws-image2image #i2i-generate-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(139,95,71,0.45);
}
/* 参数与示例卡：细腻分层 */
#ws-image2image .i2i-merge-demo {
    background:
        linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0)),
        var(--color-panel-bg, #F6F0EC);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 14px var(--tint-08);
}
/* 切换功能面板淡入 */
#ws-image2image .i2i-option { animation: i2iFadeUp .28s ease; }
@keyframes i2iFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}