/* AI Store Concierge — front-end widget */
:root {
	--asc-accent: #2563eb;
	--asc-accent-ink: #ffffff;
	--asc-bot-bg: #ffffff;
	--asc-bot-ink: #1f2933;
	--asc-panel-bg: #f3f5f9;
	--asc-border: #e6e9ef;
	--asc-muted: #8a94a6;
	--asc-radius: 18px;
	--asc-shadow: 0 18px 50px rgba(15, 23, 42, .22);
	--asc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif;
}

.asc-launcher, .asc-panel { font-family: var(--asc-font); box-sizing: border-box; }
.asc-panel *, .asc-panel *::before, .asc-panel *::after { box-sizing: border-box; }

/* Icons: keep them visible and correctly sized regardless of the active theme's
   button/svg resets (some themes collapse or recolour SVGs inside <button>). */
.asc-launcher svg, .asc-panel svg {
	display: block !important;
	fill: #fff !important;
	max-width: none !important;
	pointer-events: none;
	vertical-align: middle;
}

/* ---------- Launcher ---------- */
.asc-launcher {
	position: fixed;
	bottom: 24px;
	z-index: 99998;
	width: 62px !important;
	height: 62px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(37, 99, 235, .42);
	/* Icon painted as a background so no theme button/svg rule can hide it. */
	background-color: var(--asc-accent);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 3C6.5 3 2 6.8 2 11.5c0 2.3 1.1 4.4 2.9 5.9L4 21l4.3-1.5c1.1.3 2.4.5 3.7.5 5.5 0 10-3.8 10-8.5S17.5 3 12 3z'/%3E%3C/svg%3E");
	transition: transform .18s ease, box-shadow .18s ease;
}
.asc-launcher:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 34px rgba(37, 99, 235, .5); }
.asc-launcher:active { transform: scale(.96); }

/* Notification dot */
.asc-launcher { position: fixed; }
.asc-dot {
	position: absolute; top: 2px; right: 2px;
	width: 14px; height: 14px; border-radius: 50%;
	background: #ef4444; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* Gentle shake */
@keyframes asc-shake {
	0%, 92%, 100% { transform: rotate(0); }
	93% { transform: rotate(-9deg); } 94% { transform: rotate(8deg); }
	95% { transform: rotate(-7deg); } 96% { transform: rotate(6deg); }
	97% { transform: rotate(-4deg); } 98% { transform: rotate(3deg); } 99% { transform: rotate(-1deg); }
}
.asc-launcher.asc-shake { animation: asc-shake 3.2s ease-in-out infinite; }

/* Teaser bubble */
.asc-teaser {
	position: fixed;
	bottom: calc(var(--asc-launcher-size, 62px) + 34px);
	z-index: 99998;
	max-width: 240px;
	background: #fff; color: #1f2933;
	border-radius: 14px; padding: 11px 34px 11px 14px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .22);
	font-size: 14px; line-height: 1.4; cursor: pointer;
	animation: asc-rise .25s ease both;
}
.asc-pos-bottom-right .asc-teaser { right: 24px; }
.asc-pos-bottom-left  .asc-teaser { left: 24px; }
.asc-teaser-x {
	position: absolute; top: 4px; right: 6px;
	background: transparent; border: none; cursor: pointer;
	font-size: 17px; line-height: 1; color: #9aa0a6; padding: 2px 4px;
}
.asc-teaser-x:hover { color: #4b5563; }
.asc-pos-bottom-right .asc-launcher, .asc-pos-bottom-right .asc-panel { right: 24px; }
.asc-pos-bottom-left  .asc-launcher, .asc-pos-bottom-left  .asc-panel { left: 24px; }

/* ---------- Panel ---------- */
.asc-panel {
	position: fixed;
	bottom: calc(var(--asc-launcher-size, 62px) + 38px);
	z-index: 99999;
	width: 394px;
	max-width: calc(100vw - 32px);
	height: 600px;
	max-height: calc(100vh - 130px);
	background: var(--asc-panel-bg);
	border-radius: var(--asc-radius);
	box-shadow: var(--asc-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px) scale(.98);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1);
}
.asc-panel.asc-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.asc-inline .asc-panel {
	position: static; opacity: 1; transform: none; pointer-events: auto;
	width: 100%; max-width: 100%; height: 560px;
	box-shadow: 0 4px 20px rgba(15, 23, 42, .1);
}

