/* Phase U.3 — MCP Panel Styles */

.mcp-summary {
  font-size: 0.7rem; padding: 0.15em 0.5em;
  border-radius: 2px; letter-spacing: 0.5px;
  font-family: var(--font-mono); color: var(--ink-dim);
  background: var(--bg-card); border: 1px solid var(--border);
  margin-left: 0.5rem;
}
.mcp-summary.mcp-status-failed { color: var(--danger); border-color: var(--danger); }

.mcp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.6rem; margin-top: 0.4rem;
}

.mcp-card {
  padding: 0.75rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  display: flex; flex-direction: column; gap: 0.35rem;
  transition: border-color 120ms ease;
}
.mcp-card:hover { border-color: var(--accent); }

.mcp-card-head {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-serif); font-size: 0.88rem;
}

.mcp-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-dim); flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(128,128,128,0.1);
}
.mcp-dot-connected {
  background: var(--success);
  box-shadow: 0 0 0 2px rgba(93, 144, 56, 0.2);
  animation: mcp-pulse-ok 3s infinite;
}
@keyframes mcp-pulse-ok {
  0%, 100% { box-shadow: 0 0 0 2px rgba(93, 144, 56, 0.2); }
  50% { box-shadow: 0 0 0 4px rgba(93, 144, 56, 0.08); }
}
.mcp-dot-needs-auth {
  background: var(--warning);
  box-shadow: 0 0 0 2px rgba(240, 183, 90, 0.2);
}
.mcp-dot-failed {
  background: var(--danger);
  box-shadow: 0 0 0 2px rgba(220, 67, 67, 0.2);
}

.mcp-card-url {
  font-size: 0.68rem; color: var(--ink-dimmer);
  font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mcp-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem; margin-top: 0.1rem;
}

.mcp-status-badge {
  font-size: 0.65rem; font-weight: 600;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.mcp-status-connected { background: rgba(93, 144, 56, 0.18); color: var(--success); }
.mcp-status-needs-auth { background: rgba(240, 183, 90, 0.2); color: #b77a2a; }
.mcp-status-failed { background: rgba(220, 67, 67, 0.18); color: var(--danger); }