/* ==========================================================================
   BA Liquidation - storefront chat assistant
   Uses the theme design tokens from main.css (navy, accent, radius, shadow).
   ========================================================================== */

/* ---------- floating launcher ----------
   Sits at bottom:20px right:20px, 58px round. The back-to-top button is 46px
   at bottom:88px right:20px, so the two stack without overlapping. */
.ba-chat-btn{
	position:fixed;
	right:20px;
	bottom:20px;
	width:58px;
	height:58px;
	border-radius:50%;
	background:var(--navy);
	color:#fff;
	border:0;
	display:grid;
	place-items:center;
	cursor:pointer;
	box-shadow:var(--shadow);
	z-index:70;
	transition:background .15s, transform .15s;
}
.ba-chat-btn:hover{background:var(--navy-700);transform:translateY(-2px)}
.ba-chat-btn svg{
	width:26px;
	height:26px;
	stroke:#fff;
	fill:none;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.ba-chat-btn .ba-chat-ico-close{display:none}
.ba-chat-btn.is-open .ba-chat-ico-open{display:none}
.ba-chat-btn.is-open .ba-chat-ico-close{display:block}

/* ---------- panel ---------- */
.ba-chat-panel{
	position:fixed;
	right:20px;
	bottom:20px;
	width:min(380px,92vw);
	height:min(560px,80vh);
	background:#fff;
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	display:flex;
	flex-direction:column;
	overflow:hidden;
	z-index:80;
	opacity:0;
	visibility:hidden;
	transform:translateY(16px);
	transition:opacity .2s ease, transform .2s ease, visibility .2s;
	font-family:var(--body-font);
}
.ba-chat-panel.on{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

/* ---------- header ---------- */
.ba-chat-head{
	background:var(--navy);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 16px;
	flex:none;
}
.ba-chat-head-id{display:flex;align-items:center;gap:10px;min-width:0}
.ba-chat-avatar{
	width:38px;
	height:38px;
	border-radius:10px;
	background:rgba(255,255,255,.16);
	color:#fff;
	display:grid;
	place-items:center;
	font-family:var(--sans);
	font-weight:800;
	font-size:14px;
	flex:none;
}
.ba-chat-head-txt{display:flex;flex-direction:column;min-width:0}
.ba-chat-head-txt strong{
	font-family:var(--sans);
	font-weight:700;
	font-size:15px;
	line-height:1.2;
}
.ba-chat-head-txt span{
	font-size:12px;
	color:#cfe0f5;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.ba-chat-close{
	background:transparent;
	border:0;
	color:#fff;
	width:34px;
	height:34px;
	border-radius:8px;
	display:grid;
	place-items:center;
	cursor:pointer;
	flex:none;
	transition:background .15s;
}
.ba-chat-close:hover{background:rgba(255,255,255,.16)}
.ba-chat-close svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- messages ---------- */
.ba-chat-msgs{
	flex:1;
	overflow-y:auto;
	overflow-x:hidden;
	background:var(--bg-2);
	padding:16px;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.ba-chat-msg{display:flex;max-width:100%}
.ba-chat-msg.is-user{justify-content:flex-end}
.ba-chat-msg.is-bot{justify-content:flex-start}
.ba-chat-bubble{
	max-width:82%;
	padding:10px 13px;
	border-radius:14px;
	font-size:14.5px;
	line-height:1.5;
	word-wrap:break-word;
	overflow-wrap:break-word;
}
.ba-chat-msg.is-user .ba-chat-bubble{
	background:var(--navy);
	color:#fff;
	border-bottom-right-radius:4px;
}
.ba-chat-msg.is-bot .ba-chat-bubble{
	background:#fff;
	color:var(--ink);
	border:1px solid var(--line);
	border-bottom-left-radius:4px;
}
.ba-chat-msg.is-bot .ba-chat-bubble a{
	color:var(--navy);
	text-decoration:underline;
	word-break:break-word;
}
.ba-chat-msg.is-user .ba-chat-bubble a{color:#fff;text-decoration:underline}

/* ---------- typing indicator ---------- */
.ba-chat-typing{display:inline-flex;gap:5px;align-items:center;padding:13px}
.ba-chat-typing span{
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--muted);
	display:inline-block;
	animation:baChatBounce 1.2s infinite ease-in-out;
}
.ba-chat-typing span:nth-child(2){animation-delay:.16s}
.ba-chat-typing span:nth-child(3){animation-delay:.32s}
@keyframes baChatBounce{
	0%,80%,100%{transform:translateY(0);opacity:.5}
	40%{transform:translateY(-4px);opacity:1}
}

/* ---------- input row ---------- */
.ba-chat-input-row{
	flex:none;
	display:flex;
	align-items:flex-end;
	gap:8px;
	padding:12px;
	background:#fff;
	border-top:1px solid var(--line);
}
.ba-chat-input{
	flex:1;
	resize:none;
	border:1.5px solid var(--line);
	border-radius:12px;
	padding:10px 12px;
	font:inherit;
	font-size:14.5px;
	line-height:1.4;
	color:var(--ink);
	background:var(--bg-2);
	max-height:120px;
	outline:none;
	transition:border-color .15s;
}
.ba-chat-input:focus{border-color:var(--navy);background:#fff}
.ba-chat-send{
	flex:none;
	width:42px;
	height:42px;
	border-radius:12px;
	background:var(--accent);
	color:#fff;
	border:0;
	display:grid;
	place-items:center;
	cursor:pointer;
	transition:background .15s;
}
.ba-chat-send:hover{background:var(--accent-600)}
.ba-chat-send:disabled{opacity:.55;cursor:default}
.ba-chat-send svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- mobile: near-fullscreen ---------- */
@media (max-width:480px){
	.ba-chat-panel{
		right:0;
		left:0;
		bottom:0;
		width:100vw;
		max-width:100%;
		height:100dvh;
		border-radius:0;
	}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
	.ba-chat-btn,
	.ba-chat-panel{transition:opacity .001s, visibility .001s}
	.ba-chat-btn:hover{transform:none}
	.ba-chat-panel{transform:none}
	.ba-chat-typing span{animation:none}
}