/*
 * Depth: one light from the top left, five heights, and edges that catch it.
 *
 *   height 0  the page
 *   height 1  cards resting on it: settings cards, message bubbles, small round buttons
 *   height 2  things that float a little: the sidebar cards, the composer, the account badge, buttons
 *   height 3  menus, pop-ups, toasts
 *   height 4  dialogs
 *
 * Every shadow is two layers: a tight contact shadow and a soft ambient one,
 * both falling a little to the bottom right. Raised things get a bright top
 * edge and a darker bottom edge; text fields are the other way round (sunken).
 * Buttons sink while pressed. Static shadows and gradients only: no blur
 * filters, no script, so it costs nothing while scrolling.
 *
 * Loaded last; removing this file brings back the flat look.
 */

:root {
	--depth-ink: 15 23 42; /* shadow color, as "r g b" */
	--elev-1: 0.5px 1px 2px rgb(var(--depth-ink) / 0.06), 1px 3px 8px rgb(var(--depth-ink) / 0.05);
	--elev-2: 0.5px 1px 2px rgb(var(--depth-ink) / 0.08), 2px 6px 16px rgb(var(--depth-ink) / 0.08);
	--elev-3: 1px 2px 4px rgb(var(--depth-ink) / 0.08), 4px 14px 32px rgb(var(--depth-ink) / 0.14);
	--elev-4: 1px 3px 6px rgb(var(--depth-ink) / 0.10), 8px 28px 64px rgb(var(--depth-ink) / 0.22);
	/* the lit top edge and the shaded bottom edge of something raised */
	--edge-light: inset 0 1px 0 rgb(255 255 255 / 0.9);
	--edge-dark: inset 0 -1px 0 rgb(var(--depth-ink) / 0.05);
	--edge-top: #eceef2; /* border colors: lighter on top, darker below */
	--edge-bottom: #d3d8df;
	/* a sunken field: shaded just inside its top edge */
	--sunken: inset 0.5px 1px 2px rgb(var(--depth-ink) / 0.07);
	/* raised button faces: a faint top-down sheen */
	--face: linear-gradient(to bottom, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 70%);
	--face-solid: linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 60%);
	--btn-solid-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0.5px 1px 2px rgb(var(--depth-ink) / 0.22), 1px 3px 8px rgb(var(--depth-ink) / 0.12);
	--btn-pressed: inset 0.5px 1px 3px rgb(var(--depth-ink) / 0.18);

	/* the older tokens, so everything still using them follows */
	--shadow: var(--edge-light), var(--elev-1);
	--sb-card-shadow: var(--edge-light), var(--edge-dark), var(--elev-2);
	--menu-shadow: var(--edge-light), var(--elev-3);
}

/* dark: black shadows barely show, so lean on the edges, and on higher things being a shade lighter */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--depth-ink: 0 0 0;
		--elev-1: 0.5px 1px 2px rgb(0 0 0 / 0.30), 1px 3px 8px rgb(0 0 0 / 0.22);
		--elev-2: 0.5px 1px 2px rgb(0 0 0 / 0.40), 2px 6px 16px rgb(0 0 0 / 0.32);
		--elev-3: 1px 2px 4px rgb(0 0 0 / 0.45), 4px 14px 32px rgb(0 0 0 / 0.50);
		--elev-4: 1px 3px 6px rgb(0 0 0 / 0.50), 8px 28px 64px rgb(0 0 0 / 0.60);
		--edge-light: inset 0 1px 0 rgb(255 255 255 / 0.045);
		--edge-dark: inset 0 -1px 0 rgb(0 0 0 / 0.25);
		--edge-top: #313c4d;
		--edge-bottom: #1c2533;
		--sunken: inset 0.5px 1px 3px rgb(0 0 0 / 0.35);
		--face: linear-gradient(to bottom, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 70%);
		--face-solid: linear-gradient(to bottom, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 60%);
		--btn-solid-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0.5px 1px 2px rgb(0 0 0 / 0.5), 1px 3px 8px rgb(0 0 0 / 0.35);
		--btn-pressed: inset 0.5px 1px 3px rgb(0 0 0 / 0.45);
		--sb-card-bg: #1a2434;
	}
}

