/* 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;
	/* One uniform block width for every panel (events, reasoning, tools, ...), so collapsed
	   headers line up and carry the same weight. The row's reading-width cap (section 8)
	   keeps that width bounded on wide screens. */
	width: 100%;
}

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

/* 8) Reading width
   Cap every row of the message list so prose lines wrap at a readable length on
   wide screens. Rows keep their left alignment; tune the variable to taste. */
.chat-message-list {
	--chat-max-row-width: 70rem;
}

.chat-message-list > * {
	max-width: min(100%, var(--chat-max-row-width));
}