/* ── v4-A Artifact 卡片（对齐 AZOTH tool-usage-indicator 设计语言）── */
        .artifact-cards-container {
            margin: 6px 0 10px;
            width: min(100%, 520px);
            animation: fadeIn 0.3s;
        }

/* Alchemy secrets panel overrides live here because chat.css loads after
   style.css and contains generic .sidebar-panel .sheet rules. */
#panel-alchemy-secrets.sidebar-panel.active .alchemy-sheet {
    width: min(1060px, calc(100vw - 28px)) !important;
    max-width: min(1060px, calc(100vw - 28px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#panel-alchemy-secrets .alchemy-list-panel {
    max-height: 100%;
}

[data-theme="roots"] #panel-alchemy-secrets .alchemy-sheet .btn,
[data-theme="roots"] #panel-alchemy-secrets .alchemy-icon-btn.active,
[data-theme="roots"] .alchemy-selector-sheet .alchemy-selector-kind-tabs button.active,
[data-theme="roots"] .alchemy-selector-sheet .alchemy-selector-tabs button.active,
[data-theme="roots"] .alchemy-selector-switch:checked {
    color: #2a1215 !important;
}

[data-theme="midnight"] #panel-alchemy-secrets .alchemy-sheet .btn,
[data-theme="midnight"] #panel-alchemy-secrets .alchemy-icon-btn.active,
[data-theme="midnight"] .alchemy-selector-sheet .alchemy-selector-kind-tabs button.active,
[data-theme="midnight"] .alchemy-selector-sheet .alchemy-selector-tabs button.active,
[data-theme="midnight"] .alchemy-selector-switch:checked {
    color: #0e1218 !important;
}

@media (max-width: 760px) {
    #panel-alchemy-secrets.sidebar-panel.active .alchemy-sheet {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    #panel-alchemy-secrets .alchemy-list-panel {
        max-height: 190px;
        overflow-y: auto !important;
    }
}
        .artifact-card {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto auto auto;
            grid-template-areas:
                "icon info"
                "preview preview"
                "actions actions";
            gap: 10px 12px;
            padding: 12px 14px;
            margin: 4px 0;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.09), rgba(var(--accent-rgb), 0.035));
            border: 1px solid rgba(var(--accent-rgb), 0.2);
            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
        }
        .artifact-card:hover {
            border-color: rgba(var(--accent-rgb), 0.32);
            background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.05));
            box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.08);
        }
        .artifact-card-header {
            grid-area: info;
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .artifact-card-icon {
            grid-area: icon;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: rgba(var(--accent-rgb), 0.16);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            flex-shrink: 0;
            align-self: center;
        }
        .artifact-card-info {
            min-width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .artifact-card-name {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: 0.01em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .artifact-card-meta {
            font-size: 0.7rem;
            color: var(--text);
            opacity: 0.55;
        }
        .artifact-card-preview--svg {
            grid-area: preview;
            max-height: 200px;
            overflow: hidden;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(var(--accent-rgb), 0.12);
            padding: 6px;
        }
        .artifact-card-preview--svg img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            max-height: 188px;
        }
        .artifact-card-preview--image {
            grid-area: preview;
            border-radius: 10px;
            overflow: hidden;
            cursor: zoom-in;
            border: 1px solid rgba(var(--accent-rgb), 0.15);
            background: rgba(0, 0, 0, 0.04);
            transition: border-color 0.2s;
        }
        .artifact-card-preview--image:hover {
            border-color: rgba(var(--accent-rgb), 0.35);
        }
        .artifact-card-preview--image img {
            display: block;
            width: 100%;
            max-height: 280px;
            object-fit: contain;
        }
        .artifact-card-actions {
            grid-area: actions;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            padding-top: 4px;
            border-top: 1px dashed rgba(var(--accent-rgb), 0.15);
            margin-top: 2px;
        }
        .artifact-btn {
            padding: 5px 12px;
            border-radius: 8px;
            border: 1px solid rgba(var(--accent-rgb), 0.35);
            background: rgba(var(--accent-rgb), 0.12);
            color: var(--accent);
            font-size: 0.74rem;
            font-weight: 600;
            cursor: pointer;
            touch-action: manipulation;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: background 0.15s, border-color 0.15s, transform 0.1s;
        }
        .artifact-btn:hover {
            background: rgba(var(--accent-rgb), 0.2);
            border-color: rgba(var(--accent-rgb), 0.5);
        }
        .artifact-btn:active {
            transform: translateY(1px);
        }
        .artifact-btn--secondary {
            background: transparent;
            border-color: rgba(var(--accent-rgb), 0.25);
        }
        .artifact-btn--secondary:hover {
            background: rgba(var(--accent-rgb), 0.08);
        }
        .artifact-btn--link {
            text-decoration: none;
        }
        .artifact-card--saved {
            border-color: rgba(var(--accent-rgb), 0.26);
        }
        .artifact-saved {
            align-self: center;
            font-size: 0.7rem;
            color: var(--accent);
            opacity: 0.75;
        }
        .artifact-card--expired {
            opacity: 0.55;
            background: rgba(var(--accent-rgb), 0.04);
        }
        .artifact-card--expired .artifact-card-icon {
            background: rgba(var(--accent-rgb), 0.08);
        }
        .artifact-expired {
            font-size: 0.7rem;
            opacity: 0.65;
            font-style: italic;
            color: var(--text);
        }
        /* ── v4-A Artifact 预览 modal ── */
        .artifact-preview-modal {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.18s;
        }
        .artifact-preview-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(2px);
        }
        .artifact-preview-card {
            position: relative;
            background: var(--card-bg);
            color: var(--text);
            width: min(820px, 92vw);
            max-height: 88vh;
            border-radius: 14px;
            border: 1px solid rgba(var(--accent-rgb), 0.25);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .artifact-preview-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
            background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.09), rgba(var(--accent-rgb), 0.035));
        }
        .artifact-preview-title {
            flex: 1;
            font-size: 0.92rem;
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .artifact-preview-close {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            border: 1px solid rgba(var(--accent-rgb), 0.25);
            background: transparent;
            color: var(--text);
            font-size: 1.1rem;
            line-height: 1;
            cursor: pointer;
            touch-action: manipulation;
            transition: background 0.15s, border-color 0.15s;
        }
        .artifact-preview-close:hover {
            background: rgba(var(--accent-rgb), 0.12);
            border-color: rgba(var(--accent-rgb), 0.4);
        }
        .artifact-preview-body {
            flex: 1;
            overflow: auto;
            padding: 16px 20px;
            font-size: 0.88rem;
        }
        .artifact-preview-md {
            line-height: 1.7;
        }
        .artifact-preview-code {
            margin: 0;
            padding: 12px 14px;
            background: rgba(var(--accent-rgb), 0.06);
            border: 1px solid rgba(var(--accent-rgb), 0.12);
            border-radius: 8px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.82rem;
            line-height: 1.55;
            white-space: pre-wrap;
            word-break: break-word;
            color: var(--text);
        }
        .artifact-preview-svg {
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 8px;
            padding: 12px;
        }
        .artifact-preview-svg img {
            max-width: 100%;
            max-height: 70vh;
            display: block;
        }
        .artifact-preview-iframe {
            width: 100%;
            min-height: 70vh;
            border: 1px solid rgba(var(--accent-rgb), 0.18);
            border-radius: 8px;
            background: #fff;
            display: block;
        }
        /* ── 侧边栏面板样式 ── */
        .sidebar-panel {
            display: none;
            z-index: 3000 !important;
        }

        .sidebar-panel.active {
            display: flex;
        }

        .sidebar-panel .sheet {
            max-height: 90vh;
            width: 100%;
            max-width: 600px;
            margin: auto;
        }

        .modal-on-top {
            z-index: 15000 !important;
        }

        /* --- [Vesper] QQ风格聊天列表 --- */
        .qq-chat-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            cursor: pointer;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            transition: background 0.2s;
        }

        .qq-chat-item:hover {
            background: rgba(0, 0, 0, 0.03);
        }

        .qq-chat-item:active {
            background: rgba(0, 0, 0, 0.06);
        }

        .qq-chat-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
        }

        .qq-chat-info {
            flex: 1;
            overflow: hidden;
        }

        .qq-chat-name {
            font-weight: bold;
            font-size: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .qq-chat-desc {
            font-size: 0.8rem;
            opacity: 0.6;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 4px;
        }

        /* Markdown 内容样式 */
        .markdown-content {
            line-height: 1.6;
        }

        .markdown-content p {
            margin: 0.2em 0;
        }

        .markdown-content p:first-child {
            margin-top: 0;
        }

        .markdown-content p:last-child {
            margin-bottom: 0;
        }

        .markdown-content code {
            background: rgba(0, 0, 0, 0.05);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9em;
        }

        .markdown-content pre {
            background: rgba(0, 0, 0, 0.05);
            padding: 10px;
            border-radius: 6px;
            overflow-x: auto;
            margin: 0.5em 0;
        }

        .markdown-content pre code {
            background: none;
            padding: 0;
        }

        .markdown-content ul,
        .markdown-content ol {
            margin: 0.5em 0;
            padding-left: 1.5em;
        }

        .markdown-content li {
            margin: 0.25em 0;
        }

        .markdown-content strong {
            font-weight: bold;
        }

        .markdown-content em {
            font-style: italic;
        }

        .markdown-content table {
            border-collapse: collapse;
            width: 100%;
            margin: 0.5em 0;
        }

        .markdown-content th,
        .markdown-content td {
            border: 1px solid rgba(0, 0, 0, 0.1);
            padding: 6px 10px;
            text-align: left;
        }

        .markdown-content th {
            background: rgba(0, 0, 0, 0.05);
            font-weight: bold;
        }

        /* 长按菜单样式 */
        .context-menu {
            display: none;
            position: fixed;
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            z-index: 9999;
            padding: 8px 0;
            min-width: 160px;
        }

        .context-menu.active {
            display: block;
        }

        .context-menu-item {
            padding: 12px 20px;
            cursor: pointer;
            color: var(--text);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.2s;
        }

        .context-menu-item:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .context-menu-item:active {
            opacity: 0.7;
        }

        /* --- [Vesper] 多选模式样式 --- */
        .multi-select-mode .chat-message-bubble {
            cursor: pointer;
        }

        .chat-message-bubble.selected {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            opacity: 0.9;
        }

        .multi-select-toolbar {
            display: none;
            position: fixed;
            bottom: 120px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--card-bg);
            border-radius: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            padding: 10px 20px;
            z-index: 99999 !important;
            gap: 15px;
            align-items: center;
        }

        .multi-select-toolbar.active {
            display: flex !important;
        }

        .multi-select-toolbar button {
            background: none;
            border: none;
            padding: 8px 15px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.9rem;
            color: var(--text);
            transition: background 0.2s;
        }

        .multi-select-toolbar button:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .multi-select-toolbar .delete-btn {
            color: #c62828;
        }

        .multi-select-count {
            font-weight: bold;
            color: var(--accent);
        }

        /* --- [Vesper] 引用消息样式 - 嵌套气泡效果 --- */
        .quote-block {
            background: rgba(var(--accent-rgb), 0.08);
            border: 1px solid rgba(var(--accent-rgb), 0.18);
            border-left: 3px solid var(--accent);
            padding: 8px 10px;
            margin-bottom: 10px;
            border-radius: 8px;
            font-size: 0.85em;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
            color: var(--text);
        }

        .quote-block:hover {
            background: rgba(var(--accent-rgb), 0.13);
            transform: translateX(2px);
        }

        .quote-block:active {
            transform: scale(0.98);
        }

        .quote-block-header {
            font-size: 0.7em;
            opacity: 0.8;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: bold;
            color: var(--accent);
        }

        .quote-block-content {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.4;
            color: var(--text);
        }

        .quote-divider {
            height: 1px;
            background: linear-gradient(to right, var(--accent), transparent);
            margin: 8px 0 6px 0;
            opacity: 0.5;
        }

        /* 书籍摘录引用块 */
        .excerpt-block {
            background: rgba(var(--accent-rgb), 0.06);
            border: 1px solid rgba(var(--accent-rgb), 0.15);
            border-left: 3px solid var(--highlight, #D4A574);
            padding: 10px 12px;
            margin-bottom: 10px;
            border-radius: 0 8px 8px 0;
            font-size: 0.85em;
            color: var(--text);
        }

        .excerpt-block-header {
            font-size: 0.7em;
            opacity: 0.7;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: bold;
            color: var(--accent);
        }

        .excerpt-block-content {
            max-height: 120px;
            overflow-y: auto;
            line-height: 1.6;
            font-style: italic;
            opacity: 1;
            padding-right: 5px;
            white-space: pre-wrap;
            word-break: break-word;
            color: var(--text);
        }

        .excerpt-block-content::-webkit-scrollbar {
            width: 3px;
        }

        .excerpt-block-content::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 3px;
            opacity: 0.3;
        }

        /* 引用预览区域 */
        .quote-preview {
            display: none;
            background: var(--card-bg);
            border-left: 3px solid var(--accent);
            padding: 8px 12px;
            margin: 0 10px 10px 10px;
            border-radius: 0 8px 8px 0;
            position: relative;
        }

        .quote-preview.active {
            display: block;
        }

        .quote-preview-close {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            opacity: 0.6;
            font-size: 1.2rem;
        }

        .quote-preview-close:hover {
            opacity: 1;
        }

        /* --- [Vesper] AI对话列表侧边栏样式 --- */
        /* 唯一定义（style.css 的同码副本 10-05 已删）。
           10-05 App 手感批 1：关闭态滑出后 visibility:hidden，横移 / 缩放也露不出来；位移改 transform。 */
        .ai-conversation-list-sidebar {
            position: fixed;
            right: 0;
            top: 0;
            width: 280px;
            height: 100%;
            background: var(--card-bg);
            /* 阴影只在开启态挂——关闭态藏屏外，左向投影会漏回可视区右缘(塔拉 7-22)。 */
            z-index: 5001;
            transform: translate3d(100%, 0, 0);
            visibility: hidden;
            transition: transform 0.3s ease, visibility 0s linear 0.3s;
            overflow-y: auto;
            padding: 15px;
        }

        .ai-conversation-list-sidebar.active {
            transform: translate3d(0, 0, 0);
            visibility: visible;
            transition: transform 0.3s ease, visibility 0s;
            box-shadow: -2px 0 20px rgba(0, 0, 0, 0.2);
        }

        .ai-conv-item {
            background: var(--bg);
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid transparent;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ai-conv-item:hover {
            background: rgba(var(--accent-rgb), 0.1);
            transform: translateX(-2px);
        }

        .ai-conv-item.active {
            border-color: var(--accent);
            background: rgba(var(--accent-rgb), 0.15);
        }

        .ai-conv-new {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark, var(--accent)));
            color: white;
            justify-content: center;
            text-align: center;
            flex-direction: column;
            gap: 5px;
        }

        .ai-conv-new:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
        }

        .ai-conversation-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(var(--bg-rgb, 0, 0, 0), 0.5);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 5000;
        }

        .ai-conversation-overlay.active {
            display: block;
        }

        .ai-sidebar-section-title {
            margin: 18px 2px 10px;
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--accent);
            letter-spacing: 0;
        }

        .ai-sidebar-empty {
            padding: 14px 10px;
            border-radius: 10px;
            background: rgba(var(--accent-rgb), 0.06);
            color: var(--text);
            opacity: 0.62;
            font-size: 0.82rem;
            line-height: 1.5;
        }

        .ai-project-row {
            display: flex;
            align-items: center;
            gap: 11px;
            width: 100%;
            min-height: 56px;
            padding: 10px;
            margin-bottom: 8px;
            border-radius: 12px;
            border: 1px solid rgba(var(--accent-rgb), 0.08);
            background: rgba(var(--accent-rgb), 0.05);
            color: var(--text);
            cursor: pointer;
            transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
        }

        .ai-project-row:hover,
        .ai-project-row:active {
            transform: translateX(-2px);
            background: rgba(var(--accent-rgb), 0.12);
            border-color: rgba(var(--accent-rgb), 0.22);
        }

        .ai-project-new {
            border-style: dashed;
            background: transparent;
        }

        .ai-project-svg {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            color: var(--accent);
        }

        .ai-project-row-main,
        .ai-source-row-main {
            min-width: 0;
            flex: 1;
        }

        .ai-project-row-title,
        .ai-source-name {
            font-weight: 700;
            font-size: 0.94rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ai-project-row-sub,
        .ai-source-meta {
            margin-top: 3px;
            font-size: 0.74rem;
            opacity: 0.58;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ai-pin-mark {
            display: inline-flex;
            align-items: center;
            margin-right: 6px;
            padding: 1px 5px;
            border-radius: 6px;
            background: rgba(var(--accent-rgb), 0.12);
            color: var(--accent);
            font-size: 0.68rem;
            vertical-align: middle;
        }

        .ai-project-page-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }

        .ai-icon-btn {
            width: 38px;
            height: 38px;
            border: 1px solid rgba(var(--accent-rgb), 0.16);
            border-radius: 999px;
            background: var(--bg);
            color: var(--text);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex: 0 0 38px;
        }

        .ai-icon-btn .ico {
            width: 19px;
            height: 19px;
        }

        .ai-project-page-title {
            min-width: 0;
            flex: 1;
        }

        .ai-project-page-title>div {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 800;
            color: var(--accent);
        }

        .ai-project-page-title small {
            display: block;
            margin-top: 2px;
            font-size: 0.72rem;
            opacity: 0.58;
        }

        .ai-project-card-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 16px;
        }

        .ai-project-card {
            min-height: 94px;
            padding: 12px;
            border: 1px solid rgba(var(--accent-rgb), 0.12);
            border-radius: 12px;
            background: rgba(var(--accent-rgb), 0.06);
            color: var(--text);
            text-align: left;
            cursor: pointer;
        }

        .ai-project-card-wide {
            grid-column: 1 / -1;
            min-height: 82px;
        }

        .ai-project-card-title {
            font-weight: 800;
            margin-bottom: 8px;
        }

        .ai-project-card-text {
            font-size: 0.8rem;
            line-height: 1.45;
            opacity: 0.68;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .ai-project-fab {
            position: sticky;
            bottom: 12px;
            margin-left: auto;
            width: 56px;
            height: 56px;
            border: none;
            border-radius: 50%;
            background: var(--accent);
            color: var(--bg);
            box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.32);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .ai-project-fab .ico {
            width: 25px;
            height: 25px;
        }

        .ai-project-modal-sheet {
            width: min(92vw, 520px);
            max-height: 88vh;
            overflow-y: auto;
        }

        .ai-project-picker-list,
        .ai-project-source-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .ai-project-picker-row,
        .ai-source-row {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px;
            border-radius: 12px;
            border: 1px solid rgba(var(--accent-rgb), 0.1);
            background: var(--bg);
            color: var(--text);
            text-align: left;
        }

        .ai-project-picker-row {
            cursor: pointer;
        }

        .ai-project-picker-row span {
            font-weight: 700;
        }

        .ai-text-danger-btn {
            border: none;
            background: rgba(198, 40, 40, 0.08);
            color: #c62828;
            border-radius: 8px;
            padding: 7px 10px;
            cursor: pointer;
            flex: 0 0 auto;
        }

        /* --- [Vesper] 番茄钟SVG圆环呼吸动画 --- */
        @keyframes timer-breathing {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.05);
                opacity: 0.9;
            }
        }

        @keyframes text-glow {

            0%,
            100% {
                text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
            }

            50% {
                text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6);
            }
        }

        #timer-progress-ring,
        #fullscreen-progress-ring {
            animation: timer-breathing 2s ease-in-out infinite;
        }

        #timer-display svg,
        #fullscreen-timer svg {
            filter: drop-shadow(0 0 15px rgba(var(--accent-rgb), 0.4));
        }

        #fullscreen-timer-text {
            animation: text-glow 3s ease-in-out infinite;
        }

        /* 退出按钮悬停效果 */
        #fullscreen-timer button:hover {
            background: rgba(var(--accent-rgb), 0.2);
            transform: translateX(-2px);
        }

        #fullscreen-timer button:active {
            transform: translateX(-2px) scale(0.95);
        }

        /* 激励语淡入动画 */
        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 0.5;
                transform: translateY(0);
            }
        }

        #fullscreen-motivation {
            animation: fade-in-up 1s ease-out;
        }

        /* --- [Vesper] 搜索结果面板样式 --- */
        .search-results-panel {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }

        .search-results-panel.active {
            display: flex;
        }

        .search-results-content {
            background: var(--card-bg);
            border-radius: 16px;
            max-width: 90%;
            max-height: 80%;
            width: 400px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .search-results-header {
            padding: 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-results-header h3 {
            margin: 0;
            color: var(--accent);
        }

        .search-results-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            opacity: 0.6;
        }

        .search-results-close:hover {
            opacity: 1;
        }

        .search-results-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
        }

        .search-result-item {
            padding: 12px;
            border-radius: 10px;
            margin-bottom: 8px;
            cursor: pointer;
            background: var(--bg);
            transition: all 0.2s;
        }

        .search-result-item:hover {
            background: rgba(0, 0, 0, 0.05);
            transform: translateX(5px);
        }

        .search-result-role {
            font-size: 0.75rem;
            opacity: 0.7;
            margin-bottom: 4px;
        }

        .search-result-preview {
            font-size: 0.9rem;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .search-result-time {
            font-size: 0.7rem;
            opacity: 0.5;
            margin-top: 6px;
        }

        .search-result-keyword {
            background: rgba(var(--accent-rgb, 255, 165, 0), 0.3);
            padding: 0 2px;
            border-radius: 2px;
        }

        /* --- [Vesper] 气泡形态学 (Bubble Morphology) --- */

        /* 基础气泡构造（所有主题通用） */
        .chat-message-bubble {
            /* 10-06 手感批 3：原 transition: all —— 流式回复时宽高、内边距变化也走 0.3s 动画；收窄到实际会变的视觉属性 */
            transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
            line-height: 1.4;
            word-break: break-word;
            overflow-wrap: break-word;
        }

        /* SVG/头像撑满兜底（fog 刀 v3-20）：这些元素的尺寸 CSS 原在 script.js 运行时注入的
           <style> 块里，首屏未注入前无固定尺寸 → 撑满容器。补一份静态规则(此文件 <link> 即时生效)，
           首屏就有尺寸，彻底消除"巨大爱心/巨大笔记头像，点一下才缩回"的闪现。 */
        .chat-voice-transcript-icon { width: 1.28em; height: 1.28em; display: inline-flex; flex: none; }
        .chat-voice-transcript-icon svg { width: 1.14em; height: 1.14em; }
        .reading-note-pip { width: 15px; height: 15px; flex: none; }
        .reading-note-pip img, .reading-note-pip svg { width: 100%; height: 100%; object-fit: cover; }

        /* 气泡视觉基类（fog 刀迁移：原为 chat.js:546 内联写死，任何主题都压不过。
           迁到这里后主题层用普通规则即可接管。其它渲染点仍带内联=行为不变。） */
        .chat-message-bubble[data-msg-role="user"] {
            background: var(--accent);
            color: var(--bg);
            padding: 8px 12px;
            border-radius: 16px;
            cursor: pointer;
            position: relative;
        }
        .chat-message-bubble[data-msg-role="assistant"] {
            background: var(--card-bg);
            color: var(--text);
            padding: 8px 12px;
            border-radius: 16px;
            border-left: 3px solid var(--accent);
            cursor: pointer;
            position: relative;
        }

        /* 防止图片和长链接撑大聊天界面 */
        .chat-message-bubble img {
            max-width: 100%;
            height: auto;
        }

        .chat-message-bubble a {
            word-break: break-all;
        }

        .markdown-content {
            overflow-x: hidden;
            max-width: 100%;
        }

        .markdown-content pre {
            overflow-x: auto;
            max-width: 100%;
        }

        .markdown-content img {
            max-width: 100%;
            height: auto;
        }

        /* KaTeX 数学公式样式 */
        .katex-block {
            display: block;
            text-align: center;
            margin: 0.8em 0;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 0.5em 0;
        }

        .katex-inline {
            display: inline;
        }

        .markdown-content .katex {
            font-size: 1.1em;
        }

        .markdown-content .katex-display {
            margin: 0.5em 0;
            overflow-x: auto;
            overflow-y: hidden;
        }

        /* ================== 主题特异性演化 ================== */

        /* 4. Blue (蓝白): 秩序、文档、图纸 */
        [data-theme="blue"] .chat-message-bubble {
            border-radius: 6px !important;
        }

        [data-theme="blue"] .chat-message-bubble[data-msg-role="user"] {
            background: var(--accent) !important;
            color: white !important;
        }

        [data-theme="blue"] .chat-message-bubble[data-msg-role="assistant"] {
            background: #f0f8ff !important;
            color: var(--text) !important;
            border-left: 1px solid var(--accent) !important;
        }

        /* 蓝白：AI 气泡只保留米白单层，不再叠蓝色左边 */
        [data-theme="dream"] .chat-message-bubble[data-msg-role="assistant"] {
            background: var(--card-bg) !important;
            border: none !important;
        }

        /* 5. Lime (青柠): 躁动、波普、高对比 */
        [data-theme="lime"] .chat-message-bubble {
            box-shadow: 4px 4px 0px #000;
            border: 2px solid #000;
            border-radius: 0 !important;
            font-weight: bold;
        }

        [data-theme="lime"] .chat-message-bubble[data-msg-role="user"] {
            background: var(--accent) !important;
            color: #000 !important;
        }

        [data-theme="lime"] .chat-message-bubble[data-msg-role="assistant"] {
            background: #fff !important;
            color: #000 !important;
        }

        /* ──────────────────────────────────────────────────────────────
           8. Yesterday (昨日诗稿) · 月白宣纸·磨砂手稿
           气泡：奶白磨砂浊体 + inset 高光做玻璃体积，无 border
           尖角朝头像：AI 左下、User 右下
           ────────────────────────────────────────────────────────────── */
        [data-theme="yesterday"] .chat-message-bubble {
            font-family: 'Noto Serif SC', 'Songti SC', serif !important;
            font-weight: 300 !important;
            letter-spacing: 0.02em !important;
            border: none !important;
            backdrop-filter: blur(24px) saturate(140%);
            -webkit-backdrop-filter: blur(24px) saturate(140%);
            line-height: 1.85 !important;
        }

        [data-theme="yesterday"] .chat-message-bubble[data-msg-role="assistant"] {
            background: linear-gradient(160deg, rgba(252, 250, 244, 0.78) 0%, rgba(232, 232, 226, 0.7) 100%) !important;
            color: #2A2D33 !important;
            border-radius: 22px 22px 22px 4px !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.7),
                inset 0 -1px 0 rgba(74, 107, 122, 0.08),
                0 14px 40px rgba(42, 45, 51, 0.10) !important;
        }

        [data-theme="yesterday"] .chat-message-bubble[data-msg-role="user"] {
            background: linear-gradient(160deg, rgba(255, 252, 245, 0.85) 0%, rgba(245, 238, 222, 0.78) 100%) !important;
            color: #2A2D33 !important;
            border-radius: 22px 22px 4px 22px !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.78),
                inset 0 -1px 0 rgba(184, 149, 106, 0.10),
                0 14px 40px rgba(42, 45, 51, 0.10) !important;
        }

        /* 聊天容器背景：月白纸 + 矢车菊水墨图（要 ::before blur 层加在容器上） */
        [data-theme="yesterday"] #character-chat-screen {
            background-image: url('UI设计/参考/yesterday-bg.png') !important;
            background-size: cover !important;
            background-position: center !important;
            background-attachment: fixed !important;
        }
        [data-theme="yesterday"] #character-chat-screen::before {
            content: '';
            position: fixed; inset: 0;
            pointer-events: none;
            background: rgba(244, 241, 235, 0.28);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 0;
        }
        [data-theme="yesterday"] #character-chat-screen > * {
            position: relative;
            z-index: 1;
        }

        /* 聊天头部 / 输入区改成上下渐变隐入 */
        [data-theme="yesterday"] #character-chat-screen > div:first-child {
            background: linear-gradient(to bottom, rgba(244, 241, 235, 0.65) 0%, rgba(244, 241, 235, 0.15) 100%) !important;
            backdrop-filter: blur(18px) saturate(120%) !important;
            -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
            border-bottom: 1px solid rgba(74, 107, 122, 0.08) !important;
            box-shadow: none !important;
        }

        [data-theme="yesterday"] #character-chat-screen > div:last-of-type {
            background: linear-gradient(to top, rgba(244, 241, 235, 0.55) 0%, rgba(244, 241, 235, 0.10) 100%) !important;
        }

        /* ──────────────────────────────────────────────────────────────
           9. Midnight (夜读残篇) · 深墨夜·封存海底磨砂玻璃 (yesterday 暗色双生)
           气泡：yesterday_poetry 同款 alpha 0.25 + 极淡 1px border + 深 shadow
           ────────────────────────────────────────────────────────────── */
        [data-theme="midnight"] .chat-message-bubble {
            font-family: 'Noto Serif SC', 'Songti SC', serif !important;
            font-weight: 300 !important;
            letter-spacing: 0.02em !important;
            backdrop-filter: blur(20px) saturate(120%);
            -webkit-backdrop-filter: blur(20px) saturate(120%);
            line-height: 1.9 !important;
        }

        [data-theme="midnight"] .chat-message-bubble[data-msg-role="assistant"] {
            background: rgba(20, 30, 45, 0.25) !important;
            color: #D8DEE5 !important;
            border: 1px solid rgba(120, 150, 180, 0.15) !important;
            border-radius: 20px 20px 20px 4px !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
        }

        [data-theme="midnight"] .chat-message-bubble[data-msg-role="user"] {
            background: rgba(40, 60, 80, 0.25) !important;
            color: #D8DEE5 !important;
            border: 1px solid rgba(150, 180, 210, 0.15) !important;
            border-radius: 20px 20px 4px 20px !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
        }

        /* 聊天容器背景：深墨夜 + 流星夜空图（对话场域，独立于主界面雪林）*/
        [data-theme="midnight"] #character-chat-screen {
            background-image: url('UI设计/参考/midnight-chat-bg.jpg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-attachment: fixed !important;
        }
        [data-theme="midnight"] #character-chat-screen::before {
            content: '';
            position: fixed; inset: 0;
            pointer-events: none;
            background: rgba(8, 12, 18, 0.65);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 0;
        }
        [data-theme="midnight"] #character-chat-screen > * {
            position: relative;
            z-index: 1;
        }

        [data-theme="midnight"] #character-chat-screen > div:first-child {
            background: linear-gradient(to bottom, rgba(8, 12, 18, 0.55) 0%, rgba(8, 12, 18, 0) 100%) !important;
            backdrop-filter: blur(18px) saturate(120%) !important;
            -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
            border-bottom: 1px solid rgba(140, 165, 195, 0.05) !important;
            box-shadow: none !important;
        }

        [data-theme="midnight"] #character-chat-screen > div:last-of-type {
            background: linear-gradient(to top, rgba(8, 12, 18, 0.55) 0%, rgba(8, 12, 18, 0) 100%) !important;
        }

        /* yesterday/midnight 主题下：消息头像保持简单圆形 + 淡阴影（跟原型一致，不要双环）*/
        [data-theme="yesterday"] .chat-msg-avatar {
            border: 1.5px solid rgba(252, 250, 244, 0.9) !important;
            background: rgba(74, 107, 122, 0.18) !important;
            box-shadow: 0 3px 10px rgba(74, 107, 122, 0.20) !important;
        }
        [data-theme="yesterday"] .chat-msg-avatar-user {
            background: rgba(184, 149, 106, 0.20) !important;
            box-shadow: 0 3px 10px rgba(184, 149, 106, 0.25) !important;
        }

        [data-theme="midnight"] .chat-msg-avatar {
            border: 1.5px solid rgba(18, 24, 34, 0.9) !important;
            background: rgba(110, 151, 172, 0.25) !important;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(110, 151, 172, 0.3) !important;
        }
        [data-theme="midnight"] .chat-msg-avatar-user {
            background: rgba(168, 136, 88, 0.25) !important;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(168, 136, 88, 0.3) !important;
        }

        /* 顶部 character-chat 头像也加双环 */
        [data-theme="yesterday"] #chat-avatar {
            border-color: rgba(252, 250, 244, 0.9) !important;
            box-shadow:
                0 0 0 2px rgba(184, 149, 106, 0.4),
                0 4px 16px rgba(74, 107, 122, 0.20) !important;
        }
        [data-theme="midnight"] #chat-avatar {
            border-color: rgba(18, 24, 34, 0.9) !important;
            box-shadow:
                0 0 0 2px rgba(168, 136, 88, 0.4),
                0 0 16px rgba(110, 151, 172, 0.45),
                0 4px 16px rgba(0, 0, 0, 0.5) !important;
        }

        /* yesterday/midnight: 输入框玻璃化 */
        [data-theme="yesterday"] #character-chat-input {
            background: rgba(252, 250, 244, 0.55) !important;
            backdrop-filter: blur(20px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
            border: 1px solid rgba(74, 107, 122, 0.12) !important;
            border-radius: 18px !important;
            color: #2A2D33 !important;
            font-family: 'Noto Serif SC', 'Songti SC', serif !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.55),
                0 6px 22px rgba(74, 107, 122, 0.10) !important;
        }
        [data-theme="yesterday"] #character-chat-input::placeholder {
            color: rgba(74, 107, 122, 0.55) !important;
            font-style: italic;
        }

        [data-theme="midnight"] #character-chat-input {
            background: rgba(22, 30, 42, 0.42) !important;
            backdrop-filter: blur(20px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
            border: 1px solid rgba(140, 165, 195, 0.12) !important;
            border-radius: 18px !important;
            color: #D8DEE5 !important;
            font-family: 'Noto Serif SC', 'Songti SC', serif !important;
            box-shadow:
                inset 0 1px 0 rgba(140, 165, 195, 0.08),
                0 8px 26px rgba(0, 0, 0, 0.5) !important;
        }
        [data-theme="midnight"] #character-chat-input::placeholder {
            color: rgba(140, 165, 195, 0.55) !important;
            font-style: italic;
        }

        /* yesterday/midnight: 输入台整体面板玻璃化 (alpha 减半 + blur 加大 → 更轻更透更玻璃) */
        [data-theme="yesterday"] .input-container-wrapper {
            background: rgba(252, 250, 244, 0.28) !important;
            backdrop-filter: blur(32px) saturate(160%) !important;
            -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.6),
                0 -8px 32px rgba(74, 107, 122, 0.08) !important;
        }

        [data-theme="midnight"] .input-container-wrapper {
            background: rgba(18, 24, 34, 0.22) !important;
            backdrop-filter: blur(32px) saturate(160%) !important;
            -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
            border-top: 1px solid rgba(140, 165, 195, 0.10) !important;
            box-shadow:
                inset 0 1px 0 rgba(140, 165, 195, 0.08),
                0 -8px 32px rgba(0, 0, 0, 0.4) !important;
        }

        /* yesterday/midnight: + 按钮 / AI 回复按钮（圆形 44x44，浅玻璃）*/
        [data-theme="yesterday"] .input-row .plus-btn,
        [data-theme="yesterday"] #character-ai-reply-btn {
            background: rgba(252, 250, 244, 0.45) !important;
            backdrop-filter: blur(20px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            color: var(--accent) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.55),
                0 4px 12px rgba(74, 107, 122, 0.12) !important;
            border-radius: 50% !important;
        }
        [data-theme="midnight"] .input-row .plus-btn,
        [data-theme="midnight"] #character-ai-reply-btn {
            background: rgba(22, 30, 42, 0.40) !important;
            backdrop-filter: blur(20px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
            border: 1px solid rgba(140, 165, 195, 0.20) !important;
            color: var(--accent) !important;
            box-shadow:
                inset 0 1px 0 rgba(140, 165, 195, 0.08),
                0 4px 12px rgba(0, 0, 0, 0.4) !important;
            border-radius: 50% !important;
        }

        /* yesterday/midnight: send 按钮强制圆形 + 渐变 + glow */
        [data-theme="yesterday"] #character-send-btn {
            width: 44px !important;
            height: 44px !important;
            border-radius: 50% !important;
            background: linear-gradient(135deg, #4A6B7A, #2F4A57) !important;
            color: rgba(252, 250, 244, 0.96) !important;
            border: none !important;
            box-shadow:
                0 4px 16px rgba(74, 107, 122, 0.40),
                0 2px 4px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
            transition: transform 0.2s, box-shadow 0.2s !important;
        }
        [data-theme="yesterday"] #character-send-btn:hover {
            transform: rotate(-12deg) scale(1.05) !important;
            box-shadow:
                0 6px 20px rgba(74, 107, 122, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
        }
        [data-theme="yesterday"] #character-send-btn svg {
            stroke: rgba(252, 250, 244, 0.96) !important;
        }

        [data-theme="midnight"] #character-send-btn {
            width: 44px !important;
            height: 44px !important;
            border-radius: 50% !important;
            background: linear-gradient(135deg, #2F4A57, #6E97AC) !important;
            color: rgba(248, 240, 230, 0.96) !important;
            border: none !important;
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.5),
                0 0 16px rgba(110, 151, 172, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
            transition: transform 0.2s, box-shadow 0.2s !important;
        }
        [data-theme="midnight"] #character-send-btn:hover {
            transform: rotate(-12deg) scale(1.05) !important;
            box-shadow:
                0 6px 22px rgba(0, 0, 0, 0.6),
                0 0 22px rgba(110, 151, 172, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
        }
        [data-theme="midnight"] #character-send-btn svg {
            stroke: rgba(248, 240, 230, 0.96) !important;
        }

        /* chat-input-wrap (textarea 容器) 浅玻璃化 + 大圆角 + focus glow */
        [data-theme="yesterday"] .chat-input-wrap {
            background: rgba(252, 250, 244, 0.42) !important;
            backdrop-filter: blur(22px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            border-radius: 22px !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
            transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease !important;
        }
        [data-theme="yesterday"] .chat-input-wrap:focus-within {
            background: rgba(252, 250, 244, 0.58) !important;
            border-color: rgba(184, 149, 106, 0.55) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.6),
                0 0 0 3px rgba(184, 149, 106, 0.18),
                0 6px 22px rgba(74, 107, 122, 0.18) !important;
        }
        [data-theme="midnight"] .chat-input-wrap {
            background: rgba(22, 30, 42, 0.35) !important;
            backdrop-filter: blur(22px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
            border: 1px solid rgba(140, 165, 195, 0.18) !important;
            border-radius: 22px !important;
            box-shadow: inset 0 1px 0 rgba(140, 165, 195, 0.10) !important;
            transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease !important;
        }
        [data-theme="midnight"] .chat-input-wrap:focus-within {
            background: rgba(22, 30, 42, 0.50) !important;
            border-color: rgba(168, 136, 88, 0.55) !important;
            box-shadow:
                inset 0 1px 0 rgba(140, 165, 195, 0.18),
                0 0 0 3px rgba(168, 136, 88, 0.20),
                0 0 22px rgba(110, 151, 172, 0.30) !important;
        }

        /* ─────────── 动效套装 (yesterday + midnight) ─────────── */

        /* 1. 主题切换全局过渡：换主题时颜色/背景平滑切换 */
        html[data-theme="yesterday"],
        html[data-theme="midnight"],
        html[data-theme="yesterday"] body,
        html[data-theme="midnight"] body {
            transition: background-color 0.5s ease, color 0.5s ease !important;
        }

        /* 2. 气泡进入动画：诗笺铺开（渐入 + 微微下浮） */
        @keyframes bubbleSettle-yesterday {
            from { opacity: 0; transform: translateY(8px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        [data-theme="yesterday"] .chat-message-bubble,
        [data-theme="midnight"] .chat-message-bubble {
            animation: bubbleSettle-yesterday 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
            transition: box-shadow 0.3s ease, transform 0.25s ease !important;
        }

        /* 3. 气泡 hover 微浮起 + shadow 加深 */
        [data-theme="yesterday"] .chat-message-bubble:hover {
            transform: translateY(-1.5px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.8),
                inset 0 -1px 0 rgba(74, 107, 122, 0.10),
                0 18px 48px rgba(42, 45, 51, 0.13) !important;
        }
        [data-theme="midnight"] .chat-message-bubble:hover {
            transform: translateY(-1.5px);
            box-shadow:
                0 14px 48px rgba(0, 0, 0, 0.55),
                0 0 18px rgba(110, 151, 172, 0.20) !important;
        }

        /* 4. 头像 hover 旋转微缩放 (诗笺印章被指尖拨动感) */
        [data-theme="yesterday"] .chat-msg-avatar:hover,
        [data-theme="midnight"] .chat-msg-avatar:hover {
            transform: rotate(-6deg) scale(1.08);
        }

        /* 5. send 按钮 :active 涟漪缩放 (按下反馈) */
        [data-theme="yesterday"] #character-send-btn:active,
        [data-theme="midnight"] #character-send-btn:active {
            transform: scale(0.92) rotate(-12deg) !important;
            transition: transform 0.1s !important;
        }

        /* 6. + 按钮 / AI 回复按钮 hover 浮起 */
        [data-theme="yesterday"] .input-row .plus-btn:hover,
        [data-theme="yesterday"] #character-ai-reply-btn:hover,
        [data-theme="midnight"] .input-row .plus-btn:hover,
        [data-theme="midnight"] #character-ai-reply-btn:hover {
            transform: translateY(-2px) scale(1.04);
            transition: transform 0.25s ease !important;
        }
        [data-theme="yesterday"] .input-row .plus-btn,
        [data-theme="yesterday"] #character-ai-reply-btn,
        [data-theme="midnight"] .input-row .plus-btn,
        [data-theme="midnight"] #character-ai-reply-btn {
            transition: transform 0.25s ease, background 0.3s ease, box-shadow 0.3s ease !important;
        }

        /* 7. 输入 pill (vesper/搜索/生图/档案) hover 浮起 + active 印章感 */
        [data-theme="yesterday"] .input-pill,
        [data-theme="midnight"] .input-pill {
            transition: all 0.25s ease;
        }
        [data-theme="yesterday"] .input-pill:hover {
            background: rgba(74, 107, 122, 0.15) !important;
            border-color: rgba(74, 107, 122, 0.35) !important;
            transform: translateY(-1px);
        }
        [data-theme="midnight"] .input-pill:hover {
            background: rgba(110, 151, 172, 0.18) !important;
            border-color: rgba(140, 165, 195, 0.35) !important;
            transform: translateY(-1px);
        }

        /* yesterday/midnight: status-bar 头部 (角色名 + 在线状态) 玻璃化 */
        [data-theme="yesterday"] #character-chat-screen > div:first-child {
            background: rgba(252, 250, 244, 0.55) !important;
            backdrop-filter: blur(24px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
            border-bottom: 1px solid rgba(74, 107, 122, 0.10) !important;
            box-shadow: none !important;
        }
        [data-theme="midnight"] #character-chat-screen > div:first-child {
            background: rgba(18, 24, 34, 0.45) !important;
            backdrop-filter: blur(24px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
            border-bottom: 1px solid rgba(140, 165, 195, 0.08) !important;
            box-shadow: none !important;
        }

        /* --- [Vesper] AI 周报样式 --- */
        .ai-report-card {
            position: relative;
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 20px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .ai-report-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.15;
            z-index: 0;
        }

        .ai-report-card>* {
            position: relative;
            z-index: 1;
        }

        .ai-report-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .ai-report-title {
            font-size: 1.4rem;
            font-weight: bold;
            line-height: 1.3;
            max-width: 70%;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .ai-report-score {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 3px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .ai-report-score-num {
            font-size: 1.8rem;
            font-weight: bold;
            line-height: 1;
        }

        .ai-report-score-label {
            font-size: 0.6rem;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .ai-report-summary {
            font-size: 0.95rem;
            line-height: 1.7;
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            backdrop-filter: blur(5px);
        }

        .ai-report-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }

        .ai-report-tag {
            padding: 6px 14px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            backdrop-filter: blur(5px);
        }

        .ai-report-meta {
            font-size: 0.75rem;
            opacity: 0.7;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        .ai-report-generating {
            text-align: center;
            padding: 40px 20px;
        }

        .ai-report-generating .spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255, 255, 255, 0.2);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

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

        /* 周报档案列表 */
        .report-archive-item {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 15px;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: all 0.2s;
            border-left: 4px solid;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .report-archive-item:hover {
            transform: translateX(5px);
        }

        .report-archive-item:active {
            transform: scale(0.98);
        }

        .report-archive-color {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            flex-shrink: 0;
        }

        .report-archive-info {
            flex: 1;
            min-width: 0;
        }

        .report-archive-title {
            font-weight: bold;
            font-size: 0.95rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
        }

        .report-archive-date {
            font-size: 0.75rem;
            opacity: 0.6;
        }

        .report-archive-score {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--accent);
        }

        /* 修复滑动条过于粗的问题 */
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

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

        /* 移动端强制全屏样式 */
        @media (max-width: 480px) {
            .sidebar-panel.active .sheet {
                width: 100vw !important;
                height: 100vh !important;
                top: 0 !important;
                left: 0 !important;
                margin: 0 !important;
                border-radius: 0 !important;
                max-height: none !important;
                display: flex !important;
                flex-direction: column !important;
                padding: 15px !important;
            }

            /* 针对 AI 助手聊天窗口的特殊优化 */
            #panel-ai-assistant .sheet {
                padding: 10px !important;
            }

            /* 聊天内容区域高度调整，确保输入框不被顶出 */
            #ai-chat-container {
                flex: 1 !important;
                height: auto !important;
                max-height: none !important;
                margin-bottom: 10px !important;
            }

            /* 确保输入框区域可见 */
            #panel-ai-assistant .input-group {
                margin-bottom: 0 !important;
            }
        }

        /* --- [Vesper] 修复移动端聊天输入框被键盘遮挡 --- */
        #character-chat-screen>div:last-of-type {
            position: fixed !important;
            /* 使用 !important 覆盖内联样式 */
            bottom: 0 !important;
            left: 0 !important;
            width: 100% !important;
            padding-bottom: max(15px, env(safe-area-inset-bottom)) !important;
            z-index: 5001;
        }

        #character-chat-messages {
            padding-bottom: 130px !important;
            /* 留出输入框的空间 (含工具栏) */
        }

        /* --- [Vesper] 战术工具栏样式 --- */
        .tool-icon {
            cursor: pointer;
            opacity: 0.6;
            transition: all 0.2s;
            color: var(--text);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tool-icon:hover {
            opacity: 1;
            transform: translateY(-2px);
            color: var(--accent);
        }

        .tool-icon:active {
            transform: scale(0.9);
        }

        .tool-icon.active {
            opacity: 1;
            color: var(--accent);
            animation: breathing 2s ease-in-out infinite;
        }

        @keyframes breathing {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }
        }

        /* 离线模式样式：10-11 移到 ui/shell/network-status.js（独立小标签 #az-offline-pill）。
           原来写在 body::before 上，和白雾 / 锈湖等主题自己的整屏 body::before 底纹叠成一整屏红色遮罩；
           body 上的 filter 还会让所有 position:fixed 的顶栏 / 底栏 / 侧栏改成跟着 body 走 ⇒ 整页滑开。
           下面的 @keyframes fadeIn 不是这块专用的（.view 入场也用它），保留。 */

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

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        #network-indicator {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        /* 聊天日期分隔线 (同 tool-usage-indicator 风格) */
        .chat-date-separator,
        .chat-timeline-event {
            text-align: center;
            margin: 6px 0;
            user-select: none;
        }

        .chat-date-separator span,
        .chat-timeline-event span {
            display: inline-flex;
            align-items: center;
            font-size: 0.7rem;
            opacity: 0.5;
            padding: 4px 12px;
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.03);
        }

        /* =========================================
           ChatGPT UI Mode Overrides
           ========================================= */

        /* Header Simplification */
        .chat-ui-mode-chatgpt #chat-avatar {
            display: none !important;
        }

        .chat-ui-mode-chatgpt #character-chat-screen > div:first-child {
            background: var(--bg) !important;
            border-bottom: 1px solid rgba(0,0,0,0.05) !important;
            box-shadow: none !important;
        }

        /* Message Bubbles */
        .chat-ui-mode-chatgpt .chat-message-bubble[data-msg-role="user"] {
            background: #f4f4f4 !important;
            color: var(--text) !important;
            border-radius: 18px !important;
        }

        .chat-ui-mode-chatgpt .chat-message-bubble[data-msg-role="assistant"] {
            background: transparent !important;
            border: none !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }

        /* Dark mode adjustment for user bubble */
        @media (prefers-color-scheme: dark) {
            body:not([data-theme="light"]) .chat-ui-mode-chatgpt .chat-message-bubble[data-msg-role="user"] {
                background: #2f2f2f !important;
                color: #ececec !important;
            }
        }

        body[data-theme="dark"] .chat-ui-mode-chatgpt .chat-message-bubble[data-msg-role="user"] {
            background: #2f2f2f !important;
            color: #ececec !important;
        }

        /* Input Area Tool Toggles */
        .chat-ui-mode-chatgpt #character-ai-reply-btn {
            display: none !important;
        }
        /* v6 U1（2026-09-27）：「AI 回复强显」规则退役——装备栏侧由 tactical-bar.js 数据清单接管。 */

        /* ─────────── mobile 性能优化 (yesterday + midnight) ───────────
           聊天界面是 backdrop-filter 重灾区:容器 ::before blur + 气泡 blur
           + 输入容器 blur + textarea 容器 blur + 按钮 blur,mobile 一定卡。
           ≤768px 全关,改成纯半透提升 alpha。
           --------------------------------------------------------- */
        @media (max-width: 768px) {
            [data-theme="yesterday"] #character-chat-screen,
            [data-theme="midnight"] #character-chat-screen {
                background-attachment: scroll !important;
            }

            /*
              mobile chat 背景: yesterday 用竖版 mobile cg + 恢复 backdrop-filter blur
              单一伪元素 backdrop-filter mobile 性能能扛
            */
            [data-theme="yesterday"] #character-chat-screen {
                background-image: url('UI设计/参考/yesterday-mobile-bg.jpg') !important;
                background-size: cover !important;
                background-position: center !important;
            }
            [data-theme="yesterday"] #character-chat-screen::before {
                backdrop-filter: blur(6px) !important;
                -webkit-backdrop-filter: blur(6px) !important;
                background: rgba(244, 241, 235, 0.40) !important;
            }
            [data-theme="midnight"] #character-chat-screen::before {
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
                background: rgba(8, 12, 18, 0.55) !important;
            }

            /* 气泡 + 头部 + 输入容器 + textarea 容器 + 按钮 + pill 全关 blur */
            [data-theme="yesterday"] .chat-message-bubble[data-msg-role="assistant"],
            [data-theme="yesterday"] .chat-message-bubble[data-msg-role="user"],
            [data-theme="yesterday"] .input-container-wrapper,
            [data-theme="yesterday"] .chat-input-wrap,
            [data-theme="yesterday"] #character-chat-input,
            [data-theme="yesterday"] #character-chat-screen > div:first-child,
            [data-theme="yesterday"] .input-row .plus-btn,
            [data-theme="yesterday"] #character-ai-reply-btn,
            [data-theme="yesterday"] .input-pill {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            [data-theme="yesterday"] .chat-message-bubble[data-msg-role="assistant"] {
                background: rgba(252, 250, 244, 0.72) !important;
            }
            [data-theme="yesterday"] .chat-message-bubble[data-msg-role="user"] {
                background: rgba(255, 252, 245, 0.78) !important;
            }
            [data-theme="yesterday"] .input-container-wrapper {
                background: rgba(252, 250, 244, 0.68) !important;
            }
            [data-theme="yesterday"] .chat-input-wrap,
            [data-theme="yesterday"] #character-chat-input {
                background: rgba(252, 250, 244, 0.62) !important;
            }
            [data-theme="yesterday"] #character-chat-screen > div:first-child {
                background: rgba(252, 250, 244, 0.68) !important;
            }
            [data-theme="yesterday"] .input-row .plus-btn,
            [data-theme="yesterday"] #character-ai-reply-btn {
                background: rgba(252, 250, 244, 0.72) !important;
            }

            [data-theme="midnight"] .chat-message-bubble[data-msg-role="assistant"],
            [data-theme="midnight"] .chat-message-bubble[data-msg-role="user"],
            [data-theme="midnight"] .input-container-wrapper,
            [data-theme="midnight"] .chat-input-wrap,
            [data-theme="midnight"] #character-chat-input,
            [data-theme="midnight"] #character-chat-screen > div:first-child,
            [data-theme="midnight"] .input-row .plus-btn,
            [data-theme="midnight"] #character-ai-reply-btn,
            [data-theme="midnight"] .input-pill {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            [data-theme="midnight"] .chat-message-bubble[data-msg-role="assistant"] {
                background: rgba(20, 30, 45, 0.62) !important;
            }
            [data-theme="midnight"] .chat-message-bubble[data-msg-role="user"] {
                background: rgba(40, 60, 80, 0.62) !important;
            }
            [data-theme="midnight"] .input-container-wrapper {
                background: rgba(18, 24, 34, 0.62) !important;
            }
            [data-theme="midnight"] .chat-input-wrap,
            [data-theme="midnight"] #character-chat-input {
                background: rgba(22, 30, 42, 0.58) !important;
            }
            [data-theme="midnight"] #character-chat-screen > div:first-child {
                background: rgba(18, 24, 34, 0.62) !important;
            }
            [data-theme="midnight"] .input-row .plus-btn,
            [data-theme="midnight"] #character-ai-reply-btn {
                background: rgba(22, 30, 42, 0.62) !important;
            }

            /* mobile 关 hover 动效避免 touch 后 :hover stuck */
            [data-theme="yesterday"] .chat-message-bubble:hover,
            [data-theme="midnight"] .chat-message-bubble:hover {
                transform: none !important;
            }
        }

