/* ============================================================
   chat-base.css — chat container, message list, bubbles,
   composer, system notices, canonical .bha-btn family,
   surface close button, overflow-menu component.
   ============================================================ */

/* ---- Chat container ---- */

.bha-chat-container {
	display: flex;
	flex-direction: column;
	/* Was `height: 75vh; min-height: 420px` — relics of the pre-W.1
	   single-pane layout where chat-container WAS the wrapper card.
	   Now it's a flex child of #bha-assistant; should fill whatever
	   vertical space the assistant pane gets, no more no less.
	   `min-height: 0` is mandatory: without it, .bha-messages (flex: 1
	   inside this container) can't shrink below its content size, so
	   overflow-y: auto on messages never triggers and the chat keeps
	   growing instead of scrolling. Regressed in 0.52.13 when the
	   wrapper changed from height to min-height; this fix re-aligns
	   the W.1 layout end-to-end. */
	flex: 1;
	min-height: 0;
	width: 100%;
	border: 1px solid #e0e4ea;
	border-radius: 14px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	background: #ffffff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	position: relative;
}

/* ---- Message list ---- */

.bha-messages {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}

/* Non-message UI elements (forms, etc.) appended directly inside
   .bha-messages align with the agent bubble's left edge
   (34px = avatar width + gap). */
.bha-messages > :not(.bha-message):not(.bha-quick-actions) {
	margin-left: 34px;
}

.bha-message {
	display: flex;
	align-items: flex-end;
}

.bha-message--user {
	justify-content: flex-end;
}

.bha-message--assistant {
	justify-content: flex-start;
	position: relative;
	padding-left: 34px;
}

.bha-message--assistant::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 30px;
	height: 30px;
	background: url('/wp-content/uploads/2025/07/bookably-logo-pin.png') no-repeat center / contain;
}

/* ---- Bubbles ---- */

.bha-bubble {
	max-width: 72%;
	padding: 10px 14px;
	border-radius: 18px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}

.bha-message--user .bha-bubble {
	background: #1097c5;
	color: #ffffff;
	border-bottom-right-radius: 4px;
}

.bha-message--assistant .bha-bubble {
	background: #f1f3f6;
	color: #111827;
	border-bottom-left-radius: 4px;
}

/* ---- Quick-action chips ---- */

.bha-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 0 8px 34px;
}

.bha-quick-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 14px;
	border: 1px solid #d1d5db;
	border-radius: 20px;
	background: #ffffff;
	color: #374151;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.bha-quick-chip:hover {
	background: #f0f7fa;
	border-color: #1097c5;
	color: #1097c5;
}

/* ---- Inline option buttons ---- */

.bha-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 0 4px 0;
	flex-basis: 100%;
}

.bha-message:has(.bha-options) {
	flex-wrap: wrap;
}

.bha-option-btn {
	display: block;
	width: fit-content;
	padding: 8px 16px;
	border: 1.5px solid #1097c5;
	border-radius: 20px;
	background: #ffffff;
	color: #1097c5;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	white-space: normal;
	text-align: left;
	line-height: 1.3;
}

.bha-option-btn:hover {
	background: #1097c5;
	color: #ffffff;
}

.bha-option-btn--selected {
	background: #1097c5;
	color: #ffffff;
	border-color: #1097c5;
}

