/**
 * MCM AI Chat — widget styles (v4.3 redesign).
 *
 * All colors, sizes, shadows and radii come from --mcm-chat-* tokens.
 * Lives inside a Shadow DOM, so selectors don't need host-page scoping.
 * Logical properties used throughout so dir="rtl" flips the tails for free.
 */

:host {
	all: initial;
	color-scheme: light dark;
}

.mcm-ai-chat,
.mcm-ai-chat * {
	box-sizing: border-box;
}

/*
 * The public `hidden` attribute must win over the component `display:`
 * rules below. Without this, `display: grid` on the panel and
 * `display: inline-flex` on the launcher override the UA default
 * of `display: none` for `[hidden]`, so the JS `.hidden = true` flag
 * becomes a no-op and the panel renders open on every page load.
 */
.mcm-ai-chat__panel[hidden],
.mcm-ai-chat__launcher[hidden] {
	display: none !important;
}

.mcm-ai-chat {
	position: fixed;
	bottom: var( --mcm-chat-offset-bottom );
	right: var( --mcm-chat-offset-right );
	font-family: var( --mcm-chat-font-family );
	font-size: var( --mcm-chat-font-size );
	line-height: var( --mcm-chat-line-height );
	color: var( --mcm-chat-panel-fg );
	z-index: var( --mcm-chat-z-index );
	text-align: start;
}

.mcm-ai-chat.is-rtl,
.mcm-ai-chat[data-position="bottom-left"],
.mcm-ai-chat[data-position="top-left"] {
	right: auto;
	left: var( --mcm-chat-offset-left );
}

.mcm-ai-chat[data-position="top-right"],
.mcm-ai-chat[data-position="top-left"] {
	bottom: auto;
	top: var( --mcm-chat-offset-top );
}

.mcm-ai-chat[data-position="top-right"] .mcm-ai-chat__panel,
.mcm-ai-chat[data-position="top-left"] .mcm-ai-chat__panel {
	bottom: auto;
	top: calc( var( --mcm-chat-launcher-size, 56px ) + 16px );
}

.mcm-ai-chat[data-position="bottom-left"] .mcm-ai-chat__panel,
.mcm-ai-chat[data-position="top-left"] .mcm-ai-chat__panel {
	right: auto;
	left: 0;
}

/* ============== LAUNCHER ============== */
.mcm-ai-chat__launcher {
	position: relative;
	min-width: var( --mcm-chat-launcher-size );
	height: var( --mcm-chat-launcher-size );
	padding: 0 calc( var( --mcm-chat-launcher-size ) / 3.5 );
	border-radius: var( --mcm-chat-launcher-radius );
	background: var( --mcm-chat-launcher-bg );
	color: var( --mcm-chat-launcher-fg );
	border: var( --mcm-chat-launcher-border );
	cursor: pointer;
	box-shadow: var( --mcm-chat-launcher-shadow );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition:
		transform var( --mcm-chat-animation-duration ) var( --mcm-chat-animation-easing ),
		box-shadow var( --mcm-chat-animation-duration ) var( --mcm-chat-animation-easing );
}

.mcm-ai-chat__launcher:not(.has-label) {
	width: var( --mcm-chat-launcher-size );
	padding: 0;
}

.mcm-ai-chat__launcher-label {
	font-size: var( --mcm-chat-launcher-label-size );
	font-weight: 600;
	white-space: nowrap;
}

.mcm-ai-chat__launcher-img,
.mcm-ai-chat__launcher-svg {
	display: block;
	object-fit: contain;
}

.mcm-ai-chat__launcher:hover {
	transform: translateY( -1px ) scale( 1.03 );
}

.mcm-ai-chat__launcher:active {
	transform: translateY( 0 ) scale( 0.98 );
}

.mcm-ai-chat__launcher:focus-visible {
	outline: 3px solid color-mix( in oklch, var( --mcm-chat-launcher-bg ) 50%, white );
	outline-offset: 3px;
}

