/* 智能创编独立页 · UI 现代重构版（2026-05-16）
 * 与 /creative 创编中心同壳：creative-page-shell + creative-studio-container
 * 色彩体系：紫罗兰→靛蓝渐变品牌色 + 暖白底 + 柔和阴影
 * 参考：可灵全模态创作现代感 + 即梦"认知减负"极简主义
 * 非交互文本全部 user-select: none
 */

/* ── 自定义属性（便于全局覆盖） ── */
:root {
    --smart-primary: #7C3AED;
    --smart-brand-from: #7C3AED;
    --smart-brand-to: #6366F1;
    --smart-brand-mid: #6f51ff;
    --smart-accent: #F59E0B;
    --smart-bg: #F9FAFB;
    --smart-surface: #FFFFFF;
    --smart-surface-hover: #F3F4F6;
    --smart-text-primary: #111827;
    --smart-text-body: #4B5563;
    --smart-text-muted: #9CA3AF;
    --smart-text-placeholder: #9CA3AF;
    --smart-border: #E5E7EB;
    --smart-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --smart-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
    --smart-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10);
    --smart-shadow-brand: 0 4px 16px rgba(124, 58, 237, 0.28);
    --smart-radius-sm: 8px;
    --smart-radius-md: 12px;
    --smart-radius-lg: 16px;
    --smart-radius-xl: 24px;
    --smart-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* 叠层架构：画布底色 — 侧边栏同色系，主画布卡片浮于其上 */
    --smart-canvas-bg: #EDEFF4;

    /* 紫色调辅助色板 */
    --smart-purple-lighter: #F5F3FF;
    --smart-purple-light: #EDE9FE;
    --smart-purple-mid: #DDD6FE;
}

.smart-page {
    margin: 0;
    padding: 0;
    color: var(--smart-text-primary);
    max-width: none; /* V06-LAYERED: 解除宽度锁，撑满画布容器 */
    user-select: none;
    -webkit-user-select: none;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* 裁剪溢出内容，防止撑破容器 */
}

.smart-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* UI v2（2026-05-06）：去掉白底卡片样式，整体融进页面背景 */
.smart-main {
    background: none;
    border: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto; /* V06-05: 成为对话框滚动容器，替代全局滚动 */
}

/* V06-LAYERED: 卡片样式已上提到 creative-studio-container，此处退化为透明内容区 */
/* 竖向三段布局保留：top 居中内容、bottom 贴底输入 */
.smart-empty-card {
    margin: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
}

.smart-empty-top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 48px 32px 32px;
}

/* V06-LAYERED: 底部输入区改为卡片内 in-flow，不再 fixed 定位 */
/* Layer 2: 嵌套圆角输入卡片，浮于主画布之上 */
.smart-empty-bottom {
    flex: 0 0 auto;
    padding: 16px 24px 24px;
    background: transparent;
    box-shadow: none;
    border-top: 1px solid rgba(0, 0, 0, 0.04);  /* 极淡分割线，区分内容区与输入区 */
}

.smart-empty-title {
    font-size: 32px;
    margin: 0;
    color: var(--smart-text-primary);
    font-weight: 700;
    letter-spacing: -0.3px;
    background: linear-gradient(135deg, var(--smart-brand-from), var(--smart-brand-to));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.smart-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    width: 100%;
    max-width: 640px;
}

.smart-chip {
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    background: var(--smart-bg);
    padding: 10px 16px;
    cursor: pointer;
    font-size: 15px;
    color: var(--smart-text-primary);
    transition: all var(--smart-transition);
    /* V05-31-V1: 文本溢出处理 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* 限制最大宽度，防止溢出网格单元格 */
    width: auto;
    flex: 0 0 auto;
}

.smart-chip:hover {
    border-color: var(--smart-brand-mid);
    background: rgba(124, 58, 237, 0.06);
    color: var(--smart-brand-from);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.12);
}

/* V05-06-V03：textarea 内置 mic/send 圆形按钮（绝对定位） */
/* V06-LAYERED: Layer2 嵌套输入卡片 — 略微凹陷的表面，形成层叠深度 */
/* V06-01: 卡片式约束 — max-width 居中 + 品牌色阴影，与创编中心对齐 */
.smart-input-row {
    position: relative;
    max-width: 700px;
    margin: 12px auto 0;
    border: 1px solid rgba(124, 58, 237, 0.10);
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.06);
    border-radius: var(--smart-radius-lg);
    background: transparent;  /* V06-R12: 透明，融入画布背景，textarea自带surface背景 */
    transition: box-shadow var(--smart-transition), background var(--smart-transition), border-color var(--smart-transition);
}

/* V06-LAYERED: 聚焦时强化品牌光晕，引导视觉焦点 */
.smart-input-row:focus-within {
    border-color: rgba(124, 58, 237, 0.25);
    box-shadow: 0 20px 44px rgba(124, 58, 237, 0.10);
    background: var(--smart-surface);  /* 聚焦时输入行整体提亮 */
}

.smart-input-row textarea {
    width: 100%;
    border: none;
    border-radius: var(--smart-radius-lg);
    min-height: 104px;
    padding: 14px 56px 14px 16px;
    resize: vertical;
    font-size: 15px;
    line-height: 1.6;
    box-sizing: border-box;
    background: var(--smart-surface);
    color: var(--smart-text-primary);
    transition: border-color var(--smart-transition);
    user-select: text;
    -webkit-user-select: text;
}

.smart-input-row textarea:focus {
    outline: none;
}

.smart-input-row textarea::placeholder {
    color: var(--smart-text-placeholder);
}

/* V06-LAYERED: 卡片内输入行自动撑满，移除全局 margin，保留居中 */
.smart-empty-bottom .smart-input-row {
    margin: 0 auto;
}

#smart-edit-input {
    width: 100%;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-md);
    min-height: 88px;
    padding: 14px;
    resize: vertical;
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
    background: var(--smart-surface);
    color: var(--smart-text-primary);
    transition: border-color var(--smart-transition);
    user-select: text;
    -webkit-user-select: text;
}

#smart-edit-input:focus {
    outline: none;
    border-color: var(--smart-brand-mid);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.smart-mic-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--smart-transition);
    padding: 0;
}

.smart-mic-btn .smart-send-icon { display: none; }
.smart-mic-btn .smart-mic-icon { display: inline-block; }

.smart-mic-btn[data-state="mic"] {
    background: var(--smart-surface-hover);
    color: var(--smart-text-body);
    border: 1px solid var(--smart-border);
}

.smart-mic-btn[data-state="mic"]:hover {
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-from);
    background: rgba(124, 58, 237, 0.06);
}

.smart-mic-btn[data-state="recording"] {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FCA5A5;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
    animation: smart-mic-pulse 1.1s infinite ease-in-out;
}

.smart-mic-btn[data-state="send"] {
    background: linear-gradient(135deg, var(--smart-brand-from), var(--smart-brand-to));
    color: #fff;
    box-shadow: var(--smart-shadow-brand);
}

.smart-mic-btn[data-state="send"]:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

.smart-mic-btn[data-state="send"] .smart-send-icon {
    display: inline-block;
}

/* Merged display:none rules - Phase 1 cleanup */
.smart-mic-btn[data-state="send"] .smart-mic-icon,
.smart-mic-btn[data-state="processing"] .smart-mic-icon,
.smart-script-version:first-of-type .smart-script-ver-divider,
.smart-think-summary::-webkit-details-marker,
.smart-asset-category.collapsed .smart-asset-category-grid,
.smart-step-trail:empty,
.smart-sidebar.is-collapsed .smart-sidebar-new-text,
.smart-sidebar.is-collapsed .smart-sidebar-group-label,
.smart-sidebar.is-collapsed .smart-sidebar-item-main,
.smart-sidebar.is-collapsed .smart-sidebar-item-pin,
.smart-sidebar.is-collapsed .smart-sidebar-item-dots {
    display: none;
}

/* 识别中状态：紫色底 + 四根短条声波长短波动 */
.smart-mic-btn[data-state="processing"] {
    background: rgba(124, 58, 237, 0.08);
    color: var(--smart-brand-from);
    border-color: rgba(124, 58, 237, 0.25);
    cursor: default;
}
.smart-mic-btn[data-state="processing"]::after {
    content: "";
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 18px;
}
/* 声波条 */
.smart-mic-btn[data-state="processing"]::before {
    content: "";
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 16px;
    width: 20px;
    background:
        linear-gradient(to top, currentColor 20%, transparent 20%) no-repeat 0px center / 3px 6px,
        linear-gradient(to top, currentColor 40%, transparent 40%) no-repeat 5px center / 3px 12px,
        linear-gradient(to top, currentColor 60%, transparent 60%) no-repeat 10px center / 3px 16px,
        linear-gradient(to top, currentColor 40%, transparent 40%) no-repeat 15px center / 3px 12px;
    animation: smart-wave-bounce 0.6s infinite ease-in-out alternate;
}
@keyframes smart-wave-bounce {
    0% {
        background:
            linear-gradient(to top, currentColor 20%, transparent 20%) no-repeat 0px center / 3px 4px,
            linear-gradient(to top, currentColor 40%, transparent 40%) no-repeat 5px center / 3px 8px,
            linear-gradient(to top, currentColor 60%, transparent 60%) no-repeat 10px center / 3px 16px,
            linear-gradient(to top, currentColor 40%, transparent 40%) no-repeat 15px center / 3px 8px;
    }
    100% {
        background:
            linear-gradient(to top, currentColor 60%, transparent 60%) no-repeat 0px center / 3px 16px,
            linear-gradient(to top, currentColor 20%, transparent 20%) no-repeat 5px center / 3px 4px,
            linear-gradient(to top, currentColor 40%, transparent 40%) no-repeat 10px center / 3px 10px,
            linear-gradient(to top, currentColor 60%, transparent 60%) no-repeat 15px center / 3px 16px;
    }
}