:root[data-theme="dark"] {
	--depth-ink: 0 0 0;
	--elev-1: 0.5px 1px 2px rgb(0 0 0 / 0.30), 1px 3px 8px rgb(0 0 0 / 0.22);
	--elev-2: 0.5px 1px 2px rgb(0 0 0 / 0.40), 2px 6px 16px rgb(0 0 0 / 0.32);
	--elev-3: 1px 2px 4px rgb(0 0 0 / 0.45), 4px 14px 32px rgb(0 0 0 / 0.50);
	--elev-4: 1px 3px 6px rgb(0 0 0 / 0.50), 8px 28px 64px rgb(0 0 0 / 0.60);
	--edge-light: inset 0 1px 0 rgb(255 255 255 / 0.045);
	--edge-dark: inset 0 -1px 0 rgb(0 0 0 / 0.25);
	--edge-top: #313c4d;
	--edge-bottom: #1c2533;
	--sunken: inset 0.5px 1px 3px rgb(0 0 0 / 0.35);
	--face: linear-gradient(to bottom, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 70%);
	--face-solid: linear-gradient(to bottom, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 60%);
	--btn-solid-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0.5px 1px 2px rgb(0 0 0 / 0.5), 1px 3px 8px rgb(0 0 0 / 0.35);
	--btn-pressed: inset 0.5px 1px 3px rgb(0 0 0 / 0.45);
	--sb-card-bg: #1a2434;
}

/* ---- height 1: resting cards ---- */

.card {
	box-shadow: var(--edge-light), var(--elev-1);
}

.card:not(.is-alert),
.ask-card {
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	box-shadow: var(--edge-light), var(--elev-1);
}

.msg-bubble {
	box-shadow: var(--edge-light), var(--edge-dark), var(--elev-1);
}

.msg-body {
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	box-shadow: var(--edge-light), var(--elev-1);
}

/* ---- height 2: floating ---- */

.sb-card,
.acct-btn {
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
}

/* the composer is a well sunk into the page: shaded inside its top-left edges, a lit lip
   along the bottom; typing deepens the shade a little */
:root {
	--well-bg: #f3f4f6;
	--well-shadow: inset 1px 2px 5px rgb(var(--depth-ink) / 0.13), inset 0 -1px 0 rgb(255 255 255 / 0.9), 0 1px 0 rgb(255 255 255 / 0.9);
	--well-shadow-focus: inset 1.5px 3px 7px rgb(var(--depth-ink) / 0.18), inset 0 -1px 0 rgb(255 255 255 / 0.9), 0 1px 0 rgb(255 255 255 / 0.9);
	--well-top: #d3d8df;
	--well-bottom: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--well-bg: #0c111b;
		--well-shadow: inset 1px 2px 6px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.04), 0 1px 0 rgb(255 255 255 / 0.06);
		--well-shadow-focus: inset 1.5px 3px 9px rgb(0 0 0 / 0.75), inset 0 -1px 0 rgb(255 255 255 / 0.05), 0 1px 0 rgb(255 255 255 / 0.07);
		--well-top: #05080e;
		--well-bottom: #273244;
	}
}

:root[data-theme="dark"] {
	--well-bg: #0c111b;
	--well-shadow: inset 1px 2px 6px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.04), 0 1px 0 rgb(255 255 255 / 0.06);
	--well-shadow-focus: inset 1.5px 3px 9px rgb(0 0 0 / 0.75), inset 0 -1px 0 rgb(255 255 255 / 0.05), 0 1px 0 rgb(255 255 255 / 0.07);
	--well-top: #05080e;
	--well-bottom: #273244;
}

.composer,
.composer:focus-within {
	border-color: var(--well-top) var(--well-bottom) var(--well-bottom) var(--well-top);
	background: var(--well-bg);
	box-shadow: var(--well-shadow);
}

.composer:has(.composer-input:focus) {
	box-shadow: var(--well-shadow-focus);
}