/* ---------- Header ---------- */
.asc-header {
	background: linear-gradient(135deg, var(--asc-accent), color-mix(in srgb, var(--asc-accent) 72%, #000 12%));
	color: #fff;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}
.asc-avatar {
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
}
.asc-avatar svg { width: 22px; height: 22px; fill: #fff; }
.asc-head-text { flex: 1 1 auto; min-width: 0; }
.asc-header h3 { margin: 0; font-size: 16px; font-weight: 650; color: #fff; line-height: 1.2; }
.asc-status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .9; margin-top: 2px; }
.asc-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: asc-pulse 2s infinite; }
@keyframes asc-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.asc-close {
	background: rgba(255, 255, 255, .16); border: none; color: #fff; cursor: pointer;
	font-size: 20px; line-height: 1; width: 30px; height: 30px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.asc-close:hover { background: rgba(255, 255, 255, .3); }

/* ---------- Messages ---------- */
/* Test-mode banner (admins only) */
.asc-testmode {
	flex: 0 0 auto;
	background: #fef3c7;
	color: #92400e;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
	padding: 6px 8px;
	border-bottom: 1px solid #fcd34d;
}

.asc-messages {
	flex: 1 1 auto; overflow-y: auto; padding: 18px 16px;
	display: flex; flex-direction: column; gap: 12px;
	scroll-behavior: smooth;
}
.asc-messages::-webkit-scrollbar { width: 8px; }
.asc-messages::-webkit-scrollbar-thumb { background: #cbd2de; border-radius: 8px; }
.asc-messages::-webkit-scrollbar-track { background: transparent; }

.asc-msg {
	max-width: 86%; padding: 11px 14px; font-size: 14.5px; line-height: 1.55;
	word-wrap: break-word; overflow-wrap: anywhere;
	animation: asc-rise .22s ease both;
}
@keyframes asc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.asc-msg-bot {
	align-self: flex-start; background: var(--asc-bot-bg); color: var(--asc-bot-ink);
	border: 1px solid var(--asc-border);
	border-radius: 16px 16px 16px 5px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
}
.asc-msg-user {
	align-self: flex-end;
	background: var(--asc-accent); color: var(--asc-accent-ink);
	border-radius: 16px 16px 5px 16px;
	box-shadow: 0 3px 10px rgba(37, 99, 235, .28);
}

/* Rich content inside bot bubbles */
.asc-msg p { margin: 0 0 8px; }
.asc-msg p:last-child { margin-bottom: 0; }
.asc-msg strong { font-weight: 650; }
.asc-msg ul, .asc-msg ol { margin: 6px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.asc-msg li { line-height: 1.5; }
.asc-msg a { color: var(--asc-accent); text-decoration: none; font-weight: 550; border-bottom: 1px solid color-mix(in srgb, var(--asc-accent) 35%, transparent); }
.asc-msg-user a { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }
.asc-msg a:hover { border-bottom-color: currentColor; }

/* Sources chips */
.asc-sources { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--asc-border); font-size: 11.5px; color: var(--asc-muted); }
.asc-sources > span, .asc-sources .asc-src-label { display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.asc-sources a {
	display: inline-flex; align-items: center; gap: 4px;
	background: color-mix(in srgb, var(--asc-accent) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--asc-accent) 22%, transparent);
	color: var(--asc-accent);
	padding: 3px 9px; border-radius: 999px; margin: 0 5px 5px 0;
	font-size: 11.5px; font-weight: 550; text-decoration: none;
}
.asc-sources a:hover { background: color-mix(in srgb, var(--asc-accent) 16%, #fff); }

/* Typing indicator */
.asc-typing {
	align-self: flex-start; display: flex; gap: 5px; padding: 13px 16px;
	background: var(--asc-bot-bg); border: 1px solid var(--asc-border);
	border-radius: 16px 16px 16px 5px;
}
.asc-typing span { width: 8px; height: 8px; border-radius: 50%; background: #b3bccb; animation: asc-bounce 1.3s infinite ease-in-out; }
.asc-typing span:nth-child(2) { animation-delay: .16s; }
.asc-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes asc-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- Input ---------- */
.asc-input {
	flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end;
	padding: 12px; background: #fff; border-top: 1px solid var(--asc-border);
}
.asc-input textarea {
	flex: 1; resize: none; border: 1px solid #d7dce5; border-radius: 22px;
	padding: 11px 16px; font-size: 14.5px; font-family: inherit; max-height: 104px;
	line-height: 1.4; color: var(--asc-bot-ink); background: #f7f9fc; transition: border-color .15s ease, background .15s ease;
}
.asc-input textarea:focus { outline: none; border-color: var(--asc-accent); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--asc-accent) 15%, transparent); }
.asc-send {
	border: none; border-radius: 50% !important;
	width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important;
	flex: 0 0 auto; cursor: pointer;
	background-color: var(--asc-accent);
	background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M3.4 20.4l17.45-7.48a1 1 0 0 0 0-1.84L3.4 3.6a.993.993 0 0 0-1.39.91L2 9.12c0 .5.37.93.87.99L17 12 2.87 13.88c-.5.07-.87.5-.87 1l.01 4.61c0 .71.73 1.2 1.39.91z'/%3E%3C/svg%3E");
	transition: transform .12s ease, opacity .15s ease;
}
.asc-send:hover { transform: scale(1.06); }
.asc-send:disabled { opacity: .5; cursor: default; transform: none; }

.asc-foot { text-align: center; font-size: 10.5px; color: var(--asc-muted); padding: 7px; background: #fff; letter-spacing: .02em; }

@media (max-width: 480px) {
	.asc-panel { width: calc(100vw - 20px); height: calc(100vh - 96px); bottom: 84px; border-radius: 14px; }
	.asc-launcher { bottom: 18px; }
	.asc-pos-bottom-right .asc-panel, .asc-pos-bottom-left .asc-panel { right: 10px; left: 10px; width: auto; }
}