.smart-status-line {
    margin: 14px 0 0;
    color: var(--smart-text-muted);
    font-size: 13px;
    text-align: center;
    min-height: 18px;
}

/* 六槽位双轨问询表单 */
.smart-slot-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
    background: none;
    padding: 0;
}

.smart-slot-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--smart-border);
    padding-bottom: 14px;
}

.smart-slot-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.smart-slot-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--smart-text-primary);
    font-weight: 600;
}

.smart-slot-label .smart-slot-status {
    font-size: 12px;
    font-weight: 400;
    color: var(--smart-text-muted);
}

.smart-slot-label .smart-slot-status.is-filled {
    color: var(--smart-brand-from);
}

.smart-slot-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.smart-slot-chip {
    border: 1px solid var(--smart-border);
    border-radius: 999px;
    background: var(--smart-surface);
    padding: 6px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--smart-text-body);
    transition: all var(--smart-transition);
}

.smart-slot-chip:hover {
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-from);
    background: rgba(124, 58, 237, 0.04);
    transform: translateY(-1px);
}

.smart-slot-chip.is-active {
    background: linear-gradient(135deg, var(--smart-brand-from), var(--smart-brand-to));
    color: #fff;
    border-color: transparent;
    box-shadow: var(--smart-shadow-brand);
}

.smart-slot-input {
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    background: var(--smart-surface);
    box-sizing: border-box;
    width: 100%;
    color: var(--smart-text-primary);
    transition: border-color var(--smart-transition);
    user-select: text;
    -webkit-user-select: text;
}

.smart-slot-input:focus {
    outline: none;
    border-color: var(--smart-brand-mid);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.10);
}

.smart-slot-gate {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    margin-top: 8px;
}

.smart-slot-gate-hint {
    color: var(--smart-text-muted);
    font-size: 12px;
    text-align: center;
}

#smart-start-script {
    width: 100%;
}

.smart-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ── 按钮系统 ── */
.smart-primary {
    border: 0;
    border-radius: var(--smart-radius-sm);
    padding: 10px 18px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--smart-transition);
}

.smart-primary {
    background: linear-gradient(135deg, var(--smart-brand-from), var(--smart-brand-to));
    color: #fff;
    box-shadow: var(--smart-shadow-brand);
}

.smart-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

.smart-primary:active:not(:disabled) {
    transform: translateY(0);
}

.smart-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── P1：确认卡片放大（文案步骤专用） ── */
.smart-confirm-card-btn {
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.smart-secondary {
    background: var(--smart-surface);
    color: var(--smart-text-body);
    border: 1px solid var(--smart-border);
}

.smart-secondary:hover {
    background: var(--smart-surface-hover);
    border-color: #D1D5DB;
}

/* ── 各阶段外壳（V06-R2: 进度条已嵌入容器，恢复正常间距） ── */
.smart-stage {
    max-width: 960px;
    margin: 28px auto 0;
}

.smart-stage h3 {
    margin-top: 0;
    color: var(--smart-text-primary);
    font-weight: 600;
}

/* ── 方向网格 ── */
.smart-direction-grid,
.smart-style-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.smart-direction-btn,
.smart-style-card {
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-md);
    background: var(--smart-surface);
    text-align: left;
    padding: 14px;
    cursor: pointer;
    transition: all var(--smart-transition);
    box-shadow: var(--smart-shadow-sm);
}

.smart-direction-btn:hover,
.smart-style-card:hover {
    border-color: var(--smart-brand-mid);
    transform: translateY(-2px);
    box-shadow: var(--smart-shadow-md);
}

.smart-style-card.is-active {
    border-color: var(--smart-brand-mid);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(99, 102, 241, 0.05));
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
}

/* ── 文案区 ── */
.smart-script-body {
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-md);
    padding: 18px;
    min-height: 120px;
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 15px;
    color: var(--smart-text-primary);
    background: var(--smart-surface);
    box-shadow: var(--smart-shadow-sm);
    user-select: text;
    -webkit-user-select: text;
}

/* V05-30: 版本历史追加 — 每版独立区块 */
.smart-script-version {
    margin-bottom: 16px;
}
.smart-script-version:last-of-type {
    margin-bottom: 0;
}
.smart-script-ver-divider {
    border: 0;
    border-top: 1px dashed var(--smart-border);
    margin: 0 0 10px;
}
.smart-script-ver-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--smart-brand-mid, #7C3AED);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.smart-script-edit-hint {
    font-size: 12px;
    color: var(--smart-text-muted);
    margin: 0 0 6px;
    font-style: italic;
}
.smart-script-ver-text {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    margin: 0;
    color: var(--smart-text-body);
    user-select: text;
    -webkit-user-select: text;
}
/* 最新版本加深文字 */
.smart-script-version:last-of-type .smart-script-ver-text {
    color: var(--smart-text-primary);
    font-size: 15px;
    background: rgba(124, 58, 237, 0.04);
    border-radius: var(--smart-radius-sm, 6px);
    padding: 10px;
}
.smart-script-version:last-of-type .smart-script-ver-label {
    color: var(--smart-brand-from, #7C3AED);
}

.smart-script-meta,
.smart-script-summary {
    margin: 8px 0 0;
    color: var(--smart-text-body);
    font-size: 13px;
}

/* V05-06-V03：纯净文案布局（标题+口播稿+分隔线+小字 stats+50字简介） */
.smart-script-divider {
    margin: 16px 0 10px;
    border: 0;
    border-top: 1px solid var(--smart-border);
}

.smart-script-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--smart-text-muted);
    font-size: 12px;
}

.smart-script-stats li {
    margin: 0;
}

.smart-script-stats li::before {
    content: "· ";
    color: #D1D5DB;
}

#smart-script-current.is-out-of-range {
    color: #DC2626;
    font-weight: 600;
}

.smart-script-brief {
    margin: 10px 0 0;
    color: var(--smart-text-body);
    font-size: 13px;
    line-height: 1.6;
}

/* V05-06-V04：思考过程折叠区 */
.smart-think-details {
    margin: 8px 0 12px;
    background: var(--smart-surface);
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--smart-shadow-sm);
}

.smart-think-details[open] {
    background: var(--smart-surface);
}

.smart-think-summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px 10px 28px;
    font-size: 13px;
    color: var(--smart-text-muted);
    position: relative;
    transition: background-color var(--smart-transition);
}

.smart-think-summary:hover {
    background: var(--smart-surface-hover);
}

.smart-think-summary::before {
    content: "▶";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--smart-text-muted);
    transition: transform var(--smart-transition);
}

.smart-think-details[open] .smart-think-summary::before {
    transform: translateY(-50%) rotate(90deg);
}

.smart-think-body {
    margin: 0;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--smart-border);
    background: var(--smart-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--smart-text-body);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow: auto;
    user-select: text;
    -webkit-user-select: text;
}

/* ── 编辑区 ── */
.smart-edit-zone {
    margin-top: 14px;
    border-top: 1px solid var(--smart-border);
    padding-top: 12px;
}

.smart-edit-zone h4 {
    font-size: 14px;
    color: var(--smart-text-primary);
    font-weight: 600;
    margin: 0 0 10px;
}

.smart-edit-suggests {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.smart-edit-suggest {
    border: 1px solid var(--smart-border);
    border-radius: 999px;
    background: var(--smart-surface);
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--smart-text-body);
    transition: all var(--smart-transition);
}

.smart-edit-suggest:hover {
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-from);
    background: rgba(124, 58, 237, 0.04);
}

/* V05-30: 动态智能建议分组 */
.smart-edit-suggest-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--smart-border);
}
.smart-edit-suggest-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--smart-brand-mid, #7C3AED);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}
.smart-edit-suggest--dynamic {
    border-color: var(--smart-brand-mid, #7C3AED);
    color: var(--smart-brand-from, #7C3AED);
    background: rgba(124, 58, 237, 0.06);
}
.smart-edit-suggest--dynamic:hover {
    background: rgba(124, 58, 237, 0.12);
}

/* ── 资产 Tab ── */
.smart-asset-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.smart-asset-tabs button {
    border: 1px solid var(--smart-border);
    border-radius: 999px;
    background: var(--smart-surface);
    padding: 6px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--smart-text-body);
    transition: all var(--smart-transition);
}

.smart-asset-tabs button:hover {
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-from);
}

