/* ============================================================
   chat-surfaces.css — per-surface styles.
   Home, host profile, Stripe Connect, package picker,
   listing tiles, bookings, inbox, calendar, booking sheet.
   ============================================================ */

/* ===== Home surface ===== */
.bha-home {
	max-width: 760px;
	margin: 0 auto;
}

/* 9.7.B.1 — mobile side breathing room (matches listings + bookings).
   Desktop's `margin: 0 auto` centres a 760px-cap wrapper inside the
   workspace pane; on mobile the wrapper would otherwise stretch to
   the sheet body edges. */
@media (max-width: 768px) {
	.bha-home {
		margin: 16px 12px;
	}
}

.bha-home__greeting {
	font-size: 24px;
	font-weight: 700;
	color: var(--bha-chrome-teal-deep);
	margin: 0 0 4px;
}

.bha-home__sub {
	color: var(--bha-chrome-neutral-500);
	margin: 0 0 28px;
}

.bha-home__section-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bha-chrome-neutral-500);
	margin: 0 0 12px;
}

.bha-home__section-title--warn {
	color: var(--bha-chrome-amber-text);
}

.bha-home__quick-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 32px;
}

.bha-home__quick-action {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--bha-chrome-neutral-200);
	border-radius: 12px;
	background: #ffffff;
	cursor: pointer;
	transition: border-color 0.12s, transform 0.05s, box-shadow 0.12s;
	text-align: left;
	font: inherit;
	color: inherit;
}

.bha-home__quick-action:hover {
	border-color: var(--bha-chrome-teal);
	box-shadow: var(--bha-chrome-shadow-md);
}

.bha-home__quick-action:active {
	transform: translateY(1px);
}

.bha-home__quick-action-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--bha-chrome-teal-tint);
	color: var(--bha-chrome-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.bha-home__quick-action-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bha-home__quick-action-title {
	font-weight: 600;
	color: var(--bha-chrome-neutral-900);
	font-size: 14px;
}

.bha-home__quick-action-sub {
	font-size: 12px;
	color: var(--bha-chrome-neutral-500);
}

.bha-home__summary {
	background: #ffffff;
	border: 1px solid var(--bha-chrome-neutral-200);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 16px;
}

.bha-home__summary-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bha-chrome-neutral-100);
}

.bha-home__summary-row:last-child {
	border-bottom: none;
}

.bha-home__summary-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--bha-chrome-teal-tint);
	color: var(--bha-chrome-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.bha-home__summary-text {
	flex: 1;
	font-size: 13px;
}

.bha-home__summary-text strong {
	color: var(--bha-chrome-neutral-900);
	font-weight: 600;
	font-size: 14px;
}

.bha-home__summary-text small {
	color: var(--bha-chrome-neutral-500);
	font-size: 12px;
}

.bha-home__summary-cta {
	font-size: 12px;
	color: var(--bha-chrome-teal);
	border: none;
	background: transparent;
	cursor: pointer;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 6px;
	font-family: inherit;
}

.bha-home__summary-cta:hover {
	background: var(--bha-chrome-teal-tint);
	color: var(--bha-chrome-teal-dark);
}

.bha-home__action-needed {
	background: var(--bha-chrome-amber-tint);
	border: 1px solid var(--bha-chrome-amber-edge);
	border-radius: 12px;
	padding: 4px 20px;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
}

.bha-home__action-needed-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	font-size: 13px;
	color: #78350f;
	border: none;
	border-bottom: 1px solid rgba(146, 64, 14, 0.12);
	background: transparent;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	width: 100%;
}

.bha-home__action-needed-row:last-child {
	border-bottom: none;
}

.bha-home__action-needed-row:hover {
	color: var(--bha-chrome-amber-text);
}

.bha-home__action-needed-icon {
	font-size: 14px;
	flex-shrink: 0;
}

.bha-home__action-needed-text {
	flex: 1;
}

.bha-home__action-needed-text strong {
	font-weight: 700;
}

/* ---- Host profile form ---- */

.bha-profile-form {
	background: #ffffff;
	border: 1px solid #e0e4ea;
	border-radius: 12px;
	padding: 20px;
	max-width: 560px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 9.7.B.1 — per-surface mobile refit. Card margin so the form doesn't
   sit flush against the sheet edges; in-surface title is hidden on
   mobile because the sheet header already carries "Profile" (via
   SURFACE_TO_TITLE in mobile-sheet.js). Same convention as listings /
   bookings / dashboard / inbox / reviews. */
@media (max-width: 768px) {
	.bha-profile-form {
		margin: 16px 12px;
	}
	.bha-profile-form__title {
		display: none;
	}
}

.bha-profile-form__title {
	font-size: 16px;
	font-weight: 700;
	color: #1f2937;
	margin-bottom: 16px;
}

/* Image upload */

.bha-profile-form__image-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 12px 0;
}

.bha-profile-form__image-preview {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 2px dashed #d1d5db;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9ca3af;
	overflow: hidden;
	transition: border-color 0.15s;
	position: relative;
}

.bha-profile-form__image-section:hover .bha-profile-form__image-preview {
	border-color: #1097c5;
	color: #1097c5;
}

.bha-profile-form__upload-progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.bha-profile-form__image-preview--has-image {
	border-style: solid;
	border-color: #e0e4ea;
}

.bha-profile-form__image-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bha-profile-form__image-label {
	font-size: 13px;
	font-weight: 500;
	color: #1097c5;
}

/* Divider */

.bha-profile-form__divider {
	height: 1px;
	background: #e5e7eb;
	margin: 16px 0;
}

/* Fields */

.bha-profile-form__fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bha-profile-form__name-row {
	display: flex;
	gap: 12px;
}

.bha-profile-form__name-row .bha-profile-form__field {
	flex: 1;
	min-width: 0;
}

@media (max-width: 480px) {
	.bha-profile-form__name-row {
		flex-direction: column;
		gap: 14px;
	}
}

.bha-profile-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bha-profile-form__label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.bha-profile-form__required {
	color: #ef4444;
}

.bha-profile-form__input,
.bha-profile-form__textarea,
.bha-profile-form__select {
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 14px;
	font-family: inherit;
	color: #1f2937;
	background: #ffffff;
	box-sizing: border-box;
	width: 100%;
	transition: border-color 0.15s;
}

.bha-profile-form__input:focus,
.bha-profile-form__textarea:focus,
.bha-profile-form__select:focus {
	outline: none;
	border-color: #1097c5;
	box-shadow: 0 0 0 2px rgba(16, 151, 197, 0.15);
}

.bha-profile-form__textarea {
	resize: vertical;
	min-height: 60px;
}

.bha-profile-form__select {
	appearance: auto;
}

/* Checkbox fields */

.bha-profile-form__field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 0;
}

.bha-profile-form__checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	color: #374151;
	cursor: pointer;
	line-height: 1.4;
}

.bha-profile-form__checkbox {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: #1097c5;
}

/* Multi-checkbox */

.bha-profile-form__multi-checkbox {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 4px;
}

.bha-profile-form__multi-checkbox-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #374151;
	cursor: pointer;
}

/* Error */

.bha-profile-form__field-error {
	font-size: 12px;
	color: #ef4444;
	min-height: 0;
}

.bha-profile-form__error {
	padding: 8px 10px;
	margin-top: 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #dc2626;
	font-size: 13px;
}

/* Submit button */

.bha-profile-form__submit {
	display: block;
	width: 100%;
	padding: 10px 28px;
	margin-top: 16px;
	border: none;
	border-radius: 6px;
	background: #1097c5;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s;
}

.bha-profile-form__submit:hover {
	background: #0d7fa8;
}

.bha-profile-form__submit:disabled {
	background: #9ca3af;
	cursor: not-allowed;
}

/* Submitted state */

.bha-profile-form__cancel {
	display: block;
	width: 100%;
	padding: 8px 0;
	margin-top: 8px;
	border: none;
	background: transparent;
	color: #6b7280;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: color 0.15s;
}

.bha-profile-form__cancel:hover {
	color: #1097c5;
}

.bha-profile-form--submitting {
	opacity: 0.7;
	pointer-events: none;
}

/* -------------------------------------------------------------------- */
/* Stripe Connect embedded onboarding                                   */
/* -------------------------------------------------------------------- */

.bha-stripe-onboarding {
	margin: 10px 0 18px 44px;
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #ffffff;
	max-width: 640px;
}

.bha-stripe-onboarding__mount {
	min-height: 400px;
}

.bha-stripe-onboarding__mount > * + * {
	margin-top: 16px;
}

.bha-stripe-onboarding__status {
	font-size: 13px;
	color: #6b7280;
	padding: 8px 2px 0;
}

/* Security reassurance shown above any Stripe Embedded Checkout mount
   (mountStripeCheckoutForPackage in package-picker.js) AND above each
   Stripe Connect widget (appendStripeWidget in stripe-connect.js).
   Width matches the 450px Embedded Checkout iframe so the note doesn't
   sprawl across the full workspace pane. Calm green to reinforce
   "safe", not so loud it competes with the form itself. */
.bha-stripe-security-note {
	max-width: 450px;
	box-sizing: border-box;
	margin-bottom: 12px;
	padding: 10px 14px;
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.45;
}

.bha-stripe-onboarding--done {
	display: none;
}

/* -------------------------------------------------------------------- */
/* Package picker (listing packages — inline card grid)                  */
/* Lives inside the shared .bha-stripe-onboarding wrapper so it inherits */
/* the widget-lifecycle close-on-send handling. Overrides the wrapper's  */
/* 640px max-width for this variant — three cards need more room.        */
/* -------------------------------------------------------------------- */

.bha-stripe-onboarding.bha-package-picker {
	max-width: none;
	margin-right: 10px;
}

/* Inline mode — when the picker mounts INSIDE the preview tile's
   Packages section (O.2 onboarding refactor), drop the chat-bubble
   chrome so it integrates with the preview's own card styling. */
