chat-ui.scss

/* Docked chat base */
// A hidden, fixed strip at the right edge, plus the FAB that reopens a
// closed docked chat.
.agents-manager-chat--docked {
	visibility: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	padding: $layout-spacing;
	width: $sidebar-width;
	box-sizing: border-box;
	z-index: $agents-manager-z-index-sidebar;

	.agents-manager-sidebar-fab {
		visibility: visible;
		position: fixed;
		bottom: $grid-unit-20;
		right: $grid-unit-20;
		width: $grid-unit-70;
		height: $grid-unit-70;
		border-radius: 24px;
		background-color: #fcfcfc;
		color: #3858e8;
		box-shadow:
			0 0 0 1px rgba( 0, 0, 0, 0.075 ),
			0 2px 24px rgba( 0, 0, 0, 0.075 );

		svg {
			width: $grid-unit-40;
			height: $grid-unit-40;
		}
	}
}

// wp-admin modals must render above the docked chat: release the strip's
// stacking while one is open.
body.wp-admin.modal-open .agents-manager-chat--docked {
	z-index: unset;
}

/* Agenttic UI */
// Shared styles for the docked and undocked chat.
.agenttic {
	.Messages-module_container {
		.big-sky__completed-plan:first-child {
			margin-top: 0;
		}

		.button-module_button:has( .agents-manager-message-action-icon ) {
			width: 32px;
			height: 32px;

			.agents-manager-message-action-icon {
				width: 30px;
				height: 30px;

				path {
					fill: var( --color-muted-foreground );
				}
			}

			&:hover:not( :disabled ) .agents-manager-message-action-icon path {
				fill: var( --color-foreground );
			}
		}

		.agents-manager-resolved-edit-action {
			display: inline-flex;
			flex: 0 0 100%;
			align-items: center;
			gap: 0.25rem;

			&__status,
			&__undo {
				display: inline-flex;
				align-items: center;
				gap: 0.25rem;
				min-height: 32px;
				padding: 0.4rem 0.75rem;
				border-radius: 4px;
				font-size: 13px;
			}

			&__status {
				background: rgba( 74, 184, 102, 0.2 );
				color: #4ab866;
				font-weight: 600;
			}

			&__undo {
				border: 0;
				background: transparent;
				color: var( --color-foreground );
				font-family: inherit;
				font-weight: 500;
				cursor: pointer;

				&:hover:not( :disabled ) {
					background: var( --color-muted );
				}

				&:focus-visible:not( :disabled ) {
					background: var( --color-muted );
					outline: 2px solid var( --wp-admin-theme-color, #3858e9 );
					outline-offset: 1px;
				}

				&:disabled {
					cursor: default;
					opacity: 0.5;
				}
			}

			&__icon {
				flex: 0 0 auto;
				fill: currentColor;
			}
		}
	}

	// Prevent content overflow
	.Message-module_content {
		width: 100%;
	}

	.Suggestions-module_vertical .Suggestions-module_button {
		white-space: normal;
		text-align: left;
		overflow-wrap: anywhere;
	}

	.big-sky__chat-actions {
		width: 100%;
		margin-top: auto;
		overflow: visible;
		display: flex;
		flex-direction: column;
		padding: 0 0 8px 16px;
		flex-shrink: 0;

		.big-sky__chat-components & {
			padding: 0;
		}

		&__carousel {
			display: flex;
			white-space: nowrap;
			user-select: none;
			overflow-x: auto;
			transition: transform 0.2s;
			scroll-behavior: smooth;
			scrollbar-width: none;
			gap: $grid-unit-10;
			padding-right: $grid-unit-20;
			width: 100%;
			min-width: 0;

			&::-webkit-scrollbar {
				display: none;
			}

			.big-sky__chat-components & {
				padding-right: 0;
			}

			&.draggable {
				cursor: grab;
			}

			&.active {
				cursor: grabbing;
			}

			&__item {
				display: inline-block;
				box-sizing: border-box;
				text-align: left;
			}
		}

		button {
			flex: 0 0 auto;
			max-width: 200px;
			border-radius: $main-border-radius;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: left;
			padding: 12px 14px;
			background-color: $gray-100;
			color: $gray-900;
			height: fit-content;
			border: none;
			cursor: pointer;
			transition: background-color 100ms ease-in-out;

			&:hover {
				color: $gray-900;
				background-color: $gray-200;
			}

			&.confirmation-action,
			&.confirmation-action-destructive {
				flex: 1;
			}

			&.confirmation-action-destructive {
				background-color: $alert-red;
				p,
				span {
					color: $white;
				}

				&:hover {
					color: $white;
					background-color: $alert-red;
					filter: brightness( 90% );
				}
			}

			&:last-child {
				margin-right: 0;
			}

			&:focus {
				box-shadow: none !important;
			}

			span,
			p {
				white-space: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				text-align: left;
				width: 100%;
				max-width: 100%;
			}

			span {
				font-size: 14px;
			}

			p {
				font-size: $font-size-medium;
				color: $gray-700;
				margin: 0;
			}
		}
	}

	.big-sky__chat-actions::before:not( .has-confirmation-actions ),
	.big-sky__chat-actions::after:not( .has-confirmation-actions ) {
		backdrop-filter: blur( 8px );
		content: '';
		height: 100%;
		left: 0;
		mask: linear-gradient( to left, rgba( 255, 255, 255, 0.1 ), rgba( 255, 255, 255, 1 ) );
		position: fixed;
		top: 0;
		width: 20px;
		will-change: backdrop-filter;
		z-index: 1;
	}

	.big-sky__chat-actions::after {
		mask: linear-gradient( to right, rgba( 255, 255, 255, 0.1 ), rgba( 255, 255, 255, 1 ) );
		left: auto;
		right: 0;
	}

	.big-sky__dock__menu__variation-picker .edit-site-global-styles-variations_item {
		&.is-active,
		&:focus-visible {
			.edit-site-global-styles-variations_item-preview {
				outline: var( --wp-admin-theme-color, #3858e9 ) solid 2px !important;
			}
		}
	}
}

/* Agenttic UI: docked chat */
.agents-manager-chat--docked .agenttic {
	.Message-module_message {
		.big-sky__dock__menu__variation-picker {
			min-height: unset;

			.edit-site-global-styles-variations_item {
				&:not( .is-active ):hover {
					.edit-site-global-styles-variations_item-preview {
						outline-color: $gray-600;
					}
				}

				.edit-site-global-styles-variations_item-preview {
					outline: 1px solid #545454;
					overflow: hidden;
				}
			}
		}

		.big-sky__item-picker__arrows {
			bottom: -40px;

			.components-button {
				color: $gray-700;

				&:not( :disabled ):hover {
					color: $gray-100;
				}

				&:disabled {
					opacity: 0.5;
				}

				&.is-pressed {
					color: $gray-100;
					background-color: #484848;
				}
			}
		}

		.big-sky__item-picker__pager {
			color: $gray-400;
		}
	}
}

/* Agenttic UI: undocked chat */
.agents-manager-chat--undocked.is-focused .agenttic.Chat-module_container.Chat-module_floating {
	z-index: $agents-manager-z-index-focused;
}

.agents-manager-chat--undocked .agenttic.Chat-module_container.Chat-module_floating {
	// Shared overlay base keeps the floating chat above the nav menu and lets it
	// trade stacking with the Help Center panel via the focused offset above.
	z-index: $agents-manager-z-index-docked;

	.big-sky__dock__menu__variation-picker .edit-site-global-styles-variations_item {
		&:not( .is-active ):hover {
			.edit-site-global-styles-variations_item-preview {
				outline-color: #00000080;
			}
		}

		.edit-site-global-styles-variations_item-preview {
			outline: 1px solid #0000004d;
			overflow: hidden;
		}
	}
}

/* Docked split-screen */
// Flip `--am-sidebar-width` to 50vw; `$sidebar-width` resolves through this
// variable so every consumer picks it up.
body.agents-manager-sidebar-container.is-split-screen {
	--am-sidebar-width: 50vw;

	// Agenttic-ui's `EmptyView` caps its heading + suggestions at 400/500px —
	// fine at the docked 350px, a small box at split-screen widths. The
	// attribute-prefix selectors survive CSS-modules class hashing.
	[class*='EmptyView-module_heading'],
	[class*='EmptyView-module_help'],
	[class*='EmptyView-module_suggestionsWrapper'] {
		max-width: none;
	}

	// Stretch MessageActions to span the bubble — on wide viewports it
	// shrinks to content and the Sources card never wraps. `flex: 0 0 100%`
	// then makes the card a full row so the -32px overlay lands reliably.
	.MessageActions-module_container:has( .agents-manager-sources-display ) {
		inline-size: 100%;
	}

	.agents-manager-sources-display.card {
		flex: 0 0 100%;
		max-inline-size: 100%;
	}
}