/* ===== AI Chat Widget - Frontend Styles ===== */
/* Default theme: deep indigo -> mint teal gradient (overridable from Settings -> Appearance) */

#aicw-root {
	--aicw-primary: #5B4FE9;
	--aicw-accent: #00D9B5;
	position: fixed;
	bottom: 24px;
	z-index: 999999;
	font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
#aicw-root.aicw-position-right { right: 24px; }
#aicw-root.aicw-position-left  { left: 24px; }

/* ---- Launcher button ---- */
#aicw-launcher {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--aicw-primary), var(--aicw-accent));
	box-shadow: 0 8px 24px rgba(91, 79, 233, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	animation: aicw-pulse 2.4s infinite;
}
#aicw-launcher:hover {
	transform: scale(1.08) rotate(-4deg);
	box-shadow: 0 10px 30px rgba(91, 79, 233, 0.6);
}
@keyframes aicw-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(91, 79, 233, 0.45); }
	70%  { box-shadow: 0 0 0 14px rgba(91, 79, 233, 0); }
	100% { box-shadow: 0 0 0 0 rgba(91, 79, 233, 0); }
}

/* Gentle up/down bobbing, toggled from Settings -> Floating Hover Effect */
#aicw-launcher.aicw-float {
	animation: aicw-pulse 2.4s infinite, aicw-float 2.6s ease-in-out infinite;
}
@keyframes aicw-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
#aicw-launcher.aicw-float:hover {
	animation-play-state: paused;
}

/* ---- Advanced Animations: rotating glow ring behind the launcher ----
   Toggled from Settings -> Appearance -> Advanced Animations. Pure transform
   + blur on a single small pseudo-element, so it's cheap on the GPU and
   costs nothing at all when the setting is off (the rule simply never matches). */
.aicw-animations-on #aicw-launcher { z-index: 1; }
.aicw-animations-on #aicw-launcher::before {
	content: '';
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--aicw-primary), var(--aicw-accent), var(--aicw-primary));
	filter: blur(6px);
	opacity: 0.5;
	z-index: -1;
	animation: aicw-aura-spin 5s linear infinite;
	pointer-events: none;
}
@keyframes aicw-aura-spin {
	to { transform: rotate(360deg); }
}

.aicw-launcher-icon {
	font-size: 18px;
	position: absolute;
	transition: opacity 0.2s, transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.aicw-launcher-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.aicw-icon-close { opacity: 0; transform: scale(0.5) rotate(-90deg); }
#aicw-root.aicw-open .aicw-icon-chat { opacity: 0; transform: scale(0.5) rotate(90deg); }
#aicw-root.aicw-open .aicw-icon-close { opacity: 1; transform: scale(1) rotate(0deg); }

/* ---- Unread reply badge ----
   Functional (always active regardless of the animation setting) - counts
   replies that arrive while the window is closed. Only its "pop" entrance
   is treated as decorative motion and gated below. */
.aicw-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #FF4757;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(255, 71, 87, 0.5);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.aicw-badge-hidden {
	opacity: 0;
	transform: scale(0.4);
	pointer-events: none;
}
.aicw-animations-on .aicw-badge-pop {
	animation: aicw-badge-pop 0.45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes aicw-badge-pop {
	0%   { transform: scale(0); }
	60%  { transform: scale(1.3); }
	100% { transform: scale(1); }
}

/* ---- Opening sparkle burst ----
   6 tiny dots that radiate out once when the launcher opens the window.
   JS only ever adds the trigger class when animations are enabled, and
   removes it right after, so there's zero ongoing cost either way. */
.aicw-spark-wrap { position: absolute; inset: 0; pointer-events: none; }
.aicw-spark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	opacity: 0;
	transform: rotate(calc(var(--i) * 60deg)) translateY(0) scale(0.4);
}
.aicw-spark:nth-child(odd)  { background: var(--aicw-accent); }
.aicw-spark:nth-child(even) { background: var(--aicw-primary); }
.aicw-burst-active .aicw-spark {
	animation: aicw-spark-burst 0.7s ease-out;
}
@keyframes aicw-spark-burst {
	0%   { opacity: 1; transform: rotate(calc(var(--i) * 60deg)) translateY(0) scale(0.4); }
	40%  { opacity: 1; }
	100% { opacity: 0; transform: rotate(calc(var(--i) * 60deg)) translateY(-28px) scale(1); }
}

/* ---- Chat window ---- */
#aicw-window {
	position: absolute;
	bottom: 68px;
	right: 0;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 580px;
	max-height: 78vh;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
#aicw-root.aicw-position-left #aicw-window { right: auto; left: 0; transform-origin: bottom left; }
#aicw-window.aicw-hidden {
	opacity: 0;
	transform: scale(0.85) translateY(10px);
	pointer-events: none;
}

/* ---- Header ---- */
#aicw-header {
	background: linear-gradient(135deg, var(--aicw-primary), var(--aicw-accent));
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.aicw-header-info { display: flex; align-items: center; gap: 10px; }
.aicw-avatar {
	width: 38px; height: 38px;
	background: rgba(255,255,255,0.25);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
}
/* Soft "breathing" glow on the header avatar - advanced animations only */
.aicw-animations-on .aicw-avatar {
	animation: aicw-avatar-glow 2.6s ease-in-out infinite;
}
@keyframes aicw-avatar-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
	50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}
.aicw-bot-name { font-weight: 700; font-size: 15px; letter-spacing: 0.2px; }
.aicw-status { font-size: 11px; opacity: 0.9; display: flex; align-items: center; gap: 5px; }
.aicw-dot-online {
	width: 7px; height: 7px; border-radius: 50%;
	background: #4ade80;
	display: inline-block;
	box-shadow: 0 0 6px #4ade80;
}
#aicw-close-btn {
	background: rgba(255,255,255,0.18);
	border: none;
	color: #fff;
	width: 28px; height: 28px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 13px;
}
#aicw-close-btn:hover { background: rgba(255,255,255,0.32); }

