/* ==========================================================================
   Aliya's Beauty — Premium Design System (abx)
   --------------------------------------------------------------------------
   A completely reimagined, app-like, immersive experience for the Lash Try-On.
   Uses 100dvh, persistent visual canvas, intelligent bottom sheets, and
   cinematic split composition on desktop.
   ========================================================================== */

/* 1. TOKENS ================================================================ */

.abx-app {
  /* Palette — neutrals (brand beige + warm ink). Preserved brand colours. */
  --abx-beige-50: #fbfaf7;
  --abx-beige-100: #f4f1eb;
  --abx-beige-150: #eee9e1;
  --abx-beige-200: #e4dfd5;
  --abx-beige-300: #d6d3cd;
  --abx-ink-900: #171716;
  --abx-ink-700: #3c3b37;
  /* Darkened from the original #6e6c64 so muted/eyebrow text keeps AA contrast
     (~4.6:1) now that it can sit directly on --abx-bg's beige, not just on
     white cards — still reads as a clearly lighter tier than --abx-ink-900. */
  --abx-ink-500: #5c5a53;
  --abx-ink-400: #8c897f;

  /* Semantic colour roles.
     --abx-bg and --abx-inverse intentionally reuse the site's actual brand
     tokens (--primary #d6d3cd / --secondary #171716 in stylesheet.css) —
     the same warm beige used on the mobile nav and every legacy page body —
     rather than the near-white abx-beige-50. Cards/panels/inputs stay on
     abx-beige-50 (--abx-surface-solid) so they read as crisp elevated
     surfaces sitting on top of the brand beige canvas, echoing the old
     site's beige-on-beige .container language but with real elevation. */
  --abx-bg: var(--abx-beige-300);
  --abx-surface: rgba(251, 250, 247, 0.85); /* Translucent for backdrop-filter */
  --abx-surface-solid: var(--abx-beige-50);
  --abx-surface-sunken: rgba(23, 23, 22, 0.04);
  --abx-border: rgba(23, 23, 22, 0.08);
  --abx-border-strong: rgba(23, 23, 22, 0.15);
  --abx-text: var(--abx-ink-900);
  --abx-text-muted: var(--abx-ink-500);
  --abx-text-subtle: var(--abx-ink-400);
  /* Text on filled black surfaces (primary buttons, active badges, chat
     bubbles) — matches the legacy site's convention of pairing --secondary
     backgrounds with --primary (beige) text, never pure white. */
  --abx-inverse: var(--abx-beige-300);
  --abx-accent: var(--abx-ink-900);
  /* Foreground on --abx-accent fills (buttons, badges, payment day chips).
     Must be defined — an undefined custom property used as `color` falls
     back to inherited near-black text and produces black-on-black. */
  --abx-on-accent: var(--abx-inverse);
  --abx-accent-hover: #2c2b27;
  --abx-focus: #4459d0;

  /* Status roles */
  --abx-success: #188038;
  --abx-danger: #b23a2b;
  --abx-danger-soft: #f7e7e3;
  --abx-danger-border: #e2b7ae;

  /* Toggle switches — track must read on beige-50 cards; knob needs a visible edge */
  --abx-toggle-track: var(--abx-beige-200);
  --abx-toggle-track-border: var(--abx-border-strong);
  --abx-toggle-track-on: var(--abx-success);
  --abx-toggle-knob: #ffffff;
  --abx-toggle-knob-shadow: 0 1px 2px rgba(23, 23, 22, 0.28), 0 0 0 1px rgba(23, 23, 22, 0.14);

  /* Typography */
  --abx-font-sans: 'Radio Canada', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --abx-font-display: 'Montserrat', 'Radio Canada', system-ui, sans-serif;
  --abx-fs-50: 0.75rem;
  --abx-fs-100: 0.875rem;
  --abx-fs-200: 1rem;
  --abx-fs-300: 1.125rem;
  --abx-fs-400: 1.5rem;
  --abx-fs-500: 2rem;
  --abx-lh-tight: 1.15;
  --abx-lh-snug: 1.3;
  --abx-lh-normal: 1.55;

  /* Spacing scale (4px base) */
  --abx-space-1: 0.25rem;
  --abx-space-2: 0.5rem;
  --abx-space-3: 0.75rem;
  --abx-space-4: 1rem;
  --abx-space-5: 1.25rem;
  --abx-space-6: 1.5rem;
  --abx-space-8: 2rem;
  --abx-space-10: 2.5rem;

  /* Radius */
  --abx-radius-sm: 0.5rem;
  --abx-radius-md: 0.75rem;
  --abx-radius-lg: 1.25rem;
  --abx-radius-xl: 2rem;
  --abx-radius-pill: 999px;

  /* Elevation */
  --abx-elev-sheet: 0 -8px 32px rgba(23, 23, 22, 0.08);
  --abx-elev-toast: 0 12px 32px rgba(23, 23, 22, 0.12);

  /* Motion */
  --abx-ease: cubic-bezier(0.2, 0, 0, 1);
  --abx-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --abx-dur-1: 150ms;
  --abx-dur-2: 300ms;
  --abx-dur-3: 500ms;
  --abx-dur-4: 800ms;

  /* Z-index scale */
  --abx-z-canvas: 1;
  --abx-z-overlay: 10;
  --abx-z-controls: 20;
  --abx-z-toast: 100;
}

/* 2. SCOPED RESET ========================================================== */

.abx-app {
  color: var(--abx-text);
  font-family: var(--abx-font-sans);
  font-size: var(--abx-fs-200);
  line-height: var(--abx-lh-normal);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  
  /* App shell layout below the legacy fixed header (.main-container already
     reserves 60px via padding-top, so the shell only needs the remainder).
     Deliberately no min-height: the shell must always fit exactly within
     the real viewport on any device, however short (iPhone SE, landscape
     phones, etc.) — it must never be taller than the space available. */
  position: relative;
  height: calc(100dvh - 60px);
  max-height: calc(100dvh - 60px);
  background: var(--abx-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.abx-app *,
.abx-app *::before,
.abx-app *::after {
  box-sizing: border-box;
}

.abx-app :where(h1, h2, h3, h4, h5, h6, p, figure) {
  margin: 0;
}

.abx-app :where(button, input) {
  font: inherit;
  margin: 0;
}

/* Legacy global `a { color: var(--secondary) }` and button `color: inherit` leak
   dark ink onto filled abx buttons — enforce readable text on each variant. */
.abx-app .abx-btn.abx-btn--primary,
.abx-app button.abx-btn.abx-btn--primary,
.abx-app a.abx-btn.abx-btn--primary,
.abx-app a.abx-btn.abx-btn--primary:link,
.abx-app a.abx-btn.abx-btn--primary:visited,
.abx-app a.abx-btn.abx-btn--primary:hover,
.abx-app a.abx-btn.abx-btn--primary:active {
  color: var(--abx-inverse);
}

.abx-app .abx-btn.abx-btn--secondary,
.abx-app button.abx-btn.abx-btn--secondary,
.abx-app label.abx-btn.abx-btn--secondary,
.abx-app a.abx-btn.abx-btn--secondary {
  color: var(--abx-text);
}

.abx-app .abx-badge.abx-badge--accent {
  color: var(--abx-inverse);
}

.abx-app a.abx-btn {
  text-decoration: none;
}

.abx-app label.abx-segmented__radio {
  display: inline-flex;
  margin: 0;
  letter-spacing: normal;
  font-weight: 600;
  color: inherit;
}

.abx-app :where(button) {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.abx-app :where(img, video, canvas) {
  display: block;
  max-width: 100%;
}

.abx-app [hidden] {
  display: none !important;
}

/* 3. BASE TYPOGRAPHY ======================================================= */

.abx-eyebrow {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-50);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.abx-title {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-500);
  line-height: var(--abx-lh-tight);
  letter-spacing: -0.02em;
  color: var(--abx-text);
}

.abx-heading {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-400);
  line-height: var(--abx-lh-snug);
  letter-spacing: -0.01em;
  color: var(--abx-text);
}

.abx-lede {
  font-size: var(--abx-fs-300);
  line-height: var(--abx-lh-normal);
  color: var(--abx-text-muted);
}

.abx-text {
  font-size: var(--abx-fs-100);
  line-height: var(--abx-lh-normal);
  color: var(--abx-text);
}

.abx-text--center {
  text-align: center;
}

.abx-muted {
  color: var(--abx-text-muted);
}

/* 4. LAYOUT PRIMITIVES ===================================================== */

.abx-stack {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-5);
}

.abx-stack--tight {
  gap: var(--abx-space-3);
}

/* 5. APP SHELL & CANVAS ==================================================== */

/* Mobile-first layout: Canvas is full screen, Controls are bottom sheet */
.abx-canvas {
  position: absolute;
  inset: 0;
  z-index: var(--abx-z-canvas);
  background: var(--abx-ink-900); /* Dark background for canvas */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abx-canvas__ambient {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  filter: blur(60px) brightness(0.7);
  opacity: 0;
  transition: opacity var(--abx-dur-4) var(--abx-ease);
}

.abx-canvas__ambient.is-active {
  opacity: 1;
}

.abx-canvas__intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--abx-beige-200), var(--abx-beige-300));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--abx-dur-3) var(--abx-ease);
  z-index: 5;
}

.abx-canvas__intro.is-active {
  opacity: 1;
  pointer-events: auto;
}

.abx-canvas__intro-graphic {
  font-size: 4rem;
  color: var(--abx-ink-900);
  opacity: 0.1;
}

.abx-canvas__video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity var(--abx-dur-3) var(--abx-ease), transform var(--abx-dur-4) var(--abx-ease);
  z-index: 1;
}

.abx-canvas__video.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Mirror front/selfie camera only — back camera stays unmirrored */
.abx-canvas__video[data-facing="user"] {
  transform: scaleX(-1) scale(1.05);
}

.abx-canvas__video[data-facing="user"].is-active {
  transform: scaleX(-1) scale(1);
}

.abx-canvas__photo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity var(--abx-dur-3) var(--abx-ease), transform var(--abx-dur-4) var(--abx-ease);
  z-index: 1;
}

.abx-canvas__photo.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Before/After Compare */
.abx-canvas__compare {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  container-type: inline-size;
  transition: opacity var(--abx-dur-3) var(--abx-ease);
}

.abx-canvas__compare.is-active {
  opacity: 1;
  pointer-events: auto;
}

.abx-canvas__compare-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abx-canvas__compare-before-wrapper {
  position: absolute;
  inset: 0;
  width: 50%; /* Controlled by JS */
  height: 100%;
  overflow: hidden;
  border-right: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.abx-canvas__compare-before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100cqw;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.abx-canvas__compare-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%; /* Controlled by JS */
  width: 44px;
  margin-left: -22px;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  touch-action: none;
}

.abx-canvas__compare-slider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.abx-canvas__compare-handle {
  position: relative;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--abx-ink-900);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0.85);
}

/* Generating Overlay */
.abx-canvas__generating {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 22, 0.4);
  backdrop-filter: blur(8px);
  z-index: var(--abx-z-overlay);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--abx-dur-3) var(--abx-ease);
}

.abx-canvas__generating.is-active {
  opacity: 1;
}

.abx-scanning-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
  animation: abx-scan 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes abx-scan {
  0% { top: 10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

/* 6. CONTROLS & PANELS ===================================================== */

.abx-controls {
  position: absolute;
  inset: 0;
  z-index: var(--abx-z-controls);
  pointer-events: none; /* Let clicks pass through to canvas where empty */
}

.abx-controls__inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* Only panels capture input — canvas stays interactive for compare slider */
  pointer-events: none;
}

/* Every panel is always pinned directly to the bottom of the (full-height)
   controls layer via absolute positioning — never via flex ordering. This
   guarantees the sheet's resting position is always the true viewport
   bottom, regardless of sibling panels' heights or flex measurement quirks.
   Only opacity/transform/pointer-events change between states. */
.abx-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Cap the sheet to the available viewport height so it can never push
     content above the top edge — overflow scrolls internally instead. */
  max-height: 100%;
  /* Fallback scroll region for panels without an explicit .abx-panel__body
     (e.g. intro, privacy, reveal) so nothing is ever clipped unreachable. */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--abx-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top-left-radius: var(--abx-radius-xl);
  border-top-right-radius: var(--abx-radius-xl);
  box-shadow: var(--abx-elev-sheet);
  padding: var(--abx-space-6) var(--abx-space-5) calc(var(--abx-space-6) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-5);
  
  /* Animation */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-3) var(--abx-ease-spring);
  pointer-events: none;
}

.abx-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.abx-panel--transparent {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  gap: 0;
  overflow: visible;
}

.abx-panel--camera {
  justify-content: flex-end;
}

/* Subtle vignette over the canvas while the camera is active so overlay
   controls remain readable against bright or unloaded feeds. */
.abx-app[data-state="camera"] .abx-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, transparent 22%),
    linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 45%, transparent 100%);
}

.abx-panel__header {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
  /* Never let the header collapse when the body needs to scroll. */
  flex: none;
}

.abx-panel__header--floating {
  position: absolute;
  top: calc(-100dvh + var(--abx-space-6) + env(safe-area-inset-top));
  left: var(--abx-space-4);
  right: var(--abx-space-4);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.abx-panel__body {
  flex: 1;
  /* Override the flexbox default (min-height: auto) so this can actually
     shrink below its content size and become the internal scroll region. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Small breathing room so content doesn't sit flush against the scroll edge */
  margin: 0 calc(-1 * var(--abx-space-1));
  padding: 0 var(--abx-space-1);
}

.abx-panel__footer {
  margin-top: auto;
  /* Never let the footer (primary CTA) collapse or scroll out of view. */
  flex: none;
}

.abx-panel__footer--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 7. COMPONENTS ============================================================ */

/* Buttons */
.abx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abx-space-2);
  height: 3rem;
  padding: 0 var(--abx-space-5);
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-100);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--abx-radius-pill);
  transition: all var(--abx-dur-2) var(--abx-ease);
  user-select: none;
}

.abx-btn:active {
  transform: scale(0.98);
}

