/* The settings pages: the menu on the left, cards of setting rows on the right. */

.settings {
	display: flex;
	height: 100dvh;
	background: var(--bg);
}

/* ---- the menu ---- */

.set-nav {
	flex: none;
	width: 260px;
	padding: 12px 10px 24px;
	overflow-y: auto;
	border-right: 1px solid var(--border);
	background: var(--sb-bg);
}

.set-nav-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}

.set-nav-title {
	margin: 0;
	font-size: calc(17px * var(--ui-scale));
	font-weight: 600;
	color: var(--text-strong);
}

.set-nav-group {
	margin-bottom: 14px;
}

.set-nav-group-title {
	padding: 4px 10px;
	font-size: calc(12px * var(--ui-scale));
	color: var(--faint);
}

.set-nav-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-radius: var(--radius);
	color: var(--text);
	font-weight: 400;
	text-decoration: none;
}

.set-nav-item:hover {
	background: var(--surface-2);
}

.set-nav-item.is-current {
	background: var(--surface-2);
	color: var(--text-strong);
	font-weight: 500;
}

/* the memory-full dot after "Memory" (components/memory-dot.js) */
.set-nav-item .mfd {
	width: 8px;
	height: 8px;
	margin-left: 6px;
	vertical-align: middle;
}

.set-nav-item .mfd-dot {
	top: 0;
	right: 0;
}

.set-nav-arrow {
	display: inline-flex;
	color: var(--faint);
}

.set-nav .set-nav-arrow {
	visibility: hidden;
}

/* ---- the section ---- */

.set-main {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
}

.set-main-head {
	display: none;
}

.set-content {
	max-width: 680px;
	margin: 0 auto;
	padding: 28px 20px 80px;
}

.set-title {
	margin: 0 0 16px;
	font-size: calc(20px * var(--ui-scale));
	font-weight: 600;
	color: var(--text-strong);
}

.set-intro {
	margin: -8px 0 16px;
}

.set-stack > * + * {
	margin-top: 16px;
}

.set-card,
.settings .card {
	margin-bottom: 16px;
	padding: 4px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.settings .card {
	padding: 16px;
}

.set-card.is-alert {
	border-color: color-mix(in srgb, var(--danger) 40%, transparent);
	background: var(--danger-bg);
}

.set-card-title {
	margin: 12px 0 0;
	font-size: calc(13px * var(--ui-scale));
	font-weight: 600;
	color: var(--muted);
}

.set-row {
	padding: 12px 0;
}

.set-row + .set-row {
	border-top: 1px solid var(--border);
}

/* a control too wide to leave the text room (three long options) goes down under it, on the right */
.set-row-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center; /* the switch, choice or button on the right level with the middle of the name and hint */
	justify-content: space-between;
	gap: 10px 16px;
}

.set-row-text {
	flex: 1 1 12em;
	min-width: 0;
}

.set-label {
	font-weight: 500;
	color: var(--text-strong);
}

