Control-Center/frontend/src/app/components/agent-card/agent-card.component.scss

// ============================================================================
// Agent Card Styles — M3 Tactical Dark (Final Integration, CUB-45)
// Uses sub-components:
//   - AgentStatusBadge (CUB-48) for status display
//   - TaskProgressBar (CUB-44) for progress
//   - QuickJumpButton (CUB-46) for navigation
// ============================================================================

// ---------------------------------------------------------------------------
// Card Shell
// ---------------------------------------------------------------------------
.agent-card {
  display: flex;
  position: relative;
  min-width: var(--cc-card-min-width, 320px);
  border-radius: var(--cc-card-border-radius, 16px);
  background-color: var(--cc-surface-container);
  overflow: hidden;
  transition: background-color 150ms ease, box-shadow 150ms ease;

  // M3 state layer overlay on hover (8% primary)
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: rgba(255, 255, 255, 0.08);
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
  }

  &:hover::after {
    opacity: 1;
  }

  // Focus-visible outline for keyboard navigation
  &:focus-visible {
    outline: 3px solid var(--status-active);
    outline-offset: 2px;
  }
}

// ---------------------------------------------------------------------------
// Left-border accent (4px, matching status color)
// ---------------------------------------------------------------------------
.agent-card__accent {
  flex-shrink: 0;
  width: 4px;
  background-color: var(--agent-status-color);
  border-radius: 4px 0 0 4px;
}

// ---------------------------------------------------------------------------
// Card Body
// ---------------------------------------------------------------------------
.agent-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--cc-card-padding, 20px);
  min-width: 0; // Prevent flex blowout for long text
}

// ---------------------------------------------------------------------------
// Header Row
// ---------------------------------------------------------------------------
.agent-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.agent-card__status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cc-on-surface-variant);
  font-size: 12px;
}

.agent-card__channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.agent-card__channel-icon {
  font-size: 14px;
  width: 14px;
  height: 14px;
}

.agent-card__last-activity {
  opacity: 0.7;
}

// ---------------------------------------------------------------------------
// Task Description
// ---------------------------------------------------------------------------
.agent-card__task {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// ---------------------------------------------------------------------------
// Task Progress Bar (CUB-44 sub-component)
// Override the sub-component's progress bar colors to match status color
// ---------------------------------------------------------------------------
:host ::ng-deep .task-progress-bar .mat-mdc-progress-bar,
.agent-card .mat-mdc-progress-bar {
  --mdc-linear-progress-active-indicator-color: var(--agent-status-color);
  --mdc-linear-progress-track-color: var(--agent-status-bg);
}

// ---------------------------------------------------------------------------
// Footer Row
// ---------------------------------------------------------------------------
.agent-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto; // Push footer to bottom
}

.agent-card__session {
  font-size: 11px;
  color: var(--cc-on-surface-variant);
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

// ---------------------------------------------------------------------------
// Status-specific card backgrounds (subtle tint)
// ---------------------------------------------------------------------------
.agent-card--active {
  background-color: var(--status-active-bg);
}

.agent-card--thinking {
  background-color: var(--status-thinking-bg);
}

.agent-card--error {
  background-color: var(--status-error-bg);
}

// Idle and offline use default surface-container

// ---------------------------------------------------------------------------
// Accessibility: Reduced Motion
// ---------------------------------------------------------------------------
@media (prefers-reduced-motion: reduce) {
  .agent-card {
    transition: none;
  }
}

// ---------------------------------------------------------------------------
// Responsive: Mobile adjustments
// ---------------------------------------------------------------------------
@media (max-width: 599px) {
  .agent-card {
    min-width: unset;
  }

  .agent-card__body {
    padding: 16px;
    gap: 8px;
  }
}