.smart-asset-tabs button.is-active {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(99, 102, 241, 0.08));
    color: var(--smart-brand-from);
    border-color: var(--smart-brand-mid);
    font-weight: 500;
}

/* Merged grid rules - Phase 1 cleanup */
.smart-asset-grid,
.smart-asset-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* ── 通用小字 ── */
.smart-card-kicker {
    font-size: 12px;
    color: var(--smart-text-muted);
    margin: 0 0 6px;
}
.smart-task-link {
    color: var(--smart-brand-mid);
    text-decoration: none;
    font-weight: 600;
    word-break: break-all;
}
.smart-task-link:hover {
    text-decoration: underline;
    color: var(--smart-brand-from);
}

.smart-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ── 风格列表 ── */
.smart-style-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.smart-style-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.smart-style-card .smart-style-thumb {
    aspect-ratio: 16 / 10;
    border-radius: var(--smart-radius-sm);
    background: linear-gradient(135deg, var(--smart-purple-light), var(--smart-purple-mid));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--smart-brand-from);
    font-size: 24px;
    font-weight: 600;
}

.smart-style-card .smart-style-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--smart-radius-sm);
}

.smart-style-card .smart-style-preview {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%) scale(0.96);
    width: 280px;
    max-width: 86vw;
    background: var(--smart-surface);
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-md);
    box-shadow: var(--smart-shadow-lg);
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 50;
}

.smart-style-card:hover .smart-style-preview,
.smart-style-card:focus-within .smart-style-preview {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.smart-style-card .smart-style-preview img {
    width: 100%;
    height: auto;
    border-radius: var(--smart-radius-sm);
}

/* ── 资产卡 ── */
.smart-asset-card {
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    padding: 10px;
    background: var(--smart-surface);
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: all var(--smart-transition);
    box-shadow: var(--smart-shadow-sm);
}

.smart-asset-card:hover {
    border-color: #D1D5DB;
    box-shadow: var(--smart-shadow-md);
}

.smart-asset-card .smart-asset-thumb {
    aspect-ratio: 4 / 3;
    border-radius: var(--smart-radius-sm);
    background: var(--smart-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--smart-border);
}

/* Merged image rules - Phase 1 cleanup */
.smart-asset-card .smart-asset-thumb img,
.smart-asset-thumb-card .smart-asset-thumb img,
.smart-image-edit-versions .smart-version-card .smart-version-thumb img,
.smart-ref-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.smart-asset-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--smart-text-body);
}

.smart-asset-tag {
    background: var(--smart-purple-light);
    color: var(--smart-brand-from);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
}

.smart-asset-card .smart-asset-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.smart-asset-card .smart-asset-actions button {
    flex: 1;
    border: 1px solid var(--smart-border);
    background: var(--smart-surface);
    border-radius: var(--smart-radius-sm);
    padding: 6px;
    font-size: 12px;
    cursor: pointer;
    color: var(--smart-text-body);
    transition: all var(--smart-transition);
}

.smart-asset-card .smart-asset-actions button:hover {
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-from);
}

.smart-asset-card .smart-asset-actions button.is-primary {
    background: linear-gradient(135deg, var(--smart-brand-from), var(--smart-brand-to));
    color: #fff;
    border-color: transparent;
}

.smart-asset-card .smart-asset-actions button.is-primary:hover {
    box-shadow: var(--smart-shadow-brand);
}

/* ── 资产进度 ── */
.smart-asset-progress {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 12px;
    color: var(--smart-text-body);
    font-size: 12px;
}

.smart-asset-progress span {
    background: var(--smart-surface-hover);
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--smart-border);
}

/* ── 资产添加 ── */
.smart-asset-add {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap; /* V05-30-V2: 允许小屏幕换行 */
}

/* V05-30-V2: 添加资产按钮样式 */
.smart-add-kind-btn {
    white-space: nowrap;
}

/* V05-30-V2: 删除 popover 样式（按钮已改为水平排列）*/

