/* ============================================================
   chat-chrome.css — top-nav, workspace pane, assistant pane,
   wrapper, fullscreen, mobile tabs, layout grid, focus hint.
   ============================================================ */


/* ---- Wrapper (holds the entire host-agent: top-nav + main + signup-bar
       + mobile-tabs + fullscreen toggle) ----

   Default state is EMBEDDED — the wrapper renders as a sized, bordered
   card on the page (mirrors the Concierge page layout: a card sitting
   below the page hero / header). On desktop chat.js leaves the wrapper
   in this default state; on mobile (≤768px) chat.js calls setFullscreen
   which adds .bha-fullscreen and the wrapper becomes a fixed-position
   full-viewport overlay (the W.5 chrome with bottom tab bar etc).

   Inline style="visibility:hidden" prevents flash of unstyled content
   pre-init; JS adds .bha-ready after init to reveal. */
.bha-chat-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Fixed height — wrapper must NEVER grow past the viewport. Tall
	   workspace surfaces (host profile form, listing-creation form,
	   etc.) scroll inside their own pane via .bha-workspace's
	   overflow: auto + min-height: 0 — they don't push the wrapper.
	   The earlier min-height variant (0.52.13) let the card grow off-
	   screen on tall forms; reverted in 0.53.15. The signup-bar,
	   when visible, mildly squeezes the workspace+assistant panes
	   (~60px); accepted as the lesser evil vs the card blowing out
	   the viewport entirely. */
	height: 75vh;
	min-height: 480px;
	width: 100%;
	border: 1px solid #e0e4ea;
	border-radius: 14px;
	background: #ffffff;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

.bha-chat-wrapper.bha-ready {
	visibility: visible !important;
}

/* Transient toast at the top of the chat — used for the email-verification
   welcome message. JS adds .bha-toast--visible after a reflow to trigger
   the slide-in transition, then removes it after ~4.5s. */
.bha-toast {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -120%);
	z-index: 100;
	padding: 11px 22px;
	border-radius: 24px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: transform 0.35s ease;
	white-space: nowrap;
	pointer-events: none;
	max-width: calc(100% - 24px);
	overflow: hidden;
	text-overflow: ellipsis;
}

.bha-toast--success {
	background: #10b981;
	color: #ffffff;
}

.bha-toast--visible {
	transform: translate(-50%, 16px);
}

/* Resend-verification link inside the auth-form error message. */
.bha-auth-resend {
	display: inline-block;
	color: #1097c5;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	margin-left: 4px;
}

.bha-auth-resend:hover {
	color: #0d7fa8;
}
/* ============================================================
   W.1 chrome scaffold — top-nav + workspace + assistant split.

   Layout (full-screen, every signed-in host):
       .bha-top-nav          height 56px  ─────────────────────┐
       .bha-main             flex: 1                            │
         .bha-workspace      flex: 1                            │
         .bha-assistant      width: 380px                       │
           .bha-assistant-header                                │
           .bha-chat-container (existing)                       │
       .bha-signup-bar       (transitional — listing-creation   │
                              progress bar; visible only when   │
                              an active flow paints into it)    │
       .bha-fullscreen-toggle (absolute)                        │

   Below 768px the chrome collapses to a stacked layout with a
   bottom tab bar (Phase W.5 — not in W.1).
   ============================================================ */


/* Wrapper-level font + colour reset. The host-agent runs inside a WordPress
   theme that often paints body with its own font (e.g. Inter) at translucent
   black (e.g. rgba(15,23,39,0.65)) — without this reset, anywhere chrome CSS
   relies on inherit (workspace, home, assistant pane) shows up in the theme
   font and at theme opacity, which reads as blurry/inconsistent next to the
   chat bubbles (which had their own font override on .bha-chat-container).

   Force the system font stack + full-opacity neutral on the wrapper so every
   chrome descendant inherits a consistent base. Headings + form elements
   often have their own theme element-selector rules (e.g. `h1 { font-family:
   Lexend }`) that beat a generic descendant inherit; explicitly forcing them
   to `font-family: inherit` overrides those without resorting to !important. */
