/* ===== Canvas Studio 页面 — 画布布局（创建项目） ===== */

.studio-page {
    display: none;
    position: fixed;
    inset: 0;
    background: #0a0a0a;
    z-index: 950;
}

.studio-page.active {
    display: flex;
    flex-direction: column;
    background: #080808;
}

/* ========== 顶部栏 ========== */
.studio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    height: 52px;
    flex-shrink: 0;
    background: transparent;
    position: relative;
    z-index: 100;
}

.studio-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* ========== 工作间操作菜单按钮 ========== */
.studio-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    position: relative;
    z-index: 101;
}
.studio-menu-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
}

/* 工作间操作下拉菜单 */
.studio-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: #1a1a1f;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 6px;
    z-index: 200;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.studio-menu-dropdown.open {
    display: block;
}

.studio-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    transition: all 0.15s;
}
.studio-menu-item:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.studio-menu-item svg {
    flex-shrink: 0;
    color: rgba(255,255,255,0.4);
}
.studio-menu-item:hover svg {
    color: rgba(255,255,255,0.7);
}
.studio-menu-item.danger {
    color: #f87171;
}
.studio-menu-item.danger:hover {
    background: rgba(248,113,113,0.1);
    color: #fca5a5;
}
.studio-menu-item.danger svg {
    color: #f87171;
}

.studio-menu-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 0;
}

.studio-project-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.studio-project-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.studio-project-name-wrap {
    position: relative;
}

.studio-project-name {
    font-size: 14px;
    font-weight: 600;
    color: #e8e8e8;
    line-height: 1.2;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s;
}

.studio-project-name:hover {
    background: rgba(255,255,255,0.08);
}

.studio-project-name-input {
    font-size: 14px;
    font-weight: 600;
    color: #e8e8e8;
    line-height: 1.2;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(102,126,234,0.5);
    border-radius: 4px;
    padding: 2px 4px;
    outline: none;
    width: 200px;
    max-width: 100%;
    font-family: inherit;
}

.studio-project-name-input:focus {
    border-color: #667eea;
    background: rgba(255,255,255,0.1);
}

.studio-project-saved {
    font-size: 10px;
    color: rgba(255,255,255,0.22);
    line-height: 1.2;
}

/* ★ 保存按钮 */
.studio-save-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s ease;
    margin-left: 4px;
    box-shadow: 0 2px 10px rgba(99,102,241,.28);
    white-space: nowrap;
}
.studio-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99,102,241,.5);
}
.studio-save-btn:active {
    transform: scale(.96);
}
.studio-save-btn.saving {
    pointer-events: none;
    opacity: .7;
}
.studio-save-btn.saved {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16,185,129,.3);
}

.studio-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.studio-readonly-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 8px;
    padding: 4px 4px 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.studio-readonly-bar[hidden] {
    display: none !important;
}
.studio-readonly-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}
.studio-clone-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 16px;
    background: #3b82f6;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}
.studio-clone-btn:hover { opacity: 0.92; }
.studio-clone-btn:disabled { opacity: 0.6; cursor: not-allowed; }

body.studio-readonly .studio-save-btn,
body.studio-readonly .studio-menu-btn,
body.studio-readonly .studio-share-btn,
body.studio-readonly .studio-coins-btn,
body.studio-readonly .studio-community-btn,
body.studio-readonly .studio-sidebar-wrap,
body.studio-readonly #aiAssistFab,
body.studio-readonly #centerToolbar,
body.studio-readonly .node-ai-float-wrap,
body.studio-readonly .node-ai-panel,
body.studio-readonly .node-top-bar,
body.studio-readonly .selection-toolbar,
body.studio-readonly .selection-frame,
body.studio-readonly .group-toolbar,
body.studio-readonly .studio-shortcut-chip {
    display: none !important;
}
body.studio-readonly .studio-project-name-wrap {
    pointer-events: none;
}
body.studio-readonly .canvas-node,
body.studio-readonly .canvas-node *,
body.studio-readonly .canvas-node-group,
body.studio-readonly .canvas-node-group *,
body.studio-readonly .conn-scissors {
    pointer-events: none !important;
    user-select: none !important;
}
body.studio-readonly #studioCanvas {
    cursor: grab;
}
body.studio-readonly #studioCanvas:active {
    cursor: grabbing;
}
body.studio-readonly .studio-bottom-controls {
    pointer-events: auto;
}
body.studio-readonly .studio-bottom-controls * {
    pointer-events: auto;
}

/* 后台模板/资产编辑模式：精简顶部栏，隐藏用户侧功能 */
body.studio-admin-template .studio-menu-btn,
body.studio-admin-template .studio-menu-dropdown,
body.studio-admin-template .studio-header-right,
body.studio-admin-template #aiAssistFab,
body.studio-admin-template .studio-sidebar-avatar,
body.studio-admin-template .studio-sidebar-user-panel,
body.studio-admin-template #centerToolbar,
body.studio-admin-template .studio-shortcut-chip,
body.studio-admin-asset .studio-menu-btn,
body.studio-admin-asset .studio-menu-dropdown,
body.studio-admin-asset .studio-header-right,
body.studio-admin-asset #aiAssistFab,
body.studio-admin-asset .studio-sidebar-avatar,
body.studio-admin-asset .studio-sidebar-user-panel,
body.studio-admin-asset #centerToolbar,
body.studio-admin-asset .studio-shortcut-chip {
    display: none !important;
}
body.studio-admin-template .studio-project-name-wrap,
body.studio-admin-asset .studio-project-name-wrap {
    pointer-events: none;
}

.studio-coins-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px 5px 9px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.studio-coins-btn:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.8); }
.studio-coins-btn svg { color: rgba(255,255,255,0.4); width: 14px; height: 14px; }

.studio-community-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.studio-community-btn:hover { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.04); }
.studio-community-btn svg { opacity: 0.6; width: 14px; height: 14px; }

.studio-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.studio-share-btn:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
}
.studio-share-btn svg { width: 16px; height: 16px; }

/* ========== 分享菜单 & 弹窗 ========== */
.studio-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.96);
    transition: all 0.18s ease;
    pointer-events: none;
}
.studio-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.studio-share-menu {
    width: 380px;
    background: rgba(26, 28, 35, 0.98);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.studio-share-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 10px;
    transition: background 0.15s;
}
.studio-share-row:hover { background: rgba(255, 255, 255, 0.04); }
.studio-share-info { flex: 1; min-width: 0; }
.studio-share-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}
.studio-share-title svg { flex-shrink: 0; opacity: 0.7; }
.studio-share-desc {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.42);
}
.studio-share-action-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.studio-share-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
.studio-share-action-btn.copied {
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.studio-share-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}
.studio-share-overlay.show { opacity: 1; visibility: visible; }

.studio-publish-modal,
.studio-share-confirm-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 2001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}
.studio-publish-modal.show,
.studio-share-confirm-modal.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.studio-publish-modal {
    width: min(860px, calc(100vw - 40px));
    background: #1a1c23;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.studio-publish-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px 0;
}
.studio-publish-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}
.studio-publish-subtitle {
    margin: 6px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}
.studio-publish-close {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
.studio-publish-close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.studio-publish-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 20px 24px;
}
.studio-publish-label {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
}
.studio-publish-label .required { color: #ef4444; margin-left: 2px; }
.studio-publish-upload {
    position: relative;
    min-height: 160px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 16px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}
.studio-publish-upload:hover { border-color: rgba(255, 255, 255, 0.32); }
.studio-publish-upload.dragover {
    border-color: rgba(59, 130, 246, 0.65);
    background: rgba(59, 130, 246, 0.06);
}
.studio-publish-upload-cover { min-height: 120px; }
.studio-publish-upload.has-preview {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1);
    background: #111318;
    cursor: default;
}
.studio-publish-upload.is-uploading {
    cursor: wait;
}
.studio-publish-upload-empty,
.studio-publish-upload-loading,
.studio-publish-upload-preview {
    position: absolute;
    inset: 0;
}
.studio-publish-upload-empty[hidden],
.studio-publish-upload-loading[hidden],
.studio-publish-upload-preview[hidden] {
    display: none !important;
}
.studio-publish-upload-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    padding: 16px;
}
.studio-publish-upload-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2;
}
.studio-publish-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    animation: studio-publish-spin 0.75s linear infinite;
}
@keyframes studio-publish-spin {
    to { transform: rotate(360deg); }
}
.studio-publish-upload-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.studio-publish-upload-media {
    width: 100%;
    height: 100%;
    background: #0d0f14;
}
.studio-publish-upload-media img,
.studio-publish-upload-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #0d0f14;
}
.studio-publish-upload-media video {
    min-height: 160px;
}
.studio-publish-upload-cover .studio-publish-upload-media video,
.studio-publish-upload-cover .studio-publish-upload-media img {
    min-height: 120px;
}
.studio-publish-upload-replace {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.18s ease;
    cursor: pointer;
    pointer-events: none;
}
.studio-publish-upload.has-preview:hover .studio-publish-upload-replace {
    opacity: 1;
    pointer-events: auto;
}
.studio-publish-upload.is-uploading .studio-publish-upload-replace {
    opacity: 1;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    flex-direction: column;
    gap: 10px;
}
.studio-publish-upload.is-uploading .studio-publish-upload-replace span,
.studio-publish-upload.is-uploading .studio-publish-upload-replace svg {
    display: none;
}
.studio-publish-upload.is-uploading .studio-publish-upload-replace::before {
    content: '上传中...';
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
.studio-publish-upload.is-uploading .studio-publish-upload-replace::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    animation: studio-publish-spin 0.75s linear infinite;
}
.studio-publish-input-wrap { position: relative; margin-bottom: 16px; }
.studio-publish-input,
.studio-publish-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 13px;
    padding: 10px 12px;
    outline: none;
    resize: vertical;
}
.studio-publish-input:focus,
.studio-publish-textarea:focus { border-color: rgba(255, 255, 255, 0.22); }
.studio-publish-counter {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
.studio-publish-counter-textarea { bottom: 10px; }
.studio-publish-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}
.studio-publish-toggle-label { font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.studio-publish-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.studio-publish-switch input { opacity: 0; width: 0; height: 0; }
.studio-publish-switch-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.2s;
}
.studio-publish-switch-slider:before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.studio-publish-switch input:checked + .studio-publish-switch-slider { background: #3b82f6; }
.studio-publish-switch input:checked + .studio-publish-switch-slider:before { transform: translateX(20px); }
.studio-publish-footer,
.studio-share-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 24px 22px;
}
.studio-share-modal-btn {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.studio-share-modal-btn:hover { background: rgba(255, 255, 255, 0.08); }
.studio-share-modal-btn.primary {
    background: #fff;
    color: #111;
    border-color: #fff;
}
.studio-share-modal-btn.primary:hover { background: rgba(255, 255, 255, 0.9); }
.studio-share-modal-btn.danger {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}
.studio-share-modal-btn.danger:hover { background: #dc2626; }
.studio-share-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.studio-share-confirm-modal {
    width: min(420px, calc(100vw - 40px));
    background: #1a1c23;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.studio-share-confirm-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}
.studio-share-confirm-desc {
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
}
.studio-share-confirm-actions { padding: 0; }

.studio-share-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(12px);
    z-index: 2100;
    min-width: 280px;
    padding: 14px 20px;
    background: rgba(26, 28, 35, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}
.studio-share-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.studio-share-toast-title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
}
.studio-share-toast-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .studio-share-menu { width: min(380px, calc(100vw - 24px)); }
    .studio-publish-body { grid-template-columns: 1fr; }
}

/* ========== 更多菜单按钮 & 下拉菜单 ========== */
.studio-more-wrap {
    position: relative;
}

.studio-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.studio-more-btn:hover,
.studio-more-btn.active {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
}
.studio-more-btn svg { width: 18px; height: 18px; }

/* 下拉菜单面板 */
.studio-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: rgba(26, 28, 35, 0.98);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.96);
    transition: all 0.18s ease;
    z-index: 300;
}
.studio-more-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 菜单分组标题 */
.studio-more-label {
    padding: 10px 12px 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.32);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* 菜单项 */
.studio-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.studio-more-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.studio-more-item span {
    font-size: 13.5px;
    font-weight: 450;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.3;
}

.studio-more-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

/* 危险操作（删除） */
.studio-more-item-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}
.studio-more-item-danger span {
    color: #f87171;
}
.studio-more-item-danger .studio-more-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

/* 菜单分隔线 */
.studio-more-divider {
    height: 1px;
    margin: 4px 12px;
    background: rgba(255, 255, 255, 0.06);
}

/* ========== 用户/团队切换菜单 ========== */
.user-team-switcher {
    position: relative;
    margin-left: 4px;
}

.user-team-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: all 0.18s ease;
}
.user-team-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.16);
}
.user-team-btn.active {
    border-color: rgba(139,92,246,0.35);
    background: rgba(139,92,246,0.08);
}

.user-team-avatar {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.user-team-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-team-arrow {
    color: rgba(255,255,255,0.4);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.user-team-btn.active .user-team-arrow { transform: rotate(180deg); }

/* 下拉面板 */
.user-team-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: rgba(26, 28, 35, 0.98);
    backdrop-filter: blur(24px) saturate(1.5);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.55),
        0 4px 12px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 400;
    overflow: hidden;
}
.user-team-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 用户头部 */
.utd-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 12px;
}
.utd-user-avatar {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #374151, #4b5563);
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
}
.utd-user-name {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
}

/* 当前团队 */
.utd-current-team {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 10px;
    padding: 10px 10px;
    border-radius: 11px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.14s ease;
}
.utd-current-team:hover {
    background: rgba(255,255,255,0.07);
}
.utd-team-icon {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: rgba(99,102,241,0.15);
    color: #818cf8;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.utd-team-info { flex: 1; min-width: 0; }
.utd-current-team .utd-team-name {
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.utd-arrow-right {
    color: rgba(255,255,255,0.25);
    flex-shrink: 0;
}

/* 团队设置图标 */
.utd-settings-icon {
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.utd-current-team:hover .utd-settings-icon { opacity: 1; color: rgba(255,255,255,0.35); }

/* 团队选择子面板 */
.utd-team-list-panel {
    display: none;
    position: absolute;
    top: -1px; left: -100%;
    width: 220px;
    background: rgba(26, 28, 35, 0.98);
    backdrop-filter: blur(24px) saturate(1.5);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.55),
        0 4px 12px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    z-index: 410;
}
.utd-team-list-panel.show { display: block; animation: utdSlideIn 0.18s ease forwards; }
@keyframes utdSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.utd-tlp-header {
    padding: 12px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* 子面板团队项 */
.utd-tlp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.12s ease;
    position: relative;
}
.utd-tlp-item:hover { background: rgba(255,255,255,0.05); }
.utd-tlp-item.active { background: rgba(139,92,246,0.08); }

.utd-tlp-item-icon {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: rgba(99,102,241,0.12);
    color: #818cf8;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.utd-tlp-item.active .utd-tlp-item-icon {
    background: rgba(34,197,94,0.12);
    color: #4ade80;
}

.utd-tlp-item-name {
    font-size: 13.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    flex: 1;
}
.utd-tlp-item.active .utd-tlp-item-name { color: rgba(255,255,255,0.9); }

/* 当前选中标记 */
.utd-tlp-check {
    color: #22c55e;
    flex-shrink: 0;
    opacity: 0;
}
.utd-tlp-item.active .utd-tlp-check { opacity: 1; }

.utd-tlp-loading {
    padding: 20px;
    text-align: center;
    font-size: 12.5px;
    color: rgba(255,255,255,0.25);
}

/* 额度卡片 */
.utd-quota-card {
    margin: 6px 10px 8px;
    padding: 12px;
    border-radius: 11px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
}
.utd-quota-top {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    font-weight: 500;
}
.utd-quota-top svg { color: rgba(250,204,21,0.6); }
.utd-quota-free {
    color: #60a5fa;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.utd-quota-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11.5px;
    color: #34d399;
    font-weight: 500;
}
.utd-quota-label svg { width: 12px; height: 12px; opacity: 0.7; }
.utd-progress-bar {
    height: 3px;
    margin-top: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
.utd-progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 2px;
}

/* 创建团队 */
.utd-create-team {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 2px 10px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #60a5fa !important;
    cursor: pointer;
    transition: background 0.12s ease;
    font-size: 13.5px;
    font-weight: 450;
}
.utd-create-team:hover { background: rgba(59,130,246,0.08); }
.utd-create-team svg { flex-shrink: 0; }

/* 菜单项 */
.utd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.utd-item:hover { background: rgba(255,255,255,0.04); }
.utd-item span {
    font-size: 13.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.72);
    flex: 1;
}
.utd-item svg { flex-shrink: 0; color: rgba(255,255,255,0.45); }
.utd-item-arrow {
    color: rgba(255,255,255,0.2) !important;
}
.utd-logout:hover { background: rgba(239,68,68,0.08); }
.utd-logout span { color: #f87171 !important; }
.utd-logout svg { color: #f87171 !important; }

/* 分隔线 */
.utd-divider {
    height: 1px;
    margin: 4px 0;
    background: rgba(255,255,255,0.06);
}

/* ========== 左侧垂直工具栏 ========== */
.studio-sidebar-wrap {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
}
.studio-sidebar-new {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 48px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 26px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    overflow: visible;
}
.studio-sidebar-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    overflow: visible;
}
.studio-add-wrap,
.studio-search-wrap,
.studio-history-wrap {
    position: relative;
}
.studio-sidebar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.studio-sidebar-avatar:hover {
    background: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.92);
}
.studio-sidebar-avatar.active {
    background: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.95);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

/* ========== 侧边栏用户菜单弹窗 ========== */
.studio-sidebar-user-panel {
    position: fixed;
    left: 84px;
    top: 50%;
    width: 300px;
    border-radius: 16px;
    background: rgba(26, 28, 35, 0.98);
    backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 2010;
    padding: 0 0 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(-8px) scale(0.97);
    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.studio-sidebar-user-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}
.sud-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 14px;
}
.sud-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}
.sud-user-meta {
    min-width: 0;
    flex: 1;
}
.sud-username {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.3;
    word-break: break-all;
}
.sud-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 2px;
    word-break: break-all;
}
.sud-quota-card {
    margin: 0 12px 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.sud-quota-top {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
}
.sud-quota-top svg {
    color: rgba(250, 204, 21, 0.65);
}
.sud-quota-free {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}
.sud-quota-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.42);
    margin-bottom: 8px;
}
.sud-quota-label svg {
    opacity: 0.55;
}
.sud-infinity {
    margin-left: auto;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}
.sud-progress-bar {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.sud-progress-fill {
    height: 100%;
    width: 72%;
    border-radius: 4px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.sud-create-team {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 16px 8px;
    padding: 0;
    border: none;
    background: transparent;
    color: #60a5fa;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sud-create-team:hover {
    opacity: 0.85;
}
.sud-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 6px 12px;
}
.sud-menu-list {
    padding: 0 8px;
}
.sud-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.sud-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.95);
}
.sud-menu-item svg:first-child {
    flex-shrink: 0;
    opacity: 0.55;
}
.sud-menu-item:hover svg:first-child {
    opacity: 0.85;
}
.sud-menu-item span {
    flex: 1;
}
.sud-menu-arrow {
    flex-shrink: 0;
    opacity: 0.35;
}
.sud-menu-logout {
    margin: 0 8px;
    width: calc(100% - 16px);
}
.studio-sidebar-divider {
    display: none;
}
.studio-sidebar-bottom {
    display: none;
}

.studio-sidebar-btn {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 14px;
    font-weight: 600;
    position: relative;
}
.studio-sidebar-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
.studio-sidebar-btn.active {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.95);
}

/* + 按钮 — 白色背景 + 蓝点指示 */
.studio-sidebar-btn.add-btn {
    background: #e8eaed;
    color: #1a1a1a;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.studio-sidebar-btn.add-btn:hover { background: #f0f2f5; }
.studio-sidebar-btn.add-btn.active {
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.studio-dot-indicator {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    border: 1.5px solid #e8eaed;
}

/* 用户头像 */
.studio-sidebar-btn.avatar-btn {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    letter-spacing: 0.5px;
}
.studio-sidebar-btn.avatar-btn:hover { background: rgba(255,255,255,0.16); }

/* ========== 画布平移包裹层 ========== */
#canvasPanWrap {
    position: absolute;
    inset: 0;
    overflow: visible;
    z-index: 1;
    will-change: transform;
    transform-origin: 0 0;
}
/* 确保节点以 panWrap 为定位参考 */
#canvasPanWrap .canvas-node {
    position: absolute;
}
/* 新建节点默认尺寸（各类型在下方覆盖） */
#canvasPanWrap {
    --studio-node-w-base: 336px;
    --studio-node-w-text: 408px;
    --studio-node-w-image: 360px;
    --studio-node-w-media: 384px;
}

/* ========== 中央画布区域 ========== */
.studio-canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    background-color: #080808;
    /* 无限画布点阵网格 — 通过 --grid-size 控制缩放 */
    --grid-size: 28px;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.09) 1px, transparent 0);
    background-size: var(--grid-size) var(--grid-size);
    transition: background-size 0.08s ease-out;
    overflow: hidden;
}

/* 节点内容层（JS 平移/缩放的目标） */
.studio-canvas-content {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
}

/* ========== 画布连线层（SVG）—— 在 content 内部，节点下方 ========== */
.canvas-connections {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.studio-canvas-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255,255,255,0.38);
    font-size: 14px;
    letter-spacing: 0.3px;
    user-select: none;
}
.studio-sparkle {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.35);
}
.studio-sparkle svg { opacity: 0.7; }

/* 画布中央固定区块（不随缩放/平移变化） */
.studio-canvas-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 90%;
    max-width: 960px;
}