.set-hint {
	margin: 2px 0 0;
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

.set-small {
	font-size: calc(11px * var(--ui-scale));
}

.set-warning {
	margin: 6px 0 0;
	font-size: calc(12px * var(--ui-scale));
	color: #b45309;
}

:root[data-theme="dark"] .set-warning {
	color: #fbbf24;
}

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

.set-control {
	flex: none;
	max-width: 100%;
	margin-left: auto;
}

.set-below {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

/* a segmented control under its row: as wide as its options, from the left (stacked when they do not fit) */
.set-below > .seg {
	align-self: flex-start;
	max-width: 100%;
}

.set-below > .seg--auto.seg--vertical {
	margin-left: 0;
}

.set-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.set-inline .input {
	flex: 1;
	min-width: 160px;
}

.set-select {
	width: auto;
	min-width: 140px;
	padding-right: 28px;
}

.set-select-wrap {
	position: relative;
	display: inline-flex;
}

.set-select-icon {
	position: absolute;
	top: 50%;
	left: 12px;
	display: flex;
	color: var(--muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.set-select.has-icon {
	padding-left: 36px;
}

.set-status {
	margin: 0 0 12px;
	padding: 6px 10px;
	border-radius: var(--radius);
	background: var(--ok-bg);
	color: var(--ok);
	font-size: calc(13px * var(--ui-scale));
}

.set-status.is-error {
	background: var(--danger-bg);
	color: var(--danger);
}

.set-code {
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--surface-2);
	font-family: var(--mono);
	font-size: calc(12px * var(--ui-scale));
}

.btn-danger-text {
	color: var(--danger);
}

.btn-sm {
	align-self: flex-start;
	padding: 4px 10px;
	font-size: calc(12px * var(--ui-scale));
}

.set-confirm {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

/* ---- "how it works" (components/help-tip.js): a fold on wide screens, a "?" with a floating box on phones ---- */

.help-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: calc(12px * var(--ui-scale));
	cursor: pointer;
}

.help-toggle:hover {
	color: var(--text-strong);
}

.help-fold.is-open .adv-chevron {
	transform: rotate(90deg);
}

/* 0fr ↔ 1fr slides the text open without measuring it */
.help-body {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 0.25s var(--ease),
		opacity 0.25s var(--ease);
}

.help-fold.is-open .help-body {
	grid-template-rows: 1fr;
	opacity: 1;
}

.help-inner {
	min-height: 0;
	overflow: hidden;
}

.help-inner p,
.help-pop-text p {
	margin: 6px 0 0;
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

.set-label:has(.help-q) {
	display: flex;
	align-items: center;
	gap: 6px;
}

.help-q {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top, var(--border));
	border-bottom-color: var(--edge-bottom, var(--border));
	border-radius: 50%;
	background: var(--face, none), var(--sb-btn-bg, var(--surface));
	color: var(--muted);
	box-shadow: var(--edge-light, none), var(--elev-1, none);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.help-q:active {
	box-shadow: var(--btn-pressed, none);
}

/* the box stands in for the button while it is open */
.help-q.is-away {
	visibility: hidden;
}

.help-veil {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgb(0 0 0 / 0.12);
	opacity: 0;
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
	transition: opacity 0.25s;
}

.help-veil.is-on {
	opacity: 1;
}

.help-pop {
	position: fixed;
	z-index: 71;
	padding: 12px 14px 14px;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top, var(--border));
	border-radius: 14px;
	background: var(--surface);
	box-shadow: var(--edge-light, none), var(--elev-3, var(--menu-shadow));
	transform-origin: 0 0;
}

.help-pop-title {
	font-size: calc(13px * var(--ui-scale));
	font-weight: 600;
	color: var(--text-strong);
}

.help-pop-text p:first-child {
	margin-top: 8px;
}

.help-q.help-q--always {
	display: inline-flex;
}

@media (max-width: 767px) {
	.help-q {
		display: inline-flex;
	}

	.help-fold {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.help-body,
	.help-veil {
		transition: none;
	}
}

/* ---- advanced (folded): advanced.js, styled by small-bits.css ---- */

.adv {
	margin-top: 8px;
	padding-left: 4px;
}

.set-advanced-body {
	padding-left: 0;
	margin-left: -4px;
}

/* ---- switch ---- */

.switch {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.switch-input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}

.switch-track {
	position: relative;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: var(--border-strong);
	transition: background 0.2s;
}

.switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
	transition: transform 0.2s var(--ease);
}

.switch-input:checked + .switch-track {
	background: var(--accent);
}

.switch-input:checked + .switch-track .switch-thumb {
	transform: translateX(16px);
	background: var(--accent-text);
}

.switch-input:focus-visible + .switch-track {
	outline: 2px solid var(--border-strong);
	outline-offset: 2px;
}

.switch-input:disabled + .switch-track {
	opacity: 0.4;
}

.switch:has(.switch-input:disabled) {
	cursor: default;
}

/* ---- display: accent swatches and the preview ---- */

.set-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.set-swatch {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 2px solid var(--surface);
	border-radius: 50%;
	background: var(--swatch);
	box-shadow: 0 0 0 1px var(--border);
	cursor: pointer;
}

.set-swatch.is-current {
	box-shadow: 0 0 0 2px var(--text-strong);
}

.set-preview {
	margin-bottom: 16px;
	padding: 16px 16px 0;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-lg);
	background: var(--chat-bg);
	pointer-events: none;
}

.set-preview .msg {
	margin-bottom: 16px;
}

/* ---- profile ---- */

.set-avatar-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
}

.set-avatar .user-avatar {
	font-size: calc(26px * var(--ui-scale)) !important;
}

.set-avatar-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.set-avatar-text .row {
	margin: 0;
}

/* ---- built-in tools: allowance bars ---- */

.set-quota + .set-quota {
	margin-top: 12px;
}

.set-quota-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: calc(13px * var(--ui-scale));
}

.set-bar {
	height: 6px;
	margin-top: 4px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--surface-2);
}

.set-bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--text-strong);
}

.set-bar.is-full span {
	background: var(--danger);
}

/* ---- models ---- */

.set-search {
	margin-bottom: 12px;
}

.set-model-list {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
}

.set-model {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	color: var(--text);
	font-weight: 400;
	text-decoration: none;
}

.set-model + .set-model {
	border-top: 1px solid var(--border);
}

.set-model:hover {
	background: var(--surface-2);
}

.set-model-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.set-model-name {
	font-weight: 500;
	color: var(--text-strong);
	overflow-wrap: anywhere; /* a long name without spaces still wraps */
}

.set-model-id {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: calc(12px * var(--ui-scale));
	color: var(--muted);
}

.set-model-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--text-strong);
}

.set-model-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.set-model-head > :first-child {
	flex: none;
}

/* a long name, even one without spaces, wraps inside the page */
.set-model-head > div {
	min-width: 0;
}