.bha-chat-wrapper {
	font-family: var(--bha-chrome-font-stack);
	color: var(--bha-chrome-neutral-900);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.bha-chat-wrapper h1,
.bha-chat-wrapper h2,
.bha-chat-wrapper h3,
.bha-chat-wrapper h4,
.bha-chat-wrapper h5,
.bha-chat-wrapper h6,
.bha-chat-wrapper button,
.bha-chat-wrapper input,
.bha-chat-wrapper textarea,
.bha-chat-wrapper select {
	font-family: inherit;
}

/* Top nav — 56px, white, bottom border. Right-padding 56px reserves
   space for the absolute-positioned fullscreen toggle (34px wide at
   right:8 → ends at right:42); without this padding the rightmost
   alert chip would sit under the toggle and the toggle's hover halo
   covers the chip. Left-padding 20px keeps the first nav button off
   the wrapper edge. */
.bha-top-nav {
	height: 56px;
	background: #ffffff;
	border-bottom: 1px solid var(--bha-chrome-neutral-200);
	display: flex;
	align-items: center;
	padding: 0 56px 0 20px;
	gap: 8px;
	flex-shrink: 0;
	font-size: 14px;
	color: var(--bha-chrome-neutral-900);
}

.bha-top-nav__logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 700;
	color: var(--bha-chrome-teal-deep);
	cursor: pointer;
	margin-right: 16px;
	transition: background 0.12s;
	user-select: none;
}

.bha-top-nav__logo:hover {
	background: var(--bha-chrome-teal-tint);
}

.bha-top-nav__logo-icon {
	font-size: 18px;
	line-height: 1;
}

.bha-top-nav__items {
	display: flex;
	gap: 4px;
	flex: 1;
	/* Narrow-desktop survival: when too many tabs fit between logo and
	   chips (iPad Mini landscape ~1024, narrow browser resize), scroll
	   horizontally instead of letting labels wrap character-by-character.
	   min-width:0 lets the flex item shrink below its content. */
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}
.bha-top-nav__items::-webkit-scrollbar { display: none; }

.bha-top-nav__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: none;
	border-radius: 8px;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: var(--bha-chrome-neutral-700);
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
	/* Tabs keep their natural width — never compress below icon+label.
	   Overflow scrolls via the items container above. */
	white-space: nowrap;
	flex-shrink: 0;
}

.bha-top-nav__btn-icon {
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

.bha-top-nav__btn:hover {
	background: var(--bha-chrome-teal-tint);
	color: var(--bha-chrome-teal-deep);
}

.bha-top-nav__btn--active {
	background: var(--bha-chrome-teal-tint);
	color: var(--bha-chrome-teal-deep);
	font-weight: 600;
}

.bha-top-nav__chips {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.bha-top-nav__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--bha-chrome-neutral-200);
	border-radius: 9999px;
	font-size: 12px;
	font-family: inherit;
	background: #ffffff;
	cursor: pointer;
	color: var(--bha-chrome-neutral-700);
	transition: background 0.12s, border-color 0.12s;
}

.bha-top-nav__chip:hover {
	background: var(--bha-chrome-teal-tint);
	border-color: var(--bha-chrome-teal-soft);
}

.bha-top-nav__chip--alert {
	border-color: var(--bha-chrome-red-edge);
	color: var(--bha-chrome-red-text);
	background: var(--bha-chrome-red-tint);
}

.bha-top-nav__chip--warn {
	border-color: var(--bha-chrome-amber-edge);
	color: var(--bha-chrome-amber-text);
	background: var(--bha-chrome-amber-tint);
}

.bha-top-nav__chip--neutral {
	/* default — no extra rule needed */
}

.bha-top-nav__chip-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9999px;
	background: rgba(15, 23, 42, 0.08);
	color: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.bha-top-nav__chip--alert .bha-top-nav__chip-count {
	background: rgba(153, 27, 27, 0.12);
}

.bha-top-nav__chip--warn .bha-top-nav__chip-count {
	background: rgba(146, 64, 14, 0.12);
}

/* W.3 — locked nav state. While a critical workspace surface is in flight
   (Stripe Embedded Checkout, future paid-flow surfaces), the top-nav
   visually disables: pointer-events blocked, half opacity, not-allowed
   cursor. The whole bar carries the lock-reason as a `title` tooltip so
   the host gets a hint when they hover. Set + cleared by Bha.TopNav.setLockState
   (called from Bha.Workspace.lock / unlock). */
.bha-top-nav--locked .bha-top-nav__btn,
.bha-top-nav--locked .bha-top-nav__chip,
.bha-top-nav--locked .bha-top-nav__logo {
	pointer-events: none;
	opacity: 0.5;
	cursor: not-allowed;
}