/* 中央工具栏（无节点时显示的快捷操作） */
.studio-center-toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 5;
    pointer-events: auto;
    width: 100%;
}

/* taleg word标签栏 — 比输入区域更宽 */
.studio-canvas-tags {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
    justify-content: center;
    /* 标签栏比输入区宽，但不到全屏 */
    width: 100%;
    max-width: 1200px;
}

.studio-tag-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.studio-tag-btn svg { opacity: 0.45; }
.studio-tag-btn:hover {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.8);
}
.studio-tag-btn:hover svg { opacity: 0.8; }
.studio-tag-btn.template-btn {
    border-style: dashed;
}

/* ========== 底部工具栏 + 小地图 ========== */
.studio-bottom-controls {
    position: absolute;
    bottom: 18px;
    left: 18px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.studio-bottom-toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.studio-minimap {
    display: none;
    width: 220px;
    height: 132px;
    border-radius: 12px;
    background: rgba(32, 34, 38, 0.92);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 0.5px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    user-select: none;
}
.studio-minimap.is-open {
    display: block;
}

.studio-minimap-inner {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: grab;
    overflow: hidden;
}
.studio-minimap-inner.is-dragging {
    cursor: grabbing;
}

.studio-minimap-svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.studio-minimap-viewport {
    position: absolute;
    left: 0;
    top: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.52);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    pointer-events: none;
    will-change: transform, width, height;
}

.studio-minimap-node {
    fill: rgba(255, 255, 255, 0.22);
}

.studio-minimap-group {
    fill: rgba(255, 255, 255, 0.07);
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 1;
}

/* ========== 底部工具栏（胶囊浮动条） ========== */
.studio-bottom-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 14px 6px 10px;
    background: rgba(32, 32, 36, 0.88);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-radius: 999px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.38),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.studio-view-toggle {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.68);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}
.studio-view-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}
.studio-view-toggle.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.studio-zoom-slider {
    display: flex;
    align-items: center;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-zoom-track {
    position: relative;
    width: 132px;
    height: 4px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    cursor: pointer;
    overflow: visible;
}
.studio-zoom-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #ffffff;
    border-radius: 999px;
}
.studio-zoom-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.38);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.studio-zoom-track:hover .studio-zoom-thumb,
.studio-zoom-track:active .studio-zoom-thumb {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.studio-zoom-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.studio-help-btn,
.studio-wave-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(36, 36, 38, 0.9);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    color: rgba(255, 255, 255, 0.68);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.42),
        0 2px 6px rgba(0, 0, 0, 0.28),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
}
.studio-help-btn:hover,
.studio-wave-btn:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(46, 46, 48, 0.94);
    color: rgba(255, 255, 255, 0.92);
}

.studio-wave-btn {
    color: rgba(255, 255, 255, 0.42);
    display: none;
}

/* legacy — 保留类名避免旧引用报错 */
.studio-bottom-left,
.studio-bottom-right,
.studio-zoom-btn {
    display: none;
}

/* ========== 添加节点菜单（左侧 + 按钮） ========== */
.studio-add-menu {
    position: absolute;
    left: calc(100% + 12px);
    top: -8px;
    width: 260px;
    background: rgba(30, 32, 38, 0.95);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 16px;
    padding: 6px 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px) scale(0.97);
    transition: all 0.18s ease;
    z-index: 200;
}
.studio-add-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

.studio-add-header {
    padding: 10px 18px 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.3px;
}

.studio-add-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.15s;
}
.studio-add-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.studio-add-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.studio-add-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.3;
}

.studio-add-info-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.studio-add-sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.3;
}

.studio-add-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
}

.studio-add-badge {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.studio-add-blue-dot {
    position: absolute;
    top: 3px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 4px rgba(96, 165, 250, 0.6);
    border: 1.5px solid rgba(30, 32, 38, 0.95);
}

/* ========== 画布双击浮动菜单 ========== */
.studio-ctx-menu {
    position: fixed;
    width: 260px;
    background: rgba(30, 32, 38, 0.96);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 16px;
    padding: 6px 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.94);
    transition: all 0.16s ease;
    z-index: 9990;
    pointer-events: none;
}
.studio-ctx-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1);
    transition: none;  /* ★ 立即显示，不走过渡 */
    pointer-events: auto;
}

/* ========== 拉线引用生成菜单 ========== */
.studio-conn-spawn-menu {
    position: fixed;
    width: 260px;
    background: rgba(30, 32, 38, 0.96);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 16px;
    padding: 6px 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.94);
    transition: all 0.16s ease;
    z-index: 9992;
    pointer-events: none;
}
.studio-conn-spawn-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1);
    transition: none;
    pointer-events: auto;
}

/* ========== 画布右键菜单 ========== */
.studio-right-menu {
    position: fixed;
    width: 220px;
    background: rgba(30, 32, 38, 0.97);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 14px;
    padding: 6px 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.94);
    transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
    z-index: 9995;
    pointer-events: none;
}
.studio-right-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1);
    transition: none;
    pointer-events: auto;
}
.studio-right-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
    gap: 12px;
}
.studio-right-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.studio-right-item.disabled {
    opacity: 0.35;
    pointer-events: none;
}
.studio-right-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.studio-right-item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
}
.studio-right-item-label {
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.studio-right-item-shortcut {
    flex-shrink: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 400;
    letter-spacing: 0.2px;
}
.studio-right-divider {
    height: 1px;
    margin: 4px 12px;
    background: rgba(255, 255, 255, 0.06);
}

/* ========== 右键菜单子菜单 ========== */
.studio-right-item-has-sub > .studio-right-item-left::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 5px; height: 5px;
    border-top: 1.5px solid rgba(255,255,255,.3);
    border-right: 1.5px solid rgba(255,255,255,.3);
}
.studio-right-item-has-sub { position: relative; }
.studio-right-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -8px;
    min-width: 200px;
    background: rgba(30, 32, 38, 0.97);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 14px;
    padding: 10px 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 9999;
}
.studio-right-item-has-sub:hover > .studio-right-submenu,
.studio-right-item-has-sub:hover .studio-right-submenu.show { display: block; }
.studio-right-submenu-header {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    padding: 2px 18px 8px;
}
.studio-right-subitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
}
.studio-right-subitem:hover { background: rgba(255,255,255,.06); }
.studio-right-subitem-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.55);
}
.studio-right-subitem-text-col { display: flex; flex-direction: column; }
.studio-right-subitem-name {
    font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.85);
}
.studio-right-subitem-desc {
    font-size: 11.5px; color: rgba(255,255,255,.3); margin-top: 2px;
}
.studio-right-subitem-badge {
    margin-left: auto; flex-shrink: 0;
    font-size: 11px; color: #7c6cf0; background: rgba(124,108,240,.15);
    padding: 1px 6px; border-radius: 6px;
}

/* ========== 3D 世界创建对话框 ========== */
.studio-3d-dialog-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}
.studio-3d-dialog-overlay.show { opacity: 1; visibility: visible; }

.studio-3d-dialog {
    width: 420px;
    background: rgba(26,28,35,0.97);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.25);
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: all 0.22s ease;
}
.studio-3d-dialog-overlay.show .studio-3d-dialog {
    transform: scale(1) translateY(0);
}

.studio-3d-dlg-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
}
.studio-3d-title { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.75); }
.studio-3d-close {
    width: 30px; height: 30px; border-radius: 50%;
    border: none; background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.35); cursor: pointer;
    font-size: 13px; transition: all 0.12s;
}
.studio-3d-close:hover { background: rgba(239,68,68,0.15); color: #fca5a5; }

.studio-3d-body { padding: 0 20px 18px; }

.studio-3d-preview {
    display: flex; align-items: center; justify-content: center;
    height: 100px; margin-bottom: 12px;
    border-radius: 14px;
    background: rgba(99,102,241,0.06);
    border: 1px dashed rgba(167,139,250,0.15);
}
.studio-3d-desc {
    font-size: 13px; line-height: 1.55;
    color: rgba(255,255,255,0.4); text-align: center;
    margin-bottom: 14px;
}

.studio-3d-options { display: flex; gap: 8px; margin-bottom: 14px; }
.studio-3d-opt {
    flex: 1; padding: 7px 10px;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.45);
    font-size: 12px; cursor: pointer; transition: all 0.12s;
    text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.studio-3d-opt input[type="radio"] { accent-color: #a78bfa; width: 13px; height: 13px; }
.studio-3d-opt:hover { border-color: rgba(167,139,250,0.25); background: rgba(167,139,250,0.06); }
.studio-3d-opt span { font-size: 11.5px; }

.studio-3d-prompt-row textarea {
    width: 100%; height: 60px;
    padding: 10px 12px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.5); font-size: 13px;
    resize: none; outline: none; box-sizing: border-box;
    font-family: inherit; line-height: 1.5;
}
.studio-3d-prompt-row textarea::placeholder { color: rgba(255,255,255,0.2); }
.studio-3d-prompt-row textarea:focus { border-color: rgba(167,139,250,0.3); }

.studio-3d-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.studio-3d-cancel-btn {
    padding: 7px 18px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08); background: transparent;
    color: rgba(255,255,255,0.4); font-size: 13px; cursor: pointer;
    transition: all 0.12s;
}
.studio-3d-cancel-btn:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65); }
.studio-3d-continue-btn {
    padding: 7px 22px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white; font-size: 13px; font-weight: 500; cursor: pointer;
    box-shadow: 0 2px 12px rgba(102,126,234,0.3);
    transition: all 0.15s;
}
.studio-3d-continue-btn:hover { box-shadow: 0 4px 20px rgba(102,126,234,0.45); transform: translateY(-1px); }

/* ========== AI角色库弹窗（素材库面板内触发） ========== */
.studio-charlib-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}
.studio-charlib-overlay.show { opacity: 1; visibility: visible; }

.studio-charlib-dialog {
    width: calc(100vw - 400px);
    max-width: calc(100vw - 400px);
    height: 94vh;
    background: rgba(26,28,35,0.97);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    transition: all 0.22s ease;
}
.studio-charlib-overlay.show .studio-charlib-dialog {
    transform: scale(1) translateY(0);
}

.studio-charlib-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.studio-charlib-title { font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.8); }
.studio-charlib-close {
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.35); cursor: pointer;
    font-size: 14px; transition: all 0.12s;
    display: flex; align-items: center; justify-content: center;
}
.studio-charlib-close:hover { background: rgba(239,68,68,0.15); color: #fca5a5; }

.studio-charlib-body {
    flex: 1;
    overflow: hidden;
    background: #fff;  /* iframe 内容通常为浅色背景 */
}

.studio-add-section-label {
    padding: 12px 18px 6px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.3px;
}

/* ========== 画布连线层 SVG 子元素 ========== */
.canvas-connections svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
/* 连线基础样式 —— 淡紫色平滑贝塞尔曲线，匹配截图 */
.connection-line {
    fill: none;
    stroke: rgba(167, 139, 250, 0.5);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke 0.2s ease, stroke-width 0.15s ease;
    pointer-events: stroke;
    cursor: pointer;
}
/* 悬停连线高亮 */
.connection-line:hover {
    stroke: rgba(167, 139, 250, 0.85);
    stroke-width: 3;
}
/* 连线被选中 — 亮白色 */
.connection-line.selected {
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 3;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}
/* 拖拽中临时连线 —— 虚线动画 */
.connection-line.temp-line {
    stroke: rgba(167, 139, 250, 0.6);
    stroke-dasharray: 6 4;
    animation: connectionDash 0.5s linear infinite;
    pointer-events: none;
}
/* 连线删除剪刀按钮 */
.conn-scissors {
    position: fixed;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(30, 32, 38, 0.95);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    z-index: 10050;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.82);
    pointer-events: auto;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.conn-scissors svg {
    display: block;
    flex-shrink: 0;
}
.conn-scissors:hover {
    background: rgba(220, 38, 38, 0.9);
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
    box-shadow: 0 0 14px rgba(220, 38, 38, 0.5);
}
@keyframes connectionDash {
    to { stroke-dashoffset: -10; }
}

/* ========== 节点连接端口 ========== */
.node-port {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: crosshair;
    z-index: 10;
    transition: all 0.18s ease;
    pointer-events: auto;
}
/* 鼠标悬停节点时，端口向外弹出变大便於连接，但不改变颜色 */
.canvas-node:hover .node-port {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%) scale(1);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 悬停节点时，输入端向左弹出（中心对齐节点边缘：28px宽 → left:-14px） */
.canvas-node:hover .node-port.input-port {
    left: -14px;
}
/* 悬停节点时，输出端向右弹出 */
.canvas-node:hover .node-port.output-port {
    right: -14px;
}
/* 直接悬停在端口上时，进一步放大高亮 */
.canvas-node:hover .node-port:hover,
.node-port.active,
.node-port.connecting {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    box-shadow: none;
}
.canvas-node:hover .node-port:hover.input-port,
.node-port.input-port.active,
.node-port.input-port.connecting {
    left: -14px;
}
.canvas-node:hover .node-port:hover.output-port,
.node-port.output-port.active,
.node-port.output-port.connecting {
    right: -14px;
}
/* 默认端口：20px宽 → 中心对齐节点边缘：left:-10px, right:-10px */
.node-port.input-port {
    left: -10px;
}
.node-port.output-port {
    right: -10px;
}
.node-port.connected {
    /* 已连接端口不改变外观，去掉蓝色链接环，保持与默认端口一致的灰色 */
}

/* ========== 节点编辑模式（双击激活） ========== */
/* 注意：.node-format-bar 和 .node-ai-panel 的内联版本见下方"节点新内部结构"区域，
   此处保留浮动版本样式仅供特殊模式使用，默认不使用 opacity 隐藏 */
.node-format-bar.node-float {
    position: absolute;
    bottom: 100%;
    left: 50%;
    /* 增大间距，确保与节点体清晰分离 */
    margin-bottom: 20px;
    /* 水平居中 + 反向缩放保持视觉尺寸恒定 */
    transform-origin: center bottom;
    transform: translateX(-50%) scale(var(--node-cs, 1));
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 7px 10px;
    border-radius: 14px;
    background: rgba(32, 33, 40, 0.97);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    z-index: 60;
    opacity: 1 !important;
    transition: opacity 0.18s ease;
    pointer-events: auto;
    width: auto;
    max-width: 100%;
}
.node-format-bar[style*="display"] {
    opacity: 1;
    pointer-events: auto;
}
/* 编辑模式下格式栏的画布级反向缩放 */
.canvas-node.editing .node-format-bar {
    transform: translateX(-50%) scale(var(--node-cs, 1));
}

/* 颜色选择器圆钮 */
.fmt-color-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    padding: 0;
    outline: none;
}
.fmt-color-btn:hover {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.fmt-color-btn::-webkit-color-swatch-wrapper {
    padding: 0;
}
.fmt-color-btn::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.fmt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
    line-height: 1;
    font-family: inherit;
}
.fmt-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.9);
}
.fmt-btn:active { transform: scale(0.92); }
.fmt-sep {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

/* AI 输入面板 — 浮动在节点正下方（仅 .node-float 模式使用） */
.node-ai-panel.node-float {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 12px;
    transform-origin: center top;
    transform: translateX(-50%) scale(var(--node-cs, 1));
    width: 600px;
    padding: 18px 22px;
    border-radius: 16px;
    background: rgba(24, 25, 32, 0.98);
    backdrop-filter: blur(28px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.56),
        0 4px 12px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    z-index: 55;
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}
.node-ai-panel[style*="display"] {
    opacity: 1;
    pointer-events: auto;
}
.canvas-node.editing .node-ai-panel {
    transform: translateX(-50%) scale(var(--node-cs, 1));
}

.ai-prompt-input {
    width: 100%;
    min-height: 240px;
    max-height: 260px;
    padding: 14px 18px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.55;
    outline: none;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ai-prompt-input:focus {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}
.ai-prompt-input::placeholder { color: rgba(255, 255, 255, 0.18); }

.ai-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}
.ai-model-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.15px;
}
.ai-model-tag svg { 
    color: rgba(139, 92, 246, 0.7); 
    opacity: 0.8;
}

/* ========== 模型选择器下拉菜单 ========== */
.ai-model-selector {
    position: relative;
}
.ai-model-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1.3;
}
.ai-model-btn:hover {
    border-color: rgba(99,102,241,0.35);
    background: rgba(99,102,241,0.08);
    color: rgba(255,255,255,0.75);
}
.ai-model-btn.open {
    border-color: rgba(99,102,241,0.45);
    background: rgba(99,102,241,0.12);
    color: rgba(255,255,255,0.88);
}
.ai-model-btn svg:first-child {
    color: rgba(139,92,246,0.75);
    flex-shrink: 0;
}
.ai-model-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-model-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: rgba(255,255,255,0.3);
}
.ai-model-btn.open .ai-model-arrow {
    transform: rotate(180deg);
}

/* （原下拉面板样式已合并至下方 ai-model-dropdown 统一定义） */
.ai-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-mic-btn {
    /* display: flex; */
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.32);
    cursor: pointer;
    transition: all 0.12s ease;
}
.ai-mic-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.58);
    display: none;
}
.ai-mic-btn svg {
    width: 15px;
    height: 15px;
    display: none;
}

/* AI 辅助操作按钮（4x、计数等） */
.ai-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}
.ai-tool-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.72);
}

.ai-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ai-send-btn svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
}
.ai-send-btn:hover {
    background: linear-gradient(135deg, #7c7ff2, #9f70f7);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.38);
    transform: translateY(-1px) scale(1.05);
}
.ai-send-btn:active { 
    transform: translateY(0) scale(0.97); 
}

/* 编辑模式下的节点提升层级和样式 */
.canvas-node.editing {
    z-index: 45 !important;
    border-color: rgba(99, 102, 241, 0.35);
    user-select: auto;
    cursor: default;
}
.canvas-node.editing .ai-prompt-input {
    user-select: text;
    -webkit-user-select: text;
}
/* 编辑模式下 AI 面板内的交互元素恢复正常光标 */
.canvas-node.editing .node-ai-panel,
.canvas-node.editing .node-ai-panel * {
    cursor: auto;
}

/* ========== 画布节点（各类型工作流节点） ========== */
/* .canvas-node 是外层容器 — 固定宽度，高度由 .node-scale-wrap 内容决定 */
.canvas-node {
    position: absolute;
    width: var(--studio-node-w-base, 336px);
    /* 高度不自设 — 由唯一非absolute子元素 .node-scale-wrap 撑开 */
    cursor: grab;
    user-select: none;
    z-index: 5;
    overflow: visible;
}
.canvas-node.selected { z-index: 10; }
.canvas-node.dragging {
    cursor: grabbing;
    z-index: 20;
}

/*
 * .node-scale-wrap — 唯一的非absolute子元素，负责撑开 canvas-node 尺寸
 * 外框透明：标签 + 内容区各自独立样式（参照无底色节点卡片）
 */
.node-scale-wrap {
    position: relative;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

/* ================================================================
 * 节点独立缩放 — 工具栏/AI 面板在 .node-scale-wrap 外；
 * 间距补偿由 studio.js _syncNodeScaledUiSpacing 动态计算。
 * ================================================================ */

/* 节点头部 */
.node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    gap: 8px;
}
.node-header-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.node-type-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.65);
}
.node-type-icon svg { width: 15px; height: 15px; }
.node-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.node-actions {
    /* display: flex; */
    display: none;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.canvas-node:hover .node-actions,
.canvas-node.selected .node-actions { opacity: 1; }
.node-action-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.node-action-btn:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); }

/* 节点内容区 */
.node-body {
    padding: 0 14px 14px;
}

/* ========== 节点新内部结构（统一布局） ========== */

/* 节点内层容器 */
.node-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    position: relative;
    overflow: visible;
}

/* ---- 顶部工具栏（文本格式/上传）---- */
/* 现在是 .canvas-node 的直接子元素，在 .node-scale-wrap 上方，不受缩放影响 */
.node-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 8px; /* 与节点顶部的固定间距 */
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
.canvas-node.show-ui .node-top-bar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* 当内部包含浮动工具栏时，容器本身不占空间（工具栏已绝对定位到节点外部） */
.node-top-bar:has(> .node-float) {
    display: contents;
}
.node-upload-btn {
    padding: 5px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(30,32,38,0.95);
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    backdrop-filter: blur(12px);
    white-space: nowrap;
}
.node-upload-btn:hover { 
    background: rgba(40,42,50,0.98); 
    color: rgba(255,255,255,0.85); 
    border-color: rgba(255,255,255,0.2);
}

/* 图片/视频节点操作工具栏（有内容时显示）— 深色胶囊样式 */
.node-image-bar,
.node-video-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 10px;
    background: rgba(24,26,32,0.97);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 1px 2px rgba(255,255,255,0.03) inset;
    backdrop-filter: blur(12px);
}
.img-act-btn,
.video-act-btn {
    width: 28px; height: 28px;
    border: none; border-radius: 7px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
    position: relative;
}
.img-act-btn:hover,
.video-act-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    transform: scale(1.05);
}
.img-act-btn:active,
.video-act-btn:active {
    background: rgba(255,255,255,0.12);
    transform: scale(0.95);
}
.img-act-btn svg,
.video-act-btn svg {
    width: 15px; height: 15px;
    transition: transform 0.15s ease;
}
.img-act-btn:hover svg,
.video-act-btn:hover svg {
    transform: scale(1.1);
}
.video-hd-btn b {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.video-more-btn .video-more-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}

/* 图片节点有内容时，隐藏下方 AI 输入面板（由 JS _updateNodeUploadBtn 控制） */

/* 文本格式栏 — 匹配目标截图：深色胶囊，紧凑排列 */
.node-format-bar {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 4px 8px;
    background: rgba(30,32,38,0.97);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.format-btn {
    width: 26px; height: 26px;
    border: none; border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.1s ease;
}
.format-btn:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.8); }
.format-btn b { font-weight: 700; font-size: 11px; letter-spacing: -0.2px; }
.format-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.06); margin: 0 4px; }

