/**
 * Captain Live Chat — Frontend Widget
 * 100% custom CSS. No framework used.
 *
 * SPECIFICITY STRATEGY:
 * Every single rule is nested inside `.captlc-widget` so our specificity
 * always beats theme reset.css rules.
 */

/* ── Design tokens — defined on the root widget wrapper ─────────────────── */
.captlc-widget {
	--captlcw-accent:              #2f6ef0;
	--captlcw-accent-hover:        #1f5adf;
	--captlcw-accent-text:         #ffffff;
	--captlcw-bg:                  #ffffff;
	--captlcw-bg-soft:             #f4f6fb;
	--captlcw-text:                #1c2233;
	--captlcw-text-muted:          #6b7280;
	--captlcw-border:              #e5e8f0;
	--captlcw-success:             #22c55e;
	--captlcw-warning-bg:          #fffbeb;
	--captlcw-warning-border:      #fde68a;
	--captlcw-warning-text:        #92400e;
	--captlcw-shadow:              0 12px 40px rgba(15, 23, 42, 0.18);
	--captlcw-toggle-shadow:       0 8px 24px rgba(47, 110, 240, 0.35);
	--captlcw-radius:              14px;
	--captlcw-radius-sm:           8px;
	--captlcw-radius-pill:         999px;
	--captlcw-bubble-visitor-bg:   #2f6ef0;
	--captlcw-bubble-visitor-text: #ffffff;
	--captlcw-bubble-agent-bg:     #f0f2f5;
	--captlcw-bubble-agent-text:   #1c2233;

	/* Layout */
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	box-sizing: border-box;
}

/* ── Box-sizing reset scoped to widget only ────────────────────────────── */
.captlc-widget *,
.captlc-widget *::before,
.captlc-widget *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ── Toggle button ─────────────────────────────────────────────────────── */
.captlc-widget .captlc-widget__toggle {
	all: unset;
	box-sizing: border-box;

	width: 58px;
	height: 58px;
	border-radius: 50% !important;
	background: var(--captlcw-accent) !important;
	color: #fff !important;
	border: none !important;
	outline: none !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-shadow: var(--captlcw-toggle-shadow) !important;
	transition: background-color 0.15s ease, transform 0.15s ease;

	-webkit-appearance: none;
	appearance: none;
}

.captlc-widget .captlc-widget__toggle:hover,
.captlc-widget .captlc-widget__toggle:active {
	background: var(--captlcw-accent-hover) !important;
	color: #fff !important;
	border: none !important;
	outline: none !important;
	box-shadow: var(--captlcw-toggle-shadow) !important;
	border-radius: 50% !important;
}

.captlc-widget .captlc-widget__toggle:focus-visible {
	background: var(--captlcw-accent-hover) !important;
	color: #fff !important;
	border: none !important;
	outline: 2px solid #fff !important;
	outline-offset: 3px !important;
	box-shadow: var(--captlcw-toggle-shadow), 0 0 0 4px rgba(0, 0, 0, 0.35) !important;
	border-radius: 50% !important;
}

.captlc-widget .captlc-widget__toggle:hover {
	transform: scale(1.05);
}

.captlc-widget .captlc-widget__icon {
	width: 26px;
	height: 26px;
	position: absolute;
	transition: opacity 0.15s ease, transform 0.15s ease;
	display: block;
	color: #fff !important;
	fill: #fff;
}

.captlc-widget .captlc-widget__icon--close {
	opacity: 0;
	transform: rotate(-90deg);
}

.captlc-widget[data-state="open"] .captlc-widget__toggle-icon-wrap {
	opacity: 0;
	transform: rotate(90deg);
}

.captlc-widget[data-state="open"] .captlc-widget__icon--close {
	opacity: 1;
	transform: rotate(0deg);
}

