/* =========================================================
   Shop Assistant — floating chat widget (bottom-right bubble)
   Matches the site palette:
   var(--sa-color-primary-light, #64a3c2) / var(--sa-color-primary, #2c7599) (blues) - var(--sa-color-accent, #faad1e) (accent gold)
   Fonts: 'Cormorant Garamond' (headings), 'Open Sans' (body)
   Light theme, professional, fully responsive.

   Colors below use var(--sa-color-xxx, <original hex>) so the Admin Panel's
   "Customize Widget" page can override them per-site without touching this
   file - the custom properties themselves are set inline on #saChatWidget
   by _widget_shop_assistant.cfm. Nothing changes visually until someone
   edits Customize Widget, since the fallback hex always matches the
   original design.

   .sa-pos-* / .sa-size-* classes (also added by _widget_shop_assistant.cfm)
   control corner placement and panel size - see the bottom of this file.
   ========================================================= */

#saChatWidget,
#saChatWidget *{
	box-sizing:border-box;
}

#saChatWidget{
	position:fixed;
	right:24px;
	bottom:24px;
	z-index:999999;
	font-family:'Open Sans', Arial, sans-serif;
}

/* ---------- Floating toggle bubble ---------- */
.sa-chat-toggle{
	position:relative;
	width:62px;
	height:62px;
	border-radius:50%;
	border:none;
	cursor:pointer;
	background:linear-gradient(135deg, var(--sa-color-primary-light, #64a3c2) 0%, var(--sa-color-primary, #2c7599) 100%);
	color:#fff;
	font-size:24px;
	box-shadow:0 6px 18px rgba(44,117,153,.4);
	display:flex;
	align-items:center;
	justify-content:center;
	-webkit-transition:transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
	transition:transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

.sa-chat-toggle:hover{
	transform:scale(1.06);
	box-shadow:0 8px 22px rgba(44,117,153,.5);
}

.sa-chat-toggle:focus{
	outline:none;
}

.sa-chat-toggle .svg-inline--fa{
	color:#ffffff;
}

.sa-chat-toggle-pulse{
	position:absolute;
	top:-4px;
	right:-4px;
	width:16px;
	height:16px;
	border-radius:50%;
	background:var(--sa-color-accent, #faad1e);
	border:2px solid #fff;
}

.sa-chat-toggle-pulse::after{
	content:"";
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	border-radius:50%;
	background:var(--sa-color-accent, #faad1e);
	opacity:.75;
	-webkit-animation:sa-pulse 1.8s ease-out infinite;
	animation:sa-pulse 1.8s ease-out infinite;
}

@keyframes sa-pulse{
	0%   { transform:scale(1);   opacity:.75; }
	100% { transform:scale(2.4); opacity:0;   }
}

/* ---------- Chat panel ---------- */
.sa-chat-panel{
	position:fixed;
	right:24px;
	bottom:100px;
	width:370px;
	max-width:calc(100vw - 24px);
	height:540px;
	max-height:calc(100vh - 140px);
	background:var(--sa-color-surface, #fff);
	border-radius:16px;
	box-shadow:0 12px 40px rgba(0,0,0,.18);
	display:flex;
	flex-direction:column;
	overflow:hidden;
	border:1px solid #e7edf0;
	-webkit-animation:sa-panel-in 220ms ease-out;
	animation:sa-panel-in 220ms ease-out;
}

@keyframes sa-panel-in{
	from{ opacity:0; transform:translateY(12px); }
	to  { opacity:1; transform:translateY(0); }
}

/* ---------- Header ---------- */
.sa-chat-header{
	background:linear-gradient(135deg, var(--sa-color-primary, #2c7599) 0%, var(--sa-color-primary-light, #64a3c2) 100%);
	color:#fff;
	padding:14px 16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex:0 0 auto;
}

.sa-chat-header-title{
	display:flex;
	align-items:center;
	gap:10px;
}

.sa-chat-avatar{
	width:36px;
	height:36px;
	border-radius:50%;
	background:rgba(255,255,255,.18);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:16px;
	flex:0 0 36px;
}

.sa-chat-avatar .svg-inline--fa{
	color:#ffffff;
}

.sa-chat-name{
	font-family:'Cormorant Garamond', Georgia, serif;
	font-weight:700;
	font-size:19px;
	line-height:1.1;
	letter-spacing:.3px;
}

.sa-chat-status{
	font-size:11.5px;
	opacity:.9;
	margin-top:2px;
	display:flex;
	align-items:center;
	gap:5px;
}

.sa-status-dot{
	width:7px;
	height:7px;
	border-radius:50%;
	background:#5cd65c;
	display:inline-block;
	box-shadow:0 0 0 2px rgba(255,255,255,.25);
}

.sa-chat-header-actions{
	display:flex;
	align-items:center;
	gap:4px;
}

.sa-icon-btn{
	width:32px;
	height:32px;
	border:none;
	background:transparent;
	color:#fff;
	border-radius:50%;
	cursor:pointer;
	font-size:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	-webkit-transition:background 150ms ease-in-out;
	transition:background 150ms ease-in-out;
}

.sa-icon-btn:hover{
	background:rgba(255,255,255,.2);
}

.sa-icon-btn .svg-inline--fa{
	color:#ffffff;
}

/* ---------- Messages ---------- */
.sa-chat-messages{
	flex:1 1 auto;
	overflow-y:auto;
	padding:16px;
	background:var(--sa-color-bg, #f7f9fa);
}

.sa-msg{
	display:flex;
	margin-bottom:12px;
	-webkit-animation:sa-fade-in 200ms ease-in-out;
	animation:sa-fade-in 200ms ease-in-out;
}

@keyframes sa-fade-in{
	from{ opacity:0; transform:translateY(6px); }
	to  { opacity:1; transform:translateY(0); }
}

.sa-msg .sa-bubble{
	max-width:82%;
	padding:10px 14px;
	line-height:148%;
	font-size:14px;
	border-radius:14px;
	word-wrap:break-word;
}

.sa-msg.user{
	justify-content:flex-end;
}

.sa-msg.user .sa-bubble{
	background:var(--sa-color-primary-light, #64a3c2);
	color:#fff;
	border-bottom-right-radius:3px;
}

.sa-msg.agent{
	justify-content:flex-start;
}

.sa-msg.agent .sa-bubble{
	background:var(--sa-color-surface, #fff);
	color:var(--sa-color-text, #333);
	border:1px solid #e5e9eb;
	border-bottom-left-radius:3px;
}

.sa-msg.error .sa-bubble{
	background:#fbeaea;
	color:#a94442;
	border:1px solid #f0c4c4;
}

.sa-bubble a{
	color:var(--sa-color-primary, #2c7599);
	font-weight:600;
	text-decoration:underline;
}

.sa-msg.user .sa-bubble a{
	color:#fff;
	text-decoration:underline;
}

.sa-bubble a:hover{
	color:#1f5a78;
}

.sa-msg.user .sa-bubble a:hover{
	color:#eaf3f8;
}

/* typing indicator */
.sa-typing .sa-bubble{
	background:var(--sa-color-surface, #fff);
	border:1px solid #e5e9eb;
	padding:12px 16px;
}

.sa-typing span{
	display:inline-block;
	width:6px;
	height:6px;
	margin-right:3px;
	border-radius:50%;
	background:#9fb4bf;
	-webkit-animation:sa-bounce 1.2s infinite ease-in-out both;
	animation:sa-bounce 1.2s infinite ease-in-out both;
}
.sa-typing span:nth-child(2){ animation-delay:.15s; }
.sa-typing span:nth-child(3){ animation-delay:.3s; }

@keyframes sa-bounce{
	0%, 80%, 100% { transform:scale(0); }
	40%           { transform:scale(1); }
}

/* ---------- Input bar ---------- */
.sa-chat-inputbar{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:8px;
	padding:10px;
	border-top:1px solid #eceff1;
	background:#fff;
}

.sa-chat-inputbar input[type="text"]{
	flex:1;
	border:1px solid #dee2e6;
	border-radius:22px;
	outline:none;
	font-size:14px;
	padding:10px 16px;
	background:#f7f9fa;
	font-family:'Open Sans', sans-serif;
	-webkit-transition:border-color 150ms ease-in-out;
	transition:border-color 150ms ease-in-out;
}

.sa-chat-inputbar input[type="text"]:focus{
	border-color:var(--sa-color-primary-light, #64a3c2);
	background:#fff;
}

.sa-send-btn{
	border:none;
	cursor:pointer;
	width:40px;
	height:40px;
	border-radius:50%;
	flex:0 0 40px;
	font-size:15px;
	background:var(--sa-color-primary, #2c7599);
	color:#fff;
	box-shadow:0 1px 4px rgba(0,0,0,.18);
	-webkit-transition:background 180ms ease-in-out;
	transition:background 180ms ease-in-out;
}

.sa-send-btn:hover{
	background:#1f5a78;
}

.sa-send-btn:disabled{
	background:#b7cfdd;
	cursor:not-allowed;
	box-shadow:none;
}

.sa-send-btn .svg-inline--fa{
	color:#ffffff;
}

.sa-send-btn {padding:6px 0px !important;}

.sa-chat-footer-note{
	flex:0 0 auto;
	text-align:center;
	font-size:11px;
	color:#9aa7ad;
	padding:6px 10px 10px;
	background:#fff;
}

/* ---------- Responsive: full-screen sheet on small devices ----------
   max-width:640px matches the Appointments Agent widget's own mobile
   breakpoint (see ai_appointments.css) - below that width the panel goes
   fully edge-to-edge (no rounded corners, no margins), same as the
   Appointments Agent drawer, instead of the small-inset "sheet" look used
   above 640px. */
@media (max-width:640px){
	#saChatWidget{
		right:16px;
		bottom:16px;
	}

	.sa-chat-toggle{
		width:56px;
		height:56px;
		font-size:21px;
	}

	.sa-chat-panel{
		position:fixed;
		top:0;
		right:0;
		bottom:0;
		left:0;
		width:100%;
		height:100%;
		max-width:none;
		max-height:none;
		border-radius:0;
	}

	/* Appointments Agent widget (#apWidget, z-index:999998 / #apChatPanel,
	   z-index:999999) is loaded site-wide alongside this one. When it's open
	   (body.ap-widget-open, toggled by ai_appointments.js), this widget's
	   z-index must drop below it so it can never render on top of - or
	   poke out from behind - the open Appointments panel. See _header.cfm /
	   ai_appointments.js for where ap-widget-open is added/removed. */
	body.ap-widget-open #saChatWidget{
		z-index:1;
		visibility:hidden;
		pointer-events:none;
	}
}

/* ---------- Corner placement (set via Customize Widget > Layout & Positioning) ----------
   Default markup/CSS above is bottom-right. These classes are added to
   #saChatWidget by _widget_shop_assistant.cfm when a different corner is
   chosen; only applied on wider screens - the mobile full-screen sheet
   above always wins on small devices regardless of corner. ---------- */
@media (min-width:521px){
	#saChatWidget.sa-pos-bottom-left{ right:auto; left:24px; }
	#saChatWidget.sa-pos-bottom-left .sa-chat-panel{ right:auto; left:24px; }
	#saChatWidget.sa-pos-bottom-left .sa-chat-toggle-pulse{ right:auto; left:-4px; }

	#saChatWidget.sa-pos-top-right{ bottom:auto; top:24px; }
	#saChatWidget.sa-pos-top-right .sa-chat-panel{ bottom:auto; top:100px; }

	#saChatWidget.sa-pos-top-left{ bottom:auto; top:24px; right:auto; left:24px; }
	#saChatWidget.sa-pos-top-left .sa-chat-panel{ bottom:auto; top:100px; right:auto; left:24px; }
	#saChatWidget.sa-pos-top-left .sa-chat-toggle-pulse{ right:auto; left:-4px; }

	/* ---------- Chat window size presets ---------- */
	#saChatWidget.sa-size-small .sa-chat-panel{ width:320px; height:460px; }
	#saChatWidget.sa-size-large .sa-chat-panel{ width:410px; height:620px; }
}