.abx-btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.abx-btn--primary {
  background: var(--abx-accent);
  color: var(--abx-inverse);
}

.abx-btn--primary:hover {
  background: var(--abx-accent-hover);
}

.abx-btn--secondary {
  background: var(--abx-surface-sunken);
  color: var(--abx-text);
  border: 1px solid var(--abx-border);
}

.abx-btn--secondary:hover {
  background: rgba(23, 23, 22, 0.08);
}

.abx-btn--ghost {
  background: transparent;
  color: var(--abx-text-muted);
}

.abx-btn--ghost:hover {
  color: var(--abx-text);
}

.abx-btn--lg {
  height: 3.5rem;
  font-size: var(--abx-fs-200);
}

.abx-btn--block {
  width: 100%;
}

.abx-btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--abx-surface-sunken);
  color: var(--abx-text);
  margin-bottom: var(--abx-space-2);
  transition: background var(--abx-dur-2) var(--abx-ease);
}

.abx-btn-back:hover {
  background: rgba(23, 23, 22, 0.08);
}

.abx-btn-back--overlay {
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 0;
}

.abx-btn-back--overlay:hover {
  background: rgba(0, 0, 0, 0.68);
}

.abx-btn-capture {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: transform var(--abx-dur-1) var(--abx-ease);
  /* Dark halo keeps the shutter legible on bright feeds. */
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.35);
}

.abx-btn-capture__inner {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--abx-dur-1) var(--abx-ease);
}

.abx-btn-capture:active .abx-btn-capture__inner {
  transform: scale(0.9);
}

.abx-camera-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 16rem;
}

.abx-btn-camera-flip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 1.1rem;
  transition: background var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-1) var(--abx-ease);
}

.abx-btn-camera-flip:hover {
  background: rgba(0, 0, 0, 0.68);
}

.abx-btn-camera-flip:active {
  transform: scale(0.94);
}

.abx-btn-camera-flip[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.abx-camera-controls__spacer {
  justify-self: end;
  width: 2.75rem;
  height: 2.75rem;
}

/* Camera stage — persistent dark dock for bottom controls */
.abx-camera-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abx-space-4);
  width: 100%;
  padding: var(--abx-space-6) var(--abx-space-5) calc(var(--abx-space-6) + env(safe-area-inset-bottom));
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    transparent 100%
  );
}

.abx-btn--overlay-text {
  color: #fff;
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-100);
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  min-height: 2.75rem;
}

.abx-btn--overlay-text:hover {
  text-decoration-color: #fff;
}

/* Badge */
.abx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--abx-space-2);
  height: 1.75rem;
  padding: 0 var(--abx-space-3);
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-50);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: flex-start;
}

.abx-badge--accent {
  background: var(--abx-accent);
  color: var(--abx-inverse);
}

/* Badge → title rhythm used on every portal/staff page header */
.abx-badge + .abx-title {
  margin-top: var(--abx-space-4);
}

/* Divider Text */
.abx-divider-text {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--abx-text-subtle);
  font-size: var(--abx-fs-50);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--abx-space-2) 0;
}

.abx-divider-text::before,
.abx-divider-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--abx-border);
}

.abx-divider-text span {
  padding: 0 var(--abx-space-3);
}

/* Camera Hint */
.abx-camera-hint {
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: var(--abx-space-2) var(--abx-space-4);
  border-radius: var(--abx-radius-pill);
  font-size: var(--abx-fs-100);
  font-weight: 500;
  max-width: min(18rem, 70vw);
  line-height: var(--abx-lh-snug);
}

/* Style Grid */
.abx-style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--abx-space-3);
}

.abx-style-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
  cursor: pointer;
}

.abx-style-card__visual {
  position: relative;
  border-radius: var(--abx-radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  transition: border-color var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-2) var(--abx-ease);
}

.abx-style-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--abx-dur-3) var(--abx-ease);
}

.abx-style-card__label {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-100);
  color: var(--abx-text);
  text-align: center;
}

.abx-style-card:hover .abx-style-card__visual {
  transform: scale(0.98);
}

.abx-style-card__input:checked ~ .abx-style-card__visual {
  border-color: var(--abx-accent);
}

.abx-style-card__input:checked ~ .abx-style-card__visual .abx-style-card__img {
  transform: scale(1.05);
}

/* Segmented */
.abx-segmented {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: var(--abx-surface-sunken);
  padding: 0.1875rem;
  border-radius: var(--abx-radius-pill);
}

.abx-segmented--block {
  display: flex;
  width: 100%;
}

.abx-segmented__radio {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 2.375rem;
  padding: 0 var(--abx-space-4);
  border-radius: calc(var(--abx-radius-pill) - 0.1875rem);
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
  cursor: pointer;
  transition: background-color var(--abx-dur-2) var(--abx-ease),
    color var(--abx-dur-2) var(--abx-ease),
    box-shadow var(--abx-dur-2) var(--abx-ease);
}

.abx-segmented__radio:has(input:checked) {
  background: var(--abx-surface-solid);
  color: var(--abx-text);
  box-shadow: 0 2px 8px rgba(23, 23, 22, 0.08);
}

/* Progress */
.abx-progress {
  height: 4px;
  background: var(--abx-surface-sunken);
  border-radius: var(--abx-radius-pill);
  overflow: hidden;
  margin-top: var(--abx-space-4);
}

.abx-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--abx-accent);
  transition: width 0.3s ease;
}

/* Toast */
.abx-toast {
  position: absolute;
  top: env(safe-area-inset-top, 1rem);
  left: 50%;
  right: var(--abx-space-4);
  transform: translateX(-50%) translateY(-100%);
  z-index: var(--abx-z-toast);
  width: max-content;
  max-width: min(92vw, 26rem);
  background: var(--abx-surface-solid);
  padding: var(--abx-space-4) var(--abx-space-5);
  border-radius: var(--abx-radius-lg);
  box-shadow: var(--abx-elev-toast);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--abx-space-3);
  font-weight: 500;
  opacity: 0;
  transition: all var(--abx-dur-3) var(--abx-ease-spring);
}

.abx-toast.is-active {
  transform: translateX(-50%) translateY(1rem);
  opacity: 1;
}

.abx-toast--error {
  color: var(--abx-danger);
}

.abx-toast--info {
  position: relative;
  transform: none;
  left: auto;
  bottom: auto;
  max-width: none;
  opacity: 1;
  color: var(--abx-text);
  background: rgba(124, 77, 255, 0.08);
  border: 1px solid rgba(124, 77, 255, 0.18);
}

.abx-toast--info .abx-toast__row i {
  color: #7c4dff;
}

.abx-toast--info a {
  color: inherit;
  font-weight: 600;
}

.abx-toast__row {
  display: flex;
  align-items: flex-start;
  gap: var(--abx-space-3);
}

.abx-toast__message {
  flex: 1;
  line-height: var(--abx-lh-snug);
  text-align: left;
}

.abx-toast__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: var(--abx-space-2);
  padding: 0.5rem var(--abx-space-4);
  border-radius: var(--abx-radius-pill);
  background: var(--abx-accent);
  color: var(--abx-inverse);
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-100);
  text-decoration: none;
  transition: background var(--abx-dur-2) var(--abx-ease);
}

.abx-toast__cta:hover {
  background: var(--abx-accent-hover);
}

.abx-toast--error .abx-toast__cta {
  color: var(--abx-inverse);
}

/* 8. DESKTOP SPLIT COMPOSITION ============================================= */

@media (min-width: 48rem) {
  .abx-app {
    flex-direction: row;
  }
  
  .abx-canvas {
    position: relative;
    flex: 1;
    height: 100%;
  }

  .abx-controls {
    position: relative;
    width: 28rem;
    height: 100%;
    background: var(--abx-surface-solid);
    border-left: 1px solid var(--abx-border);
    pointer-events: auto;
  }

  .abx-controls__inner {
    height: 100%;
    position: relative;
  }

  .abx-panel {
    top: 0;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateX(10%);
    padding: var(--abx-space-8) var(--abx-space-6);
  }

  .abx-panel.is-active {
    transform: translateX(0);
  }

  .abx-panel__header--floating {
    top: var(--abx-space-6);
    left: var(--abx-space-6);
    right: auto;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Reveal: keep more canvas visible for the compare slider on mobile */
@media (max-width: 47.99rem) {
  .abx-app[data-state="reveal"] .abx-panel#panelReveal {
    max-height: min(42vh, 22rem);
  }
}

/* 9. UTILITIES ============================================================= */

.abx-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 10. SIMPLE PAGE PRIMITIVES ================================================
   Static-flow (non app-shell) layout for AI capability pages that aren't a
   full-bleed camera experience — Consultant, Memory, Trainer. Reuses the
   same tokens/typography as the app shell above; adds only the primitives
   that don't exist yet (a static card, form fields, chat log) rather than
   duplicating .abx-panel's absolutely-positioned bottom-sheet behaviour. */

.abx-simple-page {
  /* .abx-app (shared with the camera app-shell pages) pins height to
     exactly the viewport below the fixed staff/site header and hides
     overflow, which is correct for the fixed-viewport camera UI but clips
     any simple content page — Consultant, Memory, Trainer, staff Clients —
     taller than one screen, with no way to reach content below the fold.
     Override those constraints here so the page grows with its content
     and scrolls normally within the outer document. */
  height: auto;
  max-height: none;
  overflow: visible;
  min-height: calc(100dvh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--abx-space-8) var(--abx-space-4);
  background: var(--abx-bg);
}

.abx-card {
  width: 100%;
  max-width: 34rem;
  background: var(--abx-surface-solid);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  box-shadow: var(--abx-elev-sheet);
  padding: var(--abx-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-5);
}

/* Stacked sibling cards (issues, memory, appointments, account, etc.) */
.abx-card + .abx-card {
  margin-top: var(--abx-space-5);
}

/* Grid already provides gap — avoid doubling */
.abx-detail-grid > .abx-card + .abx-card {
  margin-top: 0;
}

.abx-field {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
  min-width: 0;
}

.abx-field__label {
  display: block;
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-100);
  margin-bottom: var(--abx-space-2);
}

.abx-field .abx-field__label {
  margin-bottom: 0;
}

.abx-input,
.abx-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
  color: var(--abx-text);
  font-family: var(--abx-font-sans);
  font-size: var(--abx-fs-200);
  line-height: var(--abx-lh-normal);
  padding: var(--abx-space-2) var(--abx-space-4);
}

/* Global stylesheet sets input { height: 100% } for .data-field layouts;
   override inside abx so text fields match select height in filter bars. */
.abx-app input.abx-input,
.abx-app select.abx-input {
  height: auto;
  min-height: 2.5rem;
}

.abx-input:focus,
.abx-textarea:focus {
  outline: 2px solid var(--abx-focus);
  outline-offset: 1px;
}

.abx-textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.abx-memory-list {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
}

.abx-memory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abx-space-3);
  padding: var(--abx-space-3) var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-sunken);
}

.abx-memory-item__text {
  font-size: var(--abx-fs-100);
}

.abx-memory-item__key {
  font-family: var(--abx-font-display);
  font-weight: 600;
  display: block;
}

/* 11. STAFF CLIENT DIRECTORY ================================================
   Management views for staff — list + detail layouts using the same tokens
   as the AI simple pages, but wider and table-oriented. */

.abx-staff-page {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--abx-space-6) var(--abx-space-4) var(--abx-space-10);
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-6);
}

.abx-staff-page .abx-card {
  max-width: none;
}

.abx-staff-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--abx-space-4);
}

.abx-staff-header__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abx-space-3);
}

.abx-client-identity {
  display: flex;
  align-items: center;
  gap: var(--abx-space-3);
}

.abx-client-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 100%;
  background: no-repeat center/90% url('/images/icon-user.svg');
  border: 1px solid var(--abx-beige-300, rgba(0, 0, 0, 0.12));
}

.abx-staff-notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-3);
  margin-bottom: var(--abx-space-4);
}

.abx-staff-note {
  padding: var(--abx-space-3);
  border-radius: var(--abx-radius-md);
  background: var(--abx-beige-100, rgba(0, 0, 0, 0.03));
}

.abx-staff-note__meta {
  display: block;
  margin-top: var(--abx-space-2);
  font-size: var(--abx-fs-100);
  opacity: 0.65;
}

.abx-staff-notes-form {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
}

.abx-staff-notes-form .abx-btn {
  min-height: 44px;
}

.abx-review-visibility-toggle {
  margin-top: var(--abx-space-2);
  min-height: 44px;
  padding: 8px 0;
}

/* Generic toggle switch for abx-app surfaces that don't load the legacy
   stylesheet.css (e.g. /ai/* pages) - mirrors .toggle-label/.toggle-switch
   from stylesheet.css but namespaced for the design system. */
.abx-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--abx-space-3);
  cursor: pointer;
  min-height: 44px;
  padding: 8px 0;
}

.abx-toggle-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.abx-toggle-switch {
  position: relative;
  width: 48px;
  height: 28px;
  background: var(--abx-toggle-track, #e4dfd5);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--abx-toggle-track-border, rgba(23, 23, 22, 0.15));
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.abx-toggle-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: var(--abx-toggle-knob, #ffffff);
  border-radius: 50%;
  box-shadow: var(--abx-toggle-knob-shadow, 0 1px 2px rgba(23, 23, 22, 0.28), 0 0 0 1px rgba(23, 23, 22, 0.14));
  transition: transform 0.2s ease;
}

.abx-toggle-label input[type="checkbox"]:checked + .abx-toggle-switch {
  background: var(--abx-toggle-track-on, #188038);
  box-shadow: none;
}

.abx-toggle-label input[type="checkbox"]:checked + .abx-toggle-switch::before {
  transform: translateX(20px);
}

.abx-toggle-label input[type="checkbox"]:focus-visible + .abx-toggle-switch {
  outline: 2px solid var(--abx-focus);
  outline-offset: 2px;
}

.abx-toggle-text {
  font-family: var(--abx-font-display);
  font-weight: 500;
  font-size: var(--abx-fs-100);
}

.abx-staff-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--abx-space-3);
}

.abx-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abx-space-4);
}

