/* Shared chat helpers (MudBlazor-first) */
/* Follows project Styling Policy: prefer Mud parameters, then helpers/wrappers, then local CSS. */

/* 1) Accent labels & icons */
.chat-accent {
	opacity: 0.92;
	color: var(--accent-color, currentColor);
}

/* 2) Bubbles */
.chat-bubble { border-radius: 8px; }
.chat-bubble--user { background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); }
.chat-bubble--default { background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); }
.chat-bubble--error { background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); }

.chat-bubble {
	position: relative; /* anchor for the overlaid actions */
}

/* Message actions (copy/fork/remove) overlay the bubble's top-right corner and
   appear on hover or keyboard focus. Hidden with visibility (not just opacity)
   so they never block clicks on the text underneath. Touch devices (no hover)
   always show them. */
.chat-message-item__actions {
	position: absolute;
	top: 2px;
	right: 2px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 0 2px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent);
}

@media (hover: hover) {
	.chat-bubble-stack .chat-message-item__actions { opacity: 0; visibility: hidden; transition: opacity 120ms ease, visibility 120ms; }
	.chat-bubble-stack:hover .chat-message-item__actions,
	.chat-bubble-stack:focus-within .chat-message-item__actions { opacity: 1; visibility: visible; }
}

/* 3) Chips */
.chat-chip { height: 18px; font-size: 0.68rem; }

/* 4) Tool/List summaries */
.chat-tool-summary-label { opacity: 0.95; font-weight: 600; }
.chat-tool-summary-bytes { opacity: 0.8; }
.chat-tool-call-header { width: 100%; min-width: 0; flex-wrap: nowrap; }
.chat-tool-call-header .chat-message-item__tool-name { flex: 0 1 auto; }
.chat-tool-call-header .chat-tool-parameter-preview {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.72;
}
.chat-tool-call-header .chat-message-item__tool-chip { flex: none; }

/* 5) Busy state */
.chat-busy-indicator { max-width: 420px; }

/* 6) Layout helper */
.chat-bubble-stack { width: 100%; min-width: 0; }



/* 7) Compact tool panel variants (global by design)
   These styles target MudExpansionPanel root classes applied by CompactToolPanel.
   Keep them in global CSS; isolated CSS would scope selectors and miss child-rendered roots.
*/
.compact-panel {
	margin: 2px 0;
	border-radius: 4px;
	background: var(--panel-bg, color-mix(in srgb, var(--accent-color, currentColor) 8%, transparent));
	font-size: 0.92rem;
	padding: 0 6px;
}

.compact-panel .mud-expand-panel-header,
.compact-panel .mud-expand-panel-header.mud-expand-panel-header-gutters {
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1.1;
}

.compact-panel .mud-expand-panel-header-content,
.compact-panel .mud-expand-panel-header .mud-typography,
.compact-panel .mud-expand-panel-header .mud-chip-root {
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.compact-panel .mud-expand-panel-header-content {
	width: 100%;
	min-width: 0;
}

.compact-panel .mud-expand-panel-content {
	padding: 0 0 2px !important;
	margin: 0 !important;
}

.compact-panel .mud-expand-panel {
	padding: 0 !important;
}

/* Accents come from the theme palette; the background is derived from the accent. */
.compact-panel--toolcall    { --accent-color: var(--mud-palette-warning); }
.compact-panel--toolresult  { --accent-color: var(--mud-palette-info); }
.compact-panel--failure     { --accent-color: var(--mud-palette-error); }
.compact-panel--compaction  { --accent-color: var(--mud-palette-tertiary); }
.compact-panel--information { --accent-color: var(--mud-palette-text-secondary); }
.compact-panel--reasoning   { --accent-color: var(--mud-palette-tertiary); }

.chat-reasoning-text {
	white-space: pre-wrap;
	font-size: 0.8rem;
	opacity: 0.75;
	max-height: 300px;
	overflow-y: auto;
	padding: 4px 8px;
}