/* Main split — workspace (1fr) + assistant (clamp 380–550px, 36% of viewport). */
.bha-main {
	display: flex;
	flex: 1;
	min-height: 0;
}

/* Workspace pane — left ~70%, scrolls independently.
   `position: relative` is the global anchor for the absolute-positioned
   `.bha-surface-close` button added by Bha.FormPrimitives.addSurfaceClose.
   Centralising the anchor here means every workspace-mounted surface
   (listings, calendar, inbox, reviews, renewal, packages, feature-
   listing, …) gets a consistent close-button position at the top-right
   of the workspace pane — without each surface having to opt in. */
.bha-workspace {
	flex: 1;
	overflow: auto;
	padding: 32px 40px;
	background: var(--bha-chrome-neutral-50);
	min-width: 0;
	/* `min-height: 0` is mandatory in this layout — the wrapper is
	   `min-height: 75vh` (no max), so any tall workspace surface (e.g.
	   the host profile form) would expand the workspace beyond the
	   viewport without this. With min-height: 0, the workspace can
	   shrink to its flex slot, and overflow: auto kicks in to scroll
	   the form internally. Same flex gotcha as `.bha-chat-container`
	   fixed in 0.53.12 — both panes need it independently. */
	min-height: 0;
	position: relative;
}

/* Assistant pane — right side, white, left border. Hosts the chat. */
.bha-assistant {
	width: clamp(380px, 36%, 550px);
	flex-shrink: 0;
	background: #ffffff;
	border-left: 1px solid var(--bha-chrome-neutral-200);
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Assistant header — sticky-feel header bar inside the assistant pane.
   9.7.B.1 — top padding scales with safe-area-inset-top so on phones
   with viewport-fit=cover (notch / Dynamic Island), the avatar + title
   sit BELOW the OS status bar. The header's white background still
   fills the safe-area zone, so the OS status bar reads against
   the header rather than against the page hero. */
.bha-assistant-header {
	padding: max(14px, env(safe-area-inset-top)) 18px 14px 18px;
	border-bottom: 1px solid var(--bha-chrome-neutral-200);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.bha-assistant-header__avatar {
	width: 32px;
	height: 32px;
	background: url('/wp-content/uploads/2025/07/bookably-logo-pin.png') no-repeat center / contain;
	flex-shrink: 0;
}

.bha-assistant-header__title-wrap {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bha-assistant-header__title {
	font-weight: 600;
	font-size: 14px;
	color: var(--bha-chrome-teal-deep);
	line-height: 1.2;
}

.bha-assistant-header__subtitle {
	font-size: 11px;
	color: var(--bha-chrome-neutral-500);
	line-height: 1.2;
}

/* Strip the existing chat-container's border/shape when nested inside
   the assistant pane — the assistant provides its own border + height
   discipline. The fullscreen rule below already does this; the explicit
   override is here for the (rare) non-fullscreen render path so the
   container doesn't grow a stray border inside the sidebar. */
.bha-assistant .bha-chat-container {
	height: auto;
	min-height: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	flex: 1;
}

/* ---- Fullscreen ---- */

/* Fullscreen mode — full-viewport overlay. Used always on mobile
   (≤768px, the W.5 chrome needs edge-to-edge layout for the bottom
   tab bar) and on desktop only when the host clicks the fullscreen
   toggle. Resets the embedded card chrome (border, radius, shadow,
   max-width) so the wrapper truly fills the viewport. */
.bha-chat-wrapper.bha-fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: calc(100vh - var(--bha-kb-inset));
	height: calc(100dvh - var(--bha-kb-inset));
	min-height: 0;
	z-index: 99999;
	background: #ffffff;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.bha-chat-wrapper.bha-fullscreen .bha-chat-container {
	flex: 1;
	height: auto !important;
	min-height: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* Hide third-party chat widgets (e.g. Tawk.to) when fullscreen */
.bha-chat-wrapper.bha-fullscreen ~ iframe[src*="tawk"],
.bha-chat-wrapper.bha-fullscreen ~ div[class*="tawk"],
body.bha-fullscreen-active iframe[src*="tawk"],
body.bha-fullscreen-active div[class*="tawk"],
body.bha-fullscreen-active #tawk-bubble-container,
body.bha-fullscreen-active .tawk-min-container {
	display: none !important;
}

/* ---- Fullscreen toggle button ---- */

.bha-fullscreen-toggle {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 10;
	width: 34px;
	height: 34px;
	border: 1px solid #e0e4ea;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.9);
	color: #666;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s;
	padding: 0;
}

.bha-fullscreen-toggle:hover {
	background: #ffffff;
	color: #333;
	border-color: #ccc;
}

.bha-fullscreen-toggle__collapse {
	display: none;
}

.bha-chat-wrapper.bha-fullscreen .bha-fullscreen-toggle__expand {
	display: none;
}

.bha-chat-wrapper.bha-fullscreen .bha-fullscreen-toggle__collapse {
	display: block;
}

/* Onboarding flash: 8 × 1s pulse run by Bha.Chat.showFocusHint().
   The `bha-focus-hint` pill label sits above; this animation
   reinforces the call-to-action by drawing the eye to the actual
   button. Border + icon shift to teal during the pulse so the
   button reads as the active target even between glow rings.
   Class removed by showFocusHint()'s 8s timeout. */
.bha-fullscreen-toggle--flashing {
	border-color: var(--bha-chrome-teal);
	color: var(--bha-chrome-teal);
	animation: bha-fullscreen-toggle-pulse 1s ease-out 8;
}

@keyframes bha-fullscreen-toggle-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(16, 151, 197, 0.55); }
	100% { box-shadow: 0 0 0 12px rgba(16, 151, 197, 0); }
}

/* ==========================================================================
   Notification bar (Phase 9.5a chrome — host-state push surface)

   Sits above the messages list inside .bha-chat-container. Empty bar is
   hidden via inline style. Each button maps to a chip-action; total
   button count grows as new surfaces ship (messages, bookings, etc.).
   ========================================================================== */

.bha-notifications {
	display: none; /* flipped to flex when populated */
	flex-direction: column;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
	padding: 8px 12px;
}

.bha-notifications__body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.bha-notif-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #ffffff;
	color: #1e293b;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.bha-notif-btn:hover {
	background: #f3f4f6;
	border-color: #d1d5db;
}
.bha-notif-btn:active { transform: translateY(1px); }

