/**
 * Formgic Frontend Widget Styles
 * Modern, Professional UI/UX Design
 *
 * @package Formgic
 */

/* ============================================
   CSS VARIABLES - Extended Color System
   ============================================ */
:root {
	/* Primary Gradient System */
	--formgic-primary: #FF6B47;
	--formgic-primary-light: #FF8A6E;
	--formgic-primary-dark: #E85228;
	--formgic-primary-gradient: linear-gradient(135deg, #FF8A6E 0%, #E85228 100%);
	--formgic-primary-hover: #F95F39;
	--formgic-link: var(--formgic-primary);

	/* Background Colors */
	--formgic-bg: #ffffff;
	--formgic-bg-subtle: #fafafa;
	--formgic-bg-muted: #f1f5f9;
	--formgic-bg-card: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);

	/* Text Colors */
	--formgic-text: #2F3747;
	--formgic-text-muted: #64748b;
	--formgic-text-subtle: #94a3b8;

	/* Border Colors */
	--formgic-border: rgba(15, 23, 42, 0.06);
	--formgic-border-strong: rgba(0, 0, 0, 0.1);
	--formgic-border-focus: rgba(255, 107, 71, 0.3);
	--formgic-bot-bubble-border: #E8ECF1;

	/* Slider */
	--formgic-slider-track: #E5E7EB;

	/* Message Colors */
	--formgic-bot-bg: #F8F9FB;
	--formgic-bot-bg-solid: #F8F9FB;
	--formgic-user-bg: #FF6B47;
	--formgic-user-text: #ffffff;

	/* Input Colors */
	--formgic-input-bg: #FCFCFD;
	--formgic-input-text: #2F3747;
	--formgic-input-border-focus-width: 2px;

	/* Scrollbar */
	--formgic-scrollbar-thumb: #DCE3EA;
	--formgic-scrollbar-thumb-hover: #CBD5E1;

	/* Status Colors */
	--formgic-error: #ef4444;
	--formgic-success: #10b981;
	--formgic-warning: #f59e0b;

	/* Shadows - Layered System */
	--formgic-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
	--formgic-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
	--formgic-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
	--formgic-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
	--formgic-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
	--formgic-shadow-primary: 0 4px 14px rgba(255, 107, 71, 0.25);
	--formgic-shadow-primary-lg: 0 8px 24px rgba(255, 107, 71, 0.3);

	/* Border Radius */
	--formgic-radius-sm: 8px;
	--formgic-radius-md: 12px;
	--formgic-radius-lg: 16px;
	--formgic-radius-xl: 20px;
	--formgic-radius-full: 9999px;
	--formgic-radius: var(--formgic-radius-lg);

	/* Fixed per-element radii (decoupled from the roundness control) */
	--formgic-bubble-radius: 18px;
	--formgic-input-radius: 14px;
	--formgic-send-radius: 14px;

	/* Typography */
	--formgic-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--formgic-font-weight: 400;
	--formgic-font-size: 16px;

	/* Transitions */
	--formgic-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--formgic-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--formgic-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   TOOLTIP (CSS-only, data-tooltip attribute)
   ============================================ */
.formgic-tooltip {
	position: relative;
}

.formgic-tooltip::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) scale(0.9);
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--formgic-text);
	color: var(--formgic-bg);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 150ms, transform 150ms;
}

.formgic-tooltip:hover::after {
	opacity: 1;
	transform: translateX(-50%) scale(1);
}

/* ============================================
   WIDGET CONTAINER
   ============================================ */
.formgic-widget {
	font-family: var(--formgic-font-sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--formgic-text);
	background: var(--formgic-bg);
	border-radius: var(--formgic-radius-xl);
	box-shadow: none;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: none;
}

/* Portal layer — a body-level host for popups that would otherwise be clipped
   by `.formgic-messages { overflow-y: auto }` (inline mode) or by
   `.formgic-widget { overflow: hidden }` (bottom-bar mode).

   It carries the `formgic-widget` class on purpose: ~50 rules in this file are
   descendant selectors (`.formgic-widget .rdp-*`, `.formgic-widget
   .formgic-dropdown-option`, …) and would stop matching otherwise. Everything
   that makes `.formgic-widget` a visible container box is reset here; the font
   and text colour are kept, since the panels inherit them. */
.formgic-widget.formgic-portal-layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	max-width: none;
	max-height: none;
	display: block;
	overflow: visible;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	z-index: 100000;
	pointer-events: none;
}

.formgic-portal-layer > * {
	pointer-events: auto;
	max-width: calc(100vw - 16px);
}

/* Panel positioned by useAnchoredPosition (top/left/width/max-height inline). */
.formgic-anchored {
	position: fixed;
	margin: 0;
}

/* Inner content wrapper — receives container padding so header/progress/footer
   bleed edge-to-edge while messages and input area stay padded. */
.formgic-widget-content {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	/* Container padding now lives on .formgic-messages (present in both the
	   inline and popup render paths) so the chat area is its own padded zone
	   and the input/footer below can carry independent spacing. */
	padding: 0;
}

.formgic-mode-embed {
	max-width: 100%;
	height: 600px;
}

/* Added by the mount script only when the shortcode's parent resolves to a
   definite height. It completes the percentage chain so a `%` Max Height in the
   Container theme has something to resolve against, and lets the embed fill the
   slot it was given instead of staying pinned at 600px. Absent on ordinary
   auto-height page content, so existing embeds are untouched. */
.formgic-widget-container.formgic-fill-height {
	height: 100%;
	min-height: 0;
}

.formgic-widget-container.formgic-fill-height > .formgic-mode-embed {
	height: 100%;
}

.formgic-mode-popup {
	width: 400px;
	height: 580px;
}

/* ============================================
   HEADER - Gradient with Glassmorphism
   ============================================ */
.formgic-header {
	padding:
		var(--formgic-header-pad-top, 12px)
		var(--formgic-header-pad-right, 24px)
		var(--formgic-header-pad-bottom, 12px)
		var(--formgic-header-pad-left, 24px);
	background: var(--formgic-header-bg, #ffffff);
	color: var(--formgic-header-text, #1f2937);
	text-align: var(--formgic-header-text-align, left);
	position: relative;
	overflow: hidden;
	border-bottom: var(--formgic-header-divider-width, 0) solid var(--formgic-header-divider-color, transparent);
}

/* Subtle pattern overlay */
.formgic-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: none;
	pointer-events: none;
}

.formgic-header h3 {
	margin: 0;
	font-size: var(--formgic-header-title-size, 17px);
	font-weight: var(--formgic-header-title-weight, 700);
	letter-spacing: -0.02em;
	position: relative;
	text-shadow: none;
}

.formgic-subtitle {
	margin: 6px 0 0;
	font-size: 13px;
	opacity: 0.9;
	font-weight: 400;
	position: relative;
}

.formgic-close-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(0, 0, 0, 0.06);
	backdrop-filter: blur(4px);
	color: var(--formgic-header-text, #6b7280);
	border-radius: var(--formgic-radius-sm);
	cursor: pointer;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--formgic-transition-fast);
}

.formgic-close-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: scale(1.05);
}

.formgic-close-btn:active {
	transform: scale(0.95);
}

/* ============================================
   PROGRESS BAR
   ============================================ */
.formgic-progress-container {
	padding: 10px 24px;
	background: var(--formgic-bg);
	border-bottom: 1px solid var(--formgic-border);
	display: flex;
	align-items: center;
	gap: 12px;
}

.formgic-progress-bar {
	flex: 1;
	height: 4px;
	background: var(--formgic-bg-muted);
	border-radius: var(--formgic-radius-full);
	overflow: hidden;
}