.bha-option-btn--disabled {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

/* ---- Inline auth form ---- */

.bha-auth-form {
	width: 100%;
	max-width: 300px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid #e0e4ea;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Workspace-mounted variant: wider card, centred in the pane. */
.bha-auth-workspace-surface {
	display: flex;
	justify-content: center;
	padding: 32px 16px;
}

.bha-auth-form--workspace {
	width: 100%;
	max-width: 400px;
}

/* Social login buttons */

.bha-auth-social {
	margin-bottom: 4px;
}

.bha-social-btn {
	display: block;
	width: 100%;
	padding: 10px 0;
	margin-bottom: 8px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #ffffff;
	color: #374151;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.bha-social-btn:hover {
	background: #f9fafb;
	border-color: #9ca3af;
}

.bha-social-btn--google {
	border-color: #4285f4;
	color: #374151;
}

.bha-social-btn--google:hover {
	background: #f0f4ff;
}

.bha-social-btn--facebook {
	border-color: #1877f2;
	color: #374151;
}

.bha-social-btn--facebook:hover {
	background: #f0f4ff;
}

.bha-auth-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0;
	color: #9ca3af;
	font-size: 12px;
}

.bha-auth-divider::before,
.bha-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e0e4ea;
}

.bha-auth-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 14px;
	border-bottom: 2px solid #e0e4ea;
}

.bha-auth-tab {
	flex: 1;
	padding: 8px 0;
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	color: #9ca3af;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s, border-color 0.15s;
}

.bha-auth-tab:hover {
	color: #374151;
}

.bha-auth-tab--active {
	color: #1097c5;
	border-bottom-color: #1097c5;
}

.bha-auth-field {
	margin-bottom: 10px;
}

.bha-auth-field--name-row {
	display: flex;
	gap: 8px;
}

.bha-auth-field--name-row .bha-auth-input {
	flex: 1 1 0;
	min-width: 0;
}

.bha-auth-input {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: #111827;
	background: #ffffff;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.bha-auth-input:focus {
	outline: none;
	border-color: #1097c5;
}

.bha-auth-input::placeholder {
	color: #9ca3af;
}

.bha-auth-submit {
	display: block;
	width: 100%;
	padding: 10px 0;
	margin-top: 4px;
	border: none;
	border-radius: 8px;
	background: #1097c5;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s;
}

.bha-auth-submit:hover {
	background: #0d7fa8;
}

.bha-auth-submit:disabled {
	background: #7dcde6;
	cursor: not-allowed;
}

.bha-auth-error {
	padding: 8px 10px;
	margin-bottom: 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #dc2626;
	font-size: 13px;
}

.bha-auth-success {
	text-align: center;
	padding: 12px;
	color: #059669;
	font-size: 14px;
}

.bha-auth-form--done {
	border-color: #a7f3d0;
	background: #ecfdf5;
}

.bha-auth-forgot {
	display: block;
	text-align: center;
	margin-top: 10px;
	font-size: 13px;
	color: #6b7280;
	text-decoration: none;
}

.bha-auth-forgot:hover {
	color: #1097c5;
	text-decoration: underline;
}

/* Password reset form */
.bha-auth-reset-heading {
	font-size: 15px;
	font-weight: 600;
	color: #111827;
	margin-bottom: 4px;
}

.bha-auth-reset-sub {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.45;
	margin-bottom: 12px;
}

.bha-auth-reset-cancel {
	display: block;
	text-align: center;
	margin-top: 8px;
	font-size: 13px;
	color: #6b7280;
	text-decoration: none;
}

.bha-auth-reset-cancel:hover {
	color: #1097c5;
	text-decoration: underline;
}

/* ---- Typing indicator ---- */

.bha-typing-indicator {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 13px 16px;
}

.bha-typing-indicator span {
	display: inline-block;
	width: 7px;
	height: 7px;
	background: #9ca3af;
	border-radius: 50%;
	animation: bha-bounce 1.2s ease-in-out infinite;
}

.bha-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.bha-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bha-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	30%            { transform: translateY(-6px); }
}

/* ---- Input area ---- */

.bha-input-area {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid #e5e7eb;
	background: #f9fafb;
}

.bha-input {
	flex: 1;
	resize: none;
	overflow-y: auto;
	border: 1px solid #d1d5db;
	border-radius: 20px;
	padding: 9px 15px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	max-height: 120px;
	outline: none;
	background: #ffffff;
	color: #111827;
	transition: border-color 0.15s;
}

.bha-input:focus {
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.12);
}