/* ---- 预览区域 ---- */
.node-preview-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 节点类型标签行 — 统一风格 */
.node-label-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 2px 4px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.48);
}
.node-label-row.beta-row { justify-content: space-between; }

/* 类型图标 — SVG 内联 */
.node-type-icon-svg {
    display: flex; align-items: center;
    color: rgba(255,255,255,0.35);
}
.node-type-icon-svg svg { width: 14px; height: 14px; }

/* 类型名称 */
.node-type-name {
    letter-spacing: 0.15px;
}

/* 旧 emoji 图标兼容 */
.node-type-label-icon { opacity: 0.45; }
.node-beta-tag {
    padding: 1px 8px;
    border-radius: 6px;
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* 上传/预览区域（图片/视频/音频/3D）— 仅内容区有底色 */
.node-upload-area {
    flex: 1;
    border-radius: 12px;
    border: none;
    background: rgba(22, 23, 28, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s;
}
.node-upload-area:hover {
    background: rgba(26, 27, 33, 0.98);
}

/* 空状态占位符 */
.node-empty-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
/* 图片节点占位符 — 大图标风格 */
.image-area .node-empty-placeholder svg {
    width: 68px;
    height: 68px;
    opacity: 0.2;
}

/* 各类型预览区尺寸比例 */
.image-area {
    min-height: 240px;
    aspect-ratio: 1 / 1;
    background: rgba(22, 23, 28, 0.96);
}
.video-area {
    min-height: 180px;
    aspect-ratio: 16 / 9;
    background: rgba(22, 23, 28, 0.96);
    transition: aspect-ratio 0.3s ease;
}
.audio-area {
    min-height: 180px;
    aspect-ratio: 16 / 9;
}
.world3d-area {
    min-height: 180px;
    aspect-ratio: 16 / 10;
}

/* 3D 世界节点顶部栏 */
.node-world3d-topbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(24,26,32,0.97);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    backdrop-filter: blur(12px);
    white-space: nowrap;
    flex-wrap: nowrap;
    width: max-content;
    max-width: calc(100% + 40px);
}
.node-enter-3d-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: rgba(255,255,255,0.72);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.node-enter-3d-btn span {
    white-space: nowrap;
}
.node-enter-3d-btn:hover:not(:disabled) {
    color: rgba(255,255,255,0.95);
}
.node-enter-3d-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}
.node-world3d-topbar .format-sep {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.node-world3d-topbar .node-upload-btn {
    padding: 4px 8px 4px 4px;
    border: none;
    background: transparent;
    backdrop-filter: none;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* 3D 世界节点标题行 — 左对齐，Beta 无背景 */
.canvas-node.node-world3d .world3d-label-row {
    justify-content: flex-start;
    align-self: flex-start;
    width: 100%;
    padding: 0 0 4px;
    gap: 6px;
}
.canvas-node.node-world3d .node-beta-tag {
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: none;
    color: rgba(255,255,255,0.35);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

/* 3D 世界 AI 面板：世界场景标签与切换 */
.ai-world-scene-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    font-size: 11.5px;
    white-space: nowrap;
}
.ai-world-scene-tag svg {
    opacity: 0.75;
}
.ai-world-scene-toggle {
    width: 34px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ai-world-scene-toggle.is-on {
    background: rgba(56,189,248,0.18);
    border-color: rgba(56,189,248,0.45);
    color: rgba(125,211,252,0.95);
}
.ai-world-scene-toggle:hover {
    border-color: rgba(255,255,255,0.22);
}

/* 视频播放占位图标 */
.video-placeholder-play {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.16);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.16);
    font-size: 18px;
}

/* 文本编辑区 — 匹配目标截图：大而方正 */
.node-preview-area {
    width: 100%;
    min-height: 192px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(18,20,26,0.9);
    color: rgba(255,255,255,0.45);
    font-size: 14px;
    line-height: 1.65;
    resize: none;
    outline: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: border-color 0.15s, color 0.15s;
    box-sizing: border-box;
    cursor: default; /* 未聚焦时显示默认光标，双击聚焦后才显示文本光标 */
}
.node-preview-area:focus { border-color: rgba(139,92,246,0.3); color: rgba(255,255,255,0.7); cursor: text; }
.node-preview-area::placeholder { color: rgba(255,255,255,0.2); }

/* ---- 左右添加按钮 ---- */
.node-add-side {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    background: rgba(30,32,38,0.85);
    color: rgba(255,255,255,0.5);
    font-size: 17px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 6;
    transition: all 0.18s ease;
    opacity: 0;
}
.canvas-node:hover .node-add-side { opacity: 1; }
.node-add-side.left { left: -42px; }
.node-add-side.right { right: -42px; }
.node-add-side:hover {
    border-color: rgba(255,255,255,0.6);
    background: rgba(55,58,68,0.9);
    color: rgba(255,255,255,0.85);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ---- AI 面板 — 浮动版（所有节点，在节点外部下方） ---- */
/* 现在是 .canvas-node 的直接子元素，在 .node-scale-wrap 下方，不受缩放影响 */
.node-ai-float-wrap {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 14px;
    width: calc(100% + 16px);
    min-width: var(--studio-node-w-image, 360px);
    z-index: 55;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
.canvas-node.show-ui .node-ai-float-wrap {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: block !important;
}

.canvas-node.show-ui {
    z-index: 30;
}

.canvas-node.show-ui .node-format-bar {
    opacity: 1 !important;
    pointer-events: auto;
    transition: opacity 0.18s ease;
}
/* 工具栏模式（可选切换）：仅显示顶部工具栏，隐藏 AI 面板 */
.canvas-node.show-ui.toolbar-mode .node-ai-float-wrap { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

.canvas-node.show-ui .node-ai-panel.node-float {
    pointer-events: auto !important;
}

.node-ai-panel.node-float {
    position: relative;
    margin-top: 0;
    padding: 8px 6px 7px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(22,24,30,0.97);
    backdrop-filter: blur(28px) saturate(1.4);
    box-shadow:
        0 16px 48px rgba(0,0,0,0.45),
        0 4px 12px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    opacity: 1 !important;
    pointer-events: none;
    overflow: visible;
    /* 垂直居中布局：三个子元素（头部/输入框/底部栏）垂直排列、水平居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 浮动AI面板头部工具栏 */
.ai-panel-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 0;
    width: 100%;
    box-sizing: border-box;
}
.ai-panel-expand-btn {
    width: 24px; height: 24px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.ai-panel-expand-btn:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.55); }

/* ★ AI 面板：输入框固定最大高度，内容溢出时在内部滚动 */
.ai-panel-expand-btn {
    position: relative;
}
.ai-panel-expand-btn::after {
    content: '聚焦';
    position: absolute;
    top: -18px; left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
.ai-panel-expand-btn:hover::after { opacity: 1; }

/* 浮动AI面板输入框 — 更大 */
.ai-prompt-wrap {
    position: relative;
    width: 100%;
    margin: 2px 8px 1px;
    flex-shrink: 0;
}
.ai-prompt-ref-list {
    display: none !important;
}
.ai-prompt-input[contenteditable="true"] {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    white-space: pre-wrap;
    word-break: break-word;
    outline: none;
    cursor: text;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.ai-prompt-input[contenteditable="true"]::-webkit-scrollbar {
    width: 5px;
}
.ai-prompt-input[contenteditable="true"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}
.ai-prompt-input[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, 0.28);
    pointer-events: none;
}
.ai-prompt-input.is-upstream-drop-target {
    border-color: rgba(139, 92, 246, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.28), 0 0 0 3px rgba(139, 92, 246, 0.12);
    background: rgba(139, 92, 246, 0.06);
}
.ai-inline-ref-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
    padding: 2px 8px 2px 2px;
    margin: 0 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    line-height: 1.2;
    user-select: none;
    max-width: 132px;
}
.ai-inline-ref-thumb {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    font-size: 9px;
    font-weight: 600;
    color: #111;
    line-height: 1;
}
.ai-inline-ref-thumb img,
.ai-inline-ref-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ai-inline-ref-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-prompt-ref-card {
    width: 88px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: rgba(22, 24, 30, 0.98);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    animation: ai-prompt-ref-in 0.18s ease;
}
@keyframes ai-prompt-ref-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.ai-prompt-ref-card:hover {
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
}
.ai-prompt-ref-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px;
    background: #f3f3f3;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
}
.ai-prompt-ref-preview img,
.ai-prompt-ref-preview video {
    width: 100%;
    height: 52px;
    object-fit: cover;
    display: block;
}
.ai-prompt-ref-label {
    display: block;
    padding: 7px 6px 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.74);
    background: rgba(16, 17, 22, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ai-prompt-wrap.has-prompt-refs .ai-prompt-float {
    margin-top: 2px !important;
}
.upstream-node-icon.is-prompt-selected {
    border-color: rgba(139, 92, 246, 0.72);
    box-shadow:
        0 0 0 2px rgba(139, 92, 246, 0.18),
        0 4px 14px rgba(0, 0, 0, 0.28);
}
/* 上游节点图标按钮（连接时显示） */
/* 上游节点连接图标 — 引用素材芯片 */
.upstream-node-icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.55);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 4;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
    pointer-events: auto;
    overflow: hidden;
    padding: 0;
    touch-action: none;
}
.upstream-node-icon.is-dragging {
    cursor: grabbing;
    z-index: 30;
    transform: scale(0.98);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: none;
}
.upstream-node-icon.is-drag-ghost {
    opacity: 0.45;
    filter: saturate(0.8) brightness(0.92);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    transform: none;
    box-shadow: none;
    cursor: grabbing;
}
.upstream-node-icon.is-drag-ghost .upstream-del-btn {
    opacity: 0;
    pointer-events: none;
}
.upstream-node-icon.is-drop-target {
    z-index: 6;
}
.upstream-node-icon.is-drop-target.is-drop-before {
    transform: translateX(6px);
}
.upstream-node-icon.is-drop-target.is-drop-after {
    transform: translateX(-6px);
}
.upstream-node-icon.is-drop-target::before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    width: 2px;
    border-radius: 2px;
    background: rgba(129, 140, 248, 0.95);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.55);
    z-index: 12;
    pointer-events: none;
}
.upstream-node-icon.is-drop-target.is-drop-before::before {
    left: -6px;
}
.upstream-node-icon.is-drop-target.is-drop-after::before {
    right: -6px;
}
.ai-ref-toolbar.upstream-icons-reordering .upstream-node-icon:not(.is-drag-ghost) {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s ease, box-shadow 0.15s ease;
}
body.upstream-thumb-dragging {
    cursor: grabbing !important;
    user-select: none;
}
body.upstream-thumb-dragging * {
    cursor: grabbing !important;
}
.upstream-drag-float {
    position: fixed;
    width: 88px;
    z-index: 99999;
    pointer-events: none;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(16, 17, 22, 0.98);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.52),
        0 6px 16px rgba(0, 0, 0, 0.32);
    transform: rotate(-2deg) scale(1.03);
    animation: upstream-drag-float-in 0.16s ease;
    will-change: left, top, transform, opacity;
}
.upstream-drag-float.is-snapping {
    transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
    transform: rotate(0deg) scale(1);
    opacity: 0;
}
@keyframes upstream-drag-float-in {
    from {
        opacity: 0;
        transform: rotate(0deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(-2deg) scale(1.03);
    }
}
.upstream-drag-float-preview {
    height: 52px;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.upstream-drag-float-preview img,
.upstream-drag-float-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.upstream-drag-float-text {
    display: block;
    max-width: 100%;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: #111;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upstream-drag-float-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.55);
}
.upstream-drag-float-label {
    display: block;
    padding: 7px 6px 8px;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.74);
    background: rgba(16, 17, 22, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.upstream-node-icon.is-dragging:hover {
    transform: scale(0.98);
}
.upstream-node-icon:hover {
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.upstream-node-icon svg {
    display: block;
}

/* 图片/视频缩略图引用 */
.upstream-node-icon.has-thumb {
    width: 40px;
    height: 40px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(18, 19, 24, 0.95);
    padding: 0;
}
.upstream-node-icon.has-thumb .upstream-thumb-img,
.upstream-node-icon.has-thumb .upstream-thumb-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.upstream-node-icon.has-thumb:hover {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
    z-index: 5;
}
.upstream-node-icon.has-thumb:hover .upstream-thumb-video {
    pointer-events: auto;
}

/* 文本引用 — 白底预览 */
.upstream-node-icon.has-text {
    background: #f3f3f3;
    border-color: rgba(255, 255, 255, 0.22);
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.upstream-text-preview {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
    line-height: 1;
}

/* 文本空内容 — 菜单图标芯片 */
.upstream-node-icon.has-text-menu {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.24);
    color: rgba(0, 0, 0, 0.62);
}

/* 引用芯片删除按钮 */
.upstream-node-icon .upstream-del-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    transform: none;
    transition: background 0.15s ease, transform 0.15s ease;
    z-index: 10;
    border: none;
    padding: 0;
}
.upstream-node-icon .upstream-del-btn:hover {
    background: rgba(0, 0, 0, 0.88);
    transform: scale(1.08);
}

/* ★ 上游内容预览弹窗 */
.upstream-preview-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}
.upstream-preview-overlay.show {
    opacity: 1;
}

/* 文本节点的上游图标：在 prompt-wrap 中与 add-btn 同行（靠左排列） */
.ai-prompt-wrap > .upstream-node-icon {
    position: absolute;
    top: -6px;
}

/* 文本节点有上游图标时，输入框左边距由 JS 动态计算 */
/* AI 面板左上角 + 按钮 */
.ai-add-btn {
    position: absolute;
    top: -6px;
    left: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(28,30,38,0.95);
    color: rgba(255,255,255,0.45);
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    transition: all 0.15s ease;
}
.ai-add-btn:hover {
    background: rgba(139,92,246,0.2);
    border-color: rgba(167,139,250,0.35);
    color: #c4b5fd;
}

/* ========== 节点选择模式（+ 按钮点击后选择其他节点作为引用） ========== */

/* 已关联节点 — 玻璃朦胧状态（不可选） */
.node-dimmed {
    opacity: 1 !important;
    pointer-events: none !important;
    transition: all 0.35s ease;
    position: relative;
}
/* 磨砂遮罩层 — 覆盖整个节点区域 */
.node-dimmed::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backdrop-filter: blur(8px) saturate(0.7) brightness(0.55);
    -webkit-backdrop-filter: blur(8px) saturate(0.7) brightness(0.55);
    background: rgba(10, 12, 18, 0.45);
    z-index: 5;
}
/* 节点内部子元素全部弱化 */
.node-dimmed > * {
    opacity: 0.35 !important;
    filter: grayscale(40%) brightness(0.65) !important;
}
/* ★ 浮动AI面板也要弱化（它可能超出节点边界） */
.node-dimmed .node-ai-panel,
.node-dimmed .node-ai-panel * {
    opacity: 0.3 !important;
    filter: grayscale(50%) brightness(0.55) !important;
}
/* 浮动输入框特别处理 */
.node-dimmed .ai-prompt-float {
    opacity: 0.25 !important;
    border-color: rgba(255,255,255,0.04) !important;
    color: transparent !important;
}
.node-dimmed .ai-prompt-float::placeholder { color: transparent !important; }
/* 底部footer工具栏也隐藏 */
.node-dimmed .ai-panel-footer,
.node-dimmed .ai-panel-tools {
    opacity: 0.2 !important;
}
/* 节点的连线在磨砂时也变淡 */
.connection-line.dimmed-line {
    stroke-opacity: 0.12 !important;
    transition: stroke-opacity 0.35s ease;
}
/* 当前操作节点自身 — 正常但加微弱标记 */
.node-self {
    box-shadow: 0 0 0 1.5px rgba(59,130,246,0.4), 0 4px 16px rgba(0,0,0,0.25) !important;
}

/* + 按钮选中状态 */
.ai-tool-btn.add-btn.picking {
    background: rgba(139,92,246,0.3);
    border-color: rgba(167,139,250,0.55);
    color: #c4b5fd;
    animation: picking-blink 1s ease-in-out infinite alternate;
}
@keyframes picking-blink {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

/* 选择模式提示条 */
.node-pick-hint {
    position: fixed;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    animation: pick-hint-fadein 0.25s ease-out;
}
@keyframes pick-hint-fadein {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.node-pick-hint-inner {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 16px;
    border-radius: 20px;
    background: rgba(15,23,42,0.85);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(148,163,184,0.15);
}
.node-pick-hint-icon { font-size: 15px; }
.node-pick-hint-esc {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    font-size: 11px;
    font-weight: 600;
}

.ai-prompt-float {
    min-height: 58px !important;
    max-height: 130px !important;
    padding: 11px 14px 9px !important;
    margin: 5px 10px 3px !important;
    font-size: 13px !important;
    line-height: 1.56 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,0.04) !important;
    width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    color: rgba(255,255,255,0.65) !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    /* 内部微高光 + 微阴影增加立体感 */
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.06),
        0 1px 0 rgba(255,255,255,0.03) !important;
    resize: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}
.ai-prompt-float:focus {
    border-color: rgba(139,92,246,0.4) !important;
    background: rgba(255,255,255,0.055) !important;
    box-shadow:
        0 0 0 3px rgba(139,92,246,0.1),
        inset 0 1px 2px rgba(0,0,0,0.04) !important;
    outline: none !important;
    color: rgba(255,255,255,0.85) !important;
}
.ai-prompt-float::placeholder {
    color: rgba(255,255,255,0.28) !important;
}

/* ---- AI 面板 — 内嵌版（图片/视频/音频节点内部使用） ---- */
/* 注意：.node-ai-panel 不带 .node-float 的才是内嵌版 */
.node-ai-panel:not(.node-float) {
    margin-top: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(20,22,28,0.98);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 默认隐藏：未选中时不显示 */
    opacity: 0;
    transition: opacity 0.18s ease;
}
/* 双击内容区后显示内嵌AI栏 */
.canvas-node.show-ui .node-ai-panel:not(.node-float) { opacity: 1; }
.ai-panel-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 4px;
    width: 100%;
    box-sizing: border-box;
}
.ai-ref-toolbar {
    flex-wrap: wrap;
    min-height: 52px;
}
/* 浮动面板的工具栏 — 引用区左对齐，展开按钮靠右 */
.node-ai-float-wrap .ai-panel-tools {
    justify-content: flex-start;
    padding: 10px 12px 4px;
}
.node-ai-float-wrap .ai-panel-expand-btn {
    margin-left: auto;
}
.ai-ref-cursor-btn svg {
    display: block;
}
.ai-tool-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}
.ai-tool-btn.active {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.88);
}
.ai-tool-btn.add-btn {
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
}
.ai-tool-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.78);
}

/* @ 引用素材弹层 */
.ai-mention-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    pointer-events: none;
}
.ai-mention-popover.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.ai-mention-item {
    width: 88px;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: rgba(22, 24, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.ai-mention-item:hover {
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}
.ai-mention-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px;
    background: #f3f3f3;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
}
.ai-mention-preview img,
.ai-mention-preview video {
    width: 100%;
    height: 52px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.ai-mention-label {
    display: block;
    padding: 7px 6px 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(16, 17, 22, 0.96);
}

/* ★ 工具栏切换按钮 */
.toolbar-toggle-btn {
    width: 24px; height: 24px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
    position: relative;
}
.toolbar-toggle-btn:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.55); }
.toolbar-toggle-btn::after { content: '工具栏'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; color: rgba(255,255,255,0.5); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.toolbar-toggle-btn:hover::after { opacity: 1; }

.ai-prompt-input {
    width: 100%;
    padding: 10px 12px 8px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.58);
    font-size: 13px;
    line-height: 1.55;
    outline: none;
    resize: none;
    font-family: inherit;
    min-height: 42px;
    max-height: 90px;
    box-sizing: border-box;
}
.ai-prompt-input::placeholder {
    color: rgba(255,255,255,0.28);
}
.ai-prompt-input:focus {
    color: rgba(255,255,255,0.88);
}

.ai-panel-footer {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 3px 10px 5px;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    margin-top: 1px !important;
}
/* 底部栏左侧区域：模型 + 参数标签 */
.ai-panel-footer > .node-model-picker,
.ai-panel-footer > .ai-model-select,
.ai-panel-footer > .ai-size-select,
.ai-panel-footer > .ai-voice-info,
.ai-panel-footer > .node-3d-link {
    position: relative;
    flex-shrink: 0;
}

/* ========== 模型名称 — 内联简洁风格（✦ Wan 2.6）========== */
.ai-model-select {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    margin-right: 10px;
}
.model-icon {
    opacity: 0.6;
    font-size: 11.5px;
}
.model-name { font-weight: 450; }

/* ========== 节点 AI 模型下拉选择器 — 极简内联 ========== */
.node-model-picker {
    position: relative;
    cursor: pointer;
    padding: 3px 6px 3px 2px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    transition: all 0.15s ease;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}
.node-model-picker:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.82);
}
.node-model-picker.open {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.92);
}
.node-model-picker .model-icon {
    font-size: 11.5px;
    opacity: 0.6;
    flex-shrink: 0;
}
.node-model-picker .model-name {
    font-size: 12px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 450;
}
.node-model-arrow {
    font-size: 8px;
    opacity: 0.3;
    margin-left: 1px;
    transition: transform 0.18s ease;
}
.node-model-picker.open .node-model-arrow {
    transform: rotate(180deg);
}

