/**
 * Yoko Betty Chat — launcher/panel chrome we fully own (button, panel frame,
 * header, close button, loading state). All selectors are scoped under
 * #yca-root and read theme values from CSS variables set inline per site.
 * No !important; specificity stays low so a client can override via the
 * Custom CSS field if needed. Vendor <betty-bot> internals are styled
 * separately in betty-widget.css, where fighting vendor CSS legitimately
 * needs !important.
 */

#yca-root {
	--yca-accent: #2563eb;
	--yca-accent-text: #ffffff;
	--yca-width: 400px;
	--yca-radius: 16px;
	--yca-side: right;
	--yca-gap: 20px;
	position: fixed;
	bottom: var(--yca-gap);
	z-index: 2147483000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* WHY: always render light regardless of OS/browser dark mode — this is a
	   client-branded widget, not a system UI surface that should adapt. */
	color-scheme: light;
}

#yca-root[data-side="right"] { right: var(--yca-gap); }
#yca-root[data-side="left"]  { left: var(--yca-gap); }

/* Launcher button */
#yca-root #yca-launcher {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--yca-accent);
	color: var(--yca-accent-text);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, opacity 0.2s ease;
}
#yca-root #yca-launcher:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
}
#yca-root #yca-launcher:active {
	transform: scale(0.96);
}
#yca-root #yca-launcher:focus-visible {
	outline: 3px solid var(--yca-accent);
	outline-offset: 3px;
}
#yca-root #yca-launcher .yca-launcher-icon { display: inline-flex; }
#yca-root #yca-launcher img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 50%;
}
#yca-root.is-open #yca-launcher {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.8);
}

/* Panel */
#yca-root #yca-panel {
	position: absolute;
	bottom: calc(70px + 14px);
	width: var(--yca-width);
	max-width: calc(100vw - 2 * var(--yca-gap));
	/* WHY: 78vh/720px alone can exceed the viewport on short screens (this
	   panel sits 84px above #yca-root's own bottom, which itself sits
	   var(--yca-gap) above the viewport bottom), clipping the top of the
	   panel off-screen instead of shrinking to fit. The third min() term
	   caps height by the literal remaining space (reserving the same gap
	   above the panel as below it), so it's provably bounded by the
	   viewport instead of relying on a guessed breakpoint. */
	height: min(78vh, 720px, calc(100vh - 84px - 2 * var(--yca-gap)));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #f8f9fa;
	border-radius: var(--yca-radius);
	box-shadow:
		0 25px 50px -12px rgba(0, 0, 0, 0.25),
		0 12px 24px -8px rgba(0, 0, 0, 0.15),
		0 0 0 1px rgba(0, 0, 0, 0.05);
	animation: yca-panel-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: bottom right;
}
#yca-root[data-side="right"] #yca-panel {
	right: 0;
	transform-origin: bottom right;
}
#yca-root[data-side="left"] #yca-panel {
	left: 0;
	transform-origin: bottom left;
}
#yca-root #yca-panel[hidden] { display: none; }

@keyframes yca-panel-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Header */
#yca-root .yca-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: #ffffff;
	color: #1a1a1a;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--yca-radius) var(--yca-radius) 0 0;
}
#yca-root .yca-header-logo {
	height: 32px;
	width: 32px;
	object-fit: contain;
	border-radius: 8px;
}
#yca-root .yca-header-title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--yca-accent);
}
#yca-root .yca-status {
	display: flex;
	align-items: center;
	gap: 6px;
}
#yca-root .yca-status-dot {
	width: 8px;
	height: 8px;
	background: #22c55e;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
	animation: yca-pulse 2s ease-in-out infinite;
}
@keyframes yca-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* Close button — floating below panel */
#yca-root .yca-close {
	position: absolute;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	padding: 0;
	border: 0;
	background: #ffffff;
	color: var(--yca-accent);
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.15s ease;
	z-index: 1;
}
#yca-root .yca-close[hidden] { display: none; }
#yca-root[data-side="right"] .yca-close {
	right: 0;
}
#yca-root[data-side="left"] .yca-close {
	left: 0;
}
#yca-root .yca-close:hover {
	background: #fef2f2;
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
#yca-root .yca-close:active {
	transform: scale(0.95);
}
#yca-root .yca-close:focus-visible {
	outline: 3px solid var(--yca-accent);
	outline-offset: 2px;
}
#yca-root .yca-close svg {
	width: 28px;
	height: 28px;
}

/* Body — hosts the vendor web component */
#yca-root #yca-panel-body {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	padding: 0;
}
#yca-root #yca-panel-body betty-bot {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
	height: 100%;
	overflow: visible;
}

/* Target Betty's light-DOM host element and any internal wrappers (<betty-bot> does not use Shadow DOM) */
#yca-root #yca-panel-body betty-bot,
#yca-root #yca-panel-body betty-bot > *,
#yca-root #yca-panel-body betty-bot > * > * {
	box-sizing: border-box;
}
#yca-root .yca-msg {
	padding: 32px 24px;
	color: #6b7280;
	font-size: 14px;
	text-align: center;
	line-height: 1.6;
}
#yca-root .yca-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
#yca-root .yca-loading::before {
	content: '';
	width: 16px;
	height: 16px;
	border: 2px solid #e5e7eb;
	border-top-color: var(--yca-accent);
	border-radius: 50%;
	animation: yca-spin 0.8s linear infinite;
}
@keyframes yca-spin {
	to { transform: rotate(360deg); }
}

/* Mobile: fill the screen */
@media (max-width: 480px) {
	#yca-root { --yca-gap: 12px; }
	#yca-root #yca-panel {
		position: fixed;
		inset: 0;
		bottom: calc(70px + 24px);
		width: 100vw;
		max-width: 100vw;
		height: auto;
		border-radius: 0;
		animation: none;
	}
	#yca-root .yca-header {
		border-radius: 0;
	}
	#yca-root .yca-close {
		position: fixed;
		bottom: 20px;
		transform: translateX(50%);
		z-index: 2147483001;
	}
	/* Matching the desktop rules' specificity (id + attribute + class) is required here —
	   without the [data-side] qualifier, the desktop "#yca-root[data-side=...] .yca-close"
	   rules above win the cascade over a plain "#yca-root .yca-close", leaving the button
	   pinned at the un-centered desktop offset (and, combined with translateX(50%), clipped
	   half off-screen) instead of centered. */
	#yca-root[data-side="right"] .yca-close {
		right: 50%;
	}
	#yca-root[data-side="left"] .yca-close {
		right: 50%;
		left: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	#yca-root #yca-launcher { transition: none; }
	#yca-root #yca-panel { animation: none; }
	#yca-root .yca-status-dot { animation: none; }
	#yca-root .yca-loading::before { animation: none; }
}

/* Screen-reader-only text (fallback if theme lacks it) */
#yca-root .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}