/**

 * AI Chat Bubble - Public Styles

 *

 * @package AI_Chat_Bubble

 */



/* Container */

.ai-chat-bubble-container {

	position: fixed;

	bottom: 100px;

	right: 20px;

	z-index: 999999;

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

}



/* Wrapper */

.ai-bubble-wrapper {

	position: relative;

	display: flex;

	flex-direction: column;

	align-items: flex-end;

	gap: 10px;

}



/* Main Bubble Button */

.ai-bubble-main {

	width: 60px;

	height: 60px;

	border-radius: 50%;

	background: #b4e717;

	display: flex;

	align-items: center;

	justify-content: center;

	box-shadow: 0 4px 24px #b4e717;

	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	color: #fff;

	position: relative;

	z-index: 2;

}



.ai-bubble-main:hover {

	transform: scale(1.1);

	box-shadow: 0 8px 32px rgba(99, 102, 241, 0.5);

}



.ai-bubble-main:active {

	transform: scale(0.95);

}



.ai-bubble-main svg {

	width: 28px;

	height: 28px;

	transition: transform 0.3s ease;

}



.ai-bubble-main.active svg {

	transform: rotate(90deg);

}



/* Tools Container */

.ai-bubble-tools {

	display: flex;

	flex-direction: column;

	align-items: flex-end;

	gap: 10px;

	opacity: 0;

	visibility: hidden;

	transform: translateY(10px);

	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	pointer-events: none;

}



.ai-bubble-tools.active {

	opacity: 1;

	visibility: visible;

	transform: translateY(0);

	pointer-events: all;

}



/* Individual AI Tool Buttons */

.ai-bubble-btn {

	width: 50px;

	height: 50px;

	border-radius: 50%;

	background: #ffffff;

	border: 2px solid #e5e7eb;

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	text-decoration: none;

	/* color: #374151; */

	position: relative;

	transform-origin: center;

	animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;

	opacity: 0;

}



.ai-bubble-btn:hover {

	transform: scale(1.1) translateX(-5px);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);

	border-color: #b4e717;

}



.ai-bubble-btn:active {

	transform: scale(0.95) translateX(-5px);

}



/* Stagger animation for tool buttons */

.ai-bubble-tools.active .ai-bubble-btn:nth-child(1) {

	animation-delay: 0.05s;

}



.ai-bubble-tools.active .ai-bubble-btn:nth-child(2) {

	animation-delay: 0.1s;

}



.ai-bubble-tools.active .ai-bubble-btn:nth-child(3) {

	animation-delay: 0.15s;

}



.ai-bubble-tools.active .ai-bubble-btn:nth-child(4) {

	animation-delay: 0.2s;

}



.ai-bubble-tools.active .ai-bubble-btn:nth-child(5) {

	animation-delay: 0.25s;

}



@keyframes slideIn {

	to {

		opacity: 1;

		transform: translateX(0);

	}

}



/* Tool Icons */

.ai-bubble-btn svg,

.ai-bubble-btn img {

	width: 24px;

	height: 24px;

	object-fit: contain;

}



/* Tooltip */

.ai-bubble-btn::before {

	content: attr(data-tooltip);

	position: absolute;

	right: calc(100% + 12px);

	top: 50%;

	transform: translateY(-50%) translateX(10px);

	background: #1f2937;

	color: #fff;

	padding: 6px 12px;

	border-radius: 6px;

	font-size: 13px;

	white-space: nowrap;

	opacity: 0;

	visibility: hidden;

	transition: all 0.3s ease;

	pointer-events: none;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

}



.ai-bubble-btn::after {

	content: '';

	position: absolute;

	right: calc(100% + 6px);

	top: 50%;

	transform: translateY(-50%);

	border: 6px solid transparent;

	border-left-color: #b4e717;

	opacity: 0;

	visibility: hidden;

	transition: all 0.3s ease;

	pointer-events: none;

}



.ai-bubble-btn:hover::before,

.ai-bubble-btn:hover::after {

	opacity: 1;

	visibility: visible;

	transform: translateY(-50%) translateX(0);

}



/* Responsive Design */

@media (max-width: 768px) {

	.ai-chat-bubble-container {

		bottom: 15px;

		right: 15px;

	}



	.ai-bubble-main {

		width: 54px;

		height: 54px;

	}



	.ai-bubble-main svg {

		width: 24px;

		height: 24px;

	}



	.ai-bubble-btn {

		width: 46px;

		height: 46px;

	}



	.ai-bubble-btn svg,

	.ai-bubble-btn img {

		width: 22px;

		height: 22px;

	}



	.ai-bubble-btn::before {

		font-size: 12px;

		padding: 5px 10px;

	}

}



@media (max-width: 480px) {

	.ai-chat-bubble-container {

		bottom: 12px;

		right: 12px;

	}



	.ai-bubble-main {

		width: 50px;

		height: 50px;

	}



	.ai-bubble-main svg {

		width: 22px;

		height: 22px;

	}



	.ai-bubble-btn {

		width: 42px;

		height: 42px;

	}



	.ai-bubble-btn svg,

	.ai-bubble-btn img {

		width: 20px;

		height: 20px;

	}

}



/* Accessibility */

.ai-bubble-main:focus,

.ai-bubble-btn:focus {

	outline: 2px solid #b4e717;

	outline-offset: 2px;

}



/* Print - Hide the bubble when printing */

@media print {

	.ai-chat-bubble-container {

		display: none !important;

	}

}