/**
 * File: agents/chat-agent/public/assets/css/style.css
 * Chat Agent - Front End Styles
 *
 * Provides the foundational layout and component styling for the Chat Agent interface.
 * Implements strict CSS scoping using the `#conturalis-chat` wrapper to prevent
 * theme inheritance conflicts across various WordPress environments.
 * 
 * TABLE OF CONTENTS:
 * 1.0 - Structural Layout
 * 2.0 - Chat History Container
 * 3.0 - Message Bubbles
 * 4.0 - Form & Input Area
 * 5.0 - Launcher Bubble (Classic View)
 * 6.0 - Modal Shell (Classic View)
 * 7.0 - UI Feedback States
 *
 * @package Conturalis
 * @subpackage Chat Agent / Public
 */

/* --- 1.0 Structural Layout --- */

.conturalis-chat-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
}

#conturalis-chat .conturalis-chat-container {
	position: relative;
	width: 100%;
	max-width: 1140px;
	height: 100%;
	max-height: 100vh;
	max-height: 100dvh;
	background: var(--cts-theme-color-neutral-0);
	display: flex;
	flex-direction: column;
	font-family: var(--cts-theme-font-sans, 'Roboto', sans-serif);
	margin: 0 auto;
	box-sizing: border-box;
}

/* Offset standalone chat below sticky headers when header remains visible */
body:not(:has(header[style*="display: none"])) #conturalis-chat:not(#conturalis-chat-modal *) .conturalis-chat-container {
	padding-top: var(--cts-sticky-header-h, 0px);
}

/* --- 2.0 Chat History Container --- */

#conturalis-chat .chat-history {
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--cts-theme-spacing-large);
	padding-bottom: calc(var(--chat-bottom-padding, 20px) + env(safe-area-inset-bottom, 0));
	box-sizing: border-box;
	max-height: none;
	height: var(--chat-history-height, auto);
	scrollbar-width: none; 
}

#conturalis-chat .chat-history::-webkit-scrollbar {
	display: none;
}

#conturalis-chat #chat-history > div + div { 
	margin-top: var(--cts-theme-spacing-medium); 
}

/* --- 3.0 Message Bubbles --- */

#conturalis-chat .chat-bubble {
	max-width: 90%;
	padding: 14px 20px;
	border-radius: 18px;
	font-size: var(--cts-theme-font-size-medium);
	line-height: var(--cts-theme-line-height-normal);
}

@media (min-width: 900px) {
	#conturalis-chat .chat-bubble {
		max-width: 75%;
	}
}

#conturalis-chat .chat-bubble.ai {
	background-color: var(--cts-theme-color-neutral-100);
	color: var(--cts-theme-color-neutral-900);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
	position: relative;
}

#conturalis-chat .chat-bubble.user {
	background-color: var(--cts-chat-ui-color, var(--cts-theme-color-neutral-1000));
	color: var(--cts-theme-color-neutral-0);
	border-bottom-right-radius: 4px;
	align-self: flex-end;
	margin-left: auto;
}

#conturalis-chat .chat-bubble ul,
#conturalis-chat .chat-bubble ol {
	margin-bottom: 1em;
	padding-left: 20px;
}

#conturalis-chat .chat-bubble li {
	margin-bottom: 0.5em;
}

#conturalis-chat .chat-bubble h2,
#conturalis-chat .chat-bubble h3,
#conturalis-chat .chat-bubble h4 {
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	margin-top: 1.2em;
	margin-bottom: 0.6em;
	font-weight: 600;
}

/* --- 4.0 Form & Input Area --- */

#conturalis-chat #chat-form {
	position: fixed;
	bottom: env(safe-area-inset-bottom, 0);
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1140px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0));
	background: var(--cts-theme-color-neutral-0);
	display: flex;
	box-shadow: none;
	box-sizing: border-box;
	z-index: 2;
	border-top: 1px solid var(--cts-theme-color-neutral-100);
}

#conturalis-chat #chat-input {
	flex: 1;
	padding: 8px 16px;
	font-size: var(--cts-theme-font-size-medium);
	border-radius: var(--cts-theme-border-radius-large);
	border: 1px solid var(--cts-theme-color-neutral-200);
	background: var(--cts-theme-color-neutral-50);
	color: var(--cts-theme-color-neutral-900);
	outline: none;
	margin-right: 8px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

#conturalis-chat #chat-input:focus {
	border-color: var(--cts-theme-color-primary-500);
	box-shadow: 0 0 0 2px var(--cts-theme-color-primary-100);
}

#conturalis-chat #chat-form button {
	background-color: var(--cts-chat-ui-color, var(--cts-theme-color-neutral-1000));
	border: none;
	padding: 14px;
	border-radius: 99px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.3s ease, opacity 0.3s ease;
	color: var(--cts-theme-color-neutral-0);
}

