宜博 / lemonboss

<template>
  <div class="company-dashboard">
    <AppNav />
<!-- Removed top action bar -->
    <!-- ═══ Empty State (No Companies) ═══ -->
    <section class="company-empty" v-if="companies.length === 0">
      <div class="empty-state-card">
        <span class="empty-icon">🏗️</span>
        <h2>自治架构观测站</h2>
        <p>没有任何正在运行中的公司或工作舱。</p>
        <p style="color: var(--accent); font-weight: 600;">请使用右侧侧边栏召出「MasterBot」，用自然语言指示它去建立您的第一家公司。</p>
      </div>
    </section>

    <!-- ═══ Company Detail ═══ -->
    <section class="company-detail" v-if="selectedCompany">
      <div class="detail-header">
        <div class="company-switcher-wrapper">
          <div class="company-switcher" @click.stop="showDropdown = !showDropdown">
            <span class="switcher-icon">🏢</span>
            <h2 class="switcher-name">{{ selectedCompany.name }}</h2>
            <span class="switcher-arrow">▼</span>
          </div>
          <div class="switcher-dropdown" v-if="showDropdown">
            <div class="dropdown-scroll">
              <div 
                v-for="c in companies" :key="c.id" 
                class="switcher-item" :class="{active: c.id === selectedCompany.id}"
                @click="goToCompany(c.id); showDropdown = false">
                <span class="item-icon">🏢</span> {{ c.name }}
              </div>
            </div>
            <div class="switcher-divider"></div>
            <div class="switcher-item create-btn" style="cursor:default; border:none; opacity: 0.6;">
              <span class="item-icon">🤖</span> 请呼叫 MasterBot 创建
            </div>
          </div>
        </div>
        
        <div class="detail-header-actions" style="margin-left: auto;">
          <button class="btn-templates" @click="showTemplates = !showTemplates" style="border: none; background: transparent;">
            📦 模板库 ({{ templates.length }})
          </button>
        </div>
      </div>
      <p class="detail-desc" style="margin-left:8px;">{{ selectedCompany.description || '暂无描述' }}</p>