/* ---- Messages ---- */
#aicw-messages {
	flex: 1;
	padding: 18px 16px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #F7F6FE;
}
#aicw-messages::-webkit-scrollbar { width: 5px; }
#aicw-messages::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

.aicw-msg {
	max-width: 80%;
	padding: 12px 15px;
	border-radius: 16px;
	font-size: 13.5px;
	line-height: 1.6;
	word-wrap: break-word;
	animation: aicw-fade-in 0.2s ease;
}
@keyframes aicw-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Springier pop-in used instead of the plain fade above when animations are on */
.aicw-animations-on .aicw-msg {
	animation: aicw-msg-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes aicw-msg-pop {
	0%   { opacity: 0; transform: translateY(10px) scale(0.92); }
	60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
.aicw-msg-user {
	align-self: flex-end;
	background: linear-gradient(135deg, var(--aicw-primary), var(--aicw-accent));
	color: #fff;
	border-bottom-right-radius: 4px;
}
.aicw-msg-bot {
	align-self: flex-start;
	position: relative;
	background: #fff;
	color: #1f1f29;
	border: 1px solid #ece9fb;
	border-bottom-left-radius: 4px;
}
.aicw-msg-error {
	align-self: flex-start;
	background: #FEE2E2;
	color: #991B1B;
	border-bottom-left-radius: 4px;
}
.aicw-msg code {
	background: rgba(0,0,0,0.06);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 0.9em;
	font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
}
.aicw-msg-user code { background: rgba(255,255,255,0.22); }
.aicw-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Small copy-to-clipboard affordance on bot replies. Always available -
   this is a basic UI control, not one of the decorative "advanced" effects. */
.aicw-copy-btn {
	position: absolute;
	bottom: -9px;
	right: 8px;
	width: 20px; height: 20px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid #ece9fb;
	background: #fff;
	color: #8a84a8;
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.55;
	transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.aicw-copy-btn:hover,
.aicw-copy-btn:focus-visible {
	opacity: 1;
	color: var(--aicw-primary);
	transform: scale(1.1);
}
.aicw-copy-btn.aicw-copy-done {
	opacity: 1;
	color: #16a34a;
	border-color: #bbf0cf;
}

/* ---- Typing dots ---- */
#aicw-typing { padding: 0 16px 8px; background: #F7F6FE; }
.aicw-typing-bubble {
	display: inline-flex;
	gap: 4px;
	background: #fff;
	border: 1px solid #ece9fb;
	padding: 10px 14px;
	border-radius: 16px;
	border-bottom-left-radius: 4px;
}
.aicw-typing-bubble span {
	width: 6px; height: 6px;
	background: var(--aicw-primary);
	border-radius: 50%;
	display: inline-block;
	animation: aicw-blink 1.2s infinite ease-in-out both;
}
.aicw-typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
.aicw-typing-bubble span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aicw-blink {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
	40% { transform: scale(1); opacity: 1; }
}
/* Gentle vertical wave instead of the plain blink when animations are on */
.aicw-animations-on .aicw-typing-bubble span {
	animation: aicw-blink-wave 1.2s infinite ease-in-out both;
}
@keyframes aicw-blink-wave {
	0%, 80%, 100% { transform: translateY(0) scale(0.6); opacity: 0.4; }
	40%           { transform: translateY(-4px) scale(1); opacity: 1; }
}

/* ---- Input form ---- */
#aicw-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	background: #fff;
	border-top: 1px solid #ece9fb;
}
#aicw-input {
	flex: 1;
	border: 1px solid #e2ddfb;
	background: #F7F6FE;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13.5px;
	outline: none;
	transition: border-color 0.2s;
}
#aicw-input:focus { border-color: var(--aicw-primary); }
#aicw-send-btn {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, var(--aicw-primary), var(--aicw-accent));
	color: #fff;
	cursor: pointer;
	font-size: 15px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	transition: transform 0.15s;
}
#aicw-send-btn:hover { transform: scale(1.08); }
.aicw-hidden { display: none !important; }

/* Click ripple on the send button - JS only creates this element at all
   when advanced animations are enabled, so it costs nothing when they're off. */
.aicw-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,0.55);
	transform: scale(0);
	opacity: 1;
	pointer-events: none;
	animation: aicw-ripple-anim 0.5s ease-out forwards;
}
@keyframes aicw-ripple-anim {
	to { transform: scale(2.4); opacity: 0; }
}

/* ---- Creator credit ---- */
#aicw-credit {
	text-align: center;
	font-size: 10.5px;
	color: #9a94b8;
	padding: 6px 0 10px;
	background: #fff;
	letter-spacing: 0.2px;
}
#aicw-credit strong {
	background: linear-gradient(135deg, var(--aicw-primary), var(--aicw-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 700;
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
	#aicw-window { width: calc(100vw - 24px); height: 72vh; bottom: 68px; }
}

/* ---- Respect the OS-level "reduce motion" accessibility setting ----
   This overrides everything above regardless of the Advanced Animations
   setting, so people who've asked their device for less motion always get it. */
@media (prefers-reduced-motion: reduce) {
	#aicw-launcher,
	#aicw-launcher.aicw-float,
	.aicw-msg,
	.aicw-animations-on #aicw-launcher::before,
	.aicw-animations-on .aicw-avatar,
	.aicw-typing-bubble span,
	.aicw-badge,
	.aicw-badge-pop,
	.aicw-spark,
	.aicw-ripple,
	#aicw-window {
		animation: none !important;
		transition: none !important;
	}
}