#conturalis-chat #chat-form button:disabled {
	background-color: var(--cts-theme-color-neutral-200) !important;
	color: var(--cts-theme-color-neutral-500) !important;
	cursor: not-allowed !important;
}

#conturalis-chat #chat-form button:not(:disabled):hover {
	opacity: 0.85;
}

/* --- 5.0 Launcher Bubble (Classic View) --- */

#conturalis-chat-bubble {
	position: fixed;
	bottom: var(--cts-theme-spacing-large);
	right: var(--cts-theme-spacing-large);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--cts-chat-bubble-color, var(--cts-theme-color-neutral-1000));
	color: var(--cts-theme-color-neutral-0);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 9999;
	box-shadow: var(--cts-theme-shadow-large);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#conturalis-chat-bubble:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

#conturalis-chat-bubble img,
#conturalis-chat-bubble .cts-chat-svg-inline,
#conturalis-chat-bubble .material-symbols-outlined,
#conturalis-chat-bubble .cts-material-icon {
	display: block;
	width: 24px;
	height: 24px;
}

#conturalis-chat-bubble svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

#conturalis-chat-bubble.cts-bubble-btn {
	width: auto !important;
	height: 56px; /* M3 Standard FAB Fallback, overridden by inline dynamic CSS */
	border-radius: 9999px;
	padding: 0 24px;
	gap: 10px;
}

.cts-bubble-label {
	font-family: var(--cts-theme-font-sans);
	font-weight: 600;
	font-size: var(--cts-theme-font-size-medium); /* Fallback, overridden by inline dynamic CSS */
	white-space: nowrap;
	display: inline-block;
}

/* --- 6.0 Modal Shell (Classic View) --- */

.cts-chat-header-actions {
	position: absolute;
	top: calc(12px + env(safe-area-inset-top, 0px));
	right: calc(12px + env(safe-area-inset-right, 0px));
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 10;
}

/* Offset action buttons below visible sticky site header on standalone chat view */
#conturalis-chat:not(#conturalis-chat-modal *) .cts-chat-header-actions {
	top: calc(12px + var(--cts-sticky-header-h, 0px) + env(safe-area-inset-top, 0px));
}

#conturalis-chat .conturalis-chat-close,
#conturalis-chat .conturalis-chat-fullscreen,
#conturalis-chat .conturalis-chat-reset,
#conturalis-chat .conturalis-chat-back,
#conturalis-chat-modal .conturalis-chat-close,
#conturalis-chat-modal .conturalis-chat-fullscreen,
#conturalis-chat-modal .conturalis-chat-reset,
#conturalis-chat-modal .conturalis-chat-back {
	display: flex;
	position: static;
	background: var(--cts-chat-ui-color, var(--cts-theme-color-neutral-1000));
	border: none;
	color: var(--cts-theme-color-neutral-0);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.2s;
	box-shadow: var(--cts-theme-shadow-small);
	text-decoration: none;
}

#conturalis-chat .conturalis-chat-fullscreen:hover,
#conturalis-chat .conturalis-chat-close:hover,
#conturalis-chat .conturalis-chat-reset:hover,
#conturalis-chat .conturalis-chat-back:hover,
#conturalis-chat-modal .conturalis-chat-fullscreen:hover,
#conturalis-chat-modal .conturalis-chat-close:hover,
#conturalis-chat-modal .conturalis-chat-reset:hover,
#conturalis-chat-modal .conturalis-chat-back:hover {
	opacity: 0.8;
}

#conturalis-chat .cts-chat-header-actions .material-symbols-outlined,
#conturalis-chat .cts-chat-header-actions .cts-material-icon,
#conturalis-chat-modal .cts-chat-header-actions .material-symbols-outlined,
#conturalis-chat-modal .cts-chat-header-actions .cts-material-icon {
	font-size: 18px;
	display: block;
}

/* Material Symbols Font Penetration Shield: Overrides Elementor/theme button resets that break ligatures */
#conturalis-chat-bubble .material-symbols-outlined,
#conturalis-chat-bubble .cts-material-icon,
.cts-chat-header-actions button .material-symbols-outlined,
.cts-chat-header-actions button .cts-material-icon,
#conturalis-chat #chat-form button .material-symbols-outlined,
#conturalis-chat #chat-form button .cts-material-icon,
#conturalis-chat .chat-history .material-symbols-outlined,
#conturalis-chat .chat-history .cts-material-icon {
	font-family: 'Material Symbols Outlined' !important;
	font-weight: normal !important;
	font-style: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	white-space: nowrap !important;
	word-wrap: normal !important;
	direction: ltr !important;
	line-height: 1 !important;
	-webkit-font-smoothing: antialiased !important;
}

