.chat-composer {
	--composer-glow-opacity: 0.4;
	--composer-glow-spread: 10px;
}
.chat-composer .composer-surface {
	position: relative;
	isolation: isolate;
	border-radius: var(--radius-lg);
}
.chat-composer .composer-surface::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	border: var(--edge-width) solid var(--color-brand);
	box-shadow: 0 0 var(--composer-glow-spread) var(--color-brand);
	transition: opacity var(--duration-fast) var(--ease-out);
}
.chat-composer .composer-surface[data-mode="chopin"] {
	border-color: color-mix(in srgb, var(--color-brand) 55%, var(--color-control-edge));
}
.chat-composer .composer-surface[data-mode="chopin"]::before {
	opacity: var(--composer-glow-opacity);
}
.chat-composer .composer-surface[data-error] {
	border-color: var(--color-danger-edge);
}
.chat-composer .composer-surface[data-error]::before {
	opacity: 0;
}
.chat-composer .composer-draft-input {
	position: relative;
	display: block;
	width: 100%;
	min-height: calc(1.5rem + 2lh);
	max-height: 12rem;
	padding: 0.75rem;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
	color: var(--color-text-primary);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	overflow-y: auto;
}
.chat-composer .composer-draft-input[data-empty]::before {
	content: attr(data-placeholder);
	position: absolute;
	pointer-events: none;
	color: var(--color-text-quaternary);
}
.chat-composer .composer-draft-input[aria-disabled="true"] {
	color: var(--color-text-tertiary);
}
.chat-composer :is(.draft-reference, .draft-mention) {
	font-weight: 600;
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: var(--edge-width);
}
.chat-composer .composer-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem;
	padding: 0 0.5rem 0.5rem;
}
.chat-composer :is(.composer-mode-trigger, .composer-actions, .composer-left) {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.chat-composer .composer-mode {
	gap: 0.25rem;
	min-width: 0;
	height: 1.75rem;
	padding-inline: 0.375rem;
	transition:
		width var(--duration-fast) var(--ease-out),
		scale var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		background-color var(--duration-fast) var(--ease-out);
}
.chat-composer .composer-mode-symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	flex-shrink: 0;
}
.chat-composer .composer-mode-label {
	display: inline-block;
	flex-shrink: 0;
	text-align: left;
}
.chat-composer .composer-mode[aria-pressed="true"] {
	color: var(--color-brand-ink);
}
.chat-agent-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 0.875rem;
	height: 0.875rem;
	color: var(--color-brand);
}
.chat-agent-mark svg {
	width: 0.875rem;
	height: 0.875rem;
}
.chat-agent-mark[data-circle] {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--radius-full);
	background: var(--color-brand);
	color: var(--color-page);
}
.chat-composer .composer-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem 1rem;
	margin-bottom: -0.5rem;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--color-neutral-surface);
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
}
.chat-composer .composer-notice > span {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}
.chat-composer .composer-notice[data-error] {
	background: var(--color-danger-surface);
	color: var(--color-danger-text);
}
.chat-composer .composer-unavailable {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 6rem;
	padding: 0.75rem 1.25rem;
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}
.chat-composer .composer-unavailable > svg {
	margin-bottom: 0.5rem;
}
.chat-composer .composer-unavailable strong {
	font-weight: 500;
}
.chat-composer .composer-unavailable p {
	margin-top: 0.125rem;
	color: var(--color-text-tertiary);
}
.chat-composer :is([data-chat-reference-picker], [data-chat-mention-picker]) {
	left: calc(-1 * var(--edge-width));
	margin-bottom: calc(0.625rem + var(--edge-width));
	box-shadow: var(--shadow-resting-strong);
}
.chat-composer [data-chat-reference-picker] {
	right: calc(-1 * var(--edge-width));
}
.chat-composer [data-chat-reference-picker] [role="option"] {
	height: 2rem;
	padding-block: 0.25rem;
	gap: 0.5rem;
}
.chat-composer [data-chat-reference-picker] [role="option"] [data-reference-meta] {
	flex: 0 1 auto;
	max-width: 35%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 40rem) {
	.chat-composer [data-chat-reference-picker] [data-reference-meta="slug"] {
		display: none;
	}
}
.chat-composer [data-chat-mention-picker] [role="option"] {
	padding-left: 0.25rem;
}
.chat-composer .composer-picker-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2rem;
	padding: 0.25rem 0.5rem;
	color: var(--color-text-tertiary);
	font-size: var(--text-sm);
}

.chat-composer .composer-picker-status svg {
	flex-shrink: 0;
}
@keyframes chat-document-picker-enter {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.chat-composer [data-chat-reference-picker][data-animate] {
		animation: chat-document-picker-enter var(--dropdown-open-dur) var(--dropdown-ease);
	}
	:root:not([data-motion-input="keyboard"]) .chat-composer .composer-mode:not(:disabled):active {
		scale: 0.99;
	}
}
:root[data-motion-input="keyboard"] .chat-composer .composer-mode,
:root[data-motion-input="keyboard"] .chat-composer .composer-surface::before {
	transition: none;
}
@media (prefers-reduced-motion: reduce) {
	.chat-composer .composer-mode, .chat-composer .composer-surface::before {
		transition: none;
	}
	.chat-composer [data-chat-reference-picker] {
		animation: none;
	}
}

.chat-composer .composer-run-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
}

/* Inside the footer row, so losing the connection moves nothing above it. */
.chat-composer .composer-connection {
	display: inline-flex;
	min-width: 0;
}
.chat-composer .composer-connection-label {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding-inline: 0.25rem;
	color: var(--color-text-secondary);
	font-size: var(--text-xs);
	line-height: var(--text-xs--line-height);
	white-space: nowrap;
}
.chat-composer .composer-connection-label::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	flex: none;
	border-radius: var(--radius-full);
	background: var(--color-warning);
}
/* The same words, tone and dot as the document's own status in its header. */
.chat-composer .composer-connection-label[data-offline] {
	color: var(--color-destructive-ink);
}
.chat-composer .composer-connection-label[data-offline]::before {
	display: none;
}
@keyframes composer-connection-enter {
	from {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.chat-composer .composer-connection-label {
		animation: composer-connection-enter var(--duration-fast) var(--ease-out);
	}
}
/*
 * Side by side with the document, its header already offers Reconnect, and
 * one state gets one action. Without it in view, as on a phone, Chat does.
 */
[data-workspace-mode="split"] .chat-composer .composer-reconnect {
	display: none;
}