/**
 * Sant Chat AI - Playful Design System
 *
 * @package Sant_Chat_AI
 * @since 1.0.0
 *
 * A modern, friendly design system featuring:
 * - Grid paper background
 * - Dark conversation container
 * - Pill-shaped buttons
 * - Bold modern typography
 * - Colorful accent cards
 * - Hand-drawn decorative elements
 *
 * CSS Custom Properties:
 * --playful-primary: Primary accent color (default: #F5D547 yellow)
 * --playful-primary-hover: Darker version for hover states
 * --playful-chat-bg: Chat conversation background (#1A1A1A)
 * --playful-bot-msg-bg: Bot message bubble (#2D2D2D)
 * --playful-card-pink: Pink card color (#F5C6D6)
 * --playful-card-mint: Mint card color (#C5E8D5)
 * --playful-card-yellow: Yellow card color (#FEF3C7)
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

.sant-design-playful {
	--playful-primary: #F5D547;
	--playful-primary-hover: #E5C537;
	--playful-primary-text: #1A1A1A;
	--playful-chat-bg: #1A1A1A;
	--playful-bot-msg-bg: #2D2D2D;
	--playful-bot-msg-text: #FFFFFF;
	--playful-user-msg-bg: var(--playful-primary);
	--playful-user-msg-text: #1A1A1A;
	--playful-widget-bg: #FAFAF8;
	--playful-card-pink: #F5C6D6;
	--playful-card-mint: #C5E8D5;
	--playful-card-yellow: #FEF3C7;
	--playful-border-radius: 24px;
	--playful-btn-radius: 50px;
}

/* ==========================================================================
   Chat Window Positioning - Protrudes from Bubble
   ========================================================================== */

.sant-design-playful #chat-window {
	position: fixed !important;
	bottom: 100px !important;
	right: 20px !important;
}

/* Chat bubble - smaller and white */
.sant-design-playful~#chat-bubble-container #chat-bubble {
	background: #FFFFFF !important;
	width: 52px !important;
	height: 52px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.sant-design-playful~#chat-bubble-container #chat-bubble svg {
	stroke: #1A1A1A !important;
	width: 24px !important;
	height: 24px !important;
}

/* Chat bubble when open - stays white, becomes minimize button */
.sant-design-playful.chat-open~#chat-bubble-container #chat-bubble {
	background: #FFFFFF !important;
	width: 52px !important;
	height: 52px !important;
}

.sant-design-playful.chat-open~#chat-bubble-container #chat-bubble svg {
	stroke: #1A1A1A !important;
}

/* Chevron icon smaller than chat icon */
.sant-design-playful~#chat-bubble-container #chat-bubble #bubble-icon-minimize {
	width: 18px !important;
	height: 18px !important;
}

/* ==========================================================================
   Font Import - Playful uses bold modern sans-serif
   ========================================================================== */

/* System font stack — replaces Google Fonts DM Sans for WordPress.org compliance */

/* ==========================================================================
   Typography
   ========================================================================== */

.sant-design-playful #chat-window,
.sant-design-playful #chat-window *,
.sant-design-playful #message-area,
.sant-design-playful #message-area *,
.sant-design-playful #user-input,
.sant-design-playful #chat-window p,
.sant-design-playful #chat-window div,
.sant-design-playful .sant-message-text,
.sant-design-playful .sant-message-text p,
.sant-design-playful #sant-quick-replies button {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: var(--sant-font-size, 15px);
	line-height: var(--sant-line-height, 1.5);
}

.sant-design-playful #sant-quick-replies button {
	font-weight: 600 !important;
}

.sant-design-playful #chat-window h3,
.sant-design-playful #chat-window h2,
.sant-design-playful #chat-window h4 {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ==========================================================================
   Main Container - Grid Background
   ========================================================================== */

.sant-design-playful #chat-window {
	background: var(--playful-widget-bg) !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
	border-radius: var(--playful-border-radius) !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   Home Tab - Playful Style
   ========================================================================== */

.sant-design-playful #tab-home,
.sant-design-playful #tab-messages {
	background: transparent !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* Brand Badge - Pill shaped */
.sant-design-playful .playful-brand-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: #1A1A1A;
	color: #FFFFFF;
	border-radius: var(--playful-btn-radius);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 20px;
}

.sant-design-playful .playful-brand-badge .brand-icon {
	font-size: 16px;
}

/* Home Gradient Section Override */
.sant-design-playful #home-gradient-section {
	background: var(--playful-widget-bg) !important;
	padding: 32px 24px 24px 24px !important;
	border-radius: var(--playful-border-radius) var(--playful-border-radius) 0 0 !important;
}

/* Welcome Headline */
.sant-design-playful #home-greeting h2 {
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #1A1A1A !important;
	margin: 0 0 8px 0 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.15 !important;
}

