/**
 * AI Chatbot Widget - Front-end Styles
 *
 * Floating chat widget with customizable colors and position.
 * @package AI_Chatbot_Woo
 */

/* Floating launcher button */
.aicb-launcher {
	position: fixed;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--aicb-primary, #6366f1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	z-index: 99998;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	font-size: 28px;
	line-height: 1;
}

.aicb-launcher:hover {
	transform: scale(1.08);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

/* Position: bottom-right */
.aicb-launcher.bottom-right {
	bottom: 24px;
	right: 24px;
}

/* Position: bottom-left */
.aicb-launcher.bottom-left {
	bottom: 24px;
	left: 24px;
}

/* Position: top-right */
.aicb-launcher.top-right {
	top: 24px;
	right: 24px;
}

/* Position: top-left */
.aicb-launcher.top-left {
	top: 24px;
	left: 24px;
}

/* Chat window */
.aicb-widget {
	position: fixed;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 540px;
	max-height: calc(100vh - 100px);
	background: var(--aicb-bg, #fff);
	color: var(--aicb-text, #1f2937);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
	display: none;
	flex-direction: column;
	overflow: hidden;
	z-index: 99999;
	font-family: inherit;
}

.aicb-widget.open {
	display: flex;
	animation: aicb-fade-in 0.25s ease;
}

@keyframes aicb-fade-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Positioning the widget near the launcher */
.aicb-widget.bottom-right { bottom: 96px; right: 24px; }
.aicb-widget.bottom-left  { bottom: 96px; left: 24px; }
.aicb-widget.top-right    { top: 96px; right: 24px; }
.aicb-widget.top-left     { top: 96px; left: 24px; }

/* Header */
.aicb-header {
	background: var(--aicb-primary, #6366f1);
	color: #fff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.aicb-header-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	overflow: hidden;
}

.aicb-header-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aicb-header-info {
	flex: 1;
}

.aicb-header-title {
	font-weight: 600;
	font-size: 15px;
	margin: 0;
	line-height: 1.2;
}

.aicb-header-subtitle {
	font-size: 11px;
	opacity: 0.85;
	margin-top: 2px;
}

.aicb-header-actions {
	display: flex;
	gap: 6px;
}

.aicb-header-btn {
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.8;
	transition: opacity 0.15s, background 0.15s;
}

.aicb-header-btn:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.18);
}

/* Messages area */
.aicb-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: #f8f9fb;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
}

.aicb-msg {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	word-wrap: break-word;
	word-break: break-word;
	animation: aicb-slide-in 0.2s ease;
}

@keyframes aicb-slide-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.aicb-msg.user {
	align-self: flex-end;
	background: var(--aicb-primary, #6366f1);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.aicb-msg.assistant {
	align-self: flex-start;
	background: #fff;
	color: var(--aicb-text, #1f2937);
	border: 1px solid #e5e7eb;
	border-bottom-left-radius: 4px;
}

.aicb-msg.assistant a {
	color: var(--aicb-primary, #6366f1);
	text-decoration: underline;
}

.aicb-msg.assistant img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin-top: 8px;
}

.aicb-msg.system {
	align-self: center;
	background: #fef3c7;
	color: #92400e;
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 8px;
}

/* Mode badge */
.aicb-mode-badge {
	display: inline-block;
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 8px;
	margin-top: 4px;
	opacity: 0.7;
}

.aicb-mode-badge.offline { background: #fee2e2; color: #991b1b; }
.aicb-mode-badge.cached  { background: #fef3c7; color: #92400e; }
.aicb-mode-badge.online  { background: #d1fae5; color: #065f46; }

/* Feedback buttons */
.aicb-feedback {
	display: flex;
	gap: 6px;
	margin-top: 6px;
	opacity: 0;
	transition: opacity 0.15s;
}

.aicb-msg:hover .aicb-feedback {
	opacity: 1;
}

.aicb-feedback-btn {
	background: transparent;
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #6b7280;
	transition: all 0.15s;
}

.aicb-feedback-btn:hover {
	background: #f3f4f6;
}

.aicb-feedback-btn.liked {
	background: #d1fae5;
	border-color: #10b981;
	color: #065f46;
}

.aicb-feedback-btn.disliked {
	background: #fee2e2;
	border-color: #ef4444;
	color: #991b1b;
}

/* Typing indicator */
.aicb-typing {
	align-self: flex-start;
	background: #fff;
	border: 1px solid #e5e7eb;
	padding: 12px 16px;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	display: none;
}

.aicb-typing.show {
	display: flex;
	gap: 4px;
}

.aicb-typing span {
	width: 6px;
	height: 6px;
	background: #9ca3af;
	border-radius: 50%;
	animation: aicb-bounce 1.4s infinite;
}

.aicb-typing span:nth-child(2) { animation-delay: 0.2s; }
.aicb-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aicb-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	30%           { transform: translateY(-6px); }
}

/* Input area */
.aicb-input-area {
	padding: 12px;
	background: #fff;
	border-top: 1px solid #e5e7eb;
	display: flex;
	gap: 8px;
	align-items: center;
}

.aicb-input {
	flex: 1;
	border: 1px solid #e5e7eb;
	border-radius: 22px;
	padding: 10px 16px;
	font-size: 13.5px;
	outline: none;
	transition: border-color 0.15s;
	font-family: inherit;
}

.aicb-input:focus {
	border-color: var(--aicb-primary, #6366f1);
}

.aicb-send {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--aicb-primary, #6366f1);
	border: 0;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: opacity 0.15s;
}

.aicb-send:hover {
	opacity: 0.9;
}

.aicb-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Quick replies (optional chips) */
.aicb-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 16px 12px;
	background: #f8f9fb;
}

.aicb-quick-reply {
	background: #fff;
	border: 1px solid var(--aicb-primary, #6366f1);
	color: var(--aicb-primary, #6366f1);
	padding: 6px 12px;
	border-radius: 16px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.15s;
}

.aicb-quick-reply:hover {
	background: var(--aicb-primary, #6366f1);
	color: #fff;
}

/* Mobile responsive */
@media (max-width: 600px) {
	.aicb-widget {
		width: 100vw;
		height: 100vh;
		max-width: 100vw;
		max-height: 100vh;
		border-radius: 0;
		bottom: 0 !important;
		right: 0 !important;
		left: 0 !important;
		top: 0 !important;
	}

	.aicb-launcher {
		bottom: 16px;
		right: 16px;
	}
}