/* 节点模型下拉菜单容器 — 由 JS 动态定位到选择器上方 */
.node-model-dropdown {
    display: none;
    position: fixed;
    min-width: 220px;
    max-width: 360px;
    max-height: 336px;
    overflow-y: auto;
    background: rgba(30, 32, 38, 0.98);
    backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.45),
        0 2px 8px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.05);
    z-index: 9999;
    padding: 4px;
    animation: nodeModelDropdownIn 0.18s ease;
}
@keyframes nodeModelDropdownIn {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.node-model-dropdown.open {
    display: block;
}

/* 节点模型选项 */
.node-model-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.node-model-option:hover {
    background: rgba(255,255,255,0.06);
}
.node-model-option.active {
    background: rgba(139,92,246,0.15);
    border: 1px solid rgba(139,92,246,0.25);
}
.node-model-opt-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.node-model-opt-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.node-model-opt-name {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.node-model-opt-desc {
    font-size: 10.5px;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 下拉菜单为空时的提示 */
.node-model-empty,
.node-model-error {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
}

/* 无匹配模型时 picker 按钮样式 */
.node-model-picker.no-match .model-name {
    color: rgba(239,68,68,0.7);
    font-style: italic;
}
.node-model-picker.no-match .model-icon {
    color: rgba(239,68,68,0.7);
}
.node-model-picker.no-match {
    border-color: rgba(239,68,68,0.2);
    background: rgba(239,68,68,0.04);
}

/* ========== 节点 AI 生成结果展示 ========== */

/* 加载状态 */
.node-loading-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    background: rgba(18, 20, 26, 0.88);
    backdrop-filter: blur(8px);
    border-radius: inherit;
    z-index: 5;
}
/* 文本节点用的紧凑行内 loading */
.node-loading-inline {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 6px 12px;
    margin-bottom: 2px;
    background: rgba(167,139,250,0.1);
    border-radius: 6px;
    border: 1px solid rgba(167,139,250,0.18);
}
.node-loading-inline .node-spinner {
    width: 16px; height: 16px;
    border-width: 2px;
}
.node-loading-text {
    font-size: 11.5px;
    color: rgba(167,139,250,0.85);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.node-spinner {
    width: 24px; height: 24px;
    border: 2.5px solid rgba(167,139,250,0.15);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: nodeSpin 0.7s linear infinite;
}
@keyframes nodeSpin { to { transform: rotate(360deg); } }

/* ===== 图片结果 ===== */
.node-ai-result-img {
    width: 100%; height: 100%;
    min-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.node-ai-result-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}
.image-area.has-result {
    padding: 0;
    background: transparent;
    border: none;
    display: block;
}
.image-area.has-result .node-empty-placeholder { display: none; }

/* 图片内容区右上角替换按钮 */
.image-area {
    position: relative;
}
.img-replace-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(20,22,28,0.88);
    color: rgba(255,255,255,0.55);
    font-size: 11.5px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.15s ease;
    white-space: nowrap;
}
.img-replace-btn:hover {
    background: rgba(30,33,42,0.95);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.2);
    transform: scale(1.03);
}
.img-replace-btn svg {
    flex-shrink: 0;
}

/* ===== 图片下载提示 Toast（屏幕底部居中）===== */
.studio-download-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    background: rgba(28,30,38,0.94);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 1px 2px rgba(255,255,255,0.04) inset;
}
.studio-download-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* 加载旋转动画 */
.toast-spinner {
    width: 15px; height: 15px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: rgba(100,180,255,0.8);
    border-radius: 50%;
    animation: studioToastSpin 0.75s linear infinite;
    flex-shrink: 0;
}
@keyframes studioToastSpin {
    to { transform: rotate(360deg); }
}
/* 状态图标 */
.toast-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.toast-icon.toast-success { color: #5ee6a4; }
.toast-icon.toast-error { color: #ff6b6b; }
.toast-text {
    white-space: nowrap;
}

/* ===== 保存到素材库弹框 ===== */
.mat-save-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.mat-save-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.mat-save-dialog {
    width: 640px;
    max-height: 520px;
    background: rgba(30,32,40,0.97);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 1px 2px rgba(255,255,255,0.04) inset;
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.mat-save-overlay.visible .mat-save-dialog {
    transform: scale(1) translateY(0);
}

/* 弹框头部 */
.mat-save-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    flex-shrink: 0;
}
.mat-save-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.mat-save-title svg {
    color: rgba(100,180,255,0.85);
}
.mat-save-new-folder {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.mat-save-new-folder:hover {
    background: rgba(255,255,255,0.06);
}

.tpl-save-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.tpl-save-field span {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.tpl-save-field input,
.tpl-save-field select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.9);
    font-size: 13px;
}
.tpl-save-field input:focus,
.tpl-save-field select:focus {
    outline: none;
    border-color: rgba(100,180,255,0.45);
}

/* 标签切换 */
.mat-save-tabs {
    display: flex;
    margin: 0 20px 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 3px;
    flex-shrink: 0;
}
.mat-save-tab {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mat-save-tab.active {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}
.mat-save-tab:hover:not(.active) {
    color: rgba(255,255,255,0.7);
}

/* 文件夹列表（在 mat-save-body 内部，不独立滚动） */
.mat-save-list {
    padding: 0 4px;
    min-height: 80px;
}

.mat-save-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.12s ease;
    user-select: none;
}
.mat-save-item:hover {
    background: rgba(255,255,255,0.06);
}
.mat-save-item.selected {
    background: rgba(100,180,255,0.12);
}
.mat-save-item.selected .mat-item-name {
    color: rgba(255,255,255,0.95);
}
.mat-item-arrow {
    color: rgba(255,255,255,0.25);
    font-size: 13px;
    flex-shrink: 0;
}
.mat-item-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    flex-shrink: 0;
    color: rgba(255,255,255,0.45);
}
.mat-save-item.selected .mat-item-icon {
    background: rgba(100,180,255,0.15);
    color: rgba(100,180,255,0.85);
}
.mat-item-name {
    font-size: 13.5px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

/* 底部按钮区 */
.mat-save-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.mat-save-btn {
    padding: 8px 22px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mat-save-btn:hover {
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.85);
}
.mat-save-btn.primary {
    background: linear-gradient(135deg, #4a90d9, #357abd);
    border-color: transparent;
    color: #fff;
    font-weight: 500;
}
.mat-save-btn.primary:hover {
    background: linear-gradient(135deg, #5aa0e9, #408acd);
    box-shadow: 0 2px 12px rgba(74,144,217,0.35);
}
.mat-save-btn.primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* 新建文件夹内联输入行（在目录列表最前面） */
.mat-save-new-folder-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid rgba(212,168,85,0.35);
    background: rgba(212,168,85,0.06);
    margin-bottom: 4px;
}
.mat-save-new-folder-row .mat-save-item-arrow {
    color: rgba(255,255,255,0.25);
    font-size: 14px; width: 12px; text-align:center;
}
.mat-save-new-folder-row .mat-save-item-icon {
    flex-shrink: 0;
}
.mat-new-folder-input-inline {
    flex: 1;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid rgba(212,168,85,0.4);
    background: rgba(0,0,0,0.3);
    color: #eee;
    font-size: 13.5px;
    outline: none;
    min-width: 0;
}
.mat-new-folder-input-inline:focus {
    border-color: rgba(212,168,85,0.7);
}
.mat-new-folder-input-inline::placeholder {
    color: rgba(255,255,255,0.3);
}

/* 文件夹模式下保存按钮高亮 */
.mat-save-btn.primary.folder-mode {
    background: linear-gradient(135deg, #d4a855, #c49a45);
    box-shadow: 0 2px 10px rgba(212,168,85,0.35);
}

.image-area.has-result .node-ai-result-wrap:first-child {
    width: 100%;
    min-height: 180px;
}
.image-area.has-result .node-ai-result-wrap:first-child .node-ai-result-img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
}
.image-area.has-result .node-ai-result-wrap.is-broken {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    background: rgba(12, 13, 16, 0.95);
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
}
.image-area.has-result .node-ai-result-wrap.is-broken::after {
    content: '图片加载失败';
}
.image-area.has-result .node-ai-result-wrap.is-broken .node-ai-result-img {
    display: none;
}
.image-area.has-result:not(.has-multi):not(.gallery-mode) .node-ai-result-wrap:not(:first-child) {
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 6px;
}
.image-area.has-result:not(.has-multi):not(.gallery-mode) .node-ai-result-wrap:not(:first-child) .node-ai-result-img {
    height: 120px;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.image-area.has-result:not(.has-multi):not(.gallery-mode) .node-ai-result-wrap:not(:first-child):hover img {
    opacity: 1;
}

/* 多图紧凑：仅显示主图，不撑开布局 */
.image-area.has-multi:not(.image-view-stack):not(.gallery-mode) {
    position: relative;
}
.image-area.has-multi:not(.image-view-stack):not(.gallery-mode) .node-ai-result-wrap.is-stack-active {
    position: relative;
    width: 100%;
    min-height: 180px;
    transform: none;
}
.image-area.has-multi:not(.image-view-stack):not(.gallery-mode) .node-ai-result-wrap.is-stack-active .node-ai-result-img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}
.image-area.has-multi:not(.image-view-stack):not(.gallery-mode) .node-ai-result-wrap.is-stack-hidden {
    display: none !important;
}

/* 堆叠层溢出到节点外，不撑开节点尺寸 */
.canvas-node.node-image:has(.image-area.image-view-stack) .node-scale-wrap,
.canvas-node.node-image .image-area.has-multi.image-view-stack {
    overflow: visible !important;
}
.image-area.has-multi.image-view-stack {
    position: relative;
    overflow: visible !important;
    margin: 0;
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 14px;
    overflow: hidden;
    transform-origin: 100% 100%;
    transition: transform 0.32s cubic-bezier(0.34, 1.15, 0.64, 1), opacity 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    will-change: transform;
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap .node-ai-result-img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    pointer-events: none;
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-hidden {
    display: none !important;
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-active {
    z-index: 10;
    opacity: 1;
    filter: none;
    transform: rotate(0deg);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.2),
        0 16px 40px rgba(0,0,0,0.5);
    cursor: default;
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-behind {
    cursor: pointer;
    background: linear-gradient(165deg, rgba(42,44,52,0.97) 0%, rgba(26,28,34,0.99) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.04);
    pointer-events: auto;
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-behind .node-ai-result-img {
    opacity: 0;
    visibility: hidden;
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-behind:hover {
    border-color: rgba(255,255,255,0.16);
    box-shadow:
        0 10px 26px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.07);
}
/* 伞形：以右下为轴，越靠后旋转越大，右上角扇形突出 */
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-depth-1 {
    z-index: 7;
    background: linear-gradient(165deg, rgba(50,52,60,0.96) 0%, rgba(32,34,40,0.98) 100%);
    transform: rotate(3deg);
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-depth-2 {
    z-index: 5;
    background: linear-gradient(165deg, rgba(40,42,50,0.97) 0%, rgba(26,28,34,0.99) 100%);
    transform: rotate(6deg);
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-depth-3 {
    z-index: 3;
    background: linear-gradient(165deg, rgba(34,36,44,0.98) 0%, rgba(20,22,28,1) 100%);
    transform: rotate(9deg);
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-behind.is-stack-depth-1:hover {
    transform: rotate(3.5deg);
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-behind.is-stack-depth-2:hover {
    transform: rotate(6.5deg);
}
.image-area.has-multi.image-view-stack .node-ai-result-wrap.is-stack-behind.is-stack-depth-3:hover {
    transform: rotate(9.5deg);
}

/* 多图：默认隐藏收藏与数量，点击节点（show-ui）后显示 */
.image-area.has-multi:not(.gallery-mode) .img-stack-star-btn,
.image-area.has-multi:not(.gallery-mode) .img-count-badge {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease, background 0.15s ease, transform 0.15s ease;
}
.canvas-node.node-image.show-ui .image-area.has-multi:not(.gallery-mode) .img-stack-star-btn,
.canvas-node.node-image.show-ui .image-area.has-multi:not(.gallery-mode) .img-count-badge {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.img-stack-star-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(16,18,24,0.82);
    color: rgba(255,255,255,0.78);
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: opacity 0.18s ease, visibility 0.18s ease, all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.img-stack-star-btn svg {
    width: 13px;
    height: 13px;
}
.img-stack-star-btn:hover {
    background: rgba(28,30,38,0.94);
    color: rgba(255,255,255,0.95);
}
.img-stack-star-btn.active {
    color: #fbbf24;
    border-color: rgba(251,191,36,0.35);
}

.img-count-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 9px 4px 10px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(16,18,24,0.86);
    color: rgba(255,255,255,0.94);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: opacity 0.18s ease, visibility 0.18s ease, background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.32);
}
.img-count-badge:hover {
    background: rgba(28,30,38,0.94);
    transform: scale(1.02);
}
.img-count-num {
    min-width: 0.65em;
    text-align: center;
    pointer-events: auto;
    letter-spacing: 0.01em;
}
.img-count-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.72;
    margin-left: 1px;
    pointer-events: auto;
}

.node-loading-overlay.node-loading-stack {
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: 14px;
    background: rgba(8,9,12,0.55);
    backdrop-filter: blur(2px);
}

/* 平铺画廊模式：分页展示，画廊时隐藏工具栏与 AI 面板 */
.canvas-node.node-image.image-gallery-expanded .node-top-bar,
.canvas-node.node-image.image-gallery-expanded .node-ai-float-wrap {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.canvas-node.node-image.image-gallery-expanded {
    width: var(--studio-node-w-image, 360px) !important;
    min-width: 0;
    max-width: var(--studio-node-w-image, 360px) !important;
    z-index: 40;
    overflow: visible !important;
}
.canvas-node.node-image.image-gallery-expanded .node-scale-wrap {
    overflow: visible !important;
}
.canvas-node.node-image.image-gallery-expanded .node-upload-area.image-area.gallery-mode,
.image-area.has-result.gallery-mode {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: visible;
    background: transparent;
    position: relative;
}
.image-area.gallery-mode {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: visible;
    padding: 0 0 30px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.image-area.gallery-mode .node-ai-result-wrap.is-gallery-item {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none;
    aspect-ratio: var(--gallery-aspect, 1 / 1);
    border-radius: 14px;
    overflow: visible;
    cursor: pointer;
    background: rgba(255,255,255,0.04);
    transition: box-shadow 0.22s ease, opacity 0.22s ease;
    box-sizing: border-box;
}
.image-area.gallery-mode .node-ai-result-wrap.is-gallery-item .node-ai-result-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    overflow: hidden;
}
.image-area.gallery-mode .node-ai-result-wrap.is-gallery-primary {
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.92),
        0 0 24px rgba(255,255,255,0.12);
    opacity: 1;
    z-index: 2;
}
.image-area.gallery-mode .node-ai-result-wrap.is-gallery-item:not(.is-gallery-primary) {
    opacity: 1;
    filter: none;
    box-shadow: none;
}
.image-area.gallery-mode .node-ai-result-wrap.is-gallery-item:not(.is-gallery-primary):hover {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}

/* 画廊：悬停才显示工具栏 / 设为主图 */
.image-area.gallery-mode .img-gallery-actions,
.image-area.gallery-mode .img-set-main-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0.16s ease, background 0.15s ease, transform 0.15s ease;
}
.image-area.gallery-mode .node-ai-result-wrap.is-gallery-item:hover .img-gallery-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.image-area.gallery-mode .node-ai-result-wrap.is-gallery-item:not(.is-gallery-primary):hover .img-set-main-btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.image-area.has-result.gallery-mode .node-ai-result-wrap.is-gallery-item,
.image-area.has-result.gallery-mode .node-ai-result-wrap.is-gallery-item:first-child {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 100%;
}
.image-area.has-result.gallery-mode .node-ai-result-wrap.is-gallery-item:first-child .node-ai-result-img {
    min-height: 0 !important;
    height: 100%;
    width: 100%;
}

.img-gallery-actions {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 3px 6px;
    border-radius: 16px;
    background: rgba(22,24,30,0.88);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.img-gallery-act-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.img-gallery-act-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.95);
}
.img-gallery-act-btn.active {
    color: #fbbf24;
}

.img-set-main-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    padding: 5px 11px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(18,20,26,0.9);
    color: rgba(255,255,255,0.88);
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.15s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}
.img-set-main-btn:hover {
    background: rgba(32,35,44,0.96);
    color: #fff;
}

.image-gallery-dots {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    bottom: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    z-index: 5;
    pointer-events: auto;
    width: max-content;
    padding: 2px 0;
}
.image-gallery-dot {
    width: 32px;
    height: 24px;
    border-radius: 6px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.image-gallery-dot::before {
    content: '';
    display: block;
    width: 28px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.24);
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.image-gallery-dot.active::before {
    width: 32px;
    height: 8px;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.45);
}
.image-gallery-dot:hover:not(.active)::before {
    background: rgba(255,255,255,0.45);
}

/* 画廊：单页 → 双页飞入动效 */
.image-area.gallery-page-animating {
    pointer-events: none;
}
.image-area.gallery-page-animating .image-gallery-dots {
    pointer-events: none;
}
.image-area.gallery-mode .node-ai-result-wrap.is-gallery-fly-pending {
    opacity: 0 !important;
    pointer-events: none;
}
.image-area.gallery-mode .node-ai-result-wrap.is-gallery-fly-reveal {
    animation: galleryFlyReveal 0.24s ease-out forwards;
}
@keyframes galleryFlyReveal {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.image-gallery-fly-clone {
    position: fixed;
    z-index: 100000;
    pointer-events: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.92),
        0 10px 36px rgba(0,0,0,0.42);
    will-change: left, top, width, height;
}
.image-gallery-fly-clone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}

/* ===== 视频结果 ===== */
.video-area.has-result {
    padding: 0;
    background: #000;
}
.video-area.has-result .node-empty-placeholder { display: none; }
.node-video-player-outer {
    width: 100%;
    height: 100%;
}
.custom-video-player {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 150px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.custom-video-player .node-ai-result-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    background: #000;
}
.video-overlay-top {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}
.video-overlay-top .video-ov-btn {
    pointer-events: auto;
}
.video-overlay-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}
.video-overlay-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 70%, transparent 100%);
    pointer-events: none;
}
.video-overlay-bottom > * {
    pointer-events: auto;
}
.video-ov-btn,
.video-play-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.88);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.video-ov-btn:hover,
.video-play-btn:hover {
    background: rgba(0,0,0,0.55);
}
.video-fav-btn.active {
    color: #fbbf24;
}
.video-fav-btn.active svg {
    fill: #fbbf24;
    stroke: #fbbf24;
}
.video-time-current,
.video-time-total {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 28px;
}
.video-progress-bar {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    overflow: hidden;
    cursor: pointer;
}
.video-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: rgba(255,255,255,0.92);
    transition: width 0.08s linear;
}
.custom-video-player.is-playing .video-overlay-center {
    cursor: default;
}
.node-ai-result-video {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background: #000;
    object-fit: cover;
}

/* ===== 音频结果 ===== */
.audio-area.has-result {
    padding: 8px;
    justify-content: flex-start;
    gap: 0;
    background: transparent;
}
.audio-area.has-result .node-empty-placeholder { display: none; }

/* ================================================================
   自定义音频播放器 —— 大波形 + 底部居中控制 + 顶部工具栏
   ================================================================ */
/* ====== 自定义音频播放器（匹配目标设计） ====== */

/* ---- 顶部工具栏（在节点顶部栏 / 替换按钮位置） ---- */
.audio-node-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;          /* ★ 防止文字换行 */
    flex-shrink: 0;
}
.audio-node-toolbar .audio-tb-btn {
    display: inline-flex;        /* ★ 改为 inline-flex 避免撑开 */
    align-items: center;
    gap: 3px;
    padding: 4px 8px;            /* ★ 缩小 padding */
    border: none;
    border-radius: 14px;
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    line-height: 1;              /* ★ 紧凑行高 */
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;         /* ★ 单个按钮也不换行 */
}
.audio-node-toolbar .audio-tb-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}
/* 分隔符 */
.audio-node-toolbar .format-sep {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.12);
    margin: 0 3px;
}

/* 外层容器：仅播放器卡片 */
.audio-player-outer {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ---- 播放器卡片 ---- */
.custom-audio-player {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 180px;
    aspect-ratio: 16/9;
    max-height: 220px;
    border-radius: 18px;
    background: rgba(20,22,28,0.95);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}
.custom-audio-player .node-ai-result-audio {
    display: none;
}

/* ---- 波形区域 ---- */
.custom-audio-player .audio-wave-wrap {
    flex: 1;
    position: relative;
    cursor: pointer;
    margin: 10px 16px 4px;
    min-height: 80px;
}
.custom-audio-player .audio-wave-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* 蓝色播放头 + 向下箭头 ▼ */
.custom-audio-player .audio-playhead {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background: #38bdf8;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0.85;
    box-shadow: 0 0 8px rgba(56,189,248,0.4);
    transition: left 0.08s linear;
}
/* 播放头三角 —— 向下 */
.custom-audio-player .audio-playhead::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5.5px solid transparent;
    border-right: 5.5px solid transparent;
    border-top: 8px solid #38bdf8;
}
/* 遮罩层 */
.custom-audio-player .audio-wave-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* ---- 底部控制：◀ ▶ ▶ 居中 ---- */
.custom-audio-player .audio-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 8px 0 12px;
}
/* 导航按钮 */
.custom-audio-player .audio-nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.custom-audio-player .audio-nav-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.custom-audio-player .audio-nav-btn.disabled {
    opacity: 0.2;
    pointer-events: none;
}
/* 大播放按钮 */
.custom-audio-player .audio-play-big {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.17);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}
.custom-audio-player .audio-play-big:hover {
    background: rgba(255,255,255,0.28);
    transform: scale(1.06);
}
.custom-audio-player .audio-play-big:active {
    transform: scale(0.96);
}

/* ---- 兼容旧版 ---- */
.node-audio-player:not(.custom-audio-player) {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 100%; padding: 0;
}
.node-ai-result-audio:not(.custom-audio-player .node-ai-result-audio) {
    width: 100%; height: 36px; border-radius: 8px; outline: none;
}