/* ===================== 命运之轮 结果卡 + 弹层（红金复古老虎机主题） =====================
   你玩(战术装备栏 iframe → postMessage)和角色玩(MCP ero_slot_spin)两侧复用同一张卡。 */
.ruota-card{
  margin:8px 0; padding:14px 16px; border-radius:12px;
  background:radial-gradient(120% 80% at 50% 0%, rgba(232,200,115,.12), transparent 60%), linear-gradient(180deg,#1c0d05,#120705);
  border:1px solid rgba(232,200,115,.45);
  box-shadow:0 6px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(232,200,115,.25);
  color:#f3e6c8; font-family:'JetBrains Mono','Noto Serif SC',serif;
}
.ruota-card--gore{
  background:radial-gradient(120% 80% at 50% 0%, rgba(224,32,44,.16), transparent 60%), linear-gradient(180deg,#1a0303,#0c0202);
  border-color:rgba(224,80,80,.5);
}
.ruota-head{ display:flex; align-items:center; gap:8px; padding-bottom:8px; margin-bottom:10px;
  border-bottom:1px dashed rgba(232,200,115,.35); }
.ruota-crest{ font-size:1.1rem; }
.ruota-title{ font-weight:700; letter-spacing:1.5px; color:#e8c873; font-size:.92rem;
  text-shadow:0 0 8px rgba(232,200,115,.35); }
.ruota-card--gore .ruota-title{ color:#ff8a8a; text-shadow:0 0 8px rgba(224,32,44,.4); }
.ruota-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.ruota-row{ display:flex; align-items:baseline; gap:10px; }
.ruota-dim{ flex:0 0 auto; min-width:46px; font-size:.7rem; letter-spacing:1px; color:#caa45a;
  text-transform:uppercase; opacity:.85; }
.ruota-val{ flex:1; display:flex; flex-direction:column; min-width:0; }
.ruota-zh{ font-size:1rem; color:#fff6e2; font-weight:600; word-break:break-word; }
.ruota-supp{ font-size:.7rem; color:#b89b6a; opacity:.8; margin-top:1px; }
.ruota-row--gore .ruota-zh{ color:#ffd9d9; }
.ruota-row--gore .ruota-dim{ color:#e0505a; }

.ruota-modal{ position:fixed; inset:0; z-index:14000; }
.ruota-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.ruota-modal-shell{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:max(12px,env(safe-area-inset-top)) 8px max(12px,env(safe-area-inset-bottom)); pointer-events:none; }
.ruota-frame{ pointer-events:auto; width:min(440px,100%); height:min(840px,100%); border:none;
  border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.6); background:#0a0202; }
.ruota-modal-close{ pointer-events:auto; position:absolute; top:max(14px,env(safe-area-inset-top)); right:16px;
  z-index:2; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(20,10,5,.85); color:#e8c873; font-size:1.4rem; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.5); }

/* 完整文本气泡里的句内语音行（[voice] 包裹）——与文本段之间留点呼吸，单独成行 */
.chat-voice-inline{ margin:8px 0; }
.chat-voice-inline:first-child{ margin-top:0; }
.chat-voice-inline:last-child{ margin-bottom:0; }

/* 生物状态卡扩展字段（今日性欲/性活动/高潮）——能量环+情绪下方的小列表 */
.sc-bio-extra{ margin-top:10px; padding-top:10px; border-top:1px dashed rgba(var(--accent-rgb),0.18); display:flex; flex-direction:column; gap:6px; }
.sc-bio-extra-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:0.82rem; }
.sc-bio-extra-k{ opacity:0.7; }
.sc-bio-extra-v{ font-weight:600; color:var(--accent); }
.handoff-return-shelf {
    margin: 0 10px 8px;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-bg) 92%, var(--accent) 8%);
    max-height: 220px;
    overflow-y: auto;
}

.handoff-shelf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: .75rem;
    font-weight: 650;
}

.handoff-shelf-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 7px 4px;
    border-top: 1px solid var(--border);
    font-size: .72rem;
}

/* 10-04：卡片动作行（带给 AI / 查看·重试 / 移出）。原来整张卡片是 <label>、复选框几乎看不见 */
.handoff-shelf-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.handoff-shelf-take {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: auto;
    padding: 3px 9px 3px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .7rem;
    cursor: pointer;
    user-select: none;
}

.handoff-shelf-take input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.handoff-shelf-take.on {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-weight: 600;
}

.handoff-shelf-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.handoff-shelf-title {
    font-weight: 600;
}

.handoff-shelf-state {
    opacity: .62;
}

.handoff-shelf-preview {
    margin-top: 3px;
    opacity: .76;
    line-height: 1.4;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.handoff-shelf-mini {
    border: 0;
    background: transparent;
    color: var(--accent);
    padding: 2px 5px;
    cursor: pointer;
    font-size: .7rem;
}

/* P2-A（2026-08-06）：取件台折叠/关闭控件 */
.handoff-shelf-head-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.handoff-shelf-title-row {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.handoff-shelf-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: .66rem;
    font-weight: 650;
    vertical-align: 1px;
}
.handoff-shelf-badge-run {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}
.handoff-shelf-badge-ready {
    background: color-mix(in srgb, #2e7d32 16%, transparent);
    color: #2e7d32;
}
.handoff-shelf-restore {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
    background: color-mix(in srgb, var(--card-bg) 92%, var(--accent) 8%);
    color: var(--text);
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: .74rem;
    opacity: .85;
}
.handoff-shelf-restore:hover {
    opacity: 1;
}
.handoff-shelf-restore-ico {
    flex-shrink: 0;
}
.handoff-shelf-restore-badge {
    color: var(--accent);
    font-weight: 650;
}

/* P2-B（2026-08-06）：composer 图片附件托盘 + 发送前预览 */
.composer-image-tray {
    margin: 0 10px 8px;
    padding: 8px;
    gap: 8px;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-bg) 96%, var(--accent) 4%);
}
.composer-image-tray::-webkit-scrollbar {
    height: 4px;
}
.cimg-item {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
}
.cimg-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
.cimg-item.uploading .cimg-thumb {
    opacity: .55;
}
.cimg-status {
    position: absolute;
    left: 2px;
    bottom: 2px;
    right: 2px;
    text-align: center;
    font-size: .58rem;
    line-height: 1.5;
    border-radius: 6px;
    color: #fff;
    pointer-events: none;
}
.cimg-status-uploading {
    background: rgba(0, 0, 0, .55);
}
.cimg-status-failed {
    background: rgba(198, 40, 40, .85);
}
.cimg-del {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .8rem;
    cursor: pointer;
    padding: 0;
}
.cimg-btn {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .58rem;
    line-height: 1.6;
    cursor: pointer;
    padding: 0;
}
/* P2-B（2026-08-06）：消息内同批图片画廊 collage（D3） */
.msg-image-grid {
    display: grid;
    gap: 4px;
    border-radius: 12px;
    overflow: hidden;
    max-width: min(100%, 280px);
    margin-bottom: 8px;
}
.msg-image-grid.g1 {
    grid-template-columns: 1fr;
    max-height: 240px;
}
.msg-image-grid.g1 .msg-image-cell {
    aspect-ratio: auto;
    max-height: 240px;
}
.msg-image-grid.g2 {
    grid-template-columns: 1fr 1fr;
}
.msg-image-grid.g3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.msg-image-grid.g4,
.msg-image-grid.g5,
.msg-image-grid.g6,
.msg-image-grid.g9 {
    grid-template-columns: repeat(3, 1fr);
}
.msg-image-cell {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: zoom-in;
}
.msg-image-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.msg-image-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

/* 9-11（塔拉真机）：图片不占气泡 —— 有正文时画廊独立放在气泡上方；纯图消息不画气泡底色。
   透明规则用 id 前缀把优先级抬到 (1,3,0)：claude 主题和几套主题色把 user 气泡写成
   (0,3,0) !important，低于它会被静默压掉，看起来"改了没生效"。 */
.chat-message-image-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}
.chat-message-image-stack > .msg-image-grid {
    margin-bottom: 0;
}
/* 9-24：头像只挂在文字气泡旁边 —— 叠放时气泡和头像同一行；画廊让出头像那一列（35px + 8px 间距），
   右缘与气泡对齐。行内沿用消息行的横排语义（气泡在左、头像在右、顶对齐）。 */
.chat-message-image-stack-row {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.chat-image-stack-with-avatar > .msg-image-grid {
    margin-right: 43px;
}
.chat-ui-mode-claude .chat-image-stack-with-avatar > .msg-image-grid {
    margin-right: 0;   /* 官端消息流不画头像（claude-theme.css），不留这一列 */
}
#character-chat-screen .chat-message-bubble.chat-image-only-bubble[data-msg-role],
#ai-chat-container .chat-message-bubble.chat-image-only-bubble[data-msg-role] {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--text) !important;
}
.chat-image-only-bubble .msg-image-grid {
    margin-bottom: 4px;
}

/* 9-21 第 7 条：转发附言跟着卡片一起显示，按正常消息排版，不塞进卡里。 */
.chat-card-note {
    margin-top: 6px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text);
    word-break: break-word;
}
.chat-card-note > :first-child { margin-top: 0; }
.chat-card-note > :last-child { margin-bottom: 0; }

/* 9-21 塔拉：转发附言跟着卡片走，自己发的那条应该靠右下，
   跟她自己说的话一个方向，不要孤零零贴在左边。 */
.chat-message-bubble[data-msg-role="user"] .chat-card-note {
    text-align: right;
}

/* 9-21 塔拉真机第 1 条：自带外框的卡片（文件卡 / 转发卡 / 语音卡）不再套聊天气泡。
   气泡元素保留（长按、多选、data-msg-* 全挂在它上面），只脱掉底色与内边距 ——
   跟上面纯图消息是同一招。**必须 !important**：助手侧 bubbleDiv 的背景是行内样式写的。 */
#character-chat-screen .chat-message-bubble.chat-card-only-bubble[data-msg-role],
#ai-chat-container .chat-message-bubble.chat-card-only-bubble[data-msg-role] {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--text) !important;
}