#conturalis-chat-modal {
	display: flex; 
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--cts-theme-color-neutral-1000) 40%, transparent);
	z-index: 9998;
	align-items: flex-end;
	justify-content: center;
}

#conturalis-chat-modal .conturalis-chat-wrapper {
	width: 100%;
	height: auto;
	border-radius: 0;
}

#conturalis-chat-modal .conturalis-chat-container {
	position: relative;
	height: min(90vh, 90dvh);
	max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
	margin: 0 auto;
	border-radius: var(--cts-theme-border-radius-large) var(--cts-theme-border-radius-large) 0 0;
	overflow: hidden;
	box-shadow: var(--cts-theme-shadow-large);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

#conturalis-chat-modal .chat-history {
	flex: 1;
	height: auto;
	max-height: none;
}

#conturalis-chat-modal #chat-form {
	position: relative;
	bottom: auto;
	left: 0;
	transform: none;
}

.conturalis-chat-close {
	display: none;
}

@media (max-width: 640px) {
	/* Full-screen bottom-sheet on mobile devices to prevent dynamic browser bar clipping */
	#conturalis-chat-modal .conturalis-chat-container {
		height: 100% !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		border-radius: 0 !important;
	}

	#conturalis-chat-modal .conturalis-chat-close {
		width: 40px;
		height: 40px;
		font-size: 24px;
	}
}

/* --- 7.0 UI Feedback States --- */

.chat-bubble.ai.thinking-status {
	color: var(--cts-theme-color-neutral-600);
	background-color: var(--cts-theme-color-neutral-100);
	font-style: italic;
	display: flex;
	align-items: flex-end;
}

.chat-bubble.ai.thinking-status .status-text {
	margin-right: 5px;
}

.chat-bubble.ai.thinking-status .dot-1,
.chat-bubble.ai.thinking-status .dot-2,
.chat-bubble.ai.thinking-status .dot-3 {
	animation: pulse 1s infinite;
}

.chat-bubble.ai.thinking-status .dot-2 { 
	animation-delay: 0.2s; 
}

.chat-bubble.ai.thinking-status .dot-3 { 
	animation-delay: 0.4s; 
}

@keyframes pulse {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 1; }
}

.cts-component-wrapper {
	width: 100%;
}

/* --- 8.0 Full-Screen Expansion (Modal to Target Sync) --- */

body:has(#conturalis-chat-modal.cts-is-expanded) {
	overflow: hidden !important;
}

#conturalis-chat-modal.cts-is-expanded {
	position: fixed;
	top: var(--cts-sticky-header-h, 0px);
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(100vh - var(--cts-sticky-header-h, 0px));
	height: calc(100dvh - var(--cts-sticky-header-h, 0px));
	background: var(--cts-theme-color-neutral-0);
	align-items: flex-start;
	z-index: 9990; /* Sits above all in-page content, sub-bars, and drawers */
}

/* Ensure primary site navigation layers cleanly above the expanded chat workspace */
body:has(#conturalis-chat-modal.cts-is-expanded) header,
body:has(#conturalis-chat-modal.cts-is-expanded) .cts-header-arcturus,
body:has(#conturalis-chat-modal.cts-is-expanded) .site-header,
body:has(#conturalis-chat-modal.cts-is-expanded) #masthead,
body:has(#conturalis-chat-modal.cts-is-expanded) .elementor-location-header,
body:has(#conturalis-chat-modal.cts-is-expanded) .e-con:has(> header) {
	z-index: 9995 !important;
}

body:has(#conturalis-chat-modal.cts-is-expanded) header .sub-menu,
body:has(#conturalis-chat-modal.cts-is-expanded) header .elementor-nav-menu--dropdown,
body:has(#conturalis-chat-modal.cts-is-expanded) .cts-header-arcturus .cts-dropdown-menu,
body:has(#conturalis-chat-modal.cts-is-expanded) .cts-header-arcturus .cts-lang-dropdown-menu,
body:has(#conturalis-chat-modal.cts-is-expanded) .cts-header-arcturus .cts-auth-dropdown-menu,
body:has(#conturalis-chat-modal.cts-is-expanded) .site-header .sub-menu,
body:has(#conturalis-chat-modal.cts-is-expanded) #masthead .sub-menu {
	z-index: 9996 !important;
}

#conturalis-chat-modal.cts-is-expanded .conturalis-chat-container {
	height: 100%;
	max-height: 100%;
	border-radius: 0;
	box-shadow: none;
}

#conturalis-chat-modal.cts-is-expanded .conturalis-chat-fullscreen,
#conturalis-chat-modal.cts-is-expanded .conturalis-chat-close {
	display: none !important;
}