.bha-stripe-onboarding.bha-package-picker--inline {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* (Old "strip the card chrome on checkout" rule removed 2026-05-07.
   The shared .bha-payment-card class now applies the standard payment-
   surface card to every Stripe form — feature-listing, package-picker
   in checkout mode, renewal-picker in checkout mode. The earlier "go
   bare" decision was reversed when we standardised on a single visible
   payment-form card across all flows.) */

/* Payment surface card — SINGLE SOURCE OF TRUTH for the visual chrome
   of every Stripe-Embedded-Checkout flow (feature-listing, package-
   picker in checkout mode, renewal-picker in checkout mode). Applied
   via JS by adding the class to the surface wrapper at the moment the
   Stripe iframe mounts.
   482px = 450px iframe + 16px padding × 2. The white card sits exactly
   around the form, with the workspace's neutral grey visible around
   it. Loaded in chat-surfaces.css (not chat-base.css) so it overrides
   the base .bha-stripe-onboarding rule via source-order cascade —
   both are single-class selectors with equal specificity. */
.bha-payment-card {
	max-width: 482px !important;
	padding: 16px !important;
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	box-sizing: border-box !important;
	margin-left: 0 !important;
}

.bha-package-checkout,
.bha-feature-checkout {
	width: 100%;
	max-width: 450px;
	min-height: 300px;
}

.bha-package-picker .bha-package-picker__grid {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

.bha-package-card {
	position: relative;
	flex: 1 1 240px;
	min-width: 240px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	/* Extra top padding so the Recommended ribbon sits cleanly above the
	   card content without crowding the featured image. */
	padding: 26px 16px 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.bha-package-card:hover {
	border-color: #c7d2fe;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bha-package-card--primary {
	border-color: #10b981;
	box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
}

.bha-package-card__ribbon {
	position: absolute;
	top: 8px;
	right: 10px;
	background: #10b981;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(16, 185, 129, 0.35);
	white-space: nowrap;
}

.bha-package-card__image {
	width: 48px;
	height: 60px;
	object-fit: contain;
	margin: 0 0 8px;
	align-self: flex-start;
}

.bha-package-card__name {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 4px;
}

.bha-package-card__tagline {
	font-size: 13px;
	color: #4b5563;
	margin-bottom: 10px;
	line-height: 1.4;
}

.bha-package-card__price {
	font-size: 20px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 12px;
}

.bha-package-card__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	font-size: 12px;
	color: #374151;
	line-height: 1.5;
}

.bha-package-card__bullets li {
	padding-left: 16px;
	position: relative;
	margin-bottom: 3px;
}

.bha-package-card__bullets li::before {
	content: '✓';
	color: #10b981;
	position: absolute;
	left: 0;
	font-weight: 700;
}

.bha-package-card__action {
	margin-top: auto;
	padding: 10px 14px;
	background: #1097c5;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}

.bha-package-card__action:hover:not(:disabled) {
	background: #0d7ea3;
}

.bha-package-card__action:disabled {
	opacity: 0.6;
	cursor: default;
}

.bha-package-card--primary .bha-package-card__action {
	background: #10b981;
}

.bha-package-card--primary .bha-package-card__action:hover:not(:disabled) {
	background: #059669;
}

/* Stack cards vertically on mobile / narrow viewports. */
@media (max-width: 680px) {
	.bha-package-picker .bha-package-picker__grid {
		flex-direction: column;
		flex-wrap: nowrap;
		overflow-x: visible;
	}
	.bha-package-card {
		max-width: 100%;
	}
}


/* ==========================================================================
   Listing tiles surface (Phase 9.5a — first host management surface)

   Card grid mounted below the agent's reply when /listings/mine returns
   non-empty. Each card shows hero + title + status pill + action.
   Status-pill colours: orange (Draft), amber (Pending review),
   green (Live).
   ========================================================================== */

.bha-listing-tiles {
	margin: 8px 0 12px;
	max-width: 720px;
	/* Shrink to content width so the surface (and its close-button
	   anchor) is only as wide as the actual rendered tiles. With 1 tile
	   the close × sits next to that tile, not orphaned over an empty
	   column-3 zone. position: relative makes .bha-surface-close anchor
	   to this container instead of the workspace pane (workspace's
	   `position: relative` was previously the only anchor in the chain). */
	width: fit-content;
	position: relative;
}

/* Header row with surface title — gives the top of the wrapper visual
   content so the absolute-positioned × close button has context (sits
   next to the title rather than orphaned over an empty zone). Mirrors
   the bookings filter-chip header pattern. */
.bha-listing-tiles__header {
	display: flex;
	align-items: center;
	min-height: 36px;
	margin-bottom: 12px;
	/* Right padding leaves room for the absolute-positioned × close button
	   so a long title can't slide under it. */
	padding-right: 40px;
}

.bha-listing-tiles__header-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #111827;
	line-height: 1.2;
}

/* 9.7.B.1 — hide the in-surface "My listings" header on mobile. The
   sheet header already shows the same title (via SURFACE_TO_TITLE in
   mobile-sheet.js), so this row was pure duplication. The original
   reason for the row — anchoring the absolute-positioned × close
   button — is moot on mobile because the × is also hidden at ≤768px
   (see chat-base.css `.bha-surface-close` media block). Same pattern
   should apply to other surfaces with in-surface headers (bookings
   filter-chip header, etc.) — fix when they surface in 9.7.E. */
@media (max-width: 768px) {
	.bha-listing-tiles__header {
		display: none;
	}
}

.bha-listing-tiles__grid {
	/* Flex (not grid) — paired with width: fit-content on the wrapper,
	   the grid takes the natural sum of tile widths + gaps, so the
	   wrapper shrinks to match. Grid auto-fill would leave empty
	   columns and keep the wrapper at full max-width. */
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bha-listing-tile {
	/* Fixed tile width — combined with .bha-listing-tiles' fit-content
	   width above, the surface ends exactly at the right edge of the
	   last visible tile. 3 tiles = ~684px (3×220 + 2×12), 1 tile = 220px. */
	flex: 0 0 220px;
}

/* 9.7.B.1 — on mobile (single-column inside the sheet body), the
   desktop `fit-content` + fixed 220px tile width leaves a 220px tile
   hugging the left edge with empty space to the right. Switch to a
   full-width row with side margins so tiles fill the sheet body and
   sit with breathing room from the phone screen edges. */
@media (max-width: 768px) {
	.bha-listing-tiles {
		width: auto;
		max-width: none;
		margin: 16px 12px;
	}
	.bha-listing-tile {
		flex: 1 1 100%;
	}
}

.bha-listing-tile {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #ffffff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.15s, transform 0.05s;
	/* Anchor for the ⋮ corner menu host overlay. */
	position: relative;
}
.bha-listing-tile:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

/* Featured tile — gold border + ring matching the #ffc107 the guest
   agent uses for the featured badge on the public listing card. The
   ring is rendered via box-shadow so it doesn't shift the tile's
   outer dimensions (other tiles keep their 1px gray border + same
   layout). Hover layers the existing soft drop-shadow on top. */
.bha-listing-tile--featured {
	border-color: #ffc107;
	box-shadow: 0 0 0 1px #ffc107, 0 1px 2px rgba(0, 0, 0, 0.04);
}
.bha-listing-tile--featured:hover {
	box-shadow: 0 0 0 1px #ffc107, 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bha-listing-tile__hero {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #f3f4f6;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bha-listing-tile__hero img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.bha-listing-tile__hero--empty {
	font-size: 36px;
	color: #9ca3af;
}

.bha-listing-tile__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	/* Grow to fill the tile so the action row can anchor at the bottom
	   regardless of how much title / pill / sync-warning content sits
	   above it. Combined with .bha-listing-tile__actions { margin-top:
	   auto } this keeps the Edit / Calendar / Preview row aligned
	   across every tile in a row, whether or not it has a sync warning. */
	flex: 1;
}

.bha-listing-tile__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	/* Reserve 2 lines of vertical space even for short single-line titles
	   so warning pills (Calendar sync / Expires soon) sit at the same
	   height across every tile in a grid row. Without this, a tile with
	   a 1-line title would lift its pill 19.5px above its neighbours. */
	min-height: calc(15px * 1.3 * 2);
	color: #1e293b;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.bha-listing-tile__pill {
	display: inline-flex;
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
}
.bha-listing-tile__pill--orange { background: #fef3c7; color: #92400e; }
.bha-listing-tile__pill--amber  { background: #fde68a; color: #78350f; }
.bha-listing-tile__pill--green  { background: #dbeef5; color: #0a4a5e; } /* Live — Bookably teal-tint */
.bha-listing-tile__pill--gray   { background: #f3f4f6; color: #4b5563; }

/* Calendar sync staleness chip on the tile (Phase C.4). Sits below the
   status pill — small + amber so it doesn't fight for the host's eye
   with the primary status pill. Renders as a <button> when clickable
   (has_stale_sync) and a <span> for the empty placeholder slot. */
.bha-listing-tile__stale-sync {
	display: inline-flex; align-items: center;
	margin-top: 6px;
	padding: 2px 8px;
	font-size: 11px; font-weight: 600;
	font-family: inherit;
	background: #fef3c7; color: #92400e;
	border: 1px solid #fcd34d;
	border-radius: 999px;
	min-height: 22px; /* reserve consistent vertical space — see --empty below */
	box-sizing: border-box;
	align-self: flex-start;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bha-listing-tile__stale-sync:hover {
	background: #fde68a;
	border-color: #f59e0b;
	color: #78350f;
}
/* --empty placeholder: occupies the same vertical footprint as a real
   sync-warning chip so tiles without a warning still reserve the slot
   and the action row aligns across rows in the grid. */
.bha-listing-tile__stale-sync--empty {
	background: transparent;
	border-color: transparent;
	visibility: hidden;
	pointer-events: none;
}

/* Expires-soon pill — surfaced on published listings within 30 days of
   hp_expired_time. Clickable: opens the inline renewal picker in the
   tile's inline-zone (below the actions row). Same amber palette as
   the stale-sync chip — both are "needs attention" badges, kept calm
   so they don't shout for hosts who have a hot tile. The ↻ glyph
   doubles as a renew affordance. */
.bha-listing-tile__expires-soon {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: 6px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	font-family: inherit;
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fcd34d;
	border-radius: 999px;
	min-height: 22px;
	box-sizing: border-box;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bha-listing-tile__expires-soon:hover {
	background: #fde68a;
	border-color: #f59e0b;
	color: #78350f;
}

/* (Featured pill removed 2026-05-07 — featured state is now shown
   inline on the Feature action button itself. See
   .bha-listing-tile__action--featured below.) */

/* ⋮ corner menu host — overlaid on the top-right of the hero image.
   Decoupled from the action stack so the stacked buttons read as a
   clean column. The OverflowMenu component renders a button inside
   this host; the host sets position context for the popup anchor. */
.bha-listing-tile__menu-host {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
}
.bha-listing-tile__menu-host .bha-overflow-menu__btn {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	backdrop-filter: blur(2px);
}
.bha-listing-tile__menu-host .bha-overflow-menu__btn:hover {
	background: #ffffff;
}

/* Feature action button — already-featured state. Bookably-tinted so the
   button reads as "currently featured" without needing a separate pill
   above the action stack. */
.bha-listing-tile__action--featured {
	background: #f0f7fa;
	color: #0d7fa8;
	border-color: #a8d6e6;
}
.bha-listing-tile__action--featured:hover:not(:disabled) {
	background: #dbeef5;
	border-color: #1097c5;
	color: #0a4a5e;
}
/* Featured but expiring soon — warmer tint to nudge the host to extend. */
.bha-listing-tile__action--featured-soon {
	background: #fef3c7;
	color: #92400e;
	border-color: #fcd34d;
}
.bha-listing-tile__action--featured-soon:hover:not(:disabled) {
	background: #fde68a;
	border-color: #f59e0b;
	color: #78350f;
}

/* Invisible placeholder slot for the action stack. Keeps every tile in
   the grid the same height regardless of which actions its status
   enables. Same trick the warning pill row's --empty modifier uses. */
.bha-listing-tile__action--placeholder {
	visibility: hidden;
	pointer-events: none;
}

/* Pending-tile notice. Replaces the 4-button action stack on pending
   listings (which are read-only at the host level until Bookably's
   moderation completes). Soft amber chrome to echo the "Pending review"
   pill above; aims for roughly the same vertical footprint as the
   action stack so tile heights stay consistent across the grid. */
.bha-listing-tile__pending-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	color: #78350f;
	font-size: 13px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.bha-listing-tile__pending-notice-icon {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 1px;
}

.bha-listing-tile__pending-notice-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bha-listing-tile__pending-notice-text strong {
	color: #92400e;
	font-weight: 600;
}

/* --empty placeholder mirrors stale-sync's: occupies the same vertical
   slot when no warning so the warning row aligns across every tile in
   the grid even when only some tiles have an expiring badge. */
.bha-listing-tile__expires-soon--empty {
	background: transparent;
	border-color: transparent;
	visibility: hidden;
	pointer-events: none;
	cursor: default;
}

/* =========================================================================
   Renewal picker workspace surface (renewal-picker.js, 2026-05-06).
   Mounted via Bha.Workspace.mount('renewal', ...) when the agent's
   start_listing_renewal tool fires. Reuses .bha-package-picker grid styles
   for the cards; adds a small header above with the listing title +
   days-until-expiry context.
   ========================================================================= */
.bha-renewal-picker__header {
	margin-bottom: 12px;
	padding-right: 36px; /* clear of the surface × close button */
}
.bha-renewal-picker__title {
	font-size: 17px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.3;
}
.bha-renewal-picker__sub {
	margin-top: 4px;
	font-size: 13px;
	color: #92400e;
	font-weight: 500;
}

/* "You own this · N slots left" badge inserted into a package card by
   renewal-picker.js for packages the host already owns with slots
   remaining. Sits just above the action button so the visual flow is
   value→ownership confirmation→action. Green to signal "no payment
   needed" — distinct from the amber "needs attention" pills. */
.bha-package-card__owned-badge {
	margin-top: 8px;
	padding: 6px 10px;
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #a7f3d0;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

/* =========================================================================
   Reviews picker workspace surface (reviews-picker.js, Phase 9.5 — 2026-05-06).
   Mounted via Bha.Workspace.mount('reviews', ...) when start_reviews_workspace
   fires. List of expandable rows (one per eligible booking). Click a row to
   expand the inline submit form (1-5 stars + textarea).
   ========================================================================= */
/* 9.7.B.1 — per-surface mobile refit. Root wrapper gets the standard
   margin so the surface doesn't sit flush against the sheet edges; the
   in-surface header is hidden on mobile because the sheet header
   already carries the "Reviews" title (via SURFACE_TO_TITLE in
   mobile-sheet.js). Same convention as listings / bookings / dashboard /
   inbox. */
@media (max-width: 768px) {
	.bha-reviews-picker {
		margin: 16px 12px;
	}
	.bha-reviews-picker__header {
		display: none;
	}
}

.bha-reviews-picker__header {
	margin-bottom: 12px;
	padding-right: 36px; /* clear of the surface × close button */
}
.bha-reviews-picker__title {
	font-size: 17px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.3;
}
.bha-reviews-picker__sub {
	margin: 0 0 12px;
	font-size: 13px;
	color: #475569;
}
.bha-reviews-picker__empty {
	padding: 28px 16px;
	text-align: center;
	color: #64748b;
	font-size: 13.5px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
}

/* Tab strip — segmented row above the panels. */
.bha-reviews-picker__tabs {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 14px;
}
.bha-reviews-picker__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px; /* overlap the strip border so active tab "lifts" */
	cursor: pointer;
	font: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: #64748b;
}
.bha-reviews-picker__tab:hover {
	color: #0f172a;
}
.bha-reviews-picker__tab--active {
	color: #0f172a;
	border-bottom-color: #2563eb;
	font-weight: 600;
}
.bha-reviews-picker__tab-count {
	display: inline-block;
	min-width: 20px;
	padding: 1px 7px;
	background: #e2e8f0;
	color: #475569;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	text-align: center;
	line-height: 1.5;
}
.bha-reviews-picker__tab--active .bha-reviews-picker__tab-count {
	background: #dbeafe;
	color: #1d4ed8;
}

/* "My listings" tab — review history grouped by listing. */
.bha-reviews-picker__group {
	margin-bottom: 22px;
}
.bha-reviews-picker__group-header {
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e5e7eb;
}
.bha-reviews-picker__group-title {
	font-size: 14.5px;
	font-weight: 600;
	color: #0f172a;
}
.bha-reviews-picker__group-meta {
	margin-top: 3px;
	font-size: 12.5px;
	color: #64748b;
	letter-spacing: 0.02em;
}
.bha-reviews-picker__listing-reviews {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bha-reviews-picker__listing-review {
	padding: 12px 14px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
.bha-reviews-picker__listing-review-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.bha-reviews-picker__listing-review-who {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
}
.bha-reviews-picker__listing-review-stars {
	color: #f59e0b;
	font-size: 14px;
	letter-spacing: 0.5px;
	white-space: nowrap;
}
.bha-reviews-picker__listing-review-date {
	margin-top: 2px;
	font-size: 12px;
	color: #94a3b8;
}
.bha-reviews-picker__listing-review-body {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #1e293b;
	white-space: pre-wrap;
}

/* Reply zone — sits at the bottom of every listing-review card. Either
   renders a Reply button, an existing host-reply block, or a reply form. */
.bha-reviews-picker__reply-zone {
	margin-top: 10px;
}
.bha-reviews-picker__reply-zone:empty {
	display: none;
}
.bha-reviews-picker__reply-button {
	font-size: 13px;
	padding: 6px 14px;
}

/* Inline reply form — composes inside the review card. Mirrors the
   "To leave" form's textarea+actions layout but without the rating row. */
.bha-reviews-picker__reply-form {
	margin-top: 4px;
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
.bha-reviews-picker__reply-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	color: #1e293b;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	resize: vertical;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.bha-reviews-picker__reply-textarea:focus {
	outline: none;
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-reviews-picker__reply-form .bha-reviews-picker__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 10px;
}

/* Host reply, displayed inline once submitted. Indented + tinted to read
   as a response under the parent review. */
.bha-reviews-picker__host-reply {
	margin-top: 4px;
	padding: 10px 12px;
	background: #f0f7fa;            /* Bookably-tinted */
	border-left: 3px solid #1097c5; /* Bookably primary */
	border-radius: 0 6px 6px 0;
}
.bha-reviews-picker__host-reply-label {
	font-size: 12px;
	font-weight: 600;
	color: #0d7fa8;
	margin-bottom: 4px;
}
.bha-reviews-picker__host-reply-body {
	font-size: 13.5px;
	line-height: 1.5;
	color: #1e293b;
	white-space: pre-wrap;
}
.bha-reviews-picker__host-reply-pending {
	margin-top: 6px;
	font-size: 12px;
	color: #92400e;
	font-style: italic;
}

/* Brief flash when a card receives cross-surface focus. */
.bha-reviews-picker__listing-review--focused {
	box-shadow: 0 0 0 2px #1097c5, 0 0 0 6px rgba(16, 151, 197, 0.18);
	transition: box-shadow 0.18s ease;
}

/* AI helper section on the guest review form. Always-optional path —
   chip selection enables the Draft button; everything else continues to
   work whether or not the host engages with AI. */
.bha-reviews-picker__ai-helper {
	margin: 14px 0 4px;
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
.bha-reviews-picker__sub-label {
	margin-top: 8px;
	margin-bottom: 4px;
	font-size: 12px;
	color: #475569;
	font-weight: 500;
}
.bha-reviews-picker__sub-label:first-child {
	margin-top: 0;
}
.bha-reviews-picker__signal-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 4px;
}
.bha-reviews-picker__signal-chip {
	padding: 6px 12px;
	font-size: 13px;
	background: #ffffff;
	color: #334155;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.bha-reviews-picker__signal-chip:hover {
	background: #f1f5f9;
}
.bha-reviews-picker__signal-chip--active {
	background: #1097c5;
	color: #ffffff;
	border-color: #1097c5;
}
.bha-reviews-picker__signal-chip--active:hover {
	background: #0d7fa8;
	border-color: #0d7fa8;
}
.bha-reviews-picker__notes-input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	margin-bottom: 8px;
	font-family: inherit;
	font-size: 13px;
	color: #1e293b;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.bha-reviews-picker__notes-input:focus {
	outline: none;
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-reviews-picker__draft-btn {
	font-size: 13px;
	padding: 6px 14px;
}
.bha-reviews-picker__draft-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* AI draft row inside the reply form — single button, no chips needed
   because the parent review's text + rating provide the context. */
.bha-reviews-picker__reply-ai-row {
	margin-top: 8px;
	display: flex;
	justify-content: flex-start;
}
.bha-reviews-picker__show-more {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 9px 0;
	background: none;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 13px;
	color: #64748b;
	cursor: pointer;
	text-align: center;
	transition: background 0.15s, color 0.15s;
}
.bha-reviews-picker__show-more:hover {
	background: #f8fafc;
	color: #1097c5;
	border-color: #1097c5;
}
.bha-reviews-picker__pending-badge {
	margin-top: 10px;
	padding: 5px 10px;
	background: #f1f5f9;
	color: #64748b;
	border-radius: 6px;
	font-size: 12px;
}
.bha-reviews-picker__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bha-reviews-picker__row {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #ffffff;
	overflow: hidden;
}
.bha-reviews-picker__row--open {
	border-color: #c7d2fe;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.08);
}
.bha-reviews-picker__row--done {
	border-color: #a7f3d0;
	background: #ecfdf5;
	padding: 12px 14px;
}
.bha-reviews-picker__done-label {
	font-size: 14px;
	font-weight: 600;
	color: #059669;
}
.bha-reviews-picker__done-detail {
	margin-top: 2px;
	font-size: 12px;
	color: #047857;
}
.bha-reviews-picker__summary {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: #0f172a;
}
.bha-reviews-picker__summary:hover {
	background: #f8fafc;
}
.bha-reviews-picker__who {
	flex: 1;
	min-width: 0;
}
.bha-reviews-picker__who strong {
	display: block;
	font-size: 14px;
	color: #0f172a;
}
.bha-reviews-picker__listing {
	margin-top: 2px;
	font-size: 12.5px;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bha-reviews-picker__dates {
	font-size: 12.5px;
	color: #475569;
	white-space: nowrap;
}
.bha-reviews-picker__caret {
	font-size: 18px;
	color: #94a3b8;
	transition: transform 0.15s ease;
}
.bha-reviews-picker__form {
	padding: 12px 14px 14px;
	border-top: 1px solid #e5e7eb;
	background: #fafbfc;
}
.bha-reviews-picker__field-label {
	margin-top: 4px;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.bha-reviews-picker__stars {
	display: flex;
	gap: 4px;
	margin-bottom: 14px;
}
.bha-reviews-picker__star {
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	color: #cbd5e1;
	padding: 2px 4px;
}
.bha-reviews-picker__star:hover {
	color: #f59e0b;
}
.bha-reviews-picker__star--filled {
	color: #f59e0b;
}
.bha-reviews-picker__textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font: inherit;
	font-size: 14px;
	color: #0f172a;
	resize: vertical;
	box-sizing: border-box;
}
.bha-reviews-picker__textarea:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.bha-reviews-picker__hint {
	margin-top: 8px;
	font-size: 12px;
	color: #64748b;
	font-style: italic;
}
.bha-reviews-picker__status {
	margin-top: 8px;
	font-size: 13px;
	color: #b91c1c;
	min-height: 18px;
}
.bha-reviews-picker__actions {
	margin-top: 12px;
	display: flex;
	justify-content: flex-end;
}
.bha-reviews-picker__submit {
	padding: 9px 18px;
	background: #2563eb;
	color: #ffffff;
	border: 0;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.bha-reviews-picker__submit:hover:not(:disabled) {
	background: #1d4ed8;
}
.bha-reviews-picker__submit:disabled {
	background: #cbd5e1;
	cursor: not-allowed;
}

/* Action stack — buttons stack vertically, full tile width. Switched
   from horizontal flex-row 2026-05-07 once Surface #3a Feature/Promote
   added a fourth inline button (Edit / Calendar / Feature / Preview)
   and 4 buttons + ⋮ overflow no longer fit comfortably in a tile.
   margin-top: auto anchors the stack at the BOTTOM of the tile body so
   tiles in a grid row align even when one has a sync-warning + expires-
   soon chip and another doesn't. position:relative for the overflow
   menu popup anchor.
   The ⋮ overflow keeps its compact width via align-self: flex-end
   (overridden below) so it doesn't stretch to full row width. */
.bha-listing-tile__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
}

/* 9.7.B.1 — action wrap holds the actions row + inline zone. On desktop
   margin-top:auto pushes both to the bottom of the tile body so action
   stacks align across the multi-column grid. On mobile (single column)
   that alignment is moot, and the auto-margin leaves a Continue button
   floating in empty space below an otherwise short tile. Use a small
   natural gap on mobile instead. */
.bha-listing-tile__action-wrap {
	margin-top: auto;
}
@media (max-width: 768px) {
	.bha-listing-tile__action-wrap {
		margin-top: 12px;
	}
	/* Hide the invisible placeholder buttons that pad the action stack
	   to a fixed 4-slot count for desktop grid alignment. On mobile
	   each tile is full-width and stacks vertically, so the slot-count
	   parity isn't doing anything useful. */
	.bha-listing-tile__action--placeholder {
		display: none;
	}
	/* Same reasoning for the warning-pill placeholders — desktop reserves
	   their 22px slot via visibility:hidden so all tiles in a grid row
	   align even when only some have warnings. On mobile single-column,
	   each tile is alone in its row; the reserved slot is just dead
	   vertical space between the status pill and the actions. */
	.bha-listing-tile__stale-sync--empty,
	.bha-listing-tile__expires-soon--empty {
		display: none;
	}
	/* And drop the 2-line title min-height — that reserve keeps warning
	   pills at the same Y across tiles with 1-line vs 2-line titles,
	   which only matters in a multi-column grid. */
	.bha-listing-tile__title {
		min-height: 0;
	}
}

.bha-listing-tile__actions .bha-overflow-menu__btn {
	align-self: flex-end;
	margin-left: 0;
}

/* Listing-tile button sizing. Each button is .bha-btn--block so it
   stretches to the column's full width — no per-button width math. */
.bha-listing-tile__action--continue,
.bha-listing-tile__action--edit,
.bha-listing-tile__action--preview,
.bha-listing-tile__action--calendar,
.bha-listing-tile__action--feature {
	padding: 8px 12px;
	font-size: 13px;
}

@media (max-width: 600px) {
	.bha-listing-tiles__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Bookings list surface (Phase 9.5b — second host management surface)

   Row list (date-dominated; no photo focus). Filter chips above the list.
   Each row: status pill + listing thumb + title + dates + guest +
   total + WC order block (payment + payout pills + refund detail).
   ========================================================================== */

.bha-bookings {
	margin: 8px 0 12px;
	max-width: 720px;
}

/* 9.7.B.1 — mobile side breathing room (matches listings). Without
   this the booking row hugs the phone screen edges with zero gutter. */
@media (max-width: 768px) {
	.bha-bookings {
		margin: 16px 12px;
	}
}

.bha-bookings__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.bha-bookings__filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #ffffff;
	color: #4b5563;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bha-bookings__filter-chip:hover {
	background: #f3f4f6;
	border-color: #d1d5db;
}
.bha-bookings__filter-chip--active {
	background: #1e293b;
	color: #ffffff;
	border-color: #1e293b;
}
.bha-bookings__filter-chip--active:hover {
	background: #1e293b;
	border-color: #1e293b;
}
.bha-bookings__filter-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 9px;
	background: #ef4444;
	color: #ffffff;
	font-size: 10px; font-weight: 700; line-height: 1;
}
.bha-bookings__filter-chip--active .bha-bookings__filter-badge {
	background: #ffffff;
	color: #1e293b;
}

.bha-bookings__empty {
	padding: 24px 16px;
	text-align: center;
	color: #6b7280;
	font-size: 14px;
	background: #f9fafb;
	border: 1px dashed #e5e7eb;
	border-radius: 12px;
}

.bha-bookings__list {
	display: flex;
	flex-direction: column;
	/* Larger gap accommodates the round toggle button that overlaps each
	   row's bottom border by ~16px. Without this the next row crashes into
	   the button. */
	gap: 24px;
}

.bha-booking-row {
	position: relative; /* anchor for the absolute-positioned toggle */
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #ffffff;
	transition: box-shadow 0.15s, border-color 0.15s;
}
.bha-booking-row:hover {
	border-color: #d1d5db;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* Always-visible header section. */
.bha-booking-row__summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Collapsible details — hidden by default, revealed by the toggle button.
   We use display:none rather than max-height transitions because the
   content is variable-height (long questionnaires, big review lists)
   and a smooth transition risks visual glitches. */
.bha-booking-row__details {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 6px;
}
.bha-booking-row--collapsed .bha-booking-row__details {
	display: none;
}

/* Round toggle button — sits centered on the row's bottom border, half
   above and half below so it visually anchors the expand affordance. */
.bha-booking-row__toggle {
	position: absolute;
	left: 50%;
	bottom: -16px;
	transform: translateX(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	color: #6b7280;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	z-index: 1; /* keep above the row border */
}
.bha-booking-row__toggle:hover {
	background: #f9fafb;
	border-color: #d1d5db;
	color: #1e293b;
}
.bha-booking-row__toggle:focus-visible {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
}
.bha-booking-row__toggle svg {
	transition: transform 0.2s ease;
}
.bha-booking-row--expanded .bha-booking-row__toggle svg {
	transform: rotate(180deg);
}

/* 9.7.B.1 — bump the toggle to a 44px touch target on mobile (matches
   Apple HIG / Material Design minimum). When collapsed, the toggle
   still straddles the row's bottom border (-22px offset → upper 22px
   overlaps the row's price line, which has no actionable element).
   When EXPANDED the row's bottom is the Cancel/Message action button
   row — the overlap becomes a fat-finger trap on Cancel. So push the
   toggle fully below the row in expanded state, and give the row a
   matching margin-bottom so the next row stays clear. */
@media (max-width: 768px) {
	.bha-booking-row__toggle {
		width: 44px;
		height: 44px;
		bottom: -22px;
	}
	.bha-booking-row__toggle svg {
		width: 18px;
		height: 18px;
	}
	.bha-booking-row--expanded .bha-booking-row__toggle {
		bottom: -50px;
	}
	.bha-booking-row--expanded {
		margin-bottom: 32px;
	}
}

.bha-booking-row__top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.bha-booking-row__pill {
	display: inline-flex;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	flex-shrink: 0;
}
.bha-booking-row__pill--amber  { background: #fde68a; color: #78350f; }
.bha-booking-row__pill--green  { background: #d1fae5; color: #065f46; }
.bha-booking-row__pill--gray   { background: #f3f4f6; color: #4b5563; }
.bha-booking-row__pill--red    { background: #fee2e2; color: #991b1b; }
.bha-booking-row__pill--orange { background: #fef3c7; color: #92400e; }

.bha-booking-row__listing {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}
.bha-booking-row__listing-thumb {
	width: 32px; height: 32px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
}
.bha-booking-row__listing-title {
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.bha-booking-row__dates {
	font-size: 13px;
	color: #4b5563;
	flex-shrink: 0;
}

.bha-booking-row__mid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	color: #4b5563;
	font-size: 13px;
}
.bha-booking-row__guest {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.bha-booking-row__guest-avatar {
	width: 22px; height: 22px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.bha-booking-row__guest-name {
	font-weight: 600;
	color: #1e293b;
}
/* Phase 9.5 Messages M.4 — cross-surface link variant when the guest
   has a resolvable user_id + listing pair (clickable → mounts inbox
   filtered to the matching thread). */
.bha-booking-row__guest-name--link {
	background: transparent;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: #1097c5;
	cursor: pointer;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}
.bha-booking-row__guest-name--link:hover {
	color: #0d7fa8;
	text-decoration-style: solid;
}
.bha-booking-row__party {
	color: #6b7280;
}
.bha-booking-row__total {
	font-weight: 700;
	color: #1e293b;
	font-size: 14px;
}

.bha-booking-row__order {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding-top: 8px;
	border-top: 1px dashed #e5e7eb;
	font-size: 12px;
	color: #6b7280;
}
.bha-booking-row__order-no {
	font-weight: 600;
	color: #4b5563;
}
.bha-booking-row__order-pill {
	display: inline-flex;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
}
.bha-booking-row__order-pill--payment-paid               { background: #d1fae5; color: #065f46; }
.bha-booking-row__order-pill--payment-partially_refunded { background: #fde68a; color: #78350f; }
.bha-booking-row__order-pill--payment-refunded           { background: #fee2e2; color: #991b1b; }
.bha-booking-row__order-pill--payment-failed             { background: #fee2e2; color: #991b1b; }
.bha-booking-row__order-pill--payment-pending            { background: #f3f4f6; color: #4b5563; }
.bha-booking-row__order-pill--payout-paid_out            { background: #d1fae5; color: #065f46; }
.bha-booking-row__order-pill--payout-pending_payout      { background: #fef3c7; color: #92400e; }
.bha-booking-row__order-pill--payout-unavailable         { background: #f3f4f6; color: #6b7280; }
.bha-booking-row__order-refund {
	color: #991b1b;
	font-weight: 600;
}

/* Booking number badge — sits next to the status pill on awaiting-approval
   and other rows so the host has a stable reference for each booking. */
.bha-booking-row__number {
	font-size: 13px;
	color: #4b5563;
	font-weight: 700;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: 0.02em;
}

/* "est." pill on the row total — flags totals derived from booking meta
   (pre-payment) vs definitive WC order totals. */
.bha-booking-row__est {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: #f3f4f6;
	color: #6b7280;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	vertical-align: middle;
	cursor: help;
}

/* Pricing breakdown table — per-row line-item view. */
.bha-booking-row__pricing {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 0;
	border-top: 1px dashed #e5e7eb;
}
.bha-booking-row__pricing-heading {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7280;
	margin-bottom: 2px;
}
.bha-booking-row__pricing-table {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bha-booking-row__pricing-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 12px;
	color: #4b5563;
	line-height: 1.5;
}
.bha-booking-row__pricing-line--indented .bha-booking-row__pricing-label {
	padding-left: 12px;
	color: #9ca3af;
}
.bha-booking-row__pricing-line--indented .bha-booking-row__pricing-value {
	color: #9ca3af;
}
.bha-booking-row__pricing-line--total {
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px solid #e5e7eb;
	font-size: 13px;
	font-weight: 700;
	color: #1e293b;
}
.bha-booking-row__pricing-line--total .bha-booking-row__pricing-label,
.bha-booking-row__pricing-line--total .bha-booking-row__pricing-value {
	color: #1e293b;
}
.bha-booking-row__pricing-label {
	flex: 1 1 auto;
	min-width: 0;
}
.bha-booking-row__pricing-value {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

/* Guest reviews badge — rating + collapsible review tiles.
   Mirrors bookably-customisations bilateral_reviews .bkb-br-host-badge
   so a host using both surfaces (HP booking page + this BHA bookings
   list) sees consistent presentation. Same colour palette + structure;
   reproduced here so host-agent doesn't depend on the customisations
   plugin's CSS being loaded. */
.bha-guest-reviews {
	margin: 8px 0 0;
	padding: 8px 12px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	font-size: 13px;
}
.bha-guest-reviews__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.bha-guest-reviews__label {
	color: #4b5563;
}
.bha-guest-reviews__label strong {
	color: #111827;
}
.bha-guest-reviews__value {
	font-weight: 600;
	color: #111827;
}
.bha-guest-reviews__count {
	color: #6b7280;
}
.bha-guest-reviews__none {
	color: #6b7280;
	font-style: italic;
}
.bha-guest-reviews__toggle {
	margin-left: auto;
	background: none;
	border: none;
	color: #1097c5;
	cursor: pointer;
	font-size: 13px;
	padding: 2px 6px;
	text-decoration: underline;
}
.bha-guest-reviews__toggle:hover {
	color: #0d6a8a;
}
.bha-guest-reviews__panel {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #d1d5db;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bha-guest-reviews__panel[hidden] {
	display: none;
}
.bha-guest-reviews__rest {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bha-guest-reviews__rest[hidden] {
	display: none;
}
.bha-guest-reviews__tile {
	padding: 10px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
}
.bha-guest-reviews__tile-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}
.bha-guest-reviews__tile-host {
	color: #4b5563;
	font-size: 13px;
}
.bha-guest-reviews__tile-host strong {
	color: #111827;
}
.bha-guest-reviews__tile-meta {
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 6px;
}
.bha-guest-reviews__tile-listing {
	margin-right: 8px;
	color: #4b5563;
}
.bha-guest-reviews__tile-body {
	font-size: 13px;
	color: #374151;
	line-height: 1.5;
	white-space: pre-wrap;
}
.bha-guest-reviews__show-all {
	align-self: flex-start;
	background: none;
	border: 1px solid #d1d5db;
	color: #1097c5;
	padding: 6px 12px;
	font-size: 13px;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.bha-guest-reviews__show-all:hover {
	background: #f3f4f6;
}

/* Star strip — shared across guest-reviews badge + per-tile rating. */
.bha-stars {
	color: #d0d0d0;
	font-size: 14px;
	letter-spacing: 1px;
	white-space: nowrap;
}
.bha-star {
	color: #d0d0d0;
}
.bha-star--on {
	color: #f5b418;
}

/* Guest questionnaire (custom booking attributes filled in at booking).
   Stacked Q&A — long question on its own line above a darker, indented
   answer. Lighter than a definition list but more readable than a flat
   "Label: value" string for long-form questions. */
.bha-booking-row__attrs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 0;
	border-top: 1px dashed #e5e7eb;
}
.bha-booking-row__attrs-heading {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7280;
	margin-bottom: 2px;
}
.bha-booking-row__attr {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 10px;
	border-left: 2px solid #e5e7eb;
}
.bha-booking-row__attr-question {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
}
.bha-booking-row__attr-answer {
	font-size: 13px;
	color: #1e293b;
	font-weight: 600;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Accept / Decline action panel (awaiting_approval rows only). */
.bha-booking-row__actions {
	padding-top: 8px;
	border-top: 1px dashed #e5e7eb;
}
.bha-booking-row__action-error {
	margin-bottom: 6px;
	padding: 6px 10px;
	background: #fee2e2;
	border-radius: 6px;
	color: #991b1b;
	font-size: 12px;
}
.bha-booking-row__action-btns {
	display: flex;
	gap: 8px;
}
.bha-booking-row__action-btn {
	flex: 1 1 auto;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.bha-booking-row__action-btn:active { transform: translateY(1px); }
.bha-booking-row__action-btn--accept {
	background: #10b981;
	color: #ffffff;
	border-color: #10b981;
}
.bha-booking-row__action-btn--accept:hover {
	background: #059669;
	border-color: #059669;
}
.bha-booking-row__action-btn--decline {
	background: #ffffff;
	color: #991b1b;
	border-color: #ef4444;
}
.bha-booking-row__action-btn--decline:hover {
	background: #fef2f2;
}

/* Cancel — destructive but slightly softer treatment than decline.
   Cancel applies to confirmed/unpaid bookings (host-initiated revocation
   of an already-accepted booking) so the action is heavier; we use a
   filled red button to make the irreversibility visible. */
.bha-booking-row__action-btn--cancel {
	background: #ffffff;
	color: #991b1b;
	border-color: #ef4444;
}
.bha-booking-row__action-btn--cancel:hover {
	background: #fef2f2;
}

/* Sub-line on the confirm form — softer explanatory text under the
   primary "Cancel this booking?" prompt. */
.bha-booking-row__confirm-sub {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
}

/* Cancel-confirm submit button — matches decline's destructive treatment
   so the host's "are you sure?" choice carries clear visual weight. */
.bha-booking-row__confirm-submit--cancel {
	background: #ef4444;
	color: #ffffff;
	border-color: #ef4444;
}
.bha-booking-row__confirm-submit--cancel:hover:not(:disabled) {
	background: #dc2626;
	border-color: #dc2626;
}

/* Inline confirm form (Accept "Are you sure?" / Decline reason textarea). */
.bha-booking-row__confirm {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
.bha-booking-row__confirm-msg {
	font-size: 13px;
	color: #1e293b;
	font-weight: 600;
}
.bha-booking-row__confirm-label {
	font-size: 12px;
	color: #4b5563;
	font-weight: 600;
}
.bha-booking-row__confirm-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	resize: vertical;
	min-height: 60px;
}
.bha-booking-row__confirm-textarea:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.bha-booking-row__confirm-textarea:disabled {
	background: #f3f4f6;
	color: #6b7280;
}
.bha-booking-row__confirm-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.bha-booking-row__confirm-cancel,
.bha-booking-row__confirm-submit {
	padding: 7px 14px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.bha-booking-row__confirm-cancel {
	background: #ffffff;
	color: #4b5563;
	border-color: #d1d5db;
}
.bha-booking-row__confirm-cancel:hover { background: #f3f4f6; }
.bha-booking-row__confirm-submit:active { transform: translateY(1px); }
.bha-booking-row__confirm-submit:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}
.bha-booking-row__confirm-submit--accept {
	background: #10b981;
	color: #ffffff;
	border-color: #10b981;
}
.bha-booking-row__confirm-submit--accept:hover:not(:disabled) {
	background: #059669;
	border-color: #059669;
}
.bha-booking-row__confirm-submit--decline {
	background: #ef4444;
	color: #ffffff;
	border-color: #ef4444;
}
.bha-booking-row__confirm-submit--decline:hover:not(:disabled) {
	background: #dc2626;
	border-color: #dc2626;
}

@media (max-width: 600px) {
	.bha-booking-row__top,
	.bha-booking-row__mid {
		flex-direction: column;
		align-items: flex-start;
	}
	.bha-booking-row__listing-title {
		white-space: normal;
	}
	.bha-booking-row__action-btns {
		flex-direction: column;
	}
}

/* ====================================================================== */
/* Phase 9.5 Messages — Bha.Inbox surface                                 */
/* ====================================================================== */

.bha-inbox {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px;
	margin: 12px 0;
	max-width: 720px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* 9.7.B.1 — mobile side breathing room (matches listings/bookings/home).
   Also hide the in-surface "Messages" title — the sheet header carries
   it (SURFACE_TO_TITLE in mobile-sheet.js maps 'inbox' → 'Messages').
   Pure duplication on mobile; the title was originally needed to anchor
   the corner × close button (also hidden on mobile per the
   .bha-surface-close media block in chat-base.css). */
@media (max-width: 768px) {
	.bha-inbox {
		margin: 16px 12px;
	}
	.bha-inbox__list-title {
		display: none;
	}
}
.bha-inbox__loading,
.bha-inbox__error,
.bha-inbox__empty {
	padding: 24px 12px;
	text-align: center;
	color: #6b7280;
	font-size: 13px;
}
.bha-inbox__error { color: #b91c1c; }

/* List view */
.bha-inbox__list-header {
	display: flex; align-items: baseline; gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 12px;
}
.bha-inbox__list-title {
	margin: 0; font-size: 16px; font-weight: 700; color: #111827;
}
.bha-inbox__list-subtitle {
	font-size: 12px; color: #6b7280;
}
.bha-inbox__list {
	display: flex; flex-direction: column; gap: 6px;
}
.bha-inbox__row {
	display: flex; align-items: stretch; gap: 12px;
	width: 100%;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	font-family: inherit; text-align: left;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.bha-inbox__row:hover { background: #f0f7fa; border-color: #1097c5; }
.bha-inbox__row--unread { background: #f0f7fa; border-color: #1097c5; }
.bha-inbox__row--unread:hover { background: #e1eef3; }
.bha-inbox__row-hero {
	flex: 0 0 56px; height: 56px;
	background-size: cover; background-position: center;
	background-color: #f3f4f6;
	border-radius: 8px;
}
.bha-inbox__row-hero--placeholder {
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; color: #9ca3af;
}
.bha-inbox__row-body {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: 4px;
}
.bha-inbox__row-title {
	font-size: 13px; color: #111827;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bha-inbox__row-snippet {
	font-size: 12px; color: #4b5563;
	overflow: hidden; text-overflow: ellipsis;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bha-inbox__row-listing {
	font-size: 12px;
	color: #6b7280;
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bha-inbox__listing-badge {
	font-size: 11px;
	color: #1097c5;
	background: #f0f7fa;
	border-radius: 4px;
	padding: 1px 6px;
}
.bha-inbox__listing-badge--none {
	color: #6b7280;
	background: #f3f4f6;
}
.bha-inbox__row-meta {
	display: flex; align-items: center; gap: 8px;
	font-size: 11px; color: #6b7280;
}
.bha-inbox__row-timestamp { font-variant-numeric: tabular-nums; }
.bha-inbox__unread-badge {
	display: inline-flex; align-items: center;
	padding: 1px 7px;
	background: #1097c5; color: #fff;
	border-radius: 999px;
	font-size: 10px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Detail view */
.bha-inbox__back {
	background: transparent; border: none;
	padding: 4px 0; margin-bottom: 8px;
	color: #1097c5; font-size: 12px; font-weight: 600;
	font-family: inherit; cursor: pointer;
}
.bha-inbox__back:hover { color: #0d7fa8; text-decoration: underline; }
.bha-inbox__detail-header {
	display: flex; align-items: center; gap: 12px;
	padding: 12px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	margin-bottom: 12px;
}
.bha-inbox__detail-hero {
	flex: 0 0 64px; height: 64px;
	background-size: cover; background-position: center;
	background-color: #f3f4f6;
	border-radius: 8px;
}
.bha-inbox__detail-hero--placeholder {
	display: flex; align-items: center; justify-content: center;
	font-size: 28px; color: #9ca3af;
}
.bha-inbox__detail-info {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: 2px;
}
.bha-inbox__detail-line1 { font-size: 14px; color: #111827; }
.bha-inbox__detail-line2 { font-size: 13px; color: #4b5563; }
.bha-inbox__detail-context {
	margin-top: 4px;
	font-size: 11px; color: #6b7280;
	font-style: italic;
}
.bha-inbox__detail-listing-link {
	flex: 0 0 auto;
	color: #1097c5; font-size: 12px; font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}
.bha-inbox__detail-listing-link:hover { color: #0d7fa8; text-decoration: underline; }

.bha-inbox__bubbles {
	display: flex; flex-direction: column; gap: 12px;
	max-height: 480px; overflow-y: auto;
	/* Right padding + stable gutter so the scrollbar never overlaps
	   the right-aligned "mine" bubbles. */
	padding: 4px 10px 4px 4px;
	margin-bottom: 12px;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
}
.bha-inbox__bubbles::-webkit-scrollbar {
	width: 8px;
}
.bha-inbox__bubbles::-webkit-scrollbar-track {
	background: transparent;
}
.bha-inbox__bubbles::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 4px;
}
.bha-inbox__bubbles::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* Per-message wrapper handles left/right alignment + stacks the header
   (sender + age) above the bubble. Sender / timestamp sit OUTSIDE the
   bubble so they read against the page background. */
.bha-inbox__message {
	max-width: 78%;
	display: flex; flex-direction: column; gap: 2px;
}
.bha-inbox__message--mine   { align-self: flex-end;   align-items: flex-end; }
.bha-inbox__message--theirs { align-self: flex-start; align-items: flex-start; }

.bha-inbox__message-header {
	display: inline-flex; align-items: center; gap: 0;
	font-size: 11px; color: #6b7280;
	padding: 0 4px;
}
.bha-inbox__sender     { font-weight: 600; color: #374151; }
.bha-inbox__header-sep { margin: 0 4px; opacity: 0.6; }
.bha-inbox__age        { font-variant-numeric: tabular-nums; }

.bha-inbox__bubble {
	padding: 8px 12px;
	border-radius: 14px;
}
.bha-inbox__bubble--mine {
	background: #1097c5; color: #fff;
	border-bottom-right-radius: 4px;
}
.bha-inbox__bubble--theirs {
	background: #f3f4f6; color: #111827;
	border-bottom-left-radius: 4px;
}
.bha-inbox__bubble-text {
	white-space: pre-wrap;
	word-wrap: break-word;
	font-size: 13px; line-height: 1.45;
}

.bha-inbox__composer {
	display: flex; flex-direction: column; gap: 6px;
	padding: 10px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
}
.bha-inbox__composer-input {
	width: 100%; box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: inherit; font-size: 13px; line-height: 1.4;
	resize: vertical; min-height: 48px;
}
.bha-inbox__composer-input:focus {
	outline: none;
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-inbox__composer-error {
	color: #dc2626; font-size: 12px;
}
.bha-inbox__composer-actions {
	display: flex; justify-content: flex-end;
}
.bha-inbox__composer-send {
	padding: 7px 18px;
	background: #1097c5; color: #fff;
	border: none; border-radius: 8px;
	font-family: inherit; font-size: 13px; font-weight: 600;
	cursor: pointer; transition: background 0.15s;
}
.bha-inbox__composer-send:hover:not(:disabled) { background: #0d7fa8; }
.bha-inbox__composer-send:disabled { background: #cbd5e1; cursor: not-allowed; }

@media (max-width: 600px) {
	.bha-inbox__detail-header { flex-wrap: wrap; }
	.bha-inbox__detail-listing-link { flex: 1 1 100%; text-align: right; }
}

/* ==========================================================================
   Per-listing Calendar surface (Phase 9.5 — Surface #2 — C.4)

   Day-grid view of one listing's bookings/blocks/price-overrides. Mounted
   inline below the agent's reply by Bha.Calendar.appendCalendar(payload).
   ========================================================================== */

.bha-calendar {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px;
	margin: 12px 0;
	max-width: 720px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bha-calendar__header {
	display: flex; flex-direction: column; gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 12px;
}

.bha-calendar__title-row {
	display: flex; align-items: center; gap: 10px;
}

.bha-calendar__hero {
	flex: 0 0 36px; height: 36px;
	background-size: cover; background-position: center;
	background-color: #f3f4f6;
	border-radius: 6px;
}

.bha-calendar__listing-name {
	flex: 1 1 auto; min-width: 0;
	font-size: 14px; font-weight: 600; color: #111827;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bha-calendar__nav {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
	position: relative; /* anchor for the month-picker popover */
}

/* Calendar month-nav arrow buttons — square 36×36 with the chevron
   glyph. Visual treatment comes from .bha-btn--secondary; this rule
   only sets the icon-button shape. */
.bha-calendar__nav-btn {
	flex: 0 0 36px;
	height: 36px;
	padding: 0;
	font-size: 16px;
}
.bha-calendar__nav-btn--refresh {
	flex: 0 0 32px;
	height: 32px;
	font-size: 18px;
	margin-left: 6px;
}
.bha-calendar__nav-btn--refresh.is-spinning {
	animation: bha-calendar-spin 0.7s linear infinite;
}
@keyframes bha-calendar-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.bha-calendar__month-label {
	flex: 1 1 auto; text-align: center;
	font-size: 15px; font-weight: 600; color: #111827;
	background: transparent;
	border: 0;
	padding: 6px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.12s;
}
.bha-calendar__month-label:hover {
	background: #f0f7fa;
}

/* Month picker popover — appears below the nav row when month label
   is clicked. Hosts can jump straight to any month/year without
   stepping through the prev/next arrows. */
.bha-calendar__month-picker {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	width: 240px;
	background: #fff;
	border: 1px solid #a8d6e6;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(10, 74, 94, 0.18);
	padding: 10px;
}
.bha-calendar__month-picker-year {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 8px;
}
.bha-calendar__month-picker-year-label {
	font-size: 14px; font-weight: 700; color: #0a4a5e;
}
.bha-calendar__month-picker-year-btn {
	width: 28px; height: 28px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	color: #1097c5;
	font-size: 14px; line-height: 1;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
}
.bha-calendar__month-picker-year-btn:hover {
	background: #f0f7fa;
	border-color: #1097c5;
}
.bha-calendar__month-picker-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}
.bha-calendar__month-picker-month {
	padding: 8px 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: #374151;
	font-size: 12px; font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bha-calendar__month-picker-month:hover {
	background: #f0f7fa;
	border-color: #a8d6e6;
	color: #0a4a5e;
}
.bha-calendar__month-picker-month.is-current {
	background: #1097c5;
	color: #fff;
	border-color: #0d7fa8;
}
.bha-calendar__month-picker-month.is-current:hover {
	background: #0d7fa8;
}

/* Grid: 7 columns, day-of-week headers + day cells. */
.bha-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	user-select: none; /* drag-to-select doesn't double as text-select */
}

.bha-calendar__dow {
	padding: 6px 0;
	text-align: center;
	font-size: 11px; font-weight: 700; color: #6b7280;
	text-transform: uppercase; letter-spacing: 0.04em;
}

.bha-calendar__day {
	position: relative;
	padding: 0;
	min-height: 56px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
}
.bha-calendar__day:hover { background: #f0f7fa; border-color: #a8d6e6; }

.bha-calendar__day-num {
	padding: 4px 6px;
	font-size: 12px; font-weight: 600; color: #374151;
}

/* Other-month cells: muted via lighter background + lighter day-num
   only — NOT via cell-level opacity, because opacity propagates to
   children and would dim a pill whose booking wraps from the current
   month into the visible next-month days (e.g. May 31 → Jun 1-2). */
.bha-calendar__day--other { background: #fafafa; border-color: #f3f4f6; }
.bha-calendar__day--other .bha-calendar__day-num { color: #d1d5db; }

/* Past dates: dimmed regardless of underlying status (still shows
   bookings/blocks at reduced opacity for context). The button is also
   `disabled` in JS so click/mousedown can't fire — no visible affordance. */
.bha-calendar__day--past {
	opacity: 0.45;
	cursor: not-allowed;
}
.bha-calendar__day--past:hover {
	opacity: 0.45;
}

.bha-calendar__day--today {
	border-color: #1097c5;
	box-shadow: inset 0 0 0 1px #1097c5;
}
.bha-calendar__day--today .bha-calendar__day-num {
	color: #1097c5;
}

/* Status — bookings (booked/pending) render as a child .bha-calendar__day-pill
   spanning the booked range; host-blocks and imported feed blocks render
   as a full-cell background fill (state, not event). The cell's --status
   class drives both: cursor + day-num colour for all four; background
   fill only for blocked/imported. */

/* Booking-status day-num colours — all three booking states share the
   deep Bookably teal text, since all three pills now sit in the teal
   family (confirmed = saturated; pending/unpaid = lighter, with a
   pattern on unpaid). */
.bha-calendar__day--booked    { cursor: default; }
.bha-calendar__day--booked    .bha-calendar__day-num { color: #0a4a5e; }
.bha-calendar__day--pending   { cursor: default; }
.bha-calendar__day--pending   .bha-calendar__day-num { color: #0a4a5e; }
.bha-calendar__day--unpaid    { cursor: default; }
.bha-calendar__day--unpaid    .bha-calendar__day-num { color: #0a4a5e; }
.bha-calendar__day--cancelled { cursor: default; }
.bha-calendar__day--cancelled .bha-calendar__day-num { color: #94a3b8; text-decoration: line-through; }

.bha-calendar__day--blocked {
	background: #e2e8f0;
	border-color: #cbd5e1;
}
.bha-calendar__day--blocked:hover { background: #cbd5e1; border-color: #94a3b8; }
.bha-calendar__day--blocked .bha-calendar__day-num { color: #475569; }

.bha-calendar__day--imported {
	background: #ede9fe;
	border-color: #c4b5fd;
}
.bha-calendar__day--imported:hover { background: #ddd6fe; border-color: #a78bfa; }
.bha-calendar__day--imported .bha-calendar__day-num { color: #5b21b6; }

/* Pill — vertically centred horizontal bar in the cell. Default is
   a flat-ended segment that bleeds 3px past the cell's outer edge on
   each side, bridging the 4px grid gap + 1px borders so adjacent
   middle/end pills visually connect into one continuous bar across
   the row. Edge modifiers carve out the rounded ends. */
.bha-calendar__day-pill {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* Bleed 5px past the cell's padding edge on flat sides so adjacent
	   segments OVERLAP by ~4px. -3px made them butt at exactly the same
	   pixel and the browser drew a sub-pixel seam; -5px guarantees they
	   overlap and read as one continuous pill. */
	left: -5px;
	right: -5px;
	height: 24px;
	z-index: 1;
	pointer-events: none;
	/* The vertical gradient below carries the 3D bevel. NO inset bands
	   (they read as hard edges) and NO outer drop shadow (it blurs
	   sideways and creates a vertical seam between adjacent segments). */
}
/* Start: keep the left rounded end inside the cell (no bleed). */
.bha-calendar__day-pill--start {
	left: 50%;
	border-top-left-radius: 9999px;
	border-bottom-left-radius: 9999px;
}
/* End: keep the right rounded end inside the cell (no bleed). */
.bha-calendar__day-pill--end {
	right: 50%;
	border-top-right-radius: 9999px;
	border-bottom-right-radius: 9999px;
}
/* Single-day pill: rounded both ends, contained well inside the cell. */
.bha-calendar__day-pill--single {
	left: 30%;
	right: 30%;
	border-radius: 9999px;
}

/* Booking-id label rendered inside the pill on the START cell only.
   Sits absolutely so it can overflow the pill bounds and extend over
   adjacent middle/end cells of the same booking — those cells' pill
   segments are the same colour so the overflow looks continuous.
   Pointer-events: none so click still drills into the booking. */
.bha-calendar__day-pill { overflow: visible; }
.bha-calendar__day-pill__label {
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
	z-index: 2;
	pointer-events: none;
	letter-spacing: 0.01em;
}
.bha-calendar__day-pill__label svg {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
}
/* Confirmed = dark teal pill → use white label for contrast.
   Pending + Unpaid = lighter pills → use deep teal label. */
.bha-calendar__day-pill--booked  .bha-calendar__day-pill__label { color: #ffffff; }
.bha-calendar__day-pill--unpaid  .bha-calendar__day-pill__label { color: #0a4a5e; }
.bha-calendar__day-pill--pending .bha-calendar__day-pill__label { color: #0a4a5e; }
/* All three booking pills share the Bookably teal family. Distinction
   is by shade only — darker = more committed:
     - booked  : full-strength teal           — the booking is final.
     - unpaid  : medium teal                  — guest action pending.
     - pending : lightest teal                — host action pending. */
.bha-calendar__day-pill--booked  { background: linear-gradient(to bottom, #7fc5dc 0%, #1097c5 100%); }
.bha-calendar__day-pill--unpaid  { background: linear-gradient(to bottom, #a8d6e6 0%, #7fc5dc 100%); }
.bha-calendar__day-pill--pending { background: linear-gradient(to bottom, #dbeef5 0%, #a8d6e6 100%); }
.bha-calendar__day-pill--cancelled {
	background: linear-gradient(to bottom, #e2e8f0 0%, #94a3b8 100%);
	opacity: 0.65;
}
/* Legacy class names kept for any leftover usage; harmless duplicates. */
.bha-calendar__day-pill--blocked  { background: linear-gradient(to bottom, #cbd5e1 0%, #64748b 100%); }
.bha-calendar__day-pill--imported { background: linear-gradient(to bottom, #c4b5fd 0%, #8b5cf6 100%); }

/* Selected — overrides any status colour with brand teal. */
.bha-calendar__day--selected {
	background: #1097c5 !important;
	border-color: #0d7fa8 !important;
}
.bha-calendar__day--selected .bha-calendar__day-num { color: #fff !important; }
.bha-calendar__day--selected:hover { background: #0d7fa8 !important; }

/* Per-day price text — bottom-right corner. Light gray for the base
   price (visible on every cell so the host knows the default rate);
   deep teal for override prices (paired with the $ pip in the
   top-right corner). z-index sits above the pill background so the
   text stays readable over a coloured pill. */
.bha-calendar__day-price {
	position: absolute;
	bottom: 3px;
	right: 6px;
	font-size: 10px;
	font-weight: 500;
	color: #94a3b8;
	z-index: 2;
	pointer-events: none;
	letter-spacing: -0.01em;
}
.bha-calendar__day-price--override {
	color: #0a4a5e;
	font-weight: 600;
}
.bha-calendar__day--selected .bha-calendar__day-price { color: #fff; }

/* Price-override badge — top-right corner, overlay any status colour. */
.bha-calendar__price-pip {
	position: absolute;
	top: 4px; right: 4px;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #fff;
	color: #1097c5;
	font-size: 10px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid #1097c5;
}
.bha-calendar__day--selected .bha-calendar__price-pip {
	background: #fff; color: #1097c5; border-color: #fff;
}

/* Action panel — appears below grid when selection is non-empty. */
.bha-calendar__actions {
	margin-top: 14px;
	padding: 12px;
	background: #f0f7fa;
	border: 1px solid #a8d6e6;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.bha-calendar__action-summary {
	font-size: 13px; font-weight: 600; color: #0a4a5e;
}
.bha-calendar__action-buttons {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.bha-calendar__action-error {
	flex: 1 1 100%;
	margin-top: 6px;
	font-size: 12px;
	color: #dc2626;
}

/* Set-price modal. */
.bha-calendar__modal {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.bha-calendar__modal-backdrop {
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(15, 23, 42, 0.5);
}
.bha-calendar__modal-panel {
	position: relative;
	max-width: 380px; width: 100%;
	padding: 20px 24px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.bha-calendar__modal-title {
	margin: 0 0 6px 0;
	font-size: 15px; font-weight: 700; color: #111827;
}
.bha-calendar__modal-hint {
	margin: 0 0 14px 0;
	font-size: 12px; color: #6b7280;
}
.bha-calendar__modal-input {
	width: 100%; box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: inherit; font-size: 14px;
}
.bha-calendar__modal-input:focus {
	outline: none;
	border-color: #1097c5;
	box-shadow: 0 0 0 3px rgba(16, 151, 197, 0.15);
}
.bha-calendar__modal-error {
	margin-top: 8px;
	font-size: 12px; color: #dc2626;
}
.bha-calendar__modal-buttons {
	display: flex; justify-content: flex-end; gap: 8px;
	margin-top: 16px;
}

/* Legend — small swatch + label rows below the grid. */
.bha-calendar__legend {
	margin-top: 10px;
	display: flex; flex-wrap: wrap; gap: 12px;
	font-size: 11px; color: #6b7280;
}
.bha-calendar__legend-item {
	display: inline-flex; align-items: center; gap: 6px;
}
.bha-calendar__legend-swatch {
	width: 14px; height: 14px;
	border-radius: 3px;
	border: 1px solid #e5e7eb;
	display: inline-block;
}
/* Legend swatches:
   - booked / pending / unpaid / cancelled: small horizontal pill
     (mirrors the in-cell pill, carries the status icon for parity).
   - blocked + imported: square cell-fill (mirrors the in-cell background). */
.bha-calendar__legend-swatch--booked,
.bha-calendar__legend-swatch--pending,
.bha-calendar__legend-swatch--unpaid,
.bha-calendar__legend-swatch--cancelled {
	width: 24px; height: 14px;
	border-radius: 9999px;
	border: 0;
	min-height: 0;
	cursor: default;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bha-calendar__legend-swatch--booked  svg,
.bha-calendar__legend-swatch--pending svg,
.bha-calendar__legend-swatch--unpaid  svg {
	width: 9px;
	height: 9px;
}
/* Icon stroke colour mirrors the in-cell pill label colour:
   white on the saturated confirmed pill, deep teal on the lighter
   pending/unpaid pills (currentColor → svg stroke). */
.bha-calendar__legend-swatch--booked  { color: #ffffff; }
.bha-calendar__legend-swatch--pending { color: #0a4a5e; }
.bha-calendar__legend-swatch--unpaid  { color: #0a4a5e; }
.bha-calendar__legend-swatch--booked  { background: linear-gradient(to bottom, #7fc5dc 0%, #1097c5 100%); }
.bha-calendar__legend-swatch--unpaid  { background: linear-gradient(to bottom, #a8d6e6 0%, #7fc5dc 100%); }
.bha-calendar__legend-swatch--pending { background: linear-gradient(to bottom, #dbeef5 0%, #a8d6e6 100%); }
.bha-calendar__legend-swatch--cancelled {
	background: linear-gradient(to bottom, #e2e8f0 0%, #94a3b8 100%);
	opacity: 0.65;
}
.bha-calendar__legend-swatch--blocked   { background: #e2e8f0; border-color: #cbd5e1; }
.bha-calendar__legend-swatch--imported  { background: #ede9fe; border-color: #c4b5fd; }
.bha-calendar__legend-swatch--price {
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; color: #1097c5;
	border-color: #1097c5;
	font-size: 9px; font-weight: 700;
}

/* Mobile: shrink the cell footprint slightly so the grid still fits. */
@media (max-width: 480px) {
	.bha-calendar__day { min-height: 44px; }
	.bha-calendar__day-num { font-size: 11px; }
	.bha-calendar__price-pip { width: 13px; height: 13px; font-size: 9px; }
}

/* =========================================================================
   Booking sheet — inline panel that appears below the calendar when a
   booking pill is clicked. Centered horizontally, max-width 480px,
   slides + fades in. No modal backdrop — host can still see + interact
   with the calendar above.
   ========================================================================= */

.bha-booking-sheet {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin: 16px auto 4px;
	background: #fff;
	border: 1px solid #a8d6e6;
	border-radius: 12px;
	padding: 14px 18px 18px;
	box-shadow: 0 4px 16px rgba(10, 74, 94, 0.12);
	font-family: inherit;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.bha-booking-sheet.is-open {
	opacity: 1;
	transform: translateY(0);
}

.bha-booking-sheet__close {
	position: absolute;
	top: 12px; right: 12px;
	width: 30px; height: 30px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6b7280;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.12s, color 0.12s;
}
.bha-booking-sheet__close:hover { background: #f0f7fa; color: #0a4a5e; }

.bha-booking-sheet__head {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 16px;
}
.bha-booking-sheet__avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}
.bha-booking-sheet__avatar--initials {
	background: #1097c5;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	display: flex; align-items: center; justify-content: center;
}
.bha-booking-sheet__name-wrap {
	display: flex; flex-direction: column; gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
}
.bha-booking-sheet__title-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
}
.bha-booking-sheet__name {
	font-size: 16px; font-weight: 700; color: #0a4a5e;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	flex: 0 1 auto;
	min-width: 0;
}
.bha-booking-sheet__booking-number {
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
	white-space: nowrap;
	letter-spacing: 0.02em;
}
.bha-booking-sheet__status {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 10px;
	border-radius: 9999px;
	font-size: 11px; font-weight: 600;
	width: fit-content;
}
.bha-booking-sheet__status svg { width: 11px; height: 11px; }
.bha-booking-sheet__status--booked  { background: linear-gradient(to bottom, #7fc5dc 0%, #1097c5 100%); color: #fff; }
.bha-booking-sheet__status--unpaid  { background: linear-gradient(to bottom, #a8d6e6 0%, #7fc5dc 100%); color: #0a4a5e; }
.bha-booking-sheet__status--pending { background: linear-gradient(to bottom, #dbeef5 0%, #a8d6e6 100%); color: #0a4a5e; }

.bha-booking-sheet__body {
	border-top: 1px solid #e5e7eb;
	padding-top: 12px;
	margin-bottom: 14px;
}
.bha-booking-sheet__row {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 8px 0;
	font-size: 13px;
	border-bottom: 1px solid #f3f4f6;
}
.bha-booking-sheet__row:last-child { border-bottom: 0; }
.bha-booking-sheet__row-label { color: #6b7280; font-weight: 500; }
.bha-booking-sheet__row-value { color: #0a4a5e; font-weight: 600; text-align: right; }

.bha-booking-sheet__status-line {
	margin: 0 0 12px;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
}
.bha-booking-sheet__status-line--info  { background: #f0f7fa; color: #0a4a5e; border: 1px solid #a8d6e6; }
.bha-booking-sheet__status-line--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.bha-booking-sheet__actions {
	display: flex; flex-direction: column; gap: 8px;
}
/* Booking-sheet actions take full row width (one per line) — gives the
   sheet a spacious, top-to-bottom action menu rather than a cramped
   row. The .bha-btn family handles colours; this rule only controls
   layout (width fill + slightly larger tap target). */
.bha-booking-sheet__action {
	width: 100%;
	padding: 11px 14px;
	font-size: 14px;
}
@media (max-width: 480px) {
	.bha-booking-sheet { max-width: 100%; padding: 12px 14px 14px; }
}


/* (Legacy horizontal-row positioning rule for the ⋮ button has been
   superseded by the column-stack rule above, which applies
   align-self: flex-end + margin-left: 0 in the new layout.) */

/* Listing-tile actions need the menu host to be position:relative so the
   popup anchors below the ⋮ rather than escaping the tile bounds. */
.bha-listing-tile__actions { position: relative; }

/* Booking-row actions — three inline buttons (no menu). Sits at the
   bottom of the expanded details. The inline confirm form replaces the
   button row when a destructive action is clicked. */
.bha-booking-row__actions {
	position: relative;
	margin-top: 10px;
}
.bha-booking-row__action-btns {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.bha-booking-row__action-inline:empty { display: none; }

/* Status pill — Hidden state (HP "draft" post_status). Gray pill, distinct
   from auto-draft "Draft" (orange) so the host can tell at a glance which
   bucket the listing's in. */
.bha-listing-tile.bha-listing-tile--gray .bha-listing-tile__pill,
.bha-listing-tile__pill--gray {
	background: #f1f5f9;
	color: #475569;
	border: 1px solid #e2e8f0;
}

/* =========================================================================
   Feature-listing workspace surface (feature-listing.js, Surface #3a).
   Mounted via Bha.Workspace.mount('feature-listing', ...) when the agent's
   start_feature_listing tool fires. Stripe Embedded Checkout iframe is
   mounted into __checkout. Layout matches the renewal picker for visual
   consistency.
   ========================================================================= */
.bha-feature-listing {
	/* Visual chrome (white card, 482px max-width, border, shadow) is
	   provided by the shared .bha-payment-card class added to the
	   wrapper at mount time — see chat-base.css. This rule is now only
	   for surface-specific layout that doesn't apply to other payment
	   forms. */
}
.bha-feature-listing__header {
	margin-bottom: 12px;
}
.bha-feature-listing__title {
	font-size: 18px;
	font-weight: 700;
	color: #1e293b;
}
.bha-feature-listing__sub {
	margin-top: 4px;
	font-size: 14px;
	color: #475569;
}
.bha-feature-listing__banner {
	margin-bottom: 14px;
	padding: 10px 12px;
	font-size: 13px;
	color: #0a4a5e;
	background: #f0f7fa;
	border-left: 3px solid #1097c5;
	border-radius: 0 6px 6px 0;
}
.bha-feature-listing__unavail {
	margin-bottom: 14px;
	padding: 10px 12px;
	font-size: 13px;
	color: #92400e;
	background: #fef3c7;
	border: 1px solid #fcd34d;
	border-radius: 6px;
}
.bha-feature-listing__pricing {
	margin-bottom: 14px;
	padding: 14px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
.bha-feature-listing__price-line {
	font-size: 16px;
	color: #1e293b;
}
.bha-feature-listing__price-amount {
	font-weight: 700;
	font-size: 22px;
	color: #1097c5;
}
.bha-feature-listing__price-period {
	color: #475569;
}
.bha-feature-listing__pitch {
	margin-top: 6px;
	font-size: 13px;
	color: #475569;
}
/* The wrapper itself now constrains width (482px → 450px content area)
   and provides the white card background, so inner pieces no longer
   need their own max-width — they fill the wrapper's content width.
   box-sizing kept for the borders on .bha-feature-listing__pricing. */
.bha-feature-listing__pricing,
.bha-feature-listing__banner,
.bha-feature-listing__unavail {
	box-sizing: border-box;
}
.bha-feature-listing__status {
	margin-top: 8px;
	font-size: 13px;
	color: #475569;
}
.bha-feature-listing__status--error {
	color: #991b1b;
}
.bha-feature-listing__status--warn {
	color: #92400e;
}


/* ============================================================
   Bha.WelcomeSurface — first-run replacement for the dashboard.
   Shown when bhaConfig.onboardingStage != 'active_host' and the
   host hasn't clicked the skip link this session. Trims the
   competing CTAs on the dashboard down to one message: chat
   with the agent on the right. Big animated arrow points east
   at the agent panel. Muted skip link beneath for power users.
   ============================================================ */

.bha-welcome-surface {
	max-width: 560px;
	margin: 0 auto;
	padding: 88px 16px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Theme defeat: the active theme sets margin-bottom on h1/p (likely
   via a generic `p { margin-bottom: 1rem }` or `h1 { margin: ... }`
   rule). Margin-shorthand from us loses to any later longhand
   declaration regardless of specificity, so we use `!important` on
   the longhand here to win unconditionally. Other properties (font,
   color, line-height) come through fine without it.

   Also doubled the selector specificity (.bha-welcome-surface
   .bha-welcome-surface__greeting → 0,2,0) for cascade margin
   protection in case the theme upgrades to something like
   `body .post-content p`. */
.bha-welcome-surface .bha-welcome-surface__greeting {
	font-size: 28px;
	font-weight: 700;
	color: #053040;
	margin: 0 0 28px !important;
	line-height: 1.2;
}

.bha-welcome-surface .bha-welcome-surface__intro {
	font-size: 16px;
	font-weight: 400;
	color: #334155;
	line-height: 1.55;
	/* 72px above arrow card mirrors the 72px below it (arrow-wrap's
	   56px margin-bottom + skip link's 16px margin-top stack). Keep
	   these three values in sync if any of them change. */
	margin: 0 0 72px !important;
	max-width: 460px;
}

.bha-welcome-surface__arrow-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 56px;
}

.bha-welcome-surface__arrow-card {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	background: #f0f7fa;
	border: 2px solid #1097c5;
	border-radius: 12px;
	color: #053040;
	font-size: 16px;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(16, 151, 197, 0.18);
}

.bha-welcome-surface__arrow-text {
	white-space: nowrap;
}

.bha-welcome-surface__arrow-svg {
	display: inline-flex;
	color: #1097c5;
	animation: bha-welcome-arrow-bounce 1.6s ease-in-out infinite;
}

@keyframes bha-welcome-arrow-bounce {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(8px); }
}

.bha-welcome-surface__skip {
	/* Stacks with arrow-wrap's margin-bottom: 56px → 72px total below
	   the arrow card. Mirrored by intro's margin-bottom: 72px above. */
	margin-top: 16px;
	background: none;
	border: none;
	color: #64748b;
	font-size: 13px;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 4px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bha-welcome-surface__skip:hover,
.bha-welcome-surface__skip:focus-visible {
	color: #053040;
	background: #f1f5f9;
	outline: none;
}

/* Mobile — single-column, arrow card centred (workspace is full-width
   on mobile so arrow-east-toward-agent metaphor doesn't apply; agent
   is on the assistant-view tab below, not to the right). */
@media (max-width: 768px) {
	.bha-welcome-surface {
		padding: 32px 16px 24px;
	}
	.bha-welcome-surface__greeting {
		font-size: 24px;
	}
	.bha-welcome-surface__intro {
		font-size: 15px;
		margin-bottom: 24px;
	}
	.bha-welcome-surface__arrow-wrap {
		justify-content: center;
	}
	.bha-welcome-surface__arrow-card {
		padding: 14px 18px;
	}
	/* On mobile, the arrow points DOWN (toward the assistant tab in
	   the bottom tab bar) instead of east. Rotate the SVG. */
	.bha-welcome-surface__arrow-svg svg {
		transform: rotate(90deg);
	}
	@keyframes bha-welcome-arrow-bounce {
		0%, 100% { transform: translateY(0); }
		50%      { transform: translateY(8px); }
	}
}

/* ============================================================
   Bha.WizardWait — animated waiting surface for ~10-15s
   backend operations (e.g. AI prepop after the listing-creation
   3-question opener). Teal-themed magic-wand + twinkling sparkle
   ring + cycling status line. CSS-only; no external animation
   dependency.
   ============================================================ */

/* Centered in the workspace — wizard fills the workspace pane and
   centers its content on both axes. The workspace itself is `flex: 1`
   inside `.bha-main`, so this rule + flex centering = vertically +
   horizontally centered no matter how tall the workspace is. */
.bha-wizard-wait {
	min-height: 100%;
	width: 100%;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	box-sizing: border-box;
}

/* Sparkles fill the entire surface so heading + status are framed
   by twinkling stars on every side. 40 sparkles distributed across
   top / inner-upper / middle / inner-lower / bottom — including the
   central column where a wand graphic used to sit before 0.54.4. */
.bha-wizard-wait__sparkles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bha-wizard-wait__sparkle {
	position: absolute;
	opacity: 0;
	animation: bha-wizard-wait-twinkle 2.4s ease-in-out infinite;
	will-change: opacity, transform;
}

@keyframes bha-wizard-wait-twinkle {
	0%, 100% { opacity: 0; transform: scale(0.6); }
	50%      { opacity: 1; transform: scale(1); }
}

/* 40 sparkles. Random-feeling positions, varied sizes (12-24px),
   staggered delays so the twinkle never feels rhythmic. Coordinates
   are percentages so the field scales with workspace size.

   Layout bands:
     top         (1-5)
     inner-upper (6-10)
     middle      (11-14, 29-34 fill central upper gap)
     inner-mid   (15-18 close to text)
     inner-lower (19-22, 35-40 fill central lower gap)
     bottom      (23-28) */
.bha-wizard-wait__sparkle--1  { left:  6%;  top:  4%;  font-size: 18px; animation-delay: 0s;   }
.bha-wizard-wait__sparkle--2  { left: 22%;  top:  2%;  font-size: 14px; animation-delay: 0.3s; }
.bha-wizard-wait__sparkle--3  { left: 42%;  top:  6%;  font-size: 22px; animation-delay: 0.6s; }
.bha-wizard-wait__sparkle--4  { left: 64%;  top:  3%;  font-size: 16px; animation-delay: 0.9s; }
.bha-wizard-wait__sparkle--5  { left: 86%;  top:  8%;  font-size: 20px; animation-delay: 1.2s; }
.bha-wizard-wait__sparkle--6  { left: 14%;  top: 18%;  font-size: 14px; animation-delay: 1.5s; }
.bha-wizard-wait__sparkle--7  { left: 30%;  top: 22%;  font-size: 18px; animation-delay: 1.8s; }
.bha-wizard-wait__sparkle--8  { left: 50%;  top: 16%;  font-size: 24px; animation-delay: 2.1s; }
.bha-wizard-wait__sparkle--9  { left: 70%;  top: 24%;  font-size: 16px; animation-delay: 0.2s; }
.bha-wizard-wait__sparkle--10 { left: 90%;  top: 20%;  font-size: 12px; animation-delay: 0.5s; }
.bha-wizard-wait__sparkle--11 { left:  4%;  top: 36%;  font-size: 16px; animation-delay: 0.8s; }
.bha-wizard-wait__sparkle--12 { left: 22%;  top: 40%;  font-size: 12px; animation-delay: 1.1s; }
.bha-wizard-wait__sparkle--13 { left: 78%;  top: 38%;  font-size: 14px; animation-delay: 1.4s; }
.bha-wizard-wait__sparkle--14 { left: 94%;  top: 42%;  font-size: 18px; animation-delay: 1.7s; }
.bha-wizard-wait__sparkle--15 { left: 10%;  top: 54%;  font-size: 14px; animation-delay: 0.4s; }
.bha-wizard-wait__sparkle--16 { left: 88%;  top: 56%;  font-size: 16px; animation-delay: 0.7s; }
.bha-wizard-wait__sparkle--17 { left: 26%;  top: 60%;  font-size: 12px; animation-delay: 1.0s; }
.bha-wizard-wait__sparkle--18 { left: 74%;  top: 62%;  font-size: 12px; animation-delay: 1.3s; }
.bha-wizard-wait__sparkle--19 { left:  6%;  top: 72%;  font-size: 18px; animation-delay: 1.6s; }
.bha-wizard-wait__sparkle--20 { left: 92%;  top: 74%;  font-size: 14px; animation-delay: 1.9s; }
.bha-wizard-wait__sparkle--21 { left: 18%;  top: 80%;  font-size: 14px; animation-delay: 0.6s; }
.bha-wizard-wait__sparkle--22 { left: 80%;  top: 82%;  font-size: 16px; animation-delay: 1.4s; }
.bha-wizard-wait__sparkle--23 { left:  8%;  top: 92%;  font-size: 16px; animation-delay: 0.2s; }
.bha-wizard-wait__sparkle--24 { left: 28%;  top: 96%;  font-size: 14px; animation-delay: 0.5s; }
.bha-wizard-wait__sparkle--25 { left: 50%;  top: 90%;  font-size: 22px; animation-delay: 0.8s; }
.bha-wizard-wait__sparkle--26 { left: 70%;  top: 94%;  font-size: 14px; animation-delay: 1.1s; }
.bha-wizard-wait__sparkle--27 { left: 90%;  top: 92%;  font-size: 18px; animation-delay: 1.4s; }
.bha-wizard-wait__sparkle--28 { left: 56%;  top: 76%;  font-size: 12px; animation-delay: 1.7s; }
/* — central upper gap (where the wand used to sit) — */
.bha-wizard-wait__sparkle--29 { left: 40%;  top: 28%;  font-size: 18px; animation-delay: 2.0s; }
.bha-wizard-wait__sparkle--30 { left: 56%;  top: 30%;  font-size: 14px; animation-delay: 0.4s; }
.bha-wizard-wait__sparkle--31 { left: 38%;  top: 42%;  font-size: 12px; animation-delay: 0.7s; }
.bha-wizard-wait__sparkle--32 { left: 60%;  top: 44%;  font-size: 16px; animation-delay: 1.0s; }
.bha-wizard-wait__sparkle--33 { left: 48%;  top: 36%;  font-size: 22px; animation-delay: 1.3s; }
.bha-wizard-wait__sparkle--34 { left: 46%;  top: 50%;  font-size: 12px; animation-delay: 1.6s; }
/* — central lower gap (mirrors the upper, fills below status text) — */
.bha-wizard-wait__sparkle--35 { left: 38%;  top: 70%;  font-size: 14px; animation-delay: 0.3s; }
.bha-wizard-wait__sparkle--36 { left: 52%;  top: 68%;  font-size: 18px; animation-delay: 0.9s; }
.bha-wizard-wait__sparkle--37 { left: 64%;  top: 70%;  font-size: 12px; animation-delay: 1.5s; }
.bha-wizard-wait__sparkle--38 { left: 42%;  top: 82%;  font-size: 16px; animation-delay: 2.1s; }
.bha-wizard-wait__sparkle--39 { left: 58%;  top: 84%;  font-size: 14px; animation-delay: 0.6s; }
.bha-wizard-wait__sparkle--40 { left: 48%;  top: 78%;  font-size: 22px; animation-delay: 1.2s; }

/* Heading. */
.bha-wizard-wait__title {
	font-size: 22px;
	font-weight: 700;
	color: #053040;
	margin: 0 0 16px;
	line-height: 1.25;
}

/* Status line — cycling messages with a cross-fade. */
.bha-wizard-wait__status-wrap {
	min-height: 26px; /* prevents layout shift between status changes */
	display: flex;
	align-items: center;
	justify-content: center;
}

.bha-wizard-wait__status {
	font-size: 15px;
	font-weight: 500;
	color: #1097c5;
	transition: opacity 0.25s ease-in-out;
	opacity: 1;
}

.bha-wizard-wait__status--fading {
	opacity: 0;
}

@media (max-width: 600px) {
	.bha-wizard-wait {
		padding: 32px 16px;
	}
	.bha-wizard-wait__title {
		font-size: 19px;
	}
	.bha-wizard-wait__status {
		font-size: 14px;
	}
	/* Tighter sparkle radius on narrow screens. */
	.bha-wizard-wait__sparkle--1 { left: calc(50% - 60px); }
	.bha-wizard-wait__sparkle--2 { left: calc(50% + 44px); }
	.bha-wizard-wait__sparkle--3 { left: calc(50% - 44px); }
	.bha-wizard-wait__sparkle--4 { left: calc(50% + 60px); }
}