/* Toolkits: the in-chat toolkit bubble and the /#toolkits library page.
   The server/tool switch list itself is styled by css/mcp.css (shared with the
   library editor), and the library page reuses the system-prompt library's
   layout classes from css/system-prompts.css. */

/* Landing state: the system-prompt and toolkit buttons sit side by side and
   wrap on narrow screens. */
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* --- in-chat bubble ------------------------------------------------------ */

.toolkit-pair { display: grid; }
/* The toolkit bubble is machinery, not conversation, so it carries the same
   accent tint as thinking and tool-call blocks (see .thinking in
   css/messages.css) instead of the plain message background. */
.toolkit-card {
  border-color: var(--accent-surface-line);
  background: var(--accent-surface);
}
.toolkit-avatar svg { width: 17px; height: 17px; }
.toolkit-card .toolkit-name { font-weight: 600; color: var(--text); }
.toolkit-card .toolkit-summary { color: var(--muted); }
/* A one-off toolkit reads as an override, so tint its name like an edit. */
.toolkit-card[data-toolkit-kind="custom"] .toolkit-name { color: var(--accent-on-surface); }


/* The bubble body is plain flow content: it grows with the server list and
   never scrolls internally. Long tool lists fold under their server instead
   (see .mcp-server.collapsed in css/mcp.css). */
.toolkit-card .message-body {
  display: none;
  white-space: normal;
}
.toolkit-card.expanded .message-body { display: grid; gap: 12px; }

/* A single centered control. Shared with the system-prompt bubble's
   "Change system prompt" button, which sits in the same slot. */
.toolkit-actions,
.system-prompt-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}
.toolkit-set-button,
.system-prompt-set-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
/* Hover moves the outline and the icon only; the label keeps its normal colour,
   matching .empty-system-prompt on the landing state. */
.toolkit-set-button:hover,
.system-prompt-set-button:hover { border-color: var(--accent); }
.toolkit-set-button svg,
.system-prompt-set-button svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted); }
.toolkit-set-button:hover svg,
.system-prompt-set-button:hover svg { color: var(--accent); }


.toolkit-servers { display: flex; flex-direction: column; gap: 12px; }
/* Tool descriptions inside the bubble stay one line shorter than in the modal
   so a big server list doesn't dominate the conversation. */
.toolkit-card .mcp-tool-desc { -webkit-line-clamp: 1; }

/* --- library page ------------------------------------------------------- */

.toolkits-page .toolkit-editor-hint {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.8125rem;
}
.toolkits-page .toolkit-default-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.8125rem;
}
.toolkits-page #toolkitNameInput:disabled { opacity: .6; cursor: not-allowed; }
/* "Default prompt" pairing row in the editor: summary on the left, a pill-shaped
   "Change prompt" button mirroring the prompt editor's "Change toolkit" row. */
.toolkit-default-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.toolkit-default-prompt-summary {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#toolkitDefaultPromptButton {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
#toolkitDefaultPromptButton:hover { border-color: var(--accent); }
/* The picker marks the toolkit the open chat is already using. */
.toolkit-result.active { border-color: var(--accent); }

#toolkitResults {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-content: start;
  gap: 12px;
}
#toolkitResults .search-empty { grid-column: 1 / -1; }