.sant-design-playful #home-greeting p {
	font-size: 16px !important;
	color: #6B7280 !important;
	opacity: 1 !important;
	margin: 0 !important;
}

/* NOTE: Close button styling consolidated at bottom of file (~line 1010+)
   CTA button styling consolidated at #playful-home #home-message-btn (~line 940+) */

.sant-design-playful #home-message-btn svg {
	stroke: var(--playful-primary-text) !important;
}

/* Action Icons on Home - Playful Style */
.sant-design-playful #action-icons button,
.sant-design-playful #action-icons a {
	background: rgba(26, 26, 26, 0.08) !important;
	border-radius: 14px !important;
}

.sant-design-playful #action-icons button:hover,
.sant-design-playful #action-icons a:hover {
	background: rgba(26, 26, 26, 0.15) !important;
}

.sant-design-playful #action-icons svg {
	stroke: #1A1A1A !important;
}

/* ==========================================================================
   Chat Conversation - Dark Theme
   ========================================================================== */

.sant-design-playful #chat-conversation {
	background: var(--playful-chat-bg) !important;
	border-radius: var(--playful-border-radius) var(--playful-border-radius) 0 0 !important;
	margin: 12px 12px 0 12px !important;
	padding: 0 !important;
}

.sant-design-playful #chat-conversation>.flex.items-center {
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	padding: 12px 16px !important;
	border-radius: var(--playful-border-radius) var(--playful-border-radius) 0 0 !important;
}

/* Back Button */
.sant-design-playful #back-to-home {
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.sant-design-playful #back-to-home:hover {
	background: rgba(255, 255, 255, 0.2) !important;
}

/* Close Button in Conversation */
.sant-design-playful #conversation-close-btn {
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.sant-design-playful #conversation-close-btn:hover {
	background: rgba(255, 255, 255, 0.2) !important;
}

/* Conversation Title */
.sant-design-playful #chat-conversation h4 {
	color: #FFFFFF !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}

/* ==========================================================================
   Message Bubbles
   ========================================================================== */

/* Bot Messages - Dark gray bubbles */
.sant-design-playful .bot-message,
.sant-design-playful [style*="bot_msg_bg"] {
	background: var(--playful-bot-msg-bg) !important;
	color: var(--playful-bot-msg-text) !important;
	border-radius: 18px 18px 18px 4px !important;
	padding: 12px 16px !important;
}

/* User Messages - Primary color */
.sant-design-playful .user-message,
.sant-design-playful [style*="user_msg_bg"] {
	background: var(--playful-user-msg-bg) !important;
	color: var(--playful-user-msg-text) !important;
	border-radius: 18px 18px 4px 18px !important;
	padding: 12px 16px !important;
}

/* Message text styling */
.sant-design-playful .sant-message-text {
	border-radius: 18px !important;
}

/* User label */
.sant-design-playful .user-message-label {
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

/* ==========================================================================
   Thinking Indicator
   ========================================================================== */

.sant-design-playful .thinking-dot {
	background: rgba(255, 255, 255, 0.6) !important;
}

/* Stop Generate Button */
.sant-design-playful .stop-generate-btn {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: var(--playful-btn-radius) !important;
	padding: 8px 16px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}

.sant-design-playful .stop-generate-btn:hover {
	background: rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   Chat Input Area
   ========================================================================== */

.sant-design-playful #chat-input-container {
	background: var(--playful-chat-bg) !important;
	border-top: none !important;
	padding: 16px !important;
	margin: 0 12px 12px 12px !important;
	border-radius: 0 0 var(--playful-border-radius) var(--playful-border-radius) !important;
}

.sant-design-playful #user-input {
	background: #FFFFFF !important;
	border: 2px solid #E5E7EB !important;
	border-radius: var(--playful-btn-radius) !important;
	padding: 14px 20px !important;
	color: #1A1A1A !important;
	font-size: 15px !important;
}

.sant-design-playful #user-input:focus {
	border-color: var(--playful-primary) !important;
	box-shadow: 0 0 0 3px rgba(245, 213, 71, 0.2) !important;
	background: #FFFFFF !important;
}

.sant-design-playful #user-input::placeholder {
	color: #9CA3AF !important;
}

/* Send Button - Circular with primary color */
.sant-design-playful #send-button {
	background: var(--playful-primary) !important;
	color: var(--playful-primary-text) !important;
	border-radius: 50% !important;
	width: 46px !important;
	height: 46px !important;
	box-shadow: 0 4px 12px rgba(245, 213, 71, 0.4) !important;
}

.sant-design-playful #send-button:hover {
	background: var(--playful-primary-hover) !important;
	transform: scale(1.05) !important;
	box-shadow: 0 6px 16px rgba(245, 213, 71, 0.5) !important;
}

