/**
 * SwiftCartHB — Chatbot Frontend Stylesheet
 *
 * All rules are scoped to the #swiftcart-chatbot-* namespace.
 * Zero cascade conflicts with Elementor, WooCommerce, or any other
 * plugin. Typography inherits from the live page so Elementor's
 * Global Site Settings apply automatically inside the widget.
 *
 * @package SwiftCartHB
 * @since   1.0.0
 */

/* ── Utility: visibility toggle class (toggled by JS) ─────────────── */
.hidden {
	display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   ROOT WRAPPER — Fixed positioning anchor
   ───────────────────────────────────────────────────────────────────── */
#swiftcart-chatbot-wrapper {
	position:   fixed;
	bottom:     25px;
	right:      25px;
	z-index:    999999; /* Above all Elementor canvas layers */
	display:    flex;
	flex-direction: column;
	align-items: flex-end;
	gap:        12px;
}

/* ─────────────────────────────────────────────────────────────────────
   FAB TOGGLE BUTTON
   ───────────────────────────────────────────────────────────────────── */
#swiftcart-chatbot-toggle {
	/* Dimensions */
	width:          60px;
	height:         60px;
	border-radius:  50%;

	/* Appearance */
	background:     #3525cd;
	border:         none;
	cursor:         pointer;

	/* Icon centering */
	display:        flex;
	align-items:    center;
	justify-content: center;

	/* Elevation */
	box-shadow:     0 6px 28px rgba(53, 37, 205, 0.40);

	/* Smooth transitions */
	transition:     transform 0.22s ease,
	                box-shadow 0.22s ease,
	                background-color 0.22s ease;

	/* Reset browser defaults */
	padding:        0;
	outline:        none;
	flex-shrink:    0;
}

#swiftcart-chatbot-toggle:hover {
	background:  #2a1da0;
	transform:   scale(1.10);
	box-shadow:  0 10px 36px rgba(53, 37, 205, 0.52);
}

#swiftcart-chatbot-toggle:active {
	transform: scale(0.95);
}

/* Keyboard focus ring for accessibility */
#swiftcart-chatbot-toggle:focus-visible {
	outline:        3px solid #3525cd;
	outline-offset: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   CHAT PANEL WINDOW
   ───────────────────────────────────────────────────────────────────── */
#swiftcart-chatbot-window {
	/* Fixed dimensions */
	width:          350px;
	height:         450px;
	max-width:      calc(100vw - 32px); /* Responsive safety */
	max-height:     calc(100vh - 110px);

	/* Layout */
	display:        flex;
	flex-direction: column;

	/* Appearance */
	background:     #ffffff;
	border-radius:  16px;
	border:         1px solid #e2e8f0;
	box-shadow:     0 16px 56px rgba(15, 23, 42, 0.18);
	overflow:       hidden;

	/* Reveal animation on open */
	animation:      schbWindowIn 0.22s ease;
	transform-origin: bottom right;
}