.set-model-head .set-title {
	margin: 0;
	overflow-wrap: anywhere;
}

.set-model-head .set-hint {
	word-break: break-all;
}

.set-prompt {
	min-height: 160px;
	font-family: var(--mono);
	font-size: calc(13px * var(--ui-scale));
	line-height: 1.5;
	resize: vertical;
}

/* ---- phones: the menu or a section, one at a time ---- */

@media (max-width: 767px) {
	.set-nav {
		width: 100%;
		border-right: 0;
		font-size: calc(16px * var(--ui-scale));
	}

	.set-nav .set-nav-arrow {
		visibility: visible;
	}

	.set-nav .set-nav-item.is-current {
		background: none;
		font-weight: 400;
	}

	.set-main {
		display: none;
	}

	.settings.has-section .set-nav {
		display: none;
	}

	.settings.has-section .set-main {
		display: block;
	}

	.set-main-head {
		display: block;
		position: sticky;
		top: 0;
		z-index: 2;
		padding: 10px 12px;
		border-bottom: 1px solid var(--border);
		background: var(--bg);
	}

	.set-back {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		color: var(--muted);
		font-weight: 400;
		text-decoration: none;
	}

	.set-content {
		padding: 20px 14px 60px;
	}

	.set-row-main {
		flex-wrap: wrap;
	}

	.set-seg {
		max-width: 100%;
	}
}

/* ---- the avatar animation picker (components/animation-picker.js) ---- */

.ap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

.set-row .ap-head {
	display: none;
}

.ap-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	padding: 6px 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface);
	cursor: pointer;
	font-size: calc(13px * var(--ui-scale));
}

.ap-toggle:hover {
	background: var(--surface-2);
}

.ap-toggle-avatar {
	display: flex;
}

.ap-toggle-action {
	color: var(--muted);
}

.ap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 8px;
}

.ap-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 4px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
	cursor: pointer;
}

.ap-cell:hover {
	background: var(--surface-2);
}

.ap-cell[aria-pressed="true"] {
	border-color: var(--text-strong);
	color: var(--text-strong);
}

/* room below the avatar for loaders that draw under it */
.ap-cell-avatar {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 40px;
	padding-top: 6px;
}

.ap-cell-name {
	text-align: center;
}

/* ---- the helpers' widgets in the settings pages ---- */

/* advanced.js: scaled text, and folded content out of the tab order (it is only faded and clipped otherwise) */
.adv-toggle {
	font-size: calc(13px * var(--ui-scale));
}

.adv:not(.is-open) .adv-body {
	visibility: hidden;
	transition:
		max-height 0.22s var(--ease),
		opacity 0.22s var(--ease),
		visibility 0s linear 0.22s;
}

/* prompt-editor.js */
.pe-layer {
	font-size: calc(13px * var(--ui-scale));
}

.set-vars {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.set-var {
	padding: 2px 8px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--surface);
	color: var(--text);
	font-family: var(--mono);
	font-size: calc(12px * var(--ui-scale));
	cursor: pointer;
}

.set-var:hover {
	background: var(--surface-2);
}

.set-nav-foot {
	display: block;
	margin: -4px 0 14px;
	padding: 4px 10px;
	color: var(--faint);
	font-size: calc(12px * var(--ui-scale));
	font-weight: 400;
	text-decoration: none;
}

.set-nav-foot:hover {
	color: var(--muted);
}

/* the admin's links (全局设置 › 品牌与外观) stacked right under 「许可」 */
.set-nav-foot:has(+ .set-nav-link) {
	margin-bottom: 0;
}

.set-nav-link {
	margin-top: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- wide screens: a section inside the chat frame, its menu in the sidebar ---- */

.settings-wide {
	flex: 1;
	min-width: 0;
	height: 100dvh;
	background: var(--chat-bg);
}

@media (max-width: 767px) {
	.settings-wide {
		flex-direction: column;
	}

	.settings-wide .set-main {
		flex: 1;
		min-height: 0;
	}
}

/* ---- a sub-item under a switch (e.g. the own search key under "Web search"): indented, folds open and shut ---- */

.set-sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.24s var(--ease), opacity 0.2s;
	opacity: 0;
}

.set-sub.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.set-sub-inner {
	min-height: 0;
	overflow: hidden;
}

.set-sub .set-row {
	margin: 10px 4px 4px; /* room for the input's focus ring inside the fold */
	padding: 2px 0 2px 14px;
	border-left: 2px solid var(--border);
}

.set-sub .set-row + .set-row {
	border-top: 0;
	margin-top: 4px;
}

/* "account avatar on computers": nothing to choose without your avatar on messages, or on a phone */
html[data-user-identity="off"] .set-row[data-setting="accountPlace"] {
	display: none;
}

@media (max-width: 767px) {
	.set-row[data-setting="accountPlace"] {
		display: none;
	}
}