.sant-design-playful #send-button svg {
	stroke: var(--playful-primary-text) !important;
}

/* ==========================================================================
   Quick Replies - Pill shaped
   ========================================================================== */

.sant-design-playful #sant-quick-replies {
	padding: 12px !important;
	gap: 8px !important;
}

/* Quick reply buttons on dark background */
.sant-design-playful #sant-quick-replies button {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: var(--playful-btn-radius) !important;
	padding: 10px 18px !important;
	font-size: 13px !important;
	transition: all 0.2s ease !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.sant-design-playful #sant-quick-replies button:hover {
	background: var(--playful-primary) !important;
	color: var(--playful-primary-text) !important;
	border-color: var(--playful-primary) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(245, 213, 71, 0.3) !important;
}

/* ==========================================================================
   Messages Tab - Session History
   ========================================================================== */

/* Messages CTA Button - must match #home-message-btn exactly */
.sant-design-playful #tab-messages #messages-new-chat,
.sant-design-playful #messages-new-chat {
	background: var(--playful-primary) !important;
	color: var(--playful-primary-text) !important;
	border-radius: var(--playful-btn-radius) !important;
	font-weight: 600 !important;
	font-size: 24px !important;
	padding: 14px 20px !important;
	box-shadow: 0 4px 14px rgba(245, 213, 71, 0.4) !important;
	transition: all 0.2s ease !important;
	border: none !important;
	flex-shrink: 0 !important;
}

.sant-design-playful #tab-messages #messages-new-chat:hover,
.sant-design-playful #messages-new-chat:hover {
	background: var(--playful-primary-hover) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(245, 213, 71, 0.5) !important;
}

/* Session Cards - Pill tags style */
.sant-design-playful .session-card {
	background: #FFFFFF !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 16px !important;
	padding: 16px !important;
	transition: all 0.2s ease !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.sant-design-playful .session-card:hover {
	border-color: var(--playful-primary) !important;
	box-shadow: 0 4px 12px rgba(245, 213, 71, 0.2) !important;
	transform: translateY(-2px) !important;
}

/* Empty State Container */
.sant-design-playful #messages-empty {
	background: transparent !important;
	min-height: 380px !important;
}

/* Empty State Icon Circle - Override inline background */
.sant-design-playful #messages-empty>div:first-child,
.sant-design-playful #tab-messages #messages-empty>div[style*="border-radius: 50%"] {
	background: var(--playful-primary) !important;
	box-shadow: 0 8px 20px rgba(245, 213, 71, 0.4) !important;
}

/* Empty State Heading */
.sant-design-playful #messages-empty h3 {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #1A1A1A !important;
	letter-spacing: -0.02em !important;
}

/* Empty State Description */
.sant-design-playful #messages-empty p {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 15px !important;
	color: #6B7280 !important;
	line-height: 1.6 !important;
}

/* Send us a message CTA Button - Override inline styles */
.sant-design-playful #tab-messages #messages-start-chat,
.sant-design-playful #messages-start-chat,
.sant-design-playful #messages-empty .messages-cta-btn {
	background: var(--playful-primary) !important;
	color: var(--playful-primary-text) !important;
	border-radius: var(--playful-btn-radius) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	padding: 14px 28px !important;
	box-shadow: 0 4px 14px rgba(245, 213, 71, 0.4) !important;
	transition: all 0.2s ease !important;
}

.sant-design-playful #tab-messages #messages-start-chat:hover,
.sant-design-playful #messages-start-chat:hover,
.sant-design-playful #messages-empty .messages-cta-btn:hover {
	background: var(--playful-primary-hover) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(245, 213, 71, 0.5) !important;
}

/* Messages List Container */
.sant-design-playful #messages-list {
	padding: 16px 20px !important;
}

/* ==========================================================================
   Help Tab - Colorful Cards
   ========================================================================== */

/* Help Action Icons - Classic design fallback (not used in Playful) */
/* Commented out as Playful uses .playful-action-icons class instead */

/* Search Input - Pill shaped */
.sant-design-playful #help-search {
	background: #FFFFFF !important;
	border: 2px solid #E5E7EB !important;
	border-radius: var(--playful-btn-radius) !important;
	padding: 14px 20px !important;
}

.sant-design-playful #help-search:focus {
	border-color: var(--playful-primary) !important;
	box-shadow: 0 0 0 3px rgba(245, 213, 71, 0.2) !important;
}

/* FAQ Items - Colorful cards */
.sant-design-playful .help-faq-item {
	background: #FFFFFF !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 16px !important;
	margin-bottom: 12px !important;
	overflow: hidden !important;
	transition: all 0.2s ease !important;
}