@media (prefers-reduced-motion: no-preference) {
	.composer {
		transition:
			box-shadow 0.25s ease,
			border-color 0.15s;
	}
}

.auth-card {
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	box-shadow: var(--edge-light), var(--elev-3);
}

/* ---- height 3 and 4 ---- */

.menu,
.mention-pop,
.toast {
	box-shadow: var(--edge-light), var(--elev-3);
}

.modal {
	box-shadow: var(--edge-light), var(--elev-4);
}

/* ---- buttons: raised faces that sink while pressed ---- */

.btn-secondary,
.agent-chip,
.composer-plus,
.chat-top-btn,
.cs-round,
.cs-chip,
.cs-show,
.chat-to-bottom {
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	background-image: var(--face);
	box-shadow: var(--edge-light), var(--elev-1);
}

.btn-primary,
.btn-danger-solid {
	background-image: var(--face-solid);
	box-shadow: var(--btn-solid-shadow);
}

/* disabled solid buttons (Add, Create… with nothing filled in yet) keep their shape but not
   their lift: a flat slot pressed into the surface, lit from below, the word faded — a raised
   grey button still looked pressable */
.btn-primary:disabled,
.btn-primary:disabled:hover {
	opacity: 1;
	border-color: var(--well-top) var(--well-bottom) var(--well-bottom) var(--well-top);
	background: var(--well-bg);
	color: var(--faint);
	box-shadow: var(--well-shadow);
	cursor: not-allowed;
}

.ssb-face--send-ready {
	background-image: var(--face);
	box-shadow: var(--edge-light), var(--elev-2);
}

.btn:active:not(:disabled),
.agent-chip:active:not(:disabled),
.composer-plus:active:not(:disabled),
.chat-top-btn:active,
.acct-btn:active {
	box-shadow: var(--btn-pressed);
}

/* the phone's title: a raised pill like the buttons beside it */
.chat-top-title {
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	box-shadow: var(--edge-light), var(--edge-dark), var(--elev-1);
}

@media (prefers-reduced-motion: no-preference) {
	.btn,
	.acct-btn,
	.agent-chip,
	.composer-plus {
		transition:
			scale 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
			translate 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
			box-shadow 0.15s,
			background-color 0.15s,
			color 0.15s,
			border-color 0.15s;
	}

	.btn:active:not(:disabled),
	.agent-chip:active:not(:disabled),
	.composer-plus:active:not(:disabled),
	.acct-btn:active {
		translate: 0 1px;
		transition-duration: 80ms;
	}
}

/* ---- sunken: fields and tracks ---- */

.input {
	border-top-color: var(--border-strong);
	box-shadow: var(--sunken);
}

.input:focus {
	box-shadow: var(--sunken), 0 0 0 3px var(--focus-ring);
}

/* segmented controls: a groove a shade deeper than the card, and a raised thumb clearly lighter than it */
:root {
	--seg-groove: #e8eaee;
	--seg-thumb: #fff;
	--seg-text: #6b7280;
	--seg-text-on: var(--text-strong);
	--seg-groove-shadow: inset 0.5px 1.5px 3px rgb(var(--depth-ink) / 0.14), 0 1px 0 rgb(255 255 255 / 0.8);
	--seg-thumb-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgb(var(--depth-ink) / 0.10), 0.5px 1.5px 2px rgb(var(--depth-ink) / 0.20), 1px 3px 6px rgb(var(--depth-ink) / 0.10);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--seg-groove: #141b27;
		--seg-thumb: #4b5563;
		--seg-text: #a3acb9;
		--seg-text-on: #fff;
		--seg-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.55), 0 1px 0 rgb(255 255 255 / 0.05);
		--seg-thumb-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.2), 0.5px 1.5px 2px rgb(0 0 0 / 0.5), 1px 3px 6px rgb(0 0 0 / 0.35);
	}
}