/* P2-B（2026-08-06）：同批图片 lightbox（D4，composer 预览与消息画廊共用） */
.chat-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .85);
    cursor: zoom-out;
}
.chat-image-lightbox-inner {
    position: relative;
    max-width: 94vw;
    max-height: 88vh;
}
.chat-image-lightbox-inner img {
    max-width: 94vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    background: #000;
}
.chat-image-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.chat-image-lightbox-nav.prev {
    left: -52px;
}
.chat-image-lightbox-nav.next {
    right: -52px;
}
.chat-image-lightbox-counter {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .85);
    font-size: .8rem;
}
.chat-image-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

/* ============================================================
   正文模式（prose）+ User 长消息折叠 + 文字定相（2026-09-28 施工稿 v0.2 §4/§5）
   作用域：AZOTH 原生主题。仿 ChatGPT / 仿 Claude 不接这些结构
   （非 AZOTH 主题下 prose 消息按 full 泡壳呈现，见 script.js 渲染分支）。
   ============================================================ */

/* —— prose 身份头（§4.3/§4.4）：头像+名字+时间在内容上方，AI 左 / User 右 —— */
.az-prose-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px 0;
}
.az-prose-identity .chat-msg-avatar {
    width: 26px;
    height: 26px;
}
.az-prose-identity-name {
    font-size: 0.86rem;
    font-weight: 600;
    opacity: 0.92;
}
.az-prose-identity-time {
    font-size: 11px;
    opacity: 0.55;
}
.az-prose-identity-user {
    justify-content: flex-end;
}
/* 参考图（9-29 塔拉）：名字在上、时间叠在下方；User 侧整列在头像左侧、左对齐。 */
.az-prose-id-col {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.az-prose-identity-user .az-prose-id-col {
    /* 塔拉 9-29 二轮：名字/时间贴着头像排（列内容右对齐），不要在名字和头像之间空出一段。 */
    align-items: flex-end;
}
.az-prose-identity-name {
    line-height: 1.25;
}
.az-prose-identity-time {
    line-height: 1.25;
}

/* —— prose AI 无泡壳（§4.1）：内联样式已剥底色，这里压住主题类对 .chat-message-bubble 的
      玻璃化/底色回流。9-29 四轮：fog/roots 等主题规则在独立 css 里、加载序在 chat.css 之后，
      同特异性 (0,3,0) 下它们赢 —— 上 #character-chat-screen 拼成 (1,3,0)，**无条件**压过一切
      主题泡壳（背景/纸纹/边框/阴影/圆角/毛玻璃），主题只剩字体与墨色的染权，不能把 prose
      变回卡片。不清字体/文字颜色/line-height。 —— */
.chat-message-bubble.chat-prose-bubble,
[data-theme] .chat-message-bubble.chat-prose-bubble,
#character-chat-screen .chat-message-bubble.chat-prose-bubble[data-msg-role="assistant"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}

/* 塔拉 9-29：锈湖 prose 正文墨色——roots 的 AI 气泡是「霜纸底+深墨」(--rl-frost-ink)，
   prose 撤纸底后深墨直接落在暗锈画上读不清。正文改用主题正典骨白 --rl-bone（档案纸墨系，
   与 --text 变量一起换，防内层 var(--text) 引用回深墨）。
   🔴 data-theme 挂在 <html> 上（documentElement），必须放在 #character-chat-screen 之前——
   首版把 [data-theme] 写进 #screen 内层永远匹配不到（塔拉真机"没变化"即此）。
   (1,4,0) 压 themes/roots.css 的 (0,4,0)!important（themes 在 chat.css 之后加载）。
   只作用锈湖 prose 正文，其他模式零动。 */
[data-theme="roots"] #character-chat-screen .chat-message-bubble.chat-prose-bubble[data-msg-role="assistant"] {
    --text: var(--rl-bone);
    color: var(--rl-bone) !important;
    /* 密度对齐仿官端（塔拉 9-29「饱满」对比）：roots 为霜纸卡调的 1.8 行距 + 0.015em 字距
       在无底板上显稀疏——prose 收到 1.6/正常字距；衬线字体保留（主题字体染权不动）。 */
    line-height: 1.6 !important;
    letter-spacing: normal !important;
}

