/* Dokos AI Assistant - Premium Style */

/* Surface tokens map straight onto Dodock's own theme variables, which are already
   defined for both [data-theme="light"] and [data-theme="dark"] in
   frappe/public/scss/dodock/css_variables.scss. Do NOT redefine them per theme here:
   a private palette drifts from the rest of the desk as soon as Dodock's changes. */
:root {
	--ai-border-color: var(--border-color, #e2e8f0);
	--ai-bg-light: var(--bg-light-gray, #f8fbff);
	--ai-bg-card: var(--card-bg, #ffffff);
	--ai-text-dark: var(--text-color, #1e293b);
	--ai-text-muted: var(--text-muted, #64748b);
	--ai-radius: 12px;

	/* Brand tokens. Dodock defines --primary only under [data-theme="light"] and has no
	   --primary-hover at all, so both themes are spelled out explicitly below rather
	   than relying on a var() fallback that would silently apply the light navy on a
	   dark background. */
	--ai-primary-color: var(--primary, #003f64);
	--ai-primary-hover: #002d4a;
	--ai-primary-contrast: #ffffff;

	/* Focus indicator: kept separate from --ai-primary-color so it can be tuned for
	   contrast per theme. WCAG 2.2 SC 1.4.11 requires >= 3:1 against the adjacent
	   surface. #003f64 on white measures ~11:1. */
	--ai-focus-ring: #003f64;

	--ai-glow-blue: rgba(0, 63, 100, 0.08);
	--ai-glow-shimmer: linear-gradient(90deg, var(--ai-text-muted) 25%, var(--ai-text-dark) 50%, var(--ai-text-muted) 75%);
}

:root[data-theme="dark"] {
	/* #003f64 on the dark desk background (#171717) measures 1.65:1 — an invisible
	   focus ring. These values are picked for contrast: the ring reaches ~10:1, and
	   both button fills keep >= 4.5:1 against --ai-primary-contrast. */
	--ai-primary-color: #2a72a0;
	--ai-primary-hover: #2d7aab;
	--ai-primary-contrast: #ffffff;
	--ai-focus-ring: #7cc4e8;
	--ai-glow-blue: rgba(124, 196, 232, 0.18);
}

.ai-assistant-modal .modal-dialog {
	margin: auto auto 30px auto !important;
	display: flex;
	align-items: flex-end;
	min-height: calc(100vh - 60px);
}

.ai-assistant-modal .modal-title {
	display: flex;
	align-items: center;
	width: 100%;
	font-size: 16px;
	color: var(--ai-text-dark);
}

.ai-logo-container {
	width: 12px;
	height: 12px;
	display: flex;
	align-items: center;
}

.ai-assistant-modal .modal-content {
	border-radius: var(--ai-radius) !important;
	border: 1px solid var(--ai-border-color) !important;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
	background: var(--ai-bg-card) !important;
	overflow: hidden;
}

.ai-header-btn-wrapper, .ai-rounded {
	border-radius: var(--ai-radius) !important;
}

/* Custom modern scrollbars */
.chat-body {
	/* Firefox — ::-webkit-scrollbar below covers Chromium/WebKit only */
	scrollbar-width: thin;
	scrollbar-color: var(--ai-border-color) transparent;
}
.chat-body::-webkit-scrollbar {
	width: 6px;
}
.chat-body::-webkit-scrollbar-track {
	background: transparent;
}
.chat-body::-webkit-scrollbar-thumb {
	background-color: var(--ai-border-color);
	border-radius: 10px;
}

@media (min-width: 992px) {
	.ai-assistant-modal .modal-dialog {
		width: 60% !important;
		max-width: 60% !important;
	}
}

@media (max-width: 767px) {
	.ai-assistant-modal.modal {
		display: flex !important;
		align-items: flex-end !important;
		justify-content: center !important;
	}
	.ai-assistant-modal .modal-dialog {
		width: 95% !important;
		max-width: 95% !important;
		margin: 0 auto 20px auto !important;
		min-height: auto !important;
		transform: none !important;
	}
}

/* WCAG 2.2 SC 2.3.3 — the assistant leans on hover scaling, elastic easing and a
   shimmering "thinking" gradient. Honour the OS-level request to cut motion: keep
   state changes instant and visible rather than removing the feedback entirely. */
@media (prefers-reduced-motion: reduce) {
	.ai-assistant-modal *,
	.ai-assistant-modal *::before,
	.ai-assistant-modal *::after,
	.ai-sidebar-btn-wrapper *,
	.ai-active-field .control-input-wrapper {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Transform-based emphasis has no reduced-motion equivalent — drop it outright. */
	.ai-btn:hover,
	.ai-btn:hover .ai-star-icon,
	.ai-btn-dokos:hover:not(:disabled),
	.border-card:hover {
		transform: none !important;
	}
}