.mcm-ai-chat__launcher.is-pulsing::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 color-mix( in oklch, var( --mcm-chat-launcher-bg ) 40%, transparent );
	animation: mcm-ai-chat-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

@keyframes mcm-ai-chat-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix( in oklch, var( --mcm-chat-launcher-bg ) 45%, transparent ); }
	70%  { box-shadow: 0 0 0 14px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mcm-ai-chat__launcher.is-pulsing::before { animation: none; }
	.mcm-ai-chat__launcher { transition: none; }
}

/* ============== PANEL ============== */
.mcm-ai-chat__panel {
	position: absolute;
	bottom: calc( var( --mcm-chat-launcher-size, 56px ) + 16px );
	right: 0;
	width: min( var( --mcm-chat-panel-width ), calc( 100vw - var( --mcm-chat-offset-left ) - var( --mcm-chat-offset-right ) ) );
	height: min( var( --mcm-chat-panel-height ), calc( 100vh - var( --mcm-chat-offset-top ) - var( --mcm-chat-offset-bottom ) - 72px ) );
	background: var( --mcm-chat-panel-bg );
	color: var( --mcm-chat-panel-fg );
	border-radius: var( --mcm-chat-panel-radius );
	border: var( --mcm-chat-panel-border );
	box-shadow: var( --mcm-chat-panel-shadow );
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	overflow: hidden;
	animation: mcm-ai-chat-panel-in var( --mcm-chat-animation-duration ) var( --mcm-chat-animation-easing );
}

@keyframes mcm-ai-chat-panel-in {
	from { opacity: 0; transform: translateY( 8px ) scale( 0.98 ); }
	to   { opacity: 1; transform: translateY( 0 ) scale( 1 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.mcm-ai-chat__panel { animation: none; }
}

.mcm-ai-chat.is-rtl .mcm-ai-chat__panel {
	right: auto;
	left: 0;
}

/* ============== HEADER ============== */
.mcm-ai-chat__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: var( --mcm-chat-header-padding, 10px 12px );
	background: var( --mcm-chat-header-bg );
	color: var( --mcm-chat-header-fg );
	border-block-end: var( --mcm-chat-header-border );
}

.mcm-ai-chat__title {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-weight: var( --mcm-chat-header-title-weight, 600 );
	font-size: var( --mcm-chat-font-size );
}

.mcm-ai-chat__avatar {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: color-mix( in oklch, var( --mcm-chat-launcher-bg ) 18%, transparent );
	color: var( --mcm-chat-launcher-bg );
	flex-shrink: 0;
}

.mcm-ai-chat__avatar svg { width: 16px; height: 16px; }

.mcm-ai-chat__name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.mcm-ai-chat__status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var( --mcm-chat-font-size-small );
	color: color-mix( in oklch, var( --mcm-chat-header-fg ) 65%, transparent );
	margin-inline-start: 6px;
}

.mcm-ai-chat__status-dot {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: oklch( 68% 0.15 150 );
	box-shadow: 0 0 0 3px oklch( 68% 0.15 150 / 0.20 );
}

.mcm-ai-chat__actions {
	display: flex;
	gap: 2px;
}

.mcm-ai-chat__actions button {
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: inherit;
	border-radius: 8px;
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 14px;
	line-height: 1;
	transition: background 120ms ease;
}

.mcm-ai-chat__actions button:hover,
.mcm-ai-chat__actions button:focus-visible {
	background: color-mix( in oklch, var( --mcm-chat-header-fg ) 10%, transparent );
	outline: none;
}

.mcm-ai-chat__actions button:focus-visible {
	outline: 2px solid var( --mcm-chat-input-focus );
	outline-offset: 1px;
}

.mcm-ai-chat__actions button svg { width: 16px; height: 16px; }

/* ============== LOG ============== */
.mcm-ai-chat__log {
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: var( --mcm-chat-bubble-gap, 10px );
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	background: var( --mcm-chat-panel-bg );
}