/* ===== 3D World 结果 ===== */
.world3d-area.has-result {
    padding: 0;
}
.world3d-area.has-result .node-empty-placeholder { display: none; }
.node-3d-result {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    width: 100%; height: 100%;
    padding: 20px 14px;
    box-sizing: border-box;
}
.node-3d-preview {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 8px;
}
.node-3d-label {
    font-size: 11.5px;
    color: rgba(255,255,255,0.45);
}
.node-3d-link {
    font-size: 11px;
    color: rgba(139,92,246,0.7);
    text-decoration: none;
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid rgba(139,92,246,0.25);
    transition: all 0.15s;
}
.node-3d-link:hover {
    background: rgba(139,92,246,0.1);
    color: #c4b5fd;
    border-color: rgba(139,92,246,0.4);
}

/* 文本类结果 fallback */
.node-ai-text-result {
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255,255,255,0.55);
    word-break: break-word;
}

/* 错误状态 */
.node-error-result {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; margin-top: 4px;
    font-size: 11.5px;
    color: rgba(239,68,68,0.75);
    background: rgba(239,68,68,0.08);
    border-radius: 6px;
    border: 1px solid rgba(239,68,68,0.15);
}

/* 文本结果（非 textarea 节点的纯文本回显） */
.node-ai-text-result {
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(255,255,255,0.7);
    white-space: pre-wrap; word-break: break-word;
}

/* 3D 结果 */
.node-3d-result {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 12px;
}
.node-3d-preview {
    width: 100%; max-height: 200px;
    object-fit: contain; border-radius: 8px;
}
.node-3d-label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
.node-3d-link {
    font-size: 11px;
    color: #a78bfa; text-decoration: none;
    padding: 4px 14px; border: 1px solid rgba(167,139,250,0.35); border-radius: 6px;
    transition: all 0.15s ease;
}
.node-3d-link:hover {
    background: rgba(167,139,250,0.12);
    border-color: rgba(167,139,250,0.55);
}

/* 错误状态 */
.node-error-result {
    display: flex; align-items: center; justify-content: center;
    padding: 10px; margin-top: 4px;
    font-size: 11.5px;
    color: rgba(239,68,68,0.75);
    background: rgba(239,68,68,0.08);
    border-radius: 6px;
    border: 1px solid rgba(239,68,68,0.15);
}

/* ========== 参数标签 — 内联文字风格（首尾帧 · 16:9 · 720P）========== */
.ai-size-select {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
}
.ai-size-select label {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px;
    color: rgba(255,255,255,0.38);
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    transition: color 0.15s ease;
    font-weight: 400;
}
.ai-size-select label:hover {
    color: rgba(255,255,255,0.6);
    background: transparent;
}
.ai-size-select input[type="checkbox"] {
    accent-color: #a78bfa;
    width: 11px; height: 11px;
    margin-top: 0;
    opacity: 0.6;
}

/* 参数项之间的分隔符（用伪元素或直接在 HTML 中加） */
.ai-size-select + .ai-voice-info::before,
.ai-voice-info + .ai-size-select::before,
.ai-size-select + .ai-size-select::before {
    content: '·';
    margin: 0 5px;
    color: rgba(255,255,255,0.18);
    font-size: 11px;
}

/* 语音信息 — 内联 */
.ai-voice-info {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; color: rgba(255,255,255,0.38); margin-right: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
}
.tts-icon { font-size: 10px; opacity: 0.35; }
.voice-name { font-weight: 400; }

/* ========== 参数触发按钮（可点击弹出选择面板）========== */
.ai-params-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
    transition: all 0.15s ease;
    user-select: none;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
}
.ai-params-trigger:hover,
.ai-params-trigger.active {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.13);
}
.ai-params-trigger:hover .param-item,
.ai-params-trigger.active .param-item {
    color: rgba(255,255,255,0.78);
}
.param-item {
    display: inline-block;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    font-weight: 450;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.param-sep {
    margin: 0 4px;
    color: rgba(255,255,255,0.25);
    font-size: 12px;
}

/* ========== 参数选择面板 — 弹出浮层 ========== */
.ai-params-panel {
    display: none;
    position: fixed;
    width: 280px;
    background: rgba(28,30,38,0.97);
    backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.45),
        0 4px 12px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.05);
    z-index: 10000;
    padding: 14px 16px;
    animation: paramsPanelIn 0.18s ease;
}
.ai-params-panel.open { display: block; }
@keyframes paramsPanelIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 面板标题 */
.params-section-title {
    font-size: 10.5px;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

/* 分组行 */
.params-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.params-row:last-child { margin-bottom: 0; }

/* 单选按钮组 */
.param-option-group {
    display: flex;
    gap: 6px;
    flex: 1;
}

.param-opt-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.42);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.param-opt-btn:hover {
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
}
.param-opt-btn.active {
    border-color: rgba(167,139,250,0.35);
    background: rgba(139,92,246,0.12);
    color: rgba(200,180,255,0.9);
    box-shadow: 0 0 8px rgba(139,92,246,0.08);
}
/* 比例选项中的图标 */
.param-ratio-icon {
    font-size: 13px;
    opacity: 0.5;
}
.param-opt-btn.active .param-ratio-icon {
    opacity: 0.9;
}
/* 参考提示角标 */
.param-hint-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 9px;
    color: rgba(255,255,255,0.3);
    margin-left: auto;
    cursor: pointer;
}

/* ========== 视频参数弹框（参考 Wan 2.6 设置面板）========== */
.ai-params-panel.video-params-panel {
    width: 300px;
    padding: 16px 18px 18px;
    border-radius: 18px;
    background: rgba(37, 37, 41, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 20px 56px rgba(0, 0, 0, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.25);
}
.video-params-panel .video-param-section {
    margin-bottom: 16px;
}
.video-params-panel .video-param-section:last-child {
    margin-bottom: 0;
}
.video-params-panel .params-section-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.38);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-bottom: 8px;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.video-params-panel .param-title-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.32);
    cursor: help;
    line-height: 1;
}
.video-params-panel .params-row {
    margin-bottom: 0;
}
.video-params-panel .param-option-group {
    gap: 8px;
    width: 100%;
}
.video-params-panel .param-opt-btn {
    flex: 1;
    min-height: 40px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.42);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}
.video-params-panel .param-opt-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.68);
}
.video-params-panel .param-opt-btn.active {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.88);
    color: rgba(255, 255, 255, 0.96);
    box-shadow: none;
}
.video-params-panel .video-param-section[data-section="mode"] .param-opt-btn {
    min-height: 44px;
    padding: 11px 14px;
    justify-content: center;
    position: relative;
}
.video-params-panel .video-param-section[data-section="mode"] .param-hint-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    width: 16px;
    height: 16px;
    font-size: 10px;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.35);
}
.video-params-panel .param-ratio-btn {
    flex-direction: column;
    gap: 5px;
    padding: 10px 6px 8px;
    min-height: 56px;
}
.video-params-panel .param-ratio-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: rgba(255, 255, 255, 0.38);
    transition: color 0.15s ease;
}
.video-params-panel .param-ratio-label {
    font-size: 12px;
    line-height: 1;
}
.video-params-panel .param-opt-btn.active .param-ratio-svg {
    color: rgba(255, 255, 255, 0.88);
}
.video-params-panel .video-resolution-row .param-opt-btn,
.video-params-panel .video-duration-row .param-opt-btn {
    min-height: 40px;
}

/* 右侧控制组 */
.ai-right-controls {
    display: flex; align-items: center; gap: 8px; margin-left: auto;
}

/* ★ 参数模式下拉选择（关闭/快速/专家）— 自定义触发器 */
.ai-param-select {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 7px;
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    line-height: 1.4;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: inherit;
    position: relative;
    z-index: 10;
}
.ai-param-select .param-arrow {
    width: 0; height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid rgba(255,255,255,0.45);
    margin-left: 2px;
    transition: transform 0.15s ease;
}
.ai-param-select.open .param-arrow {
    transform: rotate(180deg);
}
.ai-param-select:hover {
    border-color: rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.06);
}

/* ★ 参数下拉弹出面板 */
.ai-param-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 90px;
    padding: 4px;
    border-radius: 8px;
    background: rgba(30, 30, 46, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);
    z-index: 200;
    flex-direction: column;
    gap: 1px;
}
.ai-param-dropdown.show {
    display: flex;
}
.ai-param-dropdown .param-drop-item {
    padding: 5px 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
    text-align: left;
}
.ai-param-dropdown .param-drop-item:hover {
    background: rgba(139,92,246,0.15);
    color: #fff;
}
.ai-param-dropdown .param-drop-item.active {
    background: rgba(139,92,246,0.25);
    color: #fff;
    font-weight: 500;
}

/* ★ 图片节点画质+比例触发器 */
.ai-image-params-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1.3;
    transition: border-color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    user-select: none;
    position: relative;
    z-index: 5;
}
.ai-image-params-trigger:hover {
    border-color: rgba(255,255,255,0.22);
    background-color: rgba(255,255,255,0.08);
}
.ai-image-params-trigger.open {
    border-color: rgba(255, 255, 255, 0.28);
    background-color: rgba(255, 255, 255, 0.08);
}
.ai-image-params-trigger .ratio-icon {
    flex-shrink: 0;
    opacity: 0.6;
}
.ai-image-params-trigger .param-arrow {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4.5px solid rgba(255,255,255,0.4);
    margin-left: 1px;
    transition: transform 0.15s ease;
}
.ai-image-params-trigger.open .param-arrow {
    transform: rotate(180deg);
}
.ai-image-params-trigger .image-ratio-label {
    font-weight: 500;
    letter-spacing: 0.3px;
}
.ai-image-params-trigger .param-sep {
    color: rgba(255,255,255,0.2);
    margin: 0 1px;
}
.ai-panel-footer > .ai-image-params-trigger {
    margin-left: 6px;
    margin-right: auto;
}

/* ★ 图片节点画质+比例弹出面板（复用 video-params-panel 样式） */
.ai-image-params-dropdown.video-params-panel.open {
    display: block;
}
.image-params-panel .image-ratio-group {
    flex-wrap: wrap;
}
.image-params-panel .image-ratio-group .param-ratio-btn {
    flex: 1 1 calc(20% - 7px);
    min-width: 48px;
    max-width: calc(20% - 6px);
}

/* 面板 footer 中：紧贴模型选择器右边 */
.ai-panel-footer > .ai-param-select {
    margin-left: 6px;
    margin-right: auto;
}
.ai-param-select:focus {
    border-color: rgba(139,92,246,0.5);
    box-shadow: 0 0 0 2px rgba(139,92,246,0.12);
}

/* ========== 右侧控制组 — 麦克风 / 倍数 / token / 发送 ========== */
.ai-mic-btn {
    width: 24px; height: 24px;
    border-radius: 50%; border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.45;
    color: rgba(255,255,255,0.5);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.ai-mic-btn:hover { opacity: 0.7; color: rgba(255,255,255,0.8); }

/* 数量倍数 — 可点击触发器 */
.ai-mult-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,0.6);
    padding: 2px 6px;
    border-radius: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}
.ai-mult-badge:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.07);
}

/* 数量选择弹出面板 */
.ai-mult-panel {
    display: none;
    position: fixed;
    width: 140px;
    background: rgba(28,30,38,0.97);
    backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.45),
        0 4px 12px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.05);
    z-index: 10000;
    padding: 10px 12px;
    animation: paramsPanelIn 0.18s ease;
}
.ai-mult-panel.open { display: block; }

.mult-panel-title {
    font-size: 10px;
    color: rgba(255,255,255,0.32);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.mult-opt-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mult-opt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.42);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.mult-opt-btn:hover {
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
}
.mult-opt-btn.active {
    border-color: rgba(167,139,250,0.35);
    background: rgba(139,92,246,0.12);
    color: rgba(200,180,255,0.9);
    box-shadow: 0 0 8px rgba(139,92,246,0.08);
}

/* Token 计数 — 带圆角背景风格（50~150） */
.ai-token-count {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 2px 8px;
    gap: 4px;
    transition: all 0.15s ease;
}
.ai-token-count:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.14); }
.token-num {
    display: none; /* 隐藏头像 */
}
.token-val {
    font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 450;
}

/* 发送按钮 — 圆形（带浅色背景） */
.ai-send-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.18s ease;
}
.ai-send-btn:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.24);
    color: rgba(255,255,255,0.88);
    transform: scale(1.06);
}
.ai-send-btn:active { transform: scale(0.95); }
.ai-send-btn svg { width: 13px; height: 13px; stroke-width: 2.3; }

/* Token 头像 — 隐藏（token 改为纯文字显示） */
.token-avatar { display: none; }

/* 节点类型尺寸适配 */
.canvas-node.node-text { width: var(--studio-node-w-text, 408px); }
.canvas-node.node-image { width: var(--studio-node-w-image, 360px); }
.canvas-node.node-video { width: var(--studio-node-w-media, 384px); }
.canvas-node.node-audio { width: var(--studio-node-w-media, 384px); }
.canvas-node.node-world3d { width: var(--studio-node-w-media, 384px); }

/* ---- 文本节点专用样式（匹配目标设计） ---- */

/* 文本节点的格式工具栏 — 内嵌胶囊形 */
.text-inline-bar {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 6px 10px;
    margin-bottom: 8px;
    border-radius: 22px;
    background: rgba(32, 33, 40, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 圆点样式按钮 — 背景色 */
.fmt-color-wrap {
    position: relative;
    flex-shrink: 0;
}
.fmt-circle-btn {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(30, 30, 35, 1);
    font-size: 11px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}
.fmt-color-swatch {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}
.fmt-circle-btn:hover {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.fmt-color-wrap.is-open .fmt-circle-btn {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}
.fmt-color-palette {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    border-radius: 14px;
    background: rgba(28, 30, 36, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
    z-index: 90;
}
.fmt-color-palette[hidden] {
    display: none !important;
}
.fmt-color-swatch-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.fmt-color-swatch-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}
.fmt-color-swatch-btn.is-default {
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}
.fmt-color-swatch-btn.is-default::after {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 50%;
    height: 2px;
    background: rgba(255, 255, 255, 0.55);
    transform: rotate(-45deg);
}

/* 工具栏悬停注释（文本 / 图片 / 视频节点） */
.node-top-bar .format-btn[data-tip] {
    position: relative;
}
.node-top-bar .format-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(16, 18, 24, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease;
    z-index: 100;
}
.node-top-bar .format-btn[data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
}
.text-inline-bar .format-btn .fmt-pilcrow {
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
}
.text-inline-bar .format-btn svg {
    display: block;
}

/* "Text" 标签行 */
.text-node-label-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 2px 4px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    letter-spacing: 0.2px;
}
.text-node-label-row svg {
    opacity: 0.5;
    flex-shrink: 0;
}

/* 文本编辑区 — 大圆角深色框，新建空节点默认 1:1 */
.node-text .node-preview-area,
.node-text .text-node-editor {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(16, 17, 22, 0.95);
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.7;
    outline: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
    overflow-y: auto;
    word-break: break-word;
}
.node-text textarea.node-preview-area {
    resize: none;
}
.node-text .text-node-editor:focus {
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.06);
}
.node-text .text-node-editor:empty::before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, 0.22);
    pointer-events: none;
}
.node-text .text-node-editor h1 {
    font-size: 1.65em;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.35em;
}
.node-text .text-node-editor h2 {
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.35em;
}
.node-text .text-node-editor h3 {
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.35em;
}
.node-text .text-node-editor p {
    margin: 0 0 0.5em;
}
.node-text .text-node-editor ul,
.node-text .text-node-editor ol {
    margin: 0.35em 0 0.6em;
    padding-left: 1.35em;
}
.node-text .text-node-editor li {
    margin: 0.15em 0;
}
.node-text .text-node-editor hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    margin: 12px 0;
}
.node-text .text-node-editor b,
.node-text .text-node-editor strong {
    font-weight: 700;
}
.node-text .text-node-editor i,
.node-text .text-node-editor em {
    font-style: italic;
}
.node-text .node-preview-area::placeholder {
    color: rgba(255, 255, 255, 0.22);
}

/* ---- 图片节点 ---- */
.node-image .node-type-icon { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.node-image .node-preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    background:
        repeating-conic-gradient(rgba(255,255,255,0.03) 0% 25%, transparent 0% 50%)
        50% / 16px 16px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.node-image .node-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.node-image .node-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.25);
}
.node-image .node-placeholder svg { opacity: 0.4; }
.node-image .node-placeholder span { font-size: 11.5px; }

/* ---- 视频节点 ---- */
.node-video .node-type-icon { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.node-video .node-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.node-video .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.node-video .play-overlay:hover { background: rgba(0, 0, 0, 0.4); }
.node-video .play-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.node-video .play-icon svg { margin-left: 2px; color: #111; }
.node-video .video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ---- 音频节点 ---- */
.node-audio .node-type-icon { background: rgba(168, 85, 247, 0.18); color: #d8b4fe; }
.node-audio .audio-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 12px 14px;
    height: 56px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.audio-wave-bar {
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(to top, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.8));
    animation: audioWave 1.2s ease-in-out infinite;
}
.audio-wave-bar:nth-child(odd) { animation-delay: -0.3s; }
.audio-wave-bar:nth-child(even) { animation-delay: -0.6s; }
@keyframes audioWave {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}
.node-audio .audio-info {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.audio-name { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.audio-time { font-size: 11px; color: rgba(255, 255, 255, 0.3); font-variant-numeric: tabular-nums; }

/* ---- 3D 世界节点 ---- */
.node-3dworld .node-type-icon { background: rgba(6, 182, 212, 0.15); color: #67e8f9; }
.node-3dworld .node-preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px dashed rgba(6, 182, 212, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.node-3dworld .cube-spinner {
    width: 48px;
    height: 48px;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate 6s linear infinite;
}
@keyframes cubeRotate {
    from { transform: rotateX(-20deg) rotateY(0deg); }
    to { transform: rotateX(-20deg) rotateY(360deg); }
}
.cube-face {
    position: absolute;
    width: 48px;
    height: 48px;
    border: 1.5px solid rgba(6, 182, 212, 0.35);
    background: rgba(6, 182, 212, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgba(103, 232, 249, 0.4);
}
.cube-face.front  { transform: translateZ(24px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(24px); }
.cube-face.right  { transform: rotateY(90deg) translateZ(24px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(24px); }
.cube-face.top    { transform: rotateX(90deg) translateZ(24px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(24px); }

/* ---- 播放列表节点 ---- */
.node-playlist .node-type-icon { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.node-playlist .playlist-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.playlist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.12s;
    cursor: pointer;
}
.playlist-item:hover { background: rgba(255, 255, 255, 0.05); }
.playlist-thumb {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(239,68,68,0.2));
    flex-shrink: 0;
}
.playlist-item-info { flex: 1; min-width: 0; }
.playlist-item-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.playlist-item-duration {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 1px;
}
.playlist-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 4px;
}
.playlist-add-btn:hover {
    border-color: rgba(245, 158, 11, 0.3);
    color: rgba(245, 158, 11, 0.7);
    background: rgba(245, 158, 11, 0.05);
}

/* ---- 图片编辑器节点 ---- */
.node-imgeditor .node-type-icon { background: rgba(236, 72, 153, 0.15); color: #f9a8d4; }
.node-imgeditor .editor-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.editor-tool-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.editor-tool-btn:hover { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.75); }
.editor-tool-btn.active { background: rgba(236, 72, 153, 0.15); color: #f9a8d4; }
.node-imgeditor .editor-canvas {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 8px;
    background:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.img-placeholder-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
}

/* ---- AI 提示词节点（描述输入） ---- */
.node-prompt .node-type-icon { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.node-prompt .prompt-input-wrap {
    position: relative;
}
.node-prompt .prompt-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    resize: none;
    font-family: inherit;
    box-sizing: border-box;
    min-height: 52px;
    transition: border-color 0.15s;
}
.node-prompt .prompt-input:focus { border-color: rgba(59, 130, 246, 0.35); }
.node-prompt .prompt-input::placeholder { color: rgba(255, 255, 255, 0.22); }
.node-prompt .prompt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}
.prompt-model {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.prompt-model svg { color: rgba(255, 255, 255, 0.35); }
.prompt-send {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.15s;
}
.prompt-send:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* 节点调整大小手柄（选中时显示） */
.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(99, 102, 241, 0.6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 15;
}
.canvas-node.selected .resize-handle { opacity: 1; }
.resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
.resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
.resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
.resize-handle.n { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.resize-handle.s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.resize-handle.w { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }
.resize-handle.e { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }

/* ========== AI 助手悬浮按钮（右下角） ========== */
.ai-assist-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9900;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(12px);
}
.ai-assist-fab:hover {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
    transform: scale(1.06);
    box-shadow: 0 4px 20px rgba(99,102,241,0.25);
}
.ai-assist-fab.active {
    background: rgba(99,102,241,0.3);
    color: #a5b4fc;
}
/* 面板打开时隐藏悬浮按钮 */
.ai-assist-fab.panel-open {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

/* ========== 面板遮罩 ========== */
.ai-chat-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 9910;
    opacity: 0;
    visibility: hidden;
    transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
}
.ai-chat-backdrop.open {
    opacity: 1;
    visibility: visible;
}

/* ========== AI 助手对话框面板 ========== */
.ai-chat-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 520px;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border-left: 1px solid rgba(255,255,255,0.06);
    background: #16171c;
    box-shadow: -12px 0 50px rgba(0,0,0,0.55), -4px 0 16px rgba(0,0,0,0.25);
    z-index: 9920;
    opacity: 0;
    visibility: hidden;
    transform: translateX(36px);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ai-chat-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 面板头部操作栏 */
.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    padding: 12px 16px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ai-chat-header-left {
    display: flex;
    align-items: center;
    gap: 2px;
}
/* 当前话题标题 */
.ai-chat-session-title {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-left: 6px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-chat-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ai-chat-header-btn {
    width: 32px; height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
    font-size: 11.5px;
    white-space: nowrap;
}
.ai-chat-header-btn:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
}
.ai-chat-close-btn {
    border-color: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.3);
}
.ai-chat-close-btn:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.15);
    color: rgba(252,165,165,0.8);
}

/* 聊天内容区 — 欢迎区域推到底部 */
.ai-chat-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 16px 8px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ai-chat-body::-webkit-scrollbar { width: 3px; }
.ai-chat-body::-webkit-scrollbar-track { background: transparent; }
.ai-chat-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 2px; }

/* ★ 欢迎区 — 更大气 */
.ai-chat-welcome { 
    margin-top: auto;
    text-align: left; 
    margin-bottom: 20px;
}
.ai-chat-logo {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}
/* Logo：波浪/水滴形图标 */
.ai-chat-logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e7ff 0%, #a78bfa 40%, #7c3aed 80%);
    box-shadow: 0 2px 10px rgba(124,58,237,0.3);
    position: relative;
}
.ai-chat-logo-icon::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, transparent 60%),
                linear-gradient(135deg, rgba(167,139,250,0.9) 0%, rgba(124,58,237,0.95) 100%);
}
.ai-chat-greeting { 
    font-size: 20px; 
    font-weight: 700; 
    color: #f0f0f0; 
    margin: 0 0 6px; 
    line-height: 1.3; 
    letter-spacing: -0.01em;
}
.ai-chat-subtitle { 
    font-size: 14px; 
    color: rgba(255,255,255,0.35); 
    margin: 0; 
    line-height: 1.45; 
}

/* ★ 快捷建议 — 卡片风格（参考截图） */
.ai-chat-suggestions { 
    display: flex; 
    flex-wrap: wrap;
    gap: 10px; 
    display: none;
    margin-top: 16px;
}
.ai-suggest-btn {
    display: inline-flex; 
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px; 
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.55); 
    font-size: 12.5px;
    cursor: pointer; 
    transition: all 0.15s ease;
    font-family: inherit; 
    text-align: left;
    max-width: 200px;
}
.ai-suggest-btn svg {
    flex-shrink: 0;
}
.ai-suggest-btn:hover {
    background: rgba(139,92,246,0.08);
    border-color: rgba(139,92,246,0.2);
    color: rgba(255,255,255,0.85);
}
.ai-suggest-icon {
    font-size: 14px;
    opacity: 0.6;
    margin-bottom: 2px;
}
.ai-suggest-title {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    line-height: 1.35;
}
.ai-suggest-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.32);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 底部输入区 — 更宽更舒展 */
.ai-chat-footer {
    padding: 12px 14px 16px;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.04);
    background: rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 模式选择器：文本 / 图片 / 视频 */