@media (min-width: 48rem) {
  .abx-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.abx-stat-card {
  background: var(--abx-surface-solid);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  padding: var(--abx-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-1);
}

.abx-stat-card__label {
  font-size: var(--abx-fs-50);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--abx-text-subtle);
}

.abx-stat-card__value {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-400);
  line-height: var(--abx-lh-tight);
}

.abx-filter-bar {
  display: grid;
  /* Row gap separates field groups; each group keeps its own label/control
     spacing via .abx-field so a tall search box doesn't eat into the gap. */
  row-gap: var(--abx-space-5);
  column-gap: var(--abx-space-3);
}

.abx-filter-bar__submit {
  display: flex;
  align-items: flex-end;
}

@media (min-width: 48rem) {
  .abx-filter-bar {
    grid-template-columns: 2fr repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    row-gap: var(--abx-space-3);
  }

  .abx-filter-bar__submit .abx-btn {
    width: auto;
  }
}

.abx-data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
}

.abx-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--abx-fs-100);
}

.abx-data-table th,
.abx-data-table td {
  padding: var(--abx-space-3) var(--abx-space-4);
  text-align: left;
  border-bottom: 1px solid var(--abx-border);
  vertical-align: top;
}

.abx-data-table th {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-50);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--abx-text-subtle);
  background: var(--abx-surface-sunken);
}

.abx-data-table tr:last-child td {
  border-bottom: 0;
}

.abx-data-table a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.abx-th-label-with-action {
  display: inline-flex;
  align-items: center;
  gap: var(--abx-space-1);
}

.abx-contact-reveal-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--abx-radius-sm);
  background: transparent;
  color: var(--abx-text-muted);
  cursor: pointer;
  vertical-align: middle;
}

.abx-contact-reveal-toggle:hover {
  color: var(--abx-text);
  background: var(--abx-surface-sunken);
}

.abx-contact-reveal-toggle:focus-visible {
  outline: 2px solid var(--abx-accent);
  outline-offset: 2px;
}

.abx-tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--abx-space-3);
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--abx-border);
  background: var(--abx-surface-sunken);
}

.abx-tier-badge--platinum { background: #ece9f7; border-color: #c9c2ea; }
.abx-tier-badge--gold { background: #f7f0df; border-color: #e5d2a8; }
.abx-tier-badge--silver { background: #eef1f3; border-color: #c8d0d6; }
.abx-tier-badge--bronze { background: #f6ece4; border-color: #dfc7b3; }

.abx-consent-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--abx-space-1);
  padding: 0.125rem var(--abx-space-2);
  border-radius: var(--abx-radius-pill);
  font-size: var(--abx-fs-50);
  font-weight: 600;
}

.abx-consent-pill--yes {
  background: #e7f3ea;
  color: #245c31;
}

.abx-consent-pill--no {
  background: var(--abx-surface-sunken);
  color: var(--abx-text-subtle);
}

.abx-star-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--abx-space-1);
  font-weight: 600;
}

.abx-star-rating__stars {
  color: #b8860b;
  letter-spacing: 0.04em;
}

.abx-detail-grid {
  display: grid;
  gap: var(--abx-space-5);
}

@media (min-width: 56rem) {
  .abx-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .abx-detail-grid__full {
    grid-column: 1 / -1;
  }
}

.abx-detail-list {
  display: grid;
  gap: var(--abx-space-3);
}

.abx-detail-list__row {
  display: grid;
  gap: var(--abx-space-1);
}

@media (min-width: 36rem) {
  .abx-detail-list__row {
    grid-template-columns: 9rem 1fr;
    gap: var(--abx-space-4);
  }
}

.abx-detail-list__label {
  font-size: var(--abx-fs-50);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--abx-text-muted);
}

.abx-detail-list__value {
  font-size: var(--abx-fs-100);
}

.abx-review-card,
.abx-appointment-row {
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  padding: var(--abx-space-4);
  background: var(--abx-surface-sunken);
}

.abx-review-card + .abx-review-card,
.abx-appointment-row + .abx-appointment-row {
  margin-top: var(--abx-space-3);
}

.abx-review-card__meta,
.abx-appointment-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-2) var(--abx-space-4);
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
  margin-bottom: var(--abx-space-2);
}

.abx-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-2);
}

.abx-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--abx-space-3);
  border-radius: var(--abx-radius-pill);
  border: 1px solid var(--abx-border);
  background: var(--abx-surface-solid);
  font-size: var(--abx-fs-50);
}

.abx-tag--critical {
  border-color: #e0453f;
  background: #fdecea;
  color: #8a1f1a;
  font-weight: 600;
}

.abx-tag--ok {
  border-color: #188038;
  background: #e6f4ea;
  color: #0f5c26;
  font-weight: 600;
}

.abx-alert-card {
  width: 100%;
  max-width: none;
  background: #fff9e6;
  border: 1px solid #e8c34a;
  border-radius: var(--abx-radius-lg);
  padding: var(--abx-space-5) var(--abx-space-6);
  margin-bottom: var(--abx-space-5);
}

.abx-alert-card--critical {
  background: #fdecea;
  border-color: #e0453f;
}

.abx-gdpr-note {
  padding: var(--abx-space-4);
  border-radius: var(--abx-radius-md);
  border: 1px solid var(--abx-border);
  background: var(--abx-surface-sunken);
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
}

.abx-empty-state {
  text-align: center;
  padding: var(--abx-space-8) var(--abx-space-4);
  color: var(--abx-text-muted);
}

.abx-empty-state img,
.abx-empty-state .empty-icon,
.abx-empty-state__icon {
  display: block;
  margin: 0 auto var(--abx-space-4);
}

.abx-empty-state__icon {
  opacity: 0.45;
}

.abx-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abx-space-3);
  font-size: var(--abx-fs-100);
}

/* 11b. CLIENT + STAFF PORTAL PAGES =========================================
   Shared primitives for migrated account, favorites, reviews, and similar
   scrollable portal surfaces. Scoped under .abx-app only. */

.abx-portal-page {
  padding: var(--abx-space-5) var(--abx-space-4) var(--abx-space-8);
}

@media (min-width: 48rem) {
  .abx-portal-page {
    padding-left: var(--abx-space-6);
    padding-right: var(--abx-space-6);
  }
}

.abx-portal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--abx-space-4);
  margin-bottom: var(--abx-space-5);
}

.abx-portal-header__count {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--abx-space-3);
  border-radius: var(--abx-radius-pill);
  background: var(--abx-surface-sunken);
  border: 1px solid var(--abx-border);
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.abx-field__message,
.abx-app .field-message {
  display: none;
  margin-top: var(--abx-space-2);
  font-size: var(--abx-fs-50);
  color: var(--abx-danger);
  line-height: var(--abx-lh-snug);
  white-space: pre-line;
}

.abx-field__message.is-visible,
.abx-app .field-message:not(:empty) {
  display: block;
}

.abx-input-wrap,
.abx-app .data-field {
  display: flex;
  align-items: center;
  gap: var(--abx-space-2);
  min-height: 2.5rem;
  padding: 0 var(--abx-space-3);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
}

.abx-input-wrap .abx-input,
.abx-app .data-field .abx-input,
.abx-app .data-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  border: 0;
  background: transparent;
  padding: var(--abx-space-2) 0;
  box-shadow: none;
}

.abx-input-wrap:focus-within,
.abx-app .data-field:focus-within {
  border-color: var(--abx-border-strong);
  box-shadow: 0 0 0 3px rgba(23, 23, 22, 0.08);
}

.abx-app .data-field.i,
.abx-field.is-invalid .abx-input-wrap {
  border-color: var(--abx-danger-border);
  box-shadow: 0 0 0 3px var(--abx-danger-soft);
}

.abx-password-toggle,
.abx-app .password-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--abx-radius-sm);
  background: transparent;
  cursor: pointer;
}

.abx-password-toggle:hover,
.abx-app .password-toggle:hover {
  background: var(--abx-surface-sunken);
}

.abx-password-toggle img,
.abx-app .password-toggle img {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.65;
}

.abx-password-strength,
.abx-app .password-strength {
  display: flex;
  align-items: center;
  gap: var(--abx-space-3);
  margin-top: var(--abx-space-3);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--abx-dur-3) var(--abx-ease), transform var(--abx-dur-3) var(--abx-ease);
}

.abx-password-strength.is-visible,
.abx-app .password-strength.visible {
  opacity: 1;
  transform: translateY(0);
}

.abx-password-strength__bar,
.abx-app .strength-bar {
  flex: 1;
  height: 0.25rem;
  border-radius: var(--abx-radius-pill);
  background: var(--abx-surface-sunken);
  overflow: hidden;
}

.abx-password-strength__fill,
.abx-app .strength-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width var(--abx-dur-3) var(--abx-ease), background-color var(--abx-dur-3) var(--abx-ease);
}

.abx-app .strength-fill.weak { width: 25%; background: #ea4335; }
.abx-app .strength-fill.fair { width: 50%; background: #fbbc04; }
.abx-app .strength-fill.good { width: 75%; background: #34a853; }
.abx-app .strength-fill.strong { width: 100%; background: #188038; }

.abx-password-strength__text,
.abx-app .strength-text {
  min-width: 3rem;
  font-size: var(--abx-fs-50);
  font-weight: 600;
  color: var(--abx-text-muted);
}

.abx-password-requirements,
.abx-app .password-requirements {
  display: grid;
  gap: var(--abx-space-2);
  margin-top: var(--abx-space-3);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--abx-dur-3) var(--abx-ease), max-height var(--abx-dur-3) var(--abx-ease);
}

.abx-password-requirements.is-visible,
.abx-app .password-requirements.visible {
  opacity: 1;
  max-height: 12rem;
}

.abx-password-requirements .requirement,
.abx-app .password-requirements .requirement {
  display: flex;
  align-items: center;
  gap: var(--abx-space-2);
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
}

.abx-app .password-requirements .requirement.met {
  color: #188038;
}

.abx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-3);
  align-items: center;
  margin-top: var(--abx-space-5);
}

.abx-actions--end {
  justify-content: flex-end;
}

.abx-btn.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.abx-service-list {
  display: grid;
  gap: var(--abx-space-3);
}

.abx-service-card {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-4);
  padding: var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-sunken);
}

@media (min-width: 36rem) {
  .abx-service-card {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.abx-service-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abx-space-3);
}

.abx-service-card__category {
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-50);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--abx-text-subtle);
}

.abx-service-card__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--abx-radius-sm);
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
}

.abx-service-card__remove:hover {
  opacity: 1;
  background: var(--abx-surface-solid);
}

.abx-service-card__remove img {
  width: 1rem;
  height: 1rem;
}

.abx-service-card__title {
  margin: var(--abx-space-2) 0;
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-200);
  font-weight: 600;
}

.abx-service-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-3) var(--abx-space-4);
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
}

.abx-service-card__price {
  font-weight: 600;
  color: var(--abx-text);
}

.abx-service-card__description {
  margin: var(--abx-space-2) 0 0;
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
  line-height: var(--abx-lh-normal);
}

.abx-service-card__actions {
  flex: none;
  display: flex;
  align-items: flex-start;
}

.abx-star-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abx-space-3);
  margin: var(--abx-space-5) 0;
}

.abx-star-picker__label {
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.abx-star-picker__controls {
  display: flex;
  gap: var(--abx-space-1);
}

.abx-star-picker__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--abx-radius-sm);
  background: transparent;
  color: var(--abx-border-strong);
  cursor: pointer;
  transition: color var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-1) var(--abx-ease);
}

.abx-star-picker__btn:hover,
.abx-star-picker__btn.is-hover {
  color: #b8860b;
  transform: scale(1.05);
}

.abx-star-picker__btn.is-active {
  color: #b8860b;
}

.abx-star-picker__btn svg {
  width: 1.75rem;
  height: 1.75rem;
}

.abx-star-picker__text {
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
}

.abx-char-count {
  display: block;
  margin-top: var(--abx-space-2);
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
  text-align: right;
}

.abx-toast-host {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--abx-z-toast);
  width: min(92vw, 26rem);
  pointer-events: none;
}

.abx-toast-host .abx-toast {
  position: relative;
  left: auto;
  right: auto;
  transform: translateY(-120%);
  pointer-events: auto;
}

.abx-toast-host .abx-toast.is-active {
  transform: translateY(0);
}

.abx-toast--success {
  color: #188038;
}

.abx-toast__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--abx-radius-sm);
  background: transparent;
  cursor: pointer;
}

.abx-toast__close img {
  width: 1rem;
  height: 1rem;
  opacity: 0.6;
}

/* 11c. STAFF OPS PAGES (issues, consent, analytics, ebook) ================= */

.abx-staff-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-3);
  align-items: center;
}

.abx-sync-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abx-space-2) var(--abx-space-4);
  margin-bottom: var(--abx-space-5);
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
}

.abx-sync-status__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #188038;
}

.abx-sync-status__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--abx-radius-sm);
  background: transparent;
  color: var(--abx-text-subtle);
  cursor: pointer;
}

.abx-stat-card__delta {
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
}

.abx-stat-card__delta--positive { color: #188038; }
.abx-stat-card__delta--negative { color: var(--abx-danger); }

.abx-section {
  margin-bottom: var(--abx-space-6);
}

.abx-section__title {
  margin: 0 0 var(--abx-space-4);
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-200);
  font-weight: 600;
}

.abx-issue-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem var(--abx-space-3);
  border-radius: var(--abx-radius-pill);
  font-size: var(--abx-fs-50);
  font-weight: 600;
  text-transform: capitalize;
}