/* V1 迭代 · 总览分组渲染 */
/* V1.2 R8a：纵向分栏布局 + 大字header */
.smart-asset-grid--overview {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.smart-asset-category {
    margin-bottom: 0;
}
.smart-asset-category-header {
    font-size: 16px;
    font-weight: 600;
    padding: 8px 0;
    color: var(--smart-text-primary);
    border-bottom: 1px solid var(--smart-border);
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* V05-29: 总览紧凑缩略图卡 */
.smart-asset-thumb-card {
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--smart-transition);
}
.smart-asset-thumb-card:hover {
    border-color: var(--smart-brand-mid);
    box-shadow: var(--smart-shadow-brand, 0 0 0 2px rgba(111,81,255,.15));
}
.smart-asset-thumb-card .smart-asset-thumb {
    aspect-ratio: 4 / 3;
    background: var(--smart-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.smart-asset-thumb-card .smart-asset-thumb-title {
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--smart-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* V1.2 R8c：资产页面默认折叠 */
.smart-asset-category.collapsed .smart-asset-category-header {
    margin-bottom: 0;
}

/* V06-R9: 对话框气泡 — V05-29: 去掉裁剪框，全屏滚动+底部对齐 */
/* V06-01-R3: 移除内部 overflow-y，让全局滚动接管；增加 padding-bottom 补偿底部栏高度 */
.smart-v06-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0 120px; /* V06-01-R3: 底部留白 120px，防止最新消息被底部输入栏遮挡 */
    flex: 1;
    overflow-y: visible; /* V06-01-R3: 移除内部滚动，由 html body 全局滚动接管 */
    scroll-behavior: smooth;
    justify-content: flex-start; /* V06-01-R3: 改为 flex-start，消息从顶部开始排列 */
    min-height: 200px;
}
.smart-v06-bubble {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
    animation: smartBubbleIn 0.3s ease-out;
}
.smart-v06-bubble--user {
    align-self: flex-end;
    background: var(--smart-primary, #7c3aed);
    color: #fff;
    border-bottom-right-radius: 4px;
    text-align: right;
}

/* V06-R3: 最新用户消息吸顶 — 仿创编中心 .is-latest-user */
.smart-v06-bubble--user.is-latest-user {
    position: sticky;
    top: 80px; /* 位于 step-indicator(48px) + trail(32px) 下方 */
    z-index: 5;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: visible !important;
    /* V06-03-R1: 描边高亮最新用户消息（outline 不占盒模型，避免布局抖动） */
    outline: 2px solid var(--smart-primary);
    outline-offset: 2px;
}
.smart-v06-bubble--user.is-latest-user::before {
    display: none;
}
.smart-v06-bubble--user.is-latest-user::after {
    display: none;
}
.smart-v06-bubble--assistant {
    align-self: flex-start;
    background: var(--smart-surface, #f5f3ff);
    color: var(--smart-text-primary, #1a1a2e);
    border-bottom-left-radius: 4px;
    text-align: left;
}
/* V05-29: 状态行（豆包风格：一行短文字 + 折叠详情） */
.v06-status-line {
    align-self: flex-start;
    max-width: 85%;
    font-size: 13px;
    line-height: 1.5;
    color: var(--smart-text-muted, #8b8faa);
    padding: 4px 0;
    animation: smartBubbleIn 0.3s ease-out;
}
.v06-status-line summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--smart-text-body, #444);
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.v06-status-line summary::-webkit-details-marker { display: none; }
.v06-status-line summary::before {
    content: "▶";
    font-size: 9px;
    display: inline-block;
    transition: transform 0.2s;
    margin-top: 3px;
    flex-shrink: 0;
}
.v06-status-line details[open] summary::before {
    transform: rotate(90deg);
}
.v06-status-line .v06-status-text {
    flex: 1;
}
.v06-status-line details {
    margin: 0;
}
.v06-status-line .v06-status-log {
    font-size: 12px;
    color: var(--smart-text-muted, #8b8faa);
    padding: 4px 0 2px 14px;
    line-height: 1.4;
}
.smart-v06-bubble--assistant .v06-section {
    margin-top: 8px;
}
/* V2-P4: 对话气泡内嵌交互容器 — 撑满气泡宽度 */
.smart-v06-bubble--assistant:has(.v06-bubble-tree-wrapper),
.smart-v06-bubble--assistant:has(.v06-bubble-branch-wrapper),
.smart-v06-bubble--assistant:has(.v06-bubble-entity-wrapper),
.smart-v06-bubble--assistant:has(.v06-bubble-confirm-wrapper) {
    max-width: 95%;
    text-align: left;
}
.v06-bubble-tree-wrapper,
.v06-bubble-branch-wrapper,
.v06-bubble-entity-wrapper,
.v06-bubble-confirm-wrapper {
    width: 100%;
}
.v06-bubble-tree-wrapper .v06-tree-grid,
.v06-bubble-branch-wrapper .v06-branch-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    margin-top: 8px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.v06-bubble-tree-wrapper .v06-tree-grid::-webkit-scrollbar,
.v06-bubble-branch-wrapper .v06-branch-grid::-webkit-scrollbar {
    height: 4px;
}
.v06-bubble-tree-wrapper .v06-tree-grid::-webkit-scrollbar-thumb,
.v06-bubble-branch-wrapper .v06-branch-grid::-webkit-scrollbar-thumb {
    background: rgba(111,81,255,.25);
    border-radius: 2px;
}
.v06-bubble-entity-wrapper .v06-rich-candidates {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.v06-bubble-confirm-wrapper .v06-confirm-table {
    width: 100%;
}
.v06-bubble-confirm-wrapper .v06-confirm-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--smart-border, #e4e4f0);
}
.v06-bubble-confirm-wrapper .v06-generate-btn {
    margin-top: 12px;
    width: 100%;
}
@keyframes smartBubbleIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* V1.2 R2/R4/R7：状态词扫光动画 */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.smart-status-word.sweeping {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(124, 58, 237, 0.12) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 1.8s ease-in-out infinite;
}


/* V1 迭代 · 骨架卡片提取自 inline CSS (2026-05-18) */
.smart-asset-grid .is-generating .smart-asset-thumb-skeleton {
    background: var(--smart-surface-hover);
    border-radius: 8px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--smart-text-muted);
}
.smart-asset-card.is-generating {
    min-height: 120px;
}
.smart-asset-card.is-generating .smart-asset-meta {
    padding: 6px 0;
    font-size: 0.8rem;
    color: var(--smart-text-muted);
}

.smart-script-tab {
    border: 1px dashed var(--smart-border);
    border-radius: var(--smart-radius-sm);
    padding: 10px;
    color: var(--smart-text-body);
    margin: 0 0 10px;
    background: var(--smart-bg);
}

/* ── 图片编辑（V05-30-V2 全屏重写） ── */
.smart-image-edit {
    position: fixed;
    top: 0;
    left: 280px; /* 侧栏宽度 */
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--smart-bg);
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.smart-image-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--smart-surface);
    border-bottom: 1px solid var(--smart-border);
    flex-shrink: 0;
}

.smart-image-edit-head h4 {
    font-size: 16px;
    color: var(--smart-text-primary);
    font-weight: 600;
    margin: 0;
}

.smart-image-edit-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 3/4 图片预览区 */
.smart-image-edit-canvas {
    flex: 3;
    min-width: 0;
    background: var(--smart-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.smart-image-edit-canvas img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.smart-image-canvas,
.smart-paint-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.smart-paint-canvas {
    cursor: crosshair;
    z-index: 10;
}

/* 1/4 编辑面板 */
.smart-image-edit-panel {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    background: var(--smart-surface);
    border-left: 1px solid var(--smart-border);
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.smart-panel-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.smart-panel-section .smart-card-kicker {
    margin: 0 0 4px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--smart-text-secondary);
    font-weight: 600;
}

/* 编辑工具栏 */
.smart-edit-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.smart-tool-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    background: var(--smart-surface);
    color: var(--smart-text-primary);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
}

.smart-tool-btn:hover {
    border-color: var(--smart-brand-mid);
    background: var(--smart-purple-lighter);
}

.smart-tool-btn.is-active {
    border-color: var(--smart-brand-mid);
    background: var(--smart-purple-light);
    color: var(--smart-brand-from);
}

.smart-tool-btn svg {
    flex-shrink: 0;
}

/* 画笔大小 */
.smart-brush-size {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.smart-brush-size label {
    color: var(--smart-text-secondary);
    white-space: nowrap;
}

.smart-brush-size input[type="range"] {
    flex: 1;
    height: 4px;
    background: var(--smart-border);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

.smart-brush-size input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--smart-brand-mid);
    cursor: pointer;
}

.smart-brush-size #smart-brush-size-val {
    min-width: 36px;
    text-align: right;
    color: var(--smart-text-secondary);
    font-size: 12px;
}

/* 画笔颜色 */
.smart-brush-color {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.smart-brush-color label {
    color: var(--smart-text-secondary);
}

.smart-brush-color input[type="color"] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    padding: 2px;
    cursor: pointer;
}

/* 修改说明 */
.smart-panel-section textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    padding: 10px;
    font-size: 13px;
    line-height: 1.5;
    box-sizing: border-box;
    color: var(--smart-text-primary);
    background: var(--smart-surface);
    transition: border-color var(--smart-transition);
    user-select: text;
    -webkit-user-select: text;
}

.smart-panel-section textarea:focus {
    outline: none;
    border-color: var(--smart-brand-mid);
}

/* 参考图上传 */
.smart-ref-upload {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.smart-ref-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 2px dashed var(--smart-border);
    border-radius: var(--smart-radius-sm);
    background: var(--smart-surface);
    color: var(--smart-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
}

.smart-ref-upload-btn:hover {
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-from);
    background: var(--smart-purple-lighter);
}

.smart-ref-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.smart-ref-thumbnails img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--smart-radius-sm);
    border: 1px solid var(--smart-border);
}

/* 提交修改按钮 */
.smart-image-edit-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* 历史版本 */
.smart-image-edit-versions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.smart-image-edit-versions .smart-version-card {
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    padding: 6px;
    background: var(--smart-surface);
    cursor: pointer;
    font-size: 11px;
    color: var(--smart-text-body);
    text-align: left;
    transition: all var(--smart-transition);
}

.smart-image-edit-versions .smart-version-card:hover {
    border-color: #D1D5DB;
    box-shadow: var(--smart-shadow-sm);
}

.smart-image-edit-versions .smart-version-card.is-final {
    border-color: var(--smart-brand-mid);
    box-shadow: 0 0 0 1px var(--smart-brand-mid);
}

.smart-image-edit-versions .smart-version-card .smart-version-thumb {
    aspect-ratio: 4 / 3;
    background: var(--smart-bg);
    border-radius: 6px;
    margin-bottom: 4px;
    overflow: hidden;
}

/* 定稿按钮 */
.smart-image-edit-finalize {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--smart-border);
}

.smart-image-edit-finalize button {
    width: 100%;
}

/* ── 生产进度 ── */
.smart-production-progress {
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    padding: 14px;
    background: var(--smart-surface);
    color: var(--smart-text-body);
    font-size: 13px;
    line-height: 1.6;
    box-shadow: var(--smart-shadow-sm);
}

/* P1：生产进度条样式 */
.smart-progress-bar {
    height: 6px;
    background: var(--smart-border);
    border-radius: 3px;
    margin: 8px 0;
    overflow: hidden;
}
.smart-progress-fill {
    height: 100%;
    background: var(--smart-primary, #7C3AED);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.smart-progress-label {
    font-size: 11px;
    color: var(--smart-text-muted, #94a3b8);
    margin: 4px 0 8px;
}


/* ── 响应式 ── */
@media (max-width: 1080px) {
    .smart-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .smart-direction-grid,
    .smart-style-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .smart-asset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* V05-30-V2: 小屏幕图片编辑器堆叠 */
    .smart-image-edit-body {
        flex-direction: column;
    }
    .smart-image-edit-canvas {
        flex: none;
        height: 50vh;
    }
    .smart-image-edit-panel {
        flex: 1;
        max-width: none;
        min-width: auto;
        border-left: none;
        border-top: 1px solid var(--smart-border);
    }
    .smart-image-edit {
        left: 0; /* 小屏幕侧栏隐藏时全屏 */
    }
}

/* ============================================================
   V05-07-V01 新增样式（现代重构保持兼容）
   ============================================================ */

/* 生成前确认摘要卡 — P1放大 */
.smart-confirm-card {
    background: var(--smart-purple-lighter);
    border: 1px solid #E0D8FF;
    border-radius: var(--smart-radius-md);
    padding: 24px 28px 20px;
    margin-bottom: 20px;
    max-width: 620px;
}
.smart-confirm-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #5B21B6;
    margin: 0 0 12px;
}
.smart-confirm-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}
.smart-confirm-list li {
    font-size: 0.88rem;
    color: var(--smart-text-body);
    line-height: 1.5;
}
.smart-confirm-list strong {
    color: var(--smart-text-muted);
    font-weight: 500;
}
.smart-confirm-edit-btn {
    font-size: 0.82rem;
    color: var(--smart-brand-from);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--smart-transition);
}
.smart-confirm-edit-btn:hover { color: #5B21B6; }

/* 文案区字数/简介（不再折叠） */
.smart-script-meta-details {
    margin-top: 14px;
}

/* 资产卡 generating 状态 */
.smart-asset-card.is-generating .smart-asset-thumb {
    position: relative;
}
.smart-asset-card.is-generating .smart-asset-thumb::after {
    content: "生成中…";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--smart-brand-from);
    border-radius: 6px;
}