.ai-mode-selector {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    width: fit-content;
}
.ai-mode-btn {
    padding: 5px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-size: 12.5px;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    font-family: inherit;
}
.ai-mode-btn:hover {
    color: rgba(255,255,255,0.75);
}
.ai-mode-btn.active {
    background: rgba(139,92,246,0.28);
    color: #c4b5fd;
    font-weight: 500;
}

/* ★ 输入卡片 — 全宽圆角卡片 */
.ai-chat-input-wrap {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    background: rgba(255,255,255,0.038);
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ai-chat-input-wrap:focus-within {
    border-color: rgba(139,92,246,0.28);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.06);
}

/* 输入框工具栏（旧版保留兼容） */
.ai-input-toolbar { 
    display: flex; 
    gap: 1px; 
    flex-shrink: 0; 
}
.ai-input-tool-btn {
    width: 28px; 
    height: 28px; 
    border-radius: 7px;
    border: none; 
    background: transparent;
    color: rgba(255,255,255,0.22); 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.12s ease;
    flex-shrink: 0;
}
.ai-input-tool-btn:hover { 
    background: rgba(255,255,255,0.06); 
    color: rgba(255,255,255,0.5); 
}

/* 输入框 */
.ai-chat-input {
    width: 100%;
    background: transparent; 
    border: none; 
    outline: none;
    box-shadow: none;
    color: rgba(255,255,255,0.88); 
    font-size: 14px;
    font-family: inherit; 
    line-height: 1.55; 
    resize: none;
    min-height: 90px; 
    max-height: 220px; 
    padding: 2px 0 0;
    margin: 0;
}
.ai-chat-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.ai-chat-input::placeholder { 
    color: rgba(255,255,255,0.25); 
}

/* ★ 底部操作栏 — 紧凑一行 */
.ai-chat-actions { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    padding-top: 6px;
}
/* 右侧元素靠齐：模型/语音/发送 */
#aiModelPickerBottom {
    margin-left: auto;
}

/* ★ 工具按钮 (+ / 🎤) */
.ai-tool-btn {
    width: 32px; 
    height: 32px; 
    border-radius: 8px;
    border: none; 
    background: transparent;
    color: rgba(255,255,255,0.35); 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.ai-tool-btn:hover { 
    background: rgba(255,255,255,0.07); 
    color: rgba(255,255,255,0.65); 
}
.ai-action-btn {
    width: 30px; 
    height: 30px; 
    border-radius: 8px;
    border: 1px solid transparent; 
    background: transparent;
    color: rgba(255,255,255,0.3); 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.15s ease; 
    flex-shrink: 0;
}
.ai-action-btn:hover { 
    background: rgba(255,255,255,0.06); 
    color: rgba(255,255,255,0.6);
    border-color: rgba(255,255,255,0.08);
}

/* ★ 确认模式选择器 — 手动确认▼ */
.ai-confirm-select {
    display: flex; 
    align-items: center; 
    gap: 4px;
    padding: 5px 10px; 
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.4); 
    font-size: 12px;
    cursor: pointer; 
    transition: all 0.15s ease;
    user-select: none; 
    white-space: nowrap;
}
.ai-confirm-select:hover { 
    border-color: rgba(255,255,255,0.1); 
    color: rgba(255,255,255,0.6); 
    background: rgba(255,255,255,0.04);
}
.ai-select-arrow {
    margin-left: 2px;
    font-size: 10px;
    opacity: 0.5;
}

/* 确认模式下拉菜单 */
.ai-confirm-select { position: relative; }
.ai-confirm-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    background: #1e1f26;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    z-index: 200;
}
.ai-confirm-dropdown.open { display: block; }
.ai-confirm-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.12s ease;
    color: rgba(255,255,255,0.5);
}
.ai-confirm-option:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
.ai-confirm-option.active { background: rgba(139,92,246,0.12); color: rgba(255,255,255,0.85); }
.ai-confirm-option div { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.ai-confirm-option strong { font-size: 13px; font-weight: 500; }
.ai-confirm-option small { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 1px; }
.ai-confirm-check { color: #a78bfa; flex-shrink: 0; display: none; }
.ai-confirm-option.active .ai-confirm-check { display: block; }

/* 发送按钮 */
.ai-send-btn {
    width: 34px; 
    height: 34px; 
    border-radius: 50%;
    border: none; 
    background: rgba(255,255,255,0.12);
    color: rgba(220,220,230,0.85); 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.18s ease; 
    flex-shrink: 0; 
}
.ai-send-btn:hover { 
    background: rgba(139,92,246,0.35); 
    color: #fff; 
    transform: scale(1.05); 
}
.ai-send-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* 停止生成按钮 */
.ai-stop-btn {
    margin-right: auto;
}

/* ========== LLM 模型选择器（底部输入栏）========== */
.ai-model-picker {
    position: relative;
    user-select: none;
}
.ai-model-current {
    display: flex; 
    align-items: center; 
    gap: 5px;
    padding: 4px 10px; 
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.5); 
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.ai-model-current:hover { 
    border-color: rgba(139,92,246,0.25); 
    color: rgba(255,255,255,0.75); 
    background: rgba(255,255,255,0.04);
}
.ai-model-current .ai-model-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.ai-model-current .ai-model-icon.ds-icon {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
}
.ai-model-arrow {
    font-size: 10px;
    opacity: 0.45;
}

/* 下拉菜单 */
.ai-model-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: #1e1f26;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 200;
}
.ai-model-dropdown.open {
    display: block;
}

/* 底部模型选择器：下拉菜单向上弹出 */
#aiModelDropdownBottom {
    top: auto;
    bottom: calc(100% + 6px);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.ai-model-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.ai-model-option:hover {
    background: rgba(255,255,255,0.06);
}
.ai-model-option.active {
    background: rgba(139,92,246,0.12);
}
.ai-model-option .ai-model-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.ai-model-option .ai-model-icon.ds-icon {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
}
.ai-model-info {
    display: flex;
    flex-direction: column;
}
.ai-model-info .ai-model-name {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 500;
}
.ai-model-info .ai-model-desc {
    color: rgba(255,255,255,0.35);
    font-size: 11px;
    margin-top: 1px;
}

/* ========== 聊天消息列表 ========== */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 4px;
}
.ai-chat-messages::-webkit-scrollbar { width: 3px; }
.ai-chat-messages::-webkit-scrollbar-track { background: transparent; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 2px; }

/* 消息气泡 */
.ai-msg {
    margin-bottom: 16px;
    animation: aiMsgIn 0.25s ease;
}
@keyframes aiMsgIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.ai-msg-user {
    display: flex;
    justify-content: flex-end;
}
.ai-msg-user .ai-msg-bubble {
    background: rgba(139,92,246,0.2);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 16px 16px 4px 16px;
    max-width: 85%;
    padding: 10px 14px;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
    white-space: pre-wrap;
}
.ai-msg-assistant .ai-msg-bubble {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px 16px 16px 4px;
    max-width: 92%;
    padding: 10px 14px;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
}
.ai-msg-label {
    font-size: 10.5px;
    color: rgba(255,255,255,0.25);
    margin-bottom: 3px;
    padding: 0 4px;
}
.ai-msg-user .ai-msg-label {
    text-align: right;
}

/* AI 回复中的粗体/列表简易样式 */
.ai-msg-assistant .ai-msg-bubble strong,
.ai-msg-assistant .ai-msg-bubble b {
    color: rgba(255,255,255,0.95);
}
.ai-msg-assistant .ai-msg-bubble code {
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
    font-family: 'SF Mono', Consolas, monospace;
}
.ai-msg-assistant .ai-msg-bubble pre {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 6px 0;
}
.ai-msg-assistant .ai-msg-bubble pre code {
    background: none;
    padding: 0;
}

/* 加载动画 */
.ai-chat-loading {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.ai-load-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    animation: aiLoadBounce 1.2s infinite ease-in-out;
}
.ai-load-dot:nth-child(1) { animation-delay: 0s; }
.ai-load-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-load-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiLoadBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* 打字中指示器 */
.ai-msg-typing .ai-msg-bubble {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 16px;
}
.ai-msg-typing .ai-load-dot {
    width: 6px;
    height: 6px;
}

/* 异步生成中的消息 —— 思考中状态（参考截图风格） */
.ai-msg-pending .ai-msg-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.4);
    font-style: normal;
    animation: none;
    padding: 14px 16px;
    background: transparent;
    border: none;
}
.ai-msg-pending .ai-thinking-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-msg-pending .ai-thinking-text {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
}
.ai-msg-pending .ai-thinking-dots {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
    margin-left: 2px;
}
.ai-msg-pending .ai-thinking-dots span {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    animation: aiThinkDot 1.2s ease-in-out infinite;
}
.ai-msg-pending .ai-thinking-dots span:nth-child(1) { animation-delay: 0s; }
.ai-msg-pending .ai-thinking-dots span:nth-child(2) { animation-delay: 0.25s; }
.ai-msg-pending .ai-thinking-dots span:nth-child(3) { animation-delay: 0.5s; }
@keyframes aiThinkDot {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
    40% { transform: translateY(-8px); opacity: 1; }
}
@keyframes aiPendingPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ===== AI 消息底部操作栏（始终可见，参考截图风格） ===== */
.ai-msg-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ai-msg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.15s ease;
}
.ai-msg-action-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
}
.ai-msg-action-btn.copied {
    color: #10b981;
    background: rgba(16,185,129,0.1);
}
.ai-msg-action-btn.liked {
    color: #f472b6;
    background: rgba(244,114,182,0.1);
}
.ai-msg-action-btn.disliked {
    color: #f87171;
    background: rgba(248,113,113,0.1);
}
.ai-msg-action-divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.06);
    margin: 0 2px;
}
.ai-msg-regenerate {
    margin-left: auto;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.ai-msg-regenerate:hover {
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.05);
}

/* ===== AI 消息 Markdown 增强 ===== */
.ai-msg-assistant .ai-msg-bubble {
    white-space: normal;
}
.ai-msg-assistant .ai-msg-bubble h3 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    margin: 10px 0 6px;
    line-height: 1.4;
}
.ai-msg-assistant .ai-msg-bubble h3:first-child {
    margin-top: 0;
}
.ai-msg-assistant .ai-msg-bubble p {
    margin: 4px 0;
    line-height: 1.7;
    color: rgba(255,255,255,0.78);
}
.ai-msg-assistant .ai-msg-bubble br {
    display: block;
    content: '';
    margin-bottom: 4px;
}
/* 分隔线 */
.ai-msg-assistant .ai-msg-bubble hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 8px 0;
}
/* 列表样式 */
.ai-msg-assistant .ai-msg-bubble ul,
.ai-msg-assistant .ai-msg-bubble ol {
    margin: 4px 0;
    padding-left: 18px;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
}
.ai-msg-assistant .ai-msg-bubble li {
    margin: 2px 0;
}
/* 用户消息保持 pre-wrap */
.ai-msg-user .ai-msg-bubble {
    white-space: pre-wrap;
}

/* 消息中的图片 */
.ai-msg-assistant .ai-msg-bubble img {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 6px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ai-msg-assistant .ai-msg-bubble img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
/* 消息中的视频 */
.ai-msg-assistant .ai-msg-bubble video {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 6px;
    background: #000;
}

/* 错误提示条 */
.ai-chat-error {
    padding: 8px 16px;
    margin: 0 16px 4px;
    border-radius: 8px;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.2);
    color: rgba(252,165,165,0.9);
    font-size: 12px;
    flex-shrink: 0;
    animation: aiMsgIn 0.2s ease;
}
.ai-chat-error .ai-error-close {
    float: right;
    cursor: pointer;
    opacity: 0.6;
    font-size: 14px;
    line-height: 1;
    margin-left: 10px;
}
.ai-chat-error .ai-error-close:hover { opacity: 1; }

/* 会话列表 — 左侧抽屉，与聊天区分栏显示 */
.ai-session-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    background: #16171c;
    z-index: 115;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.06);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-session-panel.open {
    transform: translateX(0);
}
.ai-session-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ai-session-panel-title {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    font-weight: 600;
}
.ai-session-back-btn {
    width: 28px; height: 28px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s ease;
}
.ai-session-back-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.ai-session-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}
.ai-session-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.12s ease;
    margin-bottom: 2px;
}
.ai-session-item:hover { background: rgba(255,255,255,0.05); }
.ai-session-item.active { background: rgba(139,92,246,0.12); }
.ai-session-item-title {
    flex: 1;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-session-item.active .ai-session-item-title { color: rgba(255,255,255,0.9); }
.ai-session-item-time {
    color: rgba(255,255,255,0.25);
    font-size: 10.5px;
    flex-shrink: 0;
}
.ai-session-item-del {
    width: 24px; height: 24px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.2);
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.1s ease;
    opacity: 0;
}
.ai-session-item:hover .ai-session-item-del { opacity: 1; }
.ai-session-item-del:hover { background: rgba(239,68,68,0.15); color: rgba(252,165,165,0.8); }

/* ============================================================
 * 素材库面板（Material Library Panel）
 * ============================================================ */

/* 遮罩 */
.mat-lib-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1980;
    opacity: 0; visibility: hidden;
    transition: all 0.25s ease;
}
.mat-lib-overlay.show { opacity: 1; visibility: visible; }

/* 面板 — 左侧抽屉 */
.mat-lib-panel {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 340px;
    background: rgba(24,26,32,0.97);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 8px 0 40px rgba(0,0,0,0.45), 2px 0 12px rgba(0,0,0,0.2);
    z-index: 1990;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.mat-lib-panel.show { transform: translateX(0); }

/* 头部 */
.mat-lib-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.mat-lib-header-left { display: flex; align-items: center; gap: 8px; }
.mat-lib-back-btn {
    width: 30px; height: 30px; border-radius: 8px; border: none;
    background: transparent; color: rgba(255,255,255,0.45); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s ease;
}
.mat-lib-back-btn:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); }
.mat-lib-title { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.82); margin: 0; }
.mat-lib-header-right { display: flex; align-items: center; gap: 8px; }

/* AI 角色 badge */
.mat-lib-ai-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 14px;
    border: 1px solid rgba(99,102,241,0.25);
    background: rgba(99,102,241,0.1);
    color: #a5b4fc; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.mat-lib-ai-badge svg { opacity: 0.8; }
.mat-lib-ai-badge:hover {
    border-color: rgba(99,102,241,0.45);
    background: rgba(99,102,241,0.18);
    color: #c7d2fe;
}

/* 上传 + 按钮 */
.mat-lib-add-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent; color: rgba(255,255,255,0.55);
    font-size: 17px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.mat-lib-add-btn:hover { background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.35); color: #c4b5fd; }

/* 工具栏 */
.mat-lib-toolbar { padding: 10px 16px 6px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.mat-lib-tabs {
    display: flex; gap: 4px; padding: 3px; border-radius: 10px;
    background: rgba(255,255,255,0.04);
}
.mat-tab-btn {
    flex: 1; padding: 6px 0; border: none; border-radius: 7px;
    background: transparent; color: rgba(255,255,255,0.4);
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.mat-tab-btn:hover { color: rgba(255,255,255,0.7); }
.mat-tab-btn.active { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.88); }

/* 搜索框 */
.mat-lib-search {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.35); transition: all 0.15s;
}
.mat-lib-search:focus-within { border-color: rgba(139,92,246,0.3); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.55); }
.mat-lib-search svg { flex-shrink: 0; opacity: 0.6; }
.mat-lib-search input {
    flex: 1; background: none; border: none; outline: none;
    color: rgba(255,255,255,0.75); font-size: 13px; font-family: inherit;
}
.mat-lib-search input::placeholder { color: rgba(255,255,255,0.22); }

/* 收藏入口 */
.mat-lib-fav-entry {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; color: rgba(255,255,255,0.45);
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.12s;
}
.mat-lib-fav-entry:hover { color: rgba(255,255,255,0.75); }
.mat-lib-fav-entry.active {
    color: rgba(255,255,255,0.88);
    background: rgba(255, 215, 0, 0.06);
}
.mat-lib-fav-entry.active svg { fill: rgba(255,215,0,0.85); }
.mat-lib-fav-entry svg { flex-shrink: 0; fill: rgba(255,255,255,0.3); stroke: none; }
.mat-lib-fav-entry:hover svg { fill: rgba(255,215,0,0.7); }

/* 分类树区域 */
.mat-lib-body { flex: 1; overflow-y: auto; padding: 4px 0 16px; }
.mat-lib-body::-webkit-scrollbar { width: 3px; }
.mat-lib-body::-webkit-scrollbar-track { background: transparent; }
.mat-lib-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* 分区标题 */
.mat-lib-section-label {
    padding: 12px 20px 6px;
    font-size: 11.5px; font-weight: 600;
    color: rgba(255,255,255,0.28);
    letter-spacing: 0.5px; text-transform: uppercase;
}

/* 树形分类项 */
.mat-tree-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 16px 8px 18px;
    cursor: pointer; transition: background 0.12s ease;
    user-select: none;
}
.mat-tree-item:hover { background: rgba(255,255,255,0.05); }
.mat-tree-item.active { background: rgba(139,92,246,0.08); }

/* 展开/收起箭头 — 匹配参考图 ▶ 样式 */
.mat-tree-arrow {
    width: 18px; height: 18px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.35);
    font-size: 10px; font-weight: bold;
    transition: transform 0.2s ease, color 0.15s;
}
.mat-tree-arrow:hover { color: rgba(255,255,255,0.6); }
.mat-tree-arrow.expanded { transform: rotate(90deg); }
.mat-tree-arrow.no-children {
    color: rgba(255,255,255,0.1);
}
/* 隐藏类（保留兼容） */
.mat-tree-arrow.hidden { visibility: hidden; }