:root[data-theme="dark"] {
	--seg-groove: #141b27;
	--seg-thumb: #4b5563;
	--seg-text: #a3acb9;
	--seg-text-on: #fff;
	--seg-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.55), 0 1px 0 rgb(255 255 255 / 0.05);
	--seg-thumb-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.2), 0.5px 1.5px 2px rgb(0 0 0 / 0.5), 1px 3px 6px rgb(0 0 0 / 0.35);
}

.seg {
	background: var(--seg-groove);
	box-shadow: var(--seg-groove-shadow);
}

/* doubled class: outranks the flat dark rule in components.css (:root[data-theme] .seg-thumb) */
.seg .seg-thumb.seg-thumb {
	background: var(--face), var(--seg-thumb);
	box-shadow: var(--seg-thumb-shadow);
}

.seg-option {
	color: var(--seg-text);
}

.seg-option.is-current {
	color: var(--seg-text-on);
}

/* switches: a deep groove, shaded inside its top edge, and a domed knob lit from the top left */
:root {
	--switch-groove: var(--border-strong);
	--switch-groove-on: var(--accent);
	--switch-groove-shade: rgb(0 0 0 / 0.06);
	--switch-groove-shade-on: rgb(0 0 0 / 0.35);
	--switch-groove-shadow: inset 0.5px 1.5px 3px rgb(var(--depth-ink) / 0.28), inset 0 -1px 0 rgb(255 255 255 / 0.35), 0 1px 0 rgb(255 255 255 / 0.8);
	--switch-knob: radial-gradient(circle at 35% 28%, #fff 0, #fff 30%, #eceef2 100%);
	--switch-knob-shadow:
		inset 0 1px 0 #fff,
		inset 0 -1px 1px rgb(var(--depth-ink) / 0.10),
		0 0 0 0.5px rgb(var(--depth-ink) / 0.14),
		0.5px 1.5px 2px rgb(var(--depth-ink) / 0.28),
		1.5px 3px 6px rgb(var(--depth-ink) / 0.14);
}

/* dark: the "on" groove is a shaded light grey rather than a white slab, and the knob stays a lit grey dome */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--switch-groove: #3a4556;
		--switch-groove-on: #cbd5e1;
		--switch-groove-shade: rgb(0 0 0 / 0.35);
		--switch-groove-shade-on: rgb(0 0 0 / 0.45);
		--switch-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.06), 0 1px 0 rgb(255 255 255 / 0.06);
		--switch-knob: radial-gradient(circle at 35% 28%, #f3f4f6 0, #d1d5db 45%, #9ca3af 100%);
		--switch-knob-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 -1px 1px rgb(0 0 0 / 0.25), 0.5px 1.5px 2px rgb(0 0 0 / 0.6), 1.5px 3px 6px rgb(0 0 0 / 0.45);
	}
}

:root[data-theme="dark"] {
	--switch-groove: #3a4556;
	--switch-groove-on: #cbd5e1;
	--switch-groove-shade: rgb(0 0 0 / 0.35);
	--switch-groove-shade-on: rgb(0 0 0 / 0.45);
	--switch-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.06), 0 1px 0 rgb(255 255 255 / 0.06);
	--switch-knob: radial-gradient(circle at 35% 28%, #f3f4f6 0, #d1d5db 45%, #9ca3af 100%);
	--switch-knob-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 -1px 1px rgb(0 0 0 / 0.25), 0.5px 1.5px 2px rgb(0 0 0 / 0.6), 1.5px 3px 6px rgb(0 0 0 / 0.45);
}

.switch-track {
	background: linear-gradient(to bottom, var(--switch-groove-shade), transparent 60%), var(--switch-groove);
	box-shadow: var(--switch-groove-shadow);
}

.switch-input:checked + .switch-track {
	background: linear-gradient(to bottom, var(--switch-groove-shade-on), transparent 70%), var(--switch-groove-on);
}

.switch-thumb,
.switch-input:checked + .switch-track .switch-thumb {
	background: var(--switch-knob);
	box-shadow: var(--switch-knob-shadow);
}

/* held down: the knob stretches a little towards where it will go */
.switch-input:active:not(:disabled) + .switch-track .switch-thumb {
	width: 19px;
}