/* 塔拉 9-29 二轮：大字号 CJK 齐左排版的锯齿右缘显「右侧空出一大截」——正文两端对齐，
   每行左右边缘齐平（末行保持齐左），左右视觉重心对称。只作用 prose 正文，不动气泡模式。
   inter-character：对不支持 CJK 空隙分配的内核显式按字分配（不识别则忽略，无害）。 */
.chat-message-bubble.chat-prose-bubble .markdown-content {
    text-align: justify;
    text-justify: inter-character;
}

/* —— User 长消息折叠（§5）：纯显示层；渐隐目标 = User 气泡自己的底色 —— */
.chat-usermsg-fold.is-folded .chat-usermsg-fold-body {
    max-height: 9.5em;
    overflow: hidden;
    position: relative;
}
.chat-usermsg-fold.is-folded .chat-usermsg-fold-body::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.2em;
    background: linear-gradient(to bottom, transparent, var(--accent) 78%);
    pointer-events: none;
}
.chat-usermsg-fold.is-expanded .chat-usermsg-fold-body {
    max-height: none;
    overflow: visible;
}
.chat-usermsg-fold.is-expanded .chat-usermsg-fold-body::after {
    display: none;
}
.chat-usermsg-fold-toggle {
    display: block;
    margin: 2px auto 0 auto;
    padding: 0 10px;
    border: none;
    background: none;
    color: inherit;
    opacity: 0.65;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

/* —— 文字定相第一档（§4.6）：尾部字符低透明+轻模糊约 140ms 收敛；reduced-motion 整层不生效 —— */
.prose-resolving {
    opacity: 0.5;
    filter: blur(0.7px);
    animation: az-prose-settle 0.14s ease-out forwards;
}
@keyframes az-prose-settle {
    from { opacity: 0.5; filter: blur(0.7px); }
    to   { opacity: 1;   filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
    .prose-resolving {
        opacity: 1 !important;
        filter: none !important;
        animation: none !important;
    }
}