/* 文件夹图标 — 统一简洁 */
.mat-tree-icon {
    width: 26px; height: 26px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.mat-tree-icon svg {
    width: 20px; height: 20px;
    display: block;
}

/* 分类名称 */
.mat-tree-name {
    font-size: 14px; color: rgba(255,255,255,0.65);
    font-weight: 400; letter-spacing: 0.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1;
}

/* 分类项右侧更多操作按钮 */
.mat-tree-more {
    width: 26px; height: 26px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.12s ease;
    cursor: pointer;
}
.mat-tree-item:hover .mat-tree-more { opacity: 0.55; }
.mat-tree-more:hover { opacity: 1 !important; background: rgba(255,255,255,0.08); }
.mat-tree-more svg {
    width: 15px; height: 15px;
    color: rgba(255,255,255,0.6);
}
.mat-tree-item.active .mat-tree-name { color: rgba(255,255,255,0.92); }

/* 子树容器（展开区域） */
.mat-tree-children {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 素材列表（嵌入在选中分类的 children 容器中） */
.mat-lib-materials {
    padding: 4px 0 6px;
    margin-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.mat-lib-mat-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 10px;
    margin: 2px 0;
    border-radius: 8px;
    cursor: pointer; transition: background 0.12s;
    color: rgba(255,255,255,0.72);
    font-size: 13px; user-select: none;
}
.mat-lib-mat-item:hover { background: rgba(255,255,255,0.05); }
.mat-lib-mat-item .mat-lib-mat-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500;
    letter-spacing: 0.01em;
    flex: 1;
    min-width: 0;
}
.mat-lib-mat-item .mat-lib-mat-type {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}
.mat-lib-mat-item.selected {
    background: rgba(139, 92, 246, 0.14);
    color: rgba(255, 255, 255, 0.92);
}

/* 素材缩略图：按类型区分尺寸与样式 */
.mat-lib-mat-thumb {
    flex-shrink: 0;
    overflow: hidden;
    background: #101116;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    position: relative;
}
.mat-lib-mat-thumb.is-image {
    width: 34px;
    height: 34px;
    border-radius: 7px;
}
.mat-lib-mat-thumb.is-video {
    width: 46px;
    height: 28px;
    border-radius: 6px;
}
.mat-lib-mat-thumb.is-glyph {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.88);
    background: linear-gradient(180deg, #15161c 0%, #0c0d11 100%);
}
.mat-lib-mat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mat-lib-mat-thumb-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #15161c 0%, #0c0d11 100%);
    color: rgba(255, 255, 255, 0.88);
}
.mat-lib-mat-thumb.is-broken img {
    opacity: 0;
    visibility: hidden;
}
.mat-lib-mat-thumb.is-broken .mat-lib-mat-thumb-fallback {
    display: flex;
}
.mat-lib-mat-glyph-letter {
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.mat-lib-mat-wave {
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.92);
}
.mat-lib-mat-glyph-play {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.85);
}
.mat-lib-mat-glyph-img {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.55);
}
.mat-lib-mat-item--video .mat-lib-mat-name,
.mat-lib-mat-item--image .mat-lib-mat-name,
.mat-lib-mat-item--audio .mat-lib-mat-name,
.mat-lib-mat-item--text .mat-lib-mat-name {
    color: rgba(255, 255, 255, 0.78);
}

/* 素材预览小窗 */
.mat-lib-preview-popover {
    position: fixed;
    z-index: 9100;
    width: 272px;
    background: #25262c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}
.mat-lib-preview-popover.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.mat-lib-preview-media {
    width: 100%;
    aspect-ratio: 1;
    background: #1a1b20;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mat-lib-preview-media img,
.mat-lib-preview-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mat-lib-preview-media .mat-lib-preview-placeholder {
    color: rgba(255, 255, 255, 0.28);
    font-size: 13px;
}
.mat-lib-preview-media .mat-lib-preview-text {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    overflow: auto;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}
.mat-lib-preview-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
}
.mat-lib-preview-meta {
    min-width: 0;
    flex: 1;
}
.mat-lib-preview-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mat-lib-preview-date {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.38);
}
.mat-lib-preview-type-icon {
    flex-shrink: 0;
    opacity: 0.85;
}
.mat-lib-preview-apply {
    display: block;
    width: calc(100% - 28px);
    margin: 0 14px 14px;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mat-lib-preview-apply:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* 展开后的子项占位 */
.mat-tree-child-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 16px 7px 44px;
    cursor: pointer; transition: background 0.12s;
    user-select: none;
}
.mat-tree-child-item:hover { background: rgba(255,255,255,0.04); }

/* 空提示 — "该文件夹暂无素材" */
.mat-empty-hint {
    padding: 14px 20px 14px 48px;
    text-align: left;
    font-size: 12.5px;
    color: rgba(255,255,255,0.25);
}

/* 加载状态 */
.mat-loading-hint {
    padding: 40px 20px; text-align: center;
    font-size: 12.5px; color: rgba(255,255,255,0.28);
}

/* 新建文件夹 — 内联输入行 */
.mat-new-folder-row {
    display: flex;
    align-items: center;
    padding-left: 32px !important;
    min-height: 36px;
    background: rgba(99,102,241,0.06) !important;
}
.mat-new-folder-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid #6366f1;
    color: #fff;
    font-size: 13px;
    outline: none;
    padding: 3px 4px;
    margin: 0 8px;
    font-family: inherit;
}
.mat-new-folder-input::placeholder { color: rgba(255,255,255,0.25); }
.mat-new-folder-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.mat-new-folder-row:hover .mat-new-folder-actions,
.mat-new-folder-row:focus-within .mat-new-folder-actions { opacity: 1; }
.mat-new-confirm,
.mat-new-cancel {
    width: 22px; height: 22px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 0.15s;
    background: transparent;
    color: rgba(255,255,255,0.5);
}
.mat-new-confirm:hover { background: rgba(34,197,94,0.25); color: #22c55e; }
.mat-new-cancel:hover { background: rgba(239,68,68,0.25); color: #ef4444; }

/* ========== 素材库分类右键菜单 ========== */
.mat-ctx-menu {
    position: fixed;
    width: 190px;
    background: rgba(26, 28, 34, 0.97);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 12px;
    padding: 6px 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.94);
    transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
    z-index: 9999;
    pointer-events: none;
}
.mat-ctx-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1);
    transition: none;
    pointer-events: auto;
}
.mat-ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}
.mat-ctx-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.mat-ctx-item.danger {
    color: #ef4444;
}
.mat-ctx-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}
.mat-ctx-item svg {
    width: 16px; height: 16px; flex-shrink: 0;
    color: rgba(255,255,255,0.45);
}
.mat-ctx-item.danger svg {
    color: #ef4444;
}
.mat-ctx-item span {
    font-size: 13px; font-weight: 450;
    color: rgba(255,255,255,0.78);
    white-space: nowrap;
}
.mat-ctx-item.danger span {
    color: #ef4444;
}
.mat-ctx-divider {
    height: 1px;
    margin: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
}

/* ========== 素材库 移动到... 对话框 ========== */
.mat-move-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
}
.mat-move-dialog {
    width: 400px; max-height: 520px;
    background: #1e2028;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.mat-move-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mat-move-title {
    font-size: 15px; font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.mat-move-close {
    width: 30px; height: 30px;
    border: none; background: none;
    color: rgba(255,255,255,0.4);
    font-size: 20px; cursor: pointer;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.mat-move-close:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.mat-move-body {
    flex: 1; overflow-y: auto; padding: 8px 0;
    max-height: 360px;
}
.mat-move-body::-webkit-scrollbar { width: 3px; }
.mat-move-body::-webkit-scrollbar-track { background: transparent; }
.mat-move-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.mat-move-item {
    padding: 9px 20px;
    cursor: pointer; transition: background 0.12s;
    user-select: none;
}
.mat-move-item:hover { background: rgba(255,255,255,0.04); }
.mat-move-item.active { background: rgba(139,92,246,0.12); }
.mat-move-name {
    font-size: 13.5px;
    color: rgba(255,255,255,0.7);
}
.mat-move-item.active .mat-move-name { color: rgba(255,255,255,0.95); }
.mat-move-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.mat-move-cancel, .mat-move-confirm {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13.5px; font-weight: 500;
    cursor: pointer; border: none;
    transition: background 0.15s, opacity 0.15s;
}
.mat-move-cancel {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
}
.mat-move-cancel:hover { background: rgba(255,255,255,0.1); }
.mat-move-confirm {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}
.mat-move-confirm:hover { opacity: 0.9; }
.mat-move-confirm:disabled {
    opacity: 0.35; cursor: not-allowed;
}

/* ========== 模板面板 ========== */

/* 遮罩 */
.tpl-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1990;
    opacity: 0; visibility: hidden;
    transition: all 0.25s ease;
}
.tpl-overlay.show { opacity: 1; visibility: visible; }
.tpl-overlay.large-active {
    z-index: 2100;
    background: rgba(0,0,0,0.58);
    backdrop-filter: blur(2px);
}

/* ====== 小面板（默认） ====== */
.tpl-panel-small {
    position: fixed;
    top: 50%;
    left: 84px;
    transform: translateY(-50%) translateX(-12px) scale(0.98);
    width: 420px;
    max-height: min(78vh, 640px);
    border-radius: 16px;
    background: rgba(22,24,30,0.96);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 1px rgba(255,255,255,0.06) inset;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0; visibility: hidden;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(24px);
}
.tpl-panel-small.show {
    opacity: 1; visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}
.tpl-panel-small.tpl-large-open {
    z-index: 2005;
}

/* 引导横幅 */
.tpl-onboarding {
    margin: 12px 12px 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    flex-shrink: 0;
}
.tpl-onboarding.hidden { display: none; }
.tpl-onboarding-preview {
    grid-row: 1 / span 2;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
    aspect-ratio: 3/2;
}
.tpl-onboarding-preview img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.tpl-onboarding-title {
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.92);
}
.tpl-onboarding-desc {
    font-size: 11.5px; line-height: 1.45;
    color: rgba(255,255,255,0.45);
}
.tpl-onboarding-link {
    font-size: 11.5px; color: #60a5fa; text-decoration: none;
}
.tpl-onboarding-link:hover { text-decoration: underline; }
.tpl-onboarding-actions {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end; gap: 8px;
}
.tpl-onboarding-dismiss,
.tpl-onboarding-ok {
    padding: 5px 12px; border-radius: 8px; font-size: 12px;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.tpl-onboarding-dismiss {
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent; color: rgba(255,255,255,0.45);
}
.tpl-onboarding-dismiss:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.tpl-onboarding-ok {
    border: none;
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.88);
}
.tpl-onboarding-ok:hover { background: rgba(255,255,255,0.16); }

/* 头部：标签 + 展开 */
.tpl-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 0;
    flex-shrink: 0;
}
.tpl-tabs {
    display: flex; gap: 2px; padding: 3px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
}
.tpl-tab-btn {
    padding: 6px 14px; border: none; border-radius: 8px;
    background: transparent; color: rgba(255,255,255,0.4);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: all 0.15s; font-family: inherit;
}
.tpl-tab-btn:hover { color: rgba(255,255,255,0.7); }
.tpl-tab-btn.active {
    background: rgba(255,255,255,0.1); color: #fff;
}

/* 展开按钮 */
.tpl-expand-btn {
    width: 28px; height: 28px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 7px;
    background: transparent; color: rgba(255,255,255,0.4);
    font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.tpl-expand-btn:hover { background: rgba(139,92,246,0.12); color: #c4b5fd; border-color: rgba(139,92,246,0.25); }

/* 搜索栏 */
.tpl-search-bar {
    margin: 10px 16px 8px;
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 8px;
    transition: border-color 0.2s;
}
.tpl-search-bar:focus-within {
    border-color: rgba(139,92,246,0.35);
    background: rgba(255,255,255,0.06);
}
.tpl-search-bar svg { flex-shrink: 0; color: rgba(255,255,255,0.25); }
.tpl-search-bar input {
    flex: 1; min-width: 0;
    background: none; border: none; outline: none;
    color: rgba(255,255,255,0.85); font-size: 13px; font-family: inherit;
}
.tpl-search-bar input::placeholder { color: rgba(255,255,255,0.25); }

/* 网格 */
.tpl-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 14px 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    gap: 12px 10px;
}
.tpl-panel-small .tpl-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 12px;
    column-gap: 10px;
}
.tpl-grid::-webkit-scrollbar { width: 4px; }
.tpl-grid::-webkit-scrollbar-track { background: transparent; }
.tpl-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }

/* 模板卡片 */
.tpl-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: auto;
    align-self: start;
    border-radius: 11px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tpl-card:hover {
    border-color: rgba(139,92,246,0.35);
    box-shadow: 0 4px 20px rgba(139,92,246,0.12);
}
.tpl-card-media {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0,0,0,0.22);
}
.tpl-card-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    background: rgba(0,0,0,0.55);
    opacity: 0; visibility: hidden;
    transition: all 0.18s ease;
    z-index: 2;
}
.tpl-card:hover .tpl-card-overlay {
    opacity: 1; visibility: visible;
}
.tpl-card-action {
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.95);
    font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: color 0.15s;
}
.tpl-card-action:hover { color: #fff; }
.tpl-card-action + .tpl-card-action {
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,0.28);
}
.tpl-card-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.tpl-card-name {
    flex-shrink: 0;
    padding: 7px 8px 9px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.88);
    font-size: 11.5px; font-weight: 500;
    line-height: 1.35;
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== 大面板（展开 — 居中弹框） ====== */
.tpl-panel-large {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.94);
    width: min(92vw, 1180px);
    height: min(88vh, 780px);
    max-width: 1180px;
    border-radius: 16px;
    background: rgba(18,20,26,0.98);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 28px 80px rgba(0,0,0,0.65), 0 0 1px rgba(255,255,255,0.06) inset;
    z-index: 2110;
    display: flex;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(28px);
}
.tpl-panel-large.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; visibility: visible;
}

/* 大面板 - 左侧分类栏 */
.tpl-large-left {
    width: 196px; flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.28);
    display: flex; flex-direction: column;
    padding-top: 8px;
}
.tpl-cat-list {
    flex: 1; overflow-y: auto;
    padding: 4px 0;
}
.tpl-cat-list::-webkit-scrollbar { width: 3px; }
.tpl-cat-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
.tpl-cat-divider {
    padding: 10px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.03em;
    user-select: none;
}
.tpl-cat-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    margin: 2px 10px;
    border-radius: 10px;
    color: rgba(255,255,255,0.58);
    font-size: 13px; cursor: pointer;
    transition: all 0.15s; font-family: inherit;
    border: none; background: none; width: calc(100% - 20px);
    text-align: left;
}
.tpl-cat-item svg { flex-shrink: 0; color: rgba(255,255,255,0.28); }
.tpl-cat-item:hover { color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.05); }
.tpl-cat-item.active {
    color: #fff;
    background: rgba(255,255,255,0.11);
    border-right: none;
}
.tpl-cat-item.active svg { color: rgba(255,255,255,0.72); }

/* 大面板 - 右侧内容区 */
.tpl-large-right {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0;
    background: rgba(24,24,28,0.96);
}
.tpl-large-body {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    position: relative;
}
.tpl-list-view {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
}
.tpl-list-view.hidden { display: none; }
.tpl-large-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
    gap: 12px;
}
.tpl-large-title {
    font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.96);
    flex-shrink: 0;
    letter-spacing: 0.01em;
}
.tpl-large-actions {
    display: flex; align-items: center; gap: 8px; flex: 1;
    justify-content: flex-end;
}
.tpl-search-bar-lg {
    flex: 1; max-width: 320px;
    padding: 7px 14px;
    border-radius: 9px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    transition: border-color 0.2s;
}
.tpl-search-bar-lg:focus-within { border-color: rgba(59,130,246,0.4); }
.tpl-search-bar-lg input {
    width: 100%; background: none; border: none; outline: none;
    color: rgba(255,255,255,0.85); font-size: 13px; font-family: inherit;
}
.tpl-search-bar-lg input::placeholder { color: rgba(255,255,255,0.25); }

.tpl-search-btn-lg, .tpl-close-btn-lg {
    width: 32px; height: 32px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
    background: rgba(59,130,246,0.12); color: #93c5fd;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
}
.tpl-search-btn-lg:hover, .tpl-close-btn-lg:hover { background: rgba(59,130,246,0.22); }
.tpl-close-btn-lg { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.45); }
.tpl-close-btn-lg:hover { background: rgba(239,68,68,0.12); color: #fca5a5; }

/* 大面板网格 */
.tpl-grid-large {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    align-items: start !important;
    gap: 16px 14px !important;
    padding: 16px 20px 20px !important;
}
.tpl-grid-large .tpl-card-media {
    padding-top: 100%;
}
@media (max-width: 1100px) {
    .tpl-grid-large { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px) {
    .tpl-grid-large { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* 模板详情页 */
.tpl-detail-view {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    padding: 8px 24px 18px;
    overflow: hidden;
}
.tpl-detail-view[hidden] { display: none !important; }
.tpl-detail-body {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.tpl-detail-back {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 28px; height: 28px; flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: rgba(18,18,22,0.72);
    color: rgba(255,255,255,0.72);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
    backdrop-filter: blur(8px);
}
.tpl-detail-back:hover {
    background: rgba(255,255,255,0.12); color: #fff;
}
.tpl-detail-main {
    flex: 1; min-height: 0;
    display: flex; gap: 28px;
    overflow: hidden;
    padding-top: 2px;
}
.tpl-detail-preview {
    width: min(380px, 36vw);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: 100%;
    align-self: center;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0,0,0,0.42);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.tpl-detail-preview img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.tpl-detail-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    padding: 8px 0 4px;
    min-height: 0;
}
.tpl-detail-name {
    font-size: 24px; font-weight: 600;
    color: rgba(255,255,255,0.96);
    margin: 0 0 12px;
    line-height: 1.25;
}
.tpl-detail-time {
    font-size: 12px; color: rgba(255,255,255,0.34);
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums;
}
.tpl-detail-tag {
    display: inline-flex; align-self: flex-start;
    padding: 5px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.58);
    font-size: 12px; margin-bottom: 18px;
}
.tpl-detail-desc {
    flex: 1; min-height: 48px;
    font-size: 14px; line-height: 1.65;
    color: rgba(255,255,255,0.52);
    margin: 0 0 20px;
    overflow-y: auto;
}
.tpl-detail-apply-btn {
    align-self: stretch;
    width: 100%;
    margin-top: auto;
    padding: 13px 24px; border: none; border-radius: 12px;
    background: #8ecaff;
    color: #111827; font-size: 15px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all 0.15s;
    box-shadow: 0 8px 24px rgba(142,202,255,0.22);
}
.tpl-detail-apply-btn:hover {
    filter: brightness(1.04);
    box-shadow: 0 10px 28px rgba(142,202,255,0.32);
}
.tpl-detail-apply-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.tpl-detail-strip-wrap {
    flex-shrink: 0;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
}
.tpl-detail-strip {
    display: flex; gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
}
.tpl-detail-strip::-webkit-scrollbar { height: 4px; }
.tpl-detail-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.tpl-detail-strip-item {
    flex-shrink: 0;
    width: 80px;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    border-radius: 10px; overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
    background: rgba(255,255,255,0.04);
}
.tpl-detail-strip-item.active { border-color: #8ecaff; }
.tpl-detail-strip-item:hover { border-color: rgba(142,202,255,0.55); transform: translateY(-1px); }
.tpl-detail-strip-thumb {
    width: 100%; height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover; display: block;
    background: rgba(0,0,0,0.35);
}
.tpl-panel-large.tpl-detail-mode .tpl-search-bar-lg,
.tpl-panel-large.tpl-detail-mode .tpl-search-btn-lg { display: none; }
.tpl-panel-large.tpl-detail-mode .tpl-large-header {
    border-bottom-color: rgba(255,255,255,0.06);
}

/* ================================================================
 * 保存到素材库弹窗
 * ================================================================ */
.mat-save-overlay {
    position: fixed; top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.55);
    z-index: 9001;
    opacity: 0; visibility: hidden;
    transition: all 0.2s ease;
}
.mat-save-overlay.show { opacity: 1; visibility: visible; }

.mat-save-dialog {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    width: 400px;
    height: 540px;
    background: #1e1f24;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
    z-index: 9002;
    display: flex;
    flex-direction: column;
    opacity: 0; visibility: hidden;
    transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
}
.mat-save-dialog.show {
    opacity: 1; visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* 头部 */
.mat-save-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 12px;
}
.mat-save-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.9);
}
.mat-new-folder-btn {
    padding: 5px 12px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08); background: transparent;
    color: rgba(255,255,255,0.55); font-size: 12px; cursor: pointer;
    transition: all 0.15s ease;
    display: flex; align-items: center; gap: 4px;
}
.mat-new-folder-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }

/* 个人/团队 tab */
.mat-save-tabs {
    display: flex; padding: 6px 12px; gap: 4px;border-radius: 20px;
}
.mat-tab {
    flex: 1; padding: 7px 0; text-align: center;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.07);
    background: transparent; color: rgba(255,255,255,0.45);
    font-size: 13px; cursor: pointer; transition: all 0.15s;
    border-radius: 20px;
    border: none;
}
.mat-tab.active { background: rgba(140,120,220,0.12); border-color: rgba(140,120,220,0.35); color: rgba(200,190,240,0.9); }
.mat-tab:hover:not(.active) { background: rgba(255,255,255,0.05); }