/* ── V05-07-V03: 资产卡重新生成覆盖层 ── */

.smart-asset-regen-btn {
    font-size: 0.75rem;
    padding: 3px 10px;
    border: 1px solid #C7B8FF;
    border-radius: 4px;
    background: transparent;
    color: var(--smart-brand-from);
    cursor: pointer;
    transition: all var(--smart-transition);
}
.smart-asset-regen-btn:hover {
    background: var(--smart-purple-light);
}

.smart-asset-regen-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(255,255,255,0.97);
    border-radius: var(--smart-radius-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--smart-shadow-md);
    border: 1px solid #E0D8FF;
}

.smart-asset-regen-overlay[hidden] { display: none !important; }

.smart-regen-prompt {
    width: 100%;
    resize: vertical;
    border: 1px solid #D5CCFF;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--smart-text-primary);
    background: #FAF9FF;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--smart-transition);
    user-select: text;
    -webkit-user-select: text;
}
.smart-regen-prompt:focus {
    border-color: var(--smart-brand-mid);
    background: var(--smart-surface);
}

.smart-regen-ref-label {
    font-size: 0.76rem;
    color: var(--smart-text-body);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.smart-regen-ref-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.smart-regen-ref-url {
    flex: 1;
    border: 1px solid #D5CCFF;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 0.78rem;
    color: var(--smart-text-primary);
    background: #FAF9FF;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--smart-transition);
}
.smart-regen-ref-url:focus {
    border-color: var(--smart-brand-mid);
}
.smart-regen-ref-file {
    font-size: 0.75rem;
    cursor: pointer;
    max-width: 120px;
}

.smart-regen-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.smart-btn-secondary {
    font-size: 0.78rem;
    padding: 5px 14px;
    border: 1px solid var(--smart-border);
    border-radius: 5px;
    background: var(--smart-surface);
    color: var(--smart-text-body);
    cursor: pointer;
    transition: all var(--smart-transition);
}
.smart-btn-secondary:hover { background: var(--smart-surface-hover); }

.smart-btn-primary {
    font-size: 0.78rem;
    padding: 5px 16px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--smart-brand-from), var(--smart-brand-to));
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    transition: all var(--smart-transition);
}
.smart-btn-primary:hover { box-shadow: var(--smart-shadow-brand); }

/* Toast 通知 */
.smart-regen-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--smart-text-primary);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--smart-radius-sm);
    font-size: 0.85rem;
    z-index: 9999;
    pointer-events: none;
    animation: smart-toast-in 0.25s ease;
    box-shadow: var(--smart-shadow-lg);
}
@keyframes smart-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* V05-30-V2: Toast 类型样式变体 */
.smart-toast-success {
    background: #10b981 !important;
}
.smart-toast-warning {
    background: #f59e0b !important;
}
.smart-toast-error {
    background: #ef4444 !important;
}
.smart-toast-info {
    background: var(--smart-text-primary) !important;
}

/* ── V05-13-V01：多图上传 + 视频预览 + 下载按钮 ── */

/* 多参考图网格 */
.smart-ref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}
.smart-ref-thumb {
    position: relative;
    border-radius: var(--smart-radius-sm);
    overflow: hidden;
    aspect-ratio: 1;
    background: #1E1B2E;
    border: 1px solid #2D2A4A;
}

.smart-ref-thumb .smart-ref-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.8);
    border: none;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}
.smart-ref-thumb:hover .smart-ref-remove {
    opacity: 1;
}
.smart-ref-thumb .smart-ref-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3px 6px;
    background: rgba(0,0,0,0.6);
    color: #AAAA;
    font-size: 11px;
    text-align: center;
}

/* 视频播放器容器 */
.smart-video-container {
    margin: 20px auto;
    max-width: 720px;
}
.smart-video-container h4 {
    color: var(--smart-text-primary);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* 下载按钮 */
.smart-download-btn {
    display: block;
    margin: 12px auto 0;
    padding: 10px 28px;
    background: linear-gradient(135deg, var(--smart-brand-from), var(--smart-brand-to));
    border: none;
    border-radius: var(--smart-radius-sm);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--smart-transition);
}
.smart-download-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--smart-shadow-brand);
}

/* ─── V06 三页流样式 ──────────────────────────────────────────────────────── */

/* V1.2 R1：chip 行内非换行，宽度匹配文字 */
.v06-chip-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 100%;
}

/* V06 流区段通用容器 */
.smart-stage--v06 {
    max-width: 960px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: calc(100vh - 200px);
}
.v06-section {
    background: var(--smart-surface, #fff);
    border-radius: var(--smart-radius-lg, 16px);
    box-shadow: var(--smart-shadow-md, 0 4px 16px rgba(0,0,0,.08));
    padding: 24px;
    margin-bottom: 16px;
    animation: fadeInUp .25s ease;
}
.v06-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--smart-text-primary, #1a1a2e);
    margin: 0 0 6px;
}
.v06-section-hint {
    font-size: 0.9rem;
    color: var(--smart-text-muted, #8b8faa);
    margin: 0 0 16px;
}

/* 树干卡网格 — 横向滚动一行展示 */
.v06-tree-grid,
.v06-branch-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.v06-tree-grid::-webkit-scrollbar,
.v06-branch-grid::-webkit-scrollbar {
    height: 4px;
}
.v06-tree-grid::-webkit-scrollbar-thumb,
.v06-branch-grid::-webkit-scrollbar-thumb {
    background: rgba(111,81,255,.25);
    border-radius: 2px;
}

.v06-tree-card,
.v06-branch-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    background: rgba(255,255,255,.7);
    border: 1.5px solid var(--smart-border, #e4e4f0);
    border-radius: var(--smart-radius-md, 10px);
    cursor: pointer;
    transition: all var(--smart-transition, .18s);
    text-align: left;
    user-select: none;
    flex-shrink: 0;
    min-width: 140px;
    max-width: 180px;
    scroll-snap-align: start;
}
.v06-tree-card:hover,
.v06-branch-card:hover {
    border-color: var(--smart-brand-mid);
    box-shadow: var(--smart-shadow-brand, 0 0 0 3px rgba(111,81,255,.18));
    transform: translateY(-1px);
}
.v06-tree-name,
.v06-branch-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--smart-text-primary, #1a1a2e);
}
.v06-tree-branches,
.v06-branch-req {
    font-size: 0.78rem;
    color: var(--smart-text-muted, #8b8faa);
}

/* 分页按钮 */
.v06-tree-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
    font-size: 0.88rem;
    color: var(--smart-text-body, #444);
}
.v06-page-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--smart-border, #e4e4f0);
    background: rgba(255,255,255,.8);
    cursor: pointer;
    font-size: 0.88rem;
    transition: all var(--smart-transition, .18s);
}
.v06-page-btn:disabled { opacity: .45; cursor: not-allowed; }
.v06-page-btn:not(:disabled):hover {
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-mid);
}