/* ── Panel — default (right-side widget) ──────────────────────────────── */
.captlc-widget .captlc-widget__panel {
	position: absolute;
	bottom: 74px;
	right: 0;
	left: auto;
	width: 400px;
	height: min(650px, calc(100vh - 120px));
	background: var(--captlcw-bg);
	border-radius: var(--captlcw-radius);
	box-shadow: var(--captlcw-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.captlc-widget--left .captlc-widget__panel {
	right: auto !important;
	left: 0 !important;
}

/* ── Widget size variants (Widget Designer → "Panel Size") ─────────────── */
.captlc-widget--size-large .captlc-widget__panel {
	width: 420px;
	height: min(760px, calc(100vh - 120px));
}

.captlc-widget[data-state="open"] .captlc-widget__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* ── Screen States ────────────────────────────────────────────────────── */
.captlc-widget .captlc-widget__screen {
	display: none;
	flex-direction: column;
	flex-grow: 1;
	height: 100%;
	min-height: 0;
	background: var(--captlcw-bg);
}

.captlc-widget .captlc-widget__screen.is-active {
	display: flex;
}

/* ── Headers ───────────────────────────────────────────────────────────── */
.captlc-widget .captlc-widget__header {
	background: var(--captlcw-accent);
	color: #fff;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}

/* Welcome Header (Overlap styling) */
.captlc-widget .captlc-widget__header--welcome {
	padding: 32px 20px 48px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	border-radius: var(--captlcw-radius) var(--captlcw-radius) 0 0;
	position: relative;
	gap: 6px;
}

.captlc-widget .captlc-widget__header--welcome h2 {
	font-size: 19px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
	color: #fff;
	max-width: 90%;
}

.captlc-widget .captlc-widget__header--welcome p {
	font-size: 12.5px;
	margin: 0;
	opacity: 0.85;
	color: #fff;
}

/* Sub-Headers (Prechat & Active Chat headers) */
.captlc-widget .captlc-widget__header--sub,
.captlc-widget .captlc-widget__header--agent {
	background: var(--captlcw-accent);
	color: #fff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	border-radius: var(--captlcw-radius) var(--captlcw-radius) 0 0;
}

.captlc-widget .captlc-widget__prechat-header-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.captlc-widget .captlc-widget__header-subtitle {
	font-size: 12px;
	opacity: 0.85;
	font-weight: 400;
}

/* Shown only when the pre-chat form is doubling as the "no one's online"
   offline lead-capture screen - see setPrechatOfflineMode() in widget.js */
.captlc-widget .captlc-widget__prechat-offline-note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--captlcw-text-muted, #64748b);
}

.captlc-widget button.captlc-widget__back-btn {
	background: transparent !important;
	border: none !important;
	color: #fff !important;
	font-size: 20px !important;
	cursor: pointer !important;
	padding: 0 4px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	opacity: 0.85 !important;
	transition: opacity 0.15s;
	box-shadow: none !important;
	outline: none !important;
}

/* RTL: mirror the "←" glyph so it visually points the correct "back" direction. */
[dir="rtl"] .captlc-widget button.captlc-widget__back-btn {
	transform: scaleX(-1);
}

.captlc-widget button.captlc-widget__back-btn:hover,
.captlc-widget button.captlc-widget__back-btn:focus,
.captlc-widget button.captlc-widget__back-btn:active {
	opacity: 1 !important;
	background: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
	outline: none !important;
}

.captlc-widget button.captlc-widget__back-btn:focus-visible {
	opacity: 1 !important;
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
	box-shadow: none !important;
	outline: 2px solid #fff !important;
	outline-offset: 1px !important;
	border-radius: 4px;
}

.captlc-widget button.captlc-widget__panel-close {
	background: transparent !important;
	border: none !important;
	color: #fff !important;
	font-size: 14px !important;
	cursor: pointer !important;
	margin-inline-start: auto !important;
	opacity: 0.8 !important;
	box-shadow: none !important;
	outline: none !important;
}

.captlc-widget button.captlc-widget__panel-close:hover,
.captlc-widget button.captlc-widget__panel-close:focus,
.captlc-widget button.captlc-widget__panel-close:active {
	opacity: 1 !important;
	background: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
	outline: none !important;
}

.captlc-widget button.captlc-widget__panel-close:focus-visible {
	opacity: 1 !important;
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
	box-shadow: none !important;
	outline: 2px solid #fff !important;
	outline-offset: 1px !important;
	border-radius: 4px;
}

/* ── Welcome screen body ────────────────────────────────────────────────── */
.captlc-widget .captlc-widget__welcome-body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: -24px;
	border-radius: var(--captlcw-radius) var(--captlcw-radius) 0 0;
	background: var(--captlcw-bg);
	z-index: 2;
	flex-grow: 1;
}

.captlc-widget .captlc-widget__welcome-agent-card {
	display: flex;
	gap: 12px;
	background: var(--captlcw-bg-soft);
	border-radius: var(--captlcw-radius-sm);
	padding: 14px;
	border: 1px solid var(--captlcw-border);
	margin-bottom: 8px;
	align-items: center;
}

.captlc-widget .captlc-widget__welcome-avatar {
	flex-shrink: 0;
}

.captlc-widget .captlc-widget__welcome-agent-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.captlc-widget .captlc-widget__welcome-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--captlcw-text-muted);
	background: rgba(0,0,0,0.06);
	padding: 2px 6px;
	border-radius: 4px;
	width: fit-content;
}