.bha-input:disabled {
	background: #f3f4f6;
	color: #9ca3af;
	cursor: not-allowed;
}

/* 9.7.B.1 — hide the composer's vertical scrollbar on mobile. Touch
   scrolling inside the textarea doesn't need a visible bar, and Chrome
   on Android paints a preemptive bar when the textarea is focused even
   before content overflows. Desktop keeps the bar for pointer scrolling.
   Colocated with .bha-input to avoid the chrome.css→base.css cascade
   trap (host/reference_css_cross_file_cascade_trap.md). */
@media (max-width: 768px) {
	.bha-input {
		scrollbar-width: none;
	}
	.bha-input::-webkit-scrollbar {
		display: none;
	}
}

.bha-input::placeholder {
	color: #9ca3af;
}

/* ---- New chat button ---- */

.bha-new-chat-btn {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #9ca3af;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s, background 0.15s;
}

.bha-new-chat-btn:hover {
	color: #1097c5;
	background: rgba(16, 151, 197, 0.08);
}

.bha-new-chat-btn:active {
	transform: scale(0.93);
}

/* ---- Send button ---- */

.bha-send-btn {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #1097c5;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, transform 0.1s;
}

.bha-send-btn:hover:not(:disabled) {
	background: #0d7fa8;
}

.bha-send-btn:active:not(:disabled) {
	transform: scale(0.93);
}

.bha-send-btn:disabled {
	background: #7dcde6;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------- */
/* System notices (e.g. "[Widget] closed" after user moves on)          */
/* Same centered pill visual language as the login-success confirmation. */
/* -------------------------------------------------------------------- */

.bha-system-notice {
	margin: 10px auto;
	padding: 10px 16px;
	max-width: 420px;
	text-align: center;
	color: #059669;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 10px;
	font-size: 14px;
}

/* Fullscreen — slim the chat stream scrollbar so it stops feeling like
   a 17px slab covering the right edge of bubbles. */
.bha-chat-wrapper.bha-fullscreen .bha-messages {
	scrollbar-width: thin;
}
.bha-chat-wrapper.bha-fullscreen .bha-messages::-webkit-scrollbar {
	width: 10px;
}
.bha-chat-wrapper.bha-fullscreen .bha-messages::-webkit-scrollbar-track {
	background: transparent;
}
.bha-chat-wrapper.bha-fullscreen .bha-messages::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 5px;
}
.bha-chat-wrapper.bha-fullscreen .bha-messages::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* 9.7.B.1 — hide chat-stream scrollbar on mobile entirely. Touch
   scrolling doesn't need a visible bar; the desktop styling above
   keeps the slim grey thumb where pointer scrolling actually uses
   it. Belt-and-braces for both Firefox (`scrollbar-width`) and
   WebKit (`::-webkit-scrollbar`). */
@media (max-width: 768px) {
	.bha-chat-wrapper.bha-fullscreen .bha-messages {
		scrollbar-width: none;
	}
	.bha-chat-wrapper.bha-fullscreen .bha-messages::-webkit-scrollbar {
		display: none;
	}
}

/* =========================================================================
   Canonical button family — Bookably scheme.

   Use .bha-btn + a variant for EVERY button. The colours, padding,
   border-radius, transition all live here. Surface-specific overrides
   (e.g. `.bha-listing-tile__action--continue` adjusting padding so the
   tile fits 3 buttons in a row) ride on top — but the visual identity
   is owned by .bha-btn. Per locked feedback 2026-05-05 ("we defined
   button styles and need to adhere those") the older bespoke classes
   (.bha-XXX-form__save, .bha-calendar__action-btn--*, .bha-booking-
   sheet__action--*, .bha-listing-tile__action--colour) were retired —
   each surface now applies the right .bha-btn variant directly.
   ========================================================================= */

