body { background-color: #0f172a; color: #e2e8f0; font-family: system-ui, sans-serif; }
.glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease, transform 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; transform: translate(-50%, -20px); }

/* 终端日志样式 */
.terminal-log { overflow-y: auto; font-family: 'Courier New', Courier, monospace; }
.log-entry { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px dashed #334155; }
.status-running { color: #3b82f6; }
.status-retrying { color: #eab308; }
.status-sandbox, .status-failed { color: #ef4444; }
.status-completed { color: #22c55e; }

@keyframes shine {
    0% { border-color: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.2); }
    50% { border-color: #8b5cf6; box-shadow: 0 0 20px rgba(139, 92, 246, 0.6); }
    100% { border-color: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.2); }
}
.plan-recommended { animation: shine 2s infinite; }

/* ==========================================
   📱 移动端响应式适配 (max-width: 768px)
   ========================================== */

/* 移动端侧边栏切换按钮 */
.mobile-panel-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 60;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(59,130,246,0.5);
    transition: transform 0.2s;
}
.mobile-panel-toggle:active { transform: scale(0.9); }

@media (max-width: 768px) {

    /* === 全局模态框：固定宽度 → 弹性宽度 === */
    .glass[class*="w-[900px]"],
    .glass[class*="w-[800px]"],
    .glass[class*="w-[600px]"],
    .glass[class*="w-[450px]"],
    .glass[class*="w-[400px]"],
    div[class*="w-[900px]"],
    div[class*="w-[800px]"],
    div[class*="w-[600px]"],
    div[class*="w-[450px]"],
    div[class*="w-[400px]"] {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* 模态框内边距收紧 */
    .glass[class*="p-8"] {
        padding: 1rem !important;
    }

    /* === 首页：项目卡片网格 === */
    /* grid-cols-4 → 单列 */
    main .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    /* grid-cols-2 → 单列 (首页创建按钮 & 赛道选择) */
    main .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    /* 大纲定制仪 grid-cols-2 → 单列 */
    .glass .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    /* 充值弹窗 grid-cols-3 → 2列 */
    .glass .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 首页标题缩小 */
    main h2.text-4xl {
        font-size: 1.5rem !important;
    }
    main h2.text-3xl {
        font-size: 1.25rem !important;
    }

    /* === Workspace 顶部导航条 === */
    header.h-14 {
        height: auto !important;
        min-height: 3.5rem;
        flex-wrap: wrap !important;
        padding: 0.5rem !important;
        gap: 0.25rem !important;
    }
    /* 项目名区域 */
    header .flex.items-center.gap-2.mr-6 {
        margin-right: 0 !important;
        padding-right: 0.5rem !important;
        border-right: none !important;
        width: 100%;
        order: -1;
    }
    header .flex.items-center.gap-2.mr-6 .text-lg {
        font-size: 0.875rem !important;
        max-width: 50vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Tab 按钮紧凑化 */
    header button[class*="px-4"] {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.7rem !important;
    }
    header button[class*="px-4"] i {
        display: none !important;
    }
    /* 右侧余额区 */
    header .flex-1 + .flex {
        order: -1;
        margin-left: auto;
    }

    /* === 大纲Tab：灵感输入区 === */
    /* 灵感输入 + 发散度滑块 并排 → 竖排 */
    .flex.justify-between.items-end.mb-4 {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .flex.justify-between.items-end.mb-4 .flex-1.mr-8 {
        margin-right: 0 !important;
        margin-bottom: 0.75rem;
    }
    .flex.justify-between.items-end.mb-4 .w-64 {
        width: 100% !important;
    }

    /* 大纲子Tab栏横向滚动 */
    .h-12.bg-slate-900 {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        gap: 0.25rem !important;
    }
    .h-12.bg-slate-900 button {
        white-space: nowrap;
        font-size: 0.75rem !important;
        flex-shrink: 0;
    }

    /* === Writer Tab 三栏布局 → 全屏切换 === */
    div[class*="flex-1 flex overflow-hidden w-full"] {
        flex-direction: column !important;
        position: relative;
    }

    /* 左侧控制台：默认隐藏，切换按钮打开 */
    div[class*="w-[280px]"][class*="shrink-0"] {
        width: 100% !important;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 55;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto !important;
    }
    div[class*="w-[280px]"][class*="shrink-0"].mobile-show {
        transform: translateX(0);
    }

    /* 右侧面板：默认隐藏 */
    div[class*="w-[300px]"][class*="border-l"] {
        width: 100% !important;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 55;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto !important;
    }
    div[class*="w-[300px]"][class*="border-l"].mobile-show {
        transform: translateX(0);
    }

    /* 中间编辑区占满 */
    div[class*="flex-1 flex overflow-hidden w-full"] > div.flex-1:not([class*="w-["]) {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* 显示移动端切换按钮 */
    .mobile-panel-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* === 正文编辑区精修 === */
    div[class*="flex-1 relative rounded-xl"] textarea {
        font-size: 14px !important;
        padding: 0.75rem !important;
    }

    /* === 聊天模拟器弹窗 === */
    div[class*="w-[800px]"][class*="h-[650px]"] {
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }

    /* === 加载遮罩文字缩小 === */
    .text-3xl.font-black.tracking-widest {
        font-size: 1.1rem !important;
        letter-spacing: 0.05em !important;
    }

    /* === 全屏加载提示缩小 === */
    div[class*="z-[150]"] p {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.8rem !important;
    }

    /* 登录框标题缩小 */
    div[class*="z-50"] h2.text-3xl {
        font-size: 1.5rem !important;
    }

    /* === P2-P6 新增组件移动端适配 === */

    /* 首页项目卡片 3列 → 1列 */
    main .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    /* 首页6步流程引导 → 3列 */
    main .grid.grid-cols-6 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
    main .grid.grid-cols-6 .text-2xl {
        font-size: 1.25rem !important;
    }
    main .grid.grid-cols-6 h4 {
        font-size: 0.7rem !important;
    }
    main .grid.grid-cols-6 p {
        display: none !important; /* 描述太窄隐藏 */
    }

    /* 角色卡牌 2列 → 1列 */
    div[class*="memorySubTab"] .grid.grid-cols-2,
    .grid.grid-cols-2[class*="gap-4"] {
        grid-template-columns: 1fr !important;
    }

    /* 章节大纲 + 人物日志侧栏 → 竖排 */
    div[class*="outlineSubTab"][class*="flex"][class*="gap-4"] {
        flex-direction: column !important;
    }
    /* 人物日志侧栏全宽 */
    .w-72[class*="shrink-0"] {
        width: 100% !important;
        max-height: 300px !important;
    }

    /* D3 关系图谱容器缩高 */
    #moyuan-d3-network {
        height: 300px !important;
    }
    div[style*="height:480px"] {
        height: 300px !important;
    }

    /* 禁区/雷点标签组收紧 */
    .flex.flex-wrap.gap-2 button {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.65rem !important;
    }

    /* 大纲分块卡片内 textarea 高度收缩 */
    .space-y-4 textarea[rows="5"],
    .space-y-4 textarea[rows="4"],
    .space-y-3 textarea[rows="4"] {
        height: auto !important;
        min-height: 60px !important;
        max-height: 120px !important;
    }

    /* 引导弹窗全屏 */
    div[class*="w-[600px]"][class*="rounded-2xl"] {
        width: 95vw !important;
        max-height: 90vh !important;
    }
    div[class*="w-[420px]"][class*="rounded-2xl"] {
        width: 92vw !important;
    }

    /* 创作纪律笔风学习区域 */
    .max-w-3xl {
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }
}

/* 中等屏幕 (平板竖屏) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 首页3列 → 2列 */
    main .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* 首页4列 → 2列 */
    main .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* 6步引导 → 3列 */
    main .grid.grid-cols-6 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    /* Writer 左侧面板缩窄 */
    div[class*="w-[280px]"][class*="shrink-0"] {
        width: 280px !important;
    }
    div[class*="w-[300px]"][class*="border-l"] {
        width: 220px !important;
    }
    /* 人物日志侧栏缩窄 */
    .w-72[class*="shrink-0"] {
        width: 14rem !important;
    }
}

/* ==========================================
   ✨ 流式打字机效果样式
   ========================================== */
@keyframes streaming-border {
    0% { border-color: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.3); }
    50% { border-color: #8b5cf6; box-shadow: 0 0 16px rgba(139,92,246,0.5); }
    100% { border-color: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.3); }
}
.streaming-glow {
    animation: streaming-border 1.5s ease-in-out infinite !important;
    border-width: 2px !important;
    caret-color: #60a5fa;
}
/* 打字机"正在输入"指示光标（叠加在 textarea 内容末尾） */
.streaming-glow::placeholder {
    color: transparent;
}

/* 流式状态指示条 */
.stream-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 8px;
    font-size: 12px;
    color: #93c5fd;
}
.stream-indicator .dot {
    width: 6px; height: 6px;
    background: #3b82f6;
    border-radius: 50%;
    animation: pulse-dot 1s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Spin animation for pure DOM overlay */
@keyframes spin { to { transform: rotate(360deg); } }