.captlc-widget .captlc-widget__welcome-status-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #94a3b8;
}

.captlc-widget .captlc-widget__welcome-status-dot.is-online {
	background: var(--captlcw-success);
}

.captlc-widget .captlc-widget__welcome-status-dot.is-online + #captlc-welcome-status-label {
	color: var(--captlcw-success);
}

.captlc-widget #captlc-welcome-message {
	font-size: 13px;
	color: var(--captlcw-text);
	line-height: 1.4;
	margin: 0;
}

/* Action Large buttons */
.captlc-widget .captlc-widget__large-btn {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--captlcw-accent);
	color: #fff !important;
	font-weight: 600;
	font-size: 13.5px;
	padding: 12px;
	border-radius: var(--captlcw-radius-sm);
	cursor: pointer;
	text-align: center;
	width: 100%;
	transition: background-color 0.15s ease, transform 0.1s ease;
	box-shadow: 0 4px 12px rgba(47, 110, 240, 0.15);
}

.captlc-widget .captlc-widget__large-btn:hover {
	background: var(--captlcw-accent-hover);
	transform: translateY(-1px);
}

/* Active chat header specifics */
.captlc-widget .captlc-widget__header-agent-avatar {
	flex-shrink: 0;
}

.captlc-widget .captlc-widget__header-agent-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.captlc-widget .captlc-widget__header-agent-name {
	font-size: 13.5px;
	font-weight: 600;
}

.captlc-widget .captlc-widget__header-agent-status {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	opacity: 0.85;
}

.captlc-widget .captlc-widget__status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
	flex-shrink: 0;
}

.captlc-widget .captlc-widget__status-dot.is-online {
	background: var(--captlcw-success);
}

/* ── Pre-chat form ─────────────────────────────────────────────────────── */
.captlc-widget .captlc-widget__prechat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	background: var(--captlcw-bg);
}

.captlc-widget .captlc-widget__input,
.captlc-widget .captlc-widget__textarea {
	all: unset;
	box-sizing: border-box;
	display: block;

	width: 100%;
	border: 1px solid var(--captlcw-border);
	border-radius: var(--captlcw-radius-sm);
	padding: 10px 12px;
	font-size: 13px;
	font-family: inherit;
	color: var(--captlcw-text);
	background: var(--captlcw-bg-soft);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.captlc-widget .captlc-widget__input:focus,
.captlc-widget .captlc-widget__textarea:focus {
	border-color: var(--captlcw-accent);
	background: var(--captlcw-bg);
	outline: none;
}

.captlc-widget .captlc-widget__input::placeholder,
.captlc-widget .captlc-widget__textarea::placeholder {
	color: var(--captlcw-text-muted);
}

.captlc-widget .captlc-widget__textarea {
	resize: vertical;
	min-height: 72px;
}

.captlc-widget .captlc-widget__send-btn {
	all: unset;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	background: var(--captlcw-accent);
	color: #fff;
	border: none;
	border-radius: var(--captlcw-radius-sm);
	padding: 11px 16px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.15s ease;
	font-family: inherit;
	text-align: center;
}

.captlc-widget .captlc-widget__send-btn:hover:not([disabled]) {
	background: var(--captlcw-accent-hover);
}

.captlc-widget .captlc-widget__send-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ── Error notice inside widget ────────────────────────────────────────── */
.captlc-widget .captlc-widget__error {
	padding: 8px 16px;
	background: #fee2e2;
	color: #b91c1c;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px solid #fca5a5;
}

.captlc-widget .captlc-widget__error-close {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 13px;
	opacity: 0.7;
	line-height: 1;
	flex-shrink: 0;
}

.captlc-widget .captlc-widget__error-close:hover {
	opacity: 1;
}

/* ── Thread / messages area ────────────────────────────────────────────── */
.captlc-widget .captlc-widget__thread {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-height: 0;
}

.captlc-widget .captlc-widget__messages {
	flex-grow: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--captlcw-bg-soft);
	min-height: 0;
}