.bha-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 14px;
	border: 1.5px solid transparent;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
	-webkit-appearance: none;
	white-space: nowrap;
}
.bha-btn:active:not(:disabled) { transform: translateY(1px); }
.bha-btn:disabled,
.bha-btn--disabled {
	background: #cbd5e1;
	border-color: #cbd5e1;
	color: #ffffff;
	cursor: not-allowed;
}

/* Primary — filled Bookably teal. One per surface, the main affordance. */
.bha-btn--primary {
	background: #1097c5;
	color: #ffffff;
	border-color: #1097c5;
}
.bha-btn--primary:hover:not(:disabled) {
	background: #0d7fa8;
	border-color: #0d7fa8;
}

/* Secondary — outlined teal on white. Siblings of primary. */
.bha-btn--secondary {
	background: #ffffff;
	color: #0a4a5e;
	border-color: #a8d6e6;
}
.bha-btn--secondary:hover:not(:disabled) {
	background: #f0f7fa;
	border-color: #1097c5;
	color: #0a4a5e;
}

/* Ghost — transparent, teal text. Tertiary / link-like. */
.bha-btn--ghost {
	background: transparent;
	color: #1097c5;
	border-color: transparent;
}
.bha-btn--ghost:hover:not(:disabled) {
	background: #f0f7fa;
	color: #0d7fa8;
}

/* Danger — outlined red on white. Destructive actions (Decline, Cancel).
   Always outlined, never filled — destructive actions shouldn't shout. */
.bha-btn--danger {
	background: #ffffff;
	color: #991b1b;
	border-color: #fecaca;
}
.bha-btn--danger:hover:not(:disabled) {
	background: #fef2f2;
	border-color: #f87171;
}

/* Warning — filled amber. "In progress" semantic (e.g. Continue draft). */
.bha-btn--warning {
	background: #f59e0b;
	color: #ffffff;
	border-color: #f59e0b;
}
.bha-btn--warning:hover:not(:disabled) {
	background: #d97706;
	border-color: #d97706;
}

/* Size + width modifiers */
.bha-btn--sm { padding: 6px 10px; font-size: 12px; }
.bha-btn--lg { padding: 12px 20px; font-size: 14px; }
.bha-btn--block { flex: 1 1 0; min-width: 0; }

/* =========================================================================
   Surface close button — top-right × on every host-managed mounted
   surface (listing tiles, bookings, inbox list, calendar, stripe,
   package picker). Click removes the wrapper; if a parentAction was
   passed at mount time, it also dispatches that chip so a parent
   surface mounts in its place (e.g. closing a per-listing calendar
   brings the listing tiles back up).
   ========================================================================= */
.bha-listing-tiles,
.bha-bookings,
.bha-inbox,
.bha-calendar,
.bha-stripe-onboarding,
.bha-auth-form--workspace,
.bha-profile-form {
	position: relative;
}
/* (.bha-payment-card moved to chat-surfaces.css 2026-05-07 so it
   loads AFTER .bha-stripe-onboarding and wins the cascade — both are
   single-class selectors, so source-order decides which max-width /
   bg / border applies. See chat-surfaces.css for the rule.) */

/* Payment-form Cancel button — bottom-centre row beneath the Stripe
   iframe on every Embedded-Checkout surface (feature-listing,
   package-picker, renewal-picker). Replaces the corner ✕ for payment
   forms; non-payment surfaces still use .bha-surface-close.
   max-width matches the Stripe iframe wrapper (.bha-package-checkout
   / .bha-feature-checkout, both 450px) so the button is visually
   centred BELOW THE FORM rather than below the surface wrapper —
   the iframe is left-aligned within the wider surface, so a row at
   100% would land the button at the form's right edge. */
.bha-payment-cancel-row {
	display: flex;
	justify-content: center;
	max-width: 450px;
	margin: 16px 0 4px;
}
.bha-payment-cancel {
	min-width: 120px;
}