.formgic-progress-fill {
	height: 100%;
	background: var(--formgic-progress-color, var(--formgic-primary));
	border-radius: var(--formgic-radius-full);
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.formgic-progress-text {
	font-size: 11px;
	font-weight: 500;
	color: var(--formgic-text-muted);
	white-space: nowrap;
}

/* Minimal variant: flush thin line, no padding/border, no track bg */
.formgic-progress-bar.formgic-progress-bar--minimal {
	height: 3px;
	border-radius: 0;
	flex: none;
	width: 100%;
	background: transparent;
}

.formgic-progress-bar--minimal .formgic-progress-fill {
	border-radius: 0;
}

/* ============================================
   MESSAGES CONTAINER
   ============================================ */
.formgic-messages {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
	/* Chat-area zone padding. Defaults 20 on all sides. Right padding
	   uses max(12px, …) so the bubble lane stays clear of the scrollbar gutter
	   even if the theme sets container padding-right to 0. */
	padding-top: var(--formgic-container-padding-top, 20px);
	padding-right: max(12px, var(--formgic-container-padding-right, 20px));
	padding-bottom: var(--formgic-container-padding-bottom, 20px);
	padding-left: var(--formgic-container-padding-left, 20px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	/* Inter-message spacing is speaker-aware, applied per row via
	   .formgic-msg-gap-* on the wrapper — not a uniform flex gap. */
	gap: 0;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--formgic-scrollbar-thumb, #DCE3EA) transparent;
}

/* Custom Scrollbar.
   The track lane is a fixed 8px so the thumb can change thickness without ever
   reflowing the message column. Visible thumb width is set purely by the
   transparent border + background-clip: padding-box trick: 2px border = 4px
   thumb at rest, 1px border = 6px thumb once the pointer is over the chat.
   No transition here on purpose — Chrome does not animate CSS transitions on
   ::-webkit-scrollbar-* pseudo-elements, so the swap is an instant snap. */
.formgic-messages::-webkit-scrollbar {
	width: 8px;
}

.formgic-messages::-webkit-scrollbar-track {
	background: transparent;
}

.formgic-messages::-webkit-scrollbar-thumb {
	background: var(--formgic-scrollbar-thumb, #DCE3EA);
	border-radius: var(--formgic-radius-full);
	background-clip: padding-box;
	border: 2px solid transparent;
}

.formgic-messages:hover::-webkit-scrollbar-thumb {
	border-width: 1px;
}

.formgic-messages::-webkit-scrollbar-thumb:hover {
	background: var(--formgic-scrollbar-thumb-hover, #CBD5E1);
	border-width: 1px;
}

/* ============================================
   MESSAGE BUBBLES - Modern Design
   ============================================ */
.formgic-message {
	display: flex;
	flex-direction: column;
}

/* Speaker-aware vertical spacing. Applied to the message row wrapper (the
   flex item) so gaps don't margin-collapse: 8px between same-speaker bubbles,
   12px when the speaker changes (either direction), 0 above the first row. */
.formgic-msg-gap-first {
	margin-top: 0;
}

.formgic-msg-gap-same {
	margin-top: 8px;
}

.formgic-msg-gap-change {
	margin-top: 12px;
}

.formgic-message-bot {
	align-items: flex-start;
	/* Inter-message spacing is owned by the .formgic-msg-gap-* wrapper class. */
	margin: 0;
}

.formgic-message-user {
	align-items: flex-end;
	/* Inter-message spacing is owned by the .formgic-msg-gap-* wrapper class. */
	margin: 0;
}

.formgic-message-bubble {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 85%;
}

/* ============================================
   BUBBLE ENTRANCE ANIMATION
   Only content bubbles animate — avatars stay still to avoid a "blink".
   Scale origin sits at the bubble's tail corner for a natural pop.
   ============================================ */
@keyframes formgicBubbleIn {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.formgic-message-bot .formgic-message-content,
.formgic-message-bot .formgic-typing-dots,
.formgic-inline-question-bubble,
.formgic-inline-input-card {
	transform-origin: bottom left;
	animation: formgicBubbleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.formgic-message-user .formgic-message-content {
	transform-origin: bottom right;
	animation: formgicBubbleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.formgic-message-user .formgic-message-bubble {
	flex-direction: row-reverse;
}

/* Inline restart / edit buttons on user messages */
.formgic-msg-restart-btn,
.formgic-msg-edit-btn {
	width: 24px;
	height: 24px;
	border: none;
	border-radius: var(--formgic-radius-sm);
	background: var(--formgic-bg);
	color: var(--formgic-text-subtle);
	opacity: 0;
	transition: opacity 150ms, color 150ms;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
	align-self: center;
}

.formgic-message-user:hover .formgic-msg-restart-btn,
.formgic-message-user:hover .formgic-msg-edit-btn {
	opacity: 1;
}

.formgic-msg-restart-btn:hover,
.formgic-msg-edit-btn:hover {
	color: var(--formgic-text);
}

/* Avatar Styling */
.formgic-avatar {
	width: 36px;
	height: 36px;
	border-radius: var(--formgic-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	box-shadow: var(--formgic-shadow-sm);
}

.formgic-avatar--rounded {
	border-radius: 10px;
}

.formgic-avatar--square {
	border-radius: 6px;
}

.formgic-avatar--sharp {
	border-radius: 0;
}

.formgic-avatar--none {
	background: none !important;
	box-shadow: none;
	overflow: visible;
}

.formgic-avatar--none .formgic-avatar-img {
	-o-object-fit: contain;
	   object-fit: contain;
}

/* Placeholder spacer used when avatar is hidden in 'grouped' display mode.
   Keeps the same width/height so subsequent bubble text stays aligned with the
   first message in the group. */
.formgic-avatar--placeholder {
	visibility: hidden;
	background: none !important;
	box-shadow: none;
	pointer-events: none;
}

.formgic-avatar-svg {
	width: 100%;
	height: 100%;
}

.formgic-avatar-img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

/* Dashicon avatar */
.formgic-avatar .dashicons {
	font-size: var(--formgic-avatar-icon-size, 22px);
	width: var(--formgic-avatar-icon-size, 22px);
	height: var(--formgic-avatar-icon-size, 22px);
	line-height: var(--formgic-avatar-icon-size, 22px);
	color: inherit;
}

/* Message Content Styling */
.formgic-message-content {
	padding: var(--formgic-bot-bubble-padding-y, 12px) var(--formgic-bot-bubble-padding-x, 16px);
	border-radius: var(--formgic-bubble-radius, 18px);
	word-wrap: break-word;
	font-size: var(--formgic-font-size, 16px);
	line-height: 1.5;
	font-weight: var(--formgic-font-weight, 400);
}

.formgic-message-bot .formgic-message-content {
	background: var(--formgic-bot-bg);
	color: var(--formgic-text);
	border: 1px solid var(--formgic-bot-bubble-border, #E8ECF1);
	box-shadow: var(--formgic-bot-bubble-shadow, none);
}

.formgic-message-user .formgic-message-content {
	padding: var(--formgic-user-bubble-padding-y, 12px) var(--formgic-user-bubble-padding-x, 16px);
	background: var(--formgic-user-bg);
	color: var(--formgic-user-text);
	box-shadow: var(--formgic-user-bubble-shadow, none);
}

/* Calculation result bubbles get subtle emphasis: semibold text + a thin
   accent border so a computed total stands out from ordinary bot messages. */
.formgic-message--result .formgic-message-content {
	font-weight: 600;
	border-left: 3px solid var(--formgic-primary);
}

/* Column holding a bubble and its timestamp. min-width:0 keeps long words from
   forcing the flex item wider than the bubble's max-width. */
.formgic-message-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Timestamp sits tight under its own bubble (2px) and pushes the next message
   away (6px) so ownership reads upward, not into the gap between bubbles. */
.formgic-message-time {
	font-size: 11px;
	color: var(--formgic-text-subtle);
	margin-top: 2px;
	margin-bottom: 6px;
	font-weight: 400;
	line-height: 1.3;
	/* width:0 keeps the timestamp from widening the column (a short bubble like
	   "Yes" must not stretch to fit "09:07 AM"); min-width:100% then makes it
	   span the bubble so text-align lands under the bubble edges. */
	width: 0;
	min-width: 100%;
	white-space: nowrap;
}

.formgic-message-time--left {
	text-align: left;
}

.formgic-message-time--center {
	text-align: center;
}

.formgic-message-time--right {
	text-align: right;
}

/* ============================================
   TYPING INDICATOR
   ============================================ */
.formgic-typing-indicator {
	margin-bottom: 4px;
}

.formgic-typing-dots {
	display: flex;
	gap: var(--formgic-typing-dot-gap, 5px);
	padding: var(--formgic-typing-pad-top, 12px) var(--formgic-typing-pad-right, 16px) var(--formgic-typing-pad-bottom, 12px) var(--formgic-typing-pad-left, 16px);
	background: var(--formgic-typing-bg, #F8F9FB);
	border: var(--formgic-typing-border-width, 1px) solid var(--formgic-typing-border-color, #E8ECF1);
	border-radius: var(--formgic-typing-radius, 18px);
}

/* Direct children only: the ellipsis variant nests its own spans and must not
   inherit the round-dot treatment. */
.formgic-typing-dots > span {
	width: var(--formgic-typing-dot-size, 7px);
	height: var(--formgic-typing-dot-size, 7px);
	background: var(--formgic-typing-dot-color, #94A3B8);
	border-radius: var(--formgic-radius-full);
	animation: typingFade 1.4s ease-in-out infinite;
}

.formgic-typing-dots > span:nth-child(2) {
	animation-delay: 0.2s;
}

.formgic-typing-dots > span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes typingFade {
	0%, 100% {
		opacity: 0.3;
	}
	50% {
		opacity: 1;
	}
}

/* --- Style: up & down --- */
.formgic-typing-dots--bounce > span {
	animation-name: typingBounce;
	animation-duration: 1.2s;
}

@keyframes typingBounce {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.45;
	}
	30% {
		transform: translateY(calc(var(--formgic-typing-dot-size, 7px) * -0.85));
		opacity: 1;
	}
}

/* --- Style: typing text ---
   The word "Typing" followed by three literal periods revealed cumulatively.
   Opacity (not display) keeps the bubble width fixed so it never jitters
   mid-cycle. */
.formgic-typing-dots--ellipsis > .formgic-typing-ellipsis {
	display: flex;
	align-items: baseline;
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	animation: none;
	font-size: calc(var(--formgic-typing-dot-size, 7px) * 1.9);
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--formgic-typing-dot-color, #94A3B8);
}

/* Word first, then the three dots: nth-child offsets account for the word. */
.formgic-typing-ellipsis > .formgic-typing-dot:nth-child(3) {
	animation: typingEllipsis2 1.2s steps(1, end) infinite;
}

.formgic-typing-ellipsis > .formgic-typing-dot:nth-child(4) {
	animation: typingEllipsis3 1.2s steps(1, end) infinite;
}

@keyframes typingEllipsis2 {
	0%, 33.33% {
		opacity: 0;
	}
	33.34%, 100% {
		opacity: 1;
	}
}

@keyframes typingEllipsis3 {
	0%, 66.66% {
		opacity: 0;
	}
	66.67%, 100% {
		opacity: 1;
	}
}

/* --- Style: typewriter ---
   The wait itself uses the same three dots as the default style; the reveal
   happens inside the bubble (RevealText), so no separate placeholder here. */
.formgic-reveal--html {
	display: block;
}

.formgic-reveal--html > .formgic-rt-html {
	display: block;
}

.formgic-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Typewriter reveal of the message body (dots style: reveal). */
.formgic-reveal-caret {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 1px;
	vertical-align: text-bottom;
	background: currentColor;
	opacity: 0.6;
	animation: formgicRevealCaret 1s steps(1, end) infinite;
}

@keyframes formgicRevealCaret {
	0%, 49% {
		opacity: 0.6;
	}
	50%, 100% {
		opacity: 0;
	}
}

/* Motion here is decorative: freeze every variant at a legible resting state. */
@media (prefers-reduced-motion: reduce) {
	.formgic-typing-dots > span,
	.formgic-typing-dots--bounce > span,
	.formgic-typing-ellipsis > span,
	.formgic-reveal-caret {
		animation: none !important;
		transform: none !important;
		opacity: 1;
	}
}

/* ============================================
   INPUT AREA
   ============================================ */
.formgic-input-area {
	/* Input zone: its own compact padding, independent of the chat area's 20px. */
	padding: 12px 16px;
	border-top: 1px solid var(--formgic-border);
	background: transparent;
}

.formgic-input-form {
	width: 100%;
}

.formgic-input-wrapper {
	display: flex;
	gap: 8px;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	position: relative;
}

/* Prefix/suffix adornments for number_input (and any future affixed inputs).
   Rendered as siblings of the <input>; pinned over the input field area.
   The input gains extra horizontal padding via .formgic-input--has-prefix /
   --has-suffix so the affix never overlaps the typed value or placeholder. */
.formgic-input-affix {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--formgic-text-muted, #6b7280);
	font-size: 14px;
	font-family: inherit;
	line-height: 1;
	z-index: 1;
}

/* Sits on the input's own text inset so the symbol lines up with where a
   value would start. ChatInput then measures this span and sets the input's
   padding-left to (this inset + symbol width + gap). */
.formgic-input-affix--prefix {
	left: var(--formgic-input-padding-x, 16px);
}

/* Suffix sits inside the input's right edge — input right edge is at
   (wrapper width - send-button 44px - wrapper gap 8px) = wrapper right - 52px.
   Add an 8px inset so the affix isn't flush against the input border. */
.formgic-input-affix--suffix {
	right: 60px;
}

/* Pre-measurement fallback (also covers no-JS-measure paths); the inline
   style from ChatInput overrides it once the affix width is known. */
.formgic-widget .formgic-input.formgic-input--has-prefix {
	padding-left: calc(var(--formgic-input-padding-x, 16px) + 20px);
}

.formgic-widget .formgic-input.formgic-input--has-suffix {
	padding-right: 32px;
}

/* Chat number/currency fields: suppress the browser's native stepper.
   Users type the amount; the up/down arrows only crowd the send button. */
.formgic-widget input.formgic-input[type="number"] {
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	        appearance: textfield;
}
.formgic-widget input.formgic-input[type="number"]::-webkit-outer-spin-button,
.formgic-widget input.formgic-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Input rules use .formgic-widget prefix + !important so host theme styles
   (e.g. Astra's `input[type="number"]` rule) cannot override the configured
   theme colors. Without this, third-party themes win on specificity. */
.formgic-widget .formgic-input,
.formgic-widget input.formgic-input,
.formgic-widget textarea.formgic-input {
	flex: 1;
	padding: var(--formgic-input-padding-y, 12px) var(--formgic-input-padding-x, 16px);
	min-height: 44px;
	border-style: solid !important;
	border-width: var(--formgic-input-border-width, 1px) !important;
	border-color: var(--formgic-input-border-color, var(--formgic-border-strong)) !important;
	border-radius: var(--formgic-input-radius, 14px);
	font-size: 14px;
	font-family: inherit;
	background: var(--formgic-input-bg) !important;
	color: var(--formgic-input-text) !important;
	outline: none;
	transition: var(--formgic-transition-fast);
	box-sizing: border-box;
}

.formgic-widget .formgic-input::-moz-placeholder, .formgic-widget input.formgic-input::-moz-placeholder, .formgic-widget textarea.formgic-input::-moz-placeholder {
	color: var(--formgic-text-muted) !important;
	opacity: 1;
}

.formgic-widget .formgic-input::placeholder,
.formgic-widget input.formgic-input::placeholder,
.formgic-widget textarea.formgic-input::placeholder {
	color: var(--formgic-text-muted) !important;
	opacity: 1;
}

/* Focus indication uses border + a soft, thin shadow — keep the configured input bg.
   Border-color honors the user's configured input border color first; falls back
   to the primary accent only when the user hasn't customized one. The box-shadow
   provides the actual focus cue regardless of border color. */
.formgic-widget .formgic-input:focus,
.formgic-widget input.formgic-input:focus,
.formgic-widget textarea.formgic-input:focus {
	border-width: var(--formgic-input-border-focus-width, 2px) !important;
	border-color: var(--formgic-input-border-focus-color, var(--formgic-primary, rgba(0, 0, 0, 0.15))) !important;
	box-shadow: none;
	outline: none;
}

.formgic-input-error {
	border-color: var(--formgic-error);
}

.formgic-input-error:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

button.formgic-send-btn {
	width: auto;
	min-width: 44px;
	min-height: 44px;
	aspect-ratio: 1 / 1;
	border: none;
	background: var(--formgic-submit-btn-bg, var(--formgic-primary));
	background-color: var(--formgic-submit-btn-bg, var(--formgic-primary));
	color: var(--formgic-submit-btn-text, white);
	border-radius: var(--formgic-send-radius, 14px);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--formgic-transition-fast);
	flex-shrink: 0;
	align-self: stretch;
	box-sizing: border-box;
	padding: 0;
}

/* Textarea case: button doesn't stretch to a tall column — stay 44x44 anchored to bottom. */
.formgic-input-wrapper:has(textarea.formgic-input) {
	align-items: flex-end;
}

.formgic-input-wrapper:has(textarea.formgic-input) > button.formgic-send-btn {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	aspect-ratio: 1 / 1;
}

button.formgic-send-btn svg {
	width: 18px;
	height: 18px;
	color: var(--formgic-submit-btn-text, white);
	fill: none;
	stroke: currentColor;
}

/* Send button style variants — wider pills, override the icon-only square aspect ratio. */
button.formgic-send-btn--text {
	width: auto;
	min-width: 44px;
	aspect-ratio: auto;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
}

button.formgic-send-btn--icon-text {
	width: auto;
	min-width: 44px;
	aspect-ratio: auto;
	padding: 0 14px;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
}

button.formgic-send-btn:hover:not(:disabled) {
	background: color-mix(in srgb, var(--formgic-submit-btn-bg, var(--formgic-primary)) 88%, #000);
	background-color: color-mix(in srgb, var(--formgic-submit-btn-bg, var(--formgic-primary)) 88%, #000);
}

button.formgic-send-btn:active:not(:disabled) {
	transform: scale(0.95);
}

button.formgic-send-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.formgic-input-error-message {
	margin-top: 8px;
	font-size: 12px;
	color: var(--formgic-error);
	padding-left: 4px;
}

/* ============================================
   BUTTON CHOICES - Glass Effect
   ============================================ */
.formgic-button-choices {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.formgic-choices-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.formgic-widget .formgic-choice-btn {
	padding: var(--formgic-btn-padding-y, 12px) var(--formgic-btn-padding-x, 18px);
	background: var(--formgic-primary, #FF6B47) !important;
	border: 1px solid transparent !important;
	border-radius: var(--formgic-radius-md);
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	color: var(--formgic-btn-text, #ffffff) !important;
	transition: var(--formgic-transition-fast);
	display: flex;
	flex-direction: var(--formgic-btn-direction, row);
	align-items: var(--formgic-btn-align, flex-start);
	justify-content: var(--formgic-btn-justify, center);
	text-align: var(--formgic-btn-text-align, center);
	gap: 8px;
	box-shadow: var(--formgic-shadow-xs);
}

.formgic-widget .formgic-choice-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: var(--formgic-shadow-md);
	filter: brightness(1.05);
}

.formgic-choice-btn:active:not(:disabled) {
	transform: translateY(0) scale(0.98);
}

.formgic-widget .formgic-choice-btn.selected {
	background: var(--formgic-primary, #FF6B47) !important;
	border-color: transparent !important;
	color: var(--formgic-btn-text, #ffffff) !important;
	box-shadow: var(--formgic-shadow-primary);
}

.formgic-widget .formgic-choice-btn.selected:hover:not(:disabled) {
	box-shadow: var(--formgic-shadow-primary-lg);
}

.formgic-choice-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.formgic-checkbox {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 2px solid currentColor;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	transition: var(--formgic-transition-fast);
}

/* The button aligns children to flex-start so icons stay on the label's first
 * line when it wraps. Label and emoji each reserve a 28px line box, so the
 * 18px square needs half the 10px difference as a top offset to sit on that
 * line's optical center instead of riding above it. */
.formgic-widget .formgic-choice-btn .formgic-checkbox {
	align-self: flex-start;
	margin-top: calc((28px - 18px) / 2);
}

.formgic-choice-image {
	display: inline-flex;
	width: 28px;
	height: 28px;
	border-radius: var(--formgic-radius-sm, 4px);
	overflow: hidden;
	flex-shrink: 0;
	order: var(--formgic-icon-order, 0);
	background: rgba(0, 0, 0, 0.05);
}

.formgic-choice-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	display: block;
}

/* Single line: min-height matches the 28px icon box so a short label centers
   against the icon. Multi-line: label grows, lines stay tight (line-height 1.3),
   and the button's align-items: flex-start keeps the icon on the first line. */
/* Leading emoji split off the label so the button's flex gap (8px) supplies
   consistent spacing, instead of a literal space rendering tight against the
   color-emoji glyph. */
.formgic-choice-emoji {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	flex-shrink: 0;
	line-height: 1;
	font-size: 1.05em;
}

.formgic-choice-label {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	line-height: 1.3;
}

.formgic-choice-btn.selected .formgic-checkbox {
	background: rgba(255, 255, 255, 0.2);
}

.formgic-submit-choices {
	padding: 12px 24px;
	border: none;
	background: var(--formgic-primary);
	color: var(--formgic-btn-text, #ffffff);
	border-radius: var(--formgic-radius-md);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	transition: var(--formgic-transition-fast);
	box-shadow: var(--formgic-shadow-primary);
	align-self: flex-start;
}

.formgic-submit-choices:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: var(--formgic-shadow-primary-lg);
}

.formgic-submit-choices:active:not(:disabled) {
	transform: translateY(0) scale(0.98);
}

.formgic-submit-choices:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ============================================
   INLINE INPUT BLOCK - Modern Card Design
   ============================================ */
.formgic-inline-input-block {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	/* Inter-message spacing owned by the .formgic-msg-gap-* wrapper class. */
	margin: 0;
	width: 100%;
}

.formgic-inline-input-active {
	flex-direction: column;
	gap: 12px;
}

.formgic-inline-input-completed {
	flex-direction: row;
	max-width: 85%;
	margin-bottom: -2px;
}

.formgic-inline-input-block .formgic-avatar {
	flex-shrink: 0;
}

.formgic-inline-input-active .formgic-inline-content {
	flex: 1;
	min-width: 0;
}

/* Two-row layout: Question row (left-aligned) */
.formgic-inline-question-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 85%;
}

/* Question bubble matching bot message styling */
.formgic-inline-question-bubble {
	padding: var(--formgic-bot-bubble-padding-y, 12px) var(--formgic-bot-bubble-padding-x, 16px);
	background: var(--formgic-bot-bg);
	border: 1px solid var(--formgic-bot-bubble-border, #E8ECF1);
	border-radius: var(--formgic-bubble-radius, 18px);
	box-shadow: var(--formgic-shadow-xs);
	font-size: var(--formgic-font-size, 16px);
	line-height: 1.5;
	font-weight: var(--formgic-font-weight, 400);
	color: var(--formgic-text);
}

/* Two-row layout: Input row (right-aligned) */
.formgic-inline-input-row {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
	align-self: flex-end;
	max-width: 100%;
}

/* Choice grids (buttons / multiple_choice) stretch across the row. When the
   bot avatar is enabled, JSX renders an invisible avatar-placeholder on the
   left AND right of the card so the grid is inset symmetrically by the avatar
   column width — mirroring the bot-bubble offset and pulling the right edge
   in by the same amount. When the avatar is disabled, no placeholders are
   rendered and the card spans the full row. */
.formgic-inline-input-row.formgic-inline-input-row--choices {
	align-self: stretch;
	max-width: 100%;
}

.formgic-inline-input-row--choices .formgic-inline-input-card {
	flex: 1 1 auto;
	min-width: 0;
}

.formgic-inline-input-row--choices .formgic-choice-btn {
	flex: 1 1 calc(50% - 4px);
	min-width: 120px;
}

/* Back icon button (appears on hover of input row) */
.formgic-back-icon-btn {
	width: 32px;
	height: 32px;
	border: none;
	border-radius: var(--formgic-radius-sm);
	background: var(--formgic-bg);
	color: var(--formgic-text-subtle);
	opacity: 0;
	transition: opacity 150ms, color 150ms;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
}

.formgic-inline-input-row:hover .formgic-back-icon-btn,
.formgic-back-icon-btn:focus-visible {
	opacity: 1;
}

.formgic-back-icon-btn:hover {
	color: var(--formgic-text);
}

/* Input card styling — transparent pass-through */
.formgic-inline-input-card {
	min-width: 240px;
}

.formgic-inline-input-completed .formgic-inline-content {
	background: var(--formgic-bot-bg);
	color: var(--formgic-text);
	padding: 12px 16px;
	border-radius: var(--formgic-bubble-radius, 18px);
	border: 1px solid var(--formgic-bot-bubble-border, #E8ECF1);
	box-shadow: var(--formgic-shadow-xs);
}

.formgic-inline-question {
	font-size: var(--formgic-font-size, 16px);
	color: var(--formgic-text);
	line-height: 1.5;
	font-weight: var(--formgic-font-weight, 400);
}

.formgic-inline-input-completed .formgic-inline-question {
	margin-bottom: 0;
	font-size: var(--formgic-font-size, 16px);
	font-weight: var(--formgic-font-weight, 400);
}

.formgic-inline-input {
	margin-bottom: 0;
}

/* Inline mode styles for inputs */
.formgic-input-form.formgic-inline-mode {
	width: 100%;
}

.formgic-inline-mode .formgic-input-wrapper {
	border: none;
}

.formgic-widget .formgic-inline-mode .formgic-input {
	border-style: solid !important;
	border-width: var(--formgic-input-border-width, 1px) !important;
	border-color: var(--formgic-input-border-color, var(--formgic-border-strong)) !important;
	border-radius: var(--formgic-input-radius, 14px);
	padding: var(--formgic-input-padding-y, 10px) var(--formgic-input-padding-x, 16px);
	height: 44px;
	background: var(--formgic-input-bg) !important;
	color: var(--formgic-input-text) !important;
}

.formgic-inline-mode .formgic-textarea {
	height: auto;
	min-height: calc(1.5em * 4 + 20px);
	resize: none;
}

.formgic-widget .formgic-inline-mode .formgic-input:focus {
	border-width: var(--formgic-input-border-focus-width, 2px) !important;
	border-color: var(--formgic-input-border-focus-color, var(--formgic-primary)) !important;
	box-shadow: none;
	outline: none;
}

.formgic-inline-mode .formgic-send-btn {
	width: 44px;
	height: 44px;
}

.formgic-inline-mode .formgic-send-btn--text {
	width: auto;
	padding: 0 18px;
}

.formgic-inline-mode .formgic-send-btn--icon-text {
	width: auto;
	padding: 0 16px;
}

.formgic-inline-mode .formgic-send-btn span {
	font-size: 18px;
}

/* Inline mode styles for buttons */
.formgic-button-choices.formgic-inline-mode {
	padding: 0;
}

.formgic-button-choices.formgic-inline-mode .formgic-choices-grid {
	gap: 8px;
}

.formgic-button-choices.formgic-inline-mode .formgic-choice-btn {
	padding: var(--formgic-btn-padding-y, 10px) var(--formgic-btn-padding-x, 16px);
	font-size: 13px;
	border-radius: var(--formgic-radius-sm);
}

/* ============================================
   END NODE
   ============================================ */
.formgic-end {
	text-align: center;
	padding: 24px;
}

.formgic-end p {
	font-size: 16px;
	color: var(--formgic-text);
	margin: 0 0 16px;
}

.formgic-redirect-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--formgic-primary);
	color: var(--formgic-btn-text, #ffffff);
	text-decoration: none;
	border-radius: var(--formgic-radius-md);
	font-weight: 600;
	transition: var(--formgic-transition-fast);
	box-shadow: var(--formgic-shadow-primary);
}

.formgic-redirect-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--formgic-shadow-primary-lg);
	color: var(--formgic-btn-text, #ffffff);
}

/* ============================================
   FOOTER - Refined Branding
   ============================================ */
.formgic-footer {
	padding: 4px 24px 8px;
	text-align: center;

	border-top: none;
}

.formgic-branding {
	font-size: 11px;
	color: var(--formgic-text-subtle);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	opacity: 0.7;
	transition: var(--formgic-transition-fast);
}

.formgic-branding:hover {
	opacity: 1;
	color: var(--formgic-text-muted);
}

.formgic-branding-prefix {
	color: inherit;
}

.formgic-branding-link {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
	transition: var(--formgic-transition-fast);
}

.formgic-branding-link:hover {
	color: var(--formgic-text-muted);
	text-decoration: underline;
}

/* ============================================
   POPUP MODE
   ============================================ */
.formgic-popup-trigger {
	border: none;
	border-radius: var(--formgic-radius-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: var(--formgic-shadow-lg);
	z-index: 9998;
	font-family: var(--formgic-font-sans);
	font-weight: 600;
	transition: var(--formgic-transition-fast);
}

.formgic-popup-trigger:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: var(--formgic-shadow-xl);
}

.formgic-popup-trigger:active {
	transform: translateY(0) scale(0.98);
}

.formgic-trigger-icon {
	font-size: 1.2em;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.formgic-trigger-icon svg {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
}

.formgic-trigger-icon img,
.formgic-trigger-icon .formgic-trigger-img {
	width: 1.2em;
	height: 1.2em;
	-o-object-fit: contain;
	   object-fit: contain;
	flex-shrink: 0;
}

.formgic-trigger-text {
	white-space: nowrap;
}

.formgic-popup-trigger--open {
	padding: 12px !important;
	border-radius: var(--formgic-radius-full) !important;
}

.formgic-popup-trigger--open .formgic-trigger-icon {
	font-size: 1.5em;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.formgic-popup-container {
	z-index: 9999;
}

/* ============================================
   LOADING STATE - SKELETON LOADER
   ============================================ */
@keyframes formgic-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

.formgic-loading {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.formgic-skeleton-header {
	background: var(--formgic-primary-gradient);
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.formgic-skeleton-messages {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	overflow: hidden;
}

.formgic-skeleton-message {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.formgic-skeleton-message-bot {
	flex-direction: row;
}

.formgic-skeleton-message-user {
	flex-direction: row-reverse;
}

.formgic-skeleton-avatar {
	width: 36px;
	height: 36px;
	border-radius: var(--formgic-radius-full);
	background: var(--formgic-bg-muted);
	flex-shrink: 0;
}

.formgic-skeleton-bubble {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	border-radius: var(--formgic-radius-lg);
	border-top-left-radius: 4px;
	background: var(--formgic-bg-muted);
	max-width: 70%;
	min-width: 120px;
}

.formgic-skeleton-bubble-user {
	border-radius: var(--formgic-radius-lg);
	border-top-right-radius: 4px;
	border-top-left-radius: var(--formgic-radius-lg);
	background: var(--formgic-primary-gradient);
	opacity: 0.7;
}

.formgic-skeleton-line {
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(
		90deg,
		var(--formgic-border) 25%,
		var(--formgic-bg-muted) 50%,
		var(--formgic-border) 75%
	);
	background-size: 200% 100%;
	animation: formgic-shimmer 1.5s ease-in-out infinite;
}

.formgic-skeleton-message:nth-child(1) .formgic-skeleton-line {
	animation-delay: 0s;
}

.formgic-skeleton-message:nth-child(2) .formgic-skeleton-line {
	animation-delay: 0.15s;
}

.formgic-skeleton-message:nth-child(3) .formgic-skeleton-line {
	animation-delay: 0.3s;
}

.formgic-skeleton-message:nth-child(4) .formgic-skeleton-line {
	animation-delay: 0.45s;
}

.formgic-skeleton-input-area {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--formgic-border);
}

.formgic-skeleton-input {
	flex: 1;
	height: 44px;
	border-radius: var(--formgic-radius-lg);
	background: var(--formgic-bg-muted);
}

.formgic-skeleton-send-btn {
	width: 44px;
	height: 44px;
	border-radius: var(--formgic-radius-full);
	background: var(--formgic-bg-muted);
	flex-shrink: 0;
}

.formgic-spinner-small {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: white;
	border-radius: var(--formgic-radius-full);
	animation: spin 0.6s linear infinite;
	display: inline-block;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ============================================
   ERROR STATE
   ============================================ */
.formgic-error {
	text-align: center;
	padding: 48px 24px;
}

.formgic-error p {
	color: var(--formgic-error);
	margin-bottom: 20px;
	font-size: 14px;
}

.formgic-error button {
	padding: 12px 24px;
	border: none;
	background: var(--formgic-primary);
	color: var(--formgic-btn-text, #ffffff);
	border-radius: var(--formgic-radius-md);
	cursor: pointer;
	font-weight: 600;
	font-family: inherit;
	transition: var(--formgic-transition-fast);
	box-shadow: var(--formgic-shadow-primary);
}

.formgic-error button:hover {
	transform: translateY(-2px);
	box-shadow: var(--formgic-shadow-primary-lg);
}

/* Inline connection-timeout banner (shown above the input on submit failure). */
.formgic-connection-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 8px 16px;
	padding: 10px 14px;
	border: 1px solid var(--formgic-error);
	border-radius: var(--formgic-radius-md);
	background: color-mix(in srgb, var(--formgic-error) 8%, transparent);
}

.formgic-connection-error-text {
	color: var(--formgic-error);
	font-size: 13px;
	line-height: 1.4;
}

.formgic-connection-error-btn {
	flex-shrink: 0;
	padding: 8px 16px;
	border: none;
	background: var(--formgic-primary);
	color: var(--formgic-btn-text, #ffffff);
	border-radius: var(--formgic-radius-md);
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	font-family: inherit;
	transition: var(--formgic-transition-fast);
}

.formgic-connection-error-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--formgic-shadow-primary);
}

/* ============================================
   RATING INPUT
   ============================================ */
.formgic-rating-input {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.formgic-rating-stars {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.formgic-rating-star {
	background: none;
	border: none;
	padding: 2px;
	cursor: pointer;
	transition: var(--formgic-transition-fast);
}

.formgic-rating-star:hover {
	transform: scale(1.2);
}

.formgic-rating-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.formgic-rating-number {
	width: 38px;
	height: 38px;
	border: 2px solid var(--formgic-border-strong);
	background: var(--formgic-bg);
	border-radius: var(--formgic-radius-full);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--formgic-text);
	transition: var(--formgic-transition-fast);
	display: flex;
	align-items: center;
	justify-content: center;
}

.formgic-rating-number:hover {
	border-color: var(--formgic-primary);
	transform: translateY(-2px);
}

.formgic-rating-number.selected {
	background: var(--formgic-primary);
	border-color: transparent;
	color: var(--formgic-btn-text, #ffffff);
	box-shadow: var(--formgic-shadow-primary);
}

.formgic-rating-emojis {
	display: flex;
	gap: 12px;
}

.formgic-rating-emoji {
	font-size: 28px;
	background: none;
	border: 2px solid transparent;
	padding: 6px;
	border-radius: var(--formgic-radius-md);
	cursor: pointer;
	transition: var(--formgic-transition-fast);
	opacity: 0.5;
}

.formgic-rating-emoji:hover {
	opacity: 1;
	transform: scale(1.15);
}

.formgic-rating-emoji.selected {
	opacity: 1;
	border-color: var(--formgic-primary);
	background: rgba(255, 107, 71, 0.08);
}

.formgic-rating-submit {
	padding: 12px 20px;
	border: none;
	background: var(--formgic-primary);
	color: var(--formgic-btn-text, #ffffff);
	border-radius: var(--formgic-radius-md);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	transition: var(--formgic-transition-fast);
	align-self: flex-start;
	box-shadow: var(--formgic-shadow-primary);
}

.formgic-rating-submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--formgic-shadow-primary-lg);
}

/* Rating submit size variants */
.formgic-rating-submit--small { padding: 10px 16px; font-size: 13px; }
.formgic-rating-submit--medium { padding: 12px 20px; font-size: 14px; }
.formgic-rating-submit--large { padding: 14px 24px; font-size: 15px; }

/* Rating display in user message bubble */
.formgic-rating-bubble-stars { display: inline-flex; gap: 2px; align-items: center; }
.formgic-rating-bubble-emoji { font-size: 20px; line-height: 1; }
.formgic-rating-bubble-number { font-weight: 600; font-size: 14px; }

/* ============================================
   FILE UPLOAD
   ============================================ */
.formgic-file-upload {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.formgic-file-dropzone {
	border: 2px dashed var(--formgic-border-strong);
	border-radius: var(--formgic-radius-lg);
	padding: 28px;
	text-align: center;
	cursor: pointer;
	transition: var(--formgic-transition-fast);
	background: var(--formgic-bg);
}

.formgic-file-dropzone:hover {
	border-color: var(--formgic-primary);
	background: rgba(255, 107, 71, 0.02);
}

.formgic-file-dropzone-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.formgic-file-icon {
	font-size: 32px;
}

.formgic-file-text {
	font-size: 14px;
	color: var(--formgic-text);
	font-weight: 500;
}

.formgic-file-hint {
	font-size: 12px;
	color: var(--formgic-text-subtle);
}

.formgic-file-input-hidden {
	display: none;
}

.formgic-file-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.formgic-file-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--formgic-bg-muted);
	border-radius: var(--formgic-radius-md);
}

.formgic-file-item-icon {
	font-size: 20px;
}

.formgic-file-item-info {
	flex: 1;
	min-width: 0;
}

.formgic-file-item-name {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--formgic-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.formgic-file-item-size {
	font-size: 11px;
	color: var(--formgic-text-subtle);
}

.formgic-file-item-remove {
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: var(--formgic-text-subtle);
	cursor: pointer;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--formgic-radius-full);
	transition: var(--formgic-transition-fast);
}

.formgic-file-item-remove:hover {
	background: var(--formgic-error);
	color: white;
}

.formgic-file-error {
	font-size: 12px;
	color: var(--formgic-error);
	padding: 10px 14px;
	background: rgba(239, 68, 68, 0.08);
	border-radius: var(--formgic-radius-md);
}

.formgic-file-progress {
	position: relative;
	height: 24px;
	background: var(--formgic-bg-muted);
	border-radius: var(--formgic-radius-full);
	overflow: hidden;
}

.formgic-file-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--formgic-primary);
	transition: width 0.3s ease-out;
}

.formgic-file-progress-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 11px;
	font-weight: 600;
	color: var(--formgic-text);
}

.formgic-file-submit {
	padding: 12px 20px;
	border: none;
	background: var(--formgic-primary);
	color: var(--formgic-btn-text, #ffffff);
	border-radius: var(--formgic-radius-md);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	transition: var(--formgic-transition-fast);
	align-self: flex-start;
	box-shadow: var(--formgic-shadow-primary);
}

.formgic-file-submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--formgic-shadow-primary-lg);
}

/* ============================================
   EMBED, VIDEO, AUDIO, IMAGE CONTENT
   ============================================ */
.formgic-message-embed {
	max-width: 100%;
}

.formgic-message-embed iframe {
	max-width: 100%;
	border-radius: var(--formgic-radius-md);
	display: block;
}

.formgic-message-embed .formgic-message-caption,
.formgic-message-video .formgic-message-caption,
.formgic-message-audio .formgic-message-caption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--formgic-text-muted);
}

.formgic-message-video {
	max-width: 100%;
}

.formgic-video-player {
	max-width: 100%;
	border-radius: var(--formgic-radius-md);
	display: block;
}

.formgic-message-audio {
	max-width: 100%;
}

.formgic-audio-player {
	width: 100%;
	min-width: 280px;
	border-radius: var(--formgic-radius-md);
}

.formgic-message-image img {
	max-width: 100%;
	border-radius: var(--formgic-radius-md);
	display: block;
}

.formgic-message-image-link {
	display: block;
	cursor: pointer;
}

.formgic-message-caption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--formgic-text-muted);
}

/* ============================================
   PRODUCT CARD
   ============================================ */
.formgic-product-card {
	background: var(--formgic-bg);
	border: 1px solid var(--formgic-border-strong);
	border-radius: var(--formgic-radius-lg);
	overflow: hidden;
	max-width: 280px;
	box-shadow: var(--formgic-shadow-sm);
}

.formgic-product-message {
	padding: 14px 14px 0;
	font-size: 14px;
	color: var(--formgic-text);
}

.formgic-product-image {
	width: 100%;
	height: auto;
	display: block;
}

.formgic-product-info {
	padding: 14px;
}

.formgic-product-name {
	font-weight: 600;
	color: var(--formgic-text);
	margin-bottom: 6px;
}

.formgic-product-price {
	font-size: 18px;
	font-weight: 700;
	color: var(--formgic-primary);
	margin-bottom: 10px;
}

.formgic-product-description {
	font-size: 13px;
	color: var(--formgic-text-muted);
	margin-bottom: 14px;
	line-height: 1.5;
}

.formgic-product-link {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: var(--formgic-primary);
	/* Own token, not the generic button-text one, so the label stays
	   legible even when a theme sets button text to the accent color. */
	color: var(--formgic-product-btn-text, #ffffff);
	text-decoration: none;
	border-radius: var(--formgic-radius-sm);
	font-size: 13px;
	font-weight: 600;
	transition: var(--formgic-transition-fast);
	box-shadow: var(--formgic-shadow-primary);
}

.formgic-product-link:hover {
	transform: translateY(-1px);
	box-shadow: var(--formgic-shadow-primary-lg);
	color: var(--formgic-product-btn-text, #ffffff);
}

.formgic-product-link.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
}

/* ============================================
   ACCESSIBILITY & ANIMATIONS
   ============================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.formgic-widget *,
	.formgic-widget *::before,
	.formgic-widget *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Enhanced focus states for keyboard navigation */
.formgic-input:focus-visible {
	outline: none;
}

.formgic-choice-btn:focus-visible,
.formgic-send-btn:focus-visible,
.formgic-submit-choices:focus-visible,
.formgic-rating-submit:focus-visible,
.formgic-file-submit:focus-visible,
.formgic-close-btn:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.15);
	outline-offset: 2px;
}

/* SVG Checkmark with draw animation. Always paired with `.formgic-checkbox`
 * on the same span, so the box size stays owned by that class alone — a second
 * width/height here silently overrode it (16px vs 18px) and threw the square
 * off the label's baseline grid. */
.formgic-checkbox-svg {
	display: flex;
	align-items: center;
	justify-content: center;
}

.formgic-checkbox-svg svg {
	width: 12px;
	height: 12px;
}

.formgic-checkbox-svg path {
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	stroke-dasharray: 16;
	stroke-dashoffset: 16;
}

.formgic-choice-btn.selected .formgic-checkbox-svg path {
	animation: drawCheck 200ms ease forwards;
}

@keyframes drawCheck {
	to {
		stroke-dashoffset: 0;
	}
}

/* ============================================
   CHAT ACTIONS (Back / Restart)
   ============================================ */
.formgic-chat-actions {
	display: flex;
	gap: 16px;
	padding: 4px 46px 2px;
	/* Sits 12px below the last bubble (speaker-change spacing). */
	margin: 12px 0 0;
}

.formgic-chat-action-link {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 400;
	color: var(--formgic-text-subtle);
	cursor: pointer;
	transition: color var(--formgic-transition-fast);
}

.formgic-chat-action-link:hover {
	color: var(--formgic-text-muted);
}

/* Completed state: centered */
.formgic-chat-actions--complete {
	justify-content: center;
	padding: 12px 24px 4px;
}

.formgic-restart-btn {
	padding: 10px 24px;
	background: var(--formgic-bg);
	border: 1px solid var(--formgic-border-strong);
	border-radius: var(--formgic-radius-md);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--formgic-text-muted);
	cursor: pointer;
	transition: var(--formgic-transition-fast);
}

.formgic-restart-btn:hover {
	background: var(--formgic-bg-muted);
	color: var(--formgic-text);
	border-color: var(--formgic-text-subtle);
}

.formgic-restart-btn:active {
	transform: scale(0.97);
}

/* Bottom mode: align with bottom input area padding */
.formgic-input-bottom .formgic-widget-content > .formgic-chat-actions {
	padding: 6px 20px 0;
}

.formgic-input-bottom .formgic-widget-content > .formgic-chat-actions--complete {
	padding: 12px 20px 4px;
}

/* ============================================
   BOTTOM INPUT POSITION MODE
   ============================================ */

/* Widget layout adjustments for bottom input */
.formgic-widget.formgic-input-bottom {
	display: flex;
	flex-direction: column;
}

.formgic-input-bottom .formgic-messages {
	flex: 1;
	min-height: 0;
	/* Chat-area bottom padding; the bottom input zone also supplies its own top padding. */
	padding-bottom: var(--formgic-container-padding-bottom, 20px);
}

/* Bottom Input Area Container */
.formgic-bottom-input-area {
	border-top: 1px solid var(--formgic-border);
	background: transparent;
	/* Input zone: self-contained compact padding (parent .formgic-widget-content
	   no longer supplies horizontal padding). */
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
}

/* Input content container */
.formgic-bottom-input-content {
	width: 100%;
}

/* Adjust input form in bottom mode */
.formgic-bottom-input-area .formgic-input-form {
	width: 100%;
}

.formgic-bottom-input-area .formgic-input-wrapper {
	background: transparent;
	padding: 0;
}

.formgic-widget .formgic-bottom-input-area .formgic-input {
	border-style: solid !important;
	border-width: var(--formgic-input-border-width, 1px) !important;
	border-color: var(--formgic-input-border-color, var(--formgic-border)) !important;
	border-radius: var(--formgic-radius-sm);
	padding: var(--formgic-input-padding-y, 12px) var(--formgic-input-padding-x, 16px);
	min-height: 44px;
	background: var(--formgic-input-bg) !important;
	color: var(--formgic-input-text) !important;
}

.formgic-widget .formgic-bottom-input-area .formgic-input:focus {
	border-color: var(--formgic-input-border-focus-color, var(--formgic-primary)) !important;
}

/* Button choices in bottom mode */
.formgic-bottom-input-area .formgic-button-choices {
	padding: 0;
}

.formgic-bottom-input-area .formgic-choices-grid {
	flex-wrap: wrap;
	justify-content: flex-start;
}

/* Rating in bottom mode */
.formgic-bottom-input-area .formgic-rating-input {
	align-items: flex-start;
}

/* File upload in bottom mode - more compact */
.formgic-bottom-input-area .formgic-file-dropzone {
	padding: 20px;
}

/* Textarea in bottom mode */
.formgic-bottom-input-area .formgic-textarea {
	min-height: 60px;
	max-height: 120px;
	resize: none;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 480px) {
	.formgic-popup-container {
		bottom: 0 !important;
		right: 0 !important;
		left: 0 !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		transform: none !important;
	}

	.formgic-popup-container .formgic-mode-popup {
		width: 100% !important;
		height: 100vh !important;
		max-height: 100vh !important;
		border-radius: 0 !important;
	}

	.formgic-popup-trigger {
		bottom: 16px !important;
		right: 16px !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
	}

	.formgic-header {
		padding: 18px 20px;
	}

	.formgic-messages {
		padding-bottom: var(--formgic-container-padding-bottom, 0px);
	}

	.formgic-input-area {
		padding: 12px 16px;
	}

	.formgic-inline-input-completed {
		max-width: 95%;
	}

	.formgic-inline-question-row {
		max-width: 95%;
	}

	/* Bottom input responsive */
	.formgic-bottom-input-area {
		padding: 12px 16px 0;
	}

}

/* ============================================
   PHONE INPUT - Country Picker
   ============================================ */

.formgic-phone-wrapper {
	position: relative;
	align-items: center;
}

.formgic-phone-country-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 10px;
	height: 100%;
	border: none;
	border-right: 1px solid var(--formgic-border-strong);
	background: transparent;
	cursor: pointer;
	color: var(--formgic-text);
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.15s ease;
	border-radius: var(--formgic-input-radius, 12px) 0 0 var(--formgic-input-radius, 12px);
}

.formgic-phone-country-btn:hover {
	background: var(--formgic-bg-muted);
}

.formgic-phone-flag {
	font-size: 18px;
	line-height: 1;
}

.formgic-phone-dial {
	font-size: 13px;
	font-weight: 500;
	color: var(--formgic-text-muted);
}

.formgic-phone-chevron {
	display: flex;
	align-items: center;
	color: var(--formgic-text-subtle);
	margin-left: 2px;
}

.formgic-phone-number-input {
	flex: 1;
	border-radius: 0 !important;
	border-left: none !important;
	padding-left: 10px !important;
}

/* Address input (multi-field) */
.formgic-address-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	position: relative;
}

.formgic-address-row {
	display: flex;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.formgic-address-field {
	width: 100%;
	min-width: 0;
}

.formgic-address-country {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
}

.formgic-address-country-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: var(--formgic-input-border-width, 1px) solid var(--formgic-input-border-color, var(--formgic-border-strong));
	border-radius: var(--formgic-input-radius, 14px);
	background: var(--formgic-input-bg);
	color: var(--formgic-input-text);
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
	transition: var(--formgic-transition-fast);
}

.formgic-address-country-btn:hover {
	background: var(--formgic-bg-muted);
}

.formgic-address-country-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}

.formgic-address-country-btn .formgic-phone-chevron {
	margin-left: auto;
}

button.formgic-send-btn.formgic-address-submit {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	aspect-ratio: 1 / 1;
}

/* Dropdown */
/* Position/size come from useAnchoredPosition; this rule is chrome only.
   Width was 280px fixed and left-aligned, which is what pushed the panel past
   its trigger before it was portaled. */
.formgic-phone-dropdown {
	background: var(--formgic-bg);
	border: 1px solid var(--formgic-border-strong);
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.formgic-phone-search-wrap {
	padding: 10px 10px 6px;
	border-bottom: 1px solid var(--formgic-border);
}

.formgic-phone-search {
	width: 100%;
	padding: 7px 10px;
	font-size: 13px;
	border: 1px solid var(--formgic-border-strong);
	border-radius: 7px;
	background: var(--formgic-bg-subtle);
	color: var(--formgic-text);
	outline: none;
	box-sizing: border-box;
}

.formgic-phone-search:focus {
	border-color: var(--formgic-focus-color, var(--formgic-primary));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--formgic-focus-color, var(--formgic-primary)) 20%, transparent);
}

.formgic-phone-list {
	max-height: 220px;
	overflow-y: auto;
	padding: 4px;
	/* Lets the panel's inline max-height shrink the list instead of overflowing. */
	flex: 1 1 auto;
	min-height: 0;
}

.formgic-phone-list::-webkit-scrollbar {
	width: 4px;
}

.formgic-phone-list::-webkit-scrollbar-track {
	background: transparent;
}

.formgic-phone-list::-webkit-scrollbar-thumb {
	background: var(--formgic-border-strong);
	border-radius: 2px;
}

.formgic-phone-empty {
	padding: 16px;
	text-align: center;
	font-size: 13px;
	color: var(--formgic-text-muted);
}

.formgic-phone-option {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 8px;
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: left;
	border-radius: 6px;
	font-size: 13px;
	color: var(--formgic-text);
	transition: background 0.12s ease;
}

.formgic-phone-option:hover {
	background: var(--formgic-bg-muted);
}

.formgic-phone-option--selected {
	background: color-mix(in srgb, var(--formgic-primary) 8%, transparent);
}

.formgic-phone-option-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.formgic-phone-option-dial {
	font-size: 12px;
	color: var(--formgic-text-muted);
	flex-shrink: 0;
}

.formgic-phone-option-check {
	color: var(--formgic-primary);
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

/* ============================================
   PICKER INPUTS (Date & Time)
   ============================================ */

/* Trigger button — inherits .formgic-input visual style, overrides layout */
.formgic-widget .formgic-picker-trigger {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-align: left !important;
	cursor: pointer !important;
}

.formgic-picker-trigger-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	color: var(--formgic-text-muted);
	line-height: 0;
}

.formgic-picker-placeholder {
	color: var(--formgic-text-muted);
	opacity: 1;
}

/* Panel container — anchored to the trigger in the body portal */
.formgic-picker-panel {
	background: var(--formgic-bg);
	border: 1px solid var(--formgic-border-strong);
	border-radius: var(--formgic-radius-md);
	padding: 12px;
	margin-top: 6px;
	overflow: hidden;
}

/* The panel is portaled out of the form, so it floats instead of competing for
   the widget's fixed height. */
.formgic-portal-layer .formgic-picker-panel {
	margin: 0;
	box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
	overflow: auto;
}

/* ─── react-day-picker v9 — structural + theme (scoped to widget) ─── */
.formgic-widget .rdp-root {
	--rdp-day-height: 38px;
	--rdp-day-width: 38px;
	--rdp-day_button-height: 34px;
	--rdp-day_button-width: 34px;
	--rdp-day_button-border-radius: 10px;
	--rdp-day_button-border: 1px solid transparent;
	--rdp-nav_button-width: 28px;
	--rdp-nav_button-height: 28px;
	--rdp-nav-height: 32px;
	--rdp-accent-color: var(--formgic-primary);
	--rdp-accent-background-color: color-mix(in srgb, var(--formgic-primary) 10%, transparent);
	--rdp-today-color: var(--formgic-primary);
	--rdp-selected-border: 1px solid var(--formgic-primary);
	--rdp-disabled-opacity: 0.35;
	--rdp-outside-opacity: 0.4;
	--rdp-weekday-opacity: 1;
	--rdp-weekday-padding: 0 0 6px;
	--rdp-gradient-direction: 90deg;

	position: relative;
	box-sizing: border-box;
	font-size: 13px;
	color: var(--formgic-text);
	font-family: inherit;
	line-height: 1;
}
.formgic-widget .rdp-root * { box-sizing: border-box; }

/* Host-theme hardening. The month view is a real <table>, so site styles like
   `table td { border: 1px solid; padding: 8px }` otherwise draw a grid over the
   calendar and push it wider than its panel. Reset the table chrome outright —
   every visual below is drawn by .rdp-day_button, never by the cell. */
.formgic-widget .rdp-month_grid,
.formgic-widget .rdp-month_grid thead,
.formgic-widget .rdp-month_grid tbody,
.formgic-widget .rdp-month_grid tr,
.formgic-widget .rdp-month_grid th,
.formgic-widget .rdp-month_grid td {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	font-size: inherit;
	line-height: 1;
	vertical-align: middle !important;
}
.formgic-widget .rdp-month_grid th,
.formgic-widget .rdp-month_grid td {
	padding: 0 !important;
	text-align: center !important;
	width: 14.2857%;
}
.formgic-widget .rdp-month_grid tr:nth-child(n) {
	background: none !important;
}

.formgic-widget .rdp-months {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
}

.formgic-widget .rdp-month_grid {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	table-layout: fixed;
	width: 100%;
	margin: 6px 0 0 !important;
}

.formgic-widget .rdp-month_caption {
	display: flex;
	align-items: center;
	height: var(--rdp-nav-height);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: -0.01em;
}

.formgic-widget .rdp-nav {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	height: var(--rdp-nav-height);
	gap: 4px;
}

/* navLayout="around" — prev/next flank the caption */
.formgic-widget .rdp-root[data-nav-layout="around"] .rdp-month { position: relative; }
.formgic-widget .rdp-root[data-nav-layout="around"] .rdp-month_caption {
	justify-content: center;
	margin-inline-start: var(--rdp-nav_button-width);
	margin-inline-end: var(--rdp-nav_button-width);
}
.formgic-widget .rdp-root[data-nav-layout="around"] .rdp-button_previous {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	height: var(--rdp-nav-height);
	display: inline-flex;
}
.formgic-widget .rdp-root[data-nav-layout="around"] .rdp-button_next {
	position: absolute;
	inset-inline-end: 0;
	top: 0;
	height: var(--rdp-nav-height);
	display: inline-flex;
	justify-content: center;
}

.formgic-widget .rdp-button_previous,
.formgic-widget .rdp-button_next {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rdp-nav_button-width);
	height: var(--rdp-nav_button-height);
	border-radius: 999px;
	color: var(--formgic-text-muted);
	transition: var(--formgic-transition-fast);
}
.formgic-widget .rdp-button_previous:hover:not(:disabled),
.formgic-widget .rdp-button_next:hover:not(:disabled) {
	background: var(--formgic-bg-muted);
	color: var(--formgic-text);
}
.formgic-widget .rdp-button_previous:focus-visible,
.formgic-widget .rdp-button_next:focus-visible {
	outline: 2px solid var(--formgic-primary);
	outline-offset: 1px;
}
.formgic-widget .rdp-button_previous:disabled,
.formgic-widget .rdp-button_next:disabled {
	opacity: 0.3;
	cursor: default;
}

.formgic-widget .rdp-chevron {
	display: inline-block;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Weekday header row — a quiet label band, separated from the days by one
   hairline instead of the host theme's full table grid. The rule sits on the
   cells, not the row: with border-collapse: separate a <tr> border never
   paints. */
.formgic-widget .rdp-month_grid th.rdp-weekday {
	opacity: var(--rdp-weekday-opacity);
	padding: var(--rdp-weekday-padding) !important;
	border-bottom: 1px solid var(--formgic-border) !important;
	color: var(--formgic-text-muted);
	font-weight: 600;
	font-size: 10px;
	text-align: center !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.formgic-widget .rdp-day {
	width: 14.2857%;
	height: var(--rdp-day-height);
	text-align: center;
}

.formgic-widget .rdp-day_button {
	background: none;
	padding: 0;
	margin: 0 auto;
	cursor: pointer;
	font: inherit;
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--rdp-day_button-width);
	height: var(--rdp-day_button-height);
	max-width: 100%;
	border: var(--rdp-day_button-border);
	border-radius: var(--rdp-day_button-border-radius);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.formgic-widget .rdp-day_button:hover:not(:disabled) {
	background: var(--rdp-accent-background-color);
	color: var(--rdp-accent-color);
}
.formgic-widget .rdp-day_button:active:not(:disabled) {
	transform: scale(0.94);
}
.formgic-widget .rdp-day_button:focus-visible {
	outline: 2px solid var(--formgic-primary);
	outline-offset: 1px;
}
.formgic-widget .rdp-day_button:disabled { cursor: default; }

/* Today: accent text plus a hairline ring, so it still reads as "today" once
   another day is selected. */
.formgic-widget .rdp-today:not(.rdp-outside) .rdp-day_button {
	color: var(--rdp-today-color);
	font-weight: 700;
	border-color: color-mix(in srgb, var(--formgic-primary) 35%, transparent);
}
.formgic-widget .rdp-selected .rdp-day_button {
	background: var(--formgic-primary) !important;
	color: #fff !important;
	border-color: var(--formgic-primary) !important;
	font-weight: 600;
	box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--formgic-primary) 55%, transparent);
}
.formgic-widget .rdp-disabled { opacity: var(--rdp-disabled-opacity); }
.formgic-widget .rdp-outside { opacity: var(--rdp-outside-opacity); }
.formgic-widget .rdp-focusable { cursor: pointer; }

@media ( prefers-reduced-motion: reduce ) {
	.formgic-widget .rdp-day_button { transition: none; }
	.formgic-widget .rdp-day_button:active:not(:disabled) { transform: none; }
}

/* ─── Time Picker ───
   Three labelled columns (hour / minute / AM-PM) sharing the calendar's
   vocabulary: a hairline label band on top, rounded day-sized items, one filled
   accent pill for the current choice. */
.formgic-time-cols {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	align-items: start;
}

.formgic-time-colwrap {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.formgic-time-label {
	padding-bottom: 6px;
	border-bottom: 1px solid var(--formgic-border);
	color: var(--formgic-text-muted);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}

.formgic-time-col {
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: 180px;
	padding-top: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--formgic-border-strong) transparent;
	/* Fade the ends so a partly scrolled column reads as "more below", not as a
	   clipped list. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
.formgic-time-col::-webkit-scrollbar { width: 3px; }
.formgic-time-col::-webkit-scrollbar-thumb {
	background: var(--formgic-border-strong);
	border-radius: 4px;
}

/* AM/PM has two options, so it neither scrolls nor needs the fade. */
.formgic-time-col--period {
	height: auto;
	max-height: 180px;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

.formgic-time-item {
	height: 34px;
	width: 100%;
	/* Keep the pill compact and centred instead of letting it stretch the whole
	   column, which reads as a bar chart once one is filled. */
	max-width: 58px;
	align-self: center;
	padding: 0 2px;
	border: 1px solid transparent;
	border-radius: 10px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	background: none;
	color: var(--formgic-text);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
	flex-shrink: 0;
	font-family: inherit;
	line-height: 1;
}
.formgic-time-item:hover:not(.formgic-time-item--active) {
	background: color-mix(in srgb, var(--formgic-primary) 10%, transparent);
	color: var(--formgic-primary);
}
.formgic-time-item:active:not(.formgic-time-item--active) {
	transform: scale(0.94);
}
.formgic-time-item:focus-visible {
	outline: 2px solid var(--formgic-primary);
	outline-offset: 1px;
}
.formgic-time-item--active {
	background: var(--formgic-primary) !important;
	border-color: var(--formgic-primary) !important;
	color: #fff !important;
	font-weight: 600;
	box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--formgic-primary) 55%, transparent);
}

@media ( prefers-reduced-motion: reduce ) {
	.formgic-time-item { transition: none; }
	.formgic-time-item:active:not(.formgic-time-item--active) { transform: none; }
}

/* ============================================
   CHAT INPUT FILE UPLOAD
   ============================================ */
.formgic-hidden-file-input {
	display: none;
}

.formgic-upload-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #9ca3af;
	border-radius: 6px;
	transition: color 0.15s, background 0.15s;
}

.formgic-upload-btn:hover:not(:disabled) {
	color: #6b7280;
	background: rgba(0, 0, 0, 0.05);
}

.formgic-upload-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.formgic-upload-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 6px;
	margin-bottom: 6px;
}

.formgic-upload-status--loading {
	color: #6b7280;
}

.formgic-upload-status--error {
	color: #ef4444;
	background: #fef2f2;
}

.formgic-upload-status--success {
	color: #16a34a;
	background: #f0fdf4;
	justify-content: space-between;
}

.formgic-upload-clear {
	background: transparent;
	border: none;
	cursor: pointer;
	color: #9ca3af;
	font-size: 16px;
	line-height: 1;
	padding: 0 2px;
}

.formgic-file-answer-text {
	display: block;
	margin-bottom: 4px;
}

.formgic-file-answer-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 220px;
	padding: 3px 8px;
	border-radius: 12px;
	background: rgba( 0, 0, 0, 0.15 );
	color: inherit;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	vertical-align: middle;
}

.formgic-file-answer-chip:hover {
	background: rgba( 0, 0, 0, 0.25 );
	text-decoration: underline;
}

/* Rich-text inline formatting inside bot bubbles and inline questions. */
.formgic-message-bot .formgic-message-content p,
.formgic-inline-question p,
.formgic-inline-question-bubble p {
	margin: 0;
}

.formgic-message-bot .formgic-message-content p + p,
.formgic-inline-question p + p,
.formgic-inline-question-bubble p + p {
	margin-top: 0.4em;
}

/* Links are not underlined by default; an explicit underline mark (<u>) around
   or inside the link still paints the line. */
.formgic-message-bot .formgic-message-content a:not(.formgic-product-link),
.formgic-inline-question a:not(.formgic-product-link),
.formgic-inline-question-bubble a:not(.formgic-product-link) {
	color: var(--formgic-link, #2563eb);
	text-decoration: none;
	font-weight: 500;
	word-break: break-word;
}

.formgic-message-bot .formgic-message-content a:not(.formgic-product-link):hover,
.formgic-inline-question a:not(.formgic-product-link):hover,
.formgic-inline-question-bubble a:not(.formgic-product-link):hover {
	opacity: 0.85;
}

.formgic-message-bot .formgic-message-content strong,
.formgic-inline-question strong,
.formgic-inline-question-bubble strong {
	font-weight: 600;
}

.formgic-message-bot .formgic-message-content em,
.formgic-inline-question em,
.formgic-inline-question-bubble em {
	font-style: italic;
}

.formgic-message-bot .formgic-message-content u,
.formgic-inline-question u,
.formgic-inline-question-bubble u {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Hide trailing empty paragraphs and trailing line breaks left over from
   pre-fix saved content so bot bubbles don't render a phantom bottom line. */
.formgic-message-bot .formgic-message-content p:empty,
.formgic-inline-question p:empty,
.formgic-inline-question-bubble p:empty {
	display: none;
}

.formgic-message-bot .formgic-message-content p:last-child > br:only-child,
.formgic-inline-question p:last-child > br:only-child,
.formgic-inline-question-bubble p:last-child > br:only-child {
	display: none;
}

/* Force rich-text descendants to inherit the bubble's typography so admin
   shells (Tailwind base, WordPress admin CSS) can't strip font-family /
   font-size / weight / line-height from <p>, <strong>, <em>, <u>, <a>. */
.formgic-message-bot .formgic-message-content p,
.formgic-message-bot .formgic-message-content .formgic-rt-html,
.formgic-message-bot .formgic-message-content .formgic-rt-html *,
.formgic-inline-question p,
.formgic-inline-question .formgic-rt-html,
.formgic-inline-question .formgic-rt-html *,
.formgic-inline-question-bubble p,
.formgic-inline-question-bubble .formgic-rt-html,
.formgic-inline-question-bubble .formgic-rt-html * {
	font: inherit;
	color: inherit;
}

/* Re-apply mark-specific weights/styles AFTER the font:inherit reset above. */
.formgic-message-bot .formgic-message-content .formgic-rt-html strong,
.formgic-inline-question .formgic-rt-html strong,
.formgic-inline-question-bubble .formgic-rt-html strong {
	font-weight: 600;
}
.formgic-message-bot .formgic-message-content .formgic-rt-html em,
.formgic-inline-question .formgic-rt-html em,
.formgic-inline-question-bubble .formgic-rt-html em {
	font-style: italic;
}
.formgic-message-bot .formgic-message-content .formgic-rt-html u,
.formgic-inline-question .formgic-rt-html u,
.formgic-inline-question-bubble .formgic-rt-html u {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.formgic-message-bot .formgic-message-content .formgic-rt-html a,
.formgic-inline-question .formgic-rt-html a,
.formgic-inline-question-bubble .formgic-rt-html a {
	color: var(--formgic-link, #2563eb);
	text-decoration: none;
	font-weight: 500;
	word-break: break-word;
}

/* Wrapper itself adds no box, so multi-paragraph or single-text content
   sits directly inside the bubble without extra margins/line-height. */
.formgic-rt-html {
	display: contents;
}

/* ============================================
   DROPDOWN INPUT - Searchable single/multi select
   ============================================ */

/* Compact dropdown — trigger chip reuses .formgic-picker-trigger.
   Right-aligned chevron icon (override the picker rule which prepends). */
.formgic-widget .formgic-dropdown-trigger {
	justify-content: space-between !important;
}

.formgic-widget .formgic-dropdown-trigger-icon {
	color: var(--formgic-text-muted);
}

/* Inline-buttons display wrapper — vertical stack: search above buttons */
.formgic-dropdown-inline {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

/* Panel for compact display — reuses .formgic-picker-panel base, adds layout */
.formgic-dropdown-panel {
	background: var(--formgic-bg);
	border: 1px solid var(--formgic-border-strong);
	border-radius: var(--formgic-radius-md);
	padding: 10px;
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
	max-height: 320px;
}

/* Portaled in bottom-bar mode; the hook supplies the height cap. */
.formgic-portal-layer .formgic-dropdown-panel {
	margin: 0;
	max-height: none;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Search input row — icon + input */
.formgic-dropdown-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.formgic-dropdown-search-icon {
	position: absolute;
	left: 10px;
	display: flex;
	align-items: center;
	color: var(--formgic-text-muted);
	pointer-events: none;
}

.formgic-widget .formgic-dropdown-search {
	width: 100%;
	padding: 9px 12px 9px 32px;
	border: 1px solid var(--formgic-border-strong, rgba(0, 0, 0, 0.12));
	border-radius: var(--formgic-radius-md);
	background: var(--formgic-bg);
	color: var(--formgic-text);
	font-size: 13px;
	font-family: inherit;
	outline: none;
	transition: var(--formgic-transition-fast);
}

.formgic-widget .formgic-dropdown-search:focus {
	border-color: var(--formgic-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--formgic-primary) 18%, transparent);
}

/* Option list */
.formgic-dropdown-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	max-height: 240px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.formgic-dropdown-list li {
	margin: 0;
	padding: 0;
}

.formgic-dropdown-empty {
	padding: 14px 10px;
	text-align: center;
	color: var(--formgic-text-muted);
	font-size: 13px;
}

/* Single-select option row */
.formgic-widget .formgic-dropdown-option {
	width: 100%;
	padding: 9px 12px;
	background: transparent;
	border: none;
	border-radius: var(--formgic-radius-sm, 6px);
	text-align: left;
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	color: var(--formgic-text);
	display: flex;
	align-items: center;
	gap: 10px;
	transition: var(--formgic-transition-fast);
}

.formgic-widget .formgic-dropdown-option:hover:not(:disabled),
.formgic-widget .formgic-dropdown-option:focus-visible {
	background: color-mix(in srgb, var(--formgic-primary) 8%, transparent);
	outline: none;
}

.formgic-widget .formgic-dropdown-option:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.formgic-widget .formgic-dropdown-option.selected {
	background: color-mix(in srgb, var(--formgic-primary) 12%, transparent);
	color: var(--formgic-primary);
}

/* Multi-select option row — checkbox visual */
.formgic-widget .formgic-dropdown-option-multi .formgic-checkbox {
	color: var(--formgic-text-muted);
	background: transparent;
}

.formgic-widget .formgic-dropdown-option-multi.selected .formgic-checkbox {
	background: var(--formgic-primary);
	border-color: var(--formgic-primary);
	color: #ffffff;
}

.formgic-dropdown-option-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Submit button inside compact dropdown panel for multi-select */
.formgic-dropdown-submit {
	align-self: stretch;
	flex-shrink: 0;
	margin-top: 4px;
}

/* Mobile — let the in-flow dropdown panel breathe. The portaled variant is
   capped by useAnchoredPosition against the visual viewport instead. */
@media (max-width: 480px) {
	.formgic-input-form .formgic-dropdown-panel {
		max-height: 60vh;
	}
	.formgic-input-form .formgic-dropdown-list {
		max-height: calc(60vh - 80px);
	}
}

/* ============================================
   CHECKBOX / YES-NO / SLIDER / COUNTRY / SIGNATURE
   ============================================ */

.formgic-rating-submit:disabled,
.formgic-signature-clear:disabled,
.formgic-yesno-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Checkbox (single) */
.formgic-checkbox-input {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.formgic-checkbox-input-row {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	color: var(--formgic-text);
	line-height: 1.4;
}

/* Self-drawn box + checkmark rather than `accent-color` on a native control.
 * The preview renders inside wp-admin, where forms.css forces
 * `-webkit-appearance: none` (killing accent-color) and paints its own white
 * ::before checkmark whose blue fill any stronger host rule can override,
 * leaving white-on-white. Owning both layers keeps preview and frontend
 * identical and independent of the host. */
.formgic-widget input.formgic-checkbox-input-box {
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	border: 2px solid var(--formgic-border-strong);
	border-radius: 5px;
	background: var(--formgic-input-bg);
	box-shadow: none;
	transition: var(--formgic-transition-fast);
}

.formgic-widget input.formgic-checkbox-input-box::before {
	content: "";
	width: 10px;
	height: 10px;
	transform: scale(0);
	transition: transform 120ms ease;
	background: var(--formgic-btn-text, #ffffff);
	clip-path: polygon(
		14% 44%,
		0 65%,
		39% 100%,
		100% 16%,
		83% 0%,
		38% 66%
	);
}

.formgic-widget input.formgic-checkbox-input-box:checked {
	background: var(--formgic-primary);
	border-color: var(--formgic-primary);
}

/* Restated at 0,3,1 so it outranks wp-admin forms.css's
 * `input[type=checkbox]:checked::before` (0,2,1), which would otherwise swap in
 * its own white dashicon URL and float/margin offsets. */
.formgic-widget input.formgic-checkbox-input-box:checked::before {
	content: "";
	float: none;
	margin: 0;
	width: 10px;
	height: 10px;
	background: var(--formgic-btn-text, #ffffff);
	transform: scale(1);
}

.formgic-widget input.formgic-checkbox-input-box:focus-visible {
	outline: 2px solid var(--formgic-border-focus);
	outline-offset: 2px;
}

.formgic-widget input.formgic-checkbox-input-box:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.formgic-checkbox-input-label {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

/* Yes / No */
.formgic-yesno {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.formgic-yesno-btn {
	flex: 1 1 auto;
	min-width: 100px;
	padding: 12px 20px;
	border: 1.5px solid var(--formgic-border-strong);
	background: var(--formgic-bg);
	color: var(--formgic-text);
	border-radius: var(--formgic-radius-md);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	transition: var(--formgic-transition-fast);
}

.formgic-yesno-btn:hover:not(:disabled) {
	border-color: var(--formgic-primary);
	background: var(--formgic-bg-muted);
	transform: translateY(-1px);
}

/* Slider / Range */
.formgic-widget .formgic-slider {
	display: flex;
	flex-direction: column;
	/* 28px, not 24px: the value bubble rises ~27px above the track row and
	   would clip into the readout at the low end of the range. */
	gap: 28px;
	align-items: flex-start;
	width: 100%;
}

.formgic-widget .formgic-slider-readout {
	font-size: 20px;
	font-weight: 700;
	color: var(--formgic-primary);
	line-height: 1;
}

.formgic-widget .formgic-slider-track-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.formgic-widget .formgic-slider-bound {
	font-size: 13px;
	font-weight: 500;
	color: var(--formgic-text-muted);
	flex-shrink: 0;
}

.formgic-widget .formgic-slider-range-wrap {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
}

.formgic-widget .formgic-slider-range {
	-webkit-appearance: none;
	-moz-appearance: none;
	     appearance: none;
	width: 100%;
	height: 22px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.formgic-widget .formgic-slider-range:focus {
	outline: none;
}

/*
 * WebKit and Firefox slider pseudo-elements cannot be comma-grouped: an
 * unrecognized selector invalidates the whole rule, so each engine gets
 * its own duplicated block below.
 */
.formgic-widget .formgic-slider-range::-webkit-slider-runnable-track {
	height: 7px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--formgic-primary) 0,
		var(--formgic-primary) var(--formgic-slider-pct, 50%),
		var(--formgic-slider-track) var(--formgic-slider-pct, 50%),
		var(--formgic-slider-track) 100%
	);
}

.formgic-widget .formgic-slider-range::-moz-range-track {
	height: 7px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--formgic-primary) 0,
		var(--formgic-primary) var(--formgic-slider-pct, 50%),
		var(--formgic-slider-track) var(--formgic-slider-pct, 50%),
		var(--formgic-slider-track) 100%
	);
}

.formgic-widget .formgic-slider-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	/* No global border-box reset in this file, so the 2px ring would
	   otherwise push the thumb to 26px and break the margin-top math. */
	box-sizing: border-box;
	/* Center the thumb on the 7px runnable track. Firefox does this itself. */
	margin-top: -7.5px;
	border-radius: 50%;
	background: var(--formgic-primary);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.1);
	cursor: grab;
	-webkit-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.formgic-widget .formgic-slider-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--formgic-primary);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.1);
	cursor: grab;
	-moz-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.formgic-widget .formgic-slider-range:hover:not(:disabled)::-webkit-slider-thumb {
	transform: scale(1.12);
}

.formgic-widget .formgic-slider-range:hover:not(:disabled)::-moz-range-thumb {
	transform: scale(1.12);
}

.formgic-widget .formgic-slider-range:active:not(:disabled)::-webkit-slider-thumb {
	transform: scale(1.06);
	cursor: grabbing;
}

.formgic-widget .formgic-slider-range:active:not(:disabled)::-moz-range-thumb {
	transform: scale(1.06);
	cursor: grabbing;
}

.formgic-widget .formgic-slider-range:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--formgic-primary) 25%, transparent);
}

.formgic-widget .formgic-slider-range:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--formgic-primary) 25%, transparent);
}