.switch-input:checked:active:not(:disabled) + .switch-track .switch-thumb {
	transform: translateX(13px);
}

@media (prefers-reduced-motion: no-preference) {
	.switch-thumb {
		transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), width 0.15s;
	}
}

/* chips in the prompt well: a light shadow (the well clips anything wider) */
.cs-row .cs-chip {
	box-shadow: var(--edge-light), 0.5px 1px 2px rgb(var(--depth-ink) / 0.12);
}

/* the sidebar's bookmark */
html[data-sidebar-toggle="tab"] .sb-edge {
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	box-shadow: var(--edge-light), var(--elev-1);
}

/* dark: a lit rim round a whole answer reads as a white frame, so answers keep their own border and only float */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .msg-body {
		border-color: var(--bubble-ai-border);
		box-shadow: var(--elev-1);
	}
}

:root[data-theme="dark"] .msg-body {
	border-color: var(--bubble-ai-border);
	box-shadow: var(--elev-1);
}

/* a pressed button in the sidebar: sunk into its card */
.sb-page.is-pressed,
.sb-new.is-pressed {
	box-shadow: var(--btn-pressed);
}

.ssb:active:not(:disabled) .ssb-face--send-ready,
.ssb.is-key-down .ssb-face--send-ready {
	box-shadow: var(--btn-pressed);
}

/* ---- the sidebar's buttons (new chat / group / workspace; models / settings / global settings):
        each its own raised bar on its card, sunk while pressed or while its card is open ---- */
:root {
	--sb-btn-bg: #fff;
	--sb-btn-hover: #f6f7f9;
	--sb-btn-sunk: #eceef2;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--sb-btn-bg: #243045;
		--sb-btn-hover: #2a374e;
		--sb-btn-sunk: #121a26;
	}
}

:root[data-theme="dark"] {
	--sb-btn-bg: #243045;
	--sb-btn-hover: #2a374e;
	--sb-btn-sunk: #121a26;
}

.sb-actions,
.sb-pages {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sb-actions {
	padding: 4px 10px 4px;
}

.sb-pages {
	padding: 10px;
}

.sb-actions .sb-new,
.sb-pages .sb-page,
.sb-new-ghost {
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	background: var(--face), var(--sb-btn-bg);
	box-shadow: var(--edge-light), var(--edge-dark), var(--elev-1);
}

.sb-actions .sb-new:hover,
.sb-pages .sb-page:hover {
	background: var(--face), var(--sb-btn-hover);
}

.sb-actions .sb-new:active,
.sb-pages .sb-page:active,
.sb-actions .sb-new.is-pressed,
.sb-pages .sb-page.is-pressed {
	border-top-color: var(--edge-bottom);
	border-bottom-color: var(--edge-top);
	background: var(--sb-btn-sunk);
	box-shadow: var(--btn-pressed);
}

@media (prefers-reduced-motion: no-preference) {
	.sb-actions .sb-new,
	.sb-pages .sb-page {
		transition:
			translate 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
			box-shadow 0.15s,
			background-color 0.15s,
			border-color 0.15s;
	}

	.sb-actions .sb-new:active,
	.sb-pages .sb-page:active {
		translate: 0 1px;
		transition-duration: 80ms;
	}
}

/* ---- the reasoning bar's tubes: each seen through glass ----
   A soft streak of light along the top, the tube's curve darkening towards the bottom,
   a faint light bounced up from below, and a thin glass rim. One static layer over the
   moving pattern. The manual tube has a narrow slot along its middle that the slider
   comes up through from below. */
.rc-face::before,
.rc-face::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

/* the streak, rounded at both ends like the tube */
.rc-face::before {
	top: 2px;
	right: 9px;
	left: 9px;
	z-index: 1;
	height: 36%;
	border-radius: 999px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.08));
}

.rc-face::after {
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.04) 45%, rgb(0 0 0 / 0.1) 75%, rgb(0 0 0 / 0.2) 90%, rgb(255 255 255 / 0.14));
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 0.22),
		inset 0 2px 1px -1px rgb(255 255 255 / 0.45),
		inset 0 -2px 3px rgb(0 0 0 / 0.25),
		inset 6px 0 6px -4px rgb(0 0 0 / 0.18),
		inset -6px 0 6px -4px rgb(0 0 0 / 0.18);
}