/* ── Message bubbles ───────────────────────────────────────────────────── */
.captlc-widget .captlc-msg {
	max-width: 78%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 13px;
	word-wrap: break-word;
	white-space: pre-wrap;
	line-height: 1.45;
}

.captlc-widget .captlc-msg--visitor {
	align-self: flex-end;
	background: var(--captlcw-bubble-visitor-bg);
	color: var(--captlcw-bubble-visitor-text);
	border-end-end-radius: 4px;
}

.captlc-widget .captlc-msg--agent {
	align-self: flex-start;
	background: var(--captlcw-bubble-agent-bg);
	color: var(--captlcw-bubble-agent-text);
	border-end-start-radius: 4px;
}

/* ── Sender name + time, shown above each bubble ───────────────────────── */
.captlc-widget .captlc-msg__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 3px;
	font-size: 11px;
	line-height: 1.2;
	opacity: 0.65;
}

.captlc-widget .captlc-msg--visitor .captlc-msg__meta {
	justify-content: flex-end;
}

.captlc-widget .captlc-msg__name {
	font-weight: 600;
}

/* ── Date divider (shown once at the start, and again whenever the
   calendar day changes between messages) ────────────────────────────── */
.captlc-widget .captlc-widget__date-divider {
	align-self: center;
	margin: 4px 0;
}

.captlc-widget .captlc-widget__date-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--captlcw-bg);
	border: 1px solid var(--captlcw-border);
	color: var(--captlcw-text-muted, #64748b);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

/* ── System notes (persisted, non-chat markers in the transcript itself -
   e.g. "Conversation reopened.", "Conversation closed." - so they survive
   reloads and stay anchored between the messages they sit between) ────── */
.captlc-widget .captlc-widget__system-pill {
	background: color-mix(in srgb, var(--captlcw-success) 12%, var(--captlcw-bg));
	border-color: color-mix(in srgb, var(--captlcw-success) 35%, var(--captlcw-border));
	color: var(--captlcw-success);
}

/* ── Typing indicator ──────────────────────────────────────────────────── */
.captlc-widget .captlc-widget__typing {
	padding: 4px 16px;
	background: var(--captlcw-bg-soft);
}

.captlc-widget .captlc-widget__seen {
	padding: 2px 16px 8px;
	background: var(--captlcw-bg-soft);
	font-size: 11px;
	color: var(--captlcw-text-muted);
	text-align: end;
}

.captlc-widget .captlc-typing-dots {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var(--captlcw-bg);
	border: 1px solid var(--captlcw-border);
	border-radius: 12px;
	padding: 7px 11px;
}

.captlc-widget .captlc-typing-dots span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--captlcw-text-muted);
	display: inline-block;
	animation: captlc-typing-bounce 1.2s infinite ease-in-out;
}

.captlc-widget .captlc-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.captlc-widget .captlc-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes captlc-typing-bounce {
	0%, 60%, 100% { transform: translateY(0);    opacity: 0.5; }
	30%            { transform: translateY(-3px); opacity: 1;   }
}

/* ── Closed notice ─────────────────────────────────────────────────────── */
.captlc-widget .captlc-widget__closed-notice {
	padding: 10px 16px;
	font-size: 12px;
	color: var(--captlcw-warning-text);
	text-align: center;
	background: var(--captlcw-warning-bg);
	border-top: 1px solid var(--captlcw-warning-border);
}

/* ── Reply form ────────────────────────────────────────────────────────── */
.captlc-widget .captlc-widget__reply-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--captlcw-border);
	background: var(--captlcw-bg);
	flex-shrink: 0;
}

.captlc-widget .captlc-widget__reply-input {
	all: unset;
	box-sizing: border-box;
	display: block;
	flex-grow: 1;

	border: 1px solid var(--captlcw-border);
	border-radius: var(--captlcw-radius-pill);
	padding: 9px 14px;
	font-size: 13px;
	font-family: inherit;
	background: var(--captlcw-bg-soft);
	color: var(--captlcw-text);
}

