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

// ============================================================================
// Agent Card Styles — M3 Tactical Dark
// Per spec Section 7.3: Agent Card Component
// Section 7.5: Animation Specs
// ============================================================================

// ---------------------------------------------------------------------------
// 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__dot {
  flex-shrink: 0;
}

.agent-card__status-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.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;
}

// ---------------------------------------------------------------------------
// Progress Bar
// ---------------------------------------------------------------------------
.agent-card__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-card__progress-info {
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  color: var(--cc-on-surface-variant);
}

// Override M3 progress bar track to use status color
.agent-card__progress .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;
}

// ---------------------------------------------------------------------------
// Quick-Jump Button — M3 FilledTonalIconButton style
// Per spec: → Jump button using M3 FilledTonalIconButton
// ---------------------------------------------------------------------------
.agent-card__jump {
  // M3 FilledTonal style: secondary container color
  --mdc-icon-button-icon-color: var(--cc-on-surface);
  background-color: var(--cc-surface-container-high);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;

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

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

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

  // Active state
  &:active {
    transform: scale(0.95);
  }

  .mat-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
}

// ---------------------------------------------------------------------------
// 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

// ---------------------------------------------------------------------------
// Touch-First Targets
// ---------------------------------------------------------------------------
// Minimum touch target: 48px (M3 standard)
.agent-card__jump {
  min-width: 48px;
  min-height: 48px;
}

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

  .agent-card__jump {
    transition: none;

    &:active {
      transform: none;
    }
  }
}

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

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