.sant-design-playful .help-faq-item:hover {
	border-color: var(--playful-primary) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Alternate card colors */
.sant-design-playful .help-faq-item:nth-child(3n+1) {
	border-left: 4px solid var(--playful-card-pink) !important;
}

.sant-design-playful .help-faq-item:nth-child(3n+2) {
	border-left: 4px solid var(--playful-card-mint) !important;
}

.sant-design-playful .help-faq-item:nth-child(3n+3) {
	border-left: 4px solid var(--playful-card-yellow) !important;
}

.sant-design-playful .help-faq-header {
	padding: 16px !important;
}

.sant-design-playful .help-faq-header span {
	font-weight: 600 !important;
	color: #1A1A1A !important;
}

.sant-design-playful .help-faq-content {
	padding: 0 16px 16px 16px !important;
	color: #6B7280 !important;
}

/* FAQ Icon Container */
.sant-design-playful .help-faq-header>div:first-child {
	background: rgba(245, 213, 71, 0.2) !important;
	border-radius: 10px !important;
}

.sant-design-playful .help-faq-header>div:first-child svg {
	color: #1A1A1A !important;
}

/* ==========================================================================
   News Tab - Card Layout
   ========================================================================== */

.sant-design-playful #tab-news h3 {
	color: #1A1A1A !important;
	font-weight: 700 !important;
}

/* News posts container - single column */
.sant-design-playful #news-posts-container {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

/* Featured news card - large with image */
.sant-design-playful .news-card.news-featured {
	background: #1A1A1A !important;
	border: none !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.sant-design-playful .news-card.news-featured:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.sant-design-playful .news-card.news-featured .news-card-image {
	width: 100% !important;
	height: 140px !important;
	object-fit: cover !important;
	display: block !important;
}

.sant-design-playful .news-card.news-featured .news-card-content {
	padding: 14px 16px 16px 16px !important;
}

.sant-design-playful .news-card.news-featured .news-card-title {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin: 0 0 6px 0 !important;
	line-height: 1.3 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.sant-design-playful .news-card.news-featured .news-card-excerpt {
	display: block !important;
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.7) !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Compact news items - text only */
.sant-design-playful .news-card.news-compact {
	background: #F5F5F5 !important;
	border: none !important;
	border-radius: 14px !important;
	padding: 14px 16px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.sant-design-playful .news-card.news-compact:hover {
	background: #EBEBEB !important;
}

.sant-design-playful .news-card.news-compact .news-card-content {
	flex: 1 !important;
	padding: 0 !important;
}

.sant-design-playful .news-card.news-compact .news-card-title {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1A1A1A !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* ==========================================================================
   Bottom Navigation
   ========================================================================== */

.sant-design-playful #bottom-nav {
	background: #FFFFFF !important;
	border-top: 1px solid #E5E7EB !important;
	border-radius: 0 0 var(--playful-border-radius) var(--playful-border-radius) !important;
}

.sant-design-playful .nav-tab {
	color: #9CA3AF !important;
	border-radius: 12px !important;
	margin: 4px !important;
	transition: all 0.2s ease !important;
}

.sant-design-playful .nav-tab:hover {
	background: rgba(245, 213, 71, 0.1) !important;
	transform: none !important;
}

.sant-design-playful .nav-tab.active {
	color: #1A1A1A !important;
	background: rgba(245, 213, 71, 0.15) !important;
}

.sant-design-playful .nav-tab.active::after {
	display: none !important;
}

.sant-design-playful .nav-tab svg {
	stroke: #9CA3AF !important;
}

.sant-design-playful .nav-tab.active svg {
	stroke: #1A1A1A !important;
}

/* ==========================================================================
   Footer Links
   ========================================================================== */

.sant-design-playful #footer-links {
	background: #FFFFFF !important;
	border-color: #E5E7EB !important;
}

.sant-design-playful #footer-links a {
	color: #9CA3AF !important;
}

.sant-design-playful #footer-links a:hover {
	color: #1A1A1A !important;
}

/* ==========================================================================
   Chat Bubble Button
   ========================================================================== */

.sant-design-playful+div #chat-bubble,
#chatbot-container.sant-design-playful~div #chat-bubble {
	background: #FFFFFF !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
	width: 52px !important;
	height: 52px !important;
}

.sant-design-playful+div #chat-bubble:hover,
#chatbot-container.sant-design-playful~div #chat-bubble:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
	transform: scale(1.05) !important;
}

.sant-design-playful+div #chat-bubble svg,
#chatbot-container.sant-design-playful~div #chat-bubble svg {
	stroke: #1A1A1A !important;
	color: #1A1A1A !important;
	width: 24px !important;
	height: 24px !important;
}

/* ==========================================================================
   Rating Buttons - Dark theme style
   ========================================================================== */

.sant-design-playful .rating-buttons {
	margin-top: 8px !important;
}

