/* ==========================================================================
   Franstorm AI Chatbot — widget styles
   Chat tab + Search tab, same underlying engine. No external icon fonts /
   no external images required — everything is inline SVG or CSS.
   ========================================================================== */

:root{
	--fs-chat-primary: #7C3AED;
	--fs-chat-secondary: #A855F7;
	--fs-ink: #1F1235;
	--fs-muted: #6B6180;
	--fs-bg: #ffffff;
	--fs-line: #EAE4F7;
	--fs-surface: #F8F6FD;
	--fs-radius: 20px;
	--fs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.fs-chatbot-root, .fs-chatbot-root *{ box-sizing: border-box; font-family: var(--fs-font); }

/* Anything toggled via the `hidden` attribute must actually hide —
   several components below set `display:flex/block` on their own class,
   which (same-specificity, later in the cascade) was beating the
   attribute selector and leaving them visibly stacked on top of each
   other (e.g. lead form + chat both showing at once). This wins always. */
.fs-chatbot-root [hidden]{ display:none !important; }

.fs-chatbot-root input, .fs-chatbot-root textarea{ -webkit-appearance:none; appearance:none; }
.fs-chatbot-root input:focus, .fs-chatbot-root textarea:focus{ outline:none; }

.fs-chatbot-root{ position: fixed; right: 24px; bottom: 24px; z-index: 999999; }
.fs-chatbot-root *:focus-visible{ outline: 2px solid var(--fs-chat-primary); outline-offset: 2px; }

/* ---------- Launcher ---------- */
.fs-chatbot-launcher{
	width: 62px; height: 62px; border-radius: 50%;
	background: linear-gradient(150deg, var(--fs-chat-secondary), var(--fs-chat-primary));
	border: none; cursor: pointer; position: relative;
	display:flex; align-items:center; justify-content:center;
	box-shadow:
		0 0 0 1px rgba(255,255,255,.5) inset,
		0 4px 8px rgba(31,18,53,.1),
		0 16px 34px -10px rgba(124,58,237,.62),
		0 4px 10px -2px rgba(124,58,237,.4);
	transition: transform .18s ease, box-shadow .18s ease;
}
.fs-chatbot-launcher:hover{ transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255,255,255,.55) inset, 0 22px 40px -10px rgba(124,58,237,.7), 0 6px 14px -2px rgba(124,58,237,.48); }
.fs-chatbot-launcher:active{ transform: translateY(0) scale(.97); }

