/* ===========================================
   JAVY 5 - Test Runner Popup
   Chappy V2 Style - Glasmorphism
   =========================================== */

/* ---- Test Runner Container ---- */
.test-runner {
  position: fixed;
  bottom: 60px;
  left: 20px;
  width: 380px;
  max-height: 480px;
  background: rgba(12, 12, 25, 0.92);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-xl), 0 0 40px rgba(6, 182, 212, 0.1);
  display: flex;
  flex-direction: column;
  z-index: var(--z-chat);
  overflow: hidden;
  animation: testRunnerIn 250ms ease;
}

.test-runner.hidden {
  display: none;
}

@keyframes testRunnerIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- Header ---- */
.test-runner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-lg);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, transparent 60%);
}

.test-runner-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.test-runner-close {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-sm);
  transition: all var(--transition-fast);
}

.test-runner-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* ---- Progress Bar ---- */
.test-runner-progress {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-lg);
}

.test-runner-progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.test-runner-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
  background: var(--gradient-primary-wide);
}

.test-runner-progress-fill.has-errors {
  background: linear-gradient(135deg, var(--color-success), var(--color-error));
}

/* ---- Summary Line ---- */
.test-runner-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-xs);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.test-runner-summary-stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.test-runner-stat {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.test-runner-stat .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot-pass { background: var(--color-success); }
.dot-fail { background: var(--color-error); }
.dot-skip { background: var(--text-muted); }

.test-runner-actions {
  display: flex;
  gap: var(--space-xs);
}

.test-runner-action-btn {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-xs);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.test-runner-action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

/* ---- Test List ---- */
.test-runner-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xs) 0;
}

/* Test Group */
.test-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.test-group:last-child {
  border-bottom: none;
}

.test-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}

.test-group-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.test-group-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  font-size: var(--font-xs);
}

.test-group.collapsed .test-group-chevron {
  transform: rotate(-90deg);
}

.test-group-name {
  flex: 1;
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-group-count {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.test-group-items {
  padding-left: var(--space-xl);
}

.test-group.collapsed .test-group-items {
  display: none;
}

/* Individual Test */
.test-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-lg);
  font-size: var(--font-xs);
  color: var(--text-secondary);
  transition: background var(--transition-fast);
}

.test-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.test-item-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
}

.test-item-icon.pass { color: var(--color-success); }
.test-item-icon.fail { color: var(--color-error); }
.test-item-icon.skip { color: var(--text-muted); }

.test-item-icon.running {
  color: var(--accent-cyan);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.test-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-item-duration {
  font-size: var(--font-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ---- Empty State ---- */
.test-runner-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-sm);
  gap: var(--space-sm);
}

.test-runner-empty-icon {
  font-size: 32px;
  opacity: 0.3;
}

/* ---- Mobile ---- */
@media (max-width: 639px) {
  .test-runner {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 50vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: testRunnerMobileIn 250ms ease;
  }

  @keyframes testRunnerMobileIn {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
  }
}