/*
 * Motion (stage 11), after the old app's own effects:
 *   press feedback: round buttons sink a little while held and spring back;
 *     flat rows turn a deeper gray while held (phones have no hover, so this is what they see);
 *   hairlines between the settings menu's rows, hidden beside a filled row;
 *   view transitions: a light/dark switch crossfades over 320 ms (.vt-theme);
 *     moving between chats and group chats pulls the page area out to the
 *     right and slides the new one in (.vt-page); the sidebar does not move;
 *   the sidebar's buttons and their round stand-ins while it is collapsed.
 * Everything here stops for prefers-reduced-motion.
 */

:root {
	--press-bg: color-mix(in srgb, var(--text) 13%, transparent);
}

/* ---- press feedback ---- */

.icon-btn,
.btn,
.acct-btn,
.agent-chip,
.sb-corner {
	transition:
		scale 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
		background-color 0.15s,
		color 0.15s,
		border-color 0.15s;
}

.icon-btn:active:not(:disabled),
.btn:active:not(:disabled),
.acct-btn:active,
.agent-chip:active:not(:disabled),
.sb-corner:active {
	scale: 0.95;
	transition-duration: 80ms;
}

.sb-new:active,
.sb-page:active,
.sb-item-link:active,
.sb-flip:active,
.set-nav-item:active,
.menu-item:active:not(:disabled) {
	background-color: var(--press-bg);
}

/* ---- hairlines in the settings menu ---- */

.set-nav-item {
	position: relative;
}

.set-nav-item + .set-nav-item::before {
	position: absolute;
	top: -0.5px;
	right: 10px;
	left: 10px;
	height: 1px;
	background: color-mix(in srgb, var(--border) 75%, transparent);
	content: "";
	pointer-events: none;
	transition: opacity 0.15s;
}

.set-nav-item:hover::before,
.set-nav-item:hover + .set-nav-item::before,
.set-nav-item.is-current::before,
.set-nav-item.is-current + .set-nav-item::before {
	opacity: 0;
}

/* ---- view transitions ---- */

html.vt-theme::view-transition-group(*),
html.vt-theme::view-transition-old(*),
html.vt-theme::view-transition-new(*) {
	animation-duration: 320ms;
	animation-timing-function: ease;
}

html.vt-page::view-transition-old(root),
html.vt-page::view-transition-new(root),
html.vt-page::view-transition-group(page-area) {
	animation: none;
}

html.vt-page::view-transition-old(page-area) {
	animation: vt-pull-out 170ms cubic-bezier(0.4, 0, 1, 1) both;
}

html.vt-page::view-transition-new(page-area) {
	animation: vt-slide-in 260ms cubic-bezier(0, 0, 0.2, 1) 140ms both;
}

@keyframes vt-pull-out {
	to {
		opacity: 0;
		transform: translateX(48px);
	}
}

@keyframes vt-slide-in {
	from {
		opacity: 0;
		transform: translateX(48px);
	}
}

/* named only while a switch runs: a view-transition-name makes a stacking
   context, which would otherwise keep the page's dialogs under the corner buttons */
html.vt-page .shell-main {
	view-transition-name: page-area;
}

/* ---- the sidebar's round stand-ins ---- */

.sb-corner {
	position: fixed;
	top: 10px;
	z-index: 5;
	display: none;
	background: var(--chat-bg);
}

/* round, like the account badge in the other corner */
.sb-corner,
html.sb-collapsed .sb-expand,
.sb-expand.sb-btn-ghost {
	width: 36px;
	height: 36px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--sb-card-bg);
	box-shadow: var(--sb-card-shadow);
}

.sb-corner-new {
	left: 10px;
}

/* the round expand button, when that is the way back, stands right under it */
html.sb-collapsed .sb-expand,
.sb-expand.is-flying {
	top: 56px;
}

@media (min-width: 768px) {
	html.sb-collapsed .sb-corner,
	.sb-corner.is-flying,
	.sb-expand.is-flying {
		display: inline-flex;
	}
}

/* crossing the drawer width: the old button flying to its new place (sidebar.js crossWidth) */
.sb-bp-ghost {
	position: fixed;
	z-index: 6;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0;
	pointer-events: none;
}

.sb-bp-ghost.chat-top-btn {
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--sb-card-bg);
	color: var(--text);
}

/* collapsing and expanding: the stand-ins of the collapse button and the round expand button (sidebar.js morphButton) */
.sb-btn-ghost {
	position: fixed;
	z-index: 6;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0;
	pointer-events: none;
}

.sb-collapse.sb-btn-ghost {
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--sb-card-bg);
}

/* while a button flies, its twin in the sidebar waits out of sight */
.sb-hide-while-flying {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.icon-btn,
	.btn,
	.acct-btn,
	.agent-chip,
	.sb-corner {
		transition: none;
	}

	.icon-btn:active:not(:disabled),
	.btn:active:not(:disabled),
	.acct-btn:active,
	.agent-chip:active:not(:disabled),
	.sb-corner:active {
		scale: none;
	}
}

/* ---- around the input ---- */

/* phones: the reasoning control's own row above the input */
.composer-reasoning-row {
	display: flex;
	justify-content: center;
	margin-bottom: 8px;
}

.composer-reasoning-row:empty,
.composer-reasoning-row:has(> [hidden]:only-child) {
	display: none;
}

/* the input paints over the row sinking behind it, the agent pill over the control shrinking under it */
.chat-bottom .composer,
.composer-picker {
	position: relative;
	z-index: 1;
}

/* ...but the control moving out of the input to its row goes over it (chat.js placeReasoning) */
.composer-reasoning.is-moving {
	position: relative;
	z-index: 2;
}