/**
 * SwiftCartHB — Chatbot Widget Stylesheet
 *
 * All rules are scoped exclusively to #swiftcarthb-bot-* and .bot-*
 * namespaces. Zero cascade conflicts with Elementor, WooCommerce, or
 * any other theme/plugin styles. Typography inherits from the page
 * to respect Elementor Global Site Settings automatically.
 *
 * @package SwiftCartHB
 * @since   1.0.0
 */

/* ─────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES — edit these to retheme the entire widget
   ───────────────────────────────────────────────────────────────────── */
#swiftcarthb-bot-launcher,
#swiftcarthb-bot-window {
	--schb-primary:      #3525cd;
	--schb-primary-dark: #2a1da0;
	--schb-surface:      #ffffff;
	--schb-bg:           #f5f2ff;
	--schb-border:       #e2e8f0;
	--schb-text:         #1b1b24;
	--schb-text-muted:   #64748b;
	--schb-user-bg:      #3525cd;
	--schb-user-text:    #ffffff;
	--schb-bot-bg:       #ffffff;
	--schb-bot-text:     #1b1b24;
	--schb-radius:       18px;
	--schb-shadow:       0 12px 48px rgba(53, 37, 205, 0.22);
}

/* ─────────────────────────────────────────────────────────────────────
   FLOATING ACTION BUBBLE — Launcher
   ───────────────────────────────────────────────────────────────────── */
#swiftcarthb-bot-launcher {
	position:         fixed;
	bottom:           20px;
	right:            20px;
	z-index:          99999;

	/* Dimensions */
	width:            60px;
	height:           60px;
	border-radius:    50%;

	/* Appearance */
	background:       var(--schb-primary);
	border:           none;
	cursor:           pointer;

	/* Flex centering for the SVG icon */
	display:          flex;
	align-items:      center;
	justify-content:  center;

	/* Elevation */
	box-shadow:       var(--schb-shadow);

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

	/* Override any global button resets */
	padding:          0;
	outline:          none;
}

#swiftcarthb-bot-launcher:hover {
	transform:   scale(1.10);
	background:  var(--schb-primary-dark);
	box-shadow:  0 16px 56px rgba(53, 37, 205, 0.36);
}

#swiftcarthb-bot-launcher:focus-visible {
	outline:        3px solid var(--schb-primary);
	outline-offset: 3px;
}

/* Active press feedback */
#swiftcarthb-bot-launcher:active {
	transform: scale(0.96);
}

/* ─────────────────────────────────────────────────────────────────────
   CHAT PANEL WINDOW
   ───────────────────────────────────────────────────────────────────── */
#swiftcarthb-bot-window {
	position:      fixed;
	bottom:        92px;    /* Sits above the launcher bubble */
	right:         20px;
	z-index:       99998;

	/* Fixed dimensions */
	width:         360px;
	height:        480px;
	max-width:     calc(100vw - 24px); /* Responsive safety on small screens */
	max-height:    calc(100vh - 120px);

	/* Layout */
	display:       none;              /* JS toggles to flex */
	flex-direction: column;

	/* Appearance */
	background:    var(--schb-surface);
	border-radius: var(--schb-radius);
	border:        1px solid var(--schb-border);
	box-shadow:    var(--schb-shadow);
	overflow:      hidden;

	/* Smooth reveal */
	transform-origin: bottom right;
	animation:     schbSlideIn 0.22s ease forwards;
}

#swiftcarthb-bot-window.schb-open {
	display: flex;
}