.captlc-widget .captlc-widget__reply-input:focus {
	border-color: var(--captlcw-accent);
	background: var(--captlcw-bg);
	outline: none;
}

.captlc-widget .captlc-widget__reply-input::placeholder {
	color: var(--captlcw-text-muted);
}

.captlc-widget .captlc-widget__reply-send {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--captlcw-accent);
	color: #fff;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color 0.15s ease;
}

.captlc-widget .captlc-widget__reply-send:hover {
	background: var(--captlcw-accent-hover);
}

.captlc-widget .captlc-widget__reply-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Footer Tab Menu & Branding ─────────────────────────────────────────── */
.captlc-widget .captlc-widget__footer-tabs {
	display: flex;
	border-top: 1px solid var(--captlcw-border);
	background: var(--captlcw-bg);
	padding: 4px;
	gap: 4px;
	justify-content: center;
}

.captlc-widget button.captlc-widget__footer-tab {
	all: unset;
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 6px;
	border-radius: var(--captlcw-radius-sm) !important;
	cursor: pointer !important;
	color: var(--captlcw-text-muted) !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	transition: background-color 0.15s, color 0.15s;
}

.captlc-widget button.captlc-widget__footer-tab:hover,
.captlc-widget button.captlc-widget__footer-tab:focus,
.captlc-widget button.captlc-widget__footer-tab:active,
.captlc-widget button.captlc-widget__footer-tab:focus-visible {
	background: var(--captlcw-bg-soft) !important;
	color: var(--captlcw-text) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.captlc-widget button.captlc-widget__footer-tab.is-active {
	color: var(--captlcw-accent) !important;
	background: rgba(47, 110, 240, 0.05) !important;
}

.captlc-widget .captlc-widget__branding {
	font-size: 10px;
	text-align: center;
	color: var(--captlcw-text-muted);
	padding: 6px 12px;
	background: var(--captlcw-bg);
	border-top: 1px solid var(--captlcw-border);
}

/* Visually hidden but readable by screen readers. */
.captlc-widget .captlc-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;
}

/* ── FAQ tab ────────────────────────────────────────────────────────────── */
.captlc-widget .captlc-widget__faq-body {
	flex-grow: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 12px;
}

.captlc-widget .captlc-widget__faq-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.captlc-widget button.captlc-widget__faq-item {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 13px 14px;
	border-radius: var(--captlcw-radius-sm);
	background: var(--captlcw-bg-soft);
	color: var(--captlcw-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.captlc-widget button.captlc-widget__faq-item:hover,
.captlc-widget button.captlc-widget__faq-item:focus-visible {
	background: var(--captlcw-border);
}

.captlc-widget button.captlc-widget__faq-item svg {
	flex-shrink: 0;
	opacity: 0.5;
}

.captlc-widget .captlc-widget__faq-empty {
	text-align: center;
	color: var(--captlcw-text-muted);
	font-size: 13px;
	padding: 24px 12px;
	margin: 0;
}

.captlc-widget .captlc-widget__faq-detail {
	flex-direction: column;
	gap: 10px;
}

.captlc-widget button.captlc-widget__faq-detail-back {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	color: var(--captlcw-accent);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 0;
}

.captlc-widget .captlc-widget__faq-detail-question {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--captlcw-text);
}

.captlc-widget .captlc-widget__faq-detail-answer {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--captlcw-text);
	white-space: pre-wrap;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.captlc-widget {
		bottom: 16px;
		right: 16px;
	}

	.captlc-widget .captlc-widget__panel {
		position: fixed !important;
		right: 12px !important;
		left: 12px !important;
		bottom: 90px !important;
		width: auto !important;
		height: 78vh !important;
	}

	.captlc-widget--left {
		right: auto !important;
		left: 16px !important;
	}
}

/* ── Emoji + Attachment action buttons ─────────────────────────────────── */
.captlc-widget button.captlc-widget__action-btn {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px !important;
	cursor: pointer !important;
	font-size: 16px !important;
	color: var(--captlcw-text-muted) !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	flex-shrink: 0;
	transition: background-color 0.15s ease;
}