.bha-surface-close {
	position: absolute;
	top: 8px; right: 8px;
	width: 28px; height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #6b7280;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: background 0.12s, color 0.12s, box-shadow 0.12s;
	box-shadow: 0 1px 2px rgba(10, 74, 94, 0.1);
}
.bha-surface-close:hover {
	background: #f0f7fa;
	color: #0a4a5e;
	box-shadow: 0 2px 4px rgba(10, 74, 94, 0.15);
}

/* 9.7.B.1 — drop the per-surface corner × on mobile. The mobile sheet's
   own back-arrow is the canonical dismissal affordance for every
   surface; the in-surface × is redundant visual noise on a phone (and
   easy to fat-finger when reaching for content nearby). Desktop keeps
   the × — that chrome has no sheet back-arrow.

   This rule lives in chat-base.css (NOT chat-chrome.css) so it loads
   after the desktop `.bha-surface-close { display: flex; ... }` rule
   above and wins the source-order cascade — both selectors have equal
   specificity (0,0,1,0); @media doesn't add specificity. */
@media (max-width: 768px) {
	.bha-surface-close {
		display: none;
	}
}

/* =========================================================================
   Surface #3 — shared "⋮ More" overflow-menu component.
   Mounted on listing tiles (3a) and booking rows (3b). One CSS block,
   two consumers — keep selectors generic (.bha-overflow-menu__*) so per-
   surface containers can adjust placement without duplicating styles.
   ========================================================================= */
.bha-overflow-menu__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: #475569;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
	-webkit-appearance: none;
}
.bha-overflow-menu__btn:hover,
.bha-overflow-menu__btn[aria-expanded="true"] {
	background: #f0f7fa;
	border-color: #a8d6e6;
	color: #0a4a5e;
}

.bha-overflow-menu__popup {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 50;
	min-width: 180px;
	max-width: 240px;
	padding: 4px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.bha-overflow-menu__popup--up {
	top: auto;
	bottom: calc(100% + 4px);
}

.bha-overflow-menu__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: #1e293b;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background 0.1s, color 0.1s;
}
.bha-overflow-menu__item:hover:not(.bha-overflow-menu__item--disabled) {
	background: #f0f7fa;
	color: #0a4a5e;
}
.bha-overflow-menu__item--danger {
	color: #991b1b;
}
.bha-overflow-menu__item--danger:hover:not(.bha-overflow-menu__item--disabled) {
	background: #fef2f2;
	color: #7f1d1d;
}
.bha-overflow-menu__item--disabled {
	color: #94a3b8;
	cursor: not-allowed;
}
.bha-overflow-menu__item-icon {
	display: inline-flex;
	width: 16px;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
}
.bha-overflow-menu__item-label { line-height: 1.2; }

/* Inline confirm / picker mount-area — shared shape used by both surfaces.
   The ⋮ menu's handler renders confirm forms or the package picker into
   a host node; this gives that node consistent vertical rhythm + a soft
   teal accent matching the focused-state style elsewhere in the chat. */
.bha-inline-action {
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid #a8d6e6;
	border-radius: 8px;
	background: #f0f7fa;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}
.bha-inline-action--danger {
	border-color: #fecaca;
	background: #fef2f2;
}
.bha-inline-action__msg {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
}
.bha-inline-action__sub {
	font-size: 12px;
	color: #475569;
	line-height: 1.4;
}
.bha-inline-action__field-label {
	font-size: 12px;
	font-weight: 600;
	color: #334155;
}
.bha-inline-action__textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 64px;
	padding: 8px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 13px;
	color: #0f172a;
	background: #ffffff;
	resize: vertical;
}
.bha-inline-action__textarea:focus {
	outline: none;
	border-color: #1097c5;
	box-shadow: 0 0 0 2px rgba(16, 151, 197, 0.15);
}
.bha-inline-action__error {
	font-size: 12px;
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	padding: 6px 8px;
}
.bha-inline-action__btns {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	flex-wrap: wrap;
}