@keyframes schbSlideIn {
	from { opacity: 0; transform: scale(0.92) translateY(10px); }
	to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ── Header band ──────────────────────────────────────────────────── */
.bot-header {
	background:       var(--schb-primary);
	padding:          14px 16px;
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	flex-shrink:      0;
}

.bot-header-info {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.bot-header-icon {
	font-size:  20px;
	color:      rgba(255, 255, 255, 0.85);
	flex-shrink: 0;
}

.bot-header strong {
	display:      block;
	color:        #ffffff;
	font-size:    14px;
	font-weight:  600;
	line-height:  1.3;
	font-family:  inherit;
}

.bot-header-status {
	display:    block;
	color:      rgba(255, 255, 255, 0.68);
	font-size:  11px;
	font-family: inherit;
	margin-top: 1px;
}

.bot-close-btn {
	background:    rgba(255, 255, 255, 0.14);
	border:        none;
	border-radius: 50%;
	width:         30px;
	height:        30px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	cursor:        pointer;
	color:         #ffffff;
	font-size:     16px;
	line-height:   1;
	transition:    background 0.18s ease;
	flex-shrink:   0;
	padding:       0;
}

.bot-close-btn:hover {
	background: rgba(255, 255, 255, 0.26);
}

/* ── Scrollable message viewport ──────────────────────────────────── */
#swiftcarthb-bot-messages {
	flex:        1;
	overflow-y:  auto;
	padding:     16px;
	display:     flex;
	flex-direction: column;
	gap:         10px;
	background:  var(--schb-bg);

	/* Smooth scroll controlled by JS */
	scroll-behavior: smooth;
}

/* Thin, styled scrollbar (webkit) */
#swiftcarthb-bot-messages::-webkit-scrollbar {
	width: 4px;
}
#swiftcarthb-bot-messages::-webkit-scrollbar-track {
	background: transparent;
}
#swiftcarthb-bot-messages::-webkit-scrollbar-thumb {
	background:    rgba(53, 37, 205, 0.25);
	border-radius: 10px;
}

/* ── Message bubble components ────────────────────────────────────── */
.msg-bubble {
	max-width:    82%;
	padding:      10px 14px;
	border-radius: 14px;
	font-size:    13px;
	line-height:  1.55;
	word-wrap:    break-word;
	font-family:  inherit;

	/* Entrance animation */
	animation:    schbBubbleIn 0.18s ease;
}

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

/* User bubble — right-aligned, primary color */
.msg-bubble.user {
	align-self:         flex-end;
	background:         var(--schb-user-bg);
	color:              var(--schb-user-text);
	border-bottom-right-radius: 4px;
}

/* Assistant bubble — left-aligned, white card */
.msg-bubble.assistant {
	align-self:        flex-start;
	background:        var(--schb-bot-bg);
	color:             var(--schb-bot-text);
	border:            1px solid var(--schb-border);
	border-bottom-left-radius: 4px;
	box-shadow:        0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Typing / loading bubble */
.msg-bubble.typing {
	align-self:  flex-start;
	background:  var(--schb-bot-bg);
	border:      1px solid var(--schb-border);
	border-bottom-left-radius: 4px;
	padding:     14px 18px;
}

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

.schb-typing-dots span {
	width:        7px;
	height:       7px;
	border-radius: 50%;
	background:   var(--schb-primary);
	animation:    schbDotBounce 1.2s infinite ease-in-out;
}

.schb-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.schb-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 footer form ────────────────────────────────────────────── */
#swiftcarthb-bot-form {
	display:      flex;
	gap:          8px;
	padding:      12px 14px;
	border-top:   1px solid var(--schb-border);
	background:   var(--schb-surface);
	flex-shrink:  0;
	align-items:  center;
}

#swiftcarthb-bot-input {
	flex:          1;
	height:        40px;
	padding:       0 12px;
	border-radius: 10px;
	border:        1px solid #c7c4d8;
	background:    var(--schb-bg);
	font-size:     13px;
	color:         var(--schb-text);
	font-family:   inherit;
	outline:       none;
	transition:    border-color 0.18s ease;
	box-sizing:    border-box;
}

#swiftcarthb-bot-input:focus {
	border-color: var(--schb-primary);
}

#swiftcarthb-bot-input::placeholder {
	color: var(--schb-text-muted);
}

#swiftcarthb-bot-send {
	width:          40px;
	height:         40px;
	border-radius:  10px;
	border:         none;
	background:     var(--schb-primary);
	cursor:         pointer;
	display:        flex;
	align-items:    center;
	justify-content: center;
	flex-shrink:    0;
	transition:     background 0.18s ease, transform 0.15s ease;
	padding:        0;
}

#swiftcarthb-bot-send:hover {
	background: var(--schb-primary-dark);
}

#swiftcarthb-bot-send:active {
	transform: scale(0.94);
}

#swiftcarthb-bot-send:disabled {
	opacity: 0.55;
	cursor:  not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE — collapse to full-width on very small screens
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
	#swiftcarthb-bot-window {
		right:         0;
		bottom:        0;
		width:         100vw;
		height:        80vh;
		max-width:     100vw;
		border-radius: var(--schb-radius) var(--schb-radius) 0 0;
	}
	#swiftcarthb-bot-launcher {
		bottom: 16px;
		right:  16px;
	}
}