/* manual: one whole tube; a narrow slot runs along its middle for the slider's stem */
.rc-track::after {
	z-index: 0;
}

.rc-track .rc-grid::before {
	content: "";
	position: absolute;
	top: calc(50% - 2px);
	right: 8px;
	left: 8px;
	height: 4px;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.35);
	box-shadow: inset 0 1px 1.5px rgb(0 0 0 / 0.5), 0 1px 0 rgb(255 255 255 / 0.18);
}

/* the stops and the slider sit above the glass */
.rc-track .rc-grid {
	z-index: 2;
}

/* ---- the send button: a big dome outside the composer, on its right; level with
        the composer's middle while it is one line, then staying at its bottom ---- */
.composer {
	position: relative;
	--send-size: 84px; /* a little under the one-line composer (88.5px): the dome's shadow makes it look bigger */
	--send-gap: 12px;
	margin-right: calc(var(--send-size) + var(--send-gap));
}

.composer .composer-send {
	position: absolute;
	right: calc(-1px - var(--send-gap) - var(--send-size));
	bottom: calc((88.5px - var(--send-size)) / 2 - 1px); /* 88.5px: the composer with one line */
	width: var(--send-size);
	height: var(--send-size);
}

@media (max-width: 767px) {
	.composer {
		--send-size: 85px;
		--send-gap: 10px;
	}

	.composer .composer-send {
		bottom: calc((90px - var(--send-size)) / 2 - 1px);
	}
}

.composer-send .ssb-icon {
	width: 40%;
	height: 40%;
}

.composer-send .ssb-face--stop .ssb-icon {
	width: 32%;
	height: 32%;
}