.abx-issue-tag--severity-low { background: #e3f2fd; color: #1565c0; }
.abx-issue-tag--severity-medium { background: #fff8e1; color: #f57f17; }
.abx-issue-tag--severity-high { background: #ffebee; color: #c62828; }
.abx-issue-tag--severity-critical { background: #b71c1c; color: #fff; }
.abx-issue-tag--status-new { background: #e3f2fd; color: #1e5aa7; }
.abx-issue-tag--status-triaged { background: #ede7f6; color: #5e35b1; }
.abx-issue-tag--status-in_progress { background: #fff3e0; color: #ef6c00; }
.abx-issue-tag--status-waiting_client { background: #f3e5f5; color: #6a1b9a; }
.abx-issue-tag--status-resolved { background: #e8f5e9; color: #2e7d32; }
.abx-issue-tag--status-closed { background: #eceff1; color: #455a64; }

.abx-issue-table {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
}

.abx-issue-table__row {
  display: grid;
  grid-template-columns: 4rem 1.6fr 1fr 1fr 1fr 1fr 1fr 1.2fr 4rem;
  gap: var(--abx-space-3);
  align-items: center;
  padding: var(--abx-space-3) var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
  font-size: var(--abx-fs-100);
}

.abx-issue-table__row--head {
  background: var(--abx-surface-sunken);
  font-weight: 600;
}

.abx-issue-table__subject {
  font-weight: 600;
}

.abx-issue-table__link {
  font-weight: 600;
  color: var(--abx-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.abx-consent-group-card {
  padding: var(--abx-space-5);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-solid);
}

.abx-consent-group-card__header {
  display: flex;
  justify-content: space-between;
  gap: var(--abx-space-4);
  align-items: flex-start;
}

.abx-consent-group-card__count {
  min-width: 5.5rem;
  padding: var(--abx-space-3);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-sunken);
  border: 1px solid var(--abx-border);
  text-align: center;
}

.abx-consent-group-card__count-value {
  display: block;
  font-size: var(--abx-fs-300);
  font-weight: 700;
  line-height: 1;
}

.abx-consent-form-entry {
  display: block;
  padding: var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-sunken);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-1) var(--abx-ease);
}

.abx-consent-form-entry:hover {
  border-color: var(--abx-border-strong);
  transform: translateY(-1px);
}

.abx-consent-form-entry__top {
  display: flex;
  justify-content: space-between;
  gap: var(--abx-space-3);
  align-items: flex-start;
}

.abx-consent-form-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-2);
  align-items: center;
  margin-top: var(--abx-space-3);
}

.abx-consent-form-entry__action {
  margin-left: auto;
  font-weight: 600;
}

.abx-app .metric-grid,
.abx-stat-grid--metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abx-space-3);
}

@media (min-width: 48rem) {
  .abx-app .metric-grid,
  .abx-stat-grid--metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.abx-app .metric-card {
  position: relative;
  padding: var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-solid);
}

.abx-app .metric-label {
  font-size: var(--abx-fs-50);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--abx-text-subtle);
}

.abx-app .metric-value {
  margin-top: var(--abx-space-2);
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-300);
  font-weight: 700;
  line-height: 1.1;
}

.abx-app .metric-change {
  margin-top: var(--abx-space-2);
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
}

.abx-app .metric-change.positive { color: #188038; }
.abx-app .metric-change.negative { color: var(--abx-danger); }

.abx-app .metric-info-btn,
.abx-app .sync-info-btn,
.abx-app .tier-info-btn {
  position: absolute;
  top: var(--abx-space-3);
  right: var(--abx-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--abx-radius-sm);
  background: transparent;
  color: var(--abx-text-subtle);
  cursor: pointer;
}

.abx-app .subcontainer {
  margin-bottom: var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-solid);
  overflow: hidden;
}

.abx-app .subcontainer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abx-space-3);
  padding: var(--abx-space-4);
  cursor: pointer;
  background: var(--abx-surface-sunken);
}

.abx-app .subcontainer-name {
  font-family: var(--abx-font-display);
  font-weight: 600;
}

.abx-app .subcontainer-view {
  padding: var(--abx-space-4);
}

.abx-app .analytics-list {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
}

.abx-app .analytics-list-item,
.abx-app .ebook-fulfillment-item {
  display: grid;
  grid-template-columns: 2rem 1fr auto auto;
  gap: var(--abx-space-3);
  align-items: center;
  padding: var(--abx-space-3) var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-sunken);
  font-size: var(--abx-fs-100);
}

.abx-app .analytics-list-title {
  margin: 0 0 var(--abx-space-3);
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.abx-app .analytics-empty,
.abx-app .analytics-list-section {
  margin-bottom: var(--abx-space-5);
}

.abx-app .list-rank {
  font-weight: 700;
  color: var(--abx-text-subtle);
}

.abx-app .list-name { font-weight: 600; }
.abx-app .list-value { font-weight: 600; text-align: right; }
.abx-app .list-meta { color: var(--abx-text-muted); font-size: var(--abx-fs-50); text-align: right; }

.abx-app .tier-bar {
  margin-bottom: var(--abx-space-3);
}

.abx-app .tier-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--abx-space-1);
}

.abx-app .tier-progress {
  height: 0.4rem;
  border-radius: var(--abx-radius-pill);
  background: var(--abx-surface-sunken);
  overflow: hidden;
}

.abx-app .tier-fill {
  height: 100%;
  border-radius: inherit;
}

.abx-app .tier-fill.platinum { background: #cfd8dc; }
.abx-app .tier-fill.gold { background: #d4af37; }
.abx-app .tier-fill.silver { background: #b0bec5; }
.abx-app .tier-fill.bronze { background: #bcaaa4; }

.abx-app .tooltip-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--abx-z-toast) + 10);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--abx-space-4);
}

.abx-app .tooltip-modal.active {
  display: flex;
}

.abx-app .tooltip-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 22, 0.45);
}

.abx-app .tooltip-content {
  position: relative;
  z-index: 1;
  width: min(92vw, 24rem);
  padding: var(--abx-space-5);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-solid);
  box-shadow: var(--abx-elev-toast);
}

.abx-app .tooltip-close {
  position: absolute;
  top: var(--abx-space-3);
  right: var(--abx-space-3);
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
}

.abx-app .btn.reload {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--abx-radius-sm);
  background: var(--abx-surface-sunken) center/60% no-repeat url('/images/icon-reload.svg');
  cursor: pointer;
}

@media (max-width: 56rem) {
  .abx-issue-table__row {
    grid-template-columns: 1fr;
  }

  .abx-issue-table__row--head {
    display: none;
  }

  .abx-issue-table__row span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .abx-issue-table__row span::before {
    content: attr(data-label);
    font-size: var(--abx-fs-50);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--abx-text-subtle);
  }

  .abx-consent-group-card__header {
    flex-direction: column;
  }

  .abx-app .analytics-list-item,
  .abx-app .ebook-fulfillment-item {
    grid-template-columns: 1fr;
  }

  .abx-app .list-value,
  .abx-app .list-meta {
    text-align: left;
  }
}

/* 11d. STAFF SETTINGS + MARKETING (tabbed forms) ===========================
   Settings and drip campaigns reuse legacy hook classes (settings-tab,
   settings-panel, data-field, toggle-switch) for JS compatibility; visual
   treatment is scoped under .abx-app only. */

.abx-settings-shell {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.abx-app .settings-tabs {
  display: flex;
  gap: var(--abx-space-1);
  padding: var(--abx-space-4);
  border-bottom: 1px solid var(--abx-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.abx-app .settings-tabs::-webkit-scrollbar {
  display: none;
}

.abx-app .settings-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--abx-space-2);
  padding: var(--abx-space-2) var(--abx-space-4);
  border: 0;
  border-radius: var(--abx-radius-md);
  background: transparent;
  font-family: var(--abx-font-body);
  font-size: var(--abx-fs-100);
  font-weight: 500;
  color: var(--abx-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.abx-app .settings-tab:hover {
  color: var(--abx-text);
  background: var(--abx-surface-sunken);
}

.abx-app .settings-tab.active {
  color: var(--abx-on-accent);
  background: var(--abx-accent);
}

.abx-app .settings-tab.active i,
.abx-app .settings-tab.active span {
  color: var(--abx-on-accent);
}

.abx-app .settings-tab i {
  font-size: 1rem;
}

.abx-app .settings-panels {
  padding: var(--abx-space-5) var(--abx-space-4);
}

.abx-app .settings-panel {
  display: none;
}

.abx-app .settings-panel.active {
  display: block;
  animation: abx-settings-fade-in 0.25s ease;
}

@keyframes abx-settings-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.abx-app .settings-section {
  margin-bottom: var(--abx-space-6);
}

.abx-app .settings-section:last-child {
  margin-bottom: 0;
}

.abx-app .settings-section-title {
  margin: 0 0 var(--abx-space-4);
  padding-bottom: var(--abx-space-2);
  border-bottom: 1px solid var(--abx-border);
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-200);
  font-weight: 600;
  color: var(--abx-text);
}

.abx-app .settings-field {
  margin-bottom: var(--abx-space-5);
}

.abx-app .settings-field:last-child {
  margin-bottom: 0;
}

.abx-app .settings-field > label {
  display: block;
  margin-bottom: var(--abx-space-2);
  font-family: var(--abx-font-body);
  font-size: var(--abx-fs-100);
  font-weight: 600;
  color: var(--abx-text);
}

.abx-app .settings-field .data-field {
  width: 100%;
}

.abx-app .settings-field .data-field .icon {
  flex: none;
  padding: 0 var(--abx-space-1) 0 var(--abx-space-3);
}

.abx-app .settings-field .data-field .icon i {
  font-size: 1rem;
  color: var(--abx-text-subtle);
}

.abx-app .settings-field .data-field:focus-within .icon i {
  color: var(--abx-text-muted);
}

.abx-app .field-hint {
  display: block;
  margin-top: var(--abx-space-2);
  padding-left: var(--abx-space-1);
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
  line-height: var(--abx-lh-snug);
}

.abx-app .field-hint--spaced {
  margin-bottom: var(--abx-space-4);
}

.abx-app .settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abx-space-4);
}

.abx-app .settings-field textarea {
  width: 100%;
  min-height: 6.25rem;
  padding: var(--abx-space-3) var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
  font-family: var(--abx-font-body);
  font-size: var(--abx-fs-100);
  color: var(--abx-text);
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.abx-app .settings-field textarea:hover:not(:focus) {
  border-color: var(--abx-border-strong);
}

.abx-app .settings-field textarea:focus {
  outline: none;
  border-color: var(--abx-border-strong);
  box-shadow: 0 0 0 3px rgba(23, 23, 22, 0.08);
}

.abx-app .settings-field textarea::placeholder {
  color: var(--abx-text-subtle);
}

.abx-app .settings-toggle-field {
  margin-bottom: var(--abx-space-4);
}

.abx-app .toggle-label {
  display: flex;
  align-items: center;
  gap: var(--abx-space-3);
  cursor: pointer;
}

.abx-app .toggle-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.abx-app .toggle-switch {
  position: relative;
  flex: none;
  width: 3rem;
  height: 1.75rem;
  border-radius: var(--abx-radius-pill);
  background: var(--abx-toggle-track);
  box-shadow: inset 0 0 0 1px var(--abx-toggle-track-border);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.abx-app .toggle-switch::before {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--abx-toggle-knob);
  box-shadow: var(--abx-toggle-knob-shadow);
  transition: transform 0.25s ease;
}

.abx-app .toggle-label input[type="checkbox"]:checked + .toggle-switch {
  background: var(--abx-toggle-track-on);
  box-shadow: none;
}

.abx-app .toggle-label input[type="checkbox"]:checked + .toggle-switch::before {
  transform: translateX(1.25rem);
}

.abx-app .toggle-label input[type="checkbox"]:focus-visible + .toggle-switch {
  outline: 2px solid var(--abx-accent);
  outline-offset: 2px;
}

.abx-app .toggle-text {
  font-size: var(--abx-fs-100);
  font-weight: 500;
  color: var(--abx-text);
}

.abx-app .settings-actions {
  margin-top: var(--abx-space-5);
  padding-top: var(--abx-space-5);
  border-top: 1px solid var(--abx-border);
}

.abx-app .settings-actions .cta.primary,
.abx-app .settings-actions button.cta.primary,
.abx-app #push-toggle-btn.cta.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 12.5rem;
  padding: 0 var(--abx-space-5);
  border: 0;
  border-radius: var(--abx-radius-md);
  font-family: var(--abx-font-body);
  font-size: var(--abx-fs-100);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.abx-app .settings-actions .cta.primary,
.abx-app .settings-actions button.cta.primary {
  background: var(--abx-accent);
  color: var(--abx-on-accent);
}

.abx-app .settings-actions .cta.primary:hover:not([disabled]),
.abx-app .settings-actions button.cta.primary:hover:not([disabled]) {
  filter: brightness(0.95);
}

.abx-app .settings-actions .cta.primary[disabled],
.abx-app .settings-actions button.cta.primary[disabled],
.abx-app #push-toggle-btn.cta.secondary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.abx-app #push-toggle-btn.cta.secondary {
  min-width: auto;
  background: var(--abx-surface-sunken);
  color: var(--abx-text);
  border: 1px solid var(--abx-border);
}

.abx-app #push-toggle-btn.cta.secondary:hover:not([disabled]) {
  background: var(--abx-surface-solid);
}

.abx-app .preview-client-results {
  position: relative;
  z-index: 5;
  max-height: 15rem;
  margin-top: var(--abx-space-1);
  overflow-y: auto;
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
  box-shadow: var(--abx-elev-card);
}

.abx-app .preview-client-result {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--abx-space-3) var(--abx-space-4);
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--abx-font-body);
  cursor: pointer;
}

.abx-app .preview-client-result:hover,
.abx-app .preview-client-result:focus-visible {
  background: var(--abx-surface-sunken);
}

.abx-app .preview-client-result strong {
  font-size: var(--abx-fs-100);
  color: var(--abx-text);
}

.abx-app .preview-client-result span {
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
}

.abx-app .preview-client-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-2);
  margin-top: var(--abx-space-3);
}

.abx-app .preview-client-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--abx-space-2);
  padding: var(--abx-space-2) var(--abx-space-2) var(--abx-space-2) var(--abx-space-3);
  border-radius: var(--abx-radius-pill);
  background: var(--abx-surface-sunken);
  font-size: var(--abx-fs-100);
  font-weight: 500;
  color: var(--abx-text);
}