/* 目录树+素材（固定弹框内滚动） */
.mat-save-body {
    flex: 1;
    min-height: 0; /* 允许 flex 子项收缩 */
    overflow-y: auto;
    padding: 6px 18px 8px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.mat-save-body::-webkit-scrollbar { width: 5px; }
.mat-save-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

.mat-save-tree { /* 树容器 */ }
.mat-save-tree::-webkit-scrollbar { width: 5px; }
.mat-save-tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

.mat-tree-item {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px; margin: 1px 0;
    border-radius: 8px; cursor: pointer;
    transition: background 0.12s; color: rgba(255,255,255,0.65);
    font-size: 13px; user-select: none;
}
.mat-tree-item:hover { background: rgba(255,255,255,0.06); }
.mat-tree-item.selected { background: rgba(140,120,220,0.12); color: rgba(200,190,240,0.95); }
.mat-tree-toggle { width: 14px; text-align: center; font-size: 0; color: rgba(255,255,255,0.3); transition: transform 0.2s ease; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mat-tree-toggle .chevron { transition: transform 0.2s ease; }
.mat-tree-toggle .chevron.chevron-right { transform: rotate(-90deg); }
.mat-tree-children { padding-left: 22px; }

/* 文件夹图标颜色 */
.mat-folder > svg:nth-of-type(1) { color: rgba(210,180,90,0.75); }
.mat-file svg { color: rgba(100,160,230,0.75); }

/* 底部按钮 */
.mat-save-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.mat-cancel-btn {
    padding: 7px 18px; border-radius: 8px; border: none;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55);
    font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.mat-cancel-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.mat-save-confirm-btn {
    padding: 7px 20px; border-radius: 8px; border: none;
    background: linear-gradient(135deg, #8c78dc, #a080f0);
    color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: all 0.15s; box-shadow: 0 2px 8px rgba(140,120,220,0.25);
}
.mat-save-confirm-btn:hover { background: linear-gradient(135deg, #9b88e3, #ae94f5); box-shadow: 0 4px 14px rgba(140,120,220,0.35); }

/* 素材列表（嵌入选中分类下方，树形列表项） */
.mat-save-materials {
    margin-top: 2px;
    padding: 2px 0;
}
.mat-save-materials-empty {
    text-align: center; padding: 12px 12px 8px;
    font-size: 11.5px; color: rgba(255,255,255,0.18);
}

/* 素材条目（仿树节点样式，padding-left 由 JS 内联设置） */
.mat-mat-item {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 0; margin: 1px 0;
    border-radius: 7px;
    cursor: default; transition: background 0.12s;
    color: rgba(255,255,255,0.45);
    font-size: 12.5px; user-select: none;
}
.mat-mat-item:hover { background: rgba(255,255,255,0.05); }
.mat-mat-item .mat-mat-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mat-mat-item .mat-mat-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 素材类型标签 */
.mat-mat-type-tag {
    flex-shrink: 0; margin-left: 2px;
    padding: 1px 5px; border-radius: 3px;
    font-size: 9.5px; line-height: 1.4;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.28);
    letter-spacing: 0.3px;
}

/* ====== 框选（Lasso Selection）样式 ====== */

/* 选择矩形（拖拽中的半透明框） */
.lasso-selection-rect {
    position: absolute;
    pointer-events: none;
    z-index: 9998;
    border: 1.5px dashed rgba(100,180,255,0.85);
    background: rgba(66,133,244,0.10);
    border-radius: 3px;
    box-sizing: border-box;
}

/* 节点在框选过程中被高亮 — 内容框边框 */
.canvas-node.node-in-lasso .node-upload-area,
.canvas-node.node-in-lasso .node-preview-area {
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

/* 节点被选中（单选 / 多选）— 内容框加边框，参考目标 UI */
.canvas-node.node-selected .node-upload-area,
.canvas-node.node-selected .node-preview-area {
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: none;
}

/* 框选后的顶部操作工具栏（定位在选中区域上方） */
.selection-toolbar {
    position: fixed;
    z-index: 10000;
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.2s ease, transform 0.22s ease;
    pointer-events: none;
}
.selection-toolbar.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.sel-toolbar-inner {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 8px;
    background: rgba(22, 24, 30, 0.96);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sel-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sel-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.sel-action-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.sel-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.sel-action-btn svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* 选中区域外框 */
.selection-frame {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    border: 1.5px solid rgba(255, 255, 255, 0.88);
    border-radius: 6px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.18s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.selection-frame.visible {
    opacity: 1;
}

/* 反馈弹窗 */
.sel-feedback-body {
    padding: 0 20px 12px;
}
.sel-feedback-hint {
    margin: 0 0 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}
.sel-feedback-input {
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.sel-feedback-input:focus {
    border-color: rgba(100, 180, 255, 0.45);
}

/* ====== 节点组样式 ====== */
.canvas-node-group {
    position: absolute;
    z-index: 5;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    pointer-events: auto;
    cursor: grab;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.canvas-node-group:hover,
.canvas-node-group.dragging {
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
}
.canvas-node-group.group-selected {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.12);
}
.canvas-node-group.dragging {
    cursor: grabbing;
}
.group-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.72);
    user-select: none;
    white-space: nowrap;
}
.group-label-text {
    flex: 1;
}

/* 节点组选中后的顶部菜单 */
.group-toolbar .sel-toolbar-inner {
    gap: 8px;
    padding: 6px 10px;
}
.group-toolbar-leading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 2px;
}
.group-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}
.group-meta-icon {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.55);
}
.group-toolbar-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}
/* 组内节点标记 */
.canvas-node.in-group {
    /* 可在此添加组内节点的视觉变化 */
}

/* ========== 侧边栏搜索弹层 ========== */
.studio-search-popover {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px) scale(0.97);
    width: 220px;
    padding: 8px 10px;
    background: rgba(30, 32, 38, 0.96);
    backdrop-filter: blur(20px) saturate(1.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.18s ease;
    z-index: 200;
}
.studio-search-popover.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}
.studio-search-input {
    width: 100%;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
    font-family: inherit;
}
.studio-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* ========== 生成历史浮窗 ========== */
.studio-history-panel {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-8px) scale(0.98);
    width: 308px;
    max-height: min(52vh, 360px);
    border-radius: 14px;
    background: rgba(20, 22, 28, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.05) inset;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
.studio-history-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}
.studio-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 10px 0;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.studio-history-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.studio-history-tabs::-webkit-scrollbar { display: none; }
.studio-history-tab {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11.5px;
    font-weight: 500;
    padding: 7px 5px 9px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    font-family: inherit;
    transition: color 0.15s;
}
.studio-history-tab:hover {
    color: rgba(255, 255, 255, 0.72);
}
.studio-history-tab.active {
    color: rgba(255, 255, 255, 0.95);
}
.studio-history-tab.active::after {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.92);
}
.studio-history-count::before { content: '('; }
.studio-history-count::after { content: ')'; }
.studio-history-expand {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 4px;
    transition: all 0.15s;
}
.studio-history-expand:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}
.studio-history-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    --hist-cell-size: 88px;
}
.studio-history-body .studio-history-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--hist-cell-size, 88px), 1fr));
    gap: 6px;
}
.studio-history-body .studio-history-item {
    border-radius: 8px;
}
.studio-history-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.hist-ctrl-sm {
    width: 26px;
    height: 26px;
    font-size: 15px;
}
.hist-thumb-slider-sm {
    flex: 1;
    min-width: 0;
    max-width: none;
}
.studio-history-body::-webkit-scrollbar { width: 5px; }
.studio-history-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}
.studio-history-empty {
    padding: 40px 12px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
}
.studio-history-date {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    margin: 8px 0 10px;
}
.studio-history-date:first-child {
    margin-top: 0;
}
.studio-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--hist-cell-size, 88px), 1fr));
    gap: 8px;
    margin-bottom: 6px;
}
.studio-history-item {
    aspect-ratio: 1;
    border-radius: 9px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, transform 0.15s;
}
.studio-history-item:hover {
    border-color: rgba(255, 255, 255, 0.18);
    transform: scale(1.02);
}
.studio-history-item img,
.studio-history-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.studio-history-item-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.75);
    text-align: center;
    line-height: 1.35;
    word-break: break-word;
    background: #f5f5f5;
}
.studio-history-item-audio,
.studio-history-item-3d {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    padding: 8px;
    text-align: center;
}
.studio-history-item-audio svg,
.studio-history-item-3d svg {
    opacity: 0.7;
}

/* ========== 生成历史放大模态 ========== */
.studio-history-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.studio-history-overlay.show {
    opacity: 1;
    visibility: visible;
}
.studio-history-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: min(880px, calc(100vw - 40px));
    height: min(600px, calc(100vh - 56px));
    z-index: 2105;
    border-radius: 16px;
    background: rgba(18, 20, 26, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
    opacity: 0;
    visibility: hidden;
    transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    backdrop-filter: blur(24px);
}
.studio-history-modal.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.studio-history-modal-inner {
    display: flex;
    height: 100%;
    min-height: 0;
}
.studio-history-modal-nav {
    width: 200px;
    flex-shrink: 0;
    padding: 20px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.studio-history-modal-nav-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    padding: 0 10px;
}
.studio-history-modal-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.studio-history-modal-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}
.studio-history-modal-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.82);
}
.studio-history-modal-nav-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
}
.studio-history-modal-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.75;
}
.studio-history-modal-nav-item.active .studio-history-modal-nav-icon {
    opacity: 1;
}
.studio-history-modal-nav-label {
    flex: 1;
    min-width: 0;
}
.studio-history-modal-nav-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    flex-shrink: 0;
}
.studio-history-modal-nav-item.active .studio-history-modal-nav-count {
    color: rgba(255, 255, 255, 0.55);
}
.studio-history-modal-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.studio-history-modal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.studio-history-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}
.studio-history-modal-title-icon {
    display: flex;
    align-items: center;
    opacity: 0.7;
}
.studio-history-modal-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hist-ctrl-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.15s;
    flex-shrink: 0;
}
.hist-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
}
.hist-ctrl-btn.active {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
}
.hist-close-btn {
    margin-left: 4px;
}
.hist-thumb-slider {
    width: 88px;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}
.hist-thumb-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(18, 20, 26, 0.9);
    cursor: pointer;
}
.hist-thumb-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(18, 20, 26, 0.9);
    cursor: pointer;
}
.studio-history-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.studio-history-modal-body::-webkit-scrollbar { width: 6px; }
.studio-history-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}
.studio-history-modal-body .studio-history-grid {
    --hist-cell-size: 120px;
    grid-template-columns: repeat(auto-fill, minmax(var(--hist-cell-size, 120px), 1fr));
    gap: 10px;
}
.studio-history-modal-body .studio-history-item {
    border-radius: 12px;
    aspect-ratio: 1;
    transition: border-color 0.15s, transform 0.15s;
}
.studio-history-modal-body .studio-history-item-label {
    font-size: clamp(10px, calc(var(--hist-cell-size, 120px) * 0.11), 14px);
}

/* ========== 图片节点放大预览 ========== */
body.sip-open {
    overflow: hidden;
}
.studio-img-preview {
    position: fixed;
    inset: 0;
    z-index: 2200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.studio-img-preview.show {
    opacity: 1;
    visibility: visible;
}
.sip-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
}
.sip-layout {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
}
.sip-main {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}
.sip-toolbar {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(24, 26, 32, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
}
.sip-tool-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.sip-tool-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}
.sip-tool-sep {
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: rgba(255, 255, 255, 0.1);
}
.sip-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: grab;
    padding: 72px 32px 64px;
}
.sip-stage.is-panning {
    cursor: grabbing;
}
.sip-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    transition: transform 0.08s ease-out;
    border-radius: 4px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}
.sip-nav {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(24, 26, 32, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.sip-nav-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.sip-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.sip-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.sip-nav-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    min-width: 48px;
    text-align: center;
}
.sip-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 22px 22px;
    background: rgba(16, 18, 24, 0.96);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}
.sip-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.sip-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}
.sip-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sip-section-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}
.sip-prompt-box {
    min-height: 72px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.sip-prompt-content {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    word-break: break-word;
}
.sip-prompt-content.is-empty {
    color: rgba(255, 255, 255, 0.35);
}
.sip-prompt-content .ai-inline-ref-chip {
    vertical-align: middle;
    margin: 0 2px 2px 0;
}
.sip-meta-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sip-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    line-height: 1.4;
}
.sip-meta-row dt {
    margin: 0;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.42);
}
.sip-meta-row dd {
    margin: 0;
    text-align: right;
    color: rgba(255, 255, 255, 0.82);
    word-break: break-all;
}
.sip-download-btn {
    margin-top: auto;
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: rgba(16, 18, 24, 0.92);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
}
.sip-download-btn:hover {
    background: #fff;
}
.sip-download-btn:active {
    transform: scale(0.98);
}
@media (max-width: 900px) {
    .sip-layout {
        flex-direction: column;
    }
    .sip-sidebar {
        width: 100%;
        max-height: 42vh;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        overflow-y: auto;
    }
    .sip-stage {
        padding: 64px 16px 48px;
    }
}

/* ====== 图片节点画布裁剪模式 ====== */
.studio-canvas-area.image-crop-active .canvas-node:not(.image-crop-focus) {
    opacity: 0.28;
    pointer-events: none;
    filter: saturate(0.35) brightness(0.55);
}
.canvas-node.image-crop-focus {
    z-index: 30 !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.canvas-node.image-crop-focus .node-top-bar,
.canvas-node.image-crop-focus .node-ai-float-wrap,
.canvas-node.image-crop-focus .node-format-bar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.sif-crop-host {
    overflow: hidden !important;
    border-radius: 10px;
}
.sif-crop-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}
.sif-crop-shade {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, 0.78);
    pointer-events: none;
}
.sif-crop-box {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: none;
    cursor: move;
    box-sizing: border-box;
    pointer-events: auto;
    background: transparent;
}
.sif-crop-handle {
    position: absolute;
    width: 9px;
    height: 9px;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.35);
    border-radius: 1px;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
}
.sif-crop-handle[data-handle="n"] { left: 50%; top: 0; cursor: n-resize; }
.sif-crop-handle[data-handle="s"] { left: 50%; top: 100%; cursor: s-resize; }
.sif-crop-handle[data-handle="e"] { left: 100%; top: 50%; cursor: e-resize; }
.sif-crop-handle[data-handle="w"] { left: 0; top: 50%; cursor: w-resize; }
.sif-crop-handle[data-handle="ne"] { left: 100%; top: 0; cursor: ne-resize; }
.sif-crop-handle[data-handle="nw"] { left: 0; top: 0; cursor: nw-resize; }
.sif-crop-handle[data-handle="se"] { left: 100%; top: 100%; cursor: se-resize; }
.sif-crop-handle[data-handle="sw"] { left: 0; top: 100%; cursor: sw-resize; }
.sif-crop-bar[hidden],
.sif-crop-bar.is-hidden,
.sif-ratio-menu[hidden],
.sif-ratio-presets[hidden],
.sif-ratio-custom[hidden] {
    display: none !important;
}
.sif-crop-bar {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 12050;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 6px 8px;
    border-radius: 14px;
    background: rgba(24, 26, 32, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}
.sif-crop-bar > .sif-crop-cancel,
.sif-crop-bar > .sif-ratio-wrap,
.sif-crop-bar > .sif-crop-confirm {
    position: relative;
    display: flex;
    align-items: center;
}
.sif-crop-bar > .sif-ratio-wrap::before,
.sif-crop-bar > .sif-crop-confirm::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
}
.sif-crop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.sif-crop-cancel {
    min-width: 42px;
    padding: 0 12px;
}
.sif-crop-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
.sif-ratio-wrap.is-open .sif-ratio-toggle {
    background: rgba(255, 255, 255, 0.1);
}
.sif-crop-confirm {
    background: rgba(255, 255, 255, 0.92);
    color: rgba(16, 18, 24, 0.92);
    font-weight: 600;
    padding: 0 16px;
    margin-left: 4px;
}
.sif-crop-confirm:hover {
    background: #fff;
}
.sif-ratio-wrap {
    position: relative;
    padding: 0 4px;
}
.sif-ratio-menu {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    width: 148px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(28, 30, 36, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42);
    display: flex;
    flex-direction: column;
}
.sif-ratio-presets {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.sif-ratio-opt {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
}
.sif-ratio-opt:hover {
    background: rgba(255, 255, 255, 0.06);
}
.sif-ratio-opt.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.sif-ratio-opt-custom {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sif-ratio-custom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 4px 6px 8px;
    box-sizing: border-box;
}
.sif-ratio-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    text-align: left;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}
.sif-ratio-back svg {
    flex-shrink: 0;
    opacity: 0.8;
}
.sif-ratio-back:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
}
.sif-ratio-custom-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2px 8px 4px;
}
.sif-ratio-colon {
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}
.sif-ratio-custom-inputs input {
    width: 52px;
    height: 36px;
    padding: 0 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-family: inherit;
    line-height: 1;
    box-sizing: border-box;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
.sif-ratio-custom-inputs input::-webkit-outer-spin-button,
.sif-ratio-custom-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sif-ratio-custom-inputs input:focus {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.sif-ratio-custom-inputs input::selection {
    background: rgba(255, 255, 255, 0.22);
}
body.sif-open {
    overflow: hidden;
}
body.image-crop-mode {
    overflow: hidden;
}

/* ========== 资产面板（添加资产弹窗） ========== */
.ast-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.58);
    z-index: 2120;
    opacity: 0; visibility: hidden;
    transition: all 0.25s ease;
    backdrop-filter: blur(2px);
}
.ast-overlay.show { opacity: 1; visibility: visible; }

.ast-panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.94);
    width: min(92vw, 1180px);
    height: min(88vh, 780px);
    border-radius: 16px;
    background: rgba(18,20,26,0.98);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 28px 80px rgba(0,0,0,0.65);
    z-index: 2130;
    display: flex;
    overflow: hidden;
    opacity: 0; visibility: hidden;
    transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(28px);
}
.ast-panel.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; visibility: visible;
}

.ast-left {
    width: 196px; flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.28);
    display: flex; flex-direction: column;
    padding-top: 8px;
}
.ast-cat-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.ast-cat-divider {
    padding: 10px 16px 6px;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.3);
}
.ast-cat-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; margin: 2px 10px;
    border-radius: 10px;
    color: rgba(255,255,255,0.58);
    font-size: 13px; cursor: pointer;
    transition: all 0.15s; font-family: inherit;
    border: none; background: none;
    width: calc(100% - 20px); text-align: left;
}
.ast-cat-item svg { flex-shrink: 0; color: rgba(255,255,255,0.28); }
.ast-cat-item:hover { color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.05); }
.ast-cat-item.active { color: #fff; background: rgba(255,255,255,0.11); }
.ast-cat-item.active svg { color: rgba(255,255,255,0.72); }

.ast-right {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0; background: rgba(24,24,28,0.96);
}
.ast-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    gap: 12px;
}
.ast-title { font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.96); }
.ast-header-actions {
    display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end;
}
.ast-search-bar {
    flex: 1; max-width: 320px;
    padding: 7px 14px; border-radius: 9px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.ast-search-bar:focus-within { border-color: rgba(59,130,246,0.4); }
.ast-search-bar input {
    width: 100%; background: none; border: none; outline: none;
    color: rgba(255,255,255,0.85); font-size: 13px; font-family: inherit;
}
.ast-search-bar input::placeholder { color: rgba(255,255,255,0.25); }
.ast-search-btn, .ast-close-btn {
    width: 32px; height: 32px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
}
.ast-search-btn { background: rgba(59,130,246,0.12); color: #93c5fd; }
.ast-search-btn:hover { background: rgba(59,130,246,0.22); }
.ast-close-btn { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.45); }
.ast-close-btn:hover { background: rgba(239,68,68,0.12); color: #fca5a5; }

.ast-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ast-list-view { flex: 1; min-height: 0; overflow: auto; }
.ast-list-view.hidden { display: none; }
.ast-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px 14px;
    padding: 16px 20px 20px;
    align-content: start;
}
.ast-empty {
    grid-column: 1 / -1;
    padding: 40px;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
}
.ast-card {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ast-card:hover {
    border-color: rgba(59,130,246,0.35);
    box-shadow: 0 4px 20px rgba(59,130,246,0.12);
}
.ast-card-media {
    position: relative; width: 100%;
    padding-top: 100%; overflow: hidden;
    background: rgba(0,0,0,0.22);
}
.ast-card-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    background: rgba(0,0,0,0.55);
    opacity: 0; visibility: hidden;
    transition: all 0.18s ease;
    z-index: 2;
}
.ast-card:hover .ast-card-overlay {
    opacity: 1; visibility: visible;
}
.ast-card-action {
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.95);
    font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: color 0.15s;
}
.ast-card-action:hover { color: #fff; }
.ast-card-action + .ast-card-action {
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,0.28);
}
.ast-card-img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.ast-card-name {
    padding: 7px 8px 9px;
    color: rgba(255,255,255,0.88);
    font-size: 11.5px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ast-detail-view {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    padding: 8px 24px 18px;
    overflow: hidden;
}
.ast-detail-view[hidden] { display: none !important; }
.ast-detail-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ast-detail-back {
    position: absolute; left: 0; top: 0; z-index: 2;
    width: 28px; height: 28px; border: none; border-radius: 8px;
    background: rgba(18,18,22,0.72); color: rgba(255,255,255,0.72);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.ast-detail-main {
    flex: 1; min-height: 0;
    display: flex; gap: 28px; overflow: hidden; padding-top: 2px;
}
.ast-detail-preview {
    width: min(380px, 36vw); flex-shrink: 0;
    aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
    background: rgba(0,0,0,0.42);
    border: 1px solid rgba(255,255,255,0.07);
}
.ast-detail-preview img { width: 100%; height: 100%; object-fit: cover; }
.ast-detail-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; min-height: 0;
}
.ast-detail-name {
    font-size: 24px; font-weight: 600;
    color: rgba(255,255,255,0.96); margin: 0 0 12px;
}
.ast-detail-time {
    font-size: 12px; color: rgba(255,255,255,0.34); margin-bottom: 14px;
}
.ast-detail-desc {
    flex: 1; min-height: 48px;
    font-size: 14px; line-height: 1.65;
    color: rgba(255,255,255,0.52);
    margin: 0 0 20px; overflow-y: auto;
}
.ast-detail-apply-btn {
    margin-top: auto; width: 100%;
    padding: 13px 24px; border: none; border-radius: 12px;
    background: #8ecaff; color: #111827;
    font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.ast-detail-apply-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.ast-detail-strip-wrap {
    flex-shrink: 0; margin-top: 18px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.07); overflow: hidden;
}
.ast-detail-strip {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
}
.ast-detail-strip-item {
    flex: 0 0 64px; width: 64px; height: 64px;
    border-radius: 10px; overflow: hidden;
    border: 2px solid transparent; padding: 0; cursor: pointer;
    background: rgba(255,255,255,0.04);
    transition: border-color 0.15s, transform 0.15s;
}
.ast-detail-strip-item.active { border-color: #8ecaff; }
.ast-detail-strip-item:hover { border-color: rgba(142,202,255,0.55); transform: translateY(-1px); }
.ast-detail-strip-item img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1100px) {
    .ast-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .ast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ast-left { width: 160px; }
}