.sant-design-playful .rating-buttons span {
	color: rgba(255, 255, 255, 0.5) !important;
	font-size: 12px !important;
}

.sant-design-playful .rating-buttons button {
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 8px !important;
	padding: 6px 10px !important;
	font-size: 14px !important;
	transition: all 0.2s ease !important;
}

.sant-design-playful .rating-buttons button:hover {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	transform: scale(1.1) !important;
}

/* Rated states */
.sant-design-playful .rating-buttons button.rated {
	opacity: 0.4 !important;
}

.sant-design-playful .rating-buttons button.rated-selected {
	background: rgba(255, 255, 255, 0.25) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	opacity: 1 !important;
}

/* Feedback text colors for dark mode */
/* Feedback text colors for dark mode */
.sant-design-playful .rating-buttons span.feedback-positive {
	color: #FFFFFF !important;
}

.sant-design-playful .rating-buttons span.feedback-negative {
	color: #FFFFFF !important;
}

.sant-design-playful .sant-rating-btn {
	opacity: 0.6 !important;
}

.sant-design-playful .sant-rating-btn:hover {
	opacity: 1 !important;
}

/* ==========================================================================
   Scrollbar - Dark theme style
   ========================================================================== */

.sant-design-playful #message-area {
	background: transparent !important;
	scrollbar-width: thin !important;
	scrollbar-color: #4B5563 transparent !important;
}

.sant-design-playful #message-area::-webkit-scrollbar {
	width: 6px !important;
}

.sant-design-playful #message-area::-webkit-scrollbar-track {
	background: transparent !important;
}

.sant-design-playful #message-area::-webkit-scrollbar-thumb {
	background-color: #4B5563 !important;
	border-radius: 10px !important;
}

/* ==========================================================================
   Playful Home Screen - ChaTin Style
   ========================================================================== */

.sant-design-playful #playful-headline {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	color: #1A1A1A !important;
	line-height: 1.25 !important;
}

/* Stamp Gallery - 2x2 Grid */
.sant-design-playful #playful-stamps {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 8px !important;
	flex: 1 !important;
	min-height: 0 !important;
	overflow: hidden !important;
	align-content: center !important;
}

.sant-design-playful .playful-stamp {
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
	aspect-ratio: 4/3 !important;
	border-radius: 26% !important;
}

.sant-design-playful .playful-stamp:hover {
	transform: scale(1.02) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Playful Home - Grid paper background */
.sant-design-playful #playful-home {
	overflow: hidden !important;
	background-color: #FAFAF8 !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
	background-attachment: local !important;
}

/* Override chat window background for playful home tab */
.sant-design-playful #tab-home {
	background-color: #FAFAF8 !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
}

/* CTA Button - Let's chat now (single definitive rule) */
.sant-design-playful #playful-home #home-message-btn {
	background: var(--playful-primary) !important;
	color: var(--playful-primary-text, #1A1A1A) !important;
	border-radius: 50px !important;
	padding: 14px 20px !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 14px rgba(245, 213, 71, 0.4) !important;
	transition: all 0.2s ease !important;
	border: none !important;
	flex-shrink: 0 !important;
}

.sant-design-playful #playful-home #home-message-btn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(245, 213, 71, 0.5) !important;
}

/* Brand Badge - Force identical styling */
.sant-design-playful #playful-home .playful-brand-badge,
.sant-design-playful #playful-messages .playful-brand-badge {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	display: inline-flex !important;
	width: fit-content !important;
	margin: 0 0 12px 0 !important;
}

/* Playful Messages - IDENTICAL to playful-home */
.sant-design-playful #playful-messages {
	overflow: hidden !important;
	background-color: #FAFAF8 !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
	background-attachment: local !important;
}

.sant-design-playful #tab-messages {
	background-color: #FAFAF8 !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
}

/* ==========================================================================
   Help Tab - Playful Style
   ========================================================================== */

.sant-design-playful #tab-help {
	background-color: #FAFAF8 !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
	overflow: hidden !important;
}

.sant-design-playful #tab-help>div:first-child {
	padding: 20px !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Help close button - IDENTICAL to home/messages */
.sant-design-playful #home-close-btn,
.sant-design-playful #messages-close-btn,
.sant-design-playful #help-close-btn {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	background: #1A1A1A !important;
	border: none !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 10 !important;
	cursor: pointer !important;
}

/* Messages close button - override to use flex layout in header row */
.sant-design-playful #messages-close-btn {
	position: static !important;
	top: auto !important;
	right: auto !important;
	flex-shrink: 0 !important;
}

.sant-design-playful #home-close-btn svg,
.sant-design-playful #messages-close-btn svg,
.sant-design-playful #help-close-btn svg {
	width: 16px !important;
	height: 16px !important;
}