.abx-app .preview-client-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: calc(var(--abx-space-2) * -1) calc(var(--abx-space-1) * -1) calc(var(--abx-space-2) * -1) 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--abx-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.abx-app .preview-client-chip__remove:hover,
.abx-app .preview-client-chip__remove:focus-visible {
  background: rgba(23, 23, 22, 0.08);
}

.abx-app .drip-step {
  padding-top: var(--abx-space-2);
}

@media (max-width: 37.5rem) {
  .abx-app .settings-tabs {
    padding: var(--abx-space-3);
    gap: var(--abx-space-2);
  }

  .abx-app .settings-tab {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 4.25rem;
    min-height: 3.25rem;
    padding: var(--abx-space-2);
    font-size: 0.625rem;
    text-align: center;
    line-height: 1.2;
  }

  .abx-app .settings-tab span {
    display: block;
    white-space: normal;
    max-width: 4rem;
    color: var(--abx-text-muted);
    font-weight: 600;
  }

  .abx-app .settings-tab.active span {
    color: var(--abx-on-accent);
  }

  .abx-app .settings-tab.active i {
    color: var(--abx-on-accent);
  }

  .abx-app .settings-tab i {
    font-size: 1rem;
  }

  .abx-app .settings-panels {
    padding: var(--abx-space-4) var(--abx-space-3);
  }

  .abx-app .settings-row {
    grid-template-columns: 1fr;
  }

  .abx-app .settings-actions .cta.primary,
  .abx-app .settings-actions button.cta.primary {
    width: 100%;
    min-width: 0;
  }
}

/* 11e. CLIENT CORE PORTAL (dashboard, account, appointments) ================
   Legacy hook classes preserved for script.js tab expand, profile edit,
   cancel modal, and referral copy. Visual treatment scoped under .abx-app. */

.abx-dashboard-header {
  align-items: center;
}

.abx-dashboard-header .dashboard-avatar {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--abx-border);
  background: no-repeat center/90% url('/images/icon-user.svg');
}

.abx-app .dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abx-space-3);
  margin-bottom: var(--abx-space-6);
}

.abx-app .stat-card {
  display: flex;
  align-items: flex-start;
  gap: var(--abx-space-3);
  padding: var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-sunken);
}

.abx-app .stat-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--abx-radius-md);
  background: var(--abx-accent);
}

.abx-app .stat-icon img {
  width: 1.25rem;
  height: 1.25rem;
}

.abx-app .stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.abx-app .stat-label {
  font-size: var(--abx-fs-50);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.abx-app .stat-value {
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-300);
  font-weight: 600;
  color: var(--abx-text);
}

.abx-app .stat-value.empty {
  font-size: var(--abx-fs-200);
  color: var(--abx-text-muted);
}

.abx-app .stat-subvalue {
  font-size: var(--abx-fs-50);
  color: var(--abx-text-muted);
}

.abx-app .stat-badge {
  display: inline-block;
  width: fit-content;
  margin-top: var(--abx-space-1);
  padding: 0.2rem 0.5rem;
  border-radius: var(--abx-radius-pill);
  background: var(--abx-accent);
  color: var(--abx-on-accent);
  font-size: var(--abx-fs-50);
  font-weight: 600;
}

.abx-app .section-subtitle {
  margin: 0 0 var(--abx-space-4);
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-200);
  font-weight: 600;
}

.abx-app .dashboard-referral {
  margin-bottom: var(--abx-space-6);
}

.abx-app .referral-card {
  padding: var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-sunken);
}

.abx-app .referral-copy {
  margin: 0 0 var(--abx-space-3);
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
}

.abx-app .referral-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abx-space-3);
}

.abx-app .referral-code {
  padding: var(--abx-space-2) var(--abx-space-3);
  border: 1px dashed var(--abx-border-strong);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-200);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.abx-app .referral-copy-btn {
  min-height: 2.75rem;
  padding: 0 var(--abx-space-4);
  border: 0;
  border-radius: var(--abx-radius-md);
  background: var(--abx-accent);
  color: var(--abx-on-accent);
  font-weight: 600;
  font-size: var(--abx-fs-100);
  cursor: pointer;
}

.abx-app .dashboard-actions,
.abx-app .dashboard-next,
.abx-app .dashboard-recent {
  margin-bottom: var(--abx-space-6);
}

.abx-app .action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-3);
}

.abx-app .action-btn {
  display: inline-flex;
  flex: 1 1 8.75rem;
  align-items: center;
  justify-content: center;
  gap: var(--abx-space-2);
  min-height: 2.75rem;
  padding: var(--abx-space-3) var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
  color: var(--abx-text);
  font-size: var(--abx-fs-100);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.abx-app .action-btn:hover {
  background: var(--abx-accent);
  border-color: var(--abx-accent);
  color: var(--abx-on-accent);
}

.abx-app .action-btn.primary {
  background: var(--abx-accent);
  border-color: var(--abx-accent);
  color: var(--abx-on-accent);
}

.abx-app .action-btn img {
  width: 1.125rem;
  height: 1.125rem;
}

.abx-app .next-appointment-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abx-space-4);
  padding: var(--abx-space-5);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-sunken);
}

.abx-app .next-details {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
}

.abx-app .next-date .day {
  display: block;
  font-size: var(--abx-fs-50);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--abx-text-subtle);
}

.abx-app .next-date .date {
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-300);
  font-weight: 600;
}

.abx-app .next-time,
.abx-app .next-service,
.abx-app .next-location {
  display: flex;
  align-items: center;
  gap: var(--abx-space-2);
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
}

.abx-app .next-time img,
.abx-app .next-service img,
.abx-app .next-location img {
  width: 1rem;
  height: 1rem;
  opacity: 0.65;
}

.abx-app .action-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--abx-space-4);
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-md);
  color: var(--abx-text);
  font-size: var(--abx-fs-100);
  font-weight: 500;
  text-decoration: none;
}

.abx-app .recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
  margin-bottom: var(--abx-space-4);
}

.abx-app .recent-item {
  display: flex;
  align-items: center;
  gap: var(--abx-space-4);
  padding: var(--abx-space-3) var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-sunken);
}

.abx-app .recent-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.5rem;
}

.abx-app .recent-date .month {
  font-size: var(--abx-fs-50);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--abx-text-subtle);
}

.abx-app .recent-date .day {
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-300);
  font-weight: 600;
}

.abx-app .recent-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.abx-app .recent-service {
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.abx-app .recent-price {
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
}

.abx-app .rebook-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--abx-radius-sm);
  background: var(--abx-accent);
}

.abx-app .rebook-btn img {
  width: 1.125rem;
  height: 1.125rem;
}

.abx-app .view-all-link {
  display: block;
  text-align: center;
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
  text-decoration: underline;
}

.abx-app .dashboard-empty .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--abx-space-8) var(--abx-space-5);
  border: 1px dashed var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-sunken);
  text-align: center;
}

.abx-app .empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--abx-space-4);
  opacity: 0.35;
}

.abx-app .dashboard-empty .cta.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: var(--abx-space-4);
  padding: 0 var(--abx-space-5);
  border-radius: var(--abx-radius-md);
  background: var(--abx-accent);
  color: var(--abx-on-accent);
  font-weight: 600;
  text-decoration: none;
}

/* My account profile card */
.abx-app#myDetails .account {
  width: 100%;
  padding: var(--abx-space-4) var(--abx-space-4) 0;
}

.abx-app#myDetails .account .header .avatar-wrap {
  width: 6.25rem;
  height: 6.25rem;
}

.abx-app#myDetails .account .header .display {
  width: 100%;
  height: 100%;
  border: 1px solid var(--abx-border);
  border-radius: 50%;
  background: no-repeat center/90% url('/images/icon-user.svg');
}

.abx-app#myDetails .avatar-upload-btn {
  background: var(--abx-accent);
  border-color: var(--abx-surface-solid);
}

.abx-app#myDetails .fld label {
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.abx-app#myDetails .account .footer .cta.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 10rem;
  padding: 0 var(--abx-space-5);
  border-radius: var(--abx-radius-md);
  background: var(--abx-accent);
  color: var(--abx-on-accent);
  font-weight: 600;
}

.abx-app#myDetails .account .footer .cta.primary.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.abx-app .notification-prefs-hint {
  margin: var(--abx-space-2) 0 0;
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
}

.abx-app .abx-danger-zone {
  border: 1px solid #ffcdd2;
  background: linear-gradient(135deg, #fff5f5 0%, #ffebee 100%);
}

.abx-app .abx-danger-zone .abx-heading--danger {
  color: #c62828;
}

.abx-app .danger-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abx-space-4);
}

.abx-app .danger-info h3 {
  margin: 0 0 var(--abx-space-1);
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.abx-app .danger-info p {
  margin: 0;
  font-size: var(--abx-fs-50);
  color: var(--abx-text-muted);
}

.abx-app .danger-btn {
  min-height: 2.75rem;
  padding: 0 var(--abx-space-4);
  border: 1px solid #c62828;
  border-radius: var(--abx-radius-md);
  background: transparent;
  color: #c62828;
  font-weight: 500;
  cursor: pointer;
}

.abx-app .danger-btn:hover {
  background: #c62828;
  color: #fff;
}

/* Appointments accordion (script.js openTab hooks preserved) */
.abx-app#myAppointments .abx-appointments-section {
  padding: 0;
  overflow: hidden;
}

.abx-app#myAppointments .abx-appointments-section .abx-portal-header {
  padding: var(--abx-space-4) var(--abx-space-4) 0;
  margin-bottom: 0;
}

.abx-app#myAppointments .container-view {
  padding: 0;
}

.abx-app#myAppointments .tab-list {
  width: 100%;
}

.abx-app#myAppointments .tab {
  background: var(--abx-surface-solid);
  border-bottom: 1px solid var(--abx-border);
}

.abx-app#myAppointments .tab.open {
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  margin: var(--abx-space-2) var(--abx-space-3);
  overflow: hidden;
  background: var(--abx-surface-sunken);
}

.abx-app#myAppointments .service-pill {
  background: var(--abx-accent);
  color: var(--abx-on-accent);
}

.abx-app#myAppointments .summary-view .location-tag {
  border-color: var(--abx-border-strong);
  color: var(--abx-text-muted);
}

.abx-app#myAppointments .service-pill.more {
  background: var(--abx-surface-sunken);
  color: var(--abx-text-muted);
}

.abx-app#myAppointments .empty-list-notice {
  padding: var(--abx-space-8) var(--abx-space-4);
  text-align: center;
}

.abx-app#myAppointments .empty-list-notice .cta-content {
  display: flex;
  justify-content: center;
  margin-top: var(--abx-space-4);
}

.abx-app#myAppointments .empty-list-notice .abx-btn {
  min-width: 10rem;
}

.abx-app .appointment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-2);
  width: 100%;
  padding: var(--abx-space-3);
  border-top: 1px solid var(--abx-border);
}

.abx-app .appointment-action-btn {
  flex: 1 1 7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abx-space-2);
  min-height: 2.75rem;
  padding: 0 var(--abx-space-3);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
  color: var(--abx-text);
  font-size: var(--abx-fs-100);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.abx-app .appointment-action-btn.rebook {
  background: var(--abx-accent);
  border-color: var(--abx-accent);
  color: var(--abx-on-accent);
}

.abx-app .appointment-action-btn.cancel:hover {
  border-color: var(--abx-danger);
  color: var(--abx-danger);
}

.abx-app .confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--abx-z-toast) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abx-space-5);
  background: rgba(23, 23, 22, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.abx-app .confirm-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.abx-app .confirm-modal {
  width: min(100%, 24rem);
  padding: var(--abx-space-5);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-solid);
  box-shadow: var(--abx-elev-toast);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.abx-app .confirm-modal-overlay.show .confirm-modal {
  transform: scale(1);
}

.abx-app .confirm-modal-header {
  display: flex;
  align-items: center;
  gap: var(--abx-space-3);
  margin-bottom: var(--abx-space-4);
}

.abx-app .confirm-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--abx-radius-md);
}

.abx-app .confirm-modal-icon.warning {
  background: #fff3e0;
}

.abx-app .confirm-modal-icon.danger {
  background: #ffebee;
}

.abx-app .confirm-modal-title {
  margin: 0;
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-200);
  font-weight: 600;
}

.abx-app .confirm-modal-body {
  margin-bottom: var(--abx-space-5);
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
  line-height: var(--abx-lh-normal);
}

.abx-app .confirm-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-3);
}

.abx-app .confirm-btn {
  flex: 1 1 8rem;
  min-height: 2.75rem;
  padding: 0 var(--abx-space-4);
  border-radius: var(--abx-radius-md);
  font-weight: 600;
  cursor: pointer;
}

.abx-app .confirm-btn.cancel {
  border: 1px solid var(--abx-border);
  background: var(--abx-surface-sunken);
  color: var(--abx-text);
}

.abx-app .confirm-btn.danger {
  border: 0;
  background: #c62828;
  color: #fff;
}

.abx-app .delete-password-field input,
.abx-app .cancel-reason-field textarea {
  width: 100%;
  margin-top: var(--abx-space-2);
  padding: var(--abx-space-3);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  font-family: var(--abx-font-body);
  font-size: var(--abx-fs-100);
  box-sizing: border-box;
}

.abx-app .refund-estimate.refund-due {
  padding: var(--abx-space-3);
  border-radius: var(--abx-radius-md);
  background: rgba(46, 160, 67, 0.12);
  color: #1a7f37;
}

.abx-app .refund-estimate.no-refund {
  padding: var(--abx-space-3);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-sunken);
  color: var(--abx-text-muted);
}

@media (max-width: 37.5rem) {
  .abx-app .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .abx-app .action-buttons {
    flex-direction: column;
  }

  .abx-app .action-btn {
    flex: unset;
    width: 100%;
  }

  .abx-app .next-appointment-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .abx-app .danger-content {
    flex-direction: column;
    align-items: stretch;
  }

  .abx-app#myAppointments .count {
    font-size: var(--abx-fs-300);
  }
}

