/*
 * 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,
.deep-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),
.deep-chip:active,
.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: 21px;
}

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

@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);
}

@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);
	}
}

: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-face--send-ready.ssb-face--send-ready {
	border-color: transparent;
	background: var(--ssb-dome);
	box-shadow: var(--ssb-dome-shadow);
}

.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);
}

/* nothing to send: pressed into the page like the other disabled solid buttons (.btn-primary:disabled), not a grey dome */
.ssb-face--send-idle.ssb-face--send-idle {
	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);
}

.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) ---- */

/* "inline": a small round button in the input's own bottom row, at its right end (where it first was) */
html[data-send-button="inline"] .composer {
	margin-right: 0;
}

html[data-send-button="inline"] .composer .composer-send {
	position: relative;
	right: auto;
	bottom: auto;
	width: 32px;
	height: 32px;
}

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

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

html[data-send-button="inline"] .ssb-face--send-ready.ssb-face--send-ready {
	box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px 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.2), 1px 3px 6px rgb(var(--depth-ink) / 0.12);
}

/* "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="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);
}

/* bubbles turned off: the words stand on the page, nothing floats or frames them */
html:root[data-user-bubble="off"] .msg-bubble,
html:root[data-ai-bubble="off"] .msg-body {
	border: 0;
	box-shadow: none;
}