/* Bridge Workbench - Context Rail */
/* The Vault + Identity Manager */

.context-rail {
  display: flex;
  flex-direction: column;
}

/* The Vault - API Keys */
.vault {
  border-bottom: 1px solid var(--border);
}

.vault-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--panel);
}

.vault-header svg { width: 14px; height: 14px; }

.vault-list {
  padding: var(--space-sm) 0;
}

.vault-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-size: 11px;
  color: var(--text);
}
.vault-item:hover { background: var(--panel-lighter); }
.vault-item.selected { background: #e8f0fe; }

.vault-item .key-name {
  flex: 1;
  font-weight: 500;
}

/* CORS Section */
.cors-section {
  border-bottom: 1px solid var(--border);
}

.cors-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--panel);
}

.cors-header svg { width: 14px; height: 14px; }

.cors-list {
  padding: var(--space-sm) 0;
}

.cors-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-size: 11px;
  color: var(--text);
}
.cors-item:hover { background: var(--panel-lighter); }
.cors-item.selected { background: #e8f0fe; }

.cors-item .method {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--method-get);
}

/* Identity Manager - Google OAuth */
.identity-manager {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: var(--space-md);
}

.identity-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.identity-header svg { width: 14px; height: 14px; }

/* Disconnected State */
.identity-card.disconnected {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-lg);
  background: var(--panel);
  border-radius: var(--radius-md);
  text-align: center;
}

.identity-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--panel-lighter);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  color: var(--muted);
}

.identity-card.disconnected .identity-text {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: var(--space-md);
}

/* Connected State */
.identity-card.connected {
  background: var(--panel);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.identity-card.connected .identity-avatar {
  background: var(--success);
  color: white;
}

.identity-email {
  font-weight: 500;
  font-size: 11px;
  color: var(--text);
  margin-bottom: var(--space-sm);
  word-break: break-all;
}

.identity-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.connect-btn {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.connect-btn:hover { background: var(--panel-lighter); }

.disconnect-btn {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: none;
  font-size: 10px;
  color: var(--muted);
  cursor: pointer;
}
.disconnect-btn:hover { color: var(--error); }