/* 11f. CLIENT PAYMENTS + ISSUE REPORT ======================================
   Payment history list and client issue report form. Issue report reuses
   abx-field / abx-detail-list from staff ops pages; payment list keeps
   legacy class hooks for grouped month/year rendering. */

.abx-app#paymentHistory .payment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-3);
  margin-bottom: var(--abx-space-5);
}

.abx-app .summary-card {
  flex: 1 1 10rem;
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-1);
  padding: var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-sunken);
}

.abx-app .summary-card.total {
  border-left: 4px solid #4caf50;
}

.abx-app .summary-card.refunded {
  border-left: 4px solid #ff9800;
}

.abx-app .summary-label {
  font-size: var(--abx-fs-50);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.abx-app .summary-value {
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-400);
  font-weight: 600;
  color: var(--abx-text);
}

.abx-app .payment-list {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-5);
}

.abx-app .payment-group {
  overflow: hidden;
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-solid);
}

.abx-app .payment-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--abx-space-3) var(--abx-space-4);
  background: var(--abx-accent);
  color: var(--abx-on-accent);
}

.abx-app .payment-group-header .month {
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.abx-app .payment-group-header .year {
  font-size: var(--abx-fs-50);
  opacity: 0.75;
}

.abx-app .payment-item {
  display: flex;
  align-items: center;
  gap: var(--abx-space-4);
  padding: var(--abx-space-3) var(--abx-space-4);
  border-bottom: 1px solid var(--abx-border);
}

.abx-app .payment-item:last-child {
  border-bottom: 0;
}

.abx-app .payment-date {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--abx-radius-sm);
  background: var(--abx-accent);
}

.abx-app .payment-date .day {
  font-size: var(--abx-fs-100);
  font-weight: 600;
  color: var(--abx-on-accent);
}

.abx-app .payment-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.abx-app .payment-service {
  font-size: var(--abx-fs-100);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.abx-app .payment-ref {
  font-size: var(--abx-fs-50);
  color: var(--abx-text-muted);
}

.abx-app .payment-amount {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--abx-space-1);
}

.abx-app .payment-amount .amount {
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.abx-app .status-badge {
  padding: 0.2rem 0.5rem;
  border-radius: var(--abx-radius-pill);
  font-size: var(--abx-fs-50);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.abx-app .status-badge.paid {
  background: #e8f5e9;
  color: #2e7d32;
}

.abx-app .status-badge.deposit {
  background: #fff3e0;
  color: #ef6c00;
}

.abx-app .status-badge.refunded {
  background: #ffebee;
  color: #c62828;
}

.abx-app .status-badge.cancelled {
  background: #f4f4f5;
  color: #52525b;
}

.abx-app#paymentHistory .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--abx-space-8) var(--abx-space-5);
  border: 1px dashed var(--abx-border);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-sunken);
  text-align: center;
}

.abx-app#paymentHistory .empty-state .cta.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: var(--abx-space-4);
  padding: 0 var(--abx-space-5);
  border-radius: var(--abx-radius-md);
  background: var(--abx-accent);
  color: var(--abx-on-accent);
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 37.5rem) {
  .abx-app#paymentHistory .payment-summary {
    flex-direction: column;
  }

  .abx-app .payment-item {
    flex-wrap: wrap;
  }

  .abx-app .payment-amount {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* 12. CHAT EXPERIENCE ======================================================
   Shared premium chat shell for Consultant + Trainer. Mobile-first fixed
   app shell (only .abx-chat__log scrolls — header/composer stay pinned,
   like the try-on camera shell) that becomes a wide centered column on
   desktop. Reuses existing tokens only — no new colours. */

.abx-chat-page {
  /* Same fixed-viewport math as .abx-app's camera shell: the site's fixed
     60px header is already accounted for by .main-container's padding-top,
     so this only needs the remainder — never taller than the true
     viewport, on any device. */
  position: relative;
  height: calc(100dvh - 60px);
  max-height: calc(100dvh - 60px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--abx-bg);
}

.abx-chat__header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abx-space-4);
  padding: var(--abx-space-4) var(--abx-space-4) var(--abx-space-3);
  border-bottom: 1px solid var(--abx-border);
  background: var(--abx-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.abx-chat__header-titles {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 auto;
}

/* Mobile: the badge and action buttons share the title's row, right-aligned
   and allowed to wrap so a dev-tools "Copy chat" button can't squeeze the
   title into a three-line column (the header is chrome — the log is the
   content, and it should keep the vertical space). */
.abx-chat__header-aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--abx-space-2);
  flex: none;
}

/* The eyebrow, strapline and "Agent" badge are desktop-only affordances: on a
   phone (and in the narrow embedded panel) the empty state already explains
   what the agent does, so repeating it in the header costs ~200px of
   conversation and squeezes the title into an ellipsis. */
.abx-chat__header .abx-eyebrow,
.abx-chat__header-aside .abx-badge,
.abx-chat__subtitle {
  display: none;
}

.abx-chat__title {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-200);
  line-height: var(--abx-lh-tight);
  color: var(--abx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.abx-chat__log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-4);
  padding: var(--abx-space-5) var(--abx-space-4);
}

/* Empty state + suggestions ------------------------------------------------ */

.abx-chat__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--abx-space-4);
  padding: var(--abx-space-8) var(--abx-space-4);
  margin: auto 0;
}

.abx-chat__empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--abx-accent);
  color: var(--abx-inverse);
  font-size: 1.25rem;
}

.abx-chat__empty-title {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-300);
  color: var(--abx-text);
}

.abx-chat__empty-text {
  max-width: 24rem;
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
  line-height: var(--abx-lh-normal);
}

.abx-chat__suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abx-space-2);
  max-width: 28rem;
}

.abx-chat__suggestion {
  padding: var(--abx-space-2) var(--abx-space-4);
  border-radius: var(--abx-radius-pill);
  border: 1px solid var(--abx-border-strong);
  background: var(--abx-surface-solid);
  color: var(--abx-text);
  font-family: var(--abx-font-sans);
  font-size: var(--abx-fs-100);
  font-weight: 500;
  transition: background var(--abx-dur-2) var(--abx-ease), border-color var(--abx-dur-2) var(--abx-ease);
}

.abx-chat__suggestion:hover {
  background: var(--abx-surface-sunken);
  border-color: var(--abx-border-strong);
}

/* Sign-in gate (unauthenticated visitors) — reuses the empty-state layout. */
.abx-chat__gate {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--abx-space-3);
  padding: var(--abx-space-8) var(--abx-space-4);
  margin: auto 0;
}

/* Message rows -------------------------------------------------------------- */

.abx-chat__row {
  display: flex;
  align-items: flex-end;
  gap: var(--abx-space-2);
  max-width: 100%;
}

.abx-chat__row--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.abx-chat__row--assistant {
  align-self: flex-start;
}

.abx-chat__avatar {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  background: var(--abx-accent);
  color: var(--abx-inverse);
}

.abx-chat__row--user .abx-chat__avatar {
  background: var(--abx-surface-sunken);
  color: var(--abx-text);
}

.abx-chat-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-1);
  max-width: min(30rem, 78vw);
}

.abx-chat-bubble__text {
  padding: var(--abx-space-3) var(--abx-space-4);
  border-radius: var(--abx-radius-md);
  font-size: var(--abx-fs-100);
  line-height: var(--abx-lh-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Rich-text elements produced by chatUi.js's renderRichText() markdown-lite
   parser — assistant replies only (user bubbles stay plain textContent). */
.abx-chat-bubble__text p {
  margin: 0;
}

.abx-chat-bubble__text p + p,
.abx-chat-bubble__text p + ul,
.abx-chat-bubble__text p + ol,
.abx-chat-bubble__text ul + p,
.abx-chat-bubble__text ol + p {
  margin-top: var(--abx-space-3);
}

.abx-chat-bubble__text ul,
.abx-chat-bubble__text ol {
  margin: 0;
  padding-left: var(--abx-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-1);
}

.abx-chat-bubble__text li {
  padding-left: var(--abx-space-1);
}

.abx-chat-bubble__text strong {
  font-weight: 700;
}

/* Selectors are written as `.abx-app a.<class>` (0,2,1) rather than the bare
   class (0,1,0) on purpose: css/stylesheet.css sets a global
   `a, a:link, a:visited, a:hover, a:active { color: var(--secondary) }` whose
   `a:link` branch scores (0,1,1) and would otherwise win, painting dark ink
   over the dark accent pill — the same "black button, black text" failure
   already documented in docs/browser-verification/README.md. */
.abx-app a.abx-chat-bubble__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Call-to-action links that stand alone on their own line (e.g. a reply
   ending in "[Book now](/book/)") render as a real tappable pill button,
   reusing the confirm/cancel action-button visual language and its 44px
   mobile tap target. Links inside a sentence stay inline — see
   STANDALONE_LINK_PATTERN in script/ai/chatUi.js. */
.abx-app a.abx-chat-bubble__link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--abx-space-2);
  padding: 0 var(--abx-space-5);
  border-radius: var(--abx-radius-pill);
  background: var(--abx-accent);
  color: var(--abx-inverse);
  font-family: var(--abx-font-sans);
  font-size: var(--abx-fs-100);
  font-weight: 600;
  text-decoration: none;
}

.abx-app a.abx-chat-bubble__link-btn:hover {
  background: var(--abx-accent-hover);
  color: var(--abx-inverse);
}

.abx-chat__row--user .abx-chat-bubble__text {
  background: var(--abx-accent);
  color: var(--abx-inverse);
  border-bottom-right-radius: var(--abx-radius-sm);
}

.abx-chat__row--assistant .abx-chat-bubble__text {
  background: var(--abx-surface-sunken);
  color: var(--abx-text);
  border-bottom-left-radius: var(--abx-radius-sm);
}

.abx-chat-bubble__meta {
  display: flex;
  align-items: center;
  gap: var(--abx-space-2);
  padding: 0 var(--abx-space-1);
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
}

.abx-chat__row--user .abx-chat-bubble__meta {
  justify-content: flex-end;
}

.abx-chat-bubble__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  color: var(--abx-text-subtle);
  opacity: 0;
  transition: opacity var(--abx-dur-2) var(--abx-ease), color var(--abx-dur-2) var(--abx-ease), background var(--abx-dur-2) var(--abx-ease);
}

.abx-chat__row:hover .abx-chat-bubble__copy,
.abx-chat-bubble__copy:focus-visible {
  opacity: 1;
}

.abx-chat-bubble__copy:hover {
  color: var(--abx-text);
  background: var(--abx-surface-sunken);
}

.abx-chat-bubble__copy.is-copied {
  opacity: 1;
  color: var(--abx-text);
}

/* Feedback controls (thumbs up/down/report) sit inline in the bubble meta
   row, always visible - unlike .abx-chat-bubble__copy above, which relies on
   :hover and would never appear on a touch device. */
.abx-chat-bubble__feedback {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.abx-chat__row--user .abx-chat-bubble__feedback {
  display: none;
}

.abx-chat-bubble__feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--abx-text-subtle);
  font-size: 0.75rem;
  transition: color var(--abx-dur-2) var(--abx-ease), background var(--abx-dur-2) var(--abx-ease);
}

.abx-chat-bubble__feedback-btn:hover,
.abx-chat-bubble__feedback-btn:focus-visible {
  color: var(--abx-text);
  background: var(--abx-surface-sunken);
}

.abx-chat-bubble__feedback-btn.is-selected {
  color: var(--abx-accent, var(--abx-text));
  opacity: 1;
}

.abx-chat-bubble__feedback-btn:disabled {
  cursor: default;
}

.abx-chat-bubble__feedback-btn:disabled:not(.is-selected) {
  opacity: 0.35;
}

/* Dev troubleshooting: always-on copy + transcript export (localhost / APP_ENV=development) */
.abx-chat-page--dev-tools .abx-chat-bubble__text {
  user-select: text;
  -webkit-user-select: text;
}

.abx-chat-page--dev-tools .abx-chat-bubble__copy {
  opacity: 1;
}

.abx-chat__dev-actions {
  display: flex;
  align-items: center;
  gap: var(--abx-space-2);
  flex: none;
}

/* Embedded mode (staff/agent/index.php inside inc/staffAgentPanel.php's
   iframe): fill the panel exactly. Uses 100dvh (the iframe's own viewport)
   rather than height:100% — .main-container/body never carry a definite
   height, so a percentage here would resolve to `auto` per spec and let
   the page shrink to its content height instead of filling the iframe,
   which broke .abx-chat__log's flex:1 scroll area (nothing to grow into)
   and clipped the composer below the visible fold with no way to scroll
   to it (.abx-chat-page has overflow:hidden by design — only the log
   should scroll). */
.abx-chat-page--embedded {
  height: 100dvh;
  max-height: 100dvh;
}

/* clientAgentPanel.php / staffAgentPanel.php only add `.abx-app` to this
   wrapper so its children can use the DS's --abx-* custom properties
   (see those files' own comments) — they never intended to opt into
   .abx-app's full app-shell BOX MODEL (height: calc(100dvh - 60px),
   flex, opaque --abx-bg background, overflow: hidden). On legacy pages
   without their own .abx-app root (book/index.php, staff/schedule/,
   etc.), that box model turned this wrapper into an ~near-full-viewport
   opaque beige block sitting in normal document flow — which, once the
   DS sheet finished loading, painted over any position:fixed content
   later in paint order underneath it (e.g. book/index.php's stylist and
   service steps, which are position:fixed — see #book.client .container
   in css/stylesheet.css). `display: contents` fully suppresses this
   wrapper's own box (so none of .abx-app's sizing/background/overflow
   apply) while its fixed-position children (launcher/sheet) keep
   rendering exactly where they should, and custom properties still
   cascade normally since inheritance isn't affected by display. */
.abx-app.abx-agent-panel {
  display: contents;
}

/* Floating Ops Agent launcher + slide-in panel — presence on staff
   schedule/client pages per the Unified AI Agent plan (Phase 3). */
