/* ============================================================
   Right Drawer — Context panels sidebar
   ============================================================ */

.right-drawer {
  width: var(--right-drawer-w, 360px);
  background: var(--c-bg-surface);
  border-left: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s ease;
}
.right-drawer.collapsed { width: 0; border-left: none; }

/* ---- Drawer header ---- */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.drawer-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-primary);
}
.drawer-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 16px;
  color: var(--c-text-tertiary);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.15s;
}
.drawer-close:hover { background: var(--c-bg-hover); color: var(--c-text-primary); }

/* ---- Drawer tabs ---- */
.drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.drawer-tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  user-select: none;
}
.drawer-tab:hover { color: var(--c-text-secondary); }
.drawer-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.drawer-tab .drawer-tab-count {
  font-size: 10px;
  margin-left: 4px;
  color: var(--c-text-tertiary);
}

/* ---- Drawer content ---- */
.drawer-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ---- Drawer section ---- */
.drawer-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
}
.drawer-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.drawer-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.drawer-section-action {
  font-size: 11px;
  color: var(--c-accent);
  cursor: pointer;
  border: none;
  background: none;
  padding: 2px 4px;
  border-radius: 4px;
}
.drawer-section-action:hover { background: var(--c-bg-hover); }

/* ---- Drawer list items ---- */
.drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.1s;
  margin-bottom: 2px;
}
.drawer-item:hover { background: var(--c-bg-hover); }
.drawer-item.active { background: var(--c-bg-hover); border: 1px solid var(--c-border-light); }
.drawer-item .item-icon {
  font-size: 16px;
  width: 20px; text-align: center;
  flex-shrink: 0;
}
.drawer-item .item-info {
  flex: 1; min-width: 0;
}
.drawer-item .item-title {
  font-size: 13px; font-weight: 500;
  color: var(--c-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-item .item-subtitle {
  font-size: 11px; color: var(--c-text-tertiary);
  margin-top: 2px;
}
.drawer-item .item-badge {
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px;
  background: var(--c-bg-deep);
  color: var(--c-text-tertiary);
  flex-shrink: 0;
}
.drawer-item .item-badge.running { background: rgba(0,212,255,0.15); color: var(--c-accent); }
.drawer-item .item-badge.done    { background: rgba(34,216,147,0.15); color: var(--c-green); }
.drawer-item .item-badge.failed  { background: rgba(244,63,94,0.15);  color: var(--c-rose); }

/* ---- Subagent node (hexagonal) ---- */
.agent-node-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
}
.agent-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.agent-node:hover { background: var(--c-bg-hover); }
.agent-node .agent-hex {
  width: 32px; height: 28px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: all 0.15s;
}
.agent-node.active .agent-hex {
  box-shadow: 0 0 10px var(--c-accent-glow);
  animation: hex-pulse 2s ease-in-out infinite;
}
.agent-node .agent-label {
  font-size: 10px; color: var(--c-text-tertiary);
  max-width: 70px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@keyframes hex-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--c-accent-glow); }
  50%      { box-shadow: 0 0 16px var(--c-accent-glow-strong); }
}