<!-- Tabs moved to AppNav -->

      <!-- Tab: Overview -->
      <div v-if="activeTab === 'overview'" class="tab-content">
        <div class="overview-grid">
          <!-- Company Info Card -->
          <div class="overview-card info-card">
            <div class="overview-card-header">
              <h3>📊 公司概览</h3>
              <span class="company-status-badge" :class="companyStatus?.status || selectedCompany?.status">
                {{ statusLabel(companyStatus?.status || selectedCompany?.status) }}
              </span>
            </div>
            <div class="overview-info-grid">
              <div class="info-item">
                <span class="info-label">公司名称</span>
                <span class="info-value">{{ selectedCompany?.name }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">描述</span>
                <span class="info-value">{{ selectedCompany?.description || '暂无描述' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">创建时间</span>
                <span class="info-value">{{ formatDate(selectedCompany?.createdAt) }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">运行时长</span>
                <span class="info-value">{{ formatUptime(companyStatus?.uptimeMs) }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">Agent 数量</span>
                <span class="info-value">{{ companyStatus?.agentCount || 0 }} 个 ({{ companyStatus?.activeAgentCount || 0 }} 个活跃)</span>
              </div>
              <div class="info-item">
                <span class="info-label">心跳状态</span>
                <span class="info-value">
                  <span v-if="companyStatus?.activeAgentCount > 0" class="heartbeat-on">💓 {{ companyStatus.activeAgentCount }}/{{ companyStatus.agentCount }} 个 Agent 心跳运行中</span>
                  <span v-else class="heartbeat-off">⏸️ 全部停止（请在下方逐个启动或点击"启动公司"一键激活）</span>
                </span>
              </div>
            </div>
            <div class="overview-actions">
              <button 
                v-if="(companyStatus?.status || selectedCompany?.status) !== 'running'" 
                class="btn-start" 
                @click="startCompany"
                :disabled="isStarting"
              >
                {{ isStarting ? '⏳ 启动中...' : '🚀 启动公司' }}
              </button>
              <button 
                v-else 
                class="btn-stop" 
                @click="stopCompany"
                :disabled="isStopping"
              >
                {{ isStopping ? '⏳ 关闭中...' : '🛑 关闭公司' }}
              </button>
              <button class="btn-refresh" @click="loadCompanyStatus(selectedCompany.id)">🔄 刷新状态</button>
            </div>
          </div>

          <!-- Agent Status Table -->
          <div class="overview-card agents-card">
            <div class="overview-card-header">
              <div style="display:flex; align-items:center; gap:8px;">
                <h3>🤖 Agent 状态监控</h3>
                <span class="agent-count-badge">{{ companyStatus?.agents?.length || 0 }} 个</span>
              </div>
              <button class="btn-sm" @click="openHireModal">＋ 雇佣 Agent</button>
            </div>
            <div v-if="companyStatus?.agents?.length > 0" class="agent-status-table">
              <div class="table-header">
                <span class="col-name">名称</span>
                <span class="col-type">角色</span>
                <span class="col-status">状态</span>
                <span class="col-interval">心跳间隔</span>
                <span class="col-heartbeat">心跳</span>
                <span class="col-actions">操作</span>
              </div>
              <template v-for="agent in companyStatus.agents" :key="agent.id">
                <div class="table-row">
                  <span class="col-name">
                    <span class="agent-dot" :class="agent.heartbeatActive ? 'active' : 'inactive'"></span>
                    <a class="agent-name-link" @click="goToAgentChat(agent.id)">{{ agent.name }}</a>
                  </span>
                  <span class="col-type">
                    <span class="type-badge">{{ agent.type }}</span>
                  </span>
                  <span class="col-status">
                    <span class="card-status" :class="agent.status">{{ agent.status }}</span>
                  </span>
                  <span class="col-interval">
                    <select
                      class="interval-select"
                      :value="agent.heartbeatInterval"
                      @change="updateAgentInterval(agent.id, $event.target.value)"
                    >
                      <option :value="1">1 分钟</option>
                      <option :value="5">5 分钟</option>
                      <option :value="10">10 分钟</option>
                      <option :value="15">15 分钟</option>
                      <option :value="30">30 分钟</option>
                      <option :value="60">60 分钟</option>
                    </select>
                  </span>
                  <span class="col-heartbeat">
                    <span v-if="agent.heartbeatActive" class="hb-active">💓 运行中</span>
                    <span v-else class="hb-inactive">⏸️ 停止</span>
                  </span>
                  <span class="col-actions">
                    <div class="action-group">
                      <button
                        v-if="!agent.heartbeatActive"
                        class="btn-agent-start"
                        @click="startAgentHeartbeat(agent.id)"
                      >▶ 启动</button>
                      <button
                        v-else
                        class="btn-agent-stop"
                        @click="stopAgentHeartbeat(agent.id)"
                      >⏹ 停止</button>
                      <button class="btn-action-chat" @click="goToAgentChat(agent.id)">💬 聊天</button>
                      <button class="btn-action-skills" @click="toggleAgentSkills(agent.id)">📋 技能</button>
                      <button class="btn-action-train" @click="triggerTrain(agent.id)">🎓 训练</button>
                      <button class="btn-action-fire" @click="fireAgent(agent.id, agent.name)">🗑️ 解雇</button>
                    </div>
                  </span>
                </div>
                <!-- Expandable Skills Panel -->
                <div v-if="expandedAgent === agent.id" class="agent-expand-panel">
                  <div class="expand-header">
                    <h4>📋 {{ agent.name }} 的技能列表</h4>
                    <button class="btn-close-expand" @click="expandedAgent = null">✕</button>
                  </div>
                  <div v-if="agentSkills.length > 0" class="skills-grid">
                    <div v-for="skill in agentSkills" :key="skill" class="skill-chip">⚡ {{ skill }}</div>
                  </div>
                  <div v-else class="empty-mini" style="padding:12px;">暂无技能（可通过 Innovator 训练获得）</div>
                </div>
              </template>
            </div>
            <div v-else class="empty-mini">暂无 Agent</div>
          </div>
        </div>
      </div>

      <!-- Tab: Agents -->
      <div v-if="activeTab === 'agents'" class="tab-content">
        <div class="section-header">
          <h3>团队成员</h3>
          <button class="btn-sm" @click="openHireModal">＋ 招聘</button>
        </div>
        <div class="agents-grid">
          <div v-for="agent in companyAgents" :key="agent.id" class="agent-card">
            <div class="agent-avatar">{{ agentEmoji(agent.type) }}</div>
            <div class="agent-info">
              <span class="agent-name">{{ agent.name }}</span>
              <span class="agent-type">{{ agent.type }}</span>
            </div>
            <span class="agent-status" :class="agent.status">{{ agent.status }}</span>
          </div>
          <div v-if="companyAgents.length === 0" class="empty-mini">暂无成员</div>
        </div>
      </div>

      <!-- Tab: Pipelines -->
      <div v-if="activeTab === 'pipelines'" class="tab-content">
        <div class="section-header">
          <h3>SOP 流水线</h3>
          <button class="btn-sm" @click="loadPipelines(selectedCompany.id)">🔄 刷新</button>
        </div>
        <div class="pipeline-list">
          <div v-for="p in pipelines" :key="p.id" class="pipeline-card" @click="loadPipelineDetail(p.id)">
            <div class="pipeline-header">
              <span class="pipeline-name">⚙️ {{ p.name }}</span>
              <span class="pipeline-steps">{{ p.stepCount }} 步</span>
            </div>
            <div class="pipeline-actions-row">
              <span class="card-status" :class="p.status">{{ p.status }}</span>
              <button class="btn-pipeline-run" @click.stop="runPipeline(p.id)">▶️ 运行</button>
            </div>
          </div>
          <div v-if="pipelines.length === 0" class="empty-mini">暂无流水线</div>
        </div>

        <!-- Pipeline Detail -->
        <div v-if="selectedPipeline" class="pipeline-detail">
          <h4>{{ selectedPipeline.name }}</h4>
          <div class="step-flow">
            <div
              v-for="(step, idx) in selectedPipeline.steps"
              :key="idx"
              class="step-node"
              :class="{ 'step-current': selectedPipeline.currentStep === idx, 'step-completed': selectedPipeline.currentStep > idx }"
            >
              <div class="step-index">{{ idx + 1 }}</div>
              <div class="step-info">
                <span class="step-name">{{ step.name }}</span>
                <span class="step-agent">🤖 {{ step.agent }}</span>
              </div>
              <div v-if="idx < selectedPipeline.steps.length - 1" class="step-arrow">→</div>
            </div>
          </div>
          <div v-if="selectedPipeline.cron" class="cron-badge">
            🔄 自动触发: 每 {{ selectedPipeline.cron.intervalHours }} 小时
          </div>
        </div>

        <!-- Runs -->
        <div v-if="pipelineRuns.length > 0" class="runs-section">
          <h4>运行记录</h4>
          <div v-for="run in pipelineRuns" :key="run.runId" class="run-card">
            <div class="run-header">
              <span class="run-id">{{ run.runId }}</span>
              <span class="card-status" :class="run.status">{{ run.status }}</span>
            </div>
            <div class="run-meta">
              <span>📌 {{ run.pipelineName }}</span>
              <span>步骤 {{ run.currentStep + 1 }}/{{ run.totalSteps }}</span>
              <span>🚀 {{ run.trigger }}</span>
            </div>
            <div class="run-actions">
              <button v-if="run.status === 'failed'" class="btn-sm" @click="retryPipelineRun(run.runId)">🔁 重试</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Tab: Goals (Full OKR Tree) -->
      <div v-if="activeTab === 'goals'" class="tab-content">
        <div class="okr-layout">
          <!-- Left: Goal List -->
          <div class="okr-sidebar">
            <div class="okr-sidebar-header">
              <span>🎯 OKR 目标</span>
              <span class="okr-count" v-if="goals.length">{{ goals.length }}</span>
            </div>
            <div class="okr-goal-list">
              <div
                v-for="g in goals" :key="g.id"
                class="okr-goal-card" :class="{ active: selectedGoalId === g.id }"
                @click="selectGoalDetail(g.id)"
              >
                <div class="okr-goal-top">
                  <span class="okr-gid">{{ g.id }}</span>
                  <span class="okr-gstatus" :class="g.status">{{ okrStatusLabel(g.status) }}</span>
                </div>
                <div class="okr-gtitle">{{ g.title }}</div>
                <div class="okr-gprogress">
                  <div class="okr-pbar"><div class="okr-pfill" :style="{ width: (g.progress * 100) + '%' }"></div></div>
                  <span class="okr-ppct">{{ Math.round(g.progress * 100) }}%</span>
                </div>
                <div class="okr-gmeta">
                  <span>👤 {{ g.owner }}</span>
                  <span>{{ g.doneCount || 0 }}/{{ g.totalCount || 0 }}</span>
                </div>
              </div>
              <div v-if="goals.length === 0" class="empty-mini">暂无目标</div>
            </div>
          </div>

          <!-- Right: Goal Detail + Node Tree -->
          <div class="okr-detail" v-if="selectedGoalDetail">
            <div class="okr-hero">
              <div class="okr-hero-row">
                <span class="okr-hero-id">{{ selectedGoalDetail.id }}</span>
                <span class="okr-hero-status" :class="selectedGoalDetail.status">{{ okrStatusLabel(selectedGoalDetail.status) }}</span>
                <span class="okr-hero-owner">👤 {{ selectedGoalDetail.owner }}</span>
              </div>
              <h2 class="okr-hero-title">{{ selectedGoalDetail.title }}</h2>
              <p class="okr-hero-desc">{{ selectedGoalDetail.description || '暂无详细描述' }}</p>
              <div class="okr-hero-progress" v-if="selectedGoalProgress">
                <div class="okr-hp-top">
                  <span>目标总体进度</span>
                  <span class="okr-hp-pct">{{ Math.round(selectedGoalProgress.progress * 100) }}%</span>
                </div>
                <div class="okr-hp-bar"><div class="okr-hp-fill" :style="{ width: (selectedGoalProgress.progress * 100) + '%' }"></div></div>
                <div class="okr-hp-stats">
                  <span>总: {{ selectedGoalProgress.total }}</span>
                  <span class="stat-d">✅ {{ selectedGoalProgress.done }}</span>
                  <span class="stat-p">🔄 {{ selectedGoalProgress.inProgress }}</span>
                  <span class="stat-w">⏳ {{ selectedGoalProgress.pending }}</span>
                </div>
              </div>
            </div>
            <div class="okr-tree-area">
              <h3 class="okr-tree-title">OKR 拆解树</h3>
              <div class="okr-tree">
                <div
                  v-for="node in okrSortedNodes" :key="node.id"
                  class="okr-tnode"
                >
                  <div class="okr-tnode-line">
                    <div class="okr-tnode-indent" :style="{ width: (node.level - 2) * 24 + 'px' }"></div>
                    <div class="okr-tnode-card" :class="[node.status, 'okr-lv-' + node.level]">
                      <div class="okr-tnode-hdr">
                        <span class="okr-nid">{{ node.id }}</span>
                        <span class="okr-ntype">{{ okrLevelName(node.level) }}</span>
                        <span class="okr-nstatus" :class="node.status">{{ okrStatusLabel(node.status) }}</span>
                      </div>
                      <div class="okr-ntitle">{{ node.title }}</div>
                      <div class="okr-nfooter">
                        <span class="okr-nowner" v-if="node.owner">👤 {{ node.owner }}</span>
                        <span class="okr-nprio" v-if="node.priority" :class="node.priority">{{ node.priority }}</span>
                        <span class="okr-ntask" v-if="node.taskId">🔗 {{ node.taskId }}</span>
                      </div>
                      <div class="okr-nsummary" v-if="node.summary"><strong>摘要:</strong> {{ node.summary }}</div>
                      <div class="okr-nsummary" v-if="node.output"><strong>产出:</strong> {{ node.output }}</div>
                    </div>
                  </div>
                </div>
                <div v-if="okrSortedNodes.length === 0" class="empty-mini">暂无 OKR 节点</div>
              </div>
            </div>
          </div>
          <div class="okr-detail okr-empty" v-else>
            <div class="empty-state-large">
              <div style="font-size:48px; margin-bottom:16px; opacity:0.8">🎯</div>
              <h3>OKR 目标看板</h3>
              <p>从左侧选择一个目标查看拆解树与进度</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Tab: Files -->
      <div v-if="activeTab === 'files'" class="tab-content">
        <div class="files-layout">
          <!-- File Tree -->
          <div class="files-tree-panel">
            <div class="panel-title">
              📁 公司文件树
              <span class="file-count-badge">{{ companyFiles?.totalFiles || 0 }} 文件</span>
            </div>
            <div class="files-tree-scroll">
              <div v-if="companyFiles?.tree?.length > 0">
                <template v-for="node in companyFiles.tree" :key="node.path">
                  <CompanyFileNode :node="node" :depth="0" :selected="selectedFilePath" @select="previewCompanyFile" />
                </template>
              </div>
              <div v-else class="empty-mini">暂无文件</div>
            </div>
          </div>
          <!-- File Preview -->
          <div class="files-preview-panel">
            <div class="panel-title">
              👁️ {{ selectedFilePath || '文件预览' }}
              <span v-if="filePreviewSize" class="file-size-badge">{{ formatFileSize(filePreviewSize) }}</span>
            </div>
            <div class="files-preview-scroll">
              <pre v-if="filePreviewContent !== null" class="file-preview-code">{{ filePreviewContent }}</pre>
              <div v-else class="empty-mini">← 点击左侧文件以预览</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Tab: Messages -->
      <div v-if="activeTab === 'messages'" class="tab-content">
        <div class="section-header">
          <h3>📬 全局消息时间线</h3>
          <div class="msg-controls">
            <select v-model="msgFilterAgent" class="msg-filter-select">
              <option value="">所有 Agent</option>
              <option v-for="a in messageAgentList" :key="a" :value="a">{{ a }}</option>
            </select>
            <select v-model="msgFilterRole" class="msg-filter-select">
              <option value="">所有角色</option>
              <option value="user">📥 输入 (user)</option>
              <option value="assistant">📤 输出 (assistant)</option>
            </select>
            <button class="btn-sm" @click="loadMessages(selectedCompany.id)">🔄 刷新</button>
          </div>
        </div>
        <div class="timeline-container">
          <div v-for="msg in filteredMessages" :key="msg.messageId || msg.timestamp" class="timeline-item" :class="`timeline-${msg.role}`">
            <div class="timeline-marker" :class="msg.role">
              {{ msg.role === 'user' ? '📥' : '📤' }}
            </div>
            <div class="timeline-card">
              <div class="timeline-header">
                <span class="timeline-agent" :class="`agent-color-${hashColor(msg.agentName)}`">
                  🤖 {{ msg.agentName }}
                </span>
                <span class="timeline-role-badge" :class="msg.role">
                  {{ msg.role === 'user' ? '收到指令' : '产出回复' }}
                </span>
                <span class="timeline-time">🕐 {{ formatTimelineAbsolute(msg.timestamp) }}</span>
                <span v-if="msg.taskId" class="timeline-task-badge">📌 {{ msg.taskId }}</span>
              </div>
              <div class="timeline-conv-title">{{ msg.conversationTitle }}</div>
              <div class="timeline-content">{{ msg.content }}</div>
            </div>
          </div>
          <div v-if="filteredMessages.length === 0" class="empty-mini">暂无消息记录</div>
        </div>
      </div>

      <!-- Tab: Workspace -->
      <div v-if="activeTab === 'workspace'" class="tab-content">
        <div class="ws-layout">
          <!-- Left: File Tree -->
          <div class="ws-tree-panel">
            <div class="panel-title">
              💼 Workspace
              <span class="file-count-badge">{{ wsFiles?.totalFiles || 0 }} 文件</span>
              <button class="refresh-btn" @click="loadWorkspaceFiles(selectedCompany.id)" title="刷新">🔄</button>
            </div>
            <div class="ws-tree-scroll">
              <div v-if="wsFiles?.tree?.length > 0">
                <template v-for="node in wsFiles.tree" :key="node.path">
                  <CompanyFileNode :node="node" :depth="0" :selected="wsSelectedPath" @select="selectWorkspaceFile" />
                </template>
              </div>
              <div v-else class="empty-mini">
                <div style="padding:24px; text-align:center; opacity:0.6;">
                  <div style="font-size:32px; margin-bottom:8px;">📂</div>
                  <div>Workspace 为空</div>
                  <div style="font-size:11px; margin-top:4px;">Agent 工作产出将出现在这里</div>
                </div>
              </div>
            </div>
          </div>
          <!-- Right: Detail + Editor -->
          <div class="ws-detail-panel">
            <template v-if="wsSelectedFile">
              <!-- File Info Bar -->
              <div class="ws-file-info">
                <div class="ws-file-info-header">
                  <span class="ws-file-icon">{{ wsFileIcon(wsSelectedFile.name) }}</span>
                  <div class="ws-file-name-area">
                    <span class="ws-file-name">{{ wsSelectedFile.name }}</span>
                    <span class="ws-file-path">workspace/{{ wsSelectedFile.path }}</span>
                  </div>
                  <div class="ws-file-actions">
                    <button v-if="wsViewMode === 'edit'" class="btn-ws-save" @click="saveWorkspaceFile" :disabled="wsSaving">
                      {{ wsSaving ? '⏳ 保存中...' : '💾 保存' }}
                    </button>
                  </div>
                </div>
                <div class="ws-file-meta">
                  <span class="ws-meta-item">📏 {{ formatFileSize(wsSelectedFile.size) }}</span>
                  <span class="ws-meta-item">📅 创建: {{ formatDate(wsSelectedFile.createdAt) }}</span>
                  <span class="ws-meta-item">🔄 修改: {{ formatDate(wsSelectedFile.modifiedAt) }}</span>
                </div>
                <!-- View Mode Tabs -->
                <div class="ws-view-tabs">
                  <button class="ws-view-tab" :class="{ active: wsViewMode === 'code' }" @click="wsViewMode = 'code'">
                    📄 代码
                  </button>
                  <button v-if="wsIsHtml" class="ws-view-tab" :class="{ active: wsViewMode === 'preview' }" @click="wsViewMode = 'preview'">
                    🌐 预览
                  </button>
                  <button class="ws-view-tab" :class="{ active: wsViewMode === 'edit' }" @click="wsViewMode = 'edit'">
                    ✏️ 编辑
                  </button>
                </div>
              </div>
              <!-- File Content -->
              <div class="ws-content-area">
                <!-- Code View -->
                <pre v-if="wsViewMode === 'code'" class="ws-preview-code">{{ wsContent }}</pre>
                <!-- Edit View -->
                <textarea
                  v-else-if="wsViewMode === 'edit'"
                  v-model="wsContent"
                  class="ws-editor"
                  spellcheck="false"
                ></textarea>
                <!-- HTML Preview -->
                <iframe
                  v-else-if="wsViewMode === 'preview'"
                  class="ws-html-preview"
                  :srcdoc="wsContent"
                  sandbox="allow-scripts allow-same-origin"
                ></iframe>
              </div>
            </template>
            <div v-else class="ws-empty-state">
              <div style="font-size:48px; margin-bottom:12px; opacity:0.7;">💼</div>
              <h3>Workspace 文件浏览器</h3>
              <p>从左侧选择一个文件查看详情与内容</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Tab: Skills -->
      <div v-if="activeTab === 'skills'" class="tab-content">
        <div class="section-header">
          <h3>🧪 Skills 市场</h3>
          <div class="search-bar-inline">
            <input v-model="skillsSearchQuery" type="text" placeholder="搜索 Skills..." @input="loadSkillsList(selectedCompany.id)" />
            <button class="btn-sm" @click="loadSkillsList(selectedCompany.id)">🔍</button>
          </div>
        </div>
        <div v-if="companySkills.length === 0" class="empty-mini">暂无 Skills</div>
        <div v-else class="skills-grid">
          <div v-for="skill in companySkills" :key="skill.id" class="skill-card-mini" @click="selectedSkillDetail = skill">
            <div class="skill-icon">{{ skill.icon || '⚡' }}</div>
            <div class="skill-info">
              <div class="skill-name">{{ skill.name }}</div>
              <div class="skill-desc">{{ skill.description || '暂无描述' }}</div>
            </div>
            <div class="skill-meta-mini">
              <span class="version-badge">{{ skill.version || 'v1.0' }}</span>
            </div>
          </div>
        </div>
        <!-- Skill Detail Modal -->
        <div v-if="selectedSkillDetail" class="modal-overlay" @click="selectedSkillDetail = null">
          <div class="modal-content" @click.stop>
            <div class="modal-header">
              <h3>{{ selectedSkillDetail.name }}</h3>
              <button class="btn-close" @click="selectedSkillDetail = null">✕</button>
            </div>
            <div class="modal-body">
              <p>{{ selectedSkillDetail.description || '暂无描述' }}</p>
              <div v-if="selectedSkillDetail.taxonomy" class="taxonomy-tags">
                <span v-for="(v, k) in selectedSkillDetail.taxonomy" :key="k" class="taxonomy-tag">{{ k }}: {{ v }}</span>
              </div>
            </div>
            <div class="modal-footer">
              <button class="btn-install-large" @click="installSkill(selectedSkillDetail)">📥 安装</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Tab: Jobs -->
      <div v-if="activeTab === 'jobs'" class="tab-content">
        <div class="section-header">
          <h3>📋 任务面板</h3>
          <div class="filter-inline">
            <select v-model="jobStatusFilter" @change="loadCompanyJobs(selectedCompany.id)">
              <option value="">全部状态</option>
              <option value="pending">⏳ 待处理</option>
              <option value="running">🔄 运行中</option>
              <option value="completed">✅ 完成</option>
              <option value="failed">❌ 失败</option>
            </select>
            <button class="btn-sm" @click="loadCompanyJobs(selectedCompany.id)">🔄 刷新</button>
          </div>
        </div>
        <div v-if="companyJobs.length === 0" class="empty-mini">暂无任务</div>
        <div v-else class="jobs-table-mini">
          <div class="table-header-mini">
            <span>ID</span>
            <span>状态</span>
            <span>创建时间</span>
            <span>操作</span>
          </div>
          <div v-for="job in companyJobs" :key="job.id" class="table-row-mini">
            <span class="job-id">{{ job.id?.substring(0, 8) || '-' }}</span>
            <span class="status-badge-mini" :class="job.status">{{ job.status }}</span>
            <span>{{ formatDate(job.createdAt) }}</span>
            <button class="btn-action-mini" @click="viewJobDetail(job)">👁 查看</button>
          </div>
        </div>
      </div>
    </section>


    <!-- Hire Modal (Redesigned) -->
    <div v-if="showHireModal" class="hire-modal-overlay" @click="showHireModal = false">
      <div class="hire-modal-content" @click.stop>
        <div class="hire-modal-header">
          <div class="header-title-box">
            <span class="header-icon">🚀</span>
            <div>
              <h3>招募团队成员</h3>
              <p>从模板库中检索并批量发下 Offer</p>
            </div>
          </div>
          <button class="btn-close-fancy" @click="showHireModal = false">✕</button>
        </div>

        <div class="hire-modal-toolbar">
          <div class="search-box-fancy">
            <span class="search-icon">🔍</span>
            <input v-model="hireSearchQuery" placeholder="搜索 Agent 名称、ID 或描述..." />
          </div>
          <div class="filter-group">
            <div class="fancy-select-wrap">
              <span class="select-icon">🏷️</span>
              <select v-model="hireFilterType">
                <option value="">所有类型</option>
                <option v-for="t in uniqueTemplateTypes" :key="t" :value="t">{{ t }}</option>
              </select>
            </div>
            <div class="fancy-select-wrap">
              <span class="select-icon">⬆️</span>
              <select v-model="hireSortBy">
                <option value="score">按评分最高</option>
                <option value="used">按热度最高</option>
                <option value="name">按名称排序</option>
              </select>
            </div>
          </div>
        </div>

        <div class="hire-modal-body">
          <div class="hire-grid">
            <div 
              v-for="tpl in filteredTemplates" 
              :key="tpl.id" 
              class="hire-card"
              :class="{ 'is-selected': selectedTemplates.includes(tpl.id) }"
              @click="toggleTemplateSelection(tpl.id)"
            >
              <div class="hire-card-checkbox">
                <div class="check-circle">✓</div>
              </div>
              <div class="hire-card-header">
                <span class="hire-card-emoji">{{ agentEmoji(tpl.type) }}</span>
                <span class="hire-card-name">{{ tpl.name }}</span>
              </div>
              <p class="hire-card-desc">{{ tpl.description || '暂无描述信息' }}</p>
              <div class="hire-card-meta">
                <span class="badge-type">{{ tpl.type }}</span>
                <span v-if="tpl.benchmarkScore" class="badge-score">⭐ {{ tpl.benchmarkScore }}</span>
                <span class="badge-used">🔥 {{ tpl.usedCount }} 次</span>
              </div>
            </div>
            <div v-if="filteredTemplates.length === 0" class="hire-empty">
              <span>📭</span>
              <p>没有找到符合条件的模板 Agent</p>
            </div>
          </div>
        </div>

        <div class="hire-modal-footer">
          <div class="hire-selection-info">
            已选择 <span class="highlight-count">{{ selectedTemplates.length }}</span> 名成员
          </div>
          <div class="hire-actions">
            <button class="btn-fancy-cancel" @click="showHireModal = false">取消</button>
            <button class="btn-fancy-submit" :disabled="selectedTemplates.length === 0 || hiring" @click="submitHire">
              {{ hiring ? '⏳ 办理入职中...' : `🎉 一键录用 (${selectedTemplates.length})` }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- ═══ Templates Panel ═══ -->
    <div v-if="showTemplates" class="templates-panel">
      <div class="panel-header">
        <h3>📦 模板库</h3>
        <button @click="showTemplates = false">✕</button>
      </div>
      <div class="template-list">
        <div v-for="tpl in templates" :key="tpl.id" class="template-card">
          <div class="tpl-name">{{ tpl.name }}</div>
          <div class="tpl-meta">
            <span class="tpl-type">{{ tpl.type }}</span>
            <span v-if="tpl.benchmarkScore" class="tpl-score">⭐ {{ tpl.benchmarkScore }}</span>
            <span class="tpl-used">用 {{ tpl.usedCount }} 次</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import AppNav from '@/components/AppNav.vue'
import CompanyFileNode from '@/components/CompanyFileNode.vue'
import { useCompanies } from '@/composables/useCompanies'

const router = useRouter()
const route = useRoute()

const { companies, loadCompanies, activeCompanyId } = useCompanies()

const companyStatus = ref(null)
const isStarting = ref(false)
const isStopping = ref(false)
const selectedCompany = ref(null)
const companyAgents = ref([])
const pipelines = ref([])
const pipelineRuns = ref([])
const selectedPipeline = ref(null)
const goals = ref([])
const selectedGoalId = ref(null)
const selectedGoalDetail = ref(null)
const selectedGoalProgress = ref(null)
const templates = ref([])
const activeTab = ref('overview')
const showTemplates = ref(false)
const showDropdown = ref(false)
const expandedAgent = ref(null)
const agentSkills = ref([])

const showHireModal = ref(false)
const hiring = ref(false)
const hireSearchQuery = ref('')
const hireFilterType = ref('')
const hireSortBy = ref('score')
const selectedTemplates = ref([])

const uniqueTemplateTypes = computed(() => {
  const types = new Set(templates.value.map(t => t.type).filter(Boolean))
  return Array.from(types).sort()
})

const filteredTemplates = computed(() => {
  let list = templates.value

  if (hireFilterType.value) {
    list = list.filter(t => t.type === hireFilterType.value)
  }

  if (hireSearchQuery.value) {
    const q = hireSearchQuery.value.toLowerCase()
    list = list.filter(t => 
      t.name.toLowerCase().includes(q) || 
      t.id.toLowerCase().includes(q) || 
      (t.description && t.description.toLowerCase().includes(q))
    )
  }

  list = list.slice().sort((a, b) => {
    if (hireSortBy.value === 'score') {
      return (b.benchmarkScore || 0) - (a.benchmarkScore || 0)
    } else if (hireSortBy.value === 'used') {
      return (b.usedCount || 0) - (a.usedCount || 0)
    } else {
      return a.name.localeCompare(b.name)
    }
  })

  return list
})

function toggleTemplateSelection(tplId) {
  if (selectedTemplates.value.includes(tplId)) {
    selectedTemplates.value = selectedTemplates.value.filter(id => id !== tplId)
  } else {
    selectedTemplates.value.push(tplId)
  }
}

function openHireModal() {
  selectedTemplates.value = [];
  hireSearchQuery.value = '';
  hireFilterType.value = '';
  hireSortBy.value = 'score';
  showHireModal.value = true;
  if (templates.value.length === 0) loadTemplates();
}

async function submitHire() {
  if (selectedTemplates.value.length === 0 || !selectedCompany.value) return;
  hiring.value = true;
  try {
    const companyId = selectedCompany.value.id;
    for (const roleId of selectedTemplates.value) {
      const tpl = templates.value.find(t => t.id === roleId);
      if (!tpl) continue;
      await axios.post(`/api/company/${companyId}/hire`, {
        role: roleId,
        type: tpl?.type,
        description: tpl?.description
      });
    }
    showHireModal.value = false;
    await loadCompanyStatus(companyId);
    await loadCompanyAgents(companyId);
  } catch (e) {
    alert(`❌ 雇佣失败: ${e.response?.data?.error || e.message}`);
  } finally {
    hiring.value = false;
  }
}

async function fireAgent(agentId, agentName) {
  if (!selectedCompany.value) return;
  if (!confirm(`⚠️ 确定要彻底解雇 ${agentName || agentId} 吗？将停止其所有运行进程并归档数据！`)) return;
  try {
    await axios.post(`/api/company/${selectedCompany.value.id}/fire`, { role: agentId });
    await loadCompanyStatus(selectedCompany.value.id);
    await loadCompanyAgents(selectedCompany.value.id);
  } catch (e) {
    alert(`❌ 解雇失败: ${e.response?.data?.error || e.message}`);
  }
}

// Files tab
const companyFiles = ref(null)
const selectedFilePath = ref(null)
const filePreviewContent = ref(null)
const filePreviewSize = ref(0)

// Messages tab
const companyMessages = ref([])
const msgFilterAgent = ref('')
const msgFilterRole = ref('')

// Skills tab
const companySkills = ref([])
const skillsSearchQuery = ref('')
const selectedSkillDetail = ref(null)

// Jobs tab
const companyJobs = ref([])
const jobStatusFilter = ref('')

// Workspace tab
const wsFiles = ref(null)
const wsSelectedPath = ref(null)
const wsSelectedFile = ref(null)
const wsContent = ref('')
const wsViewMode = ref('code')  // 'code' | 'edit' | 'preview'
const wsSaving = ref(false)

const wsIsHtml = computed(() => {
  if (!wsSelectedFile.value?.name) return false
  return /\.(html?|htm)$/i.test(wsSelectedFile.value.name)
})

function statusLabel(status) {
  const map = { creating: '创建中', running: '运行中', paused: '已暂停', shutdown: '已关停' }
  return map[status] || status
}

function agentEmoji(type) {
  const map = { cxo: '👔', role: '🏢', skill: '⚙️', specialist: '🔬' }
  return map[type] || '🤖'
}

async function initPage() {
  await loadCompanies()
  if (route.path === '/company' && companies.value.length > 0) {
    const target = activeCompanyId.value || companies.value[0].id
    router.replace(`/${target}/overview`)
  }
}

async function loadTemplates() {
  try {
    const { data } = await axios.get('/api/company/templates')
    templates.value = data
  } catch (e) { console.error(e) }
}

async function loadCompanyData(id, tab) {
  try {
    if (!selectedCompany.value || selectedCompany.value.id !== id) {
      const { data } = await axios.get(`/api/company/${id}`)
      selectedCompany.value = data
    }
    activeTab.value = tab || 'overview'
    
    if (activeTab.value === 'overview') await loadCompanyStatus(id)
    if (activeTab.value === 'agents') await loadCompanyAgents(id)
    if (activeTab.value === 'pipelines') await loadPipelines(id)
    if (activeTab.value === 'goals') await loadGoals(id)
    if (activeTab.value === 'files') await loadCompanyFiles(id)
    if (activeTab.value === 'messages') await loadMessages(id)
    if (activeTab.value === 'skills') await loadSkillsList(id)
    if (activeTab.value === 'jobs') await loadCompanyJobs(id)
    if (activeTab.value === 'workspace') await loadWorkspaceFiles(id)
  } catch (e) { console.error(e) }
}

function goToCompany(id) {
  router.push(`/${id}/overview`)
}

// goToList is no longer used, dropdown replaces it

function goToTab(key) {
  if (!selectedCompany.value) return
  router.push(`/${selectedCompany.value.id}/${key}`)
}

watch(() => route?.params, async (params) => {
  if (!params) return
  if (route.name === 'CompanyDetail' && params.id) {
    await loadCompanyData(params.id, params.tab)
  } else if (route.path === '/company') {
    if (companies.value.length > 0) {
      const target = activeCompanyId.value || companies.value[0].id
      router.replace(`/${target}/overview`)
    } else {
      selectedCompany.value = null
    }
  }
}, { immediate: true })

async function loadCompanyAgents(id) {
  try {
    const { data } = await axios.get(`/api/company/${id}/agents`)
    companyAgents.value = data
  } catch (e) { console.error(e) }
}

async function loadPipelines(id) {
  try {
    const { data } = await axios.get(`/api/company/${id}/pipelines`)
    pipelines.value = data
    selectedPipeline.value = null
    // load runs
    const { data: runs } = await axios.get(`/api/company/${id}/pipelines/runs/list`)
    pipelineRuns.value = runs
  } catch (e) { console.error(e) }
}

async function loadPipelineDetail(pipelineId) {
  try {
    const { data } = await axios.get(`/api/company/${selectedCompany.value.id}/pipelines/${pipelineId}`)
    selectedPipeline.value = data
  } catch (e) { console.error(e) }
}

async function runPipeline(pipelineId) {
  try {
    await axios.post(`/api/company/${selectedCompany.value.id}/pipelines/${pipelineId}/run`)
    alert('✅ Pipeline 已启动')
    loadPipelines(selectedCompany.value.id)
  } catch (e) { alert(`❌ 启动失败: ${e.message}`) }
}

async function retryPipelineRun(runId) {
  try {
    await axios.post(`/api/company/${selectedCompany.value.id}/pipelines/runs/${runId}/advance`)
    alert('✅ 已重新尝试')
    loadPipelines(selectedCompany.value.id)
  } catch (e) { alert(`❌ 重试失败: ${e.message}`) }
}

async function loadGoals(id) {
  try {
    const { data } = await axios.get(`/api/company/${id}/goals`)
    goals.value = data
    // Auto-select first goal
    if (data.length > 0 && !selectedGoalId.value) {
      selectGoalDetail(data[0].id)
    }
  } catch (e) { console.error(e) }
}

async function selectGoalDetail(goalId) {
  if (!selectedCompany.value) return
  selectedGoalId.value = goalId
  try {
    const [goalRes, progRes] = await Promise.all([
      axios.get(`/api/company/${selectedCompany.value.id}/goals/${goalId}`),
      axios.get(`/api/company/${selectedCompany.value.id}/goals/${goalId}/progress`)
    ])
    selectedGoalDetail.value = goalRes.data
    selectedGoalProgress.value = progRes.data
  } catch (e) { console.error(e) }
}

function okrStatusLabel(status) {
  const map = { active: '运转中', in_progress: '进行中', pending: '待开始', done: '已完成', failed: '失败', blocked: '已阻塞' }
  return map[status] || status
}

function okrLevelName(level) {
  const names = ['Goal', 'Objective', 'Key Result', 'Sub-Task', 'Micro-Task']
  return names[Math.min(level - 1, 4)]
}

const okrSortedNodes = computed(() => {
  if (!selectedGoalDetail.value?.nodes) return []
  const nodes = selectedGoalDetail.value.nodes
  const keys = Object.keys(nodes).sort((a, b) => {
    const partsA = a.replace('G-','').split('.').map(Number)
    const partsB = b.replace('G-','').split('.').map(Number)
    for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
      if ((partsA[i] || 0) !== (partsB[i] || 0)) return (partsA[i] || 0) - (partsB[i] || 0)
    }
    return 0
  })
  return keys.map(id => ({ id, ...nodes[id], level: id.split('.').length }))
})

async function loadCompanyStatus(id) {
  try {
    const { data } = await axios.get(`/api/company/${id}/status`)
    companyStatus.value = data
  } catch (e) { console.error(e) }
}

async function startCompany() {
  if (!selectedCompany.value) return
  isStarting.value = true
  try {
    await axios.post(`/api/company/${selectedCompany.value.id}/start`)
    await loadCompanyStatus(selectedCompany.value.id)
    selectedCompany.value.status = 'running'
  } catch (e) { console.error(e) }
  isStarting.value = false
}

async function stopCompany() {
  if (!selectedCompany.value) return
  if (!confirm(`确定要关闭 ${selectedCompany.value.name} 吗？所有 Agent 将停止运行。`)) return
  isStopping.value = true
  try {
    await axios.post(`/api/company/${selectedCompany.value.id}/shutdown`)
    await loadCompanyStatus(selectedCompany.value.id)
    selectedCompany.value.status = 'shutdown'
  } catch (e) { console.error(e) }
  isStopping.value = false
}

function formatDate(isoStr) {
  if (!isoStr) return '-'
  return new Date(isoStr).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

function formatUptime(ms) {
  if (!ms || ms <= 0) return '未运行'
  const hours = Math.floor(ms / 3600000)
  const minutes = Math.floor((ms % 3600000) / 60000)
  if (hours > 24) {
    const days = Math.floor(hours / 24)
    return `${days} 天 ${hours % 24} 小时`
  }
  return hours > 0 ? `${hours} 小时 ${minutes} 分钟` : `${minutes} 分钟`
}

async function updateAgentInterval(agentId, minutes) {
  if (!selectedCompany.value) return
  try {
    await axios.put(`/api/company/${selectedCompany.value.id}/agents/${agentId}/heartbeat`, {
      intervalMinutes: Number(minutes),
    })
    await loadCompanyStatus(selectedCompany.value.id)
  } catch (e) { console.error(e) }
}

async function startAgentHeartbeat(agentId) {
  if (!selectedCompany.value) return
  try {
    await axios.post(`/api/company/${selectedCompany.value.id}/agents/${agentId}/heartbeat/start`)
    await loadCompanyStatus(selectedCompany.value.id)
  } catch (e) { console.error(e) }
}

async function stopAgentHeartbeat(agentId) {
  if (!selectedCompany.value) return
  try {
    await axios.post(`/api/company/${selectedCompany.value.id}/agents/${agentId}/heartbeat/stop`)
    await loadCompanyStatus(selectedCompany.value.id)
  } catch (e) { console.error(e) }
}

function goToAgentChat(agentId) {
  if (!selectedCompany.value) return
  router.push(`/${selectedCompany.value.id}/agents/${agentId}`)
}

async function toggleAgentSkills(agentId) {
  if (expandedAgent.value === agentId) {
    expandedAgent.value = null
    return
  }
  // Fetch skills from backend
  try {
    const { data } = await axios.get(`/api/company/${selectedCompany.value.id}/agents/${agentId}/skills`)
    agentSkills.value = data
  } catch {
    agentSkills.value = []
  }
  expandedAgent.value = agentId
}

async function triggerTrain(agentId) {
  if (!selectedCompany.value) return
  const namespacedId = `${selectedCompany.value.id}:${agentId}`
  if (!confirm(`确定要对 ${agentId} 发起 Innovator 训练？这将触发 agent-creator 重新定义并由 Innovator 训练该 Agent。`)) return
  try {
    await axios.post(`/api/agent/${selectedCompany.value.id}:ceo/chat`, {
      message: `请安排 Innovator 对 ${namespacedId} 进行一次完整的技能训练/再训练。要求：1)评估当前技能缺口 2)使用 Innovator 进行 FDE 训练 3)训练完成后汇报结果`,
      conversationId: `train-${agentId}-${Date.now().toString(36)}`,
    })
    alert(`✅ 训练指令已发送给 CEO，CEO 将安排 Innovator 训练 ${agentId}`)
  } catch (e) {
    alert(`❌ 发送训练指令失败: ${e.message}`)
  }
}

async function installSkill(skill) {
  try {
    await axios.post(`/api/open/skills/${skill.name}/install`)
    alert(`✅ ${skill.name} 安装成功`)
    selectedSkillDetail.value = null
  } catch (e) {
    alert(`❌ 安装失败: ${e.message}`)
  }
}

function viewJobDetail(job) {
  alert(`任务详情:\nID: ${job.id}\n状态: ${job.status}\n创建: ${formatDate(job.createdAt)}`)
}

// ═══ Workspace Tab Functions ═══
async function loadWorkspaceFiles(id) {
  try {
    const { data } = await axios.get(`/api/company/${id}/workspace/files`)
    wsFiles.value = data
  } catch (e) { console.error(e) }
}

async function selectWorkspaceFile(filePath) {
  if (!selectedCompany.value) return
  wsSelectedPath.value = filePath
  wsViewMode.value = 'code'
  try {
    const { data } = await axios.get(`/api/company/${selectedCompany.value.id}/workspace/files/content`, { params: { path: filePath } })
    wsContent.value = data.content
    wsSelectedFile.value = {
      name: filePath.split('/').pop(),
      path: filePath,
      size: data.size,
      createdAt: data.createdAt,
      modifiedAt: data.modifiedAt,
    }
    // HTML 文件自动切到预览
    if (/\.(html?|htm)$/i.test(filePath)) {
      wsViewMode.value = 'preview'
    }
  } catch {
    wsContent.value = '(加载失败)'
    wsSelectedFile.value = null
  }
}

async function saveWorkspaceFile() {
  if (!selectedCompany.value || !wsSelectedPath.value) return
  wsSaving.value = true
  try {
    await axios.put(`/api/company/${selectedCompany.value.id}/workspace/files/content`, {
      path: wsSelectedPath.value,
      content: wsContent.value,
    })
    // Refresh file info
    await selectWorkspaceFile(wsSelectedPath.value)
    wsViewMode.value = 'code'
  } catch (e) {
    alert(`❌ 保存失败: ${e.message}`)
  }
  wsSaving.value = false
}

function wsFileIcon(name) {
  if (!name) return '📄'
  const ext = name.split('.').pop()?.toLowerCase()
  const icons = {
    json: '📋', md: '📝', js: '⚡', ts: '🔷', py: '🐍',
    html: '🌐', css: '🎨', sh: '⚙️', yml: '📐', yaml: '📐',
    txt: '📄', log: '📜', csv: '📊', xml: '📰',
    jpg: '🖼️', jpeg: '🖼️', png: '🖼️', gif: '🖼️', svg: '🖼️',
    mp4: '🎬', mp3: '🎵', pdf: '📕', zip: '📦',
  }
  return icons[ext] || '📄'
}

// switchTab removed, handled by goToTab and router watcher

// ═══ Files Tab Functions ═══
async function loadCompanyFiles(id) {
  try {
    const { data } = await axios.get(`/api/company/${id}/files`)
    companyFiles.value = data
  } catch (e) { console.error(e) }
}

async function previewCompanyFile(filePath) {
  if (!selectedCompany.value) return
  selectedFilePath.value = filePath
  try {
    const { data } = await axios.get(`/api/company/${selectedCompany.value.id}/files/content`, { params: { path: filePath } })
    filePreviewContent.value = data.content
    filePreviewSize.value = data.size || 0
  } catch { filePreviewContent.value = '(加载失败)'; filePreviewSize.value = 0 }
}

function formatFileSize(bytes) {
  if (!bytes) return ''
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1048576) return `${(bytes/1024).toFixed(1)} KB`
  return `${(bytes/1048576).toFixed(1)} MB`
}

// ═══ Messages Tab Functions ═══
async function loadMessages(id) {
  try {
    const { data } = await axios.get(`/api/company/${id}/messages`, { params: { limit: 300 } })
    companyMessages.value = data
  } catch (e) { console.error(e) }
}

async function loadSkillsList(id) {
  try {
    const { data } = await axios.get('/api/open/skills/search', { params: { q: skillsSearchQuery.value, limit: 50 } })
    companySkills.value = data.results || []
  } catch (e) { console.error(e) }
}

async function loadCompanyJobs(id) {
  try {
    const params = {}
    if (jobStatusFilter.value) params.status = jobStatusFilter.value
    const { data } = await axios.get(`/api/company/${id}/jobs`, { params })
    companyJobs.value = data
  } catch (e) { console.error(e) }
}


const messageAgentList = computed(() => {
  const names = new Set(companyMessages.value.map(m => m.agentName))
  return [...names].sort()
})

const filteredMessages = computed(() => {
  return companyMessages.value.filter(m => {
    if (msgFilterAgent.value && m.agentName !== msgFilterAgent.value) return false
    if (msgFilterRole.value && m.role !== msgFilterRole.value) return false
    return true
  })
})

function hashColor(name) {
  let hash = 0
  for (let i = 0; i < (name || '').length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash)
  return Math.abs(hash) % 8
}

function formatTimeline(ts) {
  if (!ts) return ''
  const d = new Date(ts)
  const now = new Date()
  const diffMs = now.getTime() - d.getTime()
  if (diffMs < 60000) return '刚刚'
  if (diffMs < 3600000) return `${Math.floor(diffMs / 60000)}分钟前`
  if (diffMs < 86400000) return `${Math.floor(diffMs / 3600000)}小时前`
  return d.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

function formatTimelineAbsolute(ts) {
  if (!ts) return ''
  const d = new Date(ts)
  const time = d.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
  const now = new Date()
  const diffMs = now.getTime() - d.getTime()
  let relative = ''
  if (diffMs < 60000) relative = '刚刚'
  else if (diffMs < 3600000) relative = `${Math.floor(diffMs / 60000)}分钟前`
  else if (diffMs < 86400000) relative = `${Math.floor(diffMs / 3600000)}小时前`
  else relative = `${Math.floor(diffMs / 86400000)}天前`
  return `${time}（${relative}）`
}

onMounted(() => {
  loadCompanies()
  loadTemplates()
  document.addEventListener('click', closeDropdown)
})

onUnmounted(() => {
  document.removeEventListener('click', closeDropdown)
})

function closeDropdown() {
  showDropdown.value = false
}
</script>

<style scoped>
.company-dashboard {
  min-height: 100vh;
  padding: 0;
  background: var(--bg-primary);
}

/* Removed separate Action Bar classes, moved to detail-header */
.btn-create {
  background: linear-gradient(135deg, var(--accent), #059669);
  color: #fff; border: none; padding: 8px 20px;
  border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.btn-create:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(16,185,129,0.3); }

.btn-templates {
  color: var(--text-secondary); padding: 8px 16px;
  border-radius: 10px; font-size: 13px; cursor: pointer;
  transition: all 0.2s;
}
.btn-templates:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

.btn-sm {
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--border-active); padding: 6px 14px;
  border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.btn-sm:hover { background: var(--accent-bg-hover); }

.btn-back {
  background: none; border: none; color: var(--text-tertiary);
  font-size: 14px; cursor: pointer; padding: 4px 0;
  transition: color 0.2s;
}
.btn-back:hover { color: var(--accent); }

.btn-cancel {
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border-primary); padding: 8px 20px;
  border-radius: 10px; font-size: 14px; cursor: pointer;
}

/* ═══ Company Grid ═══ */
.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; padding: 32px;
}

.company-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 16px; padding: 24px; cursor: pointer;
  transition: all 0.25s ease;
}
.company-card:hover {
  border-color: var(--border-active);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(16,185,129,0.08);
}
.company-card.status-running { border-left: 3px solid var(--accent); }
.company-card.status-shutdown { opacity: 0.5; }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.card-emoji { font-size: 32px; }
.card-status {
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
}
.card-status.running { background: rgba(16,185,129,0.15); color: var(--accent-light); }
.card-status.creating { background: rgba(59,130,246,0.15); color: var(--blue-text); }
.card-status.paused { background: rgba(251,191,36,0.15); color: var(--yellow-text); }
.card-status.shutdown { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.card-status.active { background: rgba(16,185,129,0.15); color: var(--accent-light); }
.card-status.completed { background: rgba(16,185,129,0.15); color: var(--accent-light); }
.card-status.failed { background: rgba(239,68,68,0.15); color: #f87171; }
.card-status.training { background: rgba(139,92,246,0.15); color: var(--purple-text); }
.card-status.suspended { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.card-status.ready { background: rgba(59,130,246,0.15); color: var(--blue-text); }

.card-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.card-meta { display: flex; gap: 16px; font-size: 13px; color: var(--text-tertiary); }

/* ═══ Empty State ═══ */
.empty-state {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 20px;
  color: var(--text-muted);
}
.empty-icon { font-size: 64px; display: block; margin-bottom: 16px; }
.empty-mini { padding: 32px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* ═══ Company Detail ═══ */
.company-detail { padding: 32px; }
.detail-header { margin-bottom: 24px; }
.detail-title-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.detail-title-row h2 { font-size: 24px; font-weight: 800; }
.detail-desc { color: var(--text-tertiary); font-size: 14px; }


.tab-content { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-header h3 { font-size: 16px; font-weight: 700; }

/* ═══ Agents Grid ═══ */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.agent-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-surface); border: 1px solid var(--border-primary);
  border-radius: 12px; padding: 16px; transition: all 0.2s;
}
.agent-card:hover { border-color: var(--border-active); }
.agent-avatar { font-size: 28px; }
.agent-info { flex: 1; }
.agent-name { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.agent-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.agent-status { font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: 600; }
.agent-status.active { background: rgba(16,185,129,0.15); color: var(--accent-light); }
.agent-status.training { background: rgba(139,92,246,0.15); color: var(--purple-text); }
.agent-status.ready { background: rgba(59,130,246,0.15); color: var(--blue-text); }
.agent-status.suspended { background: rgba(255,255,255,0.05); color: var(--text-muted); }

/* ═══ Pipelines ═══ */
.pipeline-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.pipeline-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; background: var(--bg-surface);
  border: 1px solid var(--border-primary); border-radius: 12px;
  cursor: pointer; transition: all 0.2s;
}
.pipeline-card:hover { border-color: var(--border-active); }
.pipeline-header { display: flex; align-items: center; gap: 12px; }
.pipeline-name { font-weight: 600; font-size: 14px; }
.pipeline-steps { font-size: 12px; color: var(--text-muted); }
.pipeline-actions-row { display: flex; align-items: center; gap: 12px; }
.btn-pipeline-run { padding: 6px 12px; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; }
.btn-pipeline-run:hover { opacity: 0.9; }

.pipeline-detail {
  background: var(--bg-surface); border: 1px solid var(--border-primary);
  border-radius: 12px; padding: 24px; margin-bottom: 24px;
}
.pipeline-detail h4 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }

.step-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.step-node { display: flex; align-items: center; gap: 8px; }
.step-node.step-current .step-index { background: var(--accent); color: white; }
.step-node.step-completed .step-index { background: #3fb950; color: white; }
.step-node.step-completed { opacity: 0.7; }
.step-index {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.step-info { display: flex; flex-direction: column; }
.step-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.step-agent { font-size: 11px; color: var(--text-muted); }
.step-arrow { font-size: 18px; color: var(--text-muted); margin: 0 4px; }

.cron-badge {
  margin-top: 12px; padding: 8px 14px;
  background: rgba(139,92,246,0.1); color: var(--purple-text);
  border-radius: 8px; font-size: 12px; font-weight: 600;
  display: inline-block;
}

.runs-section h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--text-secondary); }
.run-card {
  padding: 14px 18px; background: var(--bg-surface);
  border: 1px solid var(--border-primary); border-radius: 10px;
  margin-bottom: 8px;
}
.run-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.run-id { font-size: 12px; font-weight: 600; color: var(--text-secondary); font-family: monospace; }
.run-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.run-actions { margin-top: 8px; }

/* ═══ OKR Full Layout ═══ */
.okr-layout { display: flex; height: calc(100vh - 140px); overflow: hidden; }
.okr-sidebar { width: 280px; min-width: 260px; border-right: 1px solid var(--border-primary); background: var(--bg-overlay); display: flex; flex-direction: column; }
.okr-sidebar-header { padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--text-secondary); border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: space-between; background: var(--bg-secondary); }
.okr-count { background: var(--bg-surface-active); color: var(--accent); padding: 2px 8px; border-radius: 12px; font-size: 11px; }
.okr-goal-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.okr-goal-card { padding: 12px 14px; border-radius: 10px; cursor: pointer; background: var(--bg-surface); border: 1px solid var(--border-primary); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.okr-goal-card:hover { transform: translateY(-2px); border-color: var(--accent-light); box-shadow: 0 4px 12px rgba(16,185,129,0.08); }
.okr-goal-card.active { background: var(--accent-bg); border-color: var(--border-active); box-shadow: 0 0 0 1px var(--accent) inset; }
.okr-goal-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.okr-gid { font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-tertiary); }
.okr-gstatus { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.okr-gstatus.active { background: rgba(59,130,246,0.15); color: #60a5fa; }
.okr-gstatus.done { background: rgba(16,185,129,0.15); color: #34d399; }
.okr-gtitle { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary); line-height: 1.4; }
.okr-gprogress { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.okr-pbar { flex: 1; height: 6px; background: var(--bg-input-focus); border-radius: 3px; overflow: hidden; }
.okr-pfill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 3px; transition: width 0.5s ease; }
.okr-ppct { font-size: 11px; font-weight: 600; color: var(--text-secondary); width: 32px; text-align: right; }
.okr-gmeta { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-faint); }

/* OKR Detail Panel */
.okr-detail { flex: 1; overflow-y: auto; background: var(--bg-primary); display: flex; flex-direction: column; }
.okr-detail.okr-empty { align-items: center; justify-content: center; background: var(--bg-overlay); }
.okr-detail.okr-empty h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary); }
.okr-detail.okr-empty p { color: var(--text-muted); font-size: 13px; }

.okr-hero { padding: 30px 40px; border-bottom: 1px solid var(--border-primary); background: linear-gradient(180deg, var(--accent-bg) 0%, transparent 100%); }
.okr-hero-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.okr-hero-id { font-size: 14px; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent-light); }
.okr-hero-status { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.okr-hero-status.active { background: rgba(59,130,246,0.2); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.okr-hero-status.done { background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.okr-hero-owner { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-left: auto; background: var(--bg-surface); padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border-primary); }
.okr-hero-title { font-size: 26px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.5px; }
.okr-hero-desc { font-size: 14px; color: var(--text-tertiary); line-height: 1.6; max-width: 800px; margin: 0; }

.okr-hero-progress { margin-top: 24px; max-width: 600px; background: var(--bg-surface); padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border-primary); }
.okr-hp-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.okr-hp-pct { font-size: 24px; font-weight: 800; color: var(--accent-light); line-height: 1; }
.okr-hp-bar { height: 8px; background: var(--bg-input-focus); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.okr-hp-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 4px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.okr-hp-stats { display: flex; gap: 16px; font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.okr-hp-stats .stat-d { color: #34d399; }
.okr-hp-stats .stat-p { color: #60a5fa; }
.okr-hp-stats .stat-w { color: var(--text-muted); }

/* OKR Tree */
.okr-tree-area { padding: 30px 40px; max-width: 1000px; }
.okr-tree-title { font-size: 18px; font-weight: 600; margin: 0 0 20px; color: var(--text-primary); }
.okr-tree { display: flex; flex-direction: column; gap: 6px; }
.okr-tnode-line { display: flex; width: 100%; }
.okr-tnode-indent { position: relative; }
.okr-tnode-indent::before { content: ''; position: absolute; top: -16px; bottom: 50%; left: -14px; width: 14px; border-left: 1.5px solid var(--border-active); border-bottom: 1.5px solid var(--border-active); border-bottom-left-radius: 6px; z-index: 1; opacity: 0.3; }
.okr-tnode-card { flex: 1; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 8px; padding: 12px 16px; transition: all 0.2s; }
.okr-tnode-card:hover { border-color: rgba(255,255,255,0.1); background: var(--bg-surface-hover); }
.okr-tnode-card.okr-lv-2 { background: rgba(59,130,246,0.03); border-color: rgba(59,130,246,0.1); }
.okr-tnode-card.okr-lv-3 { background: rgba(16,185,129,0.03); border-color: rgba(16,185,129,0.1); }
.okr-tnode-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.okr-nid { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text-tertiary); }
.okr-ntype { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,0.05); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.okr-nstatus { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; }
.okr-nstatus.done { background: rgba(16,185,129,0.1); color: #34d399; border-color: rgba(16,185,129,0.2); }
.okr-nstatus.in_progress { background: rgba(59,130,246,0.1); color: #60a5fa; border-color: rgba(59,130,246,0.2); animation: okr-pulse 2s infinite; }
.okr-nstatus.pending { background: rgba(255,255,255,0.05); color: var(--text-muted); border-color: var(--border-primary); }
@keyframes okr-pulse { 0% { box-shadow: 0 0 0 0 rgba(96,165,250,0.2); } 70% { box-shadow: 0 0 0 4px rgba(96,165,250,0); } 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); } }
.okr-ntitle { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; line-height: 1.4; }
.okr-nfooter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 4px; }
.okr-nowner { font-size: 11px; font-weight: 500; color: var(--accent-light); display: flex; align-items: center; gap: 4px; background: var(--accent-bg); padding: 2px 8px; border-radius: 10px; }
.okr-nprio { font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.okr-nprio.P0 { color: #ef4444; }
.okr-nprio.P1 { color: #f59e0b; }
.okr-nprio.P2 { color: var(--text-muted); }
.okr-ntask { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--blue-text); background: rgba(59,130,246,0.1); padding: 2px 6px; border-radius: 4px; }
.okr-nsummary { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-primary); font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
.okr-nsummary strong { color: var(--text-secondary); }

.empty-state-large { text-align: center; color: var(--text-muted); }

/* ═══ Modal ═══ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 200;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--bg-secondary); border: 1px solid var(--border-primary);
  border-radius: 20px; padding: 32px; width: 420px; max-width: 90vw;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.modal label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-muted); margin: 12px 0 6px; text-transform: uppercase;
}
.modal input, .modal textarea, .modal select {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border-primary); background: var(--bg-input);
  color: var(--text-primary); font-size: 14px; font-family: inherit;
  transition: border-color 0.2s;
}
.modal input:focus, .modal textarea:focus, .modal select:focus {
  outline: none; border-color: var(--accent);
  background: var(--bg-input-focus);
}
.modal-actions { display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end; }

.hire-result {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; animation: fadeIn 0.3s;
}
.hire-result.hired_from_template { background: rgba(16,185,129,0.1); color: var(--accent-light); }
.hire-result.training { background: rgba(139,92,246,0.1); color: var(--purple-text); }
.hire-result.already_exists { background: rgba(251,191,36,0.1); color: var(--yellow-text); }

/* ═══ Templates Panel ═══ */
.templates-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: 340px;
  background: var(--bg-secondary); border-left: 1px solid var(--border-primary);
  z-index: 150; padding: 24px; overflow-y: auto;
  animation: slideLeft 0.3s ease;
}
@keyframes slideLeft { from { transform: translateX(100%); } to { transform: none; } }

.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.panel-header h3 { font-size: 16px; font-weight: 700; }
.panel-header button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; }

.template-list { display: flex; flex-direction: column; gap: 8px; }
.template-card {
  padding: 14px 16px; background: var(--bg-surface);
  border: 1px solid var(--border-primary); border-radius: 10px;
}
.tpl-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.tpl-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); }
.tpl-type { background: var(--bg-surface-hover); padding: 2px 8px; border-radius: 6px; text-transform: uppercase; }
.tpl-score { color: var(--yellow-text); }

/* ═══ Company Switcher Header ═══ */
.detail-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  position: relative;
  height: 64px;
}
.company-switcher-wrapper {
  position: relative;
}
.company-switcher {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 6px 12px; border-radius: 8px;
  transition: all 0.2s; user-select: none; margin-left: -12px;
}
.company-switcher:hover { background: var(--bg-surface-hover); }
.switcher-icon { font-size: 20px; }
.switcher-name { font-size: 18px; font-weight: 700; margin: 0; color: var(--text-primary); }
.switcher-arrow { font-size: 10px; color: var(--text-muted); margin-left: 4px; }

.switcher-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; width: 220px;
  background: var(--bg-secondary); border: 1px solid var(--border-primary);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  z-index: 100;
  display: flex; flex-direction: column; overflow: hidden;
  animation: dropIn 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
}
@keyframes dropIn { from{opacity:0;transform:translateY(-10px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.dropdown-scroll { max-height: 240px; overflow-y: auto; padding: 6px; }
.switcher-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.switcher-item:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.switcher-item.active { background: var(--accent-bg); color: var(--accent-light); margin-bottom: 2px;}
.item-icon { font-size: 14px; opacity: 0.8; }
.switcher-divider { height: 1px; background: var(--border-primary); margin: 0; }
.switcher-item.create-btn { padding: 12px; color: var(--accent-light); margin: 4px; border: 1px dashed var(--border-active); justify-content: center;}
.switcher-item.create-btn:hover { background: var(--accent-bg); color: var(--accent-light); }

.detail-desc {
  font-size: 13px; color: var(--text-secondary); padding: 0 20px 10px;
  border-bottom: 1px solid var(--border-primary);
}

/* ═══ Empty State ═══ */
.company-empty { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 100px); width: 100%;}
.empty-state-card { background: var(--bg-surface); padding: 40px; border-radius: 16px; border: 1px dashed var(--border-active); text-align: center; max-width: 400px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.empty-state-card h2 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; color: var(--text-primary); }
.empty-state-card p { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }
.empty-icon { font-size: 54px; opacity: 0.9; animation: float 3s infinite ease-in-out; display: inline-block; filter: drop-shadow(0 4px 8px rgba(16,185,129,0.3)); }

/* ═══ Overview Tab ═══ */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.overview-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.2s;
}
.overview-card:hover {
  border-color: var(--border-active);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.overview-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-primary);
}
.overview-card-header h3 { font-size: 16px; font-weight: 700; margin: 0; }

.company-status-badge {
  padding: 6px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.company-status-badge.running { background: rgba(16,185,129,0.15); color: var(--accent-light); }
.company-status-badge.creating { background: rgba(59,130,246,0.15); color: var(--blue-text); }
.company-status-badge.shutdown { background: rgba(239,68,68,0.12); color: #f87171; }
.company-status-badge.paused { background: rgba(251,191,36,0.15); color: var(--yellow-text); }

.overview-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.info-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px;
  background: var(--bg-primary);
  border-radius: 10px;
  border: 1px solid var(--border-primary);
}
.info-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.info-value { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }

.heartbeat-on { color: var(--accent-light); }
.heartbeat-off { color: var(--text-muted); }

.overview-actions {
  display: flex; gap: 12px; padding-top: 12px;
  border-top: 1px solid var(--border-primary);
}
.btn-start {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; border: none; padding: 10px 24px; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.btn-start:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(16,185,129,0.3); }
.btn-start:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-stop {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff; border: none; padding: 10px 24px; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.btn-stop:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(239,68,68,0.3); }
.btn-stop:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-refresh {
  background: var(--bg-surface-hover); color: var(--text-secondary);
  border: 1px solid var(--border-primary); padding: 10px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-refresh:hover { background: var(--bg-primary); border-color: var(--border-active); }

.agent-count-badge {
  padding: 4px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600;
  background: rgba(59,130,246,0.12); color: var(--blue-text);
}

/* Agent Status Table */
.agent-status-table { display: flex; flex-direction: column; gap: 0; }
.table-header, .table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2.5fr;
  gap: 8px; align-items: center;
  padding: 10px 16px;
}
.table-header {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-primary);
}
.table-row {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  border-bottom: 1px solid var(--border-primary);
  transition: background 0.15s;
}
.table-row:hover { background: var(--bg-primary); }
.table-row:last-child { border-bottom: none; }

.interval-select {
  width: 100%; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--border-primary); background: var(--bg-input, var(--bg-primary));
  color: var(--text-primary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: border-color 0.2s;
}
.interval-select:focus { outline: none; border-color: var(--accent); }

.btn-agent-start {
  background: rgba(16,185,129,0.12); color: var(--accent-light);
  border: 1px solid rgba(16,185,129,0.3); padding: 4px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.btn-agent-start:hover { background: rgba(16,185,129,0.2); }

.btn-agent-stop {
  background: rgba(239,68,68,0.08); color: #f87171;
  border: 1px solid rgba(239,68,68,0.2); padding: 4px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.btn-agent-stop:hover { background: rgba(239,68,68,0.15); }

.agent-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px;
}
.agent-dot.active { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.5); animation: pulse-dot 2s infinite; }
.agent-dot.inactive { background: var(--text-muted); opacity: 0.4; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; } 50% { opacity: 0.5; }
}

.type-badge {
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  background: var(--bg-primary); color: var(--text-tertiary);
  border: 1px solid var(--border-primary);
}

.hb-active { color: var(--accent-light); font-size: 12px; }
.hb-inactive { color: var(--text-muted); font-size: 12px; }

/* Agent Name Link */
.agent-name-link {
  color: var(--text-primary); cursor: pointer; text-decoration: none;
  transition: color 0.15s;
}
.agent-name-link:hover { color: var(--accent-light); text-decoration: underline; }

/* Action Button Group */
.action-group { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.action-group button {
  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-primary);
  background: var(--bg-primary); cursor: pointer; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; gap: 2px; transition: all 0.15s;
  white-space: nowrap;
}
.action-group button:hover { background: var(--bg-surface-hover); border-color: var(--border-active); }

.btn-action-chat { color: var(--accent-light); }
.btn-action-skills { color: var(--blue-text, #60a5fa); }
.btn-action-train { color: var(--purple-text, #a78bfa); }
.btn-action-fire { color: var(--red-text, #ef4444); }

/* Expandable Skills Panel */
.agent-expand-panel {
  padding: 16px 20px; background: var(--bg-primary);
  border-bottom: 1px solid var(--border-primary);
  animation: fadeIn 0.2s ease;
}
.expand-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.expand-header h4 { font-size: 13px; font-weight: 700; margin: 0; }
.btn-close-expand {
  background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px;
  padding: 4px 8px; border-radius: 4px; transition: all 0.15s;
}
.btn-close-expand:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

.skills-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-chip {
  padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: rgba(139,92,246,0.08); color: var(--purple-text, #a78bfa);
  border: 1px solid rgba(139,92,246,0.15);
}

/* ═══ Files Tab ═══ */
.files-layout {
  display: flex; gap: 0; height: calc(100vh - 200px);
  border: 1px solid var(--border-primary); border-radius: 12px; overflow: hidden;
  background: var(--bg-surface);
}
.files-tree-panel {
  width: 320px; min-width: 260px; border-right: 1px solid var(--border-primary);
  display: flex; flex-direction: column; background: var(--bg-overlay);
}
.files-preview-panel {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.panel-title {
  padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-primary);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.files-tree-scroll { flex: 1; overflow-y: auto; padding: 6px; }
.files-preview-scroll { flex: 1; overflow: auto; padding: 8px; }
.file-preview-code {
  font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 12px;
  line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap;
  word-break: break-all; margin: 0; padding: 4px;
}
.file-count-badge {
  padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600;
  background: var(--accent-bg); color: var(--accent); flex-shrink: 0;
}
.file-size-badge {
  padding: 2px 6px; border-radius: 6px; font-size: 9px;
  background: var(--purple-bg, rgba(139,92,246,0.1)); color: var(--purple-text, #a78bfa);
  flex-shrink: 0;
}

/* ═══ Workspace Tab ═══ */
.ws-layout {
  display: flex; gap: 0; height: calc(100vh - 200px);
  border: 1px solid var(--border-primary); border-radius: 12px; overflow: hidden;
  background: var(--bg-surface);
}
.ws-tree-panel {
  width: 300px; min-width: 240px; border-right: 1px solid var(--border-primary);
  display: flex; flex-direction: column; background: var(--bg-overlay);
}
.ws-tree-scroll { flex: 1; overflow-y: auto; padding: 6px; }
.ws-detail-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ws-file-info {
  padding: 12px 16px; border-bottom: 1px solid var(--border-primary);
  background: var(--bg-overlay);
}
.ws-file-info-header {
  display: flex; align-items: center; gap: 10px;
}
.ws-file-icon { font-size: 28px; flex-shrink: 0; }
.ws-file-name-area { flex: 1; min-width: 0; }
.ws-file-name {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-file-path {
  font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace;
}
.ws-file-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-ws-save {
  padding: 5px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 1px solid rgba(16,185,129,0.3); background: rgba(16,185,129,0.1);
  color: #34d399; cursor: pointer; transition: all 0.2s;
}
.btn-ws-save:hover:not(:disabled) { background: rgba(16,185,129,0.2); box-shadow: 0 2px 8px rgba(16,185,129,0.15); }
.btn-ws-edit {
  padding: 5px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--border-primary); background: var(--bg-surface);
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
}
.btn-ws-edit:hover { background: var(--bg-surface-hover); border-color: var(--border-active); }
.ws-file-meta {
  display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap;
}
.ws-meta-item {
  font-size: 11px; color: var(--text-muted); font-weight: 600;
  padding: 2px 8px; background: var(--bg-surface); border-radius: 6px;
  border: 1px solid var(--border-primary);
}
.ws-content-area { flex: 1; overflow: auto; position: relative; }
.ws-editor {
  width: 100%; height: 100%; border: none; resize: none; padding: 12px 16px;
  font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 12px;
  line-height: 1.7; color: var(--text-primary); background: var(--bg-primary);
  outline: none; tab-size: 2;
}
.ws-preview-code {
  font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 12px;
  line-height: 1.7; color: var(--text-secondary); white-space: pre-wrap;
  word-break: break-all; margin: 0; padding: 12px 16px;
}
.ws-empty-state {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: var(--text-muted); text-align: center; padding: 40px;
}
.ws-empty-state h3 { font-size: 16px; margin: 0 0 4px; color: var(--text-secondary); }
.ws-empty-state p { font-size: 13px; margin: 0; opacity: 0.7; }

/* View Mode Tabs */
.ws-view-tabs {
  display: flex; gap: 2px; margin-top: 10px;
  background: var(--bg-surface); border-radius: 8px; padding: 3px;
  border: 1px solid var(--border-primary);
}
.ws-view-tab {
  padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 700;
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s; flex: 1; text-align: center;
}
.ws-view-tab:hover { color: var(--text-secondary); background: var(--bg-surface-hover); }
.ws-view-tab.active {
  background: var(--accent-bg, rgba(59,130,246,0.12)); color: var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* HTML Preview iframe */
.ws-html-preview {
  width: 100%; height: 100%; border: none;
  background: #fff; border-radius: 0;
}

.refresh-btn {
  background: none; border: none; cursor: pointer; font-size: 13px;
  padding: 2px 4px; border-radius: 4px; transition: all 0.2s;
}
.refresh-btn:hover { background: var(--bg-surface-hover); transform: scale(1.1); }

/* ═══ Messages Tab ═══ */
.msg-controls {
  display: flex; gap: 8px; align-items: center;
}
.msg-filter-select {
  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-primary); background: var(--bg-input);
  color: var(--text-primary); cursor: pointer; transition: border-color 0.2s;
}
.msg-filter-select:focus { outline: none; border-color: var(--accent); }

.timeline-container {
  display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 200px);
  overflow-y: auto; padding: 8px 0;
}
.timeline-item {
  display: flex; gap: 10px; animation: fadeIn 0.3s ease;
}
.timeline-marker {
  width: 32px; height: 32px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
  margin-top: 4px;
}
.timeline-marker.user { background: rgba(59,130,246,0.15); }
.timeline-marker.assistant { background: rgba(16,185,129,0.15); }

.timeline-card {
  flex: 1; min-width: 0; padding: 10px 14px; border-radius: 10px;
  background: var(--bg-surface); border: 1px solid var(--border-primary);
  transition: border-color 0.2s;
}
.timeline-card:hover { border-color: var(--border-active); }
.timeline-user .timeline-card { border-left: 3px solid rgba(59,130,246,0.4); }
.timeline-assistant .timeline-card { border-left: 3px solid rgba(16,185,129,0.4); }

.timeline-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap;
}
.timeline-agent {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}
.agent-color-0 { background: rgba(239,68,68,0.1); color: #f87171; }
.agent-color-1 { background: rgba(59,130,246,0.1); color: #60a5fa; }
.agent-color-2 { background: rgba(16,185,129,0.1); color: #34d399; }
.agent-color-3 { background: rgba(139,92,246,0.1); color: #a78bfa; }
.agent-color-4 { background: rgba(251,191,36,0.1); color: #fbbf24; }
.agent-color-5 { background: rgba(236,72,153,0.1); color: #f472b6; }
.agent-color-6 { background: rgba(14,165,233,0.1); color: #38bdf8; }
.agent-color-7 { background: rgba(168,85,247,0.1); color: #c084fc; }

.timeline-role-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.timeline-role-badge.user { background: rgba(59,130,246,0.12); color: var(--blue-text, #60a5fa); }
.timeline-role-badge.assistant { background: rgba(16,185,129,0.12); color: var(--accent-light); }

.timeline-time {
  font-size: 11px; color: var(--text-secondary); font-weight: 500;
  padding: 1px 6px; border-radius: 4px;
  background: var(--bg-surface-hover);
}
.timeline-task-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: rgba(251,191,36,0.1); color: var(--yellow-text, #fbbf24);
  font-weight: 600; font-family: monospace;
}
.timeline-conv-title {
  font-size: 11px; color: var(--text-muted); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.timeline-content {
  font-size: 12px; line-height: 1.6; color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
  max-height: 120px; overflow-y: auto;
}

/* Skills Tab */
.search-bar-inline { display: flex; gap: 8px; align-items: center; }
.search-bar-inline input { padding: 8px 12px; border: 1px solid var(--border-primary); border-radius: 6px; background: var(--bg-surface); color: var(--text-primary); width: 200px; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.skill-card-mini { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.skill-card-mini:hover { border-color: var(--accent); transform: translateY(-2px); }
.skill-icon { font-size: 28px; }
.skill-info { flex: 1; }
.skill-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.skill-desc { font-size: 12px; color: var(--text-muted); }
.skill-meta-mini { display: flex; align-items: center; }
.version-badge { font-size: 11px; padding: 3px 8px; background: var(--bg-primary); border-radius: 4px; color: var(--text-muted); }
.taxonomy-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.taxonomy-tag { font-size: 11px; padding: 4px 8px; background: var(--bg-surface); border-radius: 4px; }

/* Jobs Tab */
.filter-inline { display: flex; gap: 8px; align-items: center; }
.filter-inline select { padding: 8px 12px; border: 1px solid var(--border-primary); border-radius: 6px; background: var(--bg-surface); color: var(--text-primary); }
.jobs-table-mini { display: flex; flex-direction: column; gap: 1px; background: var(--border-primary); border-radius: 10px; overflow: hidden; margin-top: 16px; }
.table-header-mini { display: grid; grid-template-columns: 120px 100px 180px 100px; gap: 16px; padding: 12px 16px; background: var(--bg-primary); font-weight: 600; font-size: 13px; color: var(--text-muted); }
.table-row-mini { display: grid; grid-template-columns: 120px 100px 180px 100px; gap: 16px; padding: 12px 16px; background: var(--bg-surface); align-items: center; font-size: 13px; }
.job-id { font-family: monospace; color: var(--text-muted); }
.status-badge-mini { font-size: 11px; padding: 4px 8px; border-radius: 4px; display: inline-block; }
.status-badge-mini.pending { background: #ffd33d22; color: #ffd33d; }
.status-badge-mini.running { background: #58a6ff22; color: #58a6ff; }
.status-badge-mini.completed { background: #3fb95022; color: #3fb950; }
.status-badge-mini.failed { background: #f8514922; color: #f85149; }
.btn-action-mini { padding: 6px 12px; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 4px; color: var(--text-secondary); cursor: pointer; font-size: 12px; }
.btn-action-mini:hover { border-color: var(--accent); }
.btn-sm { padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn-sm:hover { border-color: var(--accent); }
.btn-install-large { padding: 10px 20px; background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 12px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }

/* ═══ Fancy Hire Modal ═══ */
.hire-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  animation: fadeIn 0.3s ease;
}
.hire-modal-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-active);
  border-radius: 20px; width: 900px; max-width: 95vw; height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUpFade {
  0% { transform: translateY(40px) scale(0.98); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.hire-modal-header {
  padding: 24px 32px; display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--border-primary);
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}
.header-title-box { display: flex; gap: 16px; align-items: center; }
.header-icon { font-size: 32px; padding: 12px; background: rgba(16,185,129,0.1); border-radius: 16px; border: 1px solid rgba(16,185,129,0.2); }
.header-title-box h3 { font-size: 20px; font-weight: 800; margin: 0 0 6px 0; color: var(--text-primary); letter-spacing: 0.5px; }
.header-title-box p { font-size: 13px; color: var(--text-tertiary); margin: 0; }
.btn-close-fancy {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg-surface);
  color: var(--text-muted); font-size: 14px; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.btn-close-fancy:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; transform: rotate(90deg); }

.hire-modal-toolbar {
  padding: 16px 32px; display: flex; gap: 16px; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-primary); background: var(--bg-secondary);
}
.search-box-fancy {
  flex: 1; position: relative; display: flex; align-items: center;
}
.search-box-fancy .search-icon { position: absolute; left: 14px; font-size: 14px; color: var(--text-muted); }
.search-box-fancy input {
  width: 100%; padding: 10px 14px 10px 40px; border-radius: 12px; border: 1px solid var(--border-primary);
  background: var(--bg-input); color: var(--text-primary); font-size: 14px; transition: all 0.2s;
}
.search-box-fancy input:focus { outline: none; border-color: var(--accent); background: var(--bg-input-focus); box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }
.filter-group { display: flex; gap: 12px; }
.fancy-select-wrap { position: relative; display: flex; align-items: center; }
.fancy-select-wrap .select-icon { position: absolute; left: 12px; font-size: 13px; z-index: 10;}
.fancy-select-wrap select {
  padding: 10px 32px 10px 36px; border-radius: 12px; border: 1px solid var(--border-primary);
  background: var(--bg-input); color: var(--text-primary); font-size: 13px; cursor: pointer;
  appearance: none; transition: all 0.2s;
}
.fancy-select-wrap select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }
.fancy-select-wrap::after { content: '▼'; position: absolute; right: 12px; font-size: 10px; color: var(--text-muted); pointer-events: none; }

.hire-modal-body { flex: 1; overflow-y: auto; padding: 24px 32px; background: var(--bg-primary); }
.hire-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }

.hire-card {
  position: relative; padding: 20px; border-radius: 16px; background: var(--bg-surface);
  border: 1px solid var(--border-primary); cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column; overflow: hidden; height: 160px;
}
.hire-card::before {
  content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, transparent 100%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.hire-card:hover { transform: translateY(-4px); border-color: rgba(16,185,129,0.4); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }
.hire-card:hover::before { opacity: 1; }
.hire-card.is-selected { border-color: var(--accent); background: rgba(16,185,129,0.05); box-shadow: 0 0 0 1px var(--accent) inset; }

.hire-card-checkbox { position: absolute; top: 16px; right: 16px; z-index: 2; }
.check-circle {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-active);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  color: transparent; transition: all 0.2s; background: var(--bg-primary);
}
.hire-card.is-selected .check-circle { background: var(--accent); border-color: var(--accent); color: white; transform: scale(1.1); }

.hire-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; z-index: 2; }
.hire-card-emoji { font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.hire-card-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hire-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 14px 0; z-index: 2; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.hire-card-meta { display: flex; gap: 8px; flex-wrap: wrap; z-index: 2; }
.hire-card-meta span { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; }
.badge-type { background: var(--bg-primary); color: var(--text-tertiary); border: 1px solid var(--border-primary); text-transform: uppercase; }
.badge-score { background: rgba(251,191,36,0.1); color: var(--yellow-text); border: 1px solid rgba(251,191,36,0.2); }
.badge-used { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

.hire-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-muted); }
.hire-empty span { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }

.hire-modal-footer {
  padding: 20px 32px; background: var(--bg-secondary); border-top: 1px solid var(--border-primary);
  display: flex; justify-content: space-between; align-items: center;
}
.hire-selection-info { font-size: 14px; color: var(--text-secondary); }
.highlight-count { font-size: 18px; font-weight: 800; color: var(--accent-light); margin: 0 4px; }
.hire-actions { display: flex; gap: 12px; }
.btn-fancy-cancel {
  padding: 10px 24px; border-radius: 12px; border: 1px solid var(--border-primary);
  background: var(--bg-surface); color: var(--text-secondary); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.btn-fancy-cancel:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.btn-fancy-submit {
  padding: 10px 28px; border-radius: 12px; border: none; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, var(--accent) 0%, #059669 100%); color: white;
  cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
.btn-fancy-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16,185,129,0.4); }
.btn-fancy-submit:disabled { background: var(--bg-surface); border: 1px solid var(--border-primary); color: var(--text-muted); box-shadow: none; cursor: not-allowed; opacity: 0.7; }
</style>