/* Settings pages for memory, group chats and MCP servers (pages/settings/{memory,group,mcp}.js, admin/{memory,group}.js). */

/* ---- memory ---- */

.mem-add {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 0;
}

.mem-add .mem-type {
	flex: none;
	width: auto;
}

.mem-add .mem-input {
	flex: 1 1 12em;
	min-width: 0;
}

.mem-tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mem-tools .mem-search {
	flex: 1;
	min-width: 0;
	border-radius: 999px;
}

.mem-rows {
	padding-top: 0;
}

.mem-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mem-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 0;
	border-top: 1px solid var(--border);
}

.mem-item:first-child {
	border-top: 0;
}

.mem-main {
	flex: 1;
	min-width: 0;
}

.mem-text {
	margin: 0;
	font-size: calc(13px * var(--ui-scale));
	color: var(--text-strong);
	overflow-wrap: anywhere;
}

.mem-text.is-pending {
	color: var(--muted);
}

.mem-meta {
	margin: 2px 0 0;
	font-size: calc(11px * var(--ui-scale));
	color: var(--muted);
}

.mem-empty {
	padding: 12px 0;
	font-size: calc(13px * var(--ui-scale));
	color: var(--muted);
}

.mem-exclude {
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
	padding-top: 2px;
	font-size: calc(11px * var(--ui-scale));
	color: var(--muted);
	white-space: nowrap;
}

.mem-delete {
	flex: none;
	color: var(--faint);
}

.mem-delete:hover {
	color: var(--danger);
}

.set-card.mem-pending {
	border-style: dashed;
	border-color: color-mix(in srgb, #d97706 55%, transparent);
	background: color-mix(in srgb, #f59e0b 6%, var(--surface));
}

.mem-pending .set-card-title {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mem-pending-hint {
	margin: 4px 0 6px;
}

.mem-pending .mem-item {
	border-top-color: color-mix(in srgb, #d97706 25%, transparent);
}

.mem-modes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.mem-mode {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: calc(13px * var(--ui-scale));
	color: var(--text);
}

.mem-mode input {
	margin-top: 3px;
}

.mem-mode-help {
	display: block;
	margin: 1px 0 0;
}

/* ---- group chats ---- */

.grp-prompt {
	width: 100%;
}

.grp-prompt-foot {
	justify-content: space-between;
	margin-top: 8px;
}

/* ---- admin: memory ---- */

.adm-mem-stats {
	margin: 0;
	padding-left: 1.2em;
	font-size: calc(13px * var(--ui-scale));
	line-height: 1.7;
}

.adm-mem-stats .set-hint {
	margin-left: 4px;
}

.adm-mem-pairs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.adm-mem-pair {
	display: flex;
	align-items: center;
	gap: 6px;
}

.adm-mem-pair .set-hint {
	margin: 0;
	white-space: nowrap;
}

/* ---- MCP servers ---- */

.mcp-summary {
	margin-bottom: 12px;
}

.mcp-spacer {
	flex: 1;
}

.mcp-server.is-busy {
	opacity: 0.65;
}

.mcp-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.mcp-url {
	font-family: var(--mono);
	overflow-wrap: anywhere;
}

.mcp-error {
	overflow-wrap: anywhere;
}

.mcp-state {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--muted);
	font-size: calc(11px * var(--ui-scale));
	font-weight: 500;
}

.mcp-state-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

.mcp-state.is-ok {
	background: var(--ok-bg);
	color: var(--ok);
}

.mcp-state.is-error {
	background: var(--danger-bg);
	color: var(--danger);
}

.mcp-state.is-warn {
	background: color-mix(in srgb, #f59e0b 14%, transparent);
	color: #b45309;
}

.mcp-actions {
	margin-top: 8px;
}

.mcp-tools {
	margin-top: 8px;
	font-size: calc(13px * var(--ui-scale));
}

.mcp-tools summary {
	color: var(--muted);
	cursor: pointer;
}

.mcp-tools ul {
	margin: 6px 0 0;
	padding-left: 1.2em;
	line-height: 1.7;
}

.mcp-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 14px 0;
}

.mcp-empty .set-label,
.mcp-empty .set-hint {
	margin: 0;
}

.mcp-tips {
	margin: 0;
	padding-left: 1.2em;
}

.mcp-tips li {
	margin: 2px 0;
}

.modal.mcp-dialog {
	width: min(560px, calc(100vw - 32px));
}

.mcp-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mcp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mcp-headers {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mcp-h-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mcp-h-row .input {
	flex: 1;
	min-width: 0;
}

.mcp-field > .btn {
	align-self: flex-start;
}

.mcp-examples {
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

.mcp-examples summary {
	cursor: pointer;
}

.mcp-examples ul {
	margin: 4px 0 0;
	padding-left: 1.2em;
}

.mcp-caution {
	padding: 10px 12px;
	border-radius: var(--radius);
	background: color-mix(in srgb, #f59e0b 12%, transparent);
	color: var(--text);
	font-size: calc(12px * var(--ui-scale));
	line-height: 1.5;
}

:root[data-theme="dark"] .mcp-state.is-warn {
	color: #fbbf24;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mcp-state.is-warn {
		color: #fbbf24;
	}
}