/**
 * Luna Manus Workspace - 三栏工作区布局
 * 参考 Manus 设计：Agent状态面板 + 文件浏览器 + 代码预览
 */

/* ============================================
   1. 工作区三栏布局
   ============================================ */

.manus-workspace {
    display: flex;
    flex: 1;
    height: calc(100vh - 60px);
    overflow: hidden;
    background: var(--manus-bg);
}

/* ============================================
   2. 左侧 Agent 状态面板
   ============================================ */

.agent-panel {
    width: 320px;
    min-width: 280px;
    max-width: 400px;
    background: var(--manus-sidebar-bg);
    border-right: 1px solid var(--manus-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s ease;
}

.agent-panel.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
}

/* Agent 面板头部 */
.agent-panel-header {
    padding: 16px;
    border-bottom: 1px solid var(--manus-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.agent-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--manus-text);
}

.agent-panel-title i {
    color: var(--manus-accent);
}

/* Agent 状态指示器 */
.agent-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.agent-status-badge.working {
    background: rgba(0, 122, 255, 0.15);
    color: var(--manus-accent);
}

.agent-status-badge.idle {
    background: rgba(102, 102, 102, 0.15);
    color: var(--manus-text-secondary);
}

.agent-status-badge.completed {
    background: rgba(52, 199, 89, 0.15);
    color: #34c759;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-dot.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Agent 面板内容 */
.agent-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* 任务信息 */
.agent-task-info {
    padding: 16px;
    border-bottom: 1px solid var(--manus-border);
}

.agent-task-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--manus-text-hint);
    margin-bottom: 6px;
}

.agent-task-content {
    font-size: 14px;
    color: var(--manus-text);
    line-height: 1.5;
}

/* 步骤进度 */
.agent-progress {
    padding: 12px 16px;
    background: var(--manus-accent-light);
    border-bottom: 1px solid var(--manus-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.agent-progress-text {
    font-size: 13px;
    color: var(--manus-accent);
    font-weight: 500;
}

.agent-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(0, 122, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.agent-progress-fill {
    height: 100%;
    background: var(--manus-accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Agent 思考/操作列表 */
.agent-actions-list {
    padding: 8px 0;
}

.agent-action-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--manus-border);
    transition: background-color 0.15s ease;
}

.agent-action-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.dark-theme .agent-action-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.agent-action-item.current {
    background: var(--manus-accent-light);
}

.agent-action-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.agent-action-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.agent-action-icon.thinking {
    background: rgba(175, 82, 222, 0.15);
    color: #af52de;
}

.agent-action-icon.tool {
    background: rgba(0, 122, 255, 0.15);
    color: var(--manus-accent);
}

.agent-action-icon.file {
    background: rgba(255, 149, 0, 0.15);
    color: #ff9500;
}

.agent-action-icon.success {
    background: rgba(52, 199, 89, 0.15);
    color: #34c759;
}

.agent-action-icon.error {
    background: rgba(255, 59, 48, 0.15);
    color: #ff3b30;
}

.agent-action-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--manus-text-hint);
}

.agent-action-time {
    font-size: 11px;
    color: var(--manus-text-hint);
    margin-left: auto;
}

.agent-action-content {
    font-size: 13px;
    color: var(--manus-text);
    line-height: 1.5;
    padding-left: 34px;
}

.agent-action-content.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   3. 中间文件浏览器
   ============================================ */

.file-browser-panel {
    width: 280px;
    min-width: 200px;
    max-width: 400px;
    background: var(--manus-bg);
    border-right: 1px solid var(--manus-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    resize: horizontal;
}

.file-browser-panel.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
}

/* 文件浏览器头部 */
.file-browser-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--manus-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.file-browser-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--manus-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-browser-actions {
    display: flex;
    gap: 4px;
}

.file-browser-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--manus-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s ease;
}

.file-browser-action-btn:hover {
    background: var(--manus-accent-light);
    color: var(--manus-accent);
}

/* 文件树 */
.file-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.file-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    user-select: none;
}

.file-tree-item:hover {
    background: var(--manus-accent-light);
}

.file-tree-item.selected {
    background: var(--manus-accent-light);
    color: var(--manus-accent);
}