.fs-launcher-ring{
	position:absolute; inset:-4px; border-radius:50%;
	background: conic-gradient(from 0deg, var(--fs-chat-primary), var(--fs-chat-secondary), #E8C97A, var(--fs-chat-primary));
	opacity:.55; filter: blur(1px);
	animation: fsRingSpin 6s linear infinite;
	pointer-events:none; z-index:-1;
}
@keyframes fsRingSpin{ to{ transform: rotate(360deg); } }

.fs-launcher-glow{
	position:absolute; inset:-12px; border-radius:50%;
	background: radial-gradient(circle, rgba(168,85,247,.48) 0%, rgba(124,58,237,.2) 55%, transparent 72%);
	animation: fsGlowPulse 2.8s ease-in-out infinite;
	pointer-events:none; z-index:0;
}
@keyframes fsGlowPulse{
	0%, 100%{ transform: scale(1); opacity:.7; }
	50%{ transform: scale(1.18); opacity:1; }
}

.fs-launcher-logo{ width: 100%; height: 100%; display:flex; position:relative; z-index:1; border-radius:50%; overflow:hidden; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.fs-launcher-logo svg, .fs-launcher-logo img{ width:100%; height:100%; object-fit:cover; border-radius: 50%; }
.fs-launcher-badge{
	position:absolute; top:-1px; right:-1px; width:13px; height:13px; border-radius:50%;
	background: #22C55E; border: 2.5px solid #fff; z-index:2;
	box-shadow: 0 0 0 3px rgba(34,197,94,.25), 0 2px 5px rgba(0,0,0,.2);
}

/* ---------- Launcher tooltip ---------- */
.fs-launcher-tooltip{
	position:absolute; bottom: 74px; right: 0;
	background: #fff; color: var(--fs-ink);
	padding: 11px 34px 11px 16px; border-radius: 14px;
	font-size: 13.5px; font-weight: 600; white-space: nowrap;
	box-shadow: 0 18px 36px -12px rgba(31,18,53,.32), 0 4px 12px rgba(31,18,53,.1), 0 0 0 1px var(--fs-line);
	opacity:0; transform: translateY(8px) scale(.96); pointer-events:none;
	transition: opacity .25s ease, transform .25s ease;
	z-index: 1;
}
.fs-launcher-tooltip::after{
	content:''; position:absolute; bottom:-6px; right:26px; width:12px; height:12px;
	background:#fff; transform: rotate(45deg); box-shadow: 2px 2px 4px rgba(31,18,53,.06);
}
.fs-launcher-tooltip.is-visible{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.fs-tooltip-close{
	position:absolute; top:50%; right:8px; transform: translateY(-50%);
	width:20px; height:20px; border-radius:50%; border:none; background:var(--fs-surface);
	color: var(--fs-muted); font-size:15px; line-height:1; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
}
.fs-tooltip-close:hover{ background: var(--fs-line); color: var(--fs-ink); }

/* ---------- Panel ---------- */
.fs-chatbot-panel{
	position:absolute; bottom: 78px; right: 0;
	width: 380px; max-width: calc(100vw - 32px);
	height: 620px; max-height: calc(100vh - 120px);
	background: var(--fs-bg);
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius);
	box-shadow:
		0 0 0 1px rgba(124,58,237,.06),
		0 36px 80px -20px rgba(31,18,53,.34),
		0 12px 32px -10px rgba(124,58,237,.22),
		0 6px 18px rgba(31,18,53,.08);
	display:flex; flex-direction:column; overflow:hidden;
	opacity:0; transform: translateY(14px) scale(.98); pointer-events:none;
	transition: opacity .2s ease, transform .2s ease;
}
.fs-chatbot-root.is-open .fs-chatbot-panel{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.fs-chatbot-root.is-open .fs-launcher-tooltip{ opacity:0; pointer-events:none; transform: translateY(8px) scale(.96); }

/* ---------- Header ---------- */
.fs-chat-header{
	position:relative;
	background: linear-gradient(160deg, var(--fs-chat-secondary), var(--fs-chat-primary));
	padding: 18px 18px 20px;
	color:#fff;
	border-radius: calc(var(--fs-radius) - 1px) calc(var(--fs-radius) - 1px) 0 0;
	flex-shrink:0;
}
.fs-chat-close{
	position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%;
	background: rgba(255,255,255,.16); border:none; color:#fff; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	transition: background .15s ease;
}
.fs-chat-close:hover{ background: rgba(255,255,255,.3); }

.fs-header-brand{ display:flex; align-items:center; gap:11px; margin-bottom:15px; padding-right:28px; }
.fs-header-logo{
	width:40px; height:40px; border-radius:11px; background:#fff; padding:6px; flex-shrink:0;
	box-shadow: 0 3px 10px rgba(31,18,53,.16);
}
.fs-header-logo svg, .fs-header-logo img{ width:100%; height:100%; object-fit:contain; border-radius:6px; }
.fs-header-copy{ display:flex; flex-direction:column; min-width:0; }
.fs-header-name{ font-size:15px; font-weight:700; letter-spacing:-.01em; }

.fs-search-input-wrap{
	position:relative; display:flex; align-items:center; background:#fff; border-radius:13px; padding: 11px 42px 11px 40px;
	box-shadow: 0 8px 20px -6px rgba(20,10,40,.28);
	margin-top: 12px;
	border: 1.5px solid transparent;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fs-search-input-wrap:focus-within{
	border-color: rgba(255,255,255,.85);
	box-shadow: 0 8px 20px -6px rgba(20,10,40,.28), 0 0 0 4px rgba(255,255,255,.22);
}
.fs-search-icon{ position:absolute; left:13px; top:50%; transform: translateY(-50%); color: var(--fs-chat-primary); }
.fs-search-input{
	border:none; outline:none; width:100%; font-size:14px; color: var(--fs-ink); background:transparent;
	-webkit-appearance:none; appearance:none; box-shadow:none;
}
.fs-search-input:focus, .fs-search-input:focus-visible{ outline:none; box-shadow:none; }
.fs-search-input::placeholder{ color:#9C93B2; }
.fs-kbd{
	position:absolute; right:10px; top:50%; transform: translateY(-50%);
	font-size:10.5px; color:#9C93B2; border:1px solid #E7E2F2; border-radius:6px; padding:2px 6px; background:#FAF9FD;
}

/* ---------- Header controls (tabs + search bar) ---------- */
.fs-header-controls{ display:flex; flex-direction:column; }

/* ---------- Lead capture gate ---------- */
.fs-lead-gate{
	flex:1; display:flex; flex-direction:column; justify-content:center;
	padding: 26px 22px; background: var(--fs-bg); overflow-y:auto;
}
.fs-lead-gate-inner{ display:flex; flex-direction:column; }
.fs-lead-title{ margin:0 0 4px; font-size:17px; font-weight:700; letter-spacing:-.01em; color: var(--fs-ink); }
.fs-lead-subtitle{ margin:0 0 18px; font-size:13px; color: var(--fs-muted); }
.fs-lead-form{ display:flex; flex-direction:column; gap:12px; }
.fs-lead-field{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color: var(--fs-muted); }
.fs-lead-field input{
	border:1px solid var(--fs-line); background: var(--fs-surface); border-radius:12px;
	padding:11px 13px; font-size:13.5px; font-weight:400; color: var(--fs-ink); outline:none;
	transition: border-color .15s ease, background .15s ease;
}
.fs-lead-field input::placeholder{ color:#9C93B2; }
.fs-lead-field input:focus{ border-color: var(--fs-chat-primary); background:#fff; }
.fs-lead-field input.is-invalid{ border-color:#E1454F; }
.fs-lead-field input.is-valid{ border-color:#1FA45B; }
.fs-lead-error{ margin:2px 0 0; font-size:12px; font-weight:600; color:#E1454F; }
.fs-lead-submit{
	margin-top:4px; border:none; border-radius:13px; padding:12px 0; cursor:pointer;
	font-size:13.5px; font-weight:700; color:#fff;
	background: linear-gradient(150deg, var(--fs-chat-secondary), var(--fs-chat-primary));
	box-shadow: 0 6px 16px -4px rgba(124,58,237,.5);
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.fs-lead-submit:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px -4px rgba(124,58,237,.58); }
.fs-lead-submit:disabled{ opacity:.6; cursor:default; transform:none; }
.fs-gated-area{ display:flex; flex-direction:column; flex:1; min-height:0; }
.fs-gated-area[hidden]{ display:none; }

.fs-lead-shortcode{ font-size:13.5px; }
.fs-lead-shortcode input[type="text"],
.fs-lead-shortcode input[type="email"],
.fs-lead-shortcode input[type="tel"],
.fs-lead-shortcode textarea{
	width:100%; border:1px solid var(--fs-line); background: var(--fs-surface); border-radius:12px;
	padding:11px 13px; font-size:13.5px; color: var(--fs-ink); outline:none; margin-bottom:10px;
}
.fs-lead-shortcode input[type="submit"]{
	border:none; border-radius:13px; padding:12px 18px; cursor:pointer;
	font-size:13.5px; font-weight:700; color:#fff;
	background: linear-gradient(150deg, var(--fs-chat-secondary), var(--fs-chat-primary));
}

/* ---------- Tabs ---------- */
.fs-tabs{ display:flex; gap:4px; margin-top:2px; background: rgba(255,255,255,.14); padding:3px; border-radius:12px; }
.fs-tab{
	flex:1; border:none; background: transparent; color:#fff; opacity:.78;
	font-size:12.5px; font-weight:600; letter-spacing:.01em; padding:8px 0; border-radius:9px; cursor:pointer;
	transition: background .15s ease, opacity .15s ease, color .15s ease;
}
.fs-tab:hover{ opacity:1; }
.fs-tab.is-active{ background:#fff; color: var(--fs-chat-primary); opacity:1; font-weight:700; }

/* ---------- Icon fill safety net ----------
   Some host themes ship global "svg path{fill:...}" resets that beat our
   inline fill="none" (presentation attributes lose to any authored rule).
   Force every icon in the widget back to stroke-only. */
#fs-chatbot-root svg{ fill: none !important; }
#fs-chatbot-root svg *{ fill: none !important; stroke: currentColor; }

.fs-chat-body{ flex:1; overflow-y:auto; padding: 18px 16px; background: var(--fs-bg); display:flex; flex-direction:column; }
.fs-chat-body::-webkit-scrollbar{ width:6px; }
.fs-chat-body::-webkit-scrollbar-track{ background:transparent; }
.fs-chat-body::-webkit-scrollbar-thumb{ background:#E1D9F4; border-radius:10px; }
.fs-chat-body::-webkit-scrollbar-thumb:hover{ background:#D3C7ED; }

.fs-search-empty{ display:flex; flex-direction:column; padding: 4px 2px; }
.fs-search-empty-label{ margin:0 0 12px; font-size:12.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color: var(--fs-muted); }
.fs-suggested-list{ display:flex; flex-direction:column; gap:8px; width:100%; }
.fs-suggested-chip{
	border:1px solid var(--fs-line); background: var(--fs-surface); border-radius:13px; padding:11px 14px;
	font-size:13.5px; color: var(--fs-ink); text-align:left; cursor:pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.fs-suggested-chip:hover{ border-color: var(--fs-chat-primary); background:#F5F0FF; }
.fs-suggested-chip:active{ transform: scale(.99); }

.fs-search-results{ display:flex; flex-direction:column; gap:12px; }
.fs-result-card{
	border:1px solid var(--fs-line); border-radius:16px; padding:15px 17px;
	background: var(--fs-bg); box-shadow: 0 2px 10px rgba(31,18,53,.05);
	animation: fsCardIn .18s ease;
}
@keyframes fsCardIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.fs-result-card h5{ margin:0 0 7px; font-size:14px; font-weight:700; letter-spacing:-.005em; color: var(--fs-ink); }
.fs-result-card p{ margin:0; font-size:13.5px; line-height:1.6; color:#3A3150; }
.fs-next-question{ margin-top:14px; padding-top:12px; border-top:1px solid #EDE7FA; }
.fs-next-question-label{ display:block; margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color: var(--fs-muted); }
.fs-next-question-chip{ width:100%; text-align:left; }

.fs-handoff-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.fs-handoff-btn{
	display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
	padding:9px 14px; border-radius:11px; text-decoration:none; border:1px solid transparent;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.fs-handoff-btn.is-primary{
	background: linear-gradient(150deg, var(--fs-chat-secondary), var(--fs-chat-primary)); color:#fff;
	box-shadow: 0 4px 12px -3px rgba(124,58,237,.5);
}
.fs-handoff-btn.is-primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px -3px rgba(124,58,237,.58); }
.fs-handoff-btn.is-secondary{ background: var(--fs-surface); color: var(--fs-chat-primary); border-color: var(--fs-line); }
.fs-handoff-btn.is-secondary:hover{ background:#F0E9FC; border-color: var(--fs-chat-primary); }
.fs-handoff-btn svg{ width:14px; height:14px; flex-shrink:0; }

/* ---------- Messages (Chat tab) ---------- */
.fs-messages{ display:flex; flex-direction:column; gap:12px; flex:1; }
.fs-msg{ max-width:84%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.6; animation: fsCardIn .18s ease; }
.fs-msg p{ margin:0 0 6px; }
.fs-msg p:last-child{ margin-bottom:0; }
.fs-msg.is-user{
	align-self:flex-end; color:#fff; border-bottom-right-radius:5px;
	background: linear-gradient(150deg, var(--fs-chat-secondary), var(--fs-chat-primary));
	box-shadow: 0 3px 10px -3px rgba(124,58,237,.4);
}
.fs-msg.is-bot{ align-self:flex-start; background: var(--fs-surface); color: var(--fs-ink); border-bottom-left-radius:5px; border:1px solid var(--fs-line); }
.fs-msg.is-bot h5{ margin:0 0 6px; font-size:13.5px; font-weight:700; }
.fs-msg .fs-handoff-actions{ margin-top:9px; }

.fs-typing{ align-self:flex-start; display:flex; gap:4px; padding:13px 15px; background: var(--fs-surface); border:1px solid var(--fs-line); border-radius:16px; border-bottom-left-radius:5px; }
.fs-typing span{ width:6px; height:6px; border-radius:50%; background: var(--fs-chat-primary); opacity:.45; animation: fsTypingBounce 1.1s ease-in-out infinite; }
.fs-typing span:nth-child(2){ animation-delay:.15s; }
.fs-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes fsTypingBounce{ 0%, 60%, 100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }

.fs-chat-suggested{ margin-top:14px; }
.fs-chat-suggested-label{ margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color: var(--fs-muted); }
.fs-chat-suggested-chips{ display:flex; flex-direction:column; gap:8px; }
.fs-chat-suggested-chips .fs-suggested-chip{ padding:10px 13px; }

/* ---------- Composer ---------- */
.fs-composer{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--fs-line); flex-shrink:0; background:#fff; }
.fs-chat-input{
	flex:1; border:1px solid var(--fs-line); background: var(--fs-surface); border-radius:13px; padding:10px 15px;
	font-size:13.5px; outline:none; color: var(--fs-ink); transition: border-color .15s ease, background .15s ease;
}
.fs-chat-input::placeholder{ color:#9C93B2; }
.fs-chat-input:focus{ border-color: var(--fs-chat-primary); background:#fff; }
.fs-composer-send{
	width:38px; height:38px; flex-shrink:0; border:none; border-radius:50%; cursor:pointer;
	background: linear-gradient(150deg, var(--fs-chat-secondary), var(--fs-chat-primary)); color:#fff;
	display:flex; align-items:center; justify-content:center;
	box-shadow: 0 3px 10px -3px rgba(124,58,237,.45);
	transition: transform .15s ease, box-shadow .15s ease;
}
.fs-composer-send:hover{ transform: translateY(-1px) scale(1.04); box-shadow: 0 5px 14px -3px rgba(124,58,237,.55); }
.fs-composer-send:active{ transform: scale(.96); }
.fs-composer-send:disabled{ opacity:.45; cursor:default; transform:none; box-shadow:none; }

/* ---------- Mobile ---------- */
@media (max-width: 480px){
	.fs-chatbot-root{ right:12px; bottom:12px; }
	.fs-chatbot-panel{ width: calc(100vw - 24px); height: calc(100vh - 110px); right:-6px; }
}