.abx-agent-panel__launcher {
  position: fixed;
  right: var(--abx-space-5);
  bottom: var(--abx-space-5);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--abx-accent, #b98b5e);
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 9000;
}

.abx-agent-panel__sheet {
  position: fixed;
  right: var(--abx-space-5);
  bottom: calc(var(--abx-space-5) + 72px);
  width: min(400px, calc(100vw - 2 * var(--abx-space-5)));
  height: min(600px, calc(100vh - 160px));
  background: #fff;
  border-radius: var(--abx-radius-lg);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 9001;
}

/* The class selector's `display: flex` above outranks the UA [hidden]
   stylesheet's `display: none` by specificity, so without this the panel
   would stay visible regardless of script/ai/staffAgentPanel.js toggling
   the `hidden` attribute. */
.abx-agent-panel__sheet[hidden] {
  display: none;
}

.abx-agent-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--abx-space-3) var(--abx-space-4);
  background: var(--abx-bg);
  border-bottom: 1px solid var(--abx-border);
  font-weight: 600;
}

.abx-agent-panel__close {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.abx-agent-panel__frame {
  flex: 1;
  width: 100%;
  border: none;
}

@media (max-width: 640px) {
  .abx-agent-panel__sheet {
    right: var(--abx-space-3);
    bottom: calc(var(--abx-space-3) + 68px);
    width: calc(100vw - 2 * var(--abx-space-3));
  }
}

.abx-chat__dev-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  padding: 0 var(--abx-space-3);
  border-radius: var(--abx-radius-pill);
  border: 1px solid var(--abx-border-strong);
  background: var(--abx-surface-solid);
  color: var(--abx-text-muted);
  font-family: var(--abx-font-sans);
  font-size: var(--abx-fs-50);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--abx-dur-2) var(--abx-ease), border-color var(--abx-dur-2) var(--abx-ease), background var(--abx-dur-2) var(--abx-ease);
}

.abx-chat__dev-copy:hover {
  color: var(--abx-text);
  border-color: var(--abx-text-subtle);
  background: var(--abx-surface-sunken);
}

/* Header actions: "History" + "New chat" icon buttons — smaller sibling
   of .abx-btn-back (same circular-ghost shape, sized to sit inline in
   the header row rather than as a leading back button). */
.abx-chat__header-actions {
  display: flex;
  align-items: center;
  gap: var(--abx-space-2);
  flex: none;
}

.abx-chat__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: var(--abx-surface-sunken);
  color: var(--abx-text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--abx-dur-2) var(--abx-ease);
}

.abx-chat__icon-btn:hover {
  background: rgba(23, 23, 22, 0.08);
}

/* Past-conversations panel — slides up over .abx-chat-page, scoped to the
   chat shell (not the whole page) so it works identically full-page and
   inside the embedded iframe panel. Motion mirrors .abx-agent-panel__sheet
   (slide + fade); row styling mirrors .abx-memory-list/.abx-memory-item. */
.abx-chat__history-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 22, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--abx-z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--abx-dur-2) var(--abx-ease);
}

.abx-chat__history-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.abx-chat__history-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: min(80%, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--abx-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top-left-radius: var(--abx-radius-xl);
  border-top-right-radius: var(--abx-radius-xl);
  box-shadow: var(--abx-elev-sheet);
  padding: var(--abx-space-5) var(--abx-space-5) calc(var(--abx-space-5) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-4);
  z-index: var(--abx-z-overlay);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-3) var(--abx-ease-spring);
  pointer-events: none;
}

.abx-chat__history-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.abx-chat__history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abx-space-3);
  flex: none;
}

.abx-chat__history-title {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-200);
  color: var(--abx-text);
}

.abx-chat__history-list {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
}

.abx-chat__history-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-sunken);
  padding: var(--abx-space-3) var(--abx-space-4);
  cursor: pointer;
  transition: background var(--abx-dur-2) var(--abx-ease), border-color var(--abx-dur-2) var(--abx-ease);
}

.abx-chat__history-item:hover {
  background: rgba(23, 23, 22, 0.06);
}

.abx-chat__history-item.is-active {
  border-color: var(--abx-accent);
  background: rgba(185, 139, 94, 0.08);
}

.abx-chat__history-item__title {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-100);
  color: var(--abx-text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.abx-chat__history-item__meta {
  font-size: var(--abx-fs-50);
  color: var(--abx-text-muted);
}

.abx-chat__history-empty {
  text-align: center;
  padding: var(--abx-space-6) var(--abx-space-4);
  color: var(--abx-text-muted);
}

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

.abx-chat__typing {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: var(--abx-space-3) var(--abx-space-4);
  border-radius: var(--abx-radius-md);
  border-bottom-left-radius: var(--abx-radius-sm);
  background: var(--abx-surface-sunken);
}

.abx-chat__typing-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--abx-text-subtle);
  animation: abx-chat-typing 1.1s ease-in-out infinite;
}

.abx-chat__typing-dot:nth-child(2) { animation-delay: 0.15s; }
.abx-chat__typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes abx-chat-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Error state ---------------------------------------------------------------- */

.abx-chat__error {
  flex: none;
  padding: 0 var(--abx-space-4);
}

.abx-chat__error .abx-toast--error {
  align-items: center;
}

.abx-chat__error-retry {
  align-self: flex-start;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Composer -------------------------------------------------------------------- */

.abx-chat__composer {
  flex: none;
  padding: var(--abx-space-3) var(--abx-space-4) calc(var(--abx-space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--abx-border);
  background: var(--abx-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.abx-chat__composer-row {
  display: flex;
  align-items: flex-end;
  gap: var(--abx-space-2);
  padding: var(--abx-space-1);
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-solid);
  transition: border-color var(--abx-dur-2) var(--abx-ease);
}

.abx-chat__composer-row:focus-within {
  border-color: var(--abx-focus);
}

.abx-chat__textarea {
  flex: 1;
  border: 0;
  background: transparent;
  resize: none;
  max-height: 9rem;
  padding: var(--abx-space-2) var(--abx-space-2);
  font-family: var(--abx-font-sans);
  font-size: var(--abx-fs-200);
  line-height: var(--abx-lh-snug);
  color: var(--abx-text);
}

.abx-chat__textarea:focus {
  outline: none;
}

.abx-chat__send {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--abx-accent);
  color: var(--abx-inverse);
  font-size: 0.9rem;
  transition: background var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-1) var(--abx-ease), opacity var(--abx-dur-2) var(--abx-ease);
}

.abx-chat__send:hover:not(:disabled) {
  background: var(--abx-accent-hover);
}

.abx-chat__send:active:not(:disabled) {
  transform: scale(0.94);
}

.abx-chat__send[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.abx-chat__counter {
  text-align: right;
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
  padding: var(--abx-space-1) var(--abx-space-2) 0;
  height: 0;
  overflow: hidden;
  transition: height var(--abx-dur-2) var(--abx-ease);
}

.abx-chat__counter.is-visible {
  height: 1.1rem;
}

.abx-chat__counter.is-limit {
  color: var(--abx-danger);
}

/* Desktop: full-width hero banner + wide centered chat column -------------- */

@media (min-width: 48rem) {
  .abx-chat__log,
  .abx-chat__composer {
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
  }

  /* Full-bleed banner band; chat body stays in the centered column below. */
  .abx-chat-page:not(.abx-chat-page--embedded) .abx-chat__header {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: var(--abx-space-8) max(var(--abx-space-8), calc((100% - 44rem) / 2)) var(--abx-space-5);
    background: linear-gradient(
      180deg,
      var(--abx-surface-solid) 0%,
      rgba(251, 250, 247, 0.55) 100%
    );
    border-bottom: 1px solid var(--abx-border);
    align-items: flex-end;
    gap: var(--abx-space-6);
  }

  .abx-chat-page:not(.abx-chat-page--embedded) .abx-chat__header-titles {
    gap: var(--abx-space-2);
    flex: 1;
    min-width: 0;
    padding-left: var(--abx-space-4);
    border-left: 3px solid var(--abx-accent);
  }

  .abx-chat-page:not(.abx-chat-page--embedded) .abx-chat__title {
    font-size: var(--abx-fs-500);
    letter-spacing: -0.02em;
    white-space: normal;
    overflow: visible;
  }

  /* Wide enough for the hero treatment — bring back the eyebrow and strapline
     hidden on mobile / in the embedded panel. */
  .abx-chat-page:not(.abx-chat-page--embedded) .abx-chat__header .abx-eyebrow {
    display: inline-block;
  }

  .abx-chat-page:not(.abx-chat-page--embedded) .abx-chat__subtitle {
    display: block;
    font-size: var(--abx-fs-100);
    max-width: 34rem;
    line-height: var(--abx-lh-normal);
  }

  .abx-chat-page:not(.abx-chat-page--embedded) .abx-chat__header-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--abx-space-3);
    flex: none;
  }

  .abx-chat-page:not(.abx-chat-page--embedded) .abx-chat__header-aside .abx-badge {
    display: inline-flex;
    align-self: auto;
    height: 2rem;
    padding-inline: var(--abx-space-4);
  }

  /* Embedded iframe panel keeps the compact stacked header. */
  .abx-chat-page--embedded .abx-chat__header {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: var(--abx-space-4) var(--abx-space-4) var(--abx-space-3);
  }

  .abx-chat-page--embedded .abx-chat__title {
    font-size: var(--abx-fs-400);
  }

  .abx-chat__log {
    padding: var(--abx-space-6) 0;
    gap: var(--abx-space-5);
  }

  .abx-chat-bubble {
    max-width: min(32rem, 70%);
  }

  .abx-chat__composer {
    padding: 0 0 var(--abx-space-8);
    border-top: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .abx-chat__composer-row {
    box-shadow: var(--abx-elev-sheet);
  }

  .abx-chat__error {
    padding: 0;
    max-width: 44rem;
    margin-inline: auto;
    width: 100%;
  }
}

/* 13. MULTI-MODAL AGENT ====================================================
   In-chat try-on: composer attach button, proposal confirm row (existing
   markup had no styles — was falling back to legacy .cta classes), image
   bubbles with before/after compare, and the style/intensity capture card.
   Reuses existing tokens only. */

.abx-chat__attach {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--abx-text-muted);
  font-size: 0.95rem;
  transition: color var(--abx-dur-2) var(--abx-ease), background var(--abx-dur-2) var(--abx-ease);
}

.abx-chat__attach:hover,
.abx-chat__attach:focus-visible {
  color: var(--abx-text);
  background: var(--abx-surface-sunken);
}

/* Proposal confirm/cancel row — previously unstyled, falling back to
   legacy .cta.primary/.cta.secondary button classes from outside the DS. */
.abx-chat__row--action {
  width: 100%;
  justify-content: flex-start;
}

.abx-chat__action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-2);
  padding-left: calc(1.75rem + var(--abx-space-2));
}

.abx-chat__action-buttons .cta {
  min-height: 44px;
  padding: 0 var(--abx-space-5);
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-sans);
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.abx-chat__action-buttons .cta.primary {
  background: var(--abx-accent);
  color: var(--abx-inverse);
  border: none;
}

.abx-chat__action-buttons .cta.primary:hover {
  background: var(--abx-accent-hover);
}

.abx-chat__action-buttons .cta.secondary {
  background: var(--abx-surface-solid);
  color: var(--abx-text);
  border: 1px solid var(--abx-border-strong);
}

.abx-chat__action-buttons .cta.secondary:hover {
  background: var(--abx-surface-sunken);
}

.abx-chat__action-buttons .cta:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Rich content blocks (AgentResponseBlocks.php + chatUi.js appendBlocks) --
   service/appointment cards, tappable time-slot chips, and data tables
   rendered as their own row underneath an assistant reply. Width matches
   .abx-chat-bubble at each breakpoint so blocks never look wider than the
   surrounding conversation column. */

.abx-chat__row--block {
  width: 100%;
}

/* Caption header above a block (which day / stylist / duration it was built
   for) — see AgentResponseBlocks. Keeps the component self-explanatory so the
   reply doesn't have to restate the same context in prose. */
.abx-chat-blocks-group {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
  min-width: 0;
}

.abx-chat-blocks__caption {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--abx-text-subtle);
  max-width: min(30rem, 90vw);
}

.abx-chat-blocks {
  max-width: min(30rem, 78vw);
}

.abx-chat-blocks--cards {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
}

.abx-chat-block-card {
  padding: var(--abx-space-3) var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
}

.abx-chat-block-card__title {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-100);
}

.abx-chat-block-card__meta {
  margin-top: var(--abx-space-1);
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
}

.abx-chat-blocks__cta {
  align-self: flex-start;
}

.abx-chat-blocks--slots {
  max-width: min(30rem, 78vw);
  justify-content: flex-start;
}

/* Slot chips are real booking controls, not empty-state prompts — hold them
   to the same 44px tap target as the other in-conversation actions. */
.abx-chat-blocks--slots .abx-chat__suggestion {
  min-height: 44px;
}

.abx-chat-blocks--list {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-2);
}

.abx-chat-block-list-item {
  display: flex;
  flex-direction: column;
  padding: var(--abx-space-3) var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-sunken);
}

.abx-chat-block-list-item__title {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-100);
}

.abx-chat-block-list-item__subtitle {
  font-size: var(--abx-fs-50);
  color: var(--abx-text-subtle);
}

.abx-chat-block-list-item__meta {
  margin-top: var(--abx-space-1);
  font-size: var(--abx-fs-50);
  font-weight: 600;
}

/* Mobile-first: a real table can't fit the chat column without clipping the
   right-hand columns, so each row becomes a stacked label/value card and the
   header row is dropped (labels come from each cell's data-label). The table
   layout returns at the desktop breakpoint below. */
.abx-chat-blocks--table {
  max-width: min(30rem, 90vw);
  font-size: var(--abx-fs-50);
  overflow-x: visible;
  border: 0;
}

.abx-chat-blocks--table .abx-data-table,
.abx-chat-blocks--table .abx-data-table tbody,
.abx-chat-blocks--table .abx-data-table tr,
.abx-chat-blocks--table .abx-data-table td {
  display: block;
  width: 100%;
}

