/**
 * File: agents/chat-agent/public/assets/css/chat-frontend.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
 */

/* --- 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 {
	width: 100%;
	max-width: 1140px;
	height: 100%;
	max-height: 100vh;
	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;
}

/* --- 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 > * + * { 
	margin-top: var(--cts-theme-spacing-medium); 
}

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

#conturalis-chat .chat-bubble {
	max-width: 90%;
	padding: 14px 20px;
	border-radius: 18px;
	margin-bottom: var(--cts-theme-spacing-medium);
	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: 48px;
	height: 48px;
	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 {
	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: 40px !important;
	border-radius: 99px !important;
	padding: 0 20px !important;
	gap: 10px;
}

.cts-bubble-label {
	font-family: var(--cts-theme-font-sans);
	font-weight: 600;
	font-size: var(--cts-theme-font-size-medium);
	white-space: nowrap;
	display: inline-block;
}

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

.cts-chat-header-actions {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 10;
}

#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-modal .cts-chat-header-actions .material-symbols-outlined {
	font-size: 18px;
	display: block;
}

#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: center;
	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: 90vh;
	max-height: 90vh;
	margin: 5vh auto;
	border-radius: var(--cts-theme-border-radius-large);
	overflow: hidden;
	box-shadow: var(--cts-theme-shadow-large);
}

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

@media (max-width: 600px) {
	#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 {
	margin-bottom: var(--cts-theme-spacing-medium);
	width: 100%;
}