.mcm-ai-chat__log::-webkit-scrollbar { width: 6px; }

.mcm-ai-chat__log::-webkit-scrollbar-thumb {
	background: color-mix( in oklch, var( --mcm-chat-panel-fg ) 15%, transparent );
	border-radius: 9999px;
}

/* ============== BUBBLE ============== */
.mcm-ai-chat__msg {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 85%;
}

.mcm-ai-chat__msg--user {
	align-self: flex-end;
	align-items: flex-end;
}

.mcm-ai-chat__msg--assistant {
	align-self: flex-start;
	align-items: flex-start;
}

.mcm-ai-chat__bubble {
	padding: var( --mcm-chat-bubble-padding, 10px 12px );
	border-radius: var( --mcm-chat-bubble-radius );
	background: var( --mcm-chat-bubble-assistant-bg );
	color: var( --mcm-chat-bubble-assistant-fg );
	word-wrap: break-word;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
	animation: mcm-ai-chat-bubble-in 180ms var( --mcm-chat-animation-easing );
}

.mcm-ai-chat__msg--assistant .mcm-ai-chat__bubble {
	border-start-start-radius: var( --mcm-chat-bubble-radius-tail, 4px );
}

.mcm-ai-chat__msg--user .mcm-ai-chat__bubble {
	background: var( --mcm-chat-bubble-user-bg );
	color: var( --mcm-chat-bubble-user-fg );
	border-end-end-radius: var( --mcm-chat-bubble-radius-tail, 4px );
}

.mcm-ai-chat.is-rtl .mcm-ai-chat__msg--assistant .mcm-ai-chat__bubble {
	border-start-start-radius: var( --mcm-chat-bubble-radius );
	border-start-end-radius: var( --mcm-chat-bubble-radius-tail, 4px );
}

.mcm-ai-chat.is-rtl .mcm-ai-chat__msg--user .mcm-ai-chat__bubble {
	border-end-end-radius: var( --mcm-chat-bubble-radius );
	border-end-start-radius: var( --mcm-chat-bubble-radius-tail, 4px );
}

@keyframes mcm-ai-chat-bubble-in {
	from { opacity: 0; transform: translateY( 4px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.mcm-ai-chat__bubble { animation: none; }
}

.mcm-ai-chat__bubble p {
	margin: 0 0 6px 0;
}

.mcm-ai-chat__bubble p:last-child {
	margin-bottom: 0;
}

.mcm-ai-chat__bubble a {
	color: inherit;
	text-decoration: underline;
}

.mcm-ai-chat__bubble code {
	background: rgba( 0, 0, 0, 0.08 );
	padding: 1px 4px;
	border-radius: 4px;
	font-family: "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.mcm-ai-chat__bubble pre {
	margin: 6px 0;
	padding: 8px 10px;
	background: rgba( 0, 0, 0, 0.08 );
	border-radius: 6px;
	overflow-x: auto;
}

.mcm-ai-chat__bubble pre code {
	padding: 0;
	background: transparent;
}

.mcm-ai-chat__bubble ul,
.mcm-ai-chat__bubble ol {
	margin: 6px 0;
	padding-inline-start: 20px;
}

.mcm-ai-chat__bubble h3,
.mcm-ai-chat__bubble h4 {
	margin: 6px 0 4px 0;
	font-size: 14px;
	font-weight: 600;
}

/* ============== SOURCES ============== */
.mcm-ai-chat__sources {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding-inline-start: 2px;
	margin-top: 4px;
}

.mcm-ai-chat__sources-label {
	font-size: var( --mcm-chat-font-size-small, 12px );
	color: color-mix( in oklch, var( --mcm-chat-panel-fg ) 60%, transparent );
	margin-inline-end: 2px;
	font-weight: 600;
}

/* Legacy <ul><li><a> structure kept for back-compat with existing JS. */
.mcm-ai-chat__sources ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: contents;
}

.mcm-ai-chat__sources li {
	margin: 0;
	padding: 0;
}

.mcm-ai-chat__sources a,
.mcm-ai-chat__source {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	font-size: var( --mcm-chat-font-size-small, 12px );
	background: var( --mcm-chat-source-bg );
	color: var( --mcm-chat-source-fg );
	border: var( --mcm-chat-source-border );
	border-radius: var( --mcm-chat-source-radius );
	text-decoration: none;
	transition: transform 120ms ease, background 120ms ease;
}

.mcm-ai-chat__sources a:hover,
.mcm-ai-chat__source:hover {
	transform: translateY( -1px );
	background: color-mix( in oklch, var( --mcm-chat-source-bg ) 80%, var( --mcm-chat-launcher-bg ) );
}

.mcm-ai-chat__source svg { width: 12px; height: 12px; opacity: 0.7; }

/* Shimmer while sources are still loading. */
.mcm-ai-chat__source--loading {
	background: linear-gradient(
		90deg,
		var( --mcm-chat-source-bg ) 0%,
		color-mix( in oklch, var( --mcm-chat-source-bg ) 60%, white ) 50%,
		var( --mcm-chat-source-bg ) 100%
	);
	background-size: 200% 100%;
	animation: mcm-ai-chat-shimmer 1.2s infinite linear;
	color: transparent;
}

@keyframes mcm-ai-chat-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mcm-ai-chat__source--loading { animation: none; }
}

