:root {
            --bg: #1e1e1e;
            --panel: #252526;
            --panel-light: #2d2d30;
            --panel-input: #1e1e28;
            --border: #3e3e42;
            --text: #cccccc;
            --text-dim: #9d9d9d;
            --accent: #556fcd;
            --accent-hover: #495c9e;
            --accent-light: #6e8aed;
            --green: #4ec9b0;
            --red: #f14c4c;
            --orange: #ce9178;
            --yellow: #dcdcaa;
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            --radius: 4px;
            --radius-sm: 2px;
            --button-bg: #3a3d41;
            --button-hover: #45494e;
            --input-bg: #3c3c3c;
            --input-border: #4a4a4a;
            --scrollbar-thumb: #424242;
            --scrollbar-track: #2d2d30;
            --phone-bg: #1a1a1a;
            --phone-screen-bg: #0d0d0d;
            --node-bg: #2d2d30;
            --node-border: #3e3e42;
            --node-header-bg: #a0612a;
            --crop-overlay-border: #e67e22;
            --crop-overlay-bg: rgba(100, 115, 247, 0.2);
        }

        body.light {
            --bg: #ffffff;
            --panel: #f3f3f3;
            --panel-light: #ececec;
            --border: #d4d4d4;
            --text: #333333;
            --text-dim: #767676;
             --accent: #000000;
            --accent-hover: #555555;
            --accent-light: #333333;
            --green: #008000;
            --red: #e51400;
            --orange: #9c6b2e;
            --yellow: #795e26;
            --shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
            --button-bg: #e0e0e0;
            --button-hover: #d0d0d0;
            --input-bg: #ffffff;
            --input-border: #cecece;
            --scrollbar-thumb: #c1c1c1;
            --scrollbar-track: #ececec;
            --phone-bg: #f0f0f0;
            --phone-screen-bg: #ffffff;
            --node-bg: #fafafa;
            --node-border: #d4d4d4;
            --node-header-bg: var(--accent);
            --crop-overlay-border: #e67e22;
            --crop-overlay-bg: rgba(100, 115, 247, 0.2);
            --panel-input: #ffffff;
        }

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

        body {
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: var(--bg);
            color: var(--text);
            height: 100vh;
            overflow: hidden;
            user-select: none;
            -webkit-user-select: none;
            display: flex;
            flex-direction: column;
            transition: background 0.3s ease, color 0.3s ease;
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        }

        *::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        *::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
        }

        *::-webkit-scrollbar-thumb {
            background-color: var(--scrollbar-thumb);
            border-radius: 4px;
            border: 2px solid var(--scrollbar-track);
        }

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

        .toolbar {
            height: 40px;
            background: var(--panel);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            padding: 0 12px;
            gap: 10px;
            flex-shrink: 0;
            z-index: 1000; /* 高于遮罩(900)，保证下拉子菜单显示在遮罩之上 */
            /* 不用原生 drag：改为 JS 拖动，双击可自定义最大化 */
            -webkit-app-region: no-drag;
            user-select: none;
        }

        .toolbar .btn,
        .toolbar .win-btn,
        .toolbar #btnSettings {
            -webkit-app-region: no-drag; /* 按钮区域不可拖动，保证可点击 */
        }

        .toolbar .logo {
            font-size: 16px;
            font-weight: 600;
            color: var(--accent);
            margin-right: 4px;
            letter-spacing: 0.5px;
        }

        /* 顶部菜单栏中间的当前脚本名称（绝对定位居中，不参与 flex 布局） */
        .toolbar .script-title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: var(--text-dim);
            pointer-events: none;
            max-width: 40%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* ==================== VSCode 风格菜单栏 ==================== */
        .menubar {
            display: flex;
            align-items: stretch;
            height: 100%;
            margin-left: 4px;
            -webkit-app-region: no-drag;
        }

        .menu-item {
            position: relative;
            display: flex;
            align-items: center;
        }

        .menu-label {
            padding: 8px 20px;
            font-size: 14px;
            color: var(--text);
            cursor: pointer;
            border-radius: 1px;
            transition: background 0.15s;
            white-space: nowrap;
        }

        .menu-item:hover .menu-label,
        .menu-item.open .menu-label {
            background: var(--button-hover);
        }

        .dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 300px;
            background: var(--panel);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            padding: 4px;
            z-index: 1000;
        }

        .menu-item.open .dropdown {
            display: block;
        }

        .dropdown-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 12px;
            font-size: 14px;
            color: var(--text);
            cursor: pointer;
            border-radius: 4px;
            white-space: nowrap;
        }

        .dropdown-item:hover {
            background: var(--button-hover);
        }

        .dropdown-item.disabled {
            color: var(--text-dim);
            cursor: default;
            font-size: 12px;
        }

        .dropdown-item.disabled:hover {
            background: transparent;
        }

        .dropdown-item .shortcut {
            font-size: 12px;
            color: var(--text-dim);
        }

        .dropdown-sep {
            height: 1px;
            background: var(--border);
            margin: 4px 8px;
        }

        /* 旧工具栏按钮隐藏（保留 DOM 兼容 JS 绑定） */
        .hidden-legacy {
            display: none !important;
        }

        /* 菜单展开时的半透明遮罩：深色主题黑色、浅色主题浅灰，不遮盖顶部工具栏 */
        .menu-overlay {
            display: none;
            position: fixed;
            top: 40px; /* 工具栏高度，遮罩从工具栏下方开始 */
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 900; /* 低于下拉菜单(1000)，高于页面内容 */
        }

        body.light .menu-overlay {
            background: rgba(160, 160, 160, 0.35);
        }

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

        /* 窗口控制按钮（无框窗口） */
        .window-controls {
            display: flex;
            align-items: center;
            gap: 2px;
            margin-left: auto; /* 推到工具栏最右侧（原由 subtitle 的 margin-right:auto 承担） */
            -webkit-app-region: no-drag;
        }

        .win-btn {
            width: 36px;
            height: 30px;
            border: none;
            background: transparent;
            color: var(--text-dim);
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, color 0.2s;
        }

        .win-btn:hover {
            background: var(--button-hover);
            color: var(--text);
        }

        .win-btn.win-close:hover {
            background: #e81123;
            color: #fff;
        }

        .btn {
            background: var(--button-bg);
            border: 1px solid transparent;
            color: var(--text);
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 12px;
            transition: background 0.2s, color 0.2s;
            /* display: flex; */
            align-items: center;
            gap: 5px;
            white-space: nowrap;
            font-weight: 400;
        }

        .btn:hover {
            background: var(--button-hover);
        }

        .btn.primary {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
            font-weight: 500;
        }

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

        .btn.danger {
            color: var(--red);
        }

        .btn.danger:hover {
            background: rgba(241, 76, 76, 0.15);
            color: var(--red);
        }

        /* ★ AI 助手发送按钮"停止"态：橙色背景 + 白色文字（醒目提示任务运行中）。
           用 id 专属选择器，避免影响其他 .btn.danger 删除类按钮的红色语义 */
        #btnAiAssistantSend.danger {
            background: #ff9f43;
            border-color: #ff9f43;
            color: #ffffff;
            font-weight: 600;
        }

        #btnAiAssistantSend.danger:hover {
            background: #e8862e;
            border-color: #e8862e;
            color: #ffffff;
        }

        #btnAiAssistantSend.danger:active:not(:disabled) {
            background: #d0761f;
            border-color: #d0761f;
        }

        .btn.success {
            color: #2ecc71;
            font-weight: 600;
        }

        .btn.success:hover {
            background: rgba(46, 204, 113, 0.15);
            color: #2ecc71;
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* 完成状态：即使 disabled 也保持绿色字体 */
        .btn.success:disabled {
            opacity: 1;
            color: #2ecc71;
        }

        .stats {
            font-size: 11px;
            color: var(--text-dim);
            background: var(--panel-light);
            padding: 4px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
        }
        /* ===== 统一复选框样式（主题自适应，accent-color 跟随主题强调色） =====
           覆盖场景：属性面板、弹窗输入、AI助手、技能开关、资源库等所有 checkbox */
        input[type="checkbox"] {
            accent-color: var(--accent, #c77b39);
            cursor: pointer;
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        /* ===== 统一文件浏览按钮（图标型：输入框右侧 📂） =====
           覆盖场景：节点属性面板文件路径、设置面板路径配置、弹窗输入文件路径字段
           全部基于主题变量，自动适配深色/浅色主题 */
        .browse-btn,
        .filepath-btn {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            border-radius: 4px;
            border: 1px solid var(--border, #3e3e42);
            background: var(--button-bg, #3a3d41);
            color: var(--text, #ccc);
            transition: background 0.2s, border-color 0.2s, color 0.2s;
            line-height: 1;
        }

        .browse-btn:hover,
        .filepath-btn:hover {
            background: var(--button-hover, #45494e);
            border-color: var(--accent, #c77b39);
            color: var(--accent-light, #f39c12);
        }

        /* ===== 统一文件浏览按钮（文字型：📂 浏览文件/加载代码等） =====
           覆盖场景：代码加载按钮、CSV 选择文件、AI 参考图、弹窗内文字浏览按钮 */
        .browse-btn-text,
        .ai-img-pick-btn,
        .csv-pick-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            font-size: 12px;
            border-radius: 4px;
            border: 1px solid var(--border, #3e3e42);
            background: var(--button-bg, #3a3d41);
            color: var(--text, #ccc);
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s, color 0.2s;
            white-space: nowrap;
            font-weight: 400;
        }

        .browse-btn-text:hover,
        .ai-img-pick-btn:hover,
        .csv-pick-btn:hover {
            background: var(--button-hover, #45494e);
            border-color: var(--accent, #c77b39);
            color: var(--accent-light, #f39c12);
        }

        /* 保留原 picker-btn 全宽 accent 样式仅用于"从界面选取/网页选取"选择器按钮，
           浏览文件类按钮不再受其影响（选择器按钮保留 accent 主色更醒目） */
        .btn-test-conn,
        .pc-picker-btn,
        .picker-btn,
        .cleanbrowser-btn,
        .desktop-picker-btn {
            background: var(--accent);
            margin-top: 4px;
            width: 100%;
            color: #ffffff;
        }

        #btnSettings {
            width: 32px;
            height: 32px;
            padding: 0;
            justify-content: center;
            font-size: 16px;
            border-radius: 50%;
            background: transparent;
            border: 1px solid var(--border);
            margin-left: 4px;
            color: var(--text); /* ★ 修复：UA 默认黑色导致深色模式下图标不可见 */
            transition: background 0.2s, color 0.2s;
        }

        #btnSettings:hover {
            background: var(--button-hover);
        }

        .main {
            flex: 1;
            display: flex;
            min-height: 0;
        }

        .left-panel {
            width: 380px;
            background: var(--panel);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            z-index: 5;
            transition: background 0.3s ease, border-color 0.3s ease, width 0.25s ease;
            min-width: 180px;
            max-width: 500px;
        }

        .left-panel.panel-collapsed {
            width: 0;
            min-width: 0;
            padding: 0;
            border-right: none;
            overflow: hidden;
        }

        .resizer-left {
            width: 4px;
            cursor: col-resize;
            background: transparent;
            flex-shrink: 0;
            z-index: 20;
            transition: background 0.2s;
            position: relative;
        }

        .resizer-left:hover,
        .resizer-left.active {
            background: var(--accent);
            opacity: 0.6;
        }

        /* 左栏折叠后隐藏把手 */
        .resizer-left.panel-hidden {
            width: 0;
            overflow: visible;
        }

        .resizer-left.panel-hidden .hide-btn {
            display: none;
        }

        .panel-toggle-btn.hide-btn.left {
            left: auto;
            right: -8px;
        }

        /* 左栏隐藏后左侧的显示按钮（固定最左侧中间） */
        .panel-toggle-btn.show-btn.left {
            left: 0;
            right: auto;
            border-radius: 0 6px 6px 0;
        }

        .tab-header {
            display: flex;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        .tab-btn {
            flex: 1;
            padding: 8px 2px;
            background: transparent;
            border: none;
            color: var(--text-dim);
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border-bottom: 2px solid transparent;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }

        .tab-btn:hover {
            color: var(--text);
            background: rgba(128, 128, 128, 0.1);
        }

        .tab-btn.active {
            color: var(--text);
            border-bottom-color: var(--accent);
            background: rgba(100, 115, 247, 0.08);
        }

        .tab-content {
            flex: 1;
            overflow-y: auto;
            display: none;
            flex-direction: column;
            min-height: 0;
        }

        .tab-content.active {
            display: flex;
        }

        .script-tab {
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            height: 100%;
            box-sizing: border-box;
        }

        /* 脚本搜索框：样式与节点搜索框一致，占满宽度 */
        .script-tab .search-box {
            margin: 0;
            width: 100%;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        /* 脚本列表弹性填充剩余空间，新建按钮固定底部 */
        .script-tab .script-list {
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }

        .script-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }

        .script-actions .btn {
            flex: 1;
            justify-content: center;
            padding: 6px 8px;
            font-size: 11px;
        }

        .script-list {
            flex: 1;
            overflow-y: auto;
        }

        .script-item {
            display: flex;
            align-items: center;
            padding: 6px 10px;
            margin-bottom: 4px;
            background: var(--panel-light);
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.2s;
            font-size: 13px;
            gap: 6px;
        }

        .script-item:hover {
            background: var(--button-hover);
            border-color: var(--border);
        }

        .script-item.active {
            background: rgba(100, 115, 247, 0.12);
            border-color: var(--accent);
            color: var(--text);
        }

        .script-item .script-name {
            flex: 1;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .script-item .script-actions-btns {
            display: flex;
            gap: 2px;
        }

        .icon-btn {
            background: none;
            border: none;
            color: var(--text-dim);
            cursor: pointer;
            font-size: 13px;
            padding: 2px;
            border-radius: 3px;
            transition: all 0.2s;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon-btn:hover {
            background: var(--button-hover);
            color: var(--text);
        }

        .icon-btn.danger:hover {
            background: rgba(241, 76, 76, 0.15);
            color: var(--red);
        }

        .node-tab-content {
            padding: 6px 10px 10px;
            flex: 1;
            overflow-y: auto;
        }

        .search-box {
            margin: 8px 10px;
            padding: 6px 10px;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-size: 12px;
            outline: none;
            transition: border 0.2s;
        }

        .search-box:focus {
            border-color: var(--accent);
        }

        /* ★ 搜索框包裹容器：相对定位，承载右侧清空按钮 */
        .search-box-wrap {
            position: relative;
            margin: 8px 10px;
            flex-shrink: 0;
        }

        /* 脚本搜索框容器：在 .script-tab 内不额外留边距（由 gap 控制） */
        .script-tab .search-box-wrap {
            margin: 0;
        }

        /* 包裹容器内的搜索框：占满宽度，右侧留出清空按钮位置 */
        .search-box-wrap .search-box {
            margin: 0;
            width: 100%;
            box-sizing: border-box;
            padding-right: 26px;
        }

        /* ★ 搜索框清空按钮：默认隐藏，有输入内容时显示 */
        .search-clear-btn {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-dim);
            cursor: pointer;
            padding: 3px;
            border-radius: 4px;
            display: none;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transition: color 0.2s, background 0.2s;
        }

        .search-clear-btn:hover {
            color: var(--red, #e74c3c);
            background: rgba(231, 76, 60, 0.1);
        }

        /* 有输入内容时显示清空按钮 */
        .search-clear-btn.visible {
            display: inline-flex;
        }

        .node-library {
            display: flex;
            flex-direction: column;
        }

        /* 节点分组选项卡（通用/移动端/浏览器） */
        .node-group-tabs {
            display: flex;
            gap: 4px;
            padding: 8px 10px 4px;
            border-bottom: 1px solid var(--border);
        }

        .node-group-tab {
            flex: 1;
            padding: 5px 0;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--panel-light);
            color: var(--text-dim);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }

        .node-group-tab:hover {
            background: var(--button-hover);
        }

        .node-group-tab.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
            font-weight: 500;
        }

        /* 运行选项卡子选项卡（浏览器/移动端） */
        .run-sub-tabs {
            display: flex;
            gap: 4px;
            padding: 8px 10px 4px;
            border-bottom: 1px solid var(--border);
        }

        .run-sub-tab {
            flex: 1;
            padding: 5px 0;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--panel-light);
            color: var(--text-dim);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }

        .run-sub-tab:hover {
            background: var(--button-hover);
        }

        .run-sub-tab.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
            font-weight: 500;
        }

        .run-sub-panel {
            display: none;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        .run-sub-panel.active {
            display: flex;
        }

        .category {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-dim);
            margin: 12px 0 6px;
            font-weight: 600;
        }

        .node-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            margin-bottom: 4px;
            background: var(--panel-light);
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            cursor: grab;
            transition: all 0.2s;
            font-size: 13px;
        }

        .node-item:hover {
            background: var(--button-hover);
            border-color: var(--border);
        }

        .node-item:active {
            cursor: grabbing;
            background: var(--accent);
            color: #fff;
        }

        .node-item .node-icon {
            font-size: 16px;
            width: 20px;
            text-align: center;
            flex-shrink: 0;
        }

        .node-item .node-label {
            font-weight: 500;
        }

        .node-item .node-desc {
            font-size: 11px;
            color: var(--text-dim);
            display: block;
            margin-top: 1px;
        }

        .properties-tab-content {
            padding: 12px;
            flex: 1;
            overflow-y: auto;
            font-size: 12px;
        }

        .prop-empty {
            text-align: center;
            color: var(--text-dim);
            padding: 30px 15px;
            font-size: 13px;
        }

        /* ==================== 数值选项卡（变量表格） ==================== */
        .variable-tab {
            padding: 12px;
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: 12px;
        }

        .variable-actions {
            display: flex;
            gap: 8px;
        }

        .variable-actions .btn {
            flex: 1;
            padding: 6px 8px;
            font-size: 12px;
        }

        .variable-hint {
            color: var(--text-dim);
            font-size: 11px;
            line-height: 1.4;
        }

        .variable-table-wrap {
            flex: 1;
            overflow-y: auto;
            border: 1px solid var(--border, #333);
            border-radius: 6px;
        }

        .variable-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }

        .variable-table th,
        .variable-table td {
            padding: 6px 8px;
            text-align: left;
            border-bottom: 1px solid var(--border, #333);
        }

        .variable-table th {
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-dim);
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 1;
            max-width: 100px;
        }

        .variable-table .var-op-col {
            width: 40px;
            text-align: center;
        }

        .var-name-cell {
            font-weight: 600;
            color: var(--accent, #4a9eff);
            word-break: break-all;
        }

        .var-value-input {
            width: 100%;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 4px;
            color: var(--text, #eee);
            padding: 3px 6px;
            font-size: 12px;
            outline: none;
        }

        .var-value-input:focus {
            border-color: var(--accent, #4a9eff);
            background: rgba(255, 255, 255, 0.04);
        }

        /* 当前值列（运行时值，只读） */
        .var-current-value {
            display: inline-block;
            width: 100%;
            padding: 3px 6px;
            font-size: 12px;
            color: #7ee787;  /* 绿色，区分初始值 */
            word-break: break-all;
            min-height: 20px;
        }

        .var-current-value.var-current-empty {
            color: var(--text-dim, #888);
            opacity: 0.5;
        }

        .var-del-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 14px;
            padding: 2px 6px;
            border-radius: 4px;
            opacity: 0.6;
        }

        .var-del-btn:hover {
            opacity: 1;
            background: rgba(255, 0, 0, 0.15);
        }

        .variable-empty {
            text-align: center;
            color: var(--text-dim);
            padding: 30px 15px;
            font-size: 12px;
        }

        /* ==================== 变量 JSON 徽标与编辑器 ==================== */
        /* 当前值列：JSON 数组/对象徽标（可点击查看） */
        .var-current-value.var-json-badge {
            color: #d2a8ff;
            cursor: pointer;
            border: 1px solid rgba(210, 168, 255, 0.35);
            border-radius: 4px;
            background: rgba(210, 168, 255, 0.08);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .var-current-value.var-json-badge:hover {
            background: rgba(210, 168, 255, 0.18);
        }

        /* 当前值列：JSON 语法错误提示 */
        .var-current-value.var-json-error {
            color: #ff7b72;
            cursor: help;
        }

        /* 操作列：JSON 编辑按钮 */
        .var-edit-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 13px;
            padding: 2px 4px;
            border-radius: 4px;
            opacity: 0.6;
        }

        .var-edit-btn:hover {
            opacity: 1;
            background: rgba(74, 158, 255, 0.15);
        }

        /* JSON 编辑器弹窗 */
        .json-editor-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .json-editor-dialog {
            width: min(640px, 90vw);
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            background: var(--panel, #1e1e2e);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .json-editor-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 600;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .json-editor-status {
            font-size: 11px;
            font-weight: 400;
        }

        .json-editor-status.ok { color: #7ee787; }
        .json-editor-status.err { color: #ff7b72; }

        .json-editor-textarea {
            flex: 1;
            min-height: 260px;
            margin: 10px 14px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: var(--text, #eee);
            font-family: Consolas, 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.5;
            resize: vertical;
            outline: none;
        }

        .json-editor-textarea:focus {
            border-color: var(--accent, #4a9eff);
        }

        .json-editor-footer {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .json-editor-btn {
            padding: 5px 14px;
            font-size: 12px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            background: rgba(255, 255, 255, 0.06);
            color: var(--text, #eee);
            cursor: pointer;
        }

        .json-editor-btn:hover {
            background: rgba(255, 255, 255, 0.12);
        }

        .json-editor-btn.primary {
            background: var(--accent, #4a9eff);
            border-color: var(--accent, #4a9eff);
            color: #fff;
        }

        .json-editor-tip {
            flex: 1;
            font-size: 11px;
            color: var(--text-dim, #888);
        }

        /* ==================== 历史选项卡（运行历史/断点续跑） ==================== */
        .history-tab {
            padding: 12px;
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-size: 12px;
        }

        .history-actions {
            display: flex;
            gap: 8px;
        }

        .history-actions .btn {
            flex: 1;
            padding: 6px 8px;
            font-size: 12px;
        }

        .history-hint {
            color: var(--text-dim);
            font-size: 11px;
            line-height: 1.4;
        }

        .history-list {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .run-item {
            border: 1px solid var(--border, #333);
            border-radius: 8px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.03);
            transition: border-color 0.2s;
        }

        .run-item:hover {
            border-color: var(--accent, #e67e22);
        }

        .run-item-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .run-status-badge {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .run-status-running  { background: rgba(52, 152, 219, 0.2); color: #5dade2; }
        .run-status-success  { background: rgba(46, 204, 113, 0.2); color: #58d68d; }
        .run-status-failed   { background: rgba(231, 76, 60, 0.2);  color: #ec7063; }
        .run-status-stopped  { background: rgba(241, 196, 15, 0.2); color: #f4d03f; }
        .run-status-unknown  { background: rgba(128, 128, 128, 0.2); color: var(--text-dim); }

        .run-item-name {
            flex: 1;
            font-weight: 600;
            color: var(--text, #eee);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .run-item-time {
            color: var(--text-dim);
            font-size: 10px;
            white-space: nowrap;
        }

        .run-item-meta {
            display: flex;
            gap: 12px;
            color: var(--text-dim);
            font-size: 11px;
            margin-bottom: 6px;
        }

        .run-progress-bar {
            height: 4px;
            background: rgba(128, 128, 128, 0.2);
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .run-progress-fill {
            height: 100%;
            background: var(--accent, #e67e22);
            border-radius: 2px;
            transition: width 0.3s;
        }

        .run-item-actions {
            display: flex;
            gap: 6px;
        }

        .run-item-actions .run-action {
            flex: 1;
            padding: 4px 6px;
            font-size: 11px;
        }

        .run-item-actions .run-action.danger {
            flex: 0 0 auto;
        }

        .run-event {
            padding: 6px 10px;
            border-left: 3px solid var(--border, #444);
            font-size: 11px;
        }

        .run-event-ok {
            border-left-color: #2ecc71;
        }

        .run-event-fail {
            border-left-color: #e74c3c;
        }

        .run-event-head {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .run-event-label {
            flex: 1;
            font-weight: 500;
        }

        .run-event-time {
            color: var(--text-dim);
            font-size: 10px;
        }

        .run-event-output {
            margin-top: 3px;
            color: var(--text-dim);
            word-break: break-all;
            white-space: pre-wrap;
        }

        .prop-group {
            margin-bottom: 12px;
        }

        .prop-group label {
            display: block;
            font-size: 13px;
            color: var(--text-dim);
            margin-bottom: 3px;
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        .prop-group input,
        .prop-group select,
        .desktop-shot-win-select,
        .prop-group textarea {
            width: 100%;
            padding: 5px 8px;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-size: 14px;
            outline: none;
            font-family: 'Consolas', 'Monaco', monospace;
            transition: border 0.2s;
        }

        .prop-group textarea {
            width: 100%;
            resize: vertical;
            min-height: 60px;
            line-height: 1.5;
        }

        .prop-group input:focus,
        .prop-group select:focus,
        .prop-group textarea:focus {
            border-color: var(--accent);
        }

        .prop-group select {
            cursor: pointer;
        }

        /* Agent 预设多选控件 */
        .agent-multi-box {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: var(--radius-sm);
        }
        .agent-multi-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: var(--bg-elev);
            border: 1px solid var(--input-border);
            border-radius: 14px;
            font-size: 13px;
            color: var(--text);
            cursor: pointer;
            user-select: none;
            transition: all 0.2s;
        }
        .agent-multi-item:hover {
            border-color: var(--accent);
        }
        .agent-multi-item:has(input:checked) {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        .agent-multi-item input[type="checkbox"] {
            width: auto;
            margin: 0;
            accent-color: var(--accent);
        }

        /* ==================== 弹窗输入节点：表单字段可视化编辑器 ==================== */
        .ff-editor {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 4px;
        }
        .ff-card {
            border: 1px solid var(--input-border);
            border-radius: var(--radius-sm);
            background: var(--bg-elev);
            padding: 8px 10px;
        }
        .ff-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
        }
        .ff-card-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-dim);
        }
        .ff-del-btn {
            background: none;
            border: none;
            color: var(--text-dim);
            cursor: pointer;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            line-height: 1;
        }
        .ff-del-btn:hover {
            background: rgba(255, 82, 82, 0.15);
            color: #ff5252;
        }
        .ff-row {
            display: flex;
            gap: 6px;
            margin-bottom: 6px;
        }
        .ff-row .ff-var {
            flex: 1;
            min-width: 0;
        }
        .ff-row .ff-label {
            flex: 1.4;
            min-width: 0;
        }
        .ff-row select.ff-type {
            width: 100%;
            cursor: pointer;
        }
        .ff-cfg-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px;
        }
        .ff-cfg-label {
            font-size: 12px;
            color: var(--text-dim);
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .ff-cfg-row .ff-options {
            flex: 1;
            min-width: 0;
        }
        .ff-cfg-row .ff-multiple {
            width: auto;
            margin: 0;
            accent-color: var(--accent);
        }
        .ff-add-btn {
            width: 100%;
            padding: 6px 10px;
            font-size: 12px;
            border: 1px dashed var(--input-border);
            background: transparent;
            color: var(--text-dim);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.2s;
        }
        .ff-add-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: rgba(74, 108, 247, 0.06);
        }

        /* 弹窗输入：文件浏览按钮（样式统一到 .browse-btn，此处仅保留兼容别名） */
        .modal-form-browse-btn {
            flex-shrink: 0;
        }

        .prop-node-type {
            font-size: 14px;
            color: var(--accent-light);
            margin-bottom: 10px;
            font-weight: 600;
        }

        .crop-btn {
            margin-top: 6px;
            padding: 6px 10px;
            font-size: 11px;
            width: 100%;
            background: var(--accent);
        }

        /* 图片模板按钮行：框选 + 上传并排各占一半 */
        .crop-btn-row {
            display: flex;
            gap: 6px;
            margin-top: 6px;
        }

        .crop-btn-row .crop-btn {
            flex: 1;
            margin-top: 0;
        }

        .coord-btn {
            background: var(--accent);
            color:#ffffff;
            margin-top: 6px;
            padding: 6px 10px;
            font-size: 11px;
            width: 100%;
        }

        .crop-preview {
            margin-top: 6px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
            position: relative;
            background: var(--input-bg);
        }

        .crop-preview img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 120px;
            object-fit: contain;
        }

        .crop-preview-label {
            position: absolute;
            top: 4px;
            left: 4px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 3px;
        }

        .crop-preview-delete {
            position: absolute;
            top: 4px;
            right: 4px;
            background: rgba(220, 53, 69, 0.85);
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            font-size: 12px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: background 0.2s;
        }

        .crop-preview-delete:hover {
            background: rgba(220, 53, 69, 1);
        }

        .checkbox-label input {
            width: auto;
        }

        .pkg-btn {
            margin-top: 6px;
            width: 100%;
            padding: 6px 10px;
            font-size: 11px;
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: opacity 0.2s, transform 0.1s;
        }

        .pkg-btn:hover {
            opacity: 0.85;
        }

        .pkg-btn:active {
            transform: scale(0.98);
        }

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

        .delay-group {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px dashed var(--border);
        }

        .retry-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .retry-row input {
            flex: 1;
            min-width: 0;
        }

        .retry-sep {
            color: var(--text-dim);
            font-size: 11px;
            white-space: nowrap;
        }

        .test-group {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px dashed var(--border);
        }

        .test-btn {
            width: 100%;
            padding: 8px 12px;
            /* background: linear-gradient(135deg, #4caf50, #2e7d32); */
            color: var(--text);
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .test-btn:hover {
            opacity: 0.85;
        }

        .test-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 停止测试按钮：红色背景，提示可终止 */
        .test-btn.btn-stop {
            background: linear-gradient(135deg, #e53935, #b71c1c);
            color: #fff;
        }

        .delay-hint {
            font-size: 12px;
            color: var(--text-dim);
            margin-top: 3px;
        }

        .device-tab-content {
            padding: 12px;
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .device-list {
            flex: 1;
            overflow-y: auto;
        }

        .device-item {
            display: flex;
            align-items: center;
            padding: 8px 10px;
            margin-bottom: 4px;
            background: var(--panel-light);
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            font-size: 13px;
            gap: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .device-item:hover {
            background: var(--button-hover);
            border-color: var(--border);
        }

        .device-item.selected {
            border-color: var(--accent);
            background: rgba(100, 115, 247, 0.12);
        }

        .device-item .device-status {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--green);
            flex-shrink: 0;
        }

        .device-item .device-info {
            flex: 1;
        }

        .device-item .device-name {
            font-weight: 500;
        }

        .device-item .device-model {
            font-size: 10px;
            color: var(--text-dim);
        }

        .device-item .device-actions {
            display: flex;
            gap: 2px;
        }

        /* 设备会话状态徽章 */
        .device-session-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 8px;
            margin-top: 2px;
            white-space: nowrap;
        }

        .device-session-badge.running {
            background: rgba(78, 201, 176, 0.15);
            color: var(--green);
        }

        .device-session-badge.stopped {
            background: rgba(157, 157, 157, 0.15);
            color: var(--text-dim);
        }

        .device-session-badge.error {
            background: rgba(241, 76, 76, 0.15);
            color: var(--red);
        }

        .device-session-badge.idle {
            background: rgba(157, 157, 157, 0.1);
            color: var(--text-dim);
        }

        .device-session-badge .badge-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .device-session-badge.running .badge-dot {
            background: var(--green);
            animation: pulse 1.5s infinite;
        }

        .device-session-badge.stopped .badge-dot {
            background: var(--text-dim);
        }

        .device-session-badge.error .badge-dot {
            background: var(--red);
        }

        .device-session-badge.idle .badge-dot {
            background: var(--text-dim);
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }
        }

        /* PC 浏览器会话列表 */
        .pc-session-title {
            border-top: 1px solid var(--border);
            padding: 8px 10px 4px;
            font-size: 11px;
            color: var(--text-dim);
            font-weight: 600;
        }

        .pc-session-list {
            padding: 0 10px 8px;
            max-height: 200px;
            overflow-y: auto;
        }

        .pc-session-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            margin-bottom: 4px;
            background: var(--panel-light);
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .pc-session-item:hover {
            background: var(--button-hover);
            border-color: var(--border);
        }

        .pc-session-item.selected {
            border-color: var(--accent);
            background: rgba(100, 115, 247, 0.12);
        }

        .pc-session-info {
            flex: 1;
            min-width: 0;
        }

        .pc-session-name {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pc-session-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 8px;
            margin-top: 2px;
            white-space: nowrap;
        }

        .pc-session-badge.running {
            background: rgba(78, 201, 176, 0.15);
            color: var(--green);
        }

        .pc-session-badge.stopped {
            background: rgba(157, 157, 157, 0.15);
            color: var(--text-dim);
        }

        .pc-session-badge.error {
            background: rgba(241, 76, 76, 0.15);
            color: var(--red);
        }

        .pc-session-badge .badge-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .pc-session-badge.running .badge-dot {
            background: var(--green);
            animation: pulse 1.5s infinite;
        }

        .pc-session-badge.stopped .badge-dot {
            background: var(--text-dim);
        }

        .pc-session-badge.error .badge-dot {
            background: var(--red);
        }

        .pc-session-actions {
            display: flex;
            gap: 2px;
        }

        .pc-session-actions .icon-btn {
            font-size: 14px;
            padding: 1px 16px;
        }

        /* 空进程（待运行）样式 */
        .pc-session-item.pending {
            border-style: dashed;
            border-color: var(--accent);
        }

        .pc-script-select {
            width: 100%;
            margin-top: 4px;
            padding: 3px 4px;
            font-size: 11px;
            border: 1px solid var(--border);
            border-radius: 3px;
            background: var(--panel-light);
            color: var(--text);
        }

        .icon-btn.primary {
            background: var(--accent);
            color: #fff;
        }

        /* 设备运行/停止按钮 */
        .device-run-btn {
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 3px;
            border: none;
            cursor: pointer;
            background: var(--accent);
            color: white;
            transition: all 0.2s;
        }

        .device-run-btn:hover {
            background: var(--accent-hover);
        }

        .device-run-btn.stop {
            background: var(--red);
        }

        .device-run-btn.stop:hover {
            background: #c43c3c;
        }

        .canvas-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            min-height: 0;
        }

        .canvas-container {
            flex: 1;
            position: relative;
            background: var(--bg);
            overflow: hidden;
            min-width: 0;
            transition: background 0.3s ease;
        }

        /* 底部状态栏 */
        .canvas-statusbar {
            height: 35px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 14px;
            background: var(--panel);
            border-top: 1px solid var(--border);
            font-size: 12px;
            color: var(--text-dim);
            overflow: hidden;
            white-space: nowrap;
            transition: background 0.3s ease, border-color 0.3s ease;
        }
        .statusbar-item {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .statusbar-item:first-child {
            flex: 1;
            min-width: 0;
        }
        .statusbar-sep {
            width: 1px;
            height: 16px;
            background: var(--border);
            flex-shrink: 0;
        }
        /* 状态栏右侧弹性占位：把运行按钮推到最右 */
        .statusbar-spacer {
            flex: 1;
            min-width: 0;
        }
        /* 运行按钮与左侧信息之间的固定间距 */
        .statusbar-run-spacer {
            width: 12px;
            flex-shrink: 0;
        }
        /* 状态栏内的运行按钮（紧凑尺寸适配 35px 状态栏） */
        .statusbar-run-btn {
            height: 26px;
            padding: 0 16px;
            font-size: 12px;
            line-height: 1;
            flex-shrink: 0;
            margin-left: 4px;
            border-radius: 5px;
        }
        /* 运行中状态：按钮切换为"停止"，橙色背景白字 */
        .statusbar-run-btn.running {
            background: #ff9800 !important;
            border-color: #ff9800 !important;
            color: #ffffff !important;
        }
        .statusbar-run-btn.running:hover {
            background: #f57c00 !important;
            border-color: #f57c00 !important;
        }
        body.light .canvas-statusbar {
            background: #f5f5f5;
            color: #555;
        }

        .canvas-grid {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
            z-index: 0;
            opacity: 0.4;
        }

        .canvas-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        .canvas-svg path.connection {
            stroke: #10b981;
            stroke-width: 2;
            fill: none;
            transition: stroke 0.2s;
        }

        .canvas-svg path.connection:hover {
            stroke: var(--accent-light);
            stroke-width: 3;
            filter: drop-shadow(0 0 3px rgba(78, 201, 176, 0.5));
        }

        .canvas-svg polygon.conn-arrow {
            fill:  #10b981;
            pointer-events: none;
        }

        .canvas-svg polygon.conn-arrow.conn-false {
            fill: #e74c3c;
        }

        .canvas-svg path.temp-connection {
            stroke: var(--accent-light);
            stroke-width: 1.5;
            fill: none;
            stroke-dasharray: 5 3;
            opacity: 0.7;
        }

        .canvas-nodes {
            position: absolute;
            inset: 0;
            z-index: 1;
            /* background-color: var(--panel-light); */
        }

        /* ==================== 节点结果气泡层（连线上层，可自由拖动） ==================== */
        /* 独立气泡层：z-index:3 高于连线 SVG 层(z-index:2)，气泡不再被连线遮挡 */
        .canvas-bubbles {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;  /* 层本身穿透，气泡子元素单独开启 */
            overflow: visible;
        }

        .node {
            position: absolute;
            width: 170px;
            background: var(--node-bg);
            border: 1px solid var(--node-border);
            border-radius: var(--radius);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            cursor: default;
            transition: border 0.2s, box-shadow 0.2s, background 0.3s ease;
            z-index: 3;
        }

        /* ==================== 节点结果气泡（可观测性） ==================== */
        /* ★ 气泡挂载在 .canvas-bubbles 独立层（连线上层），left/top 由 JS 按画布坐标设置 */
        .node-result-bubble {
            position: absolute;
            width: 300px;
            max-width: 300px;
            background: var(--node-bg, #2d2d30);
            border: 1px solid var(--node-border, #444);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
            z-index: 50;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            pointer-events: auto;
            /* 小三角指向节点 */
        }
        .node-result-bubble::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: var(--node-bg, #2d2d30);
        }
        /* 节点贴近顶部时：气泡显示在节点下方（箭头朝上指向节点） */
        /* ★ 定位(left/top)由 JS 设置，此处仅控制箭头方向，不再用 margin 偏移 */
        .node-result-bubble.below {
            margin: 0;
        }
        .node-result-bubble.below::after {
            top: auto;
            bottom: 100%;
            border-top-color: transparent;
            border-bottom-color: var(--node-bg, #2d2d30);
        }
        /* ★ 拖动中的气泡：提升层级并禁用文本选中 */
        .node-result-bubble.dragging,
        .node-stream-bubble.dragging {
            opacity: 0.92;
            user-select: none;
        }
        .node-result-bubble-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: rgba(255, 255, 255, 0.06);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 12px;
            color: var(--text, #e5e7eb);
            min-height: 28px;
            cursor: move;  /* ★ 标题栏为拖拽手柄 */
            user-select: none;
        }
        .node-result-bubble-icon { font-size: 13px; }
        .node-result-bubble-title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .node-result-bubble-close {
            background: none;
            border: none;
            color: var(--text-secondary, #9ca3af);
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            padding: 0 2px;
            border-radius: 4px;
        }
        .node-result-bubble-close:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.15);
        }
        .node-result-bubble-body {
            padding: 8px 10px;
            max-height: 280px;
            overflow-y: auto;
            overflow-x: hidden;
            font-size: 12px;
            line-height: 1.5;
            color: var(--text, #e5e7eb);
        }
        /* ===== 节点流式输出气泡（SOLOOMO 等流式节点） ===== */
        /* ★ v7 修复：补齐基础样式——此前 .node-stream-bubble 无任何基础规则，
           是"裸 div"（无背景/边框/圆角/阴影），观感与普通节点气泡完全不同。
           样式与 .node-result-bubble 保持一致（用户要求样式统一）。
           注意：不加 node-result-bubble 类，避免 hideNodeResultBubble()
           等按类名查询的清理逻辑误删流式气泡。 */
        .node-stream-bubble {
            position: absolute;
            width: 300px;
            max-width: 300px;
            background: var(--node-bg, #2d2d30);
            border: 1px solid var(--node-border, #444);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
            z-index: 50;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            pointer-events: auto;
        }
        /* 小三角指向节点（与结果气泡一致，方向由 .below 类控制） */
        .node-stream-bubble::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: var(--node-bg, #2d2d30);
        }
        .node-stream-bubble.below::after {
            top: auto;
            bottom: 100%;
            border-top-color: transparent;
            border-bottom-color: var(--node-bg, #2d2d30);
        }
        .node-stream-bubble .node-stream-body {
            max-height: 300px;
            overflow-y: auto;
        }
        /* ★ v8 流式排版容器内的元素样式 */
        /* 文本段：markdown 渲染区 */
        .node-stream-bubble .node-stream-text-seg {
            white-space: normal;
            word-break: break-word;
            line-height: 1.6;
            margin: 2px 0;
        }
        .node-stream-bubble .node-stream-text-seg p { margin: 0 0 6px 0; }
        .node-stream-bubble .node-stream-text-seg p:last-child { margin-bottom: 0; }
        .node-stream-bubble .node-stream-text-seg pre {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
            padding: 6px 8px;
            overflow-x: auto;
            font-size: 11px;
        }
        .node-stream-bubble .node-stream-text-seg code {
            font-family: Consolas, monospace;
            font-size: 11px;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 3px;
            padding: 1px 4px;
        }
        .node-stream-bubble .node-stream-text-seg ul,
        .node-stream-bubble .node-stream-text-seg ol { margin: 4px 0; padding-left: 18px; }
        /* 思考折叠块（reasoning-block 风格：💭 Thinking + 点击展开/收起，默认收起） */
        .node-stream-bubble .node-stream-reasoning-block {
            background: rgba(99, 102, 241, 0.06);
            border: 1px solid rgba(99, 102, 241, 0.15);
            border-radius: 8px;
            margin: 4px 0;
            overflow: hidden;
        }
        .node-stream-bubble .nsr-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px 8px;
            cursor: pointer;
            user-select: none;
        }
        .node-stream-bubble .nsr-header:hover { background: rgba(99, 102, 241, 0.1); }
        .node-stream-bubble .nsr-icon { font-size: 12px; }
        .node-stream-bubble .nsr-label {
            flex: 1;
            font-size: 11px;
            font-weight: 500;
            color: #8ab4f8;
        }
        .node-stream-bubble .nsr-expand { font-size: 10px; color: var(--text-secondary, #9ca3af); transition: transform 0.2s; }
        .node-stream-bubble .node-stream-reasoning-block.expanded .nsr-expand { transform: rotate(180deg); }
        .node-stream-bubble .nsr-body {
            max-height: 0;
            overflow: hidden;
            padding: 0 8px;
            font-size: 11px;
            line-height: 1.5;
            color: var(--text-secondary, #9ca3af);
            white-space: pre-wrap;
            word-break: break-word;
            transition: max-height 0.25s ease, padding 0.25s ease;
        }
        .node-stream-bubble .node-stream-reasoning-block.expanded .nsr-body {
            max-height: 200px;
            overflow-y: auto;
            padding: 0 8px 8px;
        }
        /* 步骤行：轻量高亮 */
        .node-stream-bubble .node-stream-step-line {
            font-size: 12px;
            font-weight: 600;
            color: #e8eaed;
            margin: 4px 0 2px;
            word-break: break-all;
        }
        /* 工具卡片适配 300px 气泡宽度（复用全局 tool-call-card，仅微调字号） */
        .node-stream-bubble .tool-call-card { margin: 4px 0; }
        .node-stream-bubble .tool-call-header { padding: 4px 8px; font-size: 11px; }
        .node-stream-bubble .tool-name { font-size: 11px; }
        .node-stream-bubble .tool-call-body { padding: 0 8px; }
        .node-stream-bubble .tool-args,
        .node-stream-bubble .tool-result {
            font-size: 10px;
            max-height: 120px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-all;
            margin: 0 0 6px;
        }
        .node-stream-bubble .node-stream-reasoning {
            white-space: pre-wrap;
            word-break: break-word;
            color: var(--text-secondary, #9ca3af);
            font-size: 11px;
            max-height: 90px;
            overflow-y: auto;
            padding-bottom: 6px;
            margin-bottom: 6px;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
        }
        .node-stream-bubble .node-stream-text {
            white-space: pre-wrap;
            word-break: break-word;
        }
        /* 流式输出光标动画（回复区末尾） */
        .node-stream-bubble.running-stream .node-stream-text::after {
            content: '▌';
            animation: nodeStreamBlink 1s step-end infinite;
            color: var(--primary, #3b82f6);
        }
        @keyframes nodeStreamBlink {
            50% { opacity: 0; }
        }
        /* 图片 */
        .node-result-bubble-img {
            display: block;
            max-width: 100%;
            max-height: 220px;
            margin: 0 auto;
            border-radius: 4px;
            cursor: zoom-in;
        }
        /* 视频 */
        .node-result-bubble-video {
            display: block;
            width: 100%;
            max-height: 220px;
            border-radius: 4px;
        }
        /* 音频 */
        .node-result-bubble-audio {
            display: block;
            width: 100%;
        }
        /* Markdown */
        .node-result-bubble-md {
            word-break: break-word;
        }
        .node-result-bubble-md h1, .node-result-bubble-md h2,
        .node-result-bubble-md h3, .node-result-bubble-md h4 {
            margin: 6px 0 4px;
            font-size: 1.1em;
        }
        .node-result-bubble-md p { margin: 4px 0; }
        .node-result-bubble-md ul, .node-result-bubble-md ol { margin: 4px 0; padding-left: 18px; }
        .node-result-bubble-md code {
            background: rgba(255, 255, 255, 0.12);
            padding: 1px 4px;
            border-radius: 3px;
            font-size: 11px;
        }
        .node-result-bubble-md pre {
            background: #1e1e1e;
            padding: 8px;
            border-radius: 4px;
            overflow-x: auto;
        }
        .node-result-bubble-md pre code { background: none; padding: 0; }
        .node-result-bubble-md img { max-width: 100%; border-radius: 4px; }
        /* HTML 沙箱 */
        .node-result-bubble-iframe {
            width: 100%;
            height: 220px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            background: #fff;
        }
        /* 代码 */
        .node-result-bubble-code {
            margin: 0;
            padding: 8px;
            background: #1e1e1e;
            border-radius: 4px;
            overflow-x: auto;
            font-family: Consolas, 'Courier New', monospace;
            font-size: 11px;
            line-height: 1.5;
            color: #d4d4d4;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 240px;
            overflow-y: auto;
        }
        /* 数值（审核评分大号显示） */
        .node-result-bubble-number {
            font-size: 34px;
            font-weight: 700;
            text-align: center;
            padding: 8px 4px 2px;
            color: var(--accent, #4f8cff);
            line-height: 1.2;
            letter-spacing: 1px;
        }
        /* 审核评分副标题（审核意见） */
        .node-result-bubble-subtitle {
            font-size: 11px;
            line-height: 1.5;
            color: #c8c8c8;
            text-align: center;
            padding: 4px 8px 8px;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 80px;
            overflow-y: auto;
        }
        /* 审核评分单位标记 */
        .node-result-bubble-unit {
            font-size: 12px;
            text-align: center;
            color: #999;
            padding-bottom: 6px;
        }
        /* 文本 */
        .node-result-bubble-text {
            white-space: pre-wrap;
            word-break: break-word;
        }

        /* 图片点击放大：全屏遮罩预览 */
        .node-bubble-preview-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: zoom-out;
        }
        .node-bubble-preview-img {
            max-width: 92vw;
            max-height: 92vh;
            border-radius: 6px;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
            cursor: default;
            object-fit: contain;
        }
        .node-bubble-preview-close {
            position: absolute;
            top: 16px;
            right: 20px;
            font-size: 32px;
            color: #fff;
            cursor: pointer;
            line-height: 1;
            padding: 4px 10px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.15);
        }
        .node-bubble-preview-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        /* 多图预览：左右切换按钮 + 计数器 */
        .node-bubble-preview-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 40px;
            color: #fff;
            cursor: pointer;
            line-height: 1;
            padding: 8px 16px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.12);
            user-select: none;
        }
        .node-bubble-preview-nav.prev { left: 20px; }
        .node-bubble-preview-nav.next { right: 20px; }
        .node-bubble-preview-nav:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        .node-bubble-preview-counter {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 14px;
            background: rgba(0, 0, 0, 0.5);
            padding: 4px 14px;
            border-radius: 14px;
        }
        /* 多图画廊：网格缩略图 */
        .node-result-bubble-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
            gap: 6px;
            max-height: 220px;
            overflow-y: auto;
            padding: 2px;
        }
        .node-result-bubble-image-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.08);
            aspect-ratio: 1 / 1;
        }
        .node-result-bubble-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: zoom-in;
            border-radius: 6px;
            transition: transform 0.15s;
        }
        .node-result-bubble-thumb:hover {
            transform: scale(1.05);
        }
        /* 数组/列表展示 */
        .node-result-bubble-array {
            max-height: 220px;
            overflow-y: auto;
            font-size: 12px;
        }
        .node-result-bubble-array-row {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 3px 4px;
            border-bottom: 1px dashed rgba(128, 128, 128, 0.2);
        }
        .node-result-bubble-array-row:last-child {
            border-bottom: none;
        }
        .node-result-bubble-array-idx {
            color: var(--text-dim, #888);
            min-width: 22px;
            text-align: right;
            flex-shrink: 0;
        }
        .node-result-bubble-array-val {
            flex: 1;
            word-break: break-all;
            color: var(--text-primary, #ddd);
        }
        .node-result-bubble-array-val .node-result-bubble-thumb {
            width: 48px;
            height: 48px;
        }
        /* JSON 展示：语法高亮 */
        .node-result-bubble-json {
            max-height: 260px;
            overflow: auto;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 6px;
            padding: 8px 10px;
            font-family: Consolas, 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.5;
            white-space: pre;
            margin: 0;
            color: var(--text-primary, #ddd);
        }
        .node-bubble-json-key { color: #4ec9b0; }
        .node-bubble-json-string { color: #ce9178; }
        .node-bubble-json-number { color: #b5cea8; }
        .node-bubble-json-bool { color: #569cd6; }
        .node-bubble-json-null { color: #808080; }

        body.light .node {
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .node.selected {
            border-color: var(--green);
            box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.35);
        }

        /* ★ 框选遮罩（左键空白拖动）：半透明绿色矩形 */
        .marquee-select {
            position: absolute;
            z-index: 100;
            background: rgba(78, 201, 176, 0.15);
            border: 1px solid var(--green);
            border-radius: 2px;
            pointer-events: none;
            box-sizing: border-box;
        }

        .node.running {
            border-color: var(--yellow);
            animation: pulse 1s infinite;
        }

        .node.done {
            border-color: var(--green);
        }

        @keyframes pulse {

            0%,
            100% {
                box-shadow: 0 0 0 2px rgba(220, 220, 170, 0.4);
            }

            50% {
                box-shadow: 0 0 0 5px rgba(220, 220, 170, 0.2);
            }
        }

        .node-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
            color: #fff;
            font-weight: 500;
            font-size: 13px;
            cursor: move;
            position: relative;
            background: var(--node-header-bg);
        }

        /* 节点备注角标：有备注时显示 📝，悬浮时由 JS 显示全局气泡（挂在 body，避免画布裁剪） */
        .node-remark-badge {
            margin-left: auto;
            margin-right: 2px;
            font-size: 10px;
            line-height: 1;
            cursor: help;
            opacity: 0.85;
            flex-shrink: 0;
        }

        .node-remark-badge:hover {
            opacity: 1;
        }

        /* 备注气泡：全局唯一，固定定位（JS 控制位置与显隐） */
        #remarkTooltip {
            position: fixed;
            max-width: 280px;
            padding: 8px 10px;
            background: rgba(24, 24, 30, 0.97);
            color: #e8e8e8;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.6;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
            white-space: pre-wrap;
            word-break: break-word;
            overflow-wrap: break-word;
            z-index: 99999;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.12s ease;
        }

        #remarkTooltip.visible {
            opacity: 1;
        }

        /* 节点分组颜色：通用=灰色，移动端=橙色（默认），浏览器=蓝色 */
        /* 浏览器节点：蓝色系 */
        .node.node-browser .node-header {
            background: #2f6fdb;
        }

        .node.node-browser {
            border-color: #2f6fdb;
        }

        .node.node-browser.selected {
            border-color: var(--green);
            box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.45);
        }

        /* 通用节点：灰色系 */
        .node.node-general .node-header {
            background: #6b7280;
        }

        .node.node-general {
            border-color: #6b7280;
        }

        .node.node-general.selected {
            border-color: var(--green);
            box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.45);
        }

        /* AI 节点：紫色系 */
        .node.node-ai .node-header {
            background: #7c3aed;
        }

        .node.node-ai {
            border-color: #7c3aed;
        }

        .node.node-ai.selected {
            border-color: var(--green);
            box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.45);
        }

        /* 桌面节点：绿色系（操作本机桌面应用，如 WPS/PS） */
        .node.node-desktop .node-header {
            background: #16a34a;
        }

        .node.node-desktop {
            border-color: #16a34a;
        }

        .node.node-desktop.selected {
            border-color: var(--green);
            box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.45);
        }

        /* 移动端节点：橙色系（默认，使用主题色） */
        .node.node-mobile .node-header {
            background: var(--node-header-bg);
        }

        .node.node-mobile {
            border-color: var(--node-border);
        }

        .node.node-mobile.selected {
            border-color: var(--green);
            box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.45);
        }

        .node-header .node-icon {
            font-size: 14px;
        }

        .node-header .node-title {
            flex: 1;
            letter-spacing: 0.2px;
        }

        /* 节点标题双击可编辑：光标提示（有自定义名称时仍可双击修改） */
        .node-header .node-title.node-title-edit {
            cursor: text;
        }

        /* 标题编辑输入框：内嵌于标题栏，透明背景白字 */
        .node-header .node-title-input {
            width: 100%;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.45);
            border-radius: 4px;
            color: #fff;
            font-size: 12px;
            font-weight: 500;
            padding: 1px 5px;
            outline: none;
            box-sizing: border-box;
            min-width: 60px;
        }

        .node-header .node-title-input:focus {
            border-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
        }

        .node-delete {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            font-size: 14px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            line-height: 1;
            padding: 0;
        }

        .node-delete:hover {
            background: rgba(255, 255, 255, 0.25);
            color: #fff;
        }

        .node-body {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            position: relative;
            min-height: 32px;
        }

        .node-summary {
            font-size: 10px;
            color: var(--text-dim);
            flex: 1;
            text-align: center;
            padding: 0 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: 'Consolas', 'Monaco', monospace;
        }

        .port {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--panel-light);
            border: 2px solid var(--accent);
            cursor: crosshair;
            flex-shrink: 0;
            position: relative;
            z-index: 5;
            transition: all 0.2s;
        }

        .port:hover {
            background: var(--accent-light);
            transform: scale(1.25);
            box-shadow: 0 0 8px rgba(100, 115, 247, 0.5);
        }

        .port.in {
            border-color: var(--green);
        }

        .port.in:hover {
            background: var(--green);
            box-shadow: 0 0 8px rgba(78, 201, 176, 0.5);
        }

        .port.out {
            border-color: var(--accent);
        }

        .port.out.true {
            border-color: var(--accent);
        }

        .port.out.true:hover {
            background: var(--green);
            box-shadow: 0 0 8px rgba(78, 201, 176, 0.5);
        }

        .port.out.false {
            border-color: #e74c3c;
        }

        .port.out.false:hover {
            background: #e74c3c;
            box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
        }

        .judge-ports {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: flex-end;
        }

        .judge-ports .port {
            margin: 0;
        }

        .valve-port {
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: flex-end;
        }

        .valve-port .port {
            margin: 0;
        }

        .valve-tag {
            font-size: 10px;
            color: var(--accent);
            background: rgba(100, 115, 247, 0.12);
            border: 1px solid var(--accent);
            border-radius: 4px;
            padding: 1px 5px;
            white-space: nowrap;
        }

        /* 阀门放行高亮（短暂闪光） */
        .node.valve-fired {
            animation: valve-flash 1s ease;
        }

        @keyframes valve-flash {
            0% { box-shadow: 0 0 0 0 rgba(78, 201, 176, 0.7); border-color: var(--green); }
            70% { box-shadow: 0 0 0 12px rgba(78, 201, 176, 0); border-color: var(--green); }
            100% { box-shadow: 0 0 0 0 rgba(78, 201, 176, 0); border-color: var(--border); }
        }

        .connection.conn-false {
            stroke: #e74c3c !important;
        }

        .right-panel {
            background: var(--panel);
            border-left: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            z-index: 5;
            padding: 10px;
            gap: 10px;
            transition: background 0.3s ease, border-color 0.3s ease, width 0.25s ease;
            width: 450px;
            min-width: 200px;
            max-width: 1280px;
            position: relative;
        }

        .right-panel.panel-collapsed {
            width: 0;
            min-width: 0;
            padding-left: 0;
            padding-right: 0;
            border-left: none;
            overflow: hidden;
        }

        .phone-screen-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            position: relative;
            background: var(--phone-bg);
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid var(--border);
        }

        .phone-status-bar {
            display: flex;
            justify-content: space-between;
            padding: 6px 10px;
            font-size: 9px;
            color: var(--text-dim);
            background: var(--panel-light);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        .phone-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: var(--phone-screen-bg);
            min-height: 150px;
            cursor: default;
        }

        /* 节点截图预览模式：按原始尺寸显示，溢出时滚动条滚动查看 */
        .phone-content.shot-preview-mode {
            align-items: flex-start;
            justify-content: flex-start;
            overflow: auto;
            cursor: default;
        }

        .phone-content.shot-preview-mode .shot-preview-img {
            display: block;
            width: auto;
            height: auto;
            max-width: none;
            max-height: none;
            object-fit: none;
        }

        /* 属性面板截图按钮行 */
        .prop-shot-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .prop-shot-row .node-shot-btn {
            padding: 6px 14px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--button-bg);
            color: #ffffff;
            cursor: pointer;
            font-size: 12px;
            transition: background 0.15s;
            background: var(--accent);
            width: 100%;
        }

        .prop-shot-row .node-shot-btn:hover {
            background: var(--button-hover);
        }

        .prop-shot-row .node-shot-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .prop-shot-row .prop-shot-hint {
            font-size: 10px;
            color: var(--text-dim);
        }

        /* 桌面截图应用选择下拉框（截图按钮上方） */
        .prop-shot-select-wrap {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 8px;
        }
        .prop-shot-select-wrap label {
            font-size: 10px;
            color: var(--text-dim);
        }
        .prop-shot-select-wrap select {
            width: 100%;
            padding: 6px 8px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--input-bg, var(--button-bg));
            color: var(--text);
            font-size: 12px;
            cursor: pointer;
            max-width: 100%;
        }
        .prop-shot-select-wrap select:focus {
            outline: none;
            border-color: var(--accent);
        }
        .prop-shot-select-wrap .win-refresh-btn {
            align-self: flex-start;
            font-size: 20px;
            padding: 2px 2px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-dim);
            cursor: pointer;
        }
        .prop-shot-select-wrap .win-refresh-btn:hover {
            color: var(--text);
            background: var(--button-hover);
        }

        .phone-screen-container .screenshot-btn {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 20;
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #fff;
            padding: 6px 14px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            backdrop-filter: blur(6px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
            user-select: none;
        }

        .phone-screen-container .screenshot-btn:hover {
            background: rgba(0, 0, 0, 0.8);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        .phone-screen-container .screenshot-btn:active {
            transform: scale(0.95);
        }

        .phone-screen-container .screenshot-btn.loading {
            opacity: 0.6;
            pointer-events: none;
        }

        /* 自适应/原尺寸切换开关按钮（SVG 图标） */
        .phone-screen-container .fit-toggle-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 20;
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #fff;
            padding: 4px;
            border-radius: 2px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(6px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
            user-select: none;
            line-height: 0;
        }

        .phone-screen-container .fit-toggle-btn svg {
            display: block;
            width: 16px;
            height: 16px;
        }

        .phone-screen-container .fit-toggle-btn:hover {
            background: rgba(0, 0, 0, 0.8);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        .phone-screen-container .fit-toggle-btn:active {
            transform: scale(0.95);
        }

        /* 开启状态：高亮显示 */
        .phone-screen-container .fit-toggle-btn.active {
            background: #6e8aed;
            border-color: #8ba2f4;
            box-shadow: 0 0 10px hsla(227, 78%, 68%, 0.5);
        }

        /* 自适应模式：截图完整缩放显示在框内 */
        .phone-content.fit-mode {
            overflow: hidden;
        }

        .phone-content.fit-mode .shot-preview-img {
            display: block;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            flex-shrink: 0;
        }

        .coord-tip {
            position: absolute;
            top: 34px;
            right: 10px;
            background: rgba(0, 0, 0, 0.75);
            color: #4caf50;
            font-size: 11px;
            font-family: monospace;
            padding: 3px 8px;
            border-radius: 4px;
            z-index: 20;
            pointer-events: none;
            white-space: nowrap;
        }

        .crop-overlay {
            position: absolute;
            top: 0;
            left: 0;
            border: 2px solid #4caf50;
            background: rgba(76, 175, 80, 0.15);
            box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.3);
            z-index: 10;
            pointer-events: none;
            display: none;
        }

        .phone-content .placeholder {
            text-align: center;
            color: var(--text-dim);
            font-size: 11px;
            pointer-events: none;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.3;
            }
        }

        .phone-content .placeholder .big-icon {
            font-size: 36px;
            display: block;
            margin-bottom: 8px;
            opacity: 0.6;
        }

        .phone-content .action-display {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 6px;
            padding: 12px;
            text-align: center;
            color: var(--text);
        }

        .phone-content .action-display .action-icon {
            font-size: 30px;
        }

        .phone-content .action-display .action-text {
            font-size: 12px;
            font-weight: 600;
        }

        .phone-content .action-display .action-params {
            font-size: 9px;
            color: var(--text-dim);
            font-family: monospace;
            word-break: break-all;
        }

        .phone-log {
            height: 60px;
            min-height: 30px;
            max-height: 95%;
            background: var(--panel-light);
            border-top: 1px solid var(--border);
            padding: 4px 8px;
            font-size: 11px;
            color: var(--text-dim);
            overflow-y: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            flex-shrink: 0;
            user-select: text;
            -webkit-user-select: text;
            cursor: text;
            position: relative;
        }

        .log-resizer {
            height: 6px;
            cursor: ns-resize;
            z-index: 30;
            background: var(--border);
            opacity: 0.6;
            border-radius: 2px;
            flex-shrink: 0;
        }

        .log-resizer:hover {
            background: var(--accent);
            opacity: 0.8;
        }

        .phone-log div {
            padding: 1px 0;
        }

        .phone-log .log-running {
            color: var(--yellow);
        }

        .phone-log .log-done {
            color: var(--green);
        }

        .phone-log .log-ai-fallback {
            color: #ff9800;
            font-weight: bold;
            background: rgba(255, 152, 0, 0.08);
            border-left: 3px solid #ff9800;
            padding-left: 6px !important;
            margin: 2px 0;
        }

        /* ==================== 结果看板卡片（result_dashboard 节点） ==================== */
        .phone-log .dashboard-card {
            margin: 6px 0;
            padding: 8px 10px;
            background: var(--panel-light);
            border: 1px solid var(--border);
            border-left: 3px solid var(--green);
            border-radius: var(--radius-sm);
            font-size: 12px;
        }

        .phone-log .dashboard-card.dashboard-warning {
            border-left-color: var(--yellow);
        }

        .phone-log .dashboard-card.dashboard-error {
            border-left-color: var(--red);
        }

        /* 标题栏：标题 + 状态徽章 */
        .phone-log .dashboard-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
        }

        .phone-log .dashboard-title {
            font-weight: 600;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .phone-log .dashboard-badge {
            flex-shrink: 0;
            padding: 1px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
        }

        .phone-log .dashboard-badge-success {
            color: var(--green);
            background: color-mix(in srgb, var(--green) 15%, transparent);
        }

        .phone-log .dashboard-badge-warning {
            color: var(--yellow);
            background: color-mix(in srgb, var(--yellow) 15%, transparent);
        }

        .phone-log .dashboard-badge-error {
            color: var(--red);
            background: color-mix(in srgb, var(--red) 15%, transparent);
        }

        /* 指标网格：2 列键值对 */
        .phone-log .dashboard-metrics {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px 12px;
            margin-bottom: 6px;
        }

        .phone-log .dashboard-metric {
            display: flex;
            justify-content: space-between;
            gap: 6px;
            padding: 2px 6px;
            background: color-mix(in srgb, var(--border) 30%, transparent);
            border-radius: 3px;
            min-width: 0;
        }

        .phone-log .dashboard-metric-name {
            color: var(--text-dim);
            flex-shrink: 0;
        }

        .phone-log .dashboard-metric-value {
            color: var(--text);
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 详情文本：保留换行 */
        .phone-log .dashboard-detail {
            color: var(--text-dim);
            white-space: pre-wrap;
            word-break: break-all;
            line-height: 1.5;
        }

        /* 截图预览：点击放大 */
        .phone-log .dashboard-screenshot {
            display: block;
            max-width: 100%;
            max-height: 160px;
            margin-top: 6px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            cursor: zoom-in;
        }

        .phone-log .dashboard-screenshot.dashboard-screenshot-full {
            max-height: none;
            max-width: 100%;
            cursor: zoom-out;
        }

        /* AI 生成的看板文件展示区 */
        .phone-log .dashboard-file {
            margin-top: 6px;
            padding: 6px 8px;
            background: color-mix(in srgb, var(--border) 20%, transparent);
            border: 1px dashed var(--border);
            border-radius: var(--radius-sm);
        }

        .phone-log .dashboard-file-info {
            font-size: 11px;
            color: var(--text-dim);
            margin-bottom: 4px;
            word-break: break-all;
        }

        .phone-log .dashboard-file-name {
            color: var(--text);
            font-weight: 600;
        }

        .phone-log .dashboard-file-actions {
            display: flex;
            gap: 6px;
        }

        .phone-log .dashboard-file-btn {
            padding: 2px 10px;
            font-size: 11px;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--panel-light);
            color: var(--text);
            cursor: pointer;
        }

        .phone-log .dashboard-file-btn:hover {
            background: color-mix(in srgb, var(--accent) 15%, transparent);
            border-color: var(--accent);
        }

        .phone-log .dashboard-file-btn:disabled {
            opacity: 0.5;
            cursor: default;
        }

        .phone-log .dashboard-file-preview {
            margin-top: 6px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
            background: #fff;
        }

        .phone-log .dashboard-file-close {
            display: block;
            width: 100%;
            padding: 3px;
            font-size: 11px;
            border: none;
            border-bottom: 1px solid var(--border);
            background: color-mix(in srgb, var(--border) 25%, transparent);
            color: var(--text);
            cursor: pointer;
        }

        .phone-log .dashboard-file-iframe {
            width: 100%;
            height: 260px;
            border: none;
            display: block;
        }

        .phone-log .dashboard-file-pre {
            max-height: 260px;
            overflow: auto;
            margin: 0;
            padding: 8px;
            font-size: 11px;
            white-space: pre-wrap;
            word-break: break-all;
            color: #333;
        }

        /* 历史看板列表（历史按钮展开） */
        .phone-log .dashboard-history {
            margin-top: 6px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }

        .phone-log .dashboard-history-empty {
            padding: 8px;
            font-size: 11px;
            color: var(--text-dim);
            text-align: center;
        }

        .phone-log .dashboard-history-list {
            max-height: 180px;
            overflow-y: auto;
        }

        .phone-log .dashboard-history-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            font-size: 11px;
            cursor: pointer;
            border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
        }

        .phone-log .dashboard-history-item:hover {
            background: color-mix(in srgb, var(--accent) 12%, transparent);
        }

        .phone-log .dashboard-history-icon {
            flex-shrink: 0;
        }

        .phone-log .dashboard-history-name {
            flex: 1;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .phone-log .dashboard-history-time {
            flex-shrink: 0;
            color: var(--text-dim);
            font-size: 10px;
        }

        .resizer-right {
            width: 4px;
            cursor: col-resize;
            background: transparent;
            flex-shrink: 0;
            z-index: 20;
            transition: background 0.2s;
            position: relative;
        }

        .resizer-right:hover,
        .resizer-right.active {
            background: var(--accent);
            opacity: 0.6;
        }

        /* 右栏折叠控制按钮 */
        .panel-toggle-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 44px;
            padding: 0;
            border: none;
            border-radius: 6px;
            background: var(--border);
            color: #fff;
            font-size: 10px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 25;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: background 0.2s, opacity 0.3s;
        }

        .panel-toggle-btn:hover {
            background: var(--accent-light);
        }

        .panel-toggle-btn.hide-btn {
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
        }

        .resizer-right.panel-hidden {
            width: 0;
            overflow: visible;
        }

        .resizer-right.panel-hidden .hide-btn {
            display: none;
        }

        /* 右栏隐藏后右侧的显示按钮（固定最右侧中间） */
        .panel-toggle-btn.show-btn {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 6px 0 0 6px;
        }

        .drag-ghost {
            position: fixed;
            pointer-events: none;
            z-index: 1000;
            opacity: 0.85;
            transform: scale(1.02);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transition: none;
        }

        /* ==================== Toast 悬浮提示 ==================== */
        /* 容器：固定右上角，z-index 高于模态框(4000)，支持多条堆叠 */
        .toast-container {
            position: fixed;
            top: 16px;
            right: 16px;
            z-index: 5000;
            display: flex;
            flex-direction: column;
            gap: 8px;
            pointer-events: none;
        }

        /* 单条 Toast：滑入动画（初始右偏移+透明，show 类归位） */
        .toast {
            padding: 10px 16px;
            border-radius: var(--radius);
            background: var(--panel);
            border: 1px solid var(--border);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
            font-size: 12px;
            color: var(--text);
            opacity: 0;
            transform: translateX(24px);
            transition: opacity 0.25s ease, transform 0.25s ease;
            max-width: 320px;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(0);
        }

        .toast.hide {
            opacity: 0;
            transform: translateX(24px);
        }

        /* 三种类型配色（左侧色条区分） */
        .toast-success { border-left: 3px solid #4caf50; }
        .toast-error   { border-left: 3px solid #f44336; }
        .toast-info    { border-left: 3px solid #2196f3; }

        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
            z-index: 1000;
        }

        .modal-dialog {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
            width: 500px;
            max-width: 90vw;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            transform: translateY(20px);
            transition: transform 0.2s ease;
        }

        .modal-overlay.active .modal-dialog {
            transform: translateY(0);
        }

        .modal-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
        }

        .modal-message {
            font-size: 14px;
            color: var(--text-dim);
            line-height: 1.5;
        }

        .modal-input {
            padding: 6px 10px;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-size: 12px;
            outline: none;
            width: 100%;
        }

        .modal-input:focus {
            border-color: var(--accent);
        }

        .modal-buttons {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }

        .modal-btn {
            padding: 6px 14px;
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            cursor: pointer;
            font-size: 12px;
            transition: background 0.2s;
        }

        .modal-btn.primary {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

        .modal-btn.primary:hover {
            background: var(--accent-hover);
        }

        .modal-btn.secondary {
            background: var(--button-bg);
            color: var(--text);
        }

        .modal-btn.secondary:hover {
            background: var(--button-hover);
        }

        .modal-btn.danger {
            background: var(--red);
            color: #fff;
        }

        .modal-btn.danger:hover {
            background: #d32f2f;
        }

        /* ===== 界面元素选取模态框 ===== */
        .ui-picker-dialog {
            width: 420px;
            max-width: 90vw;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
        }

        .ui-picker-search {
            padding: 8px 0;
        }

        .ui-picker-search input {
            width: 100%;
            padding: 8px 12px;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-size: 13px;
            outline: none;
        }

        .ui-picker-search input:focus {
            border-color: var(--accent);
        }

        .ui-picker-list {
            flex: 1;
            overflow-y: auto;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            min-height: 200px;
            max-height: 50vh;
            margin-bottom: 12px;
        }

        .ui-picker-loading,
        .ui-picker-empty {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 30;
            padding: 20px;
            text-align: center;
            color: var(--text-dim);
            font-size: 13px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: var(--radius-sm);
            pointer-events: none;
        }

        .ui-picker-item {
            padding: 10px 12px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.15s;
        }

        .ui-picker-item:last-child {
            border-bottom: none;
        }

        .ui-picker-item:hover {
            background: var(--button-hover);
        }

        .ui-picker-item .ui-picker-label {
            font-size: 13px;
            color: var(--text);
            font-weight: 500;
            word-break: break-all;
        }

        .ui-picker-item .ui-picker-meta {
            font-size: 11px;
            color: var(--text-dim);
            margin-top: 3px;
            word-break: break-all;
        }

        .ui-picker-item .ui-picker-tag {
            display: inline-block;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 8px;
            margin-right: 6px;
            background: var(--accent);
            color: #fff;
        }

        .ui-picker-item .ui-picker-tag.clickable {
            background: var(--green);
        }

        .ui-picker-item .ui-picker-coord {
            font-size: 10px;
            color: var(--text-dim);
            margin-top: 3px;
        }

        /* ===== 截图界面元素框架选取 ===== */
        .ui-pick-frames {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 20;
        }

        /* PC 网页选取（原始尺寸滚动条模式）：框架容器覆盖整个截图区域 */
        .phone-content.shot-preview-mode .ui-pick-frames {
            inset: auto;
            pointer-events: none;
        }

        .ui-pick-frame {
            position: absolute;
            border: 1.5px dashed rgba(76, 175, 80, 0.7);
            /* 半透绿色虚线 */
            background: rgba(76, 175, 80, 0.08);
            border-radius: 3px;
            cursor: pointer;
            pointer-events: auto;
            transition: background 0.15s, border-color 0.15s;
            box-sizing: border-box;
        }

        .ui-pick-frame:hover {
            background: rgba(76, 175, 80, 0.25);
            border-color: #4caf50;
        }

        .ui-pick-frame.clickable {
            border-color: rgba(33, 150, 243, 0.7);
            /* 可点击元素用蓝色虚线 */
        }

        .ui-pick-frame.clickable:hover {
            border-color: #2196f3;
            background: rgba(33, 150, 243, 0.25);
        }

        /* 多选模式：选中高亮 */
        .ui-pick-frame.selected {
            border: 2px solid #ff9800;
            background: rgba(255, 152, 0, 0.3);
            box-shadow: 0 0 6px rgba(255, 152, 0, 0.6);
        }

        .ui-pick-frame.selected .ui-pick-frame-label {
            background: #ff9800;
        }

        /* 多选模式：底部"完成"按钮栏（悬浮固定在右侧栏截图框底部，不跟随截图内容滚动） */
        .ui-pick-done-bar {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(0, 0, 0, 0.75);
            padding: 8px 16px;
            border-radius: 20px;
            z-index: 40;
            pointer-events: auto;
        }

        .ui-pick-count {
            color: #fff;
            font-size: 13px;
        }

        .ui-pick-count b {
            color: #ff9800;
        }

        .ui-pick-done-btn {
            background: #4caf50;
            color: #fff;
            border: none;
            padding: 6px 16px;
            border-radius: 16px;
            cursor: pointer;
            font-size: 13px;
        }

        .ui-pick-done-btn:hover {
            background: #43a047;
        }

        .ui-pick-frame-label {
            position: absolute;
            top: -16px;
            left: 0;
            font-size: 9px;
            color: #fff;
            background: rgba(0, 0, 0, 0.6);
            padding: 1px 4px;
            border-radius: 3px;
            white-space: nowrap;
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
        }

        .phone-content.ui-picking {
            cursor: crosshair;
        }

        /* 界面元素加载 loading 覆盖层 */
        .ui-pick-loading {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: rgba(0, 0, 0, 0.35);
            color: #fff;
            font-size: 13px;
            z-index: 30;
        }

        .ui-pick-spinner {
            width: 28px;
            height: 28px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: ui-pick-spin 0.8s linear infinite;
        }

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

        /* 界面元素加载错误提示 */
        .ui-pick-error {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            background: rgba(0, 0, 0, 0.55);
            color: #ff6b6b;
            font-size: 13px;
            text-align: center;
            padding: 20px;
            z-index: 30;
        }

        .ui-pick-error .btn {
            padding: 6px 16px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--button-bg);
            color: var(--text);
            cursor: pointer;
        }

        /* ===== PC 浏览器网页选取模态框 ===== */
        .pc-picker-dialog {
            width: 900px;
            max-width: 94vw;
            max-height: 88vh;
            display: flex;
            flex-direction: column;
        }

        .pc-picker-address {
            display: flex;
            gap: 8px;
            padding: 8px 0;
        }

        .pc-picker-address input {
            flex: 1;
            padding: 8px 12px;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-size: 13px;
            outline: none;
        }

        .pc-picker-address input:focus {
            border-color: var(--accent);
        }

        .pc-picker-viewport {
            position: relative;
            flex: 1;
            overflow: auto;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: #1a1a1a;
            min-height: 300px;
            max-height: 60vh;
        }

        .pc-picker-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: var(--text-dim);
            font-size: 13px;
        }

        .pc-picker-viewport img {
            display: block;
            width: 100%;
            height: auto;
        }

        .pc-picker-frames {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 20;
        }

        .pc-picker-frame {
            position: absolute;
            border: 1.5px dashed rgba(33, 150, 243, 0.7);
            background: rgba(33, 150, 243, 0.08);
            border-radius: 3px;
            cursor: pointer;
            pointer-events: auto;
            transition: background 0.15s, border-color 0.15s;
            box-sizing: border-box;
        }

        .pc-picker-frame:hover {
            background: rgba(33, 150, 243, 0.25);
            border-color: #2196f3;
        }

        .pc-picker-frame-label {
            position: absolute;
            top: -16px;
            left: 0;
            font-size: 9px;
            color: #fff;
            background: rgba(0, 0, 0, 0.6);
            padding: 1px 4px;
            border-radius: 3px;
            white-space: nowrap;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
        }

        .pc-picker-tip {
            padding: 6px 0;
            font-size: 11px;
            color: var(--text-dim);
            text-align: center;
        }

        .pc-picker-loading {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            font-size: 13px;
            z-index: 30;
        }

        /* ===== 设置面板 ===== */
        .modal-dialog.settings-mode {
            width: 520px;
            max-width: 92vw;
            max-height: 84vh;
            padding: 0;
            gap: 0;
            overflow-y: auto;
        }

        .settings-dialog {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        /* ===== 插件配置独立浮层（二级弹窗，叠加在设置界面上方） ===== */
        .plugin-config-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 5000; /* 高于设置弹窗 modal-overlay.active(z-index:4000) */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .plugin-config-dialog {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
            width: 460px;
            max-width: 90vw;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .plugin-config-header {
            padding: 14px 18px;
            border-bottom: 1px solid var(--border);
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            background: var(--panel);
        }
        .plugin-config-body {
            padding: 14px 18px;
            overflow-y: auto;
            flex: 1;
            font-size: 13px;
        }
        .plugin-config-footer {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 18px;
            border-top: 1px solid var(--border);
            background: var(--panel);
        }
        .plugin-config-status {
            flex: 1;
            font-size: 12px;
            color: #888;
            text-align: left;
        }

        .settings-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            position: sticky;
            top: 0;
            background: var(--panel);
            z-index: 2;
        }

        .settings-body {
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            /* 防止子项长内容撑破弹窗宽度 */
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }

        .settings-group {
            /* background: var(--bg-secondary, #1e1e1e); */
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: border-color 0.2s;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }
        .settings-group.accordion-item.open {
            border-color: var(--accent, #4a9eff);
        }

        .settings-group-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
            user-select: none;
            padding: 13px 14px;
            border-bottom: none;
            transition: background 0.2s;
        }
        .settings-group-title:hover {
            background: var(--bg-secondary, rgba(255,255,255,0.04));
        }
        .accordion-item.open .settings-group-title {
            border-bottom: 1px dashed var(--border);
        }

        .accordion-arrow {
            margin-left: auto;
            font-size: 12px;
            transition: transform 0.25s;
            color: var(--text-dim, #666);
        }
        .accordion-item.open .accordion-arrow {
            transform: rotate(180deg);
        }

        .accordion-body {
            display: none;
            padding: 14px;
            flex-direction: column;
            gap: 12px;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }
        .accordion-item.open .accordion-body {
            display: flex;
        }

        .settings-group-subtitle {
            font-size: 11px;
            color: var(--text-dim, #888);
            line-height: 1.5;
        }

        .settings-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 10px 12px;
        }

        .settings-grid .span-2 {
            grid-column: span 2;
        }

        .settings-field {
            display: flex;
            flex-direction: column;
            gap: 5px;
            /* 关键：防止 grid 子项因长内容撑破列宽导致横向溢出 */
            min-width: 0;
        }

        .settings-field label {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-secondary, #888);
        }

        .settings-field-hint {
            font-size: 10px;
            color: var(--text-dim, #666);
            margin-top: 2px;
            line-height: 1.4;
            /* 长提示文字自动换行，不撑破列宽 */
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        /* 服务设置：访问地址展示 */
        .server-addr-row {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        .server-addr-input {
            flex: 1;
            padding: 7px 10px;
            border: 1px solid var(--border, #444);
            border-radius: 6px;
            background: var(--panel-input, #1e1e28);
            color: var(--text, #e0e0e0);
            font-family: 'Consolas', 'Courier New', monospace;
            font-size: 12px;
            width: 100%;
            box-sizing: border-box;
        }
        .server-addr-input:read-only {
            opacity: 0.85;
            cursor: text;
        }
        .server-addr-copy {
            padding: 6px 12px;
            font-size: 12px;
            flex-shrink: 0;
        }

        /* 服务设置：设备管理列表（多套中继配置保存与切换） */
        .device-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .device-list-empty {
            font-size: 12px;
            color: var(--text-dim, #888);
            padding: 8px;
            text-align: center;
            border: 1px dashed var(--border, #444);
            border-radius: 6px;
        }
        .device-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 10px;
            border: 1px solid var(--border, #444);
            border-radius: 6px;
            background: var(--panel-input, #1e1e28);
        }
        .device-item.device-current {
            border-color: var(--primary, #4a9eff);
            background: color-mix(in srgb, var(--primary, #4a9eff) 8%, transparent);
        }
        .device-item-info {
            flex: 1;
            min-width: 0;
        }
        .device-item-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text, #e0e0e0);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .device-current-badge {
            font-size: 10px;
            font-weight: normal;
            padding: 1px 6px;
            border-radius: 8px;
            background: var(--primary, #4a9eff);
            color: #fff;
        }
        .device-item-addr {
            font-size: 11px;
            color: var(--text-dim, #888);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 2px;
        }
        .device-item-actions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
        }
        .device-item-actions .btn {
            padding: 4px 10px;
            font-size: 12px;
        }
        .device-delete-btn {
            opacity: 0.7;
        }
        .device-delete-btn:hover {
            opacity: 1;
        }

        /* AI 模型列表管理（动态注册表） */
        .ai-models-toolbar {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .ai-models-toolbar .btn {
            padding: 6px 12px;
            font-size: 12px;
        }
        .ai-models-add-row {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        .ai-models-add-row .btn {
            width: 100%;
            padding: 8px 12px;
            font-size: 13px;
            border-style: dashed;
            opacity: 0.85;
        }
        .ai-models-add-row .btn:hover {
            opacity: 1;
        }
        .ai-model-card {
            border: 1px solid var(--border, #333);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
        }
        .ai-model-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            gap: 8px;
            flex-wrap: wrap;
        }
        .ai-model-alias {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
        }
        .ai-model-card-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .ai-model-card-actions .btn {
            padding: 6px 10px;
            font-size: 11px;
        }
        .ai-model-card-actions .test-result {
            font-size: 11px;
        }
        .btn-danger {
            background: rgba(220, 60, 60, 0.15);
            color: #e06c6c;
            border: 1px solid rgba(220, 60, 60, 0.4);
        }
        .btn-danger:hover {
            background: rgba(220, 60, 60, 0.3);
        }

        /* Agent 预设卡片：系统提示词输入框 */
        .agent-preset-card .agent-system-prompt {
            width: 100%;
            min-height: 90px;
            resize: vertical;
            font-family: inherit;
            font-size: 12px;
            line-height: 1.5;
            background: var(--input-bg, rgba(20,20,20,0.5));
            color: var(--text);
            border: 1px solid var(--border, #333);
            border-radius: 6px;
            padding: 8px;
            box-sizing: border-box;
        }
        .agent-preset-card .agent-system-prompt:focus {
            outline: none;
            border-color: var(--accent, #4a9eff);
        }
        .settings-field textarea.ai-model-field {
            width: 100%;
            box-sizing: border-box;
            padding: 7px 10px;
            border: 1px solid var(--border, #333);
            border-radius: 6px;
            background: var(--input-bg, #1e1e1e);
            color: var(--text);
            font-size: 13px;
            outline: none;
            transition: border-color 0.2s;
            resize: vertical;
            min-height: 60px;
            font-family: inherit;
            line-height: 1.5;
        }
        .settings-field textarea.ai-model-field:focus {
            border-color: var(--accent);
        }

        .settings-field input,
        .settings-field select {
            padding: 7px 10px;
            border: 1px solid var(--border, #333);
            border-radius: 6px;
            background: var(--input-bg, #1e1e1e);
            color: var(--text);
            font-size: 13px;
            box-sizing: border-box;
            outline: none;
            transition: border-color 0.2s;
            /* 防止长选项文本（如下拉框）撑破父容器 */
            width: 100%;
            min-width: 0;
        }

        .settings-field input:focus,
        .settings-field select:focus {
            border-color: var(--accent);
        }

        .settings-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 14px 20px;
            border-top: 1px solid var(--border);
            position: sticky;
            bottom: 0;
            background: var(--panel);
            z-index: 2;
        }

        /* ===== CSV 文件选择器 ===== */
        .csv-picker-dialog {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
        }

        .csv-file-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-height: 300px;
            overflow-y: auto;
        }

        .csv-file-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg-secondary, #1e1e1e);
        }

        .csv-file-item:hover {
            border-color: var(--accent);
            background: rgba(100, 115, 247, 0.08);
        }

        .csv-file-icon {
            font-size: 20px;
        }

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

        .csv-file-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text);
        }

        .csv-file-meta {
            font-size: 11px;
            color: var(--text-secondary, #888);
            margin-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .csv-btns {
            display: flex;
            gap: 6px;
            margin-top: 4px;
        }

        .csv-btns .btn {
            flex: 1;
            padding: 5px 8px;
            font-size: 11px;
        }

        /* 文件地址输入框：右侧 📂 文件浏览图标按钮（样式已统一到 .browse-btn/.filepath-btn） */
        .filepath-input-wrap {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .filepath-input-wrap input {
            flex: 1;
            min-width: 0;
        }

        /* AI图片/AI视频节点：输入图片路径预览 */
        .ai-image-preview {
            margin-top: 6px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
            background: var(--input-bg);
        }

        .ai-image-preview-img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 140px;
            object-fit: contain;
        }

        /* AI图片/AI视频节点：多张参考图缩略图画廊 */
        .ai-image-preview-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 6px;
        }

        .ai-image-preview-gallery .ai-image-preview-img {
            width: 72px;
            height: 72px;
            max-height: none;
            border-radius: 6px;
            object-fit: cover;
            border: 1px solid var(--border);
            background: #fff;
        }

        .theme-options {
            display: flex;
            gap: 8px;
        }

        .theme-option {
            flex: 1;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
            font-size: 12px;
            background: var(--panel-light);
        }

        .theme-option:hover {
            background: var(--button-hover);
        }

        .theme-option.active {
            border-color: var(--accent);
            background: rgba(100, 115, 247, 0.12);
        }

        @media (max-width: 1100px) {
            .left-panel {
                width: 220px;
            }

            .right-panel {
                width: 450px;
            }

            .node {
                width: 150px;
            }
        }

/* ==================== AI Agent 模态框 ==================== */
.ai-agent-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 无遮罩背景，不遮挡页面 */
    background: transparent;
    z-index: 1000;
    /* 不居中，content 通过 position:fixed 自由定位 */
    pointer-events: none;
}
.ai-agent-content {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 700px;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 支持自由拖动 */
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.ai-agent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-weight: 600;
    font-size: 14px;
}
.ai-agent-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
}
.ai-agent-close:hover { background: rgba(255,255,255,0.2); }
.ai-agent-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}
.ai-agent-field {
    margin-bottom: 12px;
}
.ai-agent-field label {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.ai-agent-field textarea,
.ai-agent-field input,
.ai-agent-field select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}
.ai-agent-field select {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
    background: var(--input-bg);
    border-color: var(--input-border);
}
.ai-agent-field select option {
    background: var(--input-bg);
    color: var(--text);
}
.ai-agent-field textarea { resize: vertical; }
.ai-agent-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.ai-agent-screenshot {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
}
.ai-agent-log {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    background: var(--bg);
    font-size: 12px;
    font-family: 'Consolas', monospace;
    margin-bottom: 12px;
}
.ai-agent-log .log-entry {
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
}
.ai-agent-log .log-entry:last-child { border-bottom: none; }
.ai-agent-log .log-thinking { color: #667eea; }
.ai-agent-log .log-action { color: var(--accent-light); }
.ai-agent-log .log-error { color: #e74c3c; }
.ai-agent-log .log-done { color: #2ecc71; }
.ai-agent-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.ai-agent-chat {
    display: flex;
    gap: 8px;
}
.ai-agent-chat input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 13px;
}
body.light .ai-agent-content { background: #fff; }
body.light .ai-agent-field textarea,
body.light .ai-agent-field input,
body.light .ai-agent-field select,
body.light .ai-agent-log,
body.light .ai-agent-screenshot,
body.light .ai-agent-chat input {
    background: #f5f5f5;
    border-color: #ddd;
    color: #333;
}
body.light .ai-agent-field select option {
    background: #fff;
    color: #333;
}

/* ==================== AI 助手（智能客服式） ==================== */
/* 右下角悬浮按钮 */
/* AI 助手 FAB 按钮 */
.ai-assistant-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 16px; /* 圆角方形，贴合方形 logo */
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
    z-index: 2000;
    opacity: 0;
    pointer-events: none; /* 默认隐藏态不可交互 */
}

/* ★ 显示态：JS 添加 .visible 触发淡入 */
.ai-assistant-fab.visible {
    opacity: 1;
    pointer-events: auto;
}
.ai-assistant-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
.ai-assistant-fab.dragging {
    cursor: grabbing;
    transform: scale(1.05);
}
.ai-assistant-fab .fab-icon {
    pointer-events: none;
}
/* FAB 内 logo 图片：圆角方形适配，避免生硬直角 */
.ai-assistant-fab > img {
    width: 64%;
    height: 64%;
    border-radius: 8px;
    object-fit: contain;
    pointer-events: none;
}

/* ==================== 悬浮球模式（窗口模式切换） ==================== */
/* 悬浮球提示标签 */
.ai-assistant-fab .fab-hint {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 3000;
}
.ai-assistant-fab:hover .fab-hint {
    opacity: 1;
}

/* ball 模式：悬浮球填满 72×72 透明窗口，避免透明死区 */
body.mode-ball .ai-assistant-fab {
    right: auto;
    bottom: auto;
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
    border-radius: 14px; /* 圆角方形，与主界面 FAB 保持一致 */
    transform: none;
    transition: box-shadow 0.2s;
}
/* hover 用阴影光晕增强，不用 scale（避免透明窗口边界裁剪） */
body.mode-ball .ai-assistant-fab:hover {
    transform: none;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.35), 0 6px 20px rgba(102, 126, 234, 0.7);
}
body.mode-ball .ai-assistant-fab.dragging {
    transform: none;
    box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.45);
}
/* ball 模式下隐藏提示标签中的"双击"说明避免遮挡 */
body.mode-ball .fab-hint {
    display: none;
}
/* full 模式：悬浮 AI 助手按钮不显示"双击展开全部界面"提示气泡 */
body.mode-full .fab-hint {
    display: none;
}

/* assistant 模式：AI 面板铺满整个透明窗口，保留圆角 */
/* ★ 窗口高度=80%屏幕高（index.js 动态计算），面板 100% 铺满 → 面板高即屏幕高的 80% */
body.mode-assistant .ai-assistant-panel {
    right: 0;
    bottom: 0;
    width: 540px;
    height: 100%;
    max-height: 100%;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* full 模式：正常显示完整编辑器界面 */
/* ★ full 模式：窗口保持透明，由 body 绘制圆角 + 阴影（原生窗口无法有圆角阴影） */
body.mode-full {
    background: transparent !important;
    transition: none;
    /* 圆角裁剪整个界面，阴影绘制在 body 外圈 */
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
/* full 模式下内部元素背景由 .toolbar/.main 自带，body 圆角裁剪即可 */
body.mode-full .toolbar {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
/* full 模式下主区域底部圆角（画布背景 var(--bg) 需被裁剪） */
body.mode-full .main {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden;
    background-color: var(--bg);
}

/* ball / assistant 模式：body 背景透明，露出窗口圆角 */
body.mode-ball,
body.mode-assistant {
    background: transparent !important;
    transition: none;
}

/* ★ assistant 模式：AI 面板圆角 + 阴影增强（窗口透明，阴影绘制在面板外圈） */
body.mode-assistant {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* AI 助手聊天面板 */
.ai-assistant-panel {
    position: fixed;
    right: 24px;
    bottom: 92px;
    width: 540px;
    height: 90%;
    max-height: 85vh;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    z-index: 2000;
    pointer-events: auto;
    /* ★ 显示/隐藏渐变动画：淡入淡出 + 轻微上浮 */
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none; /* 默认不可交互（隐藏态） */
}

/* ★ 显示态：由 JS 添加 .visible 类触发渐变进入 */
.ai-assistant-panel.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ★ 隐藏态：由 JS 添加 .hiding 类触发渐变退出（动画结束后再 display:none） */
.ai-assistant-panel.hiding {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    pointer-events: none;
}

/* ===== 会话列表侧边栏 ===== */
.ai-session-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background: var(--bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 10;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}
.ai-session-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.ai-session-sidebar-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.ai-session-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.2);
}
/* ★ 会话搜索框 */
.ai-session-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}
.ai-session-search-icon {
    position: absolute;
    left: 18px;
    color: var(--text-dim);
    pointer-events: none;
}
.ai-session-search-input {
    flex: 1;
    width: 100%;
    padding: 6px 26px 6px 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input, rgba(0, 0, 0, 0.04));
    color: var(--text);
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-session-search-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}
.ai-session-search-input::placeholder {
    color: var(--text-dim);
    opacity: 0.7;
}
.ai-session-search-clear {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    display: none;
    line-height: 1;
}
.ai-session-search-clear:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}
.ai-session-search-clear.visible {
    display: inline-flex;
}
.ai-session-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}
.ai-session-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 4px;
    border: 1px solid transparent;
}
.ai-session-item:hover {
    background: rgba(102, 126, 234, 0.1);
}
.ai-session-item.active {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.4);
}
.ai-session-item-title {
    flex: 1;
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-session-item-time {
    font-size: 10px;
    color: var(--text-dim);
    white-space: nowrap;
}
.ai-session-item-delete {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

/* ★ 重命名会话按钮（与删除按钮同款交互：悬停会话项时显示） */
.ai-session-item-rename {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}
.ai-session-item-rename:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.12);
}.ai-session-item:hover .ai-session-item-delete,
.ai-session-item:hover .ai-session-item-rename {
    opacity: 1;
}
.ai-session-item-delete:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}
.ai-session-list-empty {
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
    padding: 20px;
}
  
.ai-assistant-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    cursor: move;
    user-select: none;
    flex-shrink: 0;
}

.ai-assistant-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-right: auto;
    flex-shrink: 0;
}
.ai-assistant-title {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    color:#fff;
    line-height: 1.3;
    cursor: pointer;
    align-items: center;
    gap: 3px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: -6px;
    transition: background 0.2s;
}
.ai-assistant-title:hover {
    background: rgba(255, 255, 255, 0.18);
}
.ai-title-chevron {
    flex-shrink: 0;
    opacity: 0.75;
    transition: transform 0.2s;
}
.ai-assistant-title.open .ai-title-chevron {
    transform: rotate(180deg);
}

/* ★ 用户回复列表弹出层：点击会话标题展开，选择后滚动定位到对应用户消息 */
.ai-user-replies-popup {
    position: absolute;
    top: 52px;
    left: 14px;
    width: 320px;
    max-width: calc(100% - 28px);
    max-height: 320px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    z-index: 60;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.light .ai-user-replies-popup {
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}
.ai-user-replies-header {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-user-replies-list {
    overflow-y: auto;
    padding: 4px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ai-user-reply-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
    font-size: 14px;
    color: var(--text);
}
.ai-user-reply-item:hover {
    background: rgba(102, 126, 234, 0.14);
}
.ai-user-reply-item.active {
    background: rgba(102, 126, 234, 0.22);
}
.ai-user-reply-index {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.18);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-user-reply-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.ai-user-reply-time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}
.ai-user-replies-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
}

/* ★ 滚动定位到用户消息时的高亮闪烁动画 */
@keyframes aiMsgFlash {
    0% { box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.9); }
    70% { box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.0); }
    100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}
.ai-msg-user.flash-target .ai-msg-bubble {
    animation: aiMsgFlash 1.6s ease-out 1;
    border-radius: 12px;
}
.ai-assistant-status {
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    line-height: 1.3;
}
.ai-assistant-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}
.ai-assistant-close {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-assistant-close:hover {
    background: #f3f4f6;
    color: #4b5563;
}

/* 头部操作按钮（复制/导出） */
.ai-assistant-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.ai-assistant-icon-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-assistant-icon-btn:hover {
    background: #f3f4f6;
    color: #4b5563;
}
.ai-assistant-icon-btn svg {
    display: block;
}
.ai-assistant-close svg {
    display: block;
}

/* 快捷指令 */
.ai-assistant-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.ai-quick-btn {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: var(--text);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ai-quick-btn:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: #667eea;
}
body.light .ai-quick-btn {
    background: #f0f0f0;
    border-color: #ddd;
    color: #333;
}
body.light .ai-quick-btn:hover {
    background: rgba(102, 126, 234, 0.15);
    border-color: #667eea;
}

/* 会话区 */
/* ★ 会话区包裹层：接管 flex 布局，承载滚动导航按钮的定位上下文 */
.ai-assistant-messages-wrap {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0; /* flex 子项允许收缩，保证内部滚动正常 */
}
.ai-assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--bg);
    /* ★ 允许会话框内所有文本可选中（覆盖全局 body 的 user-select:none） */
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}
/* 会话框内所有子元素（消息气泡、思考、工具调用、Shell、Markdown 等）均可选中 */
.ai-assistant-messages * {
    user-select: text;
    -webkit-user-select: text;
}

/* ★ 会话区滚动导航按钮（回到顶部/滚动到底部） */
.ai-scroll-nav {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
    pointer-events: none; /* 容器不拦截，按钮单独开启 */
}
.ai-scroll-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(30, 30, 34, 0.82);
    color: #ccc;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s,
                background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* 显隐由 JS 控制：不在顶部显示↑，不在底部显示↓ */
.ai-scroll-btn.show {
    opacity: 0.4;
    visibility: visible;
    transform: translateY(0);
}
.ai-scroll-btn:hover {
    background: rgba(102, 126, 234, 0.85);
    color: #fff;
    border-color: #667eea;
}
/* 亮色主题适配 */
body.light .ai-scroll-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #555;
    border-color: #ddd;
}
body.light .ai-scroll-btn:hover {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}
.ai-msg {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}
.ai-msg-user {
    align-self: flex-end;
    align-items: flex-end;
}
.ai-msg-assistant {
    align-self: flex-start;
    align-items: flex-start;
}
.ai-msg-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
    /* white-space: pre-wrap; */
}
.ai-msg-user .ai-msg-bubble {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ai-msg-assistant .ai-msg-bubble {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    border-bottom-left-radius: 4px;
    max-width: 100%;
}

/* ===== 界面框架卡片（AI 操控运行时显示，白色背景，截图失败也显示） ===== */
.ai-frame-card {
    background: var(--panel-light);
    display: block;
    max-height: 100px;
    overflow: clip;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 4px 0;
    max-width: 100%;
    box-sizing: border-box;
}
.ai-frame-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}
.ai-frame-list {
    max-height: 220px;
    overflow-y: auto;
    /* background: #ffffff; */
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text);
}
.ai-frame-item {
    padding: 3px 6px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* .ai-frame-item:nth-child(odd) {
    background: #f7f7f7;
} */
/* .ai-frame-item:hover {
    background: #eef1ff;
} */
body.light .ai-frame-card {
    background: #ffffff;
    border-color: #ddd;
}
body.light .ai-frame-header { color: #333; }
body.light .ai-frame-list { color: #444; }
.ai-msg-meta {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 3px;
    padding: 0 4px;
}

/* ★ AI 消息气泡操作按钮（复制/删除） */
.ai-msg-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    padding: 0 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.ai-msg:hover .ai-msg-actions,
.ai-msg-actions:focus-within {
    opacity: 1;
}
.ai-msg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim, #999);
    cursor: pointer;
    transition: all 0.15s ease;
}
.ai-msg-action-btn:hover {
    background: var(--panel-light, #f0f0f0);
    color: var(--text, #333);
    border-color: var(--border, #ccc);
}
.ai-msg-action-del:hover {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.4);
}
/* ★ 派生会话按钮悬停：绿色系（呼应"派生/生长"语义） */
.ai-msg-action-fork:hover {
    background: rgba(39, 174, 96, 0.12);
    color: #27ae60;
    border-color: rgba(39, 174, 96, 0.4);
}
.ai-msg-action-done {
    color: #27ae60 !important;
    border-color: rgba(39, 174, 96, 0.5) !important;
    background: rgba(39, 174, 96, 0.1) !important;
}
.ai-msg-action-svg {
    display: block;
    pointer-events: none;
}

/* 思考过程（折叠） */
.ai-think {
    background: rgba(102, 126, 234, 0.08);
    border-left: 3px solid #667eea;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    /* ★ 思考过程文本允许选中（点击标签仍可折叠/展开） */
    user-select: text;
    -webkit-user-select: text;
}
.ai-think .ai-think-label {
    font-weight: 600;
    color: #667eea;
}
.ai-think .ai-think-body {
    display: none;
    margin-top: 4px;
    white-space: pre-wrap;
    color: var(--text);
}
.ai-think.open .ai-think-body {
    display: block;
}

/* 工具调用（可折叠卡片，默认折叠） */
/* ===== 工具调用卡片（soloomo mobile_webui 风格） =====
 * 结构：头部（状态图标+工具名+状态+展开箭头）+ 主体（Arguments 区 + Result 区）
 * 默认折叠，点击头部展开/折叠；发出和结果用同一条卡片 */
.tool-call-card {
    background: var(--tool-card-bg, rgba(99, 102, 241, 0.04));
    border: 1px solid var(--tool-card-border, rgba(99, 102, 241, 0.15));
    border-radius: 8px;
    margin: 4px 0;
    transition: border-color 0.2s ease;
    max-width: 100%;
    box-sizing: border-box;
}
.tool-call-card.success { border-color: rgba(52, 199, 89, 0.25); }
.tool-call-card.error { border-color: rgba(255, 59, 48, 0.25); }
.tool-call-card.running { border-color: rgba(255, 149, 0, 0.25); }
.tool-call-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}
.tool-call-header:hover { opacity: 0.85; }
.tool-icon { font-size: 15px; flex-shrink: 0; }
.tool-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text, #e0e0e0);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.tool-status {
    font-size: 12px;
    color: var(--text-dim, #888);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.tool-status.success { color: #2ecc71; }
.tool-status.error { color: #e74c3c; }
.tool-status.running { color: #f39c12; }
.tool-expand {
    font-size: 12px;
    color: var(--text-dim, #888);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.tool-call-card.expanded .tool-expand { transform: rotate(180deg); }
.tool-call-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.tool-call-card.expanded .tool-call-body { max-height: 600px; }
.tool-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim, #888);
    padding: 4px 14px 2px;
}
.tool-args, .tool-result {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    background: rgba(0, 0, 0, 0.2);
    margin: 0 14px 8px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--text, #e0e0e0);
    max-height: 300px;
    overflow-y: auto;
}
.tool-result.error { color: #e74c3c; }
body.light .tool-call-card {
    background: rgba(99, 102, 241, 0.04);
    border-color: rgba(99, 102, 241, 0.2);
}
body.light .tool-args, body.light .tool-result {
    background: #f0f1f8;
    color: #333;
}

/* token 消耗 */
.ai-token {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #2ecc71;
    padding: 2px 10px;
    font-size: 11px;
    margin-top: 4px;
}

/* run_shell 统一使用 tool-call-card（上方定义），无独立终端块样式 */

/* ==================== Markdown 渲染样式 ==================== */
/* AI 助手消息气泡内的 markdown 元素样式 */
.ai-msg-bubble .md-p {
    margin: 0 0 8px 0;
    line-height: 1.7;
}
.ai-msg-bubble .md-p:last-child {
    margin-bottom: 0;
}
.ai-msg-bubble .md-h1,
.ai-msg-bubble .md-h2,
.ai-msg-bubble .md-h3,
.ai-msg-bubble .md-h4,
.ai-msg-bubble .md-h5,
.ai-msg-bubble .md-h6 {
    margin: 10px 0 6px 0;
    font-weight: 600;
    line-height: 1.4;
}
.ai-msg-bubble .md-h1 { font-size: 18px; }
.ai-msg-bubble .md-h2 { font-size: 16px; }
.ai-msg-bubble .md-h3 { font-size: 15px; }
.ai-msg-bubble .md-h4 { font-size: 14px; }
.ai-msg-bubble .md-h5 { font-size: 13px; }
.ai-msg-bubble .md-h6 { font-size: 12px; color: var(--text-dim); }
.ai-msg-bubble .md-h1:first-child,
.ai-msg-bubble .md-h2:first-child,
.ai-msg-bubble .md-h3:first-child { margin-top: 0; }

/* 行内代码 */
.ai-msg-bubble .md-inline-code {
    background: rgba(102, 126, 234, 0.12);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12.5px;
    color: #e67e22;
    word-break: break-all;
}
body.light .ai-msg-bubble .md-inline-code {
    background: #f5f5f5;
    border-color: #ddd;
    color: #d35400;
}

/* 代码块 */
.ai-msg-bubble .md-code-block {
    background: #1e1e2e;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0;
    overflow-x: auto;
    position: relative;
}
.ai-msg-bubble .md-code-block .md-code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    color: #e0e0e0;
    white-space: pre;
    display: block;
}
.ai-msg-bubble .md-code-keyword {
    color: #c678dd;
    font-weight: 600;
}
        /* 代码高亮配色（One Dark 风格，配合深色代码块背景） */
        .md-code-comment {
            color: #7f848e;
            font-style: italic;
        }
        .md-code-string {
            color: #98c379;
        }
        .md-code-number {
            color: #d19a66;
        }
        .md-code-tag {
            color: #e06c75;
        }
        /* 资源库 Markdown 预览容器 */
        .resource-md-view {
            background: var(--panel-bg, #fff);
            color: var(--text, #222);
            padding: 4px 8px;
            font-size: 14px;
            line-height: 1.7;
            word-break: break-word;
        }
        .resource-md-view .md-code-block {
            font-size: 13px;
        }
        .resource-md-view img {
            max-width: 100%;
            border-radius: 6px;
        }

body.light .ai-msg-bubble .md-code-block {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
}
body.light .ai-msg-bubble .md-code-block .md-code {
    color: #24292e;
}
body.light .ai-msg-bubble .md-code-keyword {
    color: #d73a49;
}

/* 列表 */
.ai-msg-bubble .md-ul,
.ai-msg-bubble .md-ol {
    margin: 4px 0 8px 0;
    padding-left: 22px;
}
.ai-msg-bubble .md-ul li,
.ai-msg-bubble .md-ol li {
    margin: 3px 0;
    line-height: 1.6;
}
.ai-msg-bubble .md-task {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ai-msg-bubble .md-task input[type="checkbox"] {
    accent-color: var(--accent);
}

/* 引用 */
.ai-msg-bubble .md-quote {
    border-left: 3px solid #667eea;
    background: rgba(102, 126, 234, 0.08);
    padding: 6px 12px;
    margin: 8px 0;
    border-radius: 0 6px 6px 0;
    color: var(--text-dim);
}

/* 链接 */
.ai-msg-bubble .md-link,
.ai-msg-bubble a {
    color: #667eea;
    text-decoration: none;
    border-bottom: 1px solid rgba(102, 126, 234, 0.4);
}
.ai-msg-bubble a:hover {
    text-decoration: underline;
}

/* 图片 */
.ai-msg-bubble .md-image {
    max-width: 100%;
    border-radius: 6px;
    margin: 6px 0;
}

/* 表格 */
.ai-msg-bubble .md-table-wrap {
    overflow-x: auto;
    margin: 8px 0;
    border-radius: 6px;
    border: 1px solid var(--border);
}
.ai-msg-bubble .md-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12.5px;
}
.ai-msg-bubble .md-table th,
.ai-msg-bubble .md-table td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
}
.ai-msg-bubble .md-table th {
    background: rgba(102, 126, 234, 0.1);
    font-weight: 600;
}

/* 水平线 */
.ai-msg-bubble .md-hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 10px 0;
}

/* 删除线 */
.ai-msg-bubble del {
    color: var(--text-dim);
}

/* 流式输出气泡：代码块渲染时保持宽度 */
.ai-msg-bubble.md-stream-bubble {
    max-width: 100%;
    overflow-x: hidden;
}

/* 输入区 */
.ai-assistant-input {
    border-top: 1px solid var(--border);
    padding: 10px;
    background: var(--panel);
    flex-shrink: 0;
}
.ai-assistant-model-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}
.ai-assistant-check {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.ai-assistant-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--accent);
}
.ai-assistant-model-select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.ai-assistant-thinking-select {
    width: auto;
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.ai-assistant-thinking-select:focus {
    outline: none;
    border-color: #667eea;
}
.ai-assistant-mode-select {
    width: auto;
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.ai-assistant-mode-select:focus {
    outline: none;
    border-color: #667eea;
}
body.light .ai-assistant-mode-select {
    background: #fff;
    border-color: #d0d7de;
    color: #1f2328;
}
.ai-assistant-model-select:focus {
    outline: none;
    border-color: #667eea;
}
.ai-assistant-input textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 13px;
    resize: none;
    box-sizing: border-box;
    font-family: inherit;
}
.ai-assistant-input textarea:focus {
    outline: none;
    border-color: #667eea;
}
.ai-assistant-input-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* ===== 附件预览区（多图上传，参考 SOLOOMO mobile_webui） ===== */
.ai-attachment-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
    background: var(--bg, #f5f6f8);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
}
.ai-attachment-item {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border, #e0e0e0);
    background: var(--panel, #fff);
    flex-shrink: 0;
}
.ai-attachment-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
.ai-attachment-item.ai-attachment-file {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text, #333);
    padding: 4px;
    text-align: center;
    word-break: break-all;
}
.ai-attachment-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-attachment-remove:hover {
    background: rgba(220, 53, 69, 0.9);
}
/* 用户消息气泡内嵌图片缩略图 */
.ai-msg-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.ai-msg-image-thumb {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border, #e0e0e0);
    cursor: zoom-in;
}
/* 图片点击放大查看（lightbox） */
.ai-image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: zoom-out;
}
.ai-image-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* 任务类型选择器（输入框左下方） */
.ai-assistant-task-row {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ai-assistant-task-select {
    background: var(--bg, #f5f6f8);
    color: var(--text, #333);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    max-width: 150px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}
.ai-assistant-task-select:hover,
.ai-assistant-task-select:focus {
    border-color: #667eea;
}
/* 自由操控最大轮数输入框（仅选中"自由操控"时显示） */
.ai-free-control-rounds {
    background: var(--bg, #f5f6f8);
    color: var(--text, #333);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    padding: 5px 6px;
    font-size: 12px;
    width: 56px;
    outline: none;
    transition: border-color 0.2s;
}
.ai-free-control-rounds:hover,
.ai-free-control-rounds:focus {
    border-color: #667eea;
}
/* 系统控制快捷入口行 */
.ai-assistant-quick-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 2px 0 6px;
}
.ai-assistant-quick-label {
    font-size: 11px;
    color: #9ca3af;
    margin-right: 2px;
    flex-shrink: 0;
}
.ai-quick-btn {
    background: var(--bg, #f5f6f8);
    color: var(--text, #555);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.6;
}
.ai-quick-btn:hover {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.08);
}
body.light .ai-quick-btn {
    background: #f5f6f8;
    color: #555;
    border-color: #e0e0e0;
}
body.light .ai-quick-btn:hover {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.08);
}
.ai-assistant-input-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 工具按钮（上传/清空记忆） */
.ai-assistant-input-actions .ai-tool-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #9ca3af;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ai-assistant-input-actions .ai-tool-btn svg {
    display: block;
}
.ai-assistant-input-actions .ai-tool-btn:hover {
    background: #f3f4f6;
    color: #4b5563;
}
body.light .ai-assistant-input-actions .ai-tool-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
}
body.light .ai-assistant-input-actions .ai-tool-btn:hover {
    background: #f3f4f6;
    color: #4b5563;
}

/* 浅色模式适配 */
body.light .ai-assistant-panel { background: #fff; }
body.light .ai-assistant-messages { background: #f5f5f5; }
body.light .ai-msg-assistant .ai-msg-bubble {
    background: #fff;
    border-color: #ddd;
    color: #333;
}
body.light .ai-assistant-input { background: #fff; }
body.light .ai-assistant-input textarea {
    background: #f5f5f5;
    border-color: #ddd;
    color: #333;
}
body.light .ai-assistant-model-select {
    background: #f5f5f5;
    border-color: #ddd;
    color: #333;
}



/* ============================================================
   全局精致化优化（追加覆盖块，保持深色 + 橙色主色调）
   ============================================================ */

/* 1. 全局字体渲染与过渡统一 */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 统一过渡曲线，让所有交互更顺滑 */
.btn,
.tab-btn,
.win-btn,
.node,
.node-header,
.node-delete,
input,
textarea,
select,
.ai-tool-btn {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. 按钮精致化：增加 active 按压态与 focus 可见性 */
.btn {
    border-radius: var(--radius-sm);
    transition: background 0.18s, color 0.18s, border-color 0.18s,
        box-shadow 0.18s, transform 0.1s;
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.btn.primary {
    box-shadow: 0 2px 6px rgba(100, 115, 247, 0.25);
}

.btn.primary:hover {
    box-shadow: 0 4px 12px rgba(100, 115, 247, 0.35);
}

.btn.primary:active:not(:disabled) {
    box-shadow: 0 1px 3px rgba(100, 115, 247, 0.3);
}

/* 3. 输入框 focus 态统一发光 */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(100, 115, 247, 0.18);
}

/* 4. 选项卡精致化 */
.tab-btn {
    position: relative;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.tab-btn.active {
    font-weight: 600;
    background: linear-gradient(180deg, rgba(100, 115, 247, 0.12), rgba(100, 115, 247, 0.04));
}

.tab-btn.active::after {
    /* content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px; */
    /* background: var(--accent); */
    /* border-radius: 2px; */
}

/* 5. 节点卡片精致化：阴影层级 + 头部渐变 + 圆角 */
.node {
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.node:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.node.selected {
    box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.5);
}

/* 节点头部渐变，增加立体感 */
.node-header {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.08));
    letter-spacing: 0.3px;
}

.node.node-browser .node-header {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.1));
}

.node.node-general .node-header {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.1));
}

.node.node-ai .node-header {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.1));
}

.node.node-mobile .node-header {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.08));
}

/* 节点删除按钮 hover 更柔和 */
.node-delete:hover {
    background: rgba(241, 76, 76, 0.7);
    transform: scale(1.1);
}

/* 6. 工具栏精致化 */
.toolbar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.toolbar .logo {
    text-shadow: 0 1px 2px rgba(100, 115, 247, 0.3);
}

/* 7. 面板阴影与分隔 */
.left-panel {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

/* 8. 滚动条 hover 更明显 */
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent);
}

/* 9. 统计徽章精致化 */
.stats {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

/* 10. 浅色模式下的节点阴影与渐变适配 */
body.light .node {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
}

body.light .node:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

body.light .node.selected {
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.3),
        0 6px 18px rgba(0, 0, 0, 0.15);
}

body.light .toolbar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.light .left-panel {
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
}

/* ===== 图标系统（emoji → Font Awesome 替换） ===== */
.emoji-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.emoji-fa {
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.125em;
}
/* 按钮内的图标与文字间距 */
.btn .emoji-icon-wrap,
.tab-btn .emoji-icon-wrap {
    margin-right: 4px;
}

/* ==================== AI 助手插话模式（从 soloomo 移植） ==================== */
/* AI 运行中输入框切换为插话模式：高亮边框 + 提示色，用户可随时补充信息 */
#aiAssistantInput.interject-mode {
    border-color: #ff9f43 !important;
    box-shadow: 0 0 0 2px rgba(255, 159, 67, 0.25) !important;
    background-color: rgba(255, 159, 67, 0.06) !important;
    transition: all 0.3s ease;
}
#aiAssistantInput.interject-mode::placeholder {
    color: #e67e22;
    opacity: 0.9;
}

/* ==================== Skills 技能管理（设置面板） ==================== */
/* 技能卡片描述/触发文字 */
.skill-card-desc {
    font-size: 12px;
    color: var(--text-dim, #999);
    margin-top: 4px;
    line-height: 1.5;
    word-break: break-all;
}
.skill-card-triggers {
    font-size: 11px;
    color: #667eea;
    margin-top: 4px;
    word-break: break-all;
}
/* 启用/禁用开关标签 */
.skill-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-dim, #999);
    user-select: none;
}
.skill-toggle-label input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--accent);
}

        /* ==================== 资源库（资源管理系统） ==================== */
        .resource-panel {
            position: fixed;
            top: 40px;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg);
            z-index: 850;
            flex-direction: column;
            display: none;
            overflow: hidden;
        }
        /* 资源库加载遮罩：覆盖面板内容区，居中 Spinner + 文案 */
        .resource-loading {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(2px);
            z-index: 900;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            pointer-events: all;
        }
        body.light .resource-loading {
            background: rgba(255, 255, 255, 0.55);
        }
        .resource-loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid rgba(255, 255, 255, 0.25);
            border-top-color: var(--accent, #4a7dff);
            border-radius: 50%;
            animation: resourceSpin 0.8s linear infinite;
        }
        body.light .resource-loading-spinner {
            border-color: rgba(0, 0, 0, 0.15);
            border-top-color: var(--accent, #4a7dff);
        }
        .resource-loading-text {
            font-size: 13px;
            color: var(--text, #ccc);
        }
        @keyframes resourceSpin {
            to { transform: rotate(360deg); }
        }
        /* 资源库拖拽框选（橡皮筋选择）选框 */
        .resource-rubber-band {
            position: fixed;
            background: rgba(74, 125, 255, 0.2);
            border: 1px solid rgba(74, 125, 255, 0.8);
            z-index: 950;
            display: none;
            pointer-events: none; /* 不阻挡鼠标事件 */
        }
        /* 框选进行中：禁用网格文本选中，避免拖出原生蓝色选区 */
        .resource-grid.rubber-selecting {
            user-select: none;
            -webkit-user-select: none;
        }
        .resource-panel[style*="display: flex"] {
            display: flex;
        }
        .resource-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 20px;
            background: var(--panel);
            border-bottom: 1px solid var(--border);
        }
        .resource-header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .resource-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
        }
        .resource-count {
            font-size: 12px;
            color: var(--text-dim);
        }
        .resource-header-actions {
            display: flex;
            gap: 8px;
        }
        /* 关闭按钮：与数据库管理器 .dbmgr-close 统一样式（无边框透明，hover 变色），位于右上角 */
        .resource-close {
            background: none;
            border: none;
            color: var(--text);
            font-size: 14px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            margin-left: 4px;
        }
        .resource-close:hover {
            background: var(--button-hover);
        }
        .resource-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            gap: 12px;
            background: var(--panel-light);
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
        }
        .resource-filters {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        .resource-filter-btn {
            padding: 5px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--button-bg);
            color: var(--text);
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }
        .resource-filter-btn:hover {
            background: var(--button-hover);
        }
        .resource-filter-btn.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .resource-toolbar-right {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .resource-search {
            padding: 5px 10px;
            border: 1px solid var(--input-border);
            border-radius: var(--radius-sm);
            background: var(--input-bg);
            color: var(--text);
            font-size: 12px;
            width: 220px;
        }
        .resource-sort {
            padding: 5px 8px;
            border: 1px solid var(--input-border);
            border-radius: var(--radius-sm);
            background: var(--input-bg);
            color: var(--text);
            font-size: 12px;
        }
        .resource-dirs-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 20px;
            background: var(--panel);
            border-bottom: 1px solid var(--border);
            font-size: 12px;
            color: var(--text-dim);
            flex-wrap: wrap;
        }
        .resource-dirs-label {
            font-weight: 600;
            color: var(--text);
        }
        .resource-dirs-list {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        /* 当前文件路径显示条（悬停缩略图时同步显示完整路径） */
        .resource-path-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 20px;
            background: var(--panel-light);
            border-bottom: 1px solid var(--border);
            font-size: 12px;
            color: var(--text-dim);
            min-height: 28px;
        }
        .resource-path-label {
            font-weight: 600;
            color: var(--text);
            flex-shrink: 0;
        }
        .resource-path-value {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
            color: var(--text-dim);
            font-family: 'Consolas', 'Menlo', monospace;
            font-size: 11px;
        }
        .resource-path-value.active {
            color: var(--accent);
        }
        /* 悬停缩略图显示的浮动路径 tooltip */
        .resource-hover-tip {
            position: fixed;
            z-index: 9999;
            max-width: 520px;
            padding: 6px 10px;
            background: rgba(0, 0, 0, 0.85);
            color: #fff;
            border-radius: 6px;
            font-size: 11px;
            font-family: 'Consolas', 'Menlo', monospace;
            line-height: 1.4;
            pointer-events: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .resource-dir-chip {
            padding: 2px 8px;
            background: var(--button-bg);
            border-radius: 10px;
            font-size: 11px;
            color: var(--text);
            cursor: default;
        }
        .resource-grid {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 16px;
            align-content: start;
        }
        .resource-card {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
            position: relative;
            
            height:130px
        }
        .resource-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            border-color: var(--accent);
        }
        /* 多选选中态 */
        .resource-card.selected {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent);
        }
        /* 多选复选框（左上角，hover 显示） */
        .resource-card-check {
            position: absolute;
            top: 6px;
            left: 6px;
            z-index: 10;
            opacity: 0;
            transition: opacity 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .resource-card:hover .resource-card-check,
        .resource-card.selected .resource-card-check {
            opacity: 1;
        }
        .resource-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--accent);
        }
        /* 批量操作栏 */
        .resource-batchbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 20px;
            background: var(--accent);
            color: #fff;
            border-bottom: 1px solid var(--border);
            gap: 12px;
            flex-wrap: wrap;
        }
        .resource-batch-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .resource-select-all {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
        }
        .resource-select-all input {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: #fff;
        }
        .resource-batch-count {
            font-size: 13px;
            font-weight: 600;
        }
        .resource-batch-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }
        .resource-batch-actions .btn {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #fff;
            font-size: 12px;
            padding: 5px 12px;
        }
        .resource-batch-actions .btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        .resource-batch-actions .btn.danger:hover {
            background: var(--red);
            border-color: var(--red);
        }
        .resource-card-thumb {
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--panel-light);
            position: relative;
            overflow: hidden;
        }
        .resource-thumb-icon {
            font-size: 40px;
            color: var(--text);
            text-align: center;
        }
        .resource-thumb-icon.code {
            font-size: 14px;
            color: var(--green);
            background: rgba(78, 201, 176, 0.15);
            padding: 6px 10px;
            border-radius: 4px;
            font-family: monospace;
            text-transform: uppercase;
        }
        /* 缩略图内叠加的文件名（底部渐变遮罩+白字） */
        .resource-thumb-name {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 14px 8px 5px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
            color: #fff;
            font-size: 11px;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
            pointer-events: none;
        }
        /* ===== 视频卡片：截图 + 悬浮自动播放 ===== */
        /* 内嵌 video 元素：默认透明占位（保持参与渲染强制浏览器解码画面，截图就绪前不显示黑块），悬浮播放时显示 */
        .resource-card-thumb video.resource-card-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            visibility: hidden;
            pointer-events: none; /* 不拦截卡片点击（预览/多选） */
        }
        /* 悬浮播放中：显示 video、隐藏截图背景层 */
        .resource-card-thumb.playing video.resource-card-video {
            opacity: 1;
            visibility: visible;
        }
        .resource-card-thumb.playing {
            background-image: none !important; /* 播放时隐藏截图背景 */
        }
        /* 截帧失败/加载中的降级图标 */
        .resource-thumb-icon.video-fallback {
            position: absolute;
            pointer-events: none;
        }
        /* 右上角 ▶ 播放角标（提示可悬浮播放），悬浮时隐藏 */
        .resource-video-badge {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 10px;
            color: #fff;
            background: rgba(0, 0, 0, 0.55);
            border-radius: 50%;
            pointer-events: none;
            z-index: 2;
        }
        .resource-card-thumb.playing .resource-video-badge {
            display: none;
        }
        /* 目录选择器（浏览目录弹窗） */
        .dirpicker-row {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 13px;
            border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
            transition: background 0.12s;
            word-break: break-all;
        }
        .dirpicker-row:hover {
            background: rgba(255, 255, 255, 0.06);
        }
        /* 加载更多按钮 */
        .resource-load-more {
            grid-column: 1 / -1;
            text-align: center;
            padding: 14px;
            margin: 8px 0;
            border: 1px dashed var(--border);
            border-radius: 8px;
            color: var(--text-dim);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .resource-load-more:hover {
            color: var(--accent);
            border-color: var(--accent);
            background: rgba(255, 255, 255, 0.03);
        }
        .resource-card-info {
            padding: 8px 10px;
            border-top: 1px solid var(--border);
            background: var(--panel);
        }
        .resource-card-name {
            font-size: 12px;
            font-weight: 500;
            color: var(--text);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all;
            min-height: 2.8em;
        }
        .resource-card:hover .resource-card-name {
            color: var(--accent);
        }
        .resource-card-meta {
            display: flex;
            gap: 8px;
            font-size: 10px;
            color: var(--text-dim);
            margin-top: 4px;
            align-items: center;
        }
        .resource-card-actions {
            position: absolute;
            top: 6px;
            right: 6px;
            display: flex;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .resource-card:hover .resource-card-actions {
            opacity: 1;
        }
        .resource-card-btn {
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .resource-card-btn:hover {
            background: var(--accent);
        }
        .resource-card-btn.danger:hover {
            background: var(--red);
        }
        .resource-empty {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-dim);
            font-size: 14px;
            padding: 40px;
            text-align: center;
        }
        .resource-empty-hint {
            font-size: 12px;
            color: var(--text-dim);
            margin-top: 8px;
            opacity: 0.7;
        }

        /* 资源预览弹窗 */
        /* ==================== AI 页面弹窗 ==================== */
        .ai-page-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.75);
            z-index: 1100;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }
        .ai-page-dialog {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
        }
        .ai-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: var(--panel-light);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .ai-page-title {
            font-size: 14px;
            color: var(--text);
            font-weight: 600;
            word-break: break-all;
            margin-right: 12px;
        }
        .ai-page-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }
        .ai-page-btn {
            padding: 4px 9px;
            font-size: 13px;
            line-height: 1;
        }
        .ai-page-frame {
            flex: 1;
            width: 100%;
            border: none;
            background: #fff;
        }

        .resource-preview-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
        }
        .resource-preview-dialog {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 10px;
            width: 100%;
            max-width: 1000px;
            height: 100%;
            max-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .resource-preview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px;
            background: var(--panel-light);
            border-bottom: 1px solid var(--border);
        }
        .resource-preview-name {
            font-size: 14px;
            color: var(--text);
            font-weight: 600;
            word-break: break-all;
            margin-right: 12px;
        }
        .resource-preview-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }
        .resource-preview-body {
            flex: 1;
            overflow: auto;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1a1a;
        }
        .resource-preview-loading {
            color: var(--text-dim);
            font-size: 14px;
        }
        .resource-preview-error {
            color: var(--red);
            font-size: 14px;
            text-align: center;
        }
        .resource-code-view {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 16px;
            border-radius: 6px;
            font-family: 'Consolas', 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.6;
            overflow: auto;
            max-width: 100%;
            width: 100%;
            height: 100%;
            margin: 0;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .resource-iframe-view {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 4px;
            background: #fff;
        }
        .resource-preview-media {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .resource-preview-media img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 4px;
        }
        .resource-preview-media video {
            max-width: 100%;
            max-height: 100%;
            border-radius: 4px;
        }
        .resource-preview-media.audio {
            flex-direction: column;
            gap: 16px;
        }
        .resource-preview-audio-icon {
            font-size: 64px;
            text-align: center;
            color: var(--green);
        }
        body.light .resource-preview-body {
            background: #f0f0f0;
        }
        body.light .resource-code-view {
            background: #f5f5f5;
            color: #333;
        }

/* ==================== 资源库编辑器（代码/CSV 编辑） ==================== */
/* 编辑工具栏（保存/编码/取消） */
.resource-edit-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--panel-light);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.resource-edit-toolbar .btn {
    font-size: 12px;
    padding: 4px 12px;
}
.resource-edit-encoding {
    font-size: 11px;
    color: var(--text-dim);
    font-family: 'Consolas', monospace;
    background: var(--button-bg);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.resource-edit-status {
    font-size: 11px;
    color: var(--text-dim);
    margin-left: auto;
}
.resource-edit-status.dirty {
    color: var(--accent);
    font-weight: 600;
}
.resource-edit-status.saved {
    color: var(--green);
}

/* 代码编辑器（textarea 轻量实现：Tab 缩进 + Ctrl+S 保存） */
.resource-code-editor {
    flex: 1;
    width: 100%;
    min-height: 300px;
    background: #1e1e1e;
    color: #d4d4d4;
    border: none;
    outline: none;
    padding: 16px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: none;
    tab-size: 4;
    white-space: pre;
    overflow: auto;
    box-sizing: border-box;
}
body.light .resource-code-editor {
    background: #fafafa;
    color: #333;
}

/* CSV 表格编辑器 */
.resource-csv-wrap {
    flex: 1;
    overflow: auto;
    width: 100%;
    height: 100%;
    background: var(--panel);
}
.resource-csv-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 12.5px;
    font-family: 'Consolas', 'Menlo', monospace;
}
.resource-csv-table th,
.resource-csv-table td {
    border: 1px solid var(--border);
    padding: 0;
    min-width: 90px;
    max-width: 320px;
    position: relative;
}
.resource-csv-table th {
    background: var(--panel-light);
    font-weight: 600;
    padding: 6px 8px;
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    white-space: nowrap;
}
/* 行号列 */
.resource-csv-table td.row-num,
.resource-csv-table th.row-num {
    min-width: 44px;
    max-width: 44px;
    width: 44px;
    text-align: center;
    color: var(--text-dim);
    background: var(--panel-light);
    position: sticky;
    left: 0;
    z-index: 1;
    font-size: 11px;
    user-select: none;
    padding: 4px;
}
.resource-csv-table th.row-num {
    z-index: 3;
}
/* 表头单元格输入 */
.resource-csv-table th input.header-input {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    padding: 5px 6px;
    outline: none;
    box-sizing: border-box;
}
/* 数据单元格输入 */
.resource-csv-table td input.cell-input {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 12.5px;
    font-family: inherit;
    padding: 5px 6px;
    outline: none;
    box-sizing: border-box;
}
.resource-csv-table td input.cell-input:focus,
.resource-csv-table th input.header-input:focus {
    background: rgba(100, 115, 247, 0.12);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.resource-csv-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}
.resource-csv-table tr:hover td.row-num {
    background: var(--panel-light);
}
/* CSV 操作按钮列 */
.resource-csv-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--panel) !important;
    border-left: 2px solid var(--border);
}
.resource-csv-row-del,
.resource-csv-col-del {
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0.4;
    transition: all 0.15s;
    line-height: 1;
}
.resource-csv-row-del:hover,
.resource-csv-col-del:hover {
    opacity: 1;
    background: var(--red);
    color: #fff;
}
.resource-csv-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--panel-light);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.resource-csv-toolbar .btn {
    font-size: 12px;
    padding: 3px 10px;
}
.resource-csv-info {
    font-size: 11px;
    color: var(--text-dim);
    margin-left: auto;
}
/* CSV 空表格提示 */
.resource-csv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-dim);
    font-size: 14px;
    gap: 12px;
}
/* 编辑态预览弹窗布局：body 改为纵向排列 */
.resource-preview-body.editing {
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}

/* CSV 只读预览模式（非编辑态）：撑满并左对齐 */
.resource-preview-body:has(.resource-csv-preview) {
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
}
.resource-csv-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.resource-csv-preview .resource-csv-table {
    min-width: 100%;
}
.resource-csv-preview td {
    padding: 5px 8px;
    min-width: 90px;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.resource-csv-preview th {
    padding: 6px 8px;
}
.resource-csv-preview tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* ===== 节点右键菜单 ===== */
.node-context-menu {
    position: fixed;
    z-index: 99999;
    min-width: 160px;
    background: var(--bg, #ffffff);
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    padding: 5px;
    user-select: none;
    -webkit-user-select: none;
    animation: nodeContextMenuIn 0.12s ease-out;
}
@keyframes nodeContextMenuIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.node-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text, #333);
    white-space: nowrap;
    transition: background 0.12s;
}
.node-context-menu-item:hover {
    background: rgba(102, 126, 234, 0.12);
}
.node-context-menu-item.danger:hover {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
}
.node-context-menu-icon {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
}
.node-context-menu-divider {
    height: 1px;
    background: var(--border, #ddd);
    margin: 4px 8px;
}

/* ==================== 文件预览弹窗（打开文件节点） ==================== */
/* ★ 全部使用项目真实主题变量（--text/--border/--accent 等），背景与文字跟随主题，深浅主题下均高对比 */
/* 文本内容展示 */
.fp-text {
    margin: 0;
    padding: 16px 20px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text, #cccccc);
}
/* Markdown 渲染容器 */
.fp-md {
    padding: 16px 24px;
    line-height: 1.7;
    font-size: 14px;
    color: var(--text, #cccccc);
    max-width: 900px;
    margin: 0 auto;
}
.fp-md .fp-h { margin: 18px 0 10px; font-weight: 700; color: var(--text, #cccccc); }
.fp-md .fp-h:first-child { margin-top: 0; }
.fp-md .fp-p { margin: 8px 0; color: var(--text, #cccccc); }
.fp-md .fp-ul { margin: 8px 0; padding-left: 24px; color: var(--text, #cccccc); }
.fp-md .fp-ul li { margin: 4px 0; }
.fp-md .fp-quote {
    margin: 10px 0;
    padding: 8px 14px;
    border-left: 3px solid var(--accent-light, #6e8aed);
    background: rgba(110, 138, 237, 0.12);
    border-radius: 0 6px 6px 0;
    color: var(--text, #cccccc);
}
.fp-md .fp-hr { border: none; border-top: 1px solid var(--border, #3e3e42); margin: 16px 0; }
.fp-md code {
    background: var(--panel-light, #2d2d30);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: var(--orange, #ce9178);
}
.fp-md .fp-code {
    background: var(--panel-light, #2d2d30);
    padding: 12px 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.5;
    margin: 10px 0;
    white-space: pre-wrap;
    color: var(--text, #cccccc);
    border: 1px solid var(--border, #3e3e42);
}
.fp-md a { color: var(--accent-light, #6e8aed); }
/* iframe（HTML/PDF） */
.fp-frame {
    width: 100%;
    height: 100%;
    min-height: 60vh;
    border: none;
    background: #fff;
}
/* 媒体居中容器 */
.fp-media-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 20px;
}
.fp-img {
    max-width: 95%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.fp-video {
    max-width: 95%;
    max-height: 80vh;
    border-radius: 8px;
    background: #000;
}
/* ★ 弹窗关闭按钮（X 图标） */
.fp-close-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim, #9d9d9d);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.fp-close-btn:hover {
    background: var(--panel-light, #2d2d30);
    color: var(--text, #cccccc);
}
/* ★ highlight.js 代码高亮配色（跟随项目深浅主题） */
/* --- 深色主题（默认） --- */
.hljs { color: var(--text, #cccccc); background: transparent; }
.hljs-comment, .hljs-quote { color: #6a9955; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-name { color: #c586c0; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: #ce9178; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr { color: #b5cea8; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #dcdcaa; }
.hljs-type, .hljs-class .hljs-title, .hljs-built_in, .hljs-builtin-name { color: #4ec9b0; }
.hljs-attr, .hljs-property, .hljs-selector-class, .hljs-selector-id { color: #9cdcfe; }
.hljs-meta, .hljs-meta .hljs-keyword { color: #569cd6; }
.hljs-deletion { color: #f48771; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
/* --- 浅色主题（body.light / html.light 时覆盖） --- */
body.light .hljs-comment, body.light .hljs-quote { color: #008000; }
body.light .hljs-keyword, body.light .hljs-selector-tag, body.light .hljs-literal, body.light .hljs-doctag, body.light .hljs-name { color: #af00db; }
body.light .hljs-string, body.light .hljs-regexp, body.light .hljs-addition, body.light .hljs-attribute, body.light .hljs-meta .hljs-string { color: #a31515; }
body.light .hljs-number, body.light .hljs-symbol, body.light .hljs-bullet, body.light .hljs-variable, body.light .hljs-template-variable, body.light .hljs-link, body.light .hljs-selector-attr { color: #098658; }
body.light .hljs-title, body.light .hljs-title.function_, body.light .hljs-section { color: #795e26; }
body.light .hljs-type, body.light .hljs-class .hljs-title, body.light .hljs-built_in, body.light .hljs-builtin-name { color: #267f99; }
body.light .hljs-attr, body.light .hljs-property, body.light .hljs-selector-class, body.light .hljs-selector-id { color: #001080; }
body.light .hljs-meta, body.light .hljs-meta .hljs-keyword { color: #0000ff; }
body.light .hljs-deletion { color: #cd3131; }

/* 空状态/提示 */
.fp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    font-size: 15px;
    color: var(--text-dim, #9d9d9d);
    text-align: center;
    padding: 20px;
}
/* ★ 返回上一级行（文件夹列表顶部） */
.fp-back-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--accent-light, #6e8aed);
    font-weight: 600;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border, #3e3e42);
    padding-bottom: 9px;
}
.fp-back-row:hover {
    background: var(--panel-light, #2d2d30);
}
/* ★ 文件列表选中项：强调色背景 + 白色文字（深浅主题下均清晰） */
.fp-list-row.fp-active {
    background: var(--accent, #556fcd);
    color: #ffffff;
}
.fp-list-row.fp-active span {
    color: #ffffff;
}
/* ★ 表格（csv/tsv/excel/word表格共用） */
.fp-table-wrap {
    overflow: auto;
    padding: 12px 16px;
}
.fp-table {
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text, #cccccc);
    min-width: 100%;
}
.fp-table th,
.fp-table td {
    border: 1px solid var(--border, #3e3e42);
    padding: 6px 12px;
    text-align: left;
    white-space: nowrap;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-table .fp-thead th {
    background: var(--panel-light, #2d2d30);
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 1;
}
.fp-table .fp-even td {
    background: rgba(128, 128, 128, 0.06);
}
.fp-table tr:hover td {
    background: rgba(110, 138, 237, 0.1);
}
/* ★ Word 文档容器 */
.fp-word {
    padding: 16px 24px;
    line-height: 1.7;
    font-size: 14px;
    color: var(--text, #cccccc);
    max-width: 900px;
    margin: 0 auto;
}
.fp-word .fp-h { margin: 16px 0 8px; font-weight: 700; color: var(--text, #cccccc); }
.fp-word .fp-p { margin: 8px 0; }
.fp-word .fp-table-wrap { padding: 10px 0; }
/* ★ Word 内嵌图片 */
.fp-word-img {
    margin: 12px 0;
    text-align: center;
}
.fp-word-img img {
    max-width: 100%;
    max-height: 480px;
    border-radius: 4px;
    border: 1px solid var(--border, #3e3e42);
}
/* ★ Excel Sheet 标签栏 */
.fp-sheet-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--border, #3e3e42);
    flex-shrink: 0;
    overflow-x: auto;
}
.fp-sheet-tab {
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    color: var(--text-dim, #9d9d9d);
    white-space: nowrap;
    border: 1px solid transparent;
    border-bottom: none;
}
.fp-sheet-tab:hover {
    color: var(--text, #cccccc);
    background: var(--panel-light, #2d2d30);
}
.fp-sheet-tab.fp-sheet-active {
    color: var(--text, #cccccc);
    background: var(--panel-light, #2d2d30);
    border-color: var(--border, #3e3e42);
    font-weight: 600;
}
.fp-excel-host {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ==================== 数据库管理器（SQLite 管理器） ==================== */
/* 全部使用主题已定义变量（--bg/--panel/--panel-light/--border/--text/--text-dim/--accent/--button-bg/--input-bg），
   深浅色模式自动适配，无需单独 body.light 覆盖 */
/* 数据库管理器全屏面板（与资源库 .resource-panel 排版一致：贴顶全屏、无遮罩）。
   仅作用于 .dbmgr-fullscreen，不影响连接管理器等复用 .dbmgr-overlay 的居中弹窗 */
.dbmgr-overlay.dbmgr-fullscreen {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 850; /* 与资源库面板一致，低于标题栏(1000)，保证菜单栏可交互 */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none;
}
.dbmgr-fullscreen .dbmgr-modal {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 40px);
    background: var(--panel, #1e1e1e);
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
}
.dbmgr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dbmgr-modal {
    width: 98vw;
    height: 96vh;
    background: var(--panel, #1e1e1e);
    border: 1px solid var(--border, #3e3e42);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.5));
}
.dbmgr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border, #3e3e42);
    background: var(--panel-light, #2d2d30);
}
.dbmgr-title { font-weight: 600; font-size: 14px; }
.dbmgr-close {
    background: none; border: none; color: var(--text, #ccc);
    font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.dbmgr-close:hover { background: var(--button-hover, #3e3e42); }
.dbmgr-body {
    flex: 1;
    display: flex;
    min-height: 0;
}
/* 侧边栏：数据库文件列表 */
.dbmgr-sidebar {
    width: 220px;
    border-right: 1px solid var(--border, #3e3e42);
    display: flex;
    flex-direction: column;
    background: var(--panel, #252526);
}
.dbmgr-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim, #999);
    border-bottom: 1px solid var(--border, #3e3e42);
}
.dbmgr-refresh {
    background: none; border: none; color: var(--text, #ccc);
    cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px;
}
.dbmgr-refresh:hover { background: var(--button-hover, #3e3e42); }
.dbmgr-newdb {
    background: none; border: none; color: var(--text, #ccc);
    cursor: pointer; font-size: 14px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
}
.dbmgr-newdb:hover { background: var(--button-hover, #3e3e42); color: var(--accent, #4fc3f7); }
/* 标题栏按钮组靠右 */
.dbmgr-side-head-btns { margin-left: auto; display: inline-flex; gap: 2px; }
/* 新建表弹窗：列定义表格（与"修改结构"界面表格风格一致） */
.dbmgr-newtbl-table { margin-bottom: 8px; }
.dbmgr-newtbl-table th { cursor: default; text-align: center; }
.dbmgr-newtbl-table td { padding: 3px 6px; }
.dbmgr-newtbl-table .dbmgr-cd-name {
    width: 100%; box-sizing: border-box;
    padding: 4px 8px;
    background: var(--input-bg, #3c3c3c);
    border: 1px solid var(--input-border, #3e3e42);
    border-radius: 4px;
    color: var(--text, #ccc);
    font-size: 12px;
}
.dbmgr-newtbl-table .dbmgr-cd-type {
    width: 96px;
    padding: 4px 6px;
    background: var(--input-bg, #3c3c3c);
    border: 1px solid var(--input-border, #3e3e42);
    border-radius: 4px;
    color: var(--text, #ccc);
    font-size: 12px;
}
.dbmgr-newtbl-table td.dbmgr-cd-check { text-align: center; }
.dbmgr-newtbl-table td.dbmgr-cd-check input[type="checkbox"] { cursor: pointer; accent-color: var(--accent, #4fc3f7); }
.dbmgr-cd-del { padding: 2px 8px; font-size: 12px; }
/* 侧栏树形：展开箭头 */
.dbmgr-arrow {
    display: inline-block; width: 12px; text-align: center;
    color: var(--text-dim, #888); font-size: 10px;
    transition: transform 0.15s ease; flex-shrink: 0;
}
.dbmgr-arrow.open { transform: rotate(90deg); }
/* 侧栏树形：表列表（缩进） */
.dbmgr-table-list { padding-left: 22px; }
.dbmgr-tree-table {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 8px; margin: 1px 0; border-radius: 4px;
    font-size: 12px; color: var(--text, #ccc); cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dbmgr-tree-table:hover { background: var(--button-hover, #3e3e42); }
.dbmgr-tree-table.active { color: var(--accent-light);font-weight: bold; }
.dbmgr-tree-table .dbmgr-tbl-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbmgr-tree-table .dbmgr-realname { font-size: 10px; }
.dbmgr-tree-empty { padding: 3px 8px; font-size: 11px; color: var(--text-dim, #888); }
.dbmgr-file-list { flex: 1; overflow-y: auto; padding: 4px; }
.dbmgr-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text, #ccc);
}
.dbmgr-file:hover { background: var(--button-hover, #3e3e42); }
.dbmgr-file.active {  color: var(--accent-light);font-weight: bold; }
.dbmgr-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbmgr-file-size { color: var(--text-dim, #888); font-size: 11px; }
/* 别名显示：上行别名加粗，下行真名小号灰色 */

.dbmgr-realname { display: block; font-size: 10px; font-weight: 400; color: var(--text-dim, #888); opacity: 0.85; }
th.dbmgr-col .dbmgr-realname { display: block; line-height: 1.2; }
th.dbmgr-col .dbmgr-alias { display: block; line-height: 1.2; }
.dbmgr-side-empty { padding: 16px 10px; font-size: 12px; color: var(--text-dim, #888); text-align: center; }
/* 主区 */
.dbmgr-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dbmgr-table-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, #3e3e42);
    flex-wrap: wrap;
}
.dbmgr-table-name { font-weight: 600; font-size: 13px; color: var(--text, #ccc); }
.dbmgr-table-info { color: var(--text-dim, #888); font-size: 12px; }
.dbmgr-flex { flex: 1; }
.dbmgr-search {
    width: 160px;
    padding: 4px 8px;
    background: var(--input-bg, #3c3c3c);
    border: 1px solid var(--input-border, #3e3e42);
    border-radius: 4px;
    color: var(--text, #ccc);
    font-size: 12px;
}
.dbmgr-btn {
    padding: 0px 10px;
    height: 24px;
    background: var(--button-bg, #3c3c3c);
    border: 1px solid var(--border, #3e3e42);
    border-radius: 4px;
    color: var(--text, #ccc);
    font-size: 12px;
    cursor: pointer;
}
.dbmgr-btn:hover { background: var(--button-hover, #4a4a4a); }
.dbmgr-btn:disabled { opacity: 0.4; cursor: default; }
.dbmgr-btn.primary { background: var(--accent, #0e639c); border-color: var(--accent, #0e639c); color: #fff; }
.dbmgr-btn.primary:hover { background: var(--accent-hover, #1177bb); }
.dbmgr-btn.danger { color: var(--red, #f48771); }
.dbmgr-btn.danger:hover { background: rgba(229, 20, 0, 0.12); }
/* 数据网格 */
.dbmgr-grid-wrap { flex: 1; overflow: auto; position: relative; }
.dbmgr-grid { min-width: 100%; }
.dbmgr-table {
    border-collapse: collapse;
    font-size: 12px;
    width: max-content;
    min-width: 100%;
}
.dbmgr-table th, .dbmgr-table td {
    border: 1px solid var(--border, #3e3e42);
    padding: 5px 8px;
    text-align: left;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text, #ccc);
}
.dbmgr-table th {
    background: var(--panel-light, #2d2d30);
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
}
.dbmgr-table th:hover { background: var(--button-hover, #3e3e42); }
.dbmgr-table tbody tr:hover { background: var(--panel-light, rgba(255,255,255,0.04)); }
.dbmgr-cell { cursor: cell; position: relative; }
.dbmgr-null { color: var(--text-dim, #777); font-style: italic; }
/* 单元格编辑输入框：绝对定位悬浮覆盖单元格，不参与表格布局，列宽零变化 */
.dbmgr-cell-input {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--input-bg, #3c3c3c);
    border: 1px solid var(--accent, #0e639c);
    border-radius: 3px;
    color: var(--text, #ccc);
    font-size: 12px;
    padding: 2px 4px;
    box-sizing: border-box;
    margin: 0;
    outline: none;
    z-index: 2;
}
.dbmgr-row-actions { width: 36px; text-align: center; }
/* 行选择 checkbox */
.dbmgr-row-sel, .dbmgr-sel-all { cursor: pointer; vertical-align: middle; }
.dbmgr-row-sel { accent-color: var(--accent, #4fc3f7); }
.dbmgr-sel-all { accent-color: var(--accent, #4fc3f7); }
/* 批量操作按钮 */
.dbmgr-batch-del { color: #e57373; border-color: #e57373; }
.dbmgr-batch-del:hover { background: rgba(229, 115, 115, 0.12); }
.dbmgr-batch-null { color: #ffb74d; border-color: #ffb74d; }
.dbmgr-batch-null:hover { background: rgba(255, 183, 77, 0.12); }
/* 批量置空弹窗列选择行 */
.dbmgr-check-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0; cursor: pointer; font-size: 13px;
}
.dbmgr-check-row input { accent-color: var(--accent, #4fc3f7); cursor: pointer; }
.dbmgr-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim, #888);
    font-size: 13px;
}
/* 分页 */
.dbmgr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border-top: 1px solid var(--border, #3e3e42);
}
.dbmgr-page-info { font-size: 12px; color: var(--text-dim, #888); min-width: 60px; text-align: center; }
/* 数字页码 */
.dbmgr-page-numbers {
    display: flex;
    align-items: center;
    gap: 3px;
}
.dbmgr-page-num { min-width: 28px; text-align: center; padding: 4px 6px; }
.dbmgr-page-num.active {
    background: var(--accent, #0e639c);
    border-color: var(--accent, #0e639c);
    color: #fff;
    font-weight: 600;
}
.dbmgr-page-ellipsis { color: var(--text-dim, #888); padding: 0 2px; font-size: 12px; }
.dbmgr-page-size {
    padding: 4px 6px;
    background: var(--input-bg, #3c3c3c);
    border: 1px solid var(--border, #3e3e42);
    border-radius: 4px;
    color: var(--text, #ccc);
    font-size: 12px;
    cursor: pointer;
}

/* ==================== 右键菜单 ==================== */
.dbmgr-context-menu {
    position: fixed;
    z-index: 10000;
    min-width: 120px;
    background: var(--panel, #252526);
    border: 1px solid var(--border, #3e3e42);
    border-radius: 6px;
    box-shadow: var(--shadow, 0 4px 16px rgba(0, 0, 0, 0.4));
    padding: 4px 0;
}
.dbmgr-ctx-item {
    padding: 6px 16px;
    font-size: 12px;
    color: var(--text, #ccc);
    cursor: pointer;
    white-space: nowrap;
}
.dbmgr-ctx-item:hover { background: var(--button-hover, #37373d); }
.dbmgr-ctx-item.danger { color: var(--red, #f48771); }
.dbmgr-ctx-item.disabled {
    color: var(--text-dim, #666);
    cursor: not-allowed;
    opacity: 0.5;
}
.dbmgr-ctx-item.disabled:hover { background: transparent; }
/* SQL 面板 */
.dbmgr-sql-panel {
    border-top: 2px solid var(--accent, #0e639c);
    display: flex;
    flex-direction: column;
    max-height: 45%;
    background: var(--panel, #252526);
}
.dbmgr-sql-input {
    height: 90px;
    height: 100%;
    resize: vertical;
    background: var(--input-bg, #1e1e1e);
    border: none;
    border-bottom: 1px solid var(--border, #3e3e42);
    color: var(--text, #ccc);
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    padding: 8px 10px;
    outline: none;
}
.dbmgr-sql-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}
.dbmgr-sql-status { font-size: 12px; color: var(--text-dim, #888); }
.dbmgr-sql-result { flex: 1; overflow: auto; padding: 0 10px 10px; }
.dbmgr-sql-block { margin-top: 8px; }
.dbmgr-sql-block-head { font-size: 12px; color: var(--text-dim, #888); margin-bottom: 4px; }
.dbmgr-sql-err { color: var(--red, #f48771); }
/* 表单弹窗 */
/* ==================== 数据库连接管理器 ==================== */
.dbconn-modal { min-width: 560px; }
.dbconn-list { display: flex; flex-direction: column; gap: 8px; }
.dbconn-empty { text-align: center; color: var(--text-dim, #888); padding: 32px 0; font-size: 13px; }
.dbconn-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border: 1px solid var(--input-border, #444);
  border-radius: 8px; background: var(--panel-light, rgba(255,255,255,0.04));
}
.dbconn-info { min-width: 0; flex: 1; }
.dbconn-name { font-weight: 600; color: var(--text); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.dbconn-type {
  font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 10px;
  background: var(--accent-light, rgba(100,150,255,0.15)); color: var(--accent, #6c9eff);
}
.dbconn-detail { font-size: 12px; color: var(--text-dim, #999); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbconn-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: 12px; }

.dbmgr-form-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dbmgr-form-modal {
    width: 480px;
    max-width: 92vw;
    max-height: 85vh;
    background: var(--panel, #1e1e1e);
    border: 1px solid var(--border, #3e3e42);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.5));
}
.dbmgr-form-body { flex: 1; overflow: auto; padding: 14px; }
.dbmgr-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border, #3e3e42);
}
.dbmgr-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.dbmgr-form-row label { width: 110px; font-size: 12px; color: var(--text-dim, #aaa); flex-shrink: 0; }
.dbmgr-form-row input {
    flex: 1;
    padding: 5px 8px;
    background: var(--input-bg, #3c3c3c);
    border: 1px solid var(--input-border, #3e3e42);
    border-radius: 4px;
    color: var(--text, #ccc);
    font-size: 12px;
}
.dbmgr-req { color: var(--red, #f48771); }
.dbmgr-hint { font-size: 12px; color: var(--text-dim, #888); margin-top: 4px; }
/* 结构视图 */
.dbmgr-struct-table th { cursor: default; }
.dbmgr-struct-actions { display: flex; gap: 8px; margin: 10px 0; }
.dbmgr-structure h4 { margin: 12px 0 6px; font-size: 12px; color: var(--text-dim, #999); }
.dbmgr-create-sql {
    background: var(--input-bg, #1e1e1e);
    border: 1px solid var(--border, #3e3e42);
    border-radius: 4px;
    padding: 8px;
    font-size: 12px;
    font-family: Consolas, Monaco, monospace;
    overflow-x: auto;
    white-space: pre;
    color: var(--text, #ccc);
}