/* V1.2 R3：P2 富候选卡片改版 */
.v06-rich-candidates {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}
.v06-rich-card {
    background: var(--smart-bg-card, #fff);
    border: 1.5px solid var(--smart-border, #e4e4f0);
    border-radius: 12px;
    padding: 12px 16px;
    transition: all var(--smart-transition, .18s);
}
.v06-rich-card:hover {
    border-color: var(--smart-brand-mid);
    box-shadow: var(--smart-shadow-brand, 0 0 0 3px rgba(111,81,255,.12));
}
.v06-rich-card--dismissed {
    opacity: .45;
    pointer-events: none;
}
.v06-rich-card__emoji {
    display: inline-block;
    font-size: 1.2rem;
    margin-right: 4px;
    vertical-align: middle;
}
.v06-rich-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 6px 0 8px;
    font-size: 0.82rem;
    color: var(--smart-text-muted, #8b8faa);
}
.v06-rich-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.v06-rich-card__desc {
    font-size: 0.88rem;
    color: var(--smart-text-body, #444);
    line-height: 1.5;
    margin-bottom: 10px;
}
.v06-rich-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.v06-rich-card__confirm {
    padding: 6px 18px;
    background: linear-gradient(135deg, var(--smart-brand-from, #8b5cf6), var(--smart-brand-to, #6366f1));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all var(--smart-transition, .18s);
}
.v06-rich-card__confirm:hover { opacity: .85; transform: translateY(-1px); }
.v06-rich-card__switch {
    padding: 6px 14px;
    background: transparent;
    border: 1.5px solid var(--smart-border, #e4e4f0);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--smart-text-muted, #8b8faa);
    cursor: pointer;
    transition: all var(--smart-transition, .18s);
}
.v06-rich-card__switch:hover {
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-mid);
}

/* 手动输入行 */
.v06-entity-free-input {
    display: flex;
    gap: 8px;
    align-items: center;
}
.v06-free-input {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--smart-border, #e4e4f0);
    border-radius: 8px;
    font-size: 0.92rem;
    background: rgba(255,255,255,.9);
    transition: border-color var(--smart-transition, .18s);
    user-select: text;
}
.v06-free-input:focus { outline: none; border-color: var(--smart-brand-mid); }
.v06-confirm-entity-btn {
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--smart-brand-from, #8b5cf6), var(--smart-brand-to, #6366f1));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all var(--smart-transition, .18s);
}
.v06-confirm-entity-btn:hover { opacity: .85; transform: translateY(-1px); }

/* V05-29: 实体输入区语音按钮 */
.v06-entity-voice-btn {
    padding: 6px 10px;
    background: rgba(111,81,255,.08);
    color: var(--smart-brand-mid);
    border: 1.5px solid var(--smart-border, #e4e4f0);
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--smart-transition, .18s);
    line-height: 1;
}
.v06-entity-voice-btn:hover {
    background: rgba(111,81,255,.15);
    border-color: var(--smart-brand-mid);
}
.v06-entity-voice-btn[data-state="recording"] {
    background: rgba(239,68,68,.12);
    color: #ef4444;
    border-color: #ef4444;
    animation: v06VoicePulse 1s ease-in-out infinite;
}
@keyframes v06VoicePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* V06 fix: 全局返回/跳过按钮 */
.v06-back-btn {
    display: block;
    margin: 14px auto 0;
    padding: 6px 18px;
    border-radius: 20px;
    border: 1.5px solid var(--smart-border, #e4e4f0);
    background: rgba(255,255,255,.8);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--smart-text-muted, #8b8faa);
    transition: all var(--smart-transition, .18s);
}
.v06-back-btn:hover {
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-mid);
}
.v06-entity-actions {
    margin-top: 12px;
    text-align: center;
}
.v06-skip-btn {
    padding: 6px 18px;
    border-radius: 20px;
    border: 1.5px solid var(--smart-border, #e4e4f0);
    background: var(--smart-bg-card, #fff);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--smart-text-muted, #8b8faa);
    transition: all var(--smart-transition, .18s);
}
.v06-skip-btn:hover {
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-mid);
}

/* P3 汇总确认页 */
.v06-confirm-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.v06-confirm-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--smart-border, #e4e4f0);
    border-radius: 8px;
    transition: border-color var(--smart-transition, .18s);
}
.v06-confirm-row:hover { border-color: var(--smart-brand-mid); }
.v06-confirm-label {
    width: 80px;
    min-width: 80px;
    font-size: 0.85rem;
    color: var(--smart-text-muted, #8b8faa);
    font-weight: 500;
}
.v06-confirm-value {
    flex: 1;
    font-size: 0.95rem;
    color: var(--smart-text-primary, #1a1a2e);
    min-height: 1.4em;
    outline: none;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--smart-transition, .18s);
    user-select: text;
}
.v06-confirm-value:focus { border-bottom-color: var(--smart-brand-mid); }
.v06-generate-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
}
.v06-error {
    color: #d94040;
    font-size: 0.9rem;
    padding: 12px;
    text-align: center;
}
.v06-candidates-wrapper { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════
 * V1.3 连续性体验升级（方向 A + B + C）
 * ══════════════════════════════════════════════════════════ */

/* ── 方向 C：步骤指示器（V06-R2: sticky 嵌入容器内顶部，不再 fixed 悬浮） ── */
.smart-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px 20px 6px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--smart-surface);
    border-radius: var(--smart-radius-xl) var(--smart-radius-xl) 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Merged display:none!important rules - Phase 1 cleanup */
.smart-step-indicator[hidden],
.smart-step-trail[hidden],
.smart-stage--folded > * {
    display: none !important;
}
/* V05-30-V2: 进度条主标题（与侧栏激活项目双向同步） */
.smart-step-indicator-title {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: var(--smart-text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* V06-R2: 小屏侧栏隐藏时标题收起 */
@media (max-width: 768px) {
    .smart-step-indicator-title {
        display: none;
    }
}
.smart-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 48px;
    cursor: default;
}
.smart-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: all .25s ease;
    border: 2px solid var(--smart-border, #E5E7EB);
    background: var(--smart-surface, #fff);
    color: var(--smart-text-muted, #9CA3AF);
}
.smart-step-label {
    font-size: 11px;
    color: var(--smart-text-muted, #9CA3AF);
    transition: color .25s ease;
}
.smart-step-connector {
    width: 24px;
    height: 2px;
    background: var(--smart-border, #E5E7EB);
    margin-bottom: 18px;
    transition: background .3s ease;
}
/* 已完成步骤 */
.smart-step.is-done .smart-step-dot {
    background: linear-gradient(135deg, var(--smart-brand-from), var(--smart-brand-to));
    border-color: transparent;
    color: #fff;
}
.smart-step.is-done .smart-step-label {
    color: var(--smart-brand-from, #7C3AED);
    font-weight: 500;
}
.smart-step-connector.is-done {
    background: linear-gradient(90deg, var(--smart-brand-from), var(--smart-brand-to));
}
/* 当前步骤 */
.smart-step.is-active .smart-step-dot {
    background: var(--smart-surface, #fff);
    border-color: var(--smart-brand-mid);
    color: var(--smart-brand-mid);
    box-shadow: 0 0 0 4px rgba(111, 81, 255, 0.12);
    transform: scale(1.1);
}
.smart-step.is-active .smart-step-label {
    color: var(--smart-brand-mid);
    font-weight: 600;
}
/* 待做步骤 */
.smart-step.is-pending .smart-step-dot {
    opacity: 0.5;
}
.smart-step.is-pending .smart-step-label {
    opacity: 0.5;
}

/* 小屏适配：指示器缩小 */
@media (max-width: 600px) {
    .smart-step { min-width: 36px; }
    .smart-step-dot { width: 24px; height: 24px; font-size: 10px; }
    .smart-step-connector { width: 12px; }
    .smart-step-label { font-size: 9px; }
}

/* ── 方向 A：折叠摘要 trail（V05-30-V2: 固定在进度条下方） ── */
.smart-step-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 20px 8px;
    min-height: 0;
    transition: min-height .3s ease;
    /* V06-R3: sticky 定位 — 位于 step-indicator(48px) 下方 */
    position: sticky;
    top: 48px;
    z-index: 9;
    background: var(--smart-surface);
    border-bottom: 1px solid rgba(139, 92, 246, .1);
}
.smart-trail-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(124, 58, 237, 0.15);
    font-size: 12px;
    color: var(--smart-text-body, #4B5563);
    animation: smartTrailFadeIn .3s ease;
    max-width: 280px;
    overflow: hidden;
}
.smart-trail-check {
    color: var(--smart-brand-from, #7C3AED);
    font-weight: 700;
    flex-shrink: 0;
}
.smart-trail-label {
    font-weight: 600;
    color: var(--smart-brand-mid);
    flex-shrink: 0;
}
.smart-trail-detail {
    color: var(--smart-text-muted, #9CA3AF);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smart-trail-detail::before {
    content: ": ";
}

@keyframes smartTrailFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 方向 B：垂直流式折叠 ── */
/* 折叠态：已完成 section 收缩为紧凑摘要栏，不再 hidden */
.smart-stage--folded {
    padding: 0 !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(139, 92, 246, .18);
    opacity: .68;
    cursor: pointer;
    user-select: none;
    transition: opacity .3s ease, margin .3s ease, padding .3s ease;
}

/* 折叠态标题（由 JS 注入 data-fold-title 属性驱动） */
.smart-stage--folded::before {
    content: attr(data-fold-title);
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--smart-text-secondary, #94a3b8);
    padding: 8px 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .01em;
}

.smart-stage--folded:hover {
    opacity: .92;
}

/* 当前活动态：入场动画 */
.smart-stage--active {
    animation: smartFadeInUp .35s ease;
}

@keyframes smartFadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 未折叠/未激活的普通阶段仍然有基础动画（兼容旧逻辑） */
.smart-stage:not([hidden]):not(.smart-stage--folded):not(.smart-stage--active) {
    animation: smartFadeInUp .3s ease;
}

/* V06-fix-20260601: [hidden] 被 display:flex 高特异性覆盖，显式兜底（HOME页专属） */
.smart-home[hidden] {
    display: none !important;
}
.smart-stage[hidden] {
    display: none !important;
}
#smart-v06-dialog[hidden] {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════
 * V05-30: 全局底部快捷输入栏
 * ══════════════════════════════════════════════════════════ */

.smart-global-bar {
    position: fixed;
    bottom: 0;
    left: 280px;  /* 对齐侧边栏宽度，不穿透 */
    right: 0;
    z-index: 100;
    /* V06-R3: 去灰底+毛玻璃，改用创编中心式双层伪元素遮罩 */
    background: transparent;
    border-top: none;
    padding: 10px 16px 16px;
    box-shadow: none;
    transform: translateY(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* V06-R3: 上缘渐变遮罩 — 消息向输入框过渡 */
.smart-global-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
    /* V06-01-R3: 渐变终点改为白色，消息区 #EDEFF4 → 输入区白色卡片平滑过渡 */
    background: linear-gradient(to bottom, rgba(237, 239, 244, 0) 0%, var(--smart-surface) 100%);
    pointer-events: none;
    z-index: -1;
}
/* V06-R3: 背后实底色块 — 阻断消息流穿透输入框 */
/* V06-01-R3: 白色卡片底，与输入框卡片一体，浮于 #EDEFF4 画布背景之上 */
.smart-global-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -48px;
    background: var(--smart-surface); /* 白色卡片背景 #FFFFFF */
    pointer-events: none;
    z-index: -1;
}
.smart-global-bar:not(.is-visible) {
    transform: translateY(100%);
}
/* V06-01-R1: 多轮对话输入框外层容器 — 提供品牌色卡片效果，与欢迎页 .smart-input-row 对齐 */
.smart-global-bar-inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    /* V06-01: 品牌色边框+阴影卡片效果 */
    border: 1px solid rgba(124, 58, 237, 0.10);
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.06);
    border-radius: var(--smart-radius-lg);
    background: var(--smart-surface);
    padding: 4px; /* 内边距，让 textarea 不贴边 */
    transition: box-shadow var(--smart-transition), border-color var(--smart-transition);
}
.smart-global-bar-inner:focus-within {
    border-color: rgba(124, 58, 237, 0.25);
    box-shadow: 0 20px 44px rgba(124, 58, 237, 0.10);
}
/* V06-01-R1: 多轮对话输入框样式与欢迎页对齐 — 透明背景，卡片效果在外层 */
.smart-global-bar textarea {
    flex: 1;
    border: none; /* 移除边框，由外层容器提供品牌色边框 */
    border-radius: var(--smart-radius-lg);
    min-height: 52px;
    max-height: 120px;
    padding: 12px 16px;
    resize: none;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    background: transparent; /* V06-01-R1: 透明背景，融入外层卡片 */
    box-shadow: none; /* V06-01-R1: 移除阴影，由外层容器提供 */
    color: var(--smart-text-primary);
    transition: border-color var(--smart-transition);
    user-select: text;
    -webkit-user-select: text;
}
.smart-global-bar textarea:focus {
    outline: none;
    border-color: rgba(124, 58, 237, 0.30);
    box-shadow: 0 18px 40px rgba(124, 58, 237, 0.10);
}
.smart-global-bar textarea::placeholder {
    color: var(--smart-text-placeholder);
}
.smart-global-bar .smart-global-send {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--smart-brand-from), var(--smart-brand-to));
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
}
.smart-global-bar .smart-global-send:hover {
    opacity: 0.9;
    transform: scale(1.05);
}
.smart-global-bar .smart-global-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}
.smart-global-bar .smart-global-send svg {
    width: 18px;
    height: 18px;
}

/* V06-LAYERED: 底部栏出现时，补偿高度改为更紧凑的值 */
body.has-global-bar {
    padding-bottom: 90px;
}

/* V05-30: 页面滚动条确保在视口最右侧 */
html {
    overflow-y: auto;
    overflow-x: hidden;
}
body {
    min-height: 100vh;
}
.creative-page-shell {
    display: flex;
    min-height: 100vh;
    margin-left: -24px;  /* V05-31-V3: 消除 base.html .main-content 24px padding */
    margin-right: -24px;
    margin-bottom: -24px;
    background: var(--smart-canvas-bg);  /* V06-LAYERED: 统一底色，侧边栏与画布区浑然一体 */
}

/* V05-31-V1: HOME 阶段禁止页面滚动，确保提示条和输入框位置固定 */
/* V06-R13: smart-home 高度链补全 — flex column 确保 empty-card 吸底生效 */
.smart-home {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* 主内容容器 — 永久浅色圆角矩形底，所有内容在此流动 */
/* V06-LAYERED: Layer1 全幅白底圆角卡片，浮于 canvas-bg 之上 */
/* V06-R2: fixed 定位，贴边不滚动，置于侧边栏上层 */
.creative-studio-container {
    position: fixed;
    top: 64px;        /* 对齐全局导航栏底部 */
    left: 280px;       /* 侧边栏宽度 */
    right: 0;
    bottom: 0;
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--smart-surface);
    border-radius: var(--smart-radius-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    z-index: 100;      /* 浮于侧边栏(40)之上 */
}

/* V06-R2: 侧边栏折叠时，主内容区左边缘跟随折叠 */
.smart-sidebar.is-collapsed ~ .creative-studio-container,
.creative-studio-container.with-collapsed-sidebar {
    left: 60px; /* 60px折叠侧栏宽度 */
}

/* HOME 阶段时，主内容区不滚动（由 JS 动态添加类控制） */
.creative-studio-container.is-home-mode {
    overflow-y: hidden;
}
/* HOME 模式：隐藏所有阶段容器，让 .smart-home 独占全部高度 */
.creative-studio-container.is-home-mode .smart-stage {
    display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   V06: 侧栏历史对话 — 重设计（折叠+搜索+置顶分组+dropdown+动效）
   ═══════════════════════════════════════════════════════════════════════════ */

/* === NGINX_CACHE_TEST_MARKER_2026-05-31_22-30 === */
/* V05-31-V3: 侧边栏 fixed 定位，紧贴左边缘，不随页面内容滚动 */
/* V06-LAYERED: Layer0 底色 — 侧边栏与画布区同色，融为一体 */
.smart-sidebar {
    width: 280px;
    min-width: 280px;
    height: calc(100vh - 64px); /* 对齐全局导航栏高度 64px */
    position: fixed; /* 固定在视口左侧，不随内容滚动 */
    top: 64px; /* 对齐全局导航栏底部 */
    left: 0; /* 紧贴视口左边缘，不留空隙 */
    background: var(--smart-canvas-bg);  /* 与主画布区底色统一 */
    /* border-right 已移除 — 无分割线设计 */
    display: flex;
    flex-direction: column;
    z-index: 40; /* V06-R2: 低于画布底框(100)，侧边栏处于叠层最底层 */
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1),
                min-width 300ms cubic-bezier(0.4, 0, 0.2, 1),
                background 300ms ease;
    overflow: hidden;
}

/* ── 折叠态 ── */
.smart-sidebar.is-collapsed {
    width: 60px;
    min-width: 60px;
    height: calc(100vh - 64px); /* V05-31-V3: 对齐全局导航栏 64px */
}

/* ── 折叠/展开按钮 ── */
.smart-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--smart-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 120ms ease, background 120ms ease;
}
.smart-sidebar-toggle:hover {
    color: var(--smart-brand-mid);
    background: rgba(124, 58, 237, 0.06);
}
.smart-sidebar.is-collapsed .smart-sidebar-toggle {
    margin: 0 auto;
}

/* ── 头部区域 ── */
.smart-sidebar-head {
    padding: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.smart-sidebar.is-collapsed .smart-sidebar-head {
    flex-direction: column;
    gap: 12px;
    padding: 12px 8px;
}

/* ── 新建按钮 ── */
.smart-sidebar-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 10px 0;
    border: 1px dashed var(--smart-border);
    border-radius: var(--smart-radius-sm);
    background: transparent;
    color: var(--smart-brand-mid);
    font-size: 14px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.smart-sidebar-new:hover {
    background: rgba(124, 58, 237, 0.05);
    border-color: var(--smart-brand-mid);
}
.smart-sidebar.is-collapsed .smart-sidebar-new {
    flex: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    min-width: 0;
}
/* ── 搜索框 ── */
.smart-sidebar-search {
    padding: 0 12px 8px;
    flex-shrink: 0;
    position: relative;
    transition: opacity 200ms ease, padding 200ms ease;
}
.smart-sidebar.is-collapsed .smart-sidebar-search {
    opacity: 0;
    pointer-events: none;
    padding: 0;
    height: 0;
    overflow: hidden;
}
.smart-sidebar-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--smart-text-muted);
    pointer-events: none;
}
.smart-sidebar-search-input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border: 1px solid var(--smart-border);
    border-radius: 8px;
    background: var(--smart-surface-hover);
    color: var(--smart-text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 150ms ease, background 150ms ease;
}
.smart-sidebar-search-input::placeholder {
    color: var(--smart-text-muted);
}
.smart-sidebar-search-input:focus {
    border-color: var(--smart-brand-mid);
    background: var(--smart-surface);
}

/* ── 项目列表 ── */
.smart-sidebar-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8px 8px;
    transition: opacity 200ms ease;
    scroll-behavior: smooth;
}
.smart-sidebar.is-collapsed .smart-sidebar-list {
    padding: 0 4px;
}

/* ── 侧栏滚动条（细、半透明、hover 强化）── */
.smart-sidebar-list::-webkit-scrollbar {
    width: 5px;
}
.smart-sidebar-list::-webkit-scrollbar-track {
    background: transparent;
}
.smart-sidebar-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    transition: background 200ms ease;
}
.smart-sidebar-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.24);
}
/* Firefox 细滚动条 */
.smart-sidebar-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

/* ── 分组容器 ── */
.smart-sidebar-group {
    /* structural wrapper, no extra spacing needed */
}

/* ── 分组标签 ── */
.smart-sidebar-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--smart-text-muted);
    text-transform: none;
    padding: 12px 8px 4px;
    letter-spacing: 0.02em;
    transition: opacity 180ms ease;
}
/* 置顶分组标签特殊色 */
.smart-sidebar-group-label.is-pinned {
    color: #C88A04;
}

/* ── 无结果/空态 ── */
.smart-sidebar-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--smart-text-muted);
    line-height: 1.5;
}
.smart-sidebar-empty-icon {
    display: block;
    margin: 0 auto 8px;
    opacity: 0.3;
}

