/* =========================================================
   Appointments AI Agent — "Book a Consultation" sliding drawer
   Matches the site palette:
   #64a3c2 / #2c7599 (blues) - #faad1e (accent gold)
   Fonts: 'Cormorant Garamond' (headings), 'Open Sans' (body)
   Light theme, professional, fully responsive.

   Namespacing: every class/id is prefixed "ap" so this widget
   never collides with the existing Shop Assistant ("sa" prefix)
   widget elsewhere on the site.

   Colors below use var(--ap-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 #apWidget by
   _widget_appointments.cfm. Nothing changes visually until someone edits
   Customize Widget, since the fallback hex always matches the original
   design.

   .ap-side-right / .ap-size-* classes (also added by
   _widget_appointments.cfm) control which side the drawer slides in from
   and its width - see near the bottom of this file.
   ========================================================= */

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

#apWidget{
	position:fixed;
	left:0;
	bottom:110px;
	z-index:999998;
	font-family:'Open Sans', Arial, sans-serif;
}

/* ---------- Peeking tab (closed state) ----------
   NOTE: these classes are no longer applied to anything - the trigger icon
   moved into the header's .left-top-links as a plain anchor (see _header.cfm).
   Left in place only in case you ever want the floating tab look back. */
.ap-tab{
	display:flex;
	align-items:center;
	gap:10px;
	border:none;
	cursor:pointer;
	background:linear-gradient(135deg, var(--ap-color-accent, #faad1e) 0%, var(--ap-color-accent-dark, #e0960a) 100%);
	padding:10px 16px 10px 14px;
	border-radius:0 30px 30px 0;
	box-shadow:0 6px 18px rgba(0,0,0,.18);
	transition:transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

.ap-tab:hover{
	transform:translateX(4px);
	box-shadow:0 8px 22px rgba(0,0,0,.24);
}

.ap-tab:focus{ outline:none; }

.ap-tab-pulse{
	width:11px;
	height:11px;
	border-radius:50%;
	background:#2ecc71;
	border:2px solid #fff;
	box-shadow:0 0 0 rgba(46,204,113,.6);
	animation:apPulse 2.2s infinite;
	flex-shrink:0;
}

@keyframes apPulse{
	0%   { box-shadow:0 0 0 0 rgba(46,204,113,.55); }
	70%  { box-shadow:0 0 0 10px rgba(46,204,113,0); }
	100% { box-shadow:0 0 0 0 rgba(46,204,113,0); }
}

.ap-tab-icon-wrap{
	width:36px;
	height:36px;
	border-radius:50%;
	background:#ffffff;
	color:var(--ap-color-primary, #2c7599);
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.ap-tab-icon-wrap i{ font-size:16px; }

/* ---------- Drawer panel ---------- */
.ap-panel{
	position:fixed;
	left:0;
	bottom:0;
	top:0;
	width:400px;
	max-width:100vw;
	background:var(--ap-color-surface, #fff);
	box-shadow:8px 0 40px rgba(0,0,0,.22);
	display:flex;
	flex-direction:column;
	transform:translateX(-100%);
	transition:transform 260ms ease-in-out;
	z-index:999999;
}

.ap-panel.ap-open{
	transform:translateX(0);
}

.ap-backdrop{
	position:fixed;
	inset:0;
	background:rgba(15,20,25,.35);
	opacity:0;
	pointer-events:none;
	transition:opacity 220ms ease-in-out;
	z-index:999997;
}

.ap-backdrop.ap-show{
	opacity:1;
	pointer-events:auto;
}

/* ---------- Header ---------- */
.ap-header{
	background:linear-gradient(135deg, var(--ap-color-primary, #2c7599) 0%, var(--ap-color-primary-light, #64a3c2) 100%);
	color:#fff;
	padding:18px 18px 16px;
	flex-shrink:0;
}

.ap-header-top{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:10px;
}

.ap-header-title{
	display:flex;
	align-items:center;
	gap:12px;
}

.ap-avatar{
	width:42px;
	height:42px;
	border-radius:50%;
	background:#ffffff;
	color:var(--ap-color-primary, #2c7599);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:18px;
	flex-shrink:0;
	box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.ap-name{
	font-family:'Cormorant Garamond', serif;
	font-weight:700;
	font-size:20px;
	line-height:1.15;
}

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

.ap-status-dot{
	width:7px;
	height:7px;
	border-radius:50%;
	background:#7be3a6;
	display:inline-block;
}

.ap-header-actions{
	display:flex;
	gap:6px;
}

.ap-icon-btn{
	background:#ffffff;
	border:none;
	color:var(--ap-color-primary, #2c7599);
	width:32px;
	height:32px;
	border-radius:50%;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	box-shadow:0 2px 6px rgba(0,0,0,.15);
	transition:background 150ms ease-in-out, transform 150ms ease-in-out;
}

.ap-icon-btn:hover{ background:#eef6fa; transform:scale(1.06); }
.ap-icon-btn:focus{ outline:none; }

.ap-subtitle{
	font-size:12.5px;
	opacity:.92;
	margin-top:10px;
	line-height:1.4;
}

/* ---------- Progress stepper ---------- */
.ap-steps{
	display:flex;
	align-items:center;
	margin-top:14px;
	gap:0;
}

.ap-step{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	position:relative;
}

.ap-step:not(:last-child):after{
	content:"";
	position:absolute;
	top:9px;
	left:calc(50% + 14px);
	width:calc(100% - 28px);
	height:2px;
	background:rgba(255,255,255,.3);
}

.ap-step.ap-step-done:not(:last-child):after{
	background:var(--ap-color-accent, #faad1e);
}

.ap-step-dot{
	width:18px;
	height:18px;
	border-radius:50%;
	background:rgba(255,255,255,.25);
	border:2px solid rgba(255,255,255,.5);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:9px;
	color:#fff;
	z-index:1;
}

.ap-step.ap-step-active .ap-step-dot{
	background:var(--ap-color-accent, #faad1e);
	border-color:var(--ap-color-accent, #faad1e);
}

.ap-step.ap-step-done .ap-step-dot{
	background:#fff;
	border-color:#fff;
	color:var(--ap-color-primary, #2c7599);
}

.ap-step-label{
	font-size:9.5px;
	text-transform:uppercase;
	letter-spacing:.4px;
	opacity:.85;
	text-align:center;
}

/* ---------- Messages ---------- */
.ap-messages{
	flex:1;
	overflow-y:auto;
	padding:18px 16px;
	background:var(--ap-color-bg, #f8fafb);
	display:flex;
	flex-direction:column;
	gap:12px;
}

.ap-messages::-webkit-scrollbar{ width:6px; }
.ap-messages::-webkit-scrollbar-thumb{ background:#cdd8de; border-radius:6px; }

.ap-msg{
	display:flex;
	max-width:88%;
}

.ap-msg.user{
	align-self:flex-end;
	justify-content:flex-end;
}

.ap-msg.agent{
	align-self:flex-start;
}

.ap-bubble{
	padding:11px 14px;
	border-radius:16px;
	font-size:14px;
	line-height:1.5;
	word-wrap:break-word;
	white-space:pre-wrap;
}

.ap-msg.agent .ap-bubble{
	background:var(--ap-color-surface, #fff);
	border:1px solid #e6ebee;
	color:var(--ap-color-text, #2b333a);
	border-bottom-left-radius:4px;
}

.ap-msg.user .ap-bubble{
	background:linear-gradient(135deg, var(--ap-color-primary-light, #64a3c2) 0%, var(--ap-color-primary, #2c7599) 100%);
	color:#fff;
	border-bottom-right-radius:4px;
}

.ap-msg.agent.error .ap-bubble{
	background:#fdecec;
	border-color:#f3c8c8;
	color:#8a2a2a;
}

/* typing indicator */
.ap-typing .ap-bubble{
	display:flex;
	align-items:center;
	gap:4px;
	padding:13px 16px;
}

.ap-typing .ap-bubble span{
	width:6px;
	height:6px;
	border-radius:50%;
	background:#9fb1ba;
	display:inline-block;
	animation:apTypingBounce 1.2s infinite ease-in-out;
}

.ap-typing .ap-bubble span:nth-child(2){ animation-delay:.15s; }
.ap-typing .ap-bubble span:nth-child(3){ animation-delay:.3s; }

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

/* ---------- Quick reply chips ---------- */
.ap-quick-replies{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:2px 0 4px;
	align-self:flex-start;
	max-width:100%;
}

.ap-chip{
	border:1px solid var(--ap-color-primary-light, #64a3c2);
	background:#fff;
	color:var(--ap-color-primary, #2c7599);
	font-size:12.5px;
	font-weight:600;
	padding:8px 13px;
	border-radius:18px;
	cursor:pointer;
	transition:background 150ms ease-in-out, color 150ms ease-in-out;
}

.ap-chip:hover{
	background:var(--ap-color-primary, #2c7599);
	color:#fff;
}

/* ---------- Confirmation card ---------- */
.ap-confirm-card{
	align-self:flex-start;
	max-width:92%;
	background:#fbfaf3;
	border:1px solid #f2d896;
	border-radius:12px;
	padding:14px 16px;
	font-size:13px;
	color:#2b333a;
}

.ap-confirm-card .ap-confirm-head{
	display:flex;
	align-items:center;
	gap:8px;
	font-family:'Cormorant Garamond', serif;
	font-weight:700;
	font-size:17px;
	color:#946c00;
	margin-bottom:6px;
}

.ap-confirm-card .ap-confirm-code{
	display:inline-block;
	margin-top:6px;
	background:var(--ap-color-accent, #faad1e);
	color:#fff;
	font-weight:700;
	letter-spacing:.4px;
	padding:4px 10px;
	border-radius:6px;
	font-size:12px;
}

/* Cancellation variant - same card, muted grey/blue instead of gold, since
   there's nothing to celebrate but we still want a clear structured card. */
.ap-confirm-card--cancel{
	background:#f5f7f8;
	border-color:#c9d3d8;
}
.ap-confirm-card--cancel .ap-confirm-head{ color:#5a6a72; }
.ap-confirm-card--cancel .ap-confirm-code{ background:#7a8a92; }

/* ---------- Input bar ---------- */
.ap-inputbar{
	display:flex;
	align-items:center;
	gap:8px;
	padding:12px 14px;
	border-top:1px solid #eaeff2;
	background:#fff;
	flex-shrink:0;
}

.ap-inputbar input{
	flex:1;
	border:1px solid #dbe3e8;
	border-radius:22px;
	padding:11px 16px;
	font-size:14px;
	font-family:'Open Sans', Arial, sans-serif;
	color:#2b333a;
	outline:none;
	transition:border-color 150ms ease-in-out;
}

.ap-inputbar input:focus{
	border-color:var(--ap-color-primary-light, #64a3c2);
}

.ap-send-btn{
	width:40px;
	height:40px;
	flex-shrink:0;
	border-radius:50%;
	border:2px solid var(--ap-color-accent, #faad1e);
	background:#ffffff;
	color:var(--ap-color-accent-dark, #e0960a);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:15px;
	box-shadow:0 2px 6px rgba(0,0,0,.12);
	transition:transform 150ms ease-in-out, background 150ms ease-in-out, color 150ms ease-in-out;
}

.ap-send-btn:hover{ transform:scale(1.06); background:var(--ap-color-accent, #faad1e); color:#fff; }
.ap-send-btn:disabled{ opacity:.55; cursor:default; transform:none; }
.ap-send-btn:focus{ outline:none; }

.ap-footer-note{
	text-align:center;
	font-size:10.5px;
	color:#8a969d;
	padding:6px 14px 12px;
	background:#fff;
}

.ap-footer-note i{ color:var(--ap-color-primary-light, #64a3c2); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:480px){
	#apWidget{ bottom:90px; }

	.ap-tab{
		padding:8px 12px 8px 10px !important;
	}

	.ap-tab-icon-wrap{
		width:30px;
		height:30px;
	}

	.ap-panel{
		width:100%;
	}

	.ap-step-label{ display:none; }
}

@media (max-height:560px){
	.ap-steps{ display:none; }
	.ap-subtitle{ display:none; }
}

/* ---------- Drawer side + size presets (set via Customize Widget > Layout & Positioning) ----------
   Default markup/CSS above opens from the left. These classes are added to
   #apWidget by _widget_appointments.cfm. Only applied above the mobile
   breakpoint - .ap-panel is always full-width on phones regardless. ---------- */
@media (min-width:481px){
	#apWidget.ap-side-right{ left:auto; right:0; }
	#apWidget.ap-side-right .ap-panel{ left:auto; right:0; transform:translateX(100%); }
	#apWidget.ap-side-right .ap-panel.ap-open{ transform:translateX(0); }
	#apWidget.ap-side-right .ap-panel{ box-shadow:-8px 0 40px rgba(0,0,0,.22); }

	#apWidget.ap-size-small .ap-panel{ width:340px; }
	#apWidget.ap-size-large .ap-panel{ width:460px; }
}

/* =========================================================================
   SITE OVERRIDE FIX
   -------------------------------------------------------------------------
   main.css has a global rule targeting button[type="button"] (used for
   .search-btn / form buttons site-wide) that forces background:#64a3c2,
   color:#fff and padding:6px 20px onto every button[type="button"] element,
   including these. Because that selector (element+attribute) is more
   specific than a single class selector, it silently overrode the reset,
   close, and send button styles above and broke their circular sizing.
   ID selectors outrank it cleanly, so we pin the final look here by ID.
   ========================================================================= */
/* #apChatTab override removed: it used to be a <button type="button"> floating
   tab, which needed a forced !important background/color/padding to beat a
   global site rule on button[type="button"]. It's now a plain <a> icon living
   in the header's .left-top-links (next to the email icon) - see _header.cfm -
   so it should just inherit that header's normal icon styling like its
   neighbors, with no overrides here. */

#apResetBtn, #apCloseBtn{
	background:#ffffff !important;
	color:var(--ap-color-primary, #2c7599) !important;
	padding:0 !important;
	text-transform:none !important;
	font-weight:400 !important;
}
#apResetBtn:hover, #apCloseBtn:hover{
	background:#eef6fa !important;
}

#apSendBtn{
	background:#ffffff !important;
	color:var(--ap-color-accent-dark, #e0960a) !important;
	padding:0 !important;
	text-transform:none !important;
	font-weight:400 !important;
}
#apSendBtn:hover{
	background:var(--ap-color-accent, #faad1e) !important;
	color:#ffffff !important;
}