.captlc-widget button.captlc-widget__action-btn:hover,
.captlc-widget button.captlc-widget__action-btn:focus,
.captlc-widget button.captlc-widget__action-btn:active,
.captlc-widget button.captlc-widget__action-btn:focus-within,
.captlc-widget button.captlc-widget__action-btn:focus-visible {
	background: var(--captlcw-bg-soft) !important;
	color: var(--captlcw-text) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ── Widget inline emoji picker ────────────────────────────────────────── */
.captlc-widget .captlc-widget-emoji-picker {
	position: absolute;
	/* bottom offset is set inline by widget.js to match the reply-form's height */
	left: 0;
	right: 0;
	background: var(--captlcw-bg);
	border: 1px solid var(--captlcw-border);
	border-radius: 10px 10px 0 0;
	padding: 8px;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
	z-index: 10;
}

.captlc-widget .captlc-widget-emoji-picker__grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 2px;
	max-height: 130px;
	overflow-y: auto;
}

.captlc-widget .captlc-widget-emoji-picker__btn {
	all: unset;
	box-sizing: border-box;
	font-size: 18px;
	line-height: 1;
	padding: 4px;
	border-radius: 4px;
	cursor: pointer;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.captlc-widget .captlc-widget-emoji-picker__btn:hover,
.captlc-widget .captlc-widget-emoji-picker__btn:focus-visible {
	background: var(--captlcw-bg-soft);
	transform: scale(1.2);
}

.captlc-widget .captlc-widget-emoji-picker__btn:focus-visible {
	outline: 2px solid var(--captlcw-accent);
	outline-offset: 1px;
}

/* ── Quick Reply buttons ─────────────────────────────────────────────── */
.captlc-widget .captlc-widget-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 0 0 4px;
}

.captlc-widget .captlc-widget-qr-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	background: var(--captlcw-bg);
	border: 1.5px solid var(--captlcw-accent);
	color: var(--captlcw-accent);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	font-family: inherit;
}

.captlc-widget .captlc-widget-qr-btn:hover,
.captlc-widget .captlc-widget-qr-btn:focus-visible {
	background: var(--captlcw-accent);
	color: #fff;
}

.captlc-widget .captlc-widget-qr-btn:focus-visible {
	outline: 2px solid var(--captlcw-accent);
	outline-offset: 2px;
}

/* ── Scope-wide general buttons reset to override parent theme focus leaks ── */
.captlc-widget button,
.captlc-widget button:focus,
.captlc-widget button:active,
.captlc-widget button:focus-visible,
.captlc-widget button:focus-within {
	outline: none !important;
	border: none;
	box-shadow: none !important;
}

.captlc-widget .captlc-widget__large-btn:focus,
.captlc-widget .captlc-widget__large-btn:active,
.captlc-widget .captlc-widget__large-btn:focus-visible {
	background: var(--captlcw-accent-hover) !important;
	color: #fff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(47, 110, 240, 0.25) !important;
}

.captlc-widget .captlc-widget__send-btn:focus,
.captlc-widget .captlc-widget__send-btn:active,
.captlc-widget .captlc-widget__send-btn:focus-visible {
	background: var(--captlcw-accent-hover) !important;
	color: #fff !important;
}

.captlc-widget .captlc-widget__reply-send:focus,
.captlc-widget .captlc-widget__reply-send:active,
.captlc-widget .captlc-widget__reply-send:focus-visible {
	background: var(--captlcw-accent-hover) !important;
	color: #fff !important;
}

/* Toggle correct active launcher icon based on set configuration */
.captlc-widget .captlc-widget__toggle-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.captlc-widget .captlc-widget__toggle-icon-wrap svg {
	display: none !important;
}
.captlc-widget .captlc-widget__toggle-icon-wrap img.captlc-widget__icon--custom {
	display: none !important;
	width: 22px;
	height: 22px;
	object-fit: contain;
}
.captlc-widget .captlc-widget__toggle-icon-wrap[data-icon="chat1"] svg.captlc-widget__icon--chat1,
.captlc-widget .captlc-widget__toggle-icon-wrap[data-icon="chat2"] svg.captlc-widget__icon--chat2,
.captlc-widget .captlc-widget__toggle-icon-wrap[data-icon="chat3"] svg.captlc-widget__icon--chat3,
.captlc-widget .captlc-widget__toggle-icon-wrap[data-icon="chat4"] svg.captlc-widget__icon--chat4 {
	display: block !important;
}
.captlc-widget .captlc-widget__toggle-icon-wrap[data-icon="custom"] img.captlc-widget__icon--custom {
	display: block !important;
}