/* ── 项目卡片 ── */
.smart-sidebar-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--smart-radius-sm);
    cursor: pointer;
    transition: background 120ms ease;
    position: relative;
    gap: 8px;
    margin-bottom: 2px;
}
.smart-sidebar-item:hover {
    background: var(--smart-surface-hover);
}
.smart-sidebar-item.is-active {
    background: transparent;
    outline: 2px solid var(--smart-brand-mid);
    outline-offset: -2px;
    border: 0;
    box-shadow: none;
    padding-left: 10px;
    border-radius: var(--smart-radius-sm);
}

/* ── 项目图标 ── */
.smart-sidebar-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--smart-surface-hover);
    flex-shrink: 0;
    font-size: 16px;
    transition: background 120ms ease;
}
.smart-sidebar-item.is-active .smart-sidebar-item-icon {
    background: var(--smart-surface-hover);
}
.smart-sidebar.is-collapsed .smart-sidebar-item-icon {
    margin: 0 auto;
}

/* ── 项目主内容区 ── */
.smart-sidebar-item-main {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity 180ms ease;
}
/* ── 项目标题 ── */
.smart-sidebar-item-title {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--smart-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.smart-sidebar-item.is-active .smart-sidebar-item-title {
    font-weight: 700;
    color: var(--smart-text-primary);
}
/* 搜索高亮 */
.smart-sidebar-item-title mark {
    background: rgba(124, 58, 237, 0.18);
    color: var(--smart-brand-mid);
    border-radius: 2px;
}
/* V06-01-V3: 侧边栏项目状态指示点 */
.smart-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot-color, #9ca3af);
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}
/* V06-01-V3: 处理中脉冲动画 */
.smart-status-dot--processing {
    animation: smart-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes smart-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.25); }
}