.file-tree-item.folder {
    font-weight: 500;
}

.file-tree-indent {
    width: 16px;
    flex-shrink: 0;
}

.file-tree-icon {
    width: 16px;
    font-size: 14px;
    color: var(--manus-text-secondary);
    flex-shrink: 0;
}

.file-tree-item.folder .file-tree-icon {
    color: #f59e0b;
}

.file-tree-item.selected .file-tree-icon {
    color: var(--manus-accent);
}

.file-tree-name {
    font-size: 13px;
    color: var(--manus-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-tree-item.selected .file-tree-name {
    color: var(--manus-accent);
}

/* 文件夹展开/折叠箭头 */
.file-tree-arrow {
    width: 14px;
    font-size: 10px;
    color: var(--manus-text-hint);
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

.file-tree-item:hover .file-tree-arrow {
    color: var(--manus-accent);
}

.file-tree-item.expanded .file-tree-arrow {
    color: var(--manus-accent);
}

.file-tree-arrow-placeholder {
    width: 14px;
    flex-shrink: 0;
}

/* 文件大小显示 */
.file-tree-size {
    font-size: 11px;
    color: var(--manus-text-hint);
    margin-left: auto;
    flex-shrink: 0;
}

/* 文件类型图标颜色 */
.file-tree-icon.js { color: #f7df1e; }
.file-tree-icon.ts { color: #3178c6; }
.file-tree-icon.py { color: #3776ab; }
.file-tree-icon.html { color: #e34c26; }
.file-tree-icon.css { color: #1572b6; }
.file-tree-icon.json { color: #292929; }
.file-tree-icon.md { color: #083fa1; }
.file-tree-icon.image { color: #8b5cf6; }

/* ============================================
   4. 右侧代码预览面板
   ============================================ */

.code-preview-panel {
    flex: 1;
    min-width: 400px;
    background: var(--manus-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 代码预览头部 */
.code-preview-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--manus-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--manus-sidebar-bg);
}

.code-preview-tabs {
    display: flex;
    gap: 2px;
}

.code-preview-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--manus-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.code-preview-tab:hover {
    background: var(--manus-accent-light);
    color: var(--manus-text);
}

.code-preview-tab.active {
    background: var(--manus-accent-light);
    color: var(--manus-accent);
}

.code-preview-tab-close {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--manus-text-hint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0;
    transition: all 0.15s ease;
}

.code-preview-tab:hover .code-preview-tab-close {
    opacity: 1;
}

.code-preview-tab-close:hover {
    background: rgba(255, 59, 48, 0.15);
    color: #ff3b30;
}

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

.code-preview-action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--manus-text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.code-preview-action-btn:hover {
    background: var(--manus-accent-light);
    color: var(--manus-accent);
}

/* 代码预览内容 */
.code-preview-content {
    flex: 1;
    overflow: auto;
    background: var(--manus-sidebar-bg);
}

.code-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--manus-text-hint);
}

.code-preview-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.code-preview-empty-text {
    font-size: 14px;
}

/* 代码编辑器容器 */
.code-editor-container {
    height: 100%;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* 代码行号 */
.code-line {
    display: flex;
    min-height: 21px;
}

.code-line:hover {
    background: rgba(0, 122, 255, 0.05);
}

.code-line-number {
    width: 50px;
    padding: 0 12px;
    text-align: right;
    color: var(--manus-text-hint);
    user-select: none;
    flex-shrink: 0;
    border-right: 1px solid var(--manus-border);
}

.code-line-content {
    flex: 1;
    padding: 0 16px;
    white-space: pre;
    color: var(--manus-text);
}

/* 图片预览容器 */
.image-preview-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    background: var(--manus-sidebar-bg);
    overflow: auto;
}

.image-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 二进制文件容器 */
.binary-file-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    color: var(--manus-text-secondary);
}

.binary-file-icon {
    font-size: 64px;
    color: var(--manus-text-hint);
    margin-bottom: 20px;
}

.binary-file-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--manus-text);
    margin-bottom: 8px;
}

.binary-file-size {
    font-size: 14px;
    color: var(--manus-text-hint);
    margin-bottom: 8px;
}

.binary-file-type {
    font-size: 13px;
    color: var(--manus-text-secondary);
    margin-bottom: 24px;
    padding: 4px 12px;
    background: var(--manus-accent-light);
    border-radius: 12px;
}

.binary-file-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.binary-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--manus-accent);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.binary-download-btn:hover {
    background: var(--manus-accent-hover, #0066cc);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.binary-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    color: var(--manus-accent);
    border: 1px solid var(--manus-accent);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.binary-preview-btn:hover {
    background: var(--manus-accent-light);
    transform: translateY(-1px);
}

/* 预览提示 */
.preview-tip {
    margin-top: 20px;
    padding: 12px 16px;
    background: rgba(255, 149, 0, 0.1);
    border: 1px solid rgba(255, 149, 0, 0.3);
    border-radius: 8px;
    font-size: 13px;
    color: #b45309;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 400px;
}

.dark-theme .preview-tip {
    background: rgba(255, 149, 0, 0.15);
    color: #fbbf24;
}

/* PDF 内嵌预览 */
.pdf-preview-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pdf-preview-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: var(--manus-sidebar-bg);
}

/* Office 文件预览 */
.office-preview-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.office-iframe-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.office-preview-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: var(--manus-sidebar-bg);
}

.office-preview-toolbar {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    padding: 8px;
    background: var(--manus-sidebar-bg);
    border: 1px solid var(--manus-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.preview-toolbar-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--manus-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s ease;
    text-decoration: none;
}

.preview-toolbar-btn:hover {
    background: var(--manus-accent-light);
    color: var(--manus-accent);
}

/* 文件图标颜色 */
.binary-file-icon.fa-file-pdf {
    color: #dc3545;
}

.binary-file-icon.fa-file-word {
    color: #2b579a;
}

.binary-file-icon.fa-file-excel {
    color: #217346;
}

.binary-file-icon.fa-file-powerpoint {
    color: #d24726;
}

.binary-file-icon.fa-file-archive {
    color: #f59e0b;
}

.binary-file-icon.fa-file-audio {
    color: #8b5cf6;
}

.binary-file-icon.fa-file-video {
    color: #ec4899;
}

/* ============================================
   5. 底部输入区域（保留在工作区内）
   ============================================ */

.workspace-input-area {
    padding: 12px 20px;
    border-top: 1px solid var(--manus-border);
    background: var(--manus-sidebar-bg);
    display: flex;
    align-items: center;
    gap: 12px;
}

.workspace-input-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--manus-input-bg);
    border: 1px solid var(--manus-border);
    border-radius: 24px;
    transition: all 0.2s ease;
}

.workspace-input-container:focus-within {
    border-color: var(--manus-accent);
    box-shadow: 0 0 0 3px var(--manus-accent-light);
}

.workspace-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--manus-text);
    font-size: 14px;
    outline: none;
}

.workspace-input::placeholder {
    color: var(--manus-text-hint);
}

.workspace-input-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--manus-accent);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s ease;
}

.workspace-input-btn:hover:not(:disabled) {
    transform: scale(1.05);
}

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

/* ============================================
   6. 面板切换按钮
   ============================================ */

.panel-toggle-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    border: 1px solid var(--manus-border);
    border-radius: 0 6px 6px 0;
    background: var(--manus-sidebar-bg);
    color: var(--manus-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 10;
    transition: all 0.15s ease;
}

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

.panel-toggle-btn.left {
    left: -1px;
    border-left: none;
}

.panel-toggle-btn.right {
    right: -1px;
    border-radius: 6px 0 0 6px;
    border-right: none;
}

/* ============================================
   7. 响应式适配
   ============================================ */

@media (max-width: 1200px) {
    .file-browser-panel {
        width: 220px;
    }

    .agent-panel {
        width: 280px;
    }
}

@media (max-width: 992px) {
    .file-browser-panel {
        display: none;
    }

    .agent-panel {
        width: 260px;
    }
}

@media (max-width: 768px) {
    .manus-workspace {
        flex-direction: column;
    }

    .agent-panel {
        width: 100%;
        max-width: none;
        height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--manus-border);
    }

    .code-preview-panel {
        min-width: 0;
    }
}