.bha-notif-btn__icon {
	font-size: 14px;
	line-height: 1;
}
.bha-notif-btn__label { line-height: 1.2; }
.bha-notif-btn__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: 10px;
	background: #ef4444;
	color: #ffffff;
	font-size: 11px; font-weight: 700; line-height: 1;
}

/* Per-state accent stripes — subtle left-border tint by category. */
.bha-notif-btn--draft           { border-left: 3px solid #f59e0b; }
.bha-notif-btn--stripe          { border-left: 3px solid #6366f1; }
.bha-notif-btn--unread-messages { border-left: 3px solid #1097c5; }
/* =========================================================================
   Notification bar — single-row two-section chrome:
     LEFT  .bha-notifications__nav    — main navigation (always visible)
     RIGHT .bha-notifications__chips  — state-bearing notification chips
   Bar always shows for signed-in hosts so nav is reachable from anywhere.
   Stays one row at all widths; overflows horizontally if it must, with
   the scrollbar hidden visually so it just feels like the bar slides.
   ========================================================================= */
#bha-notifications {
	display: flex;
	flex-direction: row; /* override .bha-notifications class which forces column */
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
#bha-notifications::-webkit-scrollbar { display: none; }
.bha-notifications__nav {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	flex-shrink: 0;
}
.bha-notifications__chips {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	flex-shrink: 0;
	margin-left: auto;
}

/* Main-nav buttons (left section) — quieter than notification chips so
   the always-visible nav doesn't compete with state-bearing alerts.
   Reuses the secondary button visual language. */
.bha-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #ffffff;
	color: #0a4a5e;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bha-nav-btn:hover {
	background: #f0f7fa;
	border-color: #1097c5;
	color: #0a4a5e;
}
.bha-nav-btn__icon { font-size: 14px; line-height: 1; }
.bha-nav-btn__label { line-height: 1.2; white-space: nowrap; }

@media (max-width: 480px) {
	/* Phone: hide labels, keep icons — nav stays compact alongside chips. */
	.bha-nav-btn__label { display: none; }
	.bha-nav-btn { padding: 6px 9px; }
}

/* ============================================================
   Phase 9.7.B — Mobile chrome v2 (≤768px). Replaces the W.5 bottom-tab
   chrome with a chat-dominant + hamburger + sheet presenter. Desktop
   chrome (>768px) is untouched.

   Mobile layout flow:
       .bha-top-nav             height 56px (hamburger + page title only)
       .bha-main                fills remaining height; chat is the only
                                visible surface at rest
       .bha-mobile-sheet        100dvh slide-up sheet (sits under iOS
                                status bar at top:44px); covers chat
                                completely while open (D#3)
       .bha-mobile-drawer       78%-width slide-in side panel for full
                                navigation (D#4); scrim covers the rest

   `.bha-signup-bar` is still hidden on mobile (the form's own UI carries
   the progress affordance). */

/* ===== Mobile-only chrome elements: default-hidden on desktop ===== */
.bha-top-nav__hamburger     { display: none; }
.bha-top-nav__page-title    { display: none; }
.bha-mobile-sheet           { display: none; }
.bha-mobile-drawer          { display: none; }
.bha-mobile-drawer-scrim    { display: none; }

/* ===== One-shot onboarding nudge — "Click to focus" hint =====
   Mounted by Bha.Chat.showFocusHint() into the wrapper's PARENT (the
   column block on the page) so the pill can sit ABOVE the wrapper
   card without being clipped by the wrapper's overflow:hidden. The
   pill is centred over the fullscreen toggle; the toggle itself
   pulses teal for 5 seconds via .bha-fullscreen-toggle--flashing
   (added to the toggle when the hint mounts, removed on tear-down).
   Together they read as a single "click here" affordance — pill
   labels what to do, button flashes where to do it. */

/* Pill is centred horizontally above the fullscreen toggle.
   Toggle sits at right:8 inside wrapper; toggle horizontal centre
   = column.right - 8 - 17 = column.right - 25. Anchoring the pill
   at right:25 + transform:translateX(50%) puts pill centre at
   column.right - 25 (toggle centre). Pill extends ~40px past the
   column's right edge into the page's outer margin space — fine
   on desktop where the column is centred with margin to spare.

   transform-origin: bottom center so the scale-bounce entrance
   animation visually anchors at the toggle below it.

   The translateX(50%) is BAKED INTO every keyframe (in/out) because
   keyframe transforms override the base CSS transform — without it
   the pill would jump leftward at animation start. */
.bha-focus-hint {
	position: absolute;
	top: -56px;
	right: 25px;
	transform: translateX(50%);
	z-index: 60;
	background: #ffffff;
	color: var(--bha-chrome-teal-deep);
	padding: 8px 18px;
	border: 1.5px solid var(--bha-chrome-teal-soft);
	border-radius: 9999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 5px 14px rgba(16, 151, 197, 0.30);
	pointer-events: none;
	white-space: nowrap;
	transform-origin: bottom center;
	animation: bha-focus-hint-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bha-focus-hint__label {
	display: inline-block;
}

.bha-focus-hint--fading {
	animation: bha-focus-hint-out 0.5s ease-in forwards;
}

@keyframes bha-focus-hint-in {
	0%   { opacity: 0; transform: translateX(50%) translateY(6px) scale(0.92); }
	60%  { opacity: 1; transform: translateX(50%) translateY(-1px) scale(1.02); }
	100% { opacity: 1; transform: translateX(50%) translateY(0) scale(1); }
}

@keyframes bha-focus-hint-out {
	from { opacity: 1; transform: translateX(50%) translateY(0) scale(1); }
	to   { opacity: 0; transform: translateX(50%) translateY(2px) scale(0.96); }
}

/* ===== Mobile breakpoint ===== */
@media (max-width: 768px) {
	/* Top-nav simplification — hamburger + page title only. All nav lives
	   in the side drawer (D#4); top-nav chips strip is hidden (alert data
	   feeds drawer badges + hamburger dot per D#9). */
	.bha-top-nav {
		padding: 0 12px;
		gap: 6px;
	}
	.bha-top-nav__logo,
	.bha-top-nav__items,
	.bha-top-nav__chips {
		display: none;
	}
	.bha-top-nav__page-title {
		display: block;
		flex: 1;
		text-align: center;
		font-weight: 600;
		font-size: 15px;
		color: var(--bha-chrome-teal-deep);
		line-height: 56px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.bha-top-nav__hamburger {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 40px;
		height: 40px;
		border: none;
		background: transparent;
		cursor: pointer;
		padding: 0;
		border-radius: 10px;
		color: var(--bha-chrome-neutral-700);
		flex-shrink: 0;
	}
	.bha-top-nav__hamburger:hover,
	.bha-top-nav__hamburger:focus-visible {
		background: var(--bha-chrome-teal-tint);
		outline: none;
	}
	.bha-top-nav__hamburger-dot {
		position: absolute;
		top: 7px;
		right: 7px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #dc2626;
		border: 2px solid #ffffff;
		box-sizing: content-box;
	}

	/* Main fills remaining height; chat is the only visible surface at
	   rest. The workspace pane DOM stays mounted so desktop CSS is
	   unaffected; on mobile we hide it (sheet presenter takes over). */
	.bha-main {
		flex-direction: column;
	}
	.bha-workspace {
		display: none;
	}
	.bha-assistant {
		width: 100%;
		flex: 1;
		min-height: 0;
		border-left: none;
		border-top: none;
	}
	/* Sheet open → hide chat content (messages + composer + chip strip)
	   but keep the assistant-header visible so the brand bar +
	   fullscreen-toggle stay reachable while a surface is mounted
	   (9.7.B.1 D#3 revisited). The class lands on .bha-chat-wrapper,
	   set by Bha.MobileSheet.open. */
	.bha-mobile-sheet-open .bha-chat-container {
		visibility: hidden;
	}

	/* 9.7.B.1 — top-nav is collapsed into the assistant-header on mobile
	   to reclaim ~50px of vertical chat space. The whole top-nav element
	   is hidden; Bha.AssistantHeader.init() relocates its hamburger
	   button (and the wrapper-level fullscreen-toggle) into the merged
	   assistant-header at runtime. Click handlers and external
	   references survive the move because we re-parent the same DOM
	   nodes. Desktop chrome (>768px) is untouched. */
	.bha-top-nav {
		display: none;
	}

	/* Relocated fullscreen-toggle becomes a flex item in the assistant
	   header. Reset the desktop-side absolute positioning so it lays
	   out with the row instead of escaping it. margin-left:auto pushes
	   it to the rightmost slot. */
	.bha-assistant-header .bha-fullscreen-toggle {
		position: static;
		top: auto;
		right: auto;
		margin-left: auto;
	}

	/* Relocated hamburger sits leftmost. The base
	   .bha-top-nav__hamburger styling (display:flex etc.) still applies
	   regardless of parent — only the layout slot inside the new parent
	   needs a small breathing rule. */
	.bha-assistant-header .bha-top-nav__hamburger {
		margin-right: 4px;
	}

	/* 9.7.B.1 — when listing creation is active, the compact signup-bar
	   sits between the assistant-header and the sheet. Bump sheet top
	   by the compact-bar height (44px — touch-friendly tap target).
	   The .bha-active-flow class is added on the chat-wrapper by
	   Bha.ActiveFlow.renderActiveFlow when bhaConfig.activeFlow is set. */
	.bha-chat-wrapper.bha-active-flow .bha-mobile-sheet {
		top: calc(max(14px, env(safe-area-inset-top)) + 47px + 44px);
	}

	/* 9.7.B.1 — mobile override for .bha-surface-close lives in
	   chat-base.css (loaded AFTER chat-chrome.css) to win the
	   source-order cascade against the desktop `display: flex` rule
	   that shares the same selector + specificity. See the rule
	   immediately after `.bha-surface-close` in chat-base.css. */

	/* Signup-bar repositioned to top — same logic as W.5; no bottom-tab
	   bar conflict any more, but keeping the top placement reads cleaner
	   as a "step X of Y" workspace-level affordance. */
	.bha-signup-bar {
		order: 1;
		border-top: none;
		border-bottom: 1px solid #e0e4ea;
	}
	.bha-main {
		order: 2;
	}

	/* ===== Mobile sheet (slide-up presenter, D#1 + D#3) ===== */
	.bha-mobile-sheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* 9.7.B.1 D#3 revisited — the assistant-header (avatar + Host
		   Assistant + fullscreen-toggle) stays visible above the sheet
		   so the host keeps brand context + escape-hatch access while
		   inside any surface. Sheet starts at the assistant-header's
		   bottom edge.
		   Header height = padding-top (max 14px or safe-area-inset-top)
		                 + 32px avatar + 14px padding-bottom + 1px border.
		   So sheet top = max(14px, env(safe-area-inset-top)) + 47px,
		   which exactly meets the header's bottom across notch / Dynamic
		   Island / Android / iOS-classic status-bar heights.
		   When listing creation is active (.bha-active-flow on the chat
		   wrapper), the compact signup-bar sits between the assistant
		   header and the sheet — +32px bump below for that strip. */
		top: calc(max(14px, env(safe-area-inset-top)) + 47px);
		bottom: 0;
		background: #ffffff;
		z-index: 200;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		box-shadow: 0 -4px 16px rgba(15,23,42,.16);
		overflow: hidden;
		/* Hidden by default via translateY(100%); the --visible class
		   slides up. Drag-handle gestures override transform inline. */
		transform: translateY(100%);
		transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
	}
	.bha-mobile-sheet--visible {
		transform: translateY(0);
	}
	.bha-mobile-sheet__handle {
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		cursor: grab;
		touch-action: none;
		user-select: none;
	}
	.bha-mobile-sheet__handle-pill {
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: var(--bha-chrome-neutral-300);
	}
	.bha-mobile-sheet__header {
		height: 52px;
		border-bottom: 1px solid var(--bha-chrome-neutral-100);
		display: flex;
		align-items: center;
		padding: 0 8px 0 4px;
		gap: 4px;
		flex-shrink: 0;
	}
	.bha-mobile-sheet__back {
		width: 40px;
		height: 40px;
		border-radius: 10px;
		border: none;
		background: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--bha-chrome-neutral-700);
		cursor: pointer;
		flex-shrink: 0;
	}
	.bha-mobile-sheet__back:hover,
	.bha-mobile-sheet__back:focus-visible {
		background: var(--bha-chrome-neutral-100);
		outline: none;
	}
	.bha-mobile-sheet__title {
		font-weight: 600;
		font-size: 16px;
		color: var(--bha-chrome-neutral-900);
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.bha-mobile-sheet__lock-banner {
		background: #fef3c7;
		color: #92400e;
		font-size: 12px;
		padding: 8px 14px;
		border-bottom: 1px solid #fde68a;
		display: none;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
	}
	.bha-mobile-sheet__body {
		flex: 1;
		/* `min-height: 0` overrides flex's implicit `min-height: auto`
		   which otherwise prevents this item from shrinking below its
		   content size. Without it, tall surface content (e.g. the
		   feature-listing card: header + banner + pricing + Stripe iframe +
		   status + cancel) pushes the body taller than the sheet, and
		   `overflow-y: auto` never has anything to scroll. */
		min-height: 0;
		overflow-y: auto;
		padding: 0;
		background: var(--bha-chrome-neutral-50);
		/* Safe-area padding so sticky form footers in surface bodies don't
		   sit under the home indicator. */
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* Locked sheet — back-arrow + drag-handle dimmed (D#10 / 9.7.A
	   smoke-test verified). */
	.bha-mobile-sheet--locked .bha-mobile-sheet__back {
		opacity: 0.4;
		pointer-events: none;
	}
	.bha-mobile-sheet--locked .bha-mobile-sheet__handle {
		opacity: 0.4;
		cursor: not-allowed;
		pointer-events: none;
	}

	/* ===== Mobile drawer (side-slide menu, D#4) ===== */
	.bha-mobile-drawer-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15,23,42,.45);
		z-index: 300;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.18s ease-out;
	}
	.bha-mobile-drawer-scrim--open {
		opacity: 1;
		pointer-events: auto;
	}
	.bha-mobile-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 78%;
		max-width: 320px;
		background: #ffffff;
		z-index: 301;
		transform: translateX(-100%);
		transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
		box-shadow: 0 8px 24px rgba(15,23,42,.14);
	}
	.bha-mobile-drawer--open {
		transform: translateX(0);
	}
	.bha-mobile-drawer__header {
		padding: 20px 20px 14px;
		display: flex;
		align-items: center;
		gap: 12px;
		border-bottom: 1px solid var(--bha-chrome-neutral-100);
		flex-shrink: 0;
		/* Lift below the iOS notch on phones with a safe-area inset. */
		padding-top: max(20px, env(safe-area-inset-top));
	}
	.bha-mobile-drawer__avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--bha-chrome-teal) 0%, var(--bha-chrome-teal-dark) 100%);
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 14px;
		flex-shrink: 0;
		overflow: hidden;
	}
	/* Real-photo avatar (WP / HivePress vendor image) fills the circle
	   edge-to-edge; object-fit:cover crops non-square photos sensibly. */
	.bha-mobile-drawer__avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
		display: block;
	}
	.bha-mobile-drawer__user {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.bha-mobile-drawer__name {
		font-weight: 600;
		font-size: 14px;
		color: var(--bha-chrome-neutral-900);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.bha-mobile-drawer__email {
		font-size: 12px;
		color: var(--bha-chrome-neutral-500);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.bha-mobile-drawer__items {
		padding: 8px 0;
		flex: 1;
		overflow-y: auto;
	}
	.bha-mobile-drawer__item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 20px;
		cursor: pointer;
		font-size: 15px;
		color: var(--bha-chrome-neutral-900);
		border: none;
		background: transparent;
		width: 100%;
		text-align: left;
		font-family: inherit;
		text-decoration: none;
	}
	.bha-mobile-drawer__item:hover,
	.bha-mobile-drawer__item:focus-visible {
		background: var(--bha-chrome-teal-tint);
		color: var(--bha-chrome-teal-deep);
		outline: none;
	}
	.bha-mobile-drawer__item--active {
		background: var(--bha-chrome-teal-tint);
		color: var(--bha-chrome-teal-deep);
		font-weight: 600;
	}
	.bha-mobile-drawer__icon {
		width: 24px;
		text-align: center;
		font-size: 16px;
		color: var(--bha-chrome-neutral-500);
		flex-shrink: 0;
	}
	.bha-mobile-drawer__item--active .bha-mobile-drawer__icon {
		color: var(--bha-chrome-teal);
	}
	.bha-mobile-drawer__label {
		flex: 1;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.bha-mobile-drawer__badge {
		background: #dc2626;
		color: #ffffff;
		font-size: 11px;
		font-weight: 600;
		padding: 2px 7px;
		border-radius: 9999px;
		flex-shrink: 0;
		min-width: 20px;
		text-align: center;
	}
	.bha-mobile-drawer__divider {
		height: 1px;
		background: var(--bha-chrome-neutral-100);
		margin: 8px 0;
	}
	.bha-mobile-drawer__footer {
		padding: 12px 20px max(20px, env(safe-area-inset-bottom));
		border-top: 1px solid var(--bha-chrome-neutral-100);
		font-size: 12px;
		color: var(--bha-chrome-neutral-500);
		flex-shrink: 0;
	}
	.bha-mobile-drawer--locked .bha-mobile-drawer__item {
		opacity: 0.4;
		pointer-events: none;
	}

	/* ===== Surface-level mobile tweaks ===== */
	.bha-home {
		max-width: none;
	}
	.bha-home__greeting {
		font-size: 22px;
	}
	.bha-home__quick-actions {
		grid-template-columns: 1fr;
	}
	/* 9.7.B — Stripe wrapper override moved OUTSIDE this @media block
	   to bump selector specificity (the base rule lives in chat-surfaces.css
	   which loads later than this file; same-specificity rules lose by
	   source order, so we need the descendant qualifier to win). See
	   the .bha-mobile-sheet__body .bha-stripe-onboarding rule below. */
}

/* 9.7.B — Mobile sheet hosts every surface; default surface CSS often
   carries chat-canvas-era margin/padding/max-width that read fine in
   the workspace pane but feel cramped inside a 412px sheet. Override
   them with a descendant-qualified selector so this rule beats the
   base rules regardless of CSS file load order. No @media wrapper
   needed — `.bha-mobile-sheet__body` only ever has surfaces inside it
   on mobile (Workspace.mount routes desktop surfaces to .bha-workspace
   instead). */
.bha-mobile-sheet__body .bha-stripe-onboarding {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	max-width: none;
	overflow-x: auto;
	background: transparent;
}
.bha-mobile-sheet__body .bha-stripe-security-note {
	max-width: none;
	margin: 12px 12px 0;
}
.bha-mobile-sheet__body .bha-stripe-onboarding__mount {
	padding: 0 12px 12px;
}
.bha-mobile-sheet__body .bha-stripe-onboarding__status {
	padding: 8px 14px;
}