.sant-design-playful #home-close-btn svg path,
.sant-design-playful #messages-close-btn svg path,
.sant-design-playful #help-close-btn svg path {
	stroke: #FFFFFF !important;
}

.sant-design-playful #home-close-btn:hover,
.sant-design-playful #messages-close-btn:hover,
.sant-design-playful #help-close-btn:hover {
	background: #2D2D2D !important;
}

/* Help Tab Action Icons - Subtle gray cards matching FAQ style */
.sant-design-playful #tab-help .playful-action-icons {
	display: flex !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	margin-bottom: 16px !important;
	flex-wrap: wrap !important;
}

.sant-design-playful #tab-help .playful-action-icons>a,
.sant-design-playful #tab-help .playful-action-icons>button {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 12px 16px !important;
	background: #F5F5F5 !important;
	background-color: #F5F5F5 !important;
	border-radius: 16px !important;
	text-decoration: none !important;
	border: none !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
	min-width: 60px !important;
}

.sant-design-playful #tab-help .playful-action-icons>a:hover,
.sant-design-playful #tab-help .playful-action-icons>button:hover {
	background: #EBEBEB !important;
	background-color: #EBEBEB !important;
}

.sant-design-playful #tab-help .playful-action-icons svg {
	width: 22px !important;
	height: 22px !important;
}

.sant-design-playful #tab-help .playful-action-icons svg path {
	stroke: #1A1A1A !important;
}

.sant-design-playful #tab-help .playful-action-icons>a>span,
.sant-design-playful #tab-help .playful-action-icons>button>span {
	font-size: 11px !important;
	color: #4B5563 !important;
	font-weight: 500 !important;
}

/* Custom tooltips - gray bg with white text */
.sant-design-playful [title] {
	position: relative !important;
}

.sant-design-playful .playful-action-icons>a[title]::after,
.sant-design-playful .playful-action-icons>button[title]::after {
	content: attr(title) !important;
	position: absolute !important;
	bottom: 100% !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	padding: 6px 10px !important;
	background: #4B5563 !important;
	color: #FFFFFF !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	border-radius: 6px !important;
	white-space: nowrap !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.2s, visibility 0.2s !important;
	margin-bottom: 6px !important;
	z-index: 100 !important;
	pointer-events: none !important;
}

.sant-design-playful .playful-action-icons>a[title]:hover::after,
.sant-design-playful .playful-action-icons>button[title]:hover::after {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Playful Help - Brand badge positioning */
.sant-design-playful #playful-help .playful-brand-badge {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	margin: 0 0 16px 0 !important;
}

/* Playful Help - container alignment */
.sant-design-playful #playful-help {
	align-items: stretch !important;
	overflow: hidden !important;
	background-color: #FAFAF8 !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
	background-attachment: local !important;
}

/* Playful FAQ items - colorful pastel cards */
.sant-design-playful .playful-faq-item {
	width: 100% !important;
	border-radius: 20px !important;
	margin-bottom: 12px !important;
	border: none !important;
}

/* Dark theme FAQ items */
.sant-design-playful .playful-faq-item {
	background: #1A1A1A !important;
}

.sant-design-playful .playful-faq-header {
	padding: 18px !important;
}

.sant-design-playful .playful-faq-header span {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #FFFFFF !important;
}

/* Icon styling for dark cards */
.sant-design-playful .playful-faq-item .playful-faq-header>div:first-child {
	background: rgba(255, 255, 255, 0.15) !important;
}

.sant-design-playful .playful-faq-item .playful-faq-header>div:first-child svg {
	stroke: #FFFFFF !important;
}

/* Chevron color */
.sant-design-playful .playful-faq-chevron {
	color: #FFFFFF !important;
	opacity: 0.5 !important;
}

/* Expanded state - slightly lighter */
.sant-design-playful .playful-faq-item[style*="white"] {
	background: #2D2D2D !important;
}

/* ==========================================================================
   News Tab - Playful Style
   ========================================================================== */

.sant-design-playful #tab-news {
	background-color: #FAFAF8 !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
	overflow: hidden !important;
}

.sant-design-playful #playful-news {
	align-items: flex-start !important;
	overflow: hidden !important;
	background-color: #FAFAF8 !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
	background-attachment: local !important;
}

.sant-design-playful #playful-news .playful-brand-badge {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	margin: 0 0 16px 0 !important;
}

/* News close button - same as other tabs */
.sant-design-playful #news-close-btn {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	background: #1A1A1A !important;
	border: none !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 10 !important;
	cursor: pointer !important;
}

.sant-design-playful #news-close-btn svg {
	width: 16px !important;
	height: 16px !important;
}

.sant-design-playful #news-close-btn svg path {
	stroke: #FFFFFF !important;
}