.formgic-widget .formgic-slider-range:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.formgic-widget .formgic-slider-bubble {
	position: absolute;
	bottom: calc(100% + 6px);
	/* --formgic-slider-shift corrects for the thumb's half-width at the ends. */
	left: calc(var(--formgic-slider-pct, 50%) + var(--formgic-slider-shift, 0px));
	padding: 4px 9px;
	border-radius: 8px;
	background: var(--formgic-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
}

.formgic-widget .formgic-slider-bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--formgic-primary);
	border-bottom-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.formgic-widget .formgic-slider-range::-webkit-slider-thumb {
		-webkit-transition: none;
		transition: none;
	}

	.formgic-widget .formgic-slider-range::-moz-range-thumb {
		-moz-transition: none;
		transition: none;
	}
}

/* Country picker */
.formgic-country-input {
	width: 100%;
}

.formgic-country-wrapper {
	position: relative;
}

.formgic-country-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--formgic-border-strong);
	background: var(--formgic-bg);
	color: var(--formgic-text);
	border-radius: var(--formgic-input-radius, 12px);
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.15s ease;
}

.formgic-country-trigger:hover:not(:disabled) {
	border-color: var(--formgic-primary);
}

.formgic-country-trigger-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Signature pad */
.formgic-signature-input {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.formgic-signature-canvas {
	width: 100%;
	height: 160px;
	border: 1.5px dashed var(--formgic-border-strong);
	border-radius: var(--formgic-radius-md);
	background: var(--formgic-bg);
	touch-action: none;
	cursor: crosshair;
}

.formgic-signature-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.formgic-signature-clear {
	padding: 12px 20px;
	border: 1.5px solid var(--formgic-border-strong);
	background: var(--formgic-bg);
	color: var(--formgic-text);
	border-radius: var(--formgic-radius-md);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	transition: var(--formgic-transition-fast);
}

.formgic-signature-clear:hover:not(:disabled) {
	border-color: var(--formgic-primary);
	background: var(--formgic-bg-muted);
}