.abx-chat-blocks--table .abx-data-table thead {
  display: none;
}

.abx-chat-blocks--table .abx-data-table tr {
  margin-bottom: var(--abx-space-2);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
  overflow: hidden;
}

.abx-chat-blocks--table .abx-data-table tr:last-child {
  margin-bottom: 0;
}

.abx-chat-blocks--table .abx-data-table td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abx-space-3);
  padding: var(--abx-space-2) var(--abx-space-3);
  border-bottom: 1px solid var(--abx-border);
  text-align: right;
}

.abx-chat-blocks--table .abx-data-table td::before {
  content: attr(data-label);
  flex: none;
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--abx-text-subtle);
  text-align: left;
}

.abx-chat-blocks--table .abx-data-table tr td:last-child {
  border-bottom: 0;
}

@media (min-width: 48rem) {
  .abx-chat-blocks,
  .abx-chat-blocks--slots,
  .abx-chat-blocks--table,
  .abx-chat-blocks__caption {
    max-width: min(32rem, 70%);
  }

  /* Enough width for a real table again — undo the stacked mobile layout. */
  .abx-chat-blocks--table {
    overflow-x: auto;
    border: 1px solid var(--abx-border);
  }

  .abx-chat-blocks--table .abx-data-table {
    display: table;
  }

  .abx-chat-blocks--table .abx-data-table thead {
    display: table-header-group;
  }

  .abx-chat-blocks--table .abx-data-table tbody {
    display: table-row-group;
  }

  .abx-chat-blocks--table .abx-data-table tr {
    display: table-row;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .abx-chat-blocks--table .abx-data-table td {
    display: table-cell;
    width: auto;
    padding: var(--abx-space-2) var(--abx-space-3);
    text-align: left;
    white-space: nowrap;
  }

  .abx-chat-blocks--table .abx-data-table th {
    padding: var(--abx-space-2) var(--abx-space-3);
    white-space: nowrap;
  }

  .abx-chat-blocks--table .abx-data-table td::before {
    content: none;
  }
}

/* Image bubble + before/after compare -------------------------------------- */

.abx-chat-bubble--media {
  max-width: min(20rem, 78vw);
}

.abx-chat-bubble__media {
  border-radius: var(--abx-radius-md);
  overflow: hidden;
  background: var(--abx-surface-sunken);
  line-height: 0;
}

.abx-chat-bubble__media-single {
  display: block;
  width: 100%;
  height: auto;
}

.abx-chat-bubble__media--compare {
  position: relative;
  aspect-ratio: 1 / 1;
  touch-action: none;
  user-select: none;
}

.abx-chat-bubble__media-before,
.abx-chat-bubble__media-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abx-chat-bubble__media-after-wrap {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
}

.abx-chat-bubble__media-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
  cursor: ew-resize;
  transform: translateX(-50%);
}

.abx-chat-bubble__media-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
}

.abx-chat-bubble__media-handle:focus-visible {
  outline: 2px solid var(--abx-focus);
  outline-offset: 2px;
}

/* In-chat try-on capture card ------------------------------------------------ */

.abx-chat__row--tryon-capture,
.abx-chat__row--tryon-generating {
  width: 100%;
  justify-content: flex-start;
}

.abx-chat-tryon-card {
  width: 100%;
  max-width: min(24rem, 82vw);
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-3);
  padding: var(--abx-space-4);
  border-radius: var(--abx-radius-md);
  border: 1px solid var(--abx-border-strong);
  background: var(--abx-surface-solid);
  margin-left: calc(1.75rem + var(--abx-space-2));
}

.abx-chat-tryon-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-2);
}

.abx-chat-tryon-card__chip {
  min-height: 44px;
  padding: 0 var(--abx-space-4);
  border-radius: var(--abx-radius-pill);
  border: 1px solid var(--abx-border-strong);
  background: var(--abx-surface);
  color: var(--abx-text);
  font-family: var(--abx-font-sans);
  font-size: var(--abx-fs-100);
  font-weight: 500;
  transition: background var(--abx-dur-2) var(--abx-ease), border-color var(--abx-dur-2) var(--abx-ease), color var(--abx-dur-2) var(--abx-ease);
}

.abx-chat-tryon-card__chip.is-selected {
  background: var(--abx-accent);
  color: var(--abx-inverse);
  border-color: var(--abx-accent);
}

.abx-chat-tryon-card__chip--intensity {
  font-size: var(--abx-fs-50);
  min-height: 36px;
}

.abx-chat-tryon-card__preview {
  border-radius: var(--abx-radius-md);
  overflow: hidden;
  max-height: 12rem;
}

.abx-chat-tryon-card__preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 12rem;
  object-fit: cover;
}

.abx-chat-tryon-card__pick,
.abx-chat-tryon-card__generate {
  min-height: 44px;
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-sans);
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.abx-chat-tryon-card__pick {
  background: var(--abx-surface);
  color: var(--abx-text);
  border: 1px solid var(--abx-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abx-space-2);
}

.abx-chat-tryon-card__pick:hover {
  background: var(--abx-surface-sunken);
}

.abx-chat-tryon-card__generate.cta.primary:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.abx-chat-tryon-generating {
  display: flex;
  align-items: center;
  gap: var(--abx-space-3);
  margin-left: calc(1.75rem + var(--abx-space-2));
  font-size: var(--abx-fs-100);
  color: var(--abx-text-muted);
}

/* Agent panel mobile fixes --------------------------------------------------
   Was using 100vh (no safe-area accounting) and never toggled aria-hidden;
   iframe also stacked the full site header inside the sheet. Backdrop +
   escape/close handled in script/ai/staffAgentPanel.js. */

.abx-agent-panel__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 12, 0.32);
  z-index: 8999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--abx-dur-2) var(--abx-ease);
}

.abx-agent-panel__backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.abx-agent-panel__sheet {
  height: min(600px, calc(100dvh - 160px - env(safe-area-inset-bottom)));
  bottom: calc(var(--abx-space-5) + 72px + env(safe-area-inset-bottom));
}

@media (max-width: 640px) {
  .abx-agent-panel__sheet {
    width: calc(100vw - 2 * var(--abx-space-3));
    height: min(80dvh, calc(100dvh - 96px - env(safe-area-inset-bottom)));
    bottom: calc(var(--abx-space-3) + 68px + env(safe-area-inset-bottom));
  }

  .abx-agent-panel__launcher {
    bottom: calc(var(--abx-space-5) + env(safe-area-inset-bottom));
  }
}

/* Suppress the full site header inside the embedded iframe panel — the
   panel already has its own header (.abx-agent-panel__header), so showing
   the site's fixed 60px header (.site-header, see inc/headerClient.php /
   inc/headerStaff.php) too was double chrome on a small sheet. The panel
   iframe always loads a page in "embedded" mode, so this rule only ever
   fires there — never on the full standalone /ai/agent/ or /staff/agent/
   page. */
body:has(.abx-chat-page--embedded) .site-header {
  display: none;
}

/* .main-container's padding-top only exists to offset the fixed
   .site-header — with that header hidden above, the padding became a
   ~60px blank band sitting between the panel's own header and the chat
   header inside the iframe. */
body:has(.abx-chat-page--embedded) .main-container {
  padding-top: 0;
}

/* --- Blog (public) ----------------------------------------------------- */
.abx-blog-body {
  line-height: 1.7;
  max-width: 42rem;
}

.abx-blog-body h2,
.abx-blog-body h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.abx-blog-body p,
.abx-blog-body ul {
  margin-bottom: 1rem;
}

.abx-blog-body a {
  color: var(--abx-color-accent, #8b6914);
  text-decoration: underline;
}

.abx-blog-card + .abx-blog-card {
  margin-top: var(--abx-space-4);
}

/* --- Content Planner (staff) ------------------------------------------- */
.abx-planner {
  display: grid;
  gap: var(--abx-space-4);
}

@media (min-width: 960px) {
  .abx-planner {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
  }
}

.abx-planner__posts {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-3);
}

.abx-planner-post {
  border: 1px solid var(--abx-border-subtle, rgba(0, 0, 0, 0.08));
  border-radius: var(--abx-radius-md, 12px);
  padding: var(--abx-space-4);
}

.abx-planner-post__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abx-space-2);
  margin-top: var(--abx-space-3);
}

.abx-planner-chat {
  min-height: 320px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--abx-border-subtle, rgba(0, 0, 0, 0.08));
  border-radius: var(--abx-radius-md, 12px);
  padding: var(--abx-space-3);
  background: var(--abx-surface-muted, #f8f7f5);
}

.abx-planner-chat__msg {
  margin-bottom: var(--abx-space-3);
}

.abx-planner-chat__msg--staff {
  text-align: right;
}

.abx-planner-chat__bubble {
  display: inline-block;
  max-width: 90%;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: #fff;
  text-align: left;
}

.abx-planner-chat__msg--staff .abx-planner-chat__bubble {
  background: var(--abx-color-accent-soft, #efe9df);
}

.abx-planner-preview {
  max-height: 240px;
  overflow: auto;
  font-size: 0.92rem;
  border-top: 1px solid var(--abx-border-subtle, rgba(0, 0, 0, 0.08));
  margin-top: var(--abx-space-3);
  padding-top: var(--abx-space-3);
}

.abx-planner-jobs {
  margin: var(--abx-space-3) 0;
  padding: var(--abx-space-3);
  border-radius: var(--abx-radius-md, 12px);
  background: var(--abx-surface-muted, #f8f7f5);
  border: 1px solid var(--abx-border-subtle, rgba(0, 0, 0, 0.08));
}

.abx-planner-job {
  display: flex;
  justify-content: space-between;
  gap: var(--abx-space-2);
  padding: 0.35rem 0;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.abx-planner-job:last-child {
  border-bottom: none;
}

.abx-planner-job--failed {
  color: #9a3412;
}

.abx-planner-job--running,
.abx-planner-job--queued {
  color: #854d0e;
}

.abx-planner-job--succeeded {
  color: #166534;
}

.abx-planner-chat__bubble--stream {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  max-height: 220px;
  overflow-y: auto;
}

.abx-planner-chat__bubble--stream.is-streaming::after {
  content: '▍';
  animation: abx-planner-blink 1s step-end infinite;
}

@keyframes abx-planner-blink {
  50% { opacity: 0; }
}

/* --- 12. Mobile polish pass (Aug 2026 snapshot review) ------------------- */

.abx-link,
.abx-app a.abx-link:not(.abx-btn) {
  color: #5c4a1f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.abx-link:hover {
  color: #3d3014;
}

.abx-detail-section {
  padding: var(--abx-space-4);
  border: 1px solid var(--abx-border);
  border-radius: var(--abx-radius-md);
  background: var(--abx-surface-solid);
}

.abx-detail-section + .abx-detail-section {
  margin-top: var(--abx-space-4);
}

.abx-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abx-space-3);
}

@media (min-width: 40rem) {
  .abx-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.abx-stat-card {
  border: 1px solid var(--abx-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.abx-btn--sm {
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  font-size: var(--abx-fs-100);
}

.abx-review-hub {
  display: flex;
  flex-direction: column;
  gap: var(--abx-space-3);
}

.abx-review-hub__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abx-space-4);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--abx-dur-2) var(--abx-ease);
}

.abx-review-hub__item:hover {
  box-shadow: var(--abx-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.abx-review-hub__main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.abx-review-hub__date {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-size: var(--abx-fs-200);
}

.abx-review-hub__services {
  font-size: var(--abx-fs-100);
  color: var(--abx-text);
}

.abx-review-hub__staff {
  font-size: var(--abx-fs-50);
  color: var(--abx-text-muted);
}

.abx-review-hub__action {
  flex-shrink: 0;
}

.abx-review-hub__action .abx-btn--secondary {
  border-color: var(--abx-border-strong);
  background: var(--abx-beige-100);
}

.abx-app .abx-input::placeholder,
.abx-app .abx-textarea::placeholder {
  color: #6b6560;
  opacity: 1;
}

.abx-app .settings-tab,
.abx-app .settings-tabs button {
  min-height: 2.75rem;
  min-width: 2.75rem;
}

@media (max-width: 37.5rem) {
  .abx-simple-page {
    min-height: 0;
    padding-top: var(--abx-space-5);
    padding-bottom: calc(var(--abx-space-8) + env(safe-area-inset-bottom, 0));
  }

  .abx-portal-page,
  .abx-staff-page {
    width: 100%;
  }

  .abx-data-table-wrap .abx-data-table thead {
    display: none;
  }

  .abx-data-table-wrap .abx-data-table tr {
    display: block;
    padding: var(--abx-space-3) var(--abx-space-4);
    border-bottom: 1px solid var(--abx-border);
  }

  .abx-data-table-wrap .abx-data-table td {
    display: flex;
    justify-content: space-between;
    gap: var(--abx-space-3);
    padding: 0.35rem 0;
    border: 0;
    font-size: var(--abx-fs-100);
    text-align: right;
  }

  .abx-data-table-wrap .abx-data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--abx-text-subtle);
    flex-shrink: 0;
    text-align: left;
  }

  .abx-data-table-wrap .abx-data-table td:last-child {
    padding-bottom: 0;
  }

  #schedule .btn.reload,
  #schedule .btn.new,
  .schedule-nav .nav,
  .schedule-nav .icon,
  .schedule-nav .btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  #schedule .btn.reload {
    width: 2.75rem;
    height: 2.75rem;
  }

  .abx-app .service-edit-btn,
  .abx-app .category-action-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .abx-app .toggle-switch {
    min-width: 3rem;
    min-height: 1.75rem;
  }

  .abx-portal-page .abx-card {
    padding: var(--abx-space-4);
  }

  .abx-empty-state__title {
    font-family: var(--abx-font-display);
    font-size: var(--abx-fs-300);
    font-weight: 600;
  }
}

.abx-tag--ok {
  background: #e8f5e9;
  color: #2e7d32;
}

.abx-status-cancelled {
  background: #fce8e8;
  color: #9b1c1c;
  border: 1px solid #f5c2c2;
}

.abx-actions--center {
  justify-content: center;
}