.sant-design-playful #news-close-btn:hover {
	background: #2D2D2D !important;
}

/* ==========================================================================
   Privacy Footer in Input Area
   ========================================================================== */

.sant-design-playful #chat-input-container .px-4.pb-3.text-center {
	color: #9CA3AF !important;
}

.sant-design-playful #chat-input-container .px-4.pb-3.text-center a {
	color: #6B7280 !important;
}

/* ==========================================================================
   Chat Window Open Animations
   ========================================================================== */

/* Base state for animations — GPU layer promotion */
.sant-design-playful #chat-window {
	transform-origin: bottom right !important;
	will-change: transform, opacity;
	backface-visibility: hidden;
}

/* Animation 0: None - Instant appear */
.sant-design-playful #chat-window.anim-none {
	opacity: 1 !important;
	transform: scale(1) !important;
}

/* Animation 1: Elastic Scale - Bouncy scale with overshoot */
@keyframes elastic-scale-open {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}

	60% {
		opacity: 1;
		transform: scale(1.05);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.sant-design-playful #chat-window.anim-elastic-scale {
	animation: elastic-scale-open 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* Animation 2: Spring Pop - Pops with playful wobble */
@keyframes spring-pop-open {
	0% {
		opacity: 0;
		transform: scale(0.3) rotate(-4deg);
	}

	60% {
		opacity: 1;
		transform: scale(1.04) rotate(1deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.sant-design-playful #chat-window.anim-spring-pop {
	animation: spring-pop-open 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* Animation 3: Morph Bubble - Smooth expansion from bubble (no border-radius anim) */
@keyframes morph-bubble-open {
	0% {
		opacity: 0;
		transform: scale(0.2) translateY(40px);
	}

	60% {
		opacity: 1;
		transform: scale(1.02) translateY(-4px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.sant-design-playful #chat-window.anim-morph-bubble {
	animation: morph-bubble-open 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

/* Animation 4: Slide Bounce - Slides up with bounce */
@keyframes slide-bounce-open {
	0% {
		opacity: 0;
		transform: translateY(60px) scale(0.95);
	}

	60% {
		opacity: 1;
		transform: translateY(-6px) scale(1.01);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.sant-design-playful #chat-window.anim-slide-bounce {
	animation: slide-bounce-open 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* Close animation */
@keyframes chat-close {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.85) translateY(10px);
	}
}

.sant-design-playful #chat-window.anim-closing {
	animation: chat-close 0.3s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

/* ==========================================================================
   Message Animations - Multiple Styles
   ========================================================================== */

/* GPU layer promotion for all animated messages */
.sant-design-playful [class*="msg-anim-"] {
	will-change: transform, opacity;
	backface-visibility: hidden;
}

/* Message bubble hover effect (always active) */
.sant-design-playful .sant-message-text {
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.sant-design-playful .sant-message-text:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* --------------------------------------------------------------------------
   Animation 1: Bubble Pop - Bouncy scale from origin
   -------------------------------------------------------------------------- */
@keyframes bubble-pop-user {
	0% {
		opacity: 0;
		transform: scale(0.6) translateX(12px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateX(0);
	}
}

@keyframes bubble-pop-bot {
	0% {
		opacity: 0;
		transform: scale(0.6) translateX(-12px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateX(0);
	}
}

.sant-design-playful .msg-anim-bubble-pop.msg-user {
	animation: bubble-pop-user 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sant-design-playful .msg-anim-bubble-pop.msg-bot {
	animation: bubble-pop-bot 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --------------------------------------------------------------------------
   Animation 2: Slide In - Slides from the side
   -------------------------------------------------------------------------- */
@keyframes slide-in-user {
	0% {
		opacity: 0;
		transform: translateX(30px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slide-in-bot {
	0% {
		opacity: 0;
		transform: translateX(-30px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.sant-design-playful .msg-anim-slide-in.msg-user {
	animation: slide-in-user 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.sant-design-playful .msg-anim-slide-in.msg-bot {
	animation: slide-in-bot 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --------------------------------------------------------------------------
   Animation 3: Fade Rise - Fades in while rising up
   -------------------------------------------------------------------------- */
@keyframes fade-rise {
	0% {
		opacity: 0;
		transform: translateY(12px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.sant-design-playful .msg-anim-fade-rise.msg-user,
.sant-design-playful .msg-anim-fade-rise.msg-bot {
	animation: fade-rise 0.3s ease-out forwards;
}

/* --------------------------------------------------------------------------
   Animation 4: Elastic Drop - Drops with elastic bounce
   -------------------------------------------------------------------------- */
@keyframes elastic-drop {
	0% {
		opacity: 0;
		transform: scale(0.6) translateY(-16px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.sant-design-playful .msg-anim-elastic-drop.msg-user,
.sant-design-playful .msg-anim-elastic-drop.msg-bot {
	animation: elastic-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --------------------------------------------------------------------------
   Animation 5: Water Drop - Drops and settles with squash/stretch
   -------------------------------------------------------------------------- */
@keyframes water-drop-user {
	0% {
		opacity: 0;
		transform: translateY(-20px) scale(0.85, 1.1);
	}

	50% {
		opacity: 1;
		transform: translateY(4px) scale(1.04, 0.96);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes water-drop-bot {
	0% {
		opacity: 0;
		transform: translateY(-20px) scale(0.85, 1.1);
	}

	50% {
		opacity: 1;
		transform: translateY(4px) scale(1.04, 0.96);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.sant-design-playful .msg-anim-water-drop.msg-user {
	animation: water-drop-user 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.sant-design-playful .msg-anim-water-drop.msg-bot {
	animation: water-drop-bot 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ==========================================================================
   Send Button Animation
   ========================================================================== */

/* Pulse and shrink on send */
@keyframes send-pulse {
	0% {
		transform: scale(1);
	}

	30% {
		transform: scale(0.85);
	}

	60% {
		transform: scale(1.15);
	}

	100% {
		transform: scale(1);
	}
}

/* Icon fly away effect */
@keyframes icon-fly {
	0% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}

	50% {
		opacity: 0.8;
		transform: translateX(10px) translateY(-15px) scale(0.8) rotate(15deg);
	}

	100% {
		opacity: 0;
		transform: translateX(30px) translateY(-40px) scale(0.3) rotate(30deg);
	}
}

@keyframes icon-reset {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.sant-design-playful #send-button {
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
	overflow: hidden;
	position: relative;
}

.sant-design-playful #send-button.sending {
	animation: send-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sant-design-playful #send-button.sending svg {
	animation: icon-fly 0.3s ease-out forwards;
}

.sant-design-playful #send-button.sent svg {
	animation: icon-reset 0.3s ease-out forwards;
}

/* Ripple effect on click */
.sant-design-playful #send-button::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
	opacity: 0;
}

.sant-design-playful #send-button:active::after {
	width: 100px;
	height: 100px;
	opacity: 1;
	transition: 0s;
}

/* ==========================================================================
   Typing Indicator - Wave Dots Animation
   ========================================================================== */

@keyframes wave-dot {

	0%,
	60%,
	100% {
		transform: translateY(0);
		opacity: 0.4;
	}

	30% {
		transform: translateY(-8px);
		opacity: 1;
	}
}

.sant-design-playful #thinking-indicator .thinking-dot {
	animation: wave-dot 1.4s ease-in-out infinite !important;
	background: #FFFFFF !important;
}

.sant-design-playful #thinking-indicator .thinking-dot:nth-child(1) {
	animation-delay: 0s !important;
}

.sant-design-playful #thinking-indicator .thinking-dot:nth-child(2) {
	animation-delay: 0.2s !important;
}

.sant-design-playful #thinking-indicator .thinking-dot:nth-child(3) {
	animation-delay: 0.4s !important;
}

/* Thinking indicator container styling */
.sant-design-playful #thinking-indicator>div {
	background: var(--playful-bot-msg-bg) !important;
	padding: 16px 20px !important;
	border-radius: 18px 18px 18px 4px !important;
	display: flex !important;
	gap: 6px !important;
}

/* ==========================================================================
   Quick Replies Animation - Stagger In
   ========================================================================== */

@keyframes chip-pop-in {
	0% {
		opacity: 0.3;
		transform: scale(0.7) translateY(8px);
	}

	50% {
		opacity: 1;
		transform: scale(1.05) translateY(-2px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.sant-design-playful #sant-quick-replies button {
	animation: chip-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sant-design-playful #sant-quick-replies button:nth-child(1) {
	animation-delay: 0.05s;
}

.sant-design-playful #sant-quick-replies button:nth-child(2) {
	animation-delay: 0.1s;
}

.sant-design-playful #sant-quick-replies button:nth-child(3) {
	animation-delay: 0.15s;
}

.sant-design-playful #sant-quick-replies button:nth-child(4) {
	animation-delay: 0.2s;
}

.sant-design-playful #sant-quick-replies button:nth-child(5) {
	animation-delay: 0.25s;
}

.sant-design-playful #sant-quick-replies button:nth-child(6) {
	animation-delay: 0.3s;
}

/* Fallback: ensure buttons are visible after animation completes or if animation fails */
.sant-design-playful #sant-quick-replies button {
	animation-fill-mode: forwards;
}

/* Quick reply button hover - lift effect */
.sant-design-playful #sant-quick-replies button:hover {
	transform: translateY(-3px) scale(1.02) !important;
	box-shadow: 0 4px 12px rgba(245, 213, 71, 0.3) !important;
}