@keyframes schbWindowIn {
	from { opacity: 0; transform: scale(0.90) translateY(12px); }
	to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ── Header strip ─────────────────────────────────────────────────── */
.chatbot-header {
	background:      #3525cd;
	padding:         14px 16px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-shrink:     0;
}

.chatbot-header h3 {
	margin:      0;
	color:       #ffffff;
	font-size:   15px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.3;
}

/* Close button inside header */
.chatbot-close-btn {
	background:     rgba(255, 255, 255, 0.15);
	border:         none;
	border-radius:  50%;
	width:          28px;
	height:         28px;
	display:        flex;
	align-items:    center;
	justify-content: center;
	cursor:         pointer;
	color:          #ffffff;
	font-size:      16px;
	line-height:    1;
	transition:     background 0.18s ease;
	padding:        0;
	flex-shrink:    0;
}

.chatbot-close-btn:hover {
	background: rgba(255, 255, 255, 0.28);
}

/* ── Messages viewport ────────────────────────────────────────────── */
.chatbot-messages {
	flex:           1;
	overflow-y:     auto;
	padding:        14px;
	display:        flex;
	flex-direction: column;
	gap:            10px;
	background:     #f5f2ff;
	scroll-behavior: smooth;
}

/* Thin custom scrollbar (webkit) */
.chatbot-messages::-webkit-scrollbar       { width: 4px; }
.chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.chatbot-messages::-webkit-scrollbar-thumb {
	background:    rgba(53, 37, 205, 0.22);
	border-radius: 10px;
}

/* ── Message bubble base ──────────────────────────────────────────── */
.chatbot-msg {
	max-width:    82%;
	padding:      9px 13px;
	border-radius: 12px;
	font-size:    13px;
	line-height:  1.55;
	word-break:   break-word;
	font-family:  inherit;
	animation:    schbMsgIn 0.18s ease;
}

@keyframes schbMsgIn {
	from { opacity: 0; transform: translateY(5px); }
	to   { opacity: 1; transform: translateY(0);   }
}

/* User message — right aligned */
.chatbot-msg.user {
	align-self:             flex-end;
	background:             #3525cd;
	color:                  #ffffff;
	border-bottom-right-radius: 3px;
}

/* Assistant message — left aligned */
.chatbot-msg.assistant {
	align-self:            flex-start;
	background:            #ffffff;
	color:                 #1b1b24;
	border:                1px solid #e2e8f0;
	border-bottom-left-radius: 3px;
	box-shadow:            0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Typing / loading indicator bubble */
.chatbot-msg.typing {
	align-self:  flex-start;
	background:  #ffffff;
	border:      1px solid #e2e8f0;
	padding:     12px 16px;
	border-bottom-left-radius: 3px;
}

/* Animated bouncing dots inside typing bubble */
.chatbot-typing-dots {
	display: flex;
	gap:     5px;
}

.chatbot-typing-dots span {
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    #3525cd;
	animation:     schbDotBounce 1.2s infinite ease-in-out;
}

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

@keyframes schbDotBounce {
	0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
	30%            { transform: translateY(-5px); opacity: 1;   }
}

/* ── Input area row ───────────────────────────────────────────────── */
.chatbot-input-area {
	display:     flex;
	gap:         8px;
	padding:     12px 12px;
	border-top:  1px solid #e2e8f0;
	background:  #ffffff;
	flex-shrink: 0;
	align-items: center;
}

#chatbot-user-input {
	flex:          1;
	height:        40px;
	padding:       0 12px;
	border-radius: 10px;
	border:        1px solid #c7c4d8;
	background:    #f5f2ff;
	font-size:     13px;
	color:         #1b1b24;
	font-family:   inherit;
	outline:       none;
	transition:    border-color 0.18s ease;
	box-sizing:    border-box;
}

#chatbot-user-input:focus {
	border-color: #3525cd;
}

#chatbot-user-input::placeholder {
	color: #94a3b8;
}

#chatbot-send-btn {
	height:         40px;
	padding:        0 16px;
	background:     #3525cd;
	color:          #ffffff;
	border:         none;
	border-radius:  10px;
	cursor:         pointer;
	font-size:      13px;
	font-weight:    600;
	font-family:    inherit;
	white-space:    nowrap;
	transition:     background 0.18s ease, transform 0.15s ease;
	flex-shrink:    0;
}

#chatbot-send-btn:hover    { background: #2a1da0; }
#chatbot-send-btn:active   { transform: scale(0.95); }
#chatbot-send-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE — full-width bottom sheet on small screens
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
	#swiftcart-chatbot-wrapper {
		bottom: 0;
		right:  0;
		gap:    0;
	}

	#swiftcart-chatbot-toggle {
		position: fixed;
		bottom:   16px;
		right:    16px;
	}

	#swiftcart-chatbot-window {
		position:      fixed;
		bottom:        0;
		right:         0;
		width:         100vw;
		height:        78vh;
		max-width:     100vw;
		border-radius: 16px 16px 0 0;
	}
}