/* lit from the top left: bright cap, shaded underside, a rim of light round the bottom */
:root {
	--ssb-dome: radial-gradient(circle at 34% 26%, #fff 0, #fff 28%, #eef0f3 62%, #d6dae1 100%);
	--ssb-dome-shadow:
		inset 0 1px 0 #fff,
		inset 0 -3px 5px rgb(var(--depth-ink) / 0.10),
		0 0 0 0.5px rgb(var(--depth-ink) / 0.12),
		1px 2px 3px rgb(var(--depth-ink) / 0.18),
		3px 8px 16px rgb(var(--depth-ink) / 0.12);
	--ssb-dome-idle: radial-gradient(circle at 34% 26%, #f3f4f6 0, #e5e7eb 55%, #d1d5db 100%);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ssb-dome: radial-gradient(circle at 34% 26%, #fff 0, #f3f4f6 22%, #c9ced6 62%, #8b939f 100%);
		--ssb-dome-shadow:
			inset 0 1.5px 0 rgb(255 255 255 / 0.9),
			inset 0 -4px 6px rgb(0 0 0 / 0.35),
			inset 0 -1px 0 rgb(255 255 255 / 0.25),
			1px 2px 3px rgb(0 0 0 / 0.6),
			3px 8px 18px rgb(0 0 0 / 0.5);
		--ssb-dome-idle: radial-gradient(circle at 34% 26%, #5b6372 0, #464d5a 55%, #343a45 100%);
	}
}

:root[data-theme="dark"] {
	--ssb-dome: radial-gradient(circle at 34% 26%, #fff 0, #f3f4f6 22%, #c9ced6 62%, #8b939f 100%);
	--ssb-dome-shadow:
		inset 0 1.5px 0 rgb(255 255 255 / 0.9),
		inset 0 -4px 6px rgb(0 0 0 / 0.35),
		inset 0 -1px 0 rgb(255 255 255 / 0.25),
		1px 2px 3px rgb(0 0 0 / 0.6),
		3px 8px 18px rgb(0 0 0 / 0.5);
	--ssb-dome-idle: radial-gradient(circle at 34% 26%, #5b6372 0, #464d5a 55%, #343a45 100%);
}

.ssb-face--send-ready.ssb-face--send-ready {
	border-color: transparent;
	background: var(--ssb-dome);
	box-shadow: var(--ssb-dome-shadow);
}

.ssb-face--send-idle {
	background-image: var(--ssb-dome-idle);
}

.ssb-face--send-idle,
.ssb-face--stop {
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset 0 -2px 4px rgb(var(--depth-ink) / 0.15), var(--elev-1);
}

.ssb:active:not(:disabled) .ssb-face--send-ready.ssb-face--send-ready,
.ssb.is-key-down .ssb-face--send-ready.ssb-face--send-ready {
	box-shadow: inset 0 2px 5px rgb(var(--depth-ink) / 0.35), 0 0 0 0.5px rgb(var(--depth-ink) / 0.2);
}

/* ---- dark: the solid buttons (Save, Create, Upload…) were a flat white slab; now a lit
        light-grey bar like the switches' knobs: bright top, shaded towards the bottom ---- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .btn-primary:not(:disabled) {
		background: linear-gradient(to bottom, #fafbfc 0, #e4e7eb 45%, #c2c8d1 100%);
		box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgb(0 0 0 / 0.18), 0.5px 1.5px 2px rgb(0 0 0 / 0.6), 2px 5px 12px rgb(0 0 0 / 0.4);
	}

	:root:not([data-theme="light"]) .btn-primary:hover:not(:disabled) {
		background: linear-gradient(to bottom, #fff 0, #eceef1 45%, #cdd2d9 100%);
	}

	:root:not([data-theme="light"]) .btn-primary:active:not(:disabled) {
		background: linear-gradient(to bottom, #c9ced6, #dfe2e7);
		box-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.4);
	}
}

:root[data-theme="dark"] .btn-primary:not(:disabled) {
	background: linear-gradient(to bottom, #fafbfc 0, #e4e7eb 45%, #c2c8d1 100%);
	box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgb(0 0 0 / 0.18), 0.5px 1.5px 2px rgb(0 0 0 / 0.6), 2px 5px 12px rgb(0 0 0 / 0.4);
}

:root[data-theme="dark"] .btn-primary:hover:not(:disabled) {
	background: linear-gradient(to bottom, #fff 0, #eceef1 45%, #cdd2d9 100%);
}

:root[data-theme="dark"] .btn-primary:active:not(:disabled) {
	background: linear-gradient(to bottom, #c9ced6, #dfe2e7);
	box-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.4);
}

/* the round corner buttons while the sidebar is collapsed: the same raised face as the
   sidebar's buttons they stand in for (and that the "New chat" bar changes into) */
.sb-corner,
html.sb-collapsed .sb-expand,
.sb-expand.sb-btn-ghost {
	border-color: var(--border);
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	background: var(--face), var(--sb-btn-bg);
	box-shadow: var(--edge-light), var(--edge-dark), var(--elev-1);
}

.sb-corner:hover,
html.sb-collapsed .sb-expand:hover {
	background: var(--face), var(--sb-btn-hover);
}

.sb-corner:active,
html.sb-collapsed .sb-expand:active {
	border-top-color: var(--edge-bottom);
	border-bottom-color: var(--edge-top);
	background: var(--sb-btn-sunk);
	box-shadow: var(--btn-pressed);
}

/* ---- the outlined buttons (Random password, Reset password, Delete…): the same raised
        bars as the sidebar's buttons, and sunk the same way while pressed ---- */
.btn-secondary,
.btn-danger {
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	background: var(--face), var(--sb-btn-bg);
	box-shadow: var(--edge-light), var(--edge-dark), var(--elev-1);
}

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

.btn-secondary:hover:not(:disabled) {
	background: var(--face), var(--sb-btn-hover);
}

.btn-danger:hover:not(:disabled) {
	background: var(--face), var(--danger-bg);
}

.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled) {
	border-top-color: var(--edge-bottom);
	border-bottom-color: var(--edge-top);
	background: var(--sb-btn-sunk);
	box-shadow: var(--btn-pressed);
}

.btn-danger:active:not(:disabled) {
	border-color: var(--danger);
}

.btn-secondary:disabled,
.btn-danger:disabled {
	box-shadow: var(--edge-light);
}

/* ---- the send button, two more looks (setting sendButton; "dome" is the one above) ---- */

/* "notch": the dome sitting in a round hollow at the right end of the input. The hollow is as
   tall as the one-line input and centred where its rounded end was (24 px in), so its edge
   runs on smoothly from the input's top and bottom edges and no corner of the input is left
   sticking out round it. The well is drawn by ::before so the cut (a mask) does not cut the
   button inside it too; the hollow is a deeper round well of its own round the button */
html[data-send-button="notch"] .composer {
	--one-line: 88.5px;
	--cup: calc(var(--one-line) / 2); /* the hollow's radius */
	--cup-in: 24px; /* its middle, in from the input's right edge: the input's corner radius */
	--send-size: calc(var(--one-line) - 14px);
	isolation: isolate;
	margin-right: calc(var(--cup) - var(--cup-in) + 6px);
	padding-right: calc(var(--cup-in) + var(--cup) + 4px);
	border-color: transparent;
	background: none;
	box-shadow: none;
}

html[data-send-button="notch"] .composer:has(.composer-input:focus) {
	box-shadow: none;
}

html[data-send-button="notch"] .composer::before,
html[data-send-button="notch"] .composer-send::before {
	position: absolute;
	z-index: -1;
	border: 1px solid;
	border-color: var(--well-top) var(--well-bottom) var(--well-bottom) var(--well-top);
	background: var(--well-bg);
	box-shadow: var(--well-shadow);
	content: "";
	pointer-events: none;
}

html[data-send-button="notch"] .composer::before {
	inset: -1px;
	border-radius: inherit;
	mask: radial-gradient(circle var(--cup) at right var(--cup-in) bottom calc(var(--one-line) / 2), transparent calc(var(--cup) - 0.5px), #000 var(--cup));
}

html[data-send-button="notch"] .composer:has(.composer-input:focus)::before {
	box-shadow: var(--well-shadow-focus);
}

html[data-send-button="notch"] .composer .composer-send {
	right: calc(var(--cup-in) - 1px - var(--send-size) / 2);
	bottom: calc(var(--one-line) / 2 - 1px - var(--send-size) / 2);
}

html[data-send-button="notch"] .composer-send::before {
	inset: calc(var(--send-size) / 2 - var(--cup));
	border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
	html[data-send-button="notch"] .composer::before {
		transition: box-shadow 0.25s ease;
	}
}

/* "capsule": a raised bar as tall as the input, just right of it, its corners the input's */
html[data-send-button="capsule"] .composer {
	--send-w: 64px;
	--send-gap: 6px;
	margin-right: calc(var(--send-w) + var(--send-gap));
}

html[data-send-button="capsule"] .composer .composer-send {
	top: -1px;
	right: calc(-1px - var(--send-gap) - var(--send-w));
	bottom: -1px;
	width: var(--send-w);
	height: auto;
}

html[data-send-button="capsule"] .composer-send :is(.ssb, .ssb-face, .ssb-ripple) {
	border-radius: 24px;
}

html[data-send-button="capsule"] .composer-send .ssb-icon {
	width: 26px;
	height: 26px;
}

html[data-send-button="capsule"] .composer-send .ssb-face--stop .ssb-icon {
	width: 20px;
	height: 20px;
}

@media (max-width: 767px) {
	html[data-send-button="notch"] .composer {
		--one-line: 90px;
	}

	html[data-send-button="capsule"] .composer {
		--send-gap: 6px;
	}
}

/* the proxy's red bar (admin › deploy): a tile raised a little off its card */
.adm-proxy-alert {
	border-top-color: color-mix(in srgb, var(--danger) 22%, transparent);
	box-shadow: var(--edge-light), var(--edge-dark), var(--elev-1);
}

.adm-proxy-dot {
	box-shadow: inset 0 -1px 1px rgb(var(--depth-ink) / 0.25), inset 0 1px 1px rgb(255 255 255 / 0.45);
}