/* ── Agent Management Panel ─────────────────────────────────────────────── */

#tab-agents {
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #0d0d1a;
  position: relative;
}

/* ── Toolbar ── */
#agents-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid #1e1e3a;
  flex-shrink: 0;
}
#agents-toolbar-title {
  font-size: 15px;
  font-weight: 700;
  color: #c0caf5;
}
#agents-toolbar-sub {
  font-size: 12px;
  color: #3a3a5a;
  font-weight: 400;
}
#btn-new-agent {
  background: #7aa2f7;
  border: none;
  color: #0d0d1a;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, opacity 0.15s;
}
#btn-new-agent:hover { background: #89b4fa; }

/* ── Card grid ── */
#agents-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: #2a2a4a transparent;
}
#agents-grid::-webkit-scrollbar { width: 5px; }
#agents-grid::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 3px; }

/* ── Empty state ── */
.agents-empty {
  color: #565f89;
  font-size: 13px;
  text-align: center;
  padding: 40px 20px;
}

/* ── Row wrapper — one per agent; receives the grid gap ── */
.agent-row {
  display: flex;
  flex-direction: column;
}

/* ── Agent card ── */
.agent-card {
  background: #12122a;
  border: 1px solid #1e1e3a;
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, border-radius 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-card:hover { border-color: #3a3a6a; background: #14142e; }
.agent-card.active { border-color: #7aa2f7; background: #13132e; }

/* When the detail panel is open inside the same row, flatten the connecting edges */
.agent-row .agent-detail-panel {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.agent-row .agent-card.active {
  border-bottom-color: #1e1e3a; /* subtle section divider */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.agent-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.agent-card-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.agent-card-icon-wrap.color-teal    { background: #0d2a2a; }
.agent-card-icon-wrap.color-purple  { background: #1e1030; }
.agent-card-icon-wrap.color-red     { background: #2a0d14; }
.agent-card-icon-wrap.color-blue    { background: #0d1a2a; }
.agent-card-icon-wrap.color-gray    { background: #1a1a2a; }

.agent-card-meta {
  flex: 1;
  min-width: 0;
}
.agent-card-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.agent-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #c0caf5;
}
.agent-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ece6a;
  flex-shrink: 0;
}
.agent-status-dot.inactive { background: #3a3a5a; }

.agent-card-model {
  font-size: 11px;
  color: #565f89;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.agent-card-badge-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.agent-card-desc {
  font-size: 12px;
  color: #7a8ab0;
  line-height: 1.5;
  padding-left: 56px;
}
.agent-card-url {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 56px;
  margin-top: 4px;
}
.agent-url-text {
  font-size: 11px;
  color: #565f89;
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
  user-select: all;
}
.agent-url-copy {
  background: none;
  border: 1px solid #2a2a4a;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  padding: 1px 5px;
  line-height: 1;
  color: #7a8ab0;
  transition: border-color 0.15s;
}
.agent-url-copy:hover {
  border-color: #5a6aaa;
}

.agent-card-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 56px;
  flex-wrap: wrap;
}
.agent-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #565f89;
  font-weight: 500;
}
.agent-stat-icon { font-size: 12px; opacity: 0.7; }
.agent-stat-time { margin-left: auto; }

/* ── Badges ── */
.agent-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.agent-badge.system  { background: #1a2a1a; color: #9ece6a; border: 1px solid #2a4a2a; }
.agent-badge.custom  { background: #1a1a3a; color: #7aa2f7; border: 1px solid #2a2a6a; }
.agent-badge.admin   { background: #2a1a1a; color: #f7768e; border: 1px solid #4a2a2a; }
.agent-badge.default { background: #1a2a2a; color: #7dcfff; border: 1px solid #2a4a4a; }

/* ── Inline card action buttons (Set Default / Delete) ── */
.agent-card-action-btn {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, background 0.15s;
}
.agent-card-action-btn.set-default-btn {
  background: #1a2a2a;
  color: #7dcfff;
  border: 1px solid #2a4a4a;
}
.agent-card-action-btn.set-default-btn:hover {
  background: #223a3a;
}
.agent-card-action-btn.delete-btn {
  background: #2a1a1a;
  color: #f7768e;
  border: 1px solid #4a2a2a;
}
.agent-card-action-btn.delete-btn:hover {
  background: #3a1a1a;
}

body.light-mode .agent-card-action-btn.set-default-btn { background: #e6f8ff; color: #2288aa; border-color: #b8e8f8; }
body.light-mode .agent-card-action-btn.delete-btn      { background: #fff0f0; color: #cc3333; border-color: #ffcccc; }

/* ── Per-row inline expand panel ── */
.agent-detail-panel {
  background: #0f0f22;
  border: 1px solid #7aa2f7;
  border-radius: 10px;
  overflow: hidden;
  animation: agents-expand 0.18s ease;
}

@keyframes agents-expand {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.agent-detail-content {
  display: flex;
  flex-direction: column;
  height: 520px;
  min-height: 0;
}


.agents-btn {
  background: #1a1a3a;
  border: 1px solid #2a2a4a;
  color: #c0caf5;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.agents-btn:hover { background: #2a2a5a; border-color: #7aa2f7; }
.agents-btn.primary { background: #1a2a4a; border-color: #7aa2f7; color: #7aa2f7; }
.agents-btn.primary:hover { background: #2a3a6a; }
.agents-btn.danger  { border-color: #f7768e; color: #f7768e; }
.agents-btn.danger:hover { background: #2a1a1a; }
.agents-btn.default-active { border-color: #7dcfff; color: #7dcfff; background: #1a2a2a; }

.agent-detail-tabs-wrap {
  position: relative;
  display: block;
  border-bottom: 1px solid #2a2a4a;
  flex-shrink: 0;
}
.agent-detail-tabs {
  display: flex;
  min-width: 0;
  padding: 0 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.agent-detail-tabs::-webkit-scrollbar { display: none; }
.agents-detail-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #565f89;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
}
.agents-detail-tab:hover { color: #c0caf5; }
.agents-detail-tab.active { color: #7aa2f7; border-bottom-color: #7aa2f7; }

.agent-detail-tabs-chev {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  border: none;
  color: #7aa2f7;
  cursor: pointer;
  font-size: 14px;
  width: 36px;
  padding: 0;
  font-family: inherit;
  z-index: 2;
}
.agent-detail-tabs-chev.left {
  left: 0;
  justify-content: flex-start;
  padding-left: 4px;
  background: linear-gradient(to right, #0f0f22 50%, rgba(15, 15, 34, 0) 100%);
}
.agent-detail-tabs-chev.right {
  right: 0;
  justify-content: flex-end;
  padding-right: 4px;
  background: linear-gradient(to left, #0f0f22 50%, rgba(15, 15, 34, 0) 100%);
}
.agent-detail-tabs-chev.visible { display: flex; }
.agent-detail-tabs-chev:hover { color: #c0caf5; }

body.light-mode .agent-detail-tabs-wrap { border-bottom-color: #ffdec4; }
body.light-mode .agent-detail-tabs-chev { color: #ff8c42; }
body.light-mode .agent-detail-tabs-chev:hover { color: #cc6a28; }
body.light-mode .agent-detail-tabs-chev.left {
  background: linear-gradient(to right, #fff7f0 55%, rgba(255, 247, 240, 0) 100%);
}
body.light-mode .agent-detail-tabs-chev.right {
  background: linear-gradient(to left, #fff7f0 55%, rgba(255, 247, 240, 0) 100%);
}

.agent-detail-body {
  flex: 1;
  min-height: 0; /* required for overflow-y: auto to work inside a flex child */
  overflow-y: auto;
  padding: 18px;
  scrollbar-width: thin;
  scrollbar-color: #2a2a4a transparent;
}
.agent-detail-body::-webkit-scrollbar { width: 5px; }
.agent-detail-body::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 3px; }

/* ── Config fields ── */
.agents-field-group { margin-bottom: 20px; }
.agents-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #7aa2f7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.agents-field-hint { font-size: 11px; color: #565f89; margin-bottom: 6px; }
.agents-textarea {
  width: 100%;
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 5px;
  color: #c0caf5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.agents-textarea:focus { outline: none; border-color: #7aa2f7; }
.agents-textarea[readonly] { opacity: 0.5; cursor: not-allowed; }
.agents-input {
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 5px;
  color: #c0caf5;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 12px;
  transition: border-color 0.15s;
}
.agents-input:focus { outline: none; border-color: #7aa2f7; }
.agents-input[type="number"] { width: 100px; }

.agents-save-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid #2a2a4a;
  flex-shrink: 0;
  background: #0f0f22;
}
.agents-save-msg { font-size: 12px; color: #9ece6a; }
.agents-save-msg.error { color: #f7768e; }

/* ── Per-agent LLM card ── */
.agents-llm-card {
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 4px;
}
.agents-llm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.agents-llm-title { font-size: 11px; font-weight: 600; color: #7aa2f7; text-transform: uppercase; letter-spacing: 0.05em; flex: 1; }
.agents-llm-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: #2a2a4a;
  color: #a9b1d6;
}
.agents-llm-badge.custom { background: rgba(122,162,247,0.15); color: #7aa2f7; }
.agents-llm-chevron { display: flex; align-items: center; color: #565f89; flex-shrink: 0; transition: transform 0.2s; }
.agents-llm-body { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.agents-llm-mode-row { display: flex; gap: 8px; flex-wrap: wrap; }
.agents-llm-mode-row label {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; padding: 5px 10px; border-radius: 6px;
  border: 1px solid #2a2a4a; background: transparent; transition: border-color 0.15s, background 0.15s;
}
.agents-llm-mode-row label.active { border-color: #7aa2f7; background: rgba(122,162,247,0.08); }
.agents-llm-fields { display: flex; flex-direction: column; gap: 8px; }
.agents-llm-field label { display: block; font-size: 11px; font-weight: 600; color: #7aa2f7; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.agents-llm-field .agents-llm-hint { font-size: 11px; color: #565f89; margin-top: 3px; }
.agents-llm-model-wrap { position: relative; }
.agents-llm-model-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: #1a1a2e; border: 1px solid #2a2a4a; border-top: none;
  border-radius: 0 0 6px 6px; max-height: 220px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.agents-llm-model-item { padding: 7px 10px; cursor: pointer; font-size: 12px; color: #c0caf5; }
.agents-llm-model-item:hover { background: rgba(125,207,255,0.08); }

/* ── Tools tab ── */
.agents-tools-list { display: flex; flex-direction: column; gap: 6px; }
.agents-tool-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 5px;
}
.agents-tool-name { font-size: 12px; font-weight: 600; color: #7aa2f7; min-width: 140px; flex-shrink: 0; }
.agents-tool-desc { font-size: 11px; color: #565f89; flex: 1; }
.agents-tool-badge { font-size: 10px; padding: 1px 6px; border-radius: 3px; flex-shrink: 0; }
.agents-tool-badge.destructive { background: #2a1a1a; color: #f7768e; border: 1px solid #4a2a2a; }
.agents-tool-badge.safe        { background: #1a2a1a; color: #9ece6a; border: 1px solid #2a4a2a; }

/* ── Tool categories (collapsible accordions) ── */
.agents-tool-category { margin-bottom: 8px; }
.agents-tool-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 5px;
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  user-select: none;
  transition: background 0.15s;
}
.agents-tool-category-header:hover { background: #1f1f3a; }
.agents-tool-category-chevron {
  font-size: 10px;
  color: #565f89;
  transition: transform 0.2s;
  display: inline-block;
  width: 12px;
  text-align: center;
}
.agents-tool-category-header.collapsed .agents-tool-category-chevron { transform: rotate(-90deg); }
.agents-tool-category-label { font-size: 13px; font-weight: 600; color: var(--fg-1); flex: 1; }
.agents-tool-category-count {
  font-size: 11px;
  color: #565f89;
  background: #1e1e3a;
  padding: 1px 7px;
  border-radius: 8px;
}
.agents-tool-category-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  padding-left: 4px;
}
.agents-tool-category-body.collapsed { display: none; }
.agents-tool-always-on {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #1e1e3a;
  color: #565f89;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Test tab ── */
.agents-test-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;   /* fill the scrollable body so the loop can take remaining space */
  min-height: 0;
}
.agents-test-input-row { display: flex; gap: 8px; flex-shrink: 0; }
.agents-test-input {
  flex: 1;
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 5px;
  color: #c0caf5;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
}
.agents-test-input:focus { outline: none; border-color: #7aa2f7; }
.agents-test-status { font-size: 11px; color: #565f89; min-height: 14px; flex-shrink: 0; }

/* Detail panels inserted as flex siblings above the loop */
.agents-test-area > .lv-tool-panel,
.agents-test-area > .lv-edit-panel {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  max-height: 320px;
  box-sizing: border-box;
  left: auto;
  top: auto;
  overflow-y: auto;
}

/* Loop diagram panel — scales to fit width, no horizontal scroll */
.agents-test-loop {
  flex: 1;
  min-height: 80px;
  position: relative;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 20px 20px;
  background: #0d0d1a;
  font-family: 'Fira Code', Menlo, monospace;
  font-size: 12px;
  scrollbar-width: thin;
  scrollbar-color: #2a2a4a transparent;
}

/* Back-to-blueprint button (inline in status line after a test run) */
.agents-blueprint-back-inline {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid #2a2a4a;
  color: #7dcfff;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  vertical-align: middle;
}
.agents-blueprint-back-inline:hover {
  background: #1e1e3a;
}

/* Light mode */
body.light-mode .agents-test-input              { background: #fffaf5; border-color: #ffdec4; color: #3d2c2e; }
body.light-mode .agents-test-input:focus        { border-color: #ff8c42; }
body.light-mode .agents-test-loop               { background: #f5f5f5; border-color: #ffdec4; }
body.light-mode .agents-blueprint-back-inline   { border-color: #ffdec4; color: #c06030; }
body.light-mode .agents-blueprint-back-inline:hover { background: #fff2e6; }
body.light-mode .agents-test-loop .lv-node         { background: #f0f0f8; border-color: #ccccdd; color: #888899; }
body.light-mode .agents-test-loop .lv-type-input   { background: #e8f5ff; border-color: #aaddff; color: #4499cc; }
body.light-mode .agents-test-loop .lv-type-output  { background: #eeffee; border-color: #aaddaa; color: #449944; }
body.light-mode .agents-test-loop .lv-type-llm     { background: #f5eeff; border-color: #cc99ff; color: #7744cc; }
body.light-mode .agents-test-loop .lv-type-guard   { background: #fff8ee; border-color: #ffcc88; color: #cc8844; }
body.light-mode .agents-test-loop .lv-node.lv-done { border-color: #44aa44 !important; background: #eeffee !important; color: #44aa44 !important; }
body.light-mode .agents-test-loop .lv-node.lv-active { border-color: #2288cc !important; background: #e0f0ff !important; color: #2288cc !important; }
body.light-mode .agents-test-loop .lv-node.lv-error  { border-color: #cc4455 !important; background: #ffeeee !important; color: #cc4455 !important; }

/* ── Create modal ── */
#agents-create-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
#agents-create-modal.hidden { display: none; }
#agents-create-box {
  background: #13132a;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  padding: 24px;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#agents-create-box h3 { font-size: 15px; font-weight: 700; color: #c0caf5; }
.agents-create-row { display: flex; flex-direction: column; gap: 5px; }
.agents-create-row label { font-size: 11px; color: #7aa2f7; font-weight: 600; text-transform: uppercase; }
#agents-create-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ── Light mode ── */
body.light-mode #tab-agents           { background: #fffaf5; }
body.light-mode #agents-toolbar       { border-bottom-color: #ffdec4; }
body.light-mode #agents-toolbar-title { color: #3d2c2e; }
body.light-mode #agents-toolbar-sub   { color: #d0b0a0; }
body.light-mode #btn-new-agent        { background: #ff8c42; color: #fff; }
body.light-mode #btn-new-agent:hover  { background: #e07030; }
body.light-mode .agent-card           { background: #fff7f0; border-color: #ffdec4; }
body.light-mode .agent-card:hover     { background: #fff2e6; border-color: #ffb880; }
body.light-mode .agent-card.active    { border-color: #ff8c42; }
body.light-mode .agent-row .agent-card.active { border-bottom-color: #ffdec4; }
body.light-mode .agent-detail-panel   { background: #fff7f0; border-color: #ff8c42; }
body.light-mode .agent-card-name      { color: #3d2c2e; }
body.light-mode .agent-card-model     { color: #b09080; }
body.light-mode .agent-card-desc      { color: #7a5a4a; }
body.light-mode .agent-url-text       { color: #9a8a7a; }
body.light-mode .agent-url-copy       { border-color: #d0c0b0; color: #7a5a4a; }
body.light-mode .agent-url-copy:hover { border-color: #a08060; }
body.light-mode .agent-stat           { color: #b09080; }
body.light-mode .agent-badge.system   { background: #f0fff0; color: #3a7a3a; border-color: #c0e0c0; }
body.light-mode .agent-badge.custom   { background: #fff2e6; color: #cc6a28; border-color: #ffdec4; }
body.light-mode .agent-badge.admin    { background: #fff0f0; color: #cc3333; border-color: #ffcccc; }
body.light-mode .agent-badge.default  { background: #e6f8ff; color: #2288aa; border-color: #b8e8f8; }

body.light-mode .agents-btn           { background: #fffaf5; border-color: #ffdec4; color: #3d2c2e; }
body.light-mode .agents-btn:hover     { background: #ffeee0; border-color: #ff8c42; }
body.light-mode .agents-btn.primary   { background: #fff2e6; border-color: #ff8c42; color: #cc6a28; }
body.light-mode .agents-btn.danger    { border-color: #cc3333; color: #cc3333; }
body.light-mode .agents-btn.default-active { border-color: #2288aa; color: #2288aa; background: #e6f8ff; }
body.light-mode .agent-detail-tabs    { border-bottom-color: #ffdec4; }
body.light-mode .agents-detail-tab    { color: #b09580; }
body.light-mode .agents-detail-tab.active { color: #ff8c42; border-bottom-color: #ff8c42; }
body.light-mode .agents-field-label   { color: #cc6a28; }
body.light-mode .agents-textarea      { background: #fffaf5; border-color: #ffdec4; color: #3d2c2e; }
body.light-mode .agents-textarea:focus { border-color: #ff8c42; }
body.light-mode .agents-input         { background: #fffaf5; border-color: #ffdec4; color: #3d2c2e; }
body.light-mode .agents-save-bar      { background: #fff2e6; border-top-color: #ffdec4; }
body.light-mode .agents-tool-item     { background: #fff2e6; border-color: #ffdec4; }
body.light-mode .agents-tool-name     { color: #cc6a28; }
body.light-mode .agents-tool-desc     { color: #7a5a4a; }
body.light-mode #agents-create-box    { background: #fff7f0; border-color: #ffdec4; }
body.light-mode #agents-create-box h3 { color: #3d2c2e; }
body.light-mode .agents-create-row label { color: #cc6a28; }

/* Icon wrap – pastel tints per color */
body.light-mode .agent-card-icon-wrap.color-teal   { background: #e0f5f0; }
body.light-mode .agent-card-icon-wrap.color-purple  { background: #f0e8f8; }
body.light-mode .agent-card-icon-wrap.color-red     { background: #fce8ec; }
body.light-mode .agent-card-icon-wrap.color-blue    { background: #e4eefb; }
body.light-mode .agent-card-icon-wrap.color-gray    { background: #f0ece8; }

/* Tool category accordion */
body.light-mode .agents-tool-category-header        { background: #fff2e6; border-color: #ffdec4; }
body.light-mode .agents-tool-category-header:hover   { background: #ffeee0; }
body.light-mode .agents-tool-category-chevron        { color: #b09580; }
body.light-mode .agents-tool-category-label          { color: #3d2c2e; }
body.light-mode .agents-tool-category-count          { background: #ffeee0; color: #7a5a4a; }
body.light-mode .agents-tool-always-on               { background: #ffeee0; color: #7a5a4a; }

/* Tool badges */
body.light-mode .agents-tool-badge.destructive { background: #fff0f0; color: #cc3333; border-color: #ffcccc; }
body.light-mode .agents-tool-badge.safe        { background: #f0fff0; color: #3a7a3a; border-color: #c0e0c0; }

/* LLM / Prompt Slots collapsible cards */
body.light-mode .agents-llm-card                    { background: #fff7f0; border-color: #ffdec4; }
body.light-mode .agents-llm-title                   { color: #cc6a28; }
body.light-mode .agents-llm-badge                   { background: #ffeee0; color: #7a5a4a; }
body.light-mode .agents-llm-badge.custom            { background: rgba(255,140,66,0.15); color: #cc6a28; }
body.light-mode .agents-llm-chevron                 { color: #b09580; }
body.light-mode .agents-llm-mode-row label          { border-color: #ffdec4; color: #3d2c2e; }
body.light-mode .agents-llm-mode-row label.active   { border-color: #ff8c42; background: rgba(255,140,66,0.08); }
body.light-mode .agents-llm-field label             { color: #cc6a28; }
body.light-mode .agents-llm-field .agents-llm-hint  { color: #b09580; }
body.light-mode .agents-llm-model-dropdown          { background: #fffaf5; border-color: #ffdec4; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
body.light-mode .agents-llm-model-item              { color: #3d2c2e; }
body.light-mode .agents-llm-model-item:hover        { background: #ffeee0; }

/* Prompt slot cards (inline styles use CSS vars — override the fallback colours) */
body.light-mode .agents-slot-card                   { background: #fffaf5 !important; border-color: #ffdec4 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   Interactive loop-diagram edit panel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Edit panel container ── */
.lv-edit-panel {
  position: absolute;
  background: #0d0d1f;
  border: 1px solid #2a2a5a;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  z-index: 120;
  display: flex;
  flex-direction: column;
  max-height: 480px;
  overflow: hidden;
}

.lv-edit-panel.lv-panel-overlay {
  inset: 0;
  width: auto;
  max-height: none;
  border-radius: 6px;
  z-index: 120;
  overflow-y: auto;
}

.lv-edit-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #1a3a2a;
  color: #9ece6a;
  border: 1px solid #2a5a3a;
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}

.lv-edit-body {
  padding: 10px 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lv-edit-body::-webkit-scrollbar { width: 4px; }
.lv-edit-body::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 2px; }

.lv-edit-desc {
  font-size: 11px;
  color: #565f89;
  line-height: 1.5;
  margin-bottom: 2px;
}

/* ── Save bar ── */
.lv-edit-save-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid #1e1e3a;
  flex-shrink: 0;
  background: #0a0a18;
}

.lv-edit-save-btn {
  background: #1a2a4a;
  border: 1px solid #7aa2f7;
  color: #7aa2f7;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  margin-left: auto;
  transition: background 0.15s;
}
.lv-edit-save-btn:hover:not(:disabled) { background: #2a3a6a; }
.lv-edit-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.lv-edit-save-msg {
  font-size: 11px;
  color: #565f89;
}
.lv-edit-save-msg.ok    { color: #9ece6a; }
.lv-edit-save-msg.error { color: #f7768e; }

/* ── Toggle rows ── */
.lv-edit-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 5px;
  background: #12122a;
  border: 1px solid #1e1e3a;
}
.lv-edit-toggle-row:hover { background: #14142e; }

.lv-edit-toggle-label {
  font-size: 11px;
  font-weight: 600;
  color: #c0caf5;
}

.lv-edit-toggle {
  min-width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #2a2a4a;
  border: 1px solid #3a3a6a;
  color: #565f89;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  padding: 0 6px;
}
.lv-edit-toggle[data-on="1"] {
  background: #1a3a2a;
  border-color: #9ece6a;
  color: #9ece6a;
}
.lv-edit-toggle.small {
  min-width: 30px;
  height: 18px;
  font-size: 8px;
}

/* ── Tool toggle rows ── */
.lv-edit-tool-row {
  padding: 6px 8px;
  border-radius: 5px;
  background: #12122a;
  border: 1px solid #1e1e3a;
}
.lv-edit-tool-row:hover { background: #14142e; }

.lv-edit-tool-left {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.lv-edit-tool-name {
  font-size: 11px;
  font-weight: 600;
  color: #7aa2f7;
  font-family: 'Fira Code', monospace;
}
.lv-edit-tool-badge {
  font-size: 10px;
}
.lv-edit-tool-desc {
  font-size: 10px;
  color: #565f89;
  line-height: 1.4;
  margin-top: 1px;
}

/* ── Category label ── */
.lv-edit-cat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3d59a1;
  padding: 4px 2px 2px;
  border-bottom: 1px solid #1e1e3a;
  margin-top: 4px;
}

/* ── Slider rows ── */
.lv-edit-slider-row {
  padding: 6px 8px;
  border-radius: 5px;
  background: #12122a;
  border: 1px solid #1e1e3a;
}
.lv-edit-slider-val {
  font-size: 11px;
  font-weight: 600;
  color: #7aa2f7;
  min-width: 36px;
  text-align: right;
}
.lv-edit-slider {
  width: 100%;
  accent-color: #7aa2f7;
  cursor: pointer;
}

/* ── Select rows ── */
.lv-edit-select-row {
  padding: 6px 8px;
  border-radius: 5px;
  background: #12122a;
  border: 1px solid #1e1e3a;
}
.lv-edit-select {
  width: 100%;
  background: #0d0d1f;
  border: 1px solid #2a2a5a;
  color: #c0caf5;
  font-size: 11px;
  font-family: 'Fira Code', monospace;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
}
.lv-edit-select:focus { outline: none; border-color: #7aa2f7; }

/* ── Prompt editor ── */
.lv-edit-prompt-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lv-edit-prompt-labelrow {
  display: flex;
  align-items: center;
  gap: 5px;
}
.lv-edit-prompt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a2a4a;
  border: 1px solid #3a3a6a;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.lv-edit-prompt-dot.filled {
  background: #9ece6a;
  border-color: #9ece6a;
}
.lv-edit-prompt-label {
  font-size: 11px;
  font-weight: 600;
  color: #c0caf5;
}
.lv-edit-prompt-hint {
  font-size: 10px;
  color: #3d59a1;
  margin-left: auto;
}
.lv-edit-textarea {
  width: 100%;
  background: #0a0a18;
  border: 1px solid #2a2a5a;
  color: #c0caf5;
  font-size: 11px;
  font-family: inherit;
  border-radius: 4px;
  padding: 5px 7px;
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
}
.lv-edit-textarea:focus {
  outline: none;
  border-color: #7aa2f7;
}
.lv-edit-textarea::placeholder { color: #2a2a4a; }

/* ── Light mode overrides ── */
body.light-mode .lv-edit-panel        { background: #fffdf8; border-color: #ffdec4; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
body.light-mode .lv-edit-badge        { background: #f0fff4; color: #22863a; border-color: #c3e6cb; }
body.light-mode .lv-edit-body         { /* inherits */ }
body.light-mode .lv-edit-desc         { color: #7a6a5a; }
body.light-mode .lv-edit-save-bar     { background: #fff7f0; border-top-color: #ffdec4; }
body.light-mode .lv-edit-save-btn     { background: #fff2e6; border-color: #ff8c42; color: #cc5500; }
body.light-mode .lv-edit-save-btn:hover:not(:disabled) { background: #ffdec4; }
body.light-mode .lv-edit-save-msg     { color: #9a8a7a; }
body.light-mode .lv-edit-save-msg.ok  { color: #22863a; }
body.light-mode .lv-edit-save-msg.error { color: #cb2431; }
body.light-mode .lv-edit-toggle-row   { background: #fff7f0; border-color: #ffdec4; }
body.light-mode .lv-edit-toggle-row:hover { background: #fff2e6; }
body.light-mode .lv-edit-toggle-label { color: #3d2c2e; }
body.light-mode .lv-edit-toggle       { background: #ffdec4; border-color: #ffbe9a; color: #9a7a6a; }
body.light-mode .lv-edit-toggle[data-on="1"] { background: #d4edda; border-color: #28a745; color: #22863a; }
body.light-mode .lv-edit-tool-row     { background: #fff7f0; border-color: #ffdec4; }
body.light-mode .lv-edit-tool-row:hover { background: #fff2e6; }
body.light-mode .lv-edit-tool-name    { color: #cc6a28; }
body.light-mode .lv-edit-tool-desc    { color: #7a5a4a; }
body.light-mode .lv-edit-cat-label    { color: #cc8844; border-bottom-color: #ffdec4; }
body.light-mode .lv-edit-slider-row   { background: #fff7f0; border-color: #ffdec4; }
body.light-mode .lv-edit-slider-val   { color: #cc6a28; }
body.light-mode .lv-edit-slider       { accent-color: #ff8c42; }
body.light-mode .lv-edit-select-row   { background: #fff7f0; border-color: #ffdec4; }
body.light-mode .lv-edit-select       { background: #fffaf5; border-color: #ffdec4; color: #3d2c2e; }
body.light-mode .lv-edit-prompt-row   { /* inherits */ }
body.light-mode .lv-edit-prompt-dot   { background: #ffdec4; border-color: #ffbe9a; }
body.light-mode .lv-edit-prompt-dot.filled { background: #28a745; border-color: #28a745; }
body.light-mode .lv-edit-prompt-label { color: #3d2c2e; }
body.light-mode .lv-edit-prompt-hint  { color: #cc8844; }
body.light-mode .lv-edit-textarea     { background: #fffaf5; border-color: #ffdec4; color: #3d2c2e; }
body.light-mode .lv-edit-textarea:focus { border-color: #ff8c42; }

/* ── Editable node cue (custom agents) ── */
.lv-node-editable {
  box-shadow: inset 0 0 0 1.5px rgba(122, 162, 247, 0.35);
}
.lv-node-editable::after {
  content: '✎';
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: 8px;
  color: rgba(122, 162, 247, 0.45);
  pointer-events: none;
}

/* ── Toggleable node cue (loop-gated nodes) ── */
.lv-node-toggleable::before {
  content: '⟳';
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 7px;
  color: rgba(173, 190, 80, 0.45);
  pointer-events: none;
}

/* ── Disabled loop node (loop_logic enabled=false) ── */
.lv-disabled {
  opacity: 0.38;
  filter: grayscale(0.6);
}
.lv-disabled .lv-node-label {
  text-decoration: line-through;
  text-decoration-color: rgba(247, 118, 142, 0.6);
}
body.light-mode .lv-disabled { opacity: 0.35; filter: grayscale(0.55); }

/* ── Gate node detail block (DB effect + takes-effect) ── */
.lv-gate-details {
  background: rgba(122, 162, 247, 0.05);
  border: 1px solid rgba(122, 162, 247, 0.11);
  border-radius: 5px;
  padding: 8px 10px;
  margin: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lv-gate-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.lv-gate-detail-label {
  font-size: 10px;
  font-weight: 600;
  color: #565f89;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 72px;
  padding-top: 2px;
  flex-shrink: 0;
}
.lv-gate-detail-val {
  font-size: 11px;
  color: #9aa5ce;
  line-height: 1.45;
  flex: 1;
}
.lv-gate-effect-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}
.lv-gate-effect-immediate {
  background: rgba(158, 206, 106, 0.12);
  color: #9ece6a;
  border: 1px solid rgba(158, 206, 106, 0.22);
}
body.light-mode .lv-gate-details {
  background: rgba(100, 130, 200, 0.04);
  border-color: rgba(100, 130, 200, 0.14);
}
body.light-mode .lv-gate-detail-label { color: #8090b0; }
body.light-mode .lv-gate-detail-val   { color: #5a6585; }
body.light-mode .lv-gate-effect-immediate {
  background: rgba(80, 140, 40, 0.1);
  color: #4a8a20;
  border-color: rgba(80, 140, 40, 0.2);
}

/* ── Cancel button ── */
.lv-edit-cancel-btn {
  background: transparent;
  border: 1px solid #3a3a6a;
  color: #565f89;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.lv-edit-cancel-btn:hover:not(:disabled) { border-color: #7aa2f7; color: #c0caf5; }
.lv-edit-cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Dirty-state save button ── */
.lv-edit-save-btn.dirty {
  background: #1e3a6a;
  border-color: #7aa2f7;
  color: #7aa2f7;
  box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.2);
}

/* Light mode overrides for new elements */
body.light-mode .lv-node-editable { box-shadow: inset 0 0 0 1.5px rgba(204, 106, 40, 0.4); }
body.light-mode .lv-node-editable::after { color: rgba(204, 106, 40, 0.5); }
body.light-mode .lv-edit-cancel-btn { border-color: #ffdec4; color: #9a7a6a; }
body.light-mode .lv-edit-cancel-btn:hover:not(:disabled) { border-color: #ff8c42; color: #3d2c2e; }
body.light-mode .lv-edit-save-btn.dirty { background: #fff2e6; border-color: #ff8c42; color: #cc5500; box-shadow: 0 0 0 2px rgba(255, 140, 66, 0.2); }

/* ── Connections Tab ────────────────────────────────────────────────────────── */

.conn-loading {
  font-size: 13px;
  color: #565f89;
  padding: 24px 0;
  text-align: center;
}

.conn-section {
  margin-bottom: 24px;
}

.conn-section-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.conn-section-header:hover .conn-section-label { color: #7aa2f7; }

.conn-section-chevron {
  font-size: 9px;
  color: #565f89;
  flex-shrink: 0;
  transition: color 0.15s;
}
.conn-section-header:hover .conn-section-chevron { color: #7aa2f7; }

.conn-section.collapsed .conn-grid { display: none; }

.conn-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #565f89;
  transition: color 0.15s;
}

.conn-section-hint {
  font-size: 11px;
  color: #3a3a5a;
}

.conn-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conn-card {
  background: #11112a;
  border: 1px solid #1e1e3a;
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.15s;
}

.conn-card.enabled {
  border-color: #2a3a5a;
}

.conn-card.coming-soon {
  opacity: 0.45;
  pointer-events: none;
}

.conn-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.conn-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.conn-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #c0caf5;
}

.conn-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}

.conn-badge.coming-soon {
  background: #1e1e3a;
  color: #565f89;
  border: 1px solid #2a2a4a;
}

/* Toggle switch */
.conn-toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.conn-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.conn-toggle-track {
  display: block;
  width: 36px;
  height: 20px;
  background: #1e1e3a;
  border-radius: 10px;
  border: 1px solid #2a2a4a;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}

.conn-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #565f89;
  border-radius: 50%;
  transition: left 0.2s, background 0.2s;
}

.conn-toggle:checked + .conn-toggle-track {
  background: #1e3a6a;
  border-color: #7aa2f7;
}

.conn-toggle:checked + .conn-toggle-track::after {
  left: 18px;
  background: #7aa2f7;
}

/* Clickable card header */
.conn-card-header-clickable {
  cursor: pointer;
}
.conn-card-header-clickable:hover .conn-name { color: #7aa2f7; }

/* Token / config fields — hidden until card expanded */
.conn-fields {
  display: none;
  margin-top: 10px;
  border-top: 1px solid #1e1e3a;
  padding-top: 10px;
}
.conn-card-expanded .conn-fields { display: block; }

.conn-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #565f89;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.conn-token-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.conn-token-input {
  flex: 1;
  font-family: monospace;
  font-size: 12px;
}

.conn-field-hint {
  display: block;
  font-size: 11px;
  color: #3a3a5a;
  margin-top: 5px;
}

.conn-save-msg {
  display: block;
  font-size: 12px;
  color: #9ece6a;
  margin-top: 6px;
  min-height: 16px;
}

.conn-save-msg.error {
  color: #f7768e;
}

/* Light mode */
body.light-mode .conn-card          { background: #f8f8ff; border-color: #d8d8f0; }
body.light-mode .conn-card.enabled  { border-color: #7aa2f7; }
body.light-mode .conn-section-label { color: #9a9ab8; }
body.light-mode .conn-section-hint  { color: #b8b8d8; }
body.light-mode .conn-name          { color: #1a1a3a; }
body.light-mode .conn-toggle-track  { background: #e8e8f8; border-color: #c8c8e8; }
body.light-mode .conn-toggle-track::after { background: #a8a8c8; }
body.light-mode .conn-toggle:checked + .conn-toggle-track { background: #ddeaff; border-color: #7aa2f7; }
body.light-mode .conn-toggle:checked + .conn-toggle-track::after { background: #4a7af7; }
body.light-mode .conn-fields        { border-color: #e0e0f0; }
body.light-mode .conn-field-label   { color: #8888a8; }
body.light-mode .conn-field-hint    { color: #a8a8c8; }
body.light-mode .conn-badge.coming-soon { background: #f0f0ff; color: #9898c0; border-color: #d8d8f0; }
body.light-mode .conn-save-msg      { color: #3a8a3a; }
body.light-mode .conn-save-msg.error { color: #cc3333; }

/* Google account info in connection card */
.conn-google-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-base, #0d0d1a);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 6px;
}
body.light-mode .conn-google-account { background: #faf7f4; border-color: #d4c4b4; }

/* ── Members tab ── */
.members-loading {
  font-size: 12px;
  color: #565f89;
  padding: 8px 12px;
}
.members-notice {
  font-size: 11px;
  color: #565f89;
  padding: 8px 12px;
  background: #1a1b26;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  margin-bottom: 14px;
  line-height: 1.5;
}
body.light-mode .members-notice {
  background: #faf7f4;
  border-color: #d4c4b4;
  color: #6b5a47;
}
.members-section { margin-bottom: 18px; }
.members-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.members-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #c0caf5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
body.light-mode .members-section-title { color: #2a1f17; }
.members-section-count {
  font-size: 10px;
  font-weight: 600;
  color: #565f89;
  background: #1a1b26;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  padding: 1px 7px;
}
body.light-mode .members-section-count {
  background: #faf7f4;
  border-color: #d4c4b4;
  color: #6b5a47;
}
.members-empty {
  font-size: 11px;
  color: #565f89;
  padding: 10px 12px;
  background: #1a1b26;
  border: 1px dashed #2a2a4a;
  border-radius: 6px;
}
body.light-mode .members-empty {
  background: #faf7f4;
  border-color: #d4c4b4;
}
.members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #1a1b26;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  overflow: hidden;
}
body.light-mode .members-table {
  background: #faf7f4;
  border-color: #d4c4b4;
}
.members-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #565f89;
  padding: 8px 10px;
  background: #14151f;
  border-bottom: 1px solid #2a2a4a;
}
body.light-mode .members-table thead th {
  background: #f0e8df;
  border-bottom-color: #d4c4b4;
  color: #6b5a47;
}
.members-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #2a2a4a;
  color: #c0caf5;
  vertical-align: top;
}
body.light-mode .members-table tbody td {
  border-bottom-color: #e6dccf;
  color: #2a1f17;
}
.members-table tbody tr:last-child td { border-bottom: none; }
.members-table th.members-num,
.members-table td.members-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.members-user-name {
  font-weight: 600;
  color: #c0caf5;
}
body.light-mode .members-user-name { color: #2a1f17; }
.members-user-sub {
  font-size: 10px;
  color: #565f89;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Access policy */
.members-policy {
  margin-bottom: 16px;
  padding: 12px;
  background: #1a1b26;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
}
body.light-mode .members-policy { background: #faf7f4; border-color: #d4c4b4; }
.members-policy-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #c0caf5;
  margin-bottom: 10px;
}
body.light-mode .members-policy-title { color: #2a1f17; }
.members-policy-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.members-policy-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  cursor: pointer;
  background: #14151f;
  transition: border-color 0.12s, background 0.12s;
}
body.light-mode .members-policy-opt {
  background: #f0e8df;
  border-color: #d4c4b4;
}
.members-policy-opt:hover { border-color: #7aa2f7; }
.members-policy-opt.active {
  border-color: #7aa2f7;
  background: rgba(122,162,247,0.08);
}
.members-policy-opt input[type="radio"] {
  margin-top: 2px;
  accent-color: #7aa2f7;
}
.members-policy-opt-body { flex: 1; }
.members-policy-opt-label {
  font-size: 12px;
  font-weight: 600;
  color: #c0caf5;
}
body.light-mode .members-policy-opt-label { color: #2a1f17; }
.members-policy-opt-hint {
  font-size: 11px;
  color: #565f89;
  margin-top: 2px;
  line-height: 1.4;
}

/* Member status + actions */
.members-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.members-status.ok {
  color: #9ece6a;
  background: rgba(158,206,106,0.12);
  border: 1px solid rgba(158,206,106,0.3);
}
.members-status.pending {
  color: #e0af68;
  background: rgba(224,175,104,0.12);
  border: 1px solid rgba(224,175,104,0.3);
}
.members-actions { text-align: right; }
.members-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.members-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.members-btn.authorize {
  color: #9ece6a;
  border-color: rgba(158,206,106,0.4);
}
.members-btn.authorize:hover { background: rgba(158,206,106,0.12); }
.members-btn.restrict {
  color: #f7768e;
  border-color: rgba(247,118,142,0.4);
}
.members-btn.restrict:hover { background: rgba(247,118,142,0.12); }


/* ── Automation tab ────────────────────────────────────────────────────── */
.agents-automation-textarea {
  background: var(--bg-elev);
  color: var(--fg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  resize: vertical;
}
.agents-automation-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-mid);
}
.agents-automation-tasks {
  width: 100%;
}
.agents-automation-row {
  transition: border-color 0.12s;
}
.agents-automation-row:hover {
  border-color: var(--border-strong);
}