/* ============== FEEDBACK / REGEN ============== */
.mcm-ai-chat__feedback {
	display: flex;
	gap: 4px;
	margin-top: 4px;
}

.mcm-ai-chat__feedback button {
	background: transparent;
	border: 1px solid color-mix( in oklch, var( --mcm-chat-panel-fg ) 15%, transparent );
	border-radius: 12px;
	padding: 2px 8px;
	cursor: pointer;
	font-size: 12px;
	color: inherit;
}

.mcm-ai-chat__feedback button.is-active {
	background: color-mix( in oklch, var( --mcm-chat-panel-fg ) 10%, transparent );
}

.mcm-ai-chat__regen {
	margin-inline-start: auto;
}

/* ============== QUICK REPLIES ============== */
.mcm-ai-chat__quickreplies {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

.mcm-ai-chat__qr {
	padding: 6px 10px;
	background: transparent;
	color: var( --mcm-chat-launcher-bg );
	border: 1px solid color-mix( in oklch, var( --mcm-chat-launcher-bg ) 35%, transparent );
	border-radius: 9999px;
	font-size: var( --mcm-chat-font-size-small, 12px );
	cursor: pointer;
	transition: background 120ms ease;
}

.mcm-ai-chat__qr:hover {
	background: color-mix( in oklch, var( --mcm-chat-launcher-bg ) 12%, transparent );
}

/* ============== TYPING ============== */
.mcm-ai-chat__msg--typing .mcm-ai-chat__bubble {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	min-height: 20px;
}

.mcm-ai-chat__dot {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: color-mix( in oklch, var( --mcm-chat-bubble-assistant-fg ) 55%, transparent );
	animation: mcm-ai-chat-typing 1.2s infinite ease-in-out both;
}

.mcm-ai-chat__dot:nth-child( 2 ) { animation-delay: 0.15s; }
.mcm-ai-chat__dot:nth-child( 3 ) { animation-delay: 0.30s; }

@keyframes mcm-ai-chat-typing {
	0%, 80%, 100% { opacity: 0.3; transform: translateY( 0 ); }
	40%           { opacity: 1;   transform: translateY( -2px ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.mcm-ai-chat__dot { animation: none; opacity: 0.6; }
}

/* ============== ERROR ============== */
.mcm-ai-chat__msg--error .mcm-ai-chat__bubble {
	background: #fde2e2;
	color: #8a1f11;
}

/* ============== STREAMING CARET ============== */
.mcm-ai-chat__msg--streaming .mcm-ai-chat__bubble::after {
	content: '▍';
	display: inline-block;
	margin-inline-start: 2px;
	animation: mcm-ai-chat-caret 1s steps( 2 ) infinite;
	color: var( --mcm-chat-launcher-bg );
}

@keyframes mcm-ai-chat-caret {
	to { opacity: 0; }
}

/* ============== FORM ============== */
.mcm-ai-chat__form {
	padding: 10px 12px;
	border-block-start: var( --mcm-chat-header-border );
	background: var( --mcm-chat-panel-bg );
}

.mcm-ai-chat__inputwrap {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 4px 10px;
	background: var( --mcm-chat-input-bg );
	border: var( --mcm-chat-input-border );
	border-radius: var( --mcm-chat-input-radius );
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mcm-ai-chat__inputwrap:focus-within {
	border-color: var( --mcm-chat-input-focus );
	box-shadow: 0 0 0 3px color-mix( in oklch, var( --mcm-chat-input-focus ) 25%, transparent );
}

.mcm-ai-chat__input {
	flex: 1 1 auto;
	border: 0;
	outline: 0;
	background: transparent;
	color: var( --mcm-chat-input-fg );
	font: inherit;
	resize: none;
	padding: 6px 4px;
	max-height: 160px;
	line-height: 1.4;
}

.mcm-ai-chat__input::placeholder {
	color: color-mix( in oklch, var( --mcm-chat-panel-fg ) 45%, transparent );
}

.mcm-ai-chat__send {
	border: 0;
	background: var( --mcm-chat-send-bg );
	color: var( --mcm-chat-send-fg );
	border-radius: var( --mcm-chat-send-radius );
	padding: 6px 12px;
	cursor: pointer;
	display: inline-grid;
	place-items: center;
	font-weight: 600;
	transition: transform 120ms ease, filter 120ms ease;
}

.mcm-ai-chat__send:hover:not(:disabled) {
	filter: brightness( 1.05 );
	transform: translateY( -1px );
}

.mcm-ai-chat__send:active {
	transform: translateY( 0 );
}

.mcm-ai-chat__send:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.mcm-ai-chat__send svg { width: 16px; height: 16px; }

/* ============== FOOTER ============== */
.mcm-ai-chat__footer {
	padding: var( --mcm-chat-footer-padding, 6px 12px );
	font-size: var( --mcm-chat-footer-size, 11px );
	color: var( --mcm-chat-footer-fg );
	background: var( --mcm-chat-footer-bg );
	text-align: var( --mcm-chat-footer-align, center );
	border-block-start: var( --mcm-chat-footer-border );
}

/* ============== CAPTURE MODAL ============== */
.mcm-ai-chat__capture {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.35 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	padding: 16px;
}

.mcm-ai-chat__capture-form {
	background: var( --mcm-chat-panel-bg );
	color: var( --mcm-chat-panel-fg );
	border: var( --mcm-chat-panel-border );
	border-radius: var( --mcm-chat-panel-radius );
	padding: 16px;
	display: grid;
	gap: 10px;
	min-width: 260px;
	max-width: 100%;
}

.mcm-ai-chat__capture-form h4 {
	margin: 0;
	font-size: 14px;
}

.mcm-ai-chat__capture-form label {
	display: grid;
	gap: 4px;
	font-size: 12px;
}

.mcm-ai-chat__capture-form input {
	padding: 8px;
	border: var( --mcm-chat-input-border );
	border-radius: 6px;
	font: inherit;
	background: var( --mcm-chat-input-bg );
	color: var( --mcm-chat-input-fg );
}

.mcm-ai-chat__capture-form button {
	padding: 8px 12px;
	background: var( --mcm-chat-send-bg );
	color: var( --mcm-chat-send-fg );
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
}

/* ============== MOBILE ============== */
@media ( max-width: 480px ) {
	.mcm-ai-chat__panel {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
		border: 0;
		box-shadow: none;
	}
}