/* V06-05: 后台处理完成通知圆点 */
.smart-bg-notif-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    margin-right: 4px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    animation: smart-notif-pulse 2s ease-in-out infinite;
}
@keyframes smart-notif-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
    50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* ── 副标题（时间 · 字数） ── */
.smart-sidebar-item-meta {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--smart-text-muted);
    line-height: 1.2;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 置顶标记 ── */
.smart-sidebar-item-pin {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #C88A04;
    opacity: 0.7;
}
/* ── 三 dots 菜单按钮 ── */
.smart-sidebar-item-dots {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--smart-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
    flex-shrink: 0;
}
.smart-sidebar-item:hover .smart-sidebar-item-dots,
.smart-sidebar-item-dots.is-open {
    opacity: 1;
}
.smart-sidebar-item-dots:hover {
    background: var(--smart-surface-hover);
    color: var(--smart-text-primary);
}

/* ─ P2：继续推进按钮（▶️）—— 默认可见 ── */
.smart-sidebar-resume-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #10b981;
    background: rgba(16, 185, 129, 0.08);
    color: #10b981;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 120ms ease;
    flex-shrink: 0;
    margin-right: 4px;
}
.smart-sidebar-item:hover .smart-sidebar-resume-btn {
    opacity: 1;
}
.smart-sidebar-resume-btn:hover {
    background: #10b981;
    color: #fff;
    transform: scale(1.1);
    opacity: 1;
}

/* 续跑按钮（handoff 阶段 — 橙色，区别于继续推进的绿色） */
.smart-sidebar-rerun-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
    font-size: 13px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 120ms ease;
    flex-shrink: 0;
    margin-right: 4px;
}
.smart-sidebar-item:hover .smart-sidebar-rerun-btn {
    opacity: 1;
}
.smart-sidebar-rerun-btn:hover {
    background: #f59e0b;
    color: #fff;
    transform: scale(1.1);
    opacity: 1;
}

/* ── Dropdown 菜单（position 由 JS 动态设为 fixed，避免侧栏 overflow:hidden 裁剪）── */
.smart-sidebar-item-menu {
    position: fixed;
    background: var(--smart-surface);
    border: 1px solid var(--smart-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 9999;
    min-width: 140px;
    padding: 4px;
    transform-origin: top right;
    animation: smart-menu-in 150ms ease;
}
@keyframes smart-menu-in {
    from { opacity: 0; transform: scale(0.92) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.smart-sidebar-item-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    color: var(--smart-text-body);
    transition: background 100ms ease;
}
.smart-sidebar-item-menu button:hover {
    background: var(--smart-surface-hover);
}
.smart-sidebar-item-menu button.is-danger {
    color: #EF4444;
}
.smart-sidebar-item-menu-sep {
    height: 1px;
    margin: 4px 8px;
    background: var(--smart-border);
}

/* ── 内联重命名输入框 ── */
.smart-sidebar-rename-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--smart-brand-mid);
    border-radius: 4px;
    background: var(--smart-surface);
    color: var(--smart-text-primary);
    font-size: 13px;
    outline: none;
}

/* ── Tooltip（折叠态悬浮提示） ── */
.smart-sidebar-tooltip {
    position: fixed;
    pointer-events: none;
    padding: 6px 10px;
    background: var(--smart-text-primary);
    color: var(--smart-surface);
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 500;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 100ms ease, transform 100ms ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.smart-sidebar-tooltip.is-visible {
    opacity: 1;
    transform: translateX(8px);
}

/* ── 底部区域 ── */
.smart-sidebar-foot {
    padding: 10px 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 180ms ease;
}
.smart-sidebar.is-collapsed .smart-sidebar-foot {
    justify-content: center;
    padding: 10px 8px;
}

/* ── 主内容区适配 ── */
#creative-studio-container {
    transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 底部全局栏适配 ── */
.smart-global-bar {
    left: 280px;
    width: calc(100% - 280px);
    transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1),
                width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.smart-sidebar.is-collapsed ~ .smart-global-bar {
    left: 60px;
    width: calc(100% - 60px);
}

/* ── 响应式：窄屏隐藏侧栏 ── */
@media (max-width: 1024px) {
    /* V05-31-V2: 中等屏幕恢复默认布局 */
    .smart-sidebar {
        position: sticky; /* 取消 fixed 定位 */
        top: 0;
        left: auto;
        width: 280px;
        min-width: 280px;
        height: 100vh;
    }
    .smart-sidebar.is-collapsed {
        width: 60px;
        min-width: 60px;
        display: flex;
    }
    .creative-studio-container {
        position: relative; /* V06-R2: 窄屏撤 fixed 恢复正常流 */
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 12px;
    }
}

@media (max-width: 900px) {
    .smart-sidebar {
        width: 280px;
        min-width: 280px;
    }
    .smart-sidebar.is-collapsed {
        display: none;
    }
    .smart-global-bar {
        left: 0;
        width: 100%;
        transition: none;
    }
    /* V06-01: 窄屏卡片回退全宽 */
    .smart-global-bar-inner {
        max-width: 100%;
        margin: 0;
    }
    .smart-global-bar textarea {
        border: 1px solid var(--smart-border);
        background: var(--smart-surface);
        box-shadow: none;
    }
    .smart-global-bar textarea:focus {
        border-color: var(--smart-brand-mid);
        box-shadow: none;
    }
    .smart-input-row {
        max-width: 100%;
        margin: 12px 0 0;
        border: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .smart-input-row:focus-within {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }
    .smart-empty-bottom .smart-input-row {
        margin: 0;
    }
    .creative-studio-container {
        position: relative; /* V06-R2: 窄屏撤 fixed 恢复正常流 */
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 12px;
    }
}


/* ================================================================
   V06-01-V4: 项目切换加载遮罩 + 侧栏锁定
   ================================================================ */

/* 侧栏锁定：禁止所有点击交互 */
.smart-sidebar.is-locked {
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.2s;
}

/* 加载遮罩覆盖主内容区 */
.smart-loading-mask {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* 加载卡片 */
.smart-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 48px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e8e8ec;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* 旋转加载指示器 */
.smart-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e8e8ec;
    border-top-color: var(--accent, #7c5ce7);
    border-radius: 50%;
    animation: smart-loading-spin 0.7s linear infinite;
}

@keyframes smart-loading-spin {
    to { transform: rotate(360deg); }
}

.smart-loading-text {
    margin: 0;
    font-size: 15px;
    color: #999;
    letter-spacing: 0.02em;
}
