/* M5 — 协作流可视化面板 */
.collab-flow-panel {
  display: none;
  background: rgba(139,92,246,.04);
  border-bottom: 1px solid rgba(139,92,246,.15);
  padding: 10px 16px;
  overflow-x: auto;
  flex-shrink: 0;
}
.collab-flow-panel.active { display: block; }

.collab-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.collab-flow-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(139,92,246,.9);
  display: flex;
  align-items: center;
  gap: 6px;
}
.collab-flow-title-icon { font-size: 14px; }
.collab-flow-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.collab-flow-btn {
  border: none;
  background: var(--hover-bg);
  color: var(--text2);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--border);
}
.collab-flow-btn:hover { background: var(--active-bg); color: var(--text); }
.collab-flow-btn.danger { color: #ff4d6a; }
.collab-flow-btn.danger:hover { background: rgba(255,77,106,.12); }

.collab-flow-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
}

.collab-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--hover-bg);
  transition: all .3s;
  position: relative;
}
.collab-flow-node.running {
  border-color: rgba(139,92,246,.5);
  background: rgba(139,92,246,.08);
  box-shadow: 0 0 12px rgba(139,92,246,.15);
}
.collab-flow-node.done {
  border-color: rgba(46,204,113,.4);
  background: rgba(46,204,113,.06);
}
.collab-flow-node.error {
  border-color: rgba(255,77,106,.4);
  background: rgba(255,77,106,.06);
}
.collab-flow-node.waiting_approval {
  border-color: rgba(255,165,0,.4);
  background: rgba(255,165,0,.06);
  animation: flowPulseOrange 2s infinite;
}

.collab-flow-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 4px;
  position: relative;
}
.collab-flow-avatar .flow-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.flow-status-dot.running { background: #8b5cf6; animation: flowPulse 1.5s infinite; }
.flow-status-dot.done { background: #2ecc71; }
.flow-status-dot.error { background: #ff4d6a; }
.flow-status-dot.waiting { background: var(--text3); }
.flow-status-dot.waiting_approval { background: #ffa500; }

.collab-flow-name {
  font-size: 11px;
  color: var(--text2);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.collab-flow-time {
  font-size: 10px;
  color: var(--text3);
  margin-top: 1px;
}

.collab-flow-edge {
  display: flex;
  align-items: center;
  padding: 0 2px;
  min-width: 28px;
  justify-content: center;
}
.collab-flow-edge-line {
  height: 2px;
  width: 20px;
  background: var(--border);
  position: relative;
  border-radius: 1px;
}
.collab-flow-edge-line::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  border: 4px solid transparent;
  border-left-color: var(--border);
}
.collab-flow-edge.active .collab-flow-edge-line {
  background: rgba(139,92,246,.6);
  animation: flowEdgePulse 1.5s infinite;
}
.collab-flow-edge.active .collab-flow-edge-line::after {
  border-left-color: rgba(139,92,246,.6);
}
.collab-flow-edge.done .collab-flow-edge-line {
  background: rgba(46,204,113,.5);
}
.collab-flow-edge.done .collab-flow-edge-line::after {
  border-left-color: rgba(46,204,113,.5);
}

.collab-flow-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.collab-flow-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.collab-flow-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #2ecc71);
  border-radius: 2px;
  transition: width .5s ease;
}
.collab-flow-progress-text {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
}

/* History panel */
.collab-flow-history {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.collab-flow-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  font-size: 12px;
  color: var(--text2);
}
.collab-flow-history-item:hover { background: var(--hover-bg); }
.collab-flow-history-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.collab-flow-history-status.completed { background: #2ecc71; }
.collab-flow-history-status.failed { background: #ff4d6a; }
.collab-flow-history-agents {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collab-flow-history-time { color: var(--text3); font-size: 11px; }
.collab-flow-history-duration { color: var(--text3); font-size: 11px; }

@keyframes flowPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.3); }
}
@keyframes flowPulseOrange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,165,0,.3); }
  50% { box-shadow: 0 0 8px 2px rgba(255,165,0,.15); }
}
@keyframes flowEdgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* Chain button status indicators */
#chainBtn.has-flow { color: rgba(139,92,246,.9); }
#chainBtn.has-flow:hover { color: rgba(139,92,246,1); background: rgba(139,92,246,.1); }
#chainBtn.flow-running {
  color: #ffa500;
  background: rgba(255,165,0,.08);
  animation: flowPulseOrange 2s ease-in-out infinite;
  border-radius: 50%;
}
#chainBtn.flow-running:hover { color: #ffa500; background: rgba(255,165,0,.15); }