/* Alice Bookings — design system
   Business = teal, Alice (AI receptionist) = violet. Mobile-first. */

:root {
  /* brand (themeable per client) */
  --brand: #0d9488;
  --brand-strong: #0f766e;
  --brand-tint: #f0fdfa;
  --brand-ink: #134e4a;

  /* Alice */
  --alice: #7c3aed;
  --alice-strong: #6d28d9;
  --alice-tint: #f5f3ff;

  /* status */
  --warn: #b45309;          /* needs your OK */
  --warn-tint: #fffbeb;
  --warn-line: #fde68a;
  --ok: #047857;
  --ok-tint: #ecfdf5;

  /* neutrals */
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #e2e8f0;
  --line-2: #eef2f6;
  --surface: #ffffff;
  --bg: #f6f8fa;
  --bg-2: #eef2f6;

  /* shape */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px;
  --pad: 16px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow-2: 0 4px 14px rgba(15,23,42,.08);
  --shadow-3: 0 18px 50px rgba(15,23,42,.18);
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
  --ease-follow: cubic-bezier(.22, 1, .36, 1);

  --tap: 44px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
.icon { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 26px; height: 26px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 12px;
  z-index: 200;
  transform: translateY(-180%);
  padding: 10px 14px;
  border-radius: var(--r);
  color: #fff;
  background: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------------------------ shell */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.screen {
  flex: 1;
  padding: 16px 16px calc(84px + env(safe-area-inset-bottom));
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  outline: none;
}
.sidebar { display: none; }

/* ------------------------------------------------------------------ onboarding wizard (full screen, no nav) */
.app[data-route="onboarding"] {
  background: #4c1d95;
}
.app[data-route="onboarding"] .sidebar,
.app[data-route="onboarding"] .topbar,
.app[data-route="onboarding"] .bottomnav { display: none; }
.app[data-route="onboarding"] .main { min-height: 100dvh; }
.app[data-route="onboarding"] .screen {
  max-width: none;
  min-height: 100dvh;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #4c1d95;
}

/* ------------------------------------------------------------------ auth */
.app[data-route="auth"] {
  background: #f6f8fa;
}
.app[data-route="auth"] .sidebar,
.app[data-route="auth"] .topbar,
.app[data-route="auth"] .bottomnav { display: none; }
.app[data-route="auth"] .main { min-height: 100dvh; }
.app[data-route="auth"] .screen {
  max-width: none;
  min-height: 100dvh;
  padding: 0;
  display: flex;
  align-items: stretch;
}
/* ---------------------------------------------- agency secure-access grant */
.app[data-route="grant"] { background: var(--bg-2); }
.app[data-route="grant"] .sidebar,
.app[data-route="grant"] .topbar,
.app[data-route="grant"] .bottomnav { display: none; }
.app[data-route="grant"] .main { min-height: 100dvh; }
.app[data-route="grant"] .screen { max-width: none; min-height: 100dvh; padding: 0; display: block; }
/* Mobile-first: single column, photo on top */
.auth-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-radius: 0;
}
.auth-panel {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.auth-panel { padding: 28px 22px; }
/* Mobile top-banner photo (shown on mobile only) */
.auth-mobile-hero {
  display: block;
  width: 100%;
  height: 332px;
  flex: none;
  background:
    linear-gradient(180deg, rgba(76,29,149,.08) 0%, rgba(255,255,255,.52) 100%),
    url('assets/people/login-hero-woman.jpg') center 52% / cover no-repeat,
    url('assets/people/login-hero-2.jpg') center 42% / cover no-repeat;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
}
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.auth-brand .brand-dot { width: 38px; height: 38px; }
.auth-brand .alice-face.mini { flex: none; }
.auth-brand strong { display: block; font-size: 15px; }
.auth-brand span { display: block; font-size: 12px; color: var(--muted); font-weight: 650; }
.auth-heading { margin-bottom: 18px; }
.auth-heading h1 {
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: 0;
  margin-bottom: 8px;
}
.auth-heading p { color: var(--muted); font-size: 15px; }
.auth-role-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.auth-role-card {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  padding: 13px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
  transition: border-color .16s var(--ease-premium), box-shadow .16s var(--ease-premium), transform .16s var(--ease-premium);
}
.auth-role-card:hover,
.auth-role-card:focus-visible {
  border-color: rgba(124,58,237,.42);
  box-shadow: 0 0 0 4px rgba(124,58,237,.10);
  outline: none;
}
.auth-role-card.is-selected {
  border-color: var(--alice);
  background: linear-gradient(180deg, #fff, #faf7ff);
  box-shadow: 0 0 0 4px rgba(124,58,237,.12);
}
.auth-role-icon {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--alice), #a78bfa);
}
.auth-role-card strong {
  display: block;
  font-size: 14px;
  line-height: 1.15;
}
.auth-role-card em {
  display: block;
  align-self: start;
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.25;
}
.auth-role-note {
  margin: -2px 0 14px;
  padding: 10px 12px;
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  background: #f5f3ff;
  color: var(--alice-strong);
  font-size: 13px;
  font-weight: 700;
}
.auth-mode { width: 100%; margin-bottom: 18px; }
.auth-mode button { flex: 1; min-height: 40px; }
.auth-form { display: grid; gap: 12px; }
.auth-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.auth-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  outline: none;
  transition: border-color .16s var(--ease-premium), box-shadow .16s var(--ease-premium);
}
.auth-form input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}
.auth-submit { margin-top: 4px; }
.auth-google { margin-top: 12px; }
.auth-pending-actions { display: grid; gap: 10px; margin-top: 18px; }
.auth-demo-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.auth-demo-link {
  font-size: 14px;
}
.auth-hero-photo {
  /* Hidden on mobile; full-bleed column on desktop */
  display: none;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  /* Preferred: smiling woman; fallback: login-hero-2 */
  background:
    linear-gradient(180deg, rgba(76,29,149,.08) 0%, rgba(49,16,93,.26) 100%),
    url('assets/people/login-hero-woman.jpg') center / cover no-repeat,
    url('assets/people/login-hero-2.jpg') center / cover no-repeat;
  box-shadow: none;
}
.auth-hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 36%, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.04), rgba(76,29,149,.14));
  pointer-events: none;
}
.auth-hero-copy {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 18px rgba(49,16,93,.4);
}
.auth-hero-copy span {
  display: block;
  margin-bottom: 8px;
  color: #ede9fe;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.auth-hero-copy strong {
  display: block;
  max-width: 360px;
  font-size: 32px;
  line-height: 1.02;
  letter-spacing: 0;
}
.auth-hero-copy p {
  max-width: 360px;
  margin-top: 10px;
  color: rgba(255,255,255,.88);
  font-size: 15px;
  line-height: 1.45;
}
.auth-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg);
  font-size: 13px;
}
.auth-status span { color: var(--muted); font-weight: 650; }
.auth-status strong { font-size: 13px; color: var(--ink); }
.auth-alt-row { display: flex; justify-content: center; margin-top: 10px; }
.link-btn {
  border: 0;
  background: transparent;
  color: var(--brand-strong);
  font-weight: 750;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}
.link-btn:hover { text-decoration: underline; }
.link-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 24%, transparent); outline-offset: 2px; }
.btn.btn-soft { background: #f8fafc; border-color: var(--line); color: var(--ink); }
.btn.btn-soft:hover { background: var(--bg-2); }

/* ---- desktop / iPad landscape: true Fresha-style full-viewport two-column split ---- */
@media (min-width: 900px) {
  .app[data-route="auth"] .screen {
    padding: 0;
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
  }
  .auth-shell {
    /* Full viewport: left ~45% sign-in panel, right ~55% hero photo */
    width: 100%;
    height: 100%;
    flex-direction: row;
    border-radius: 0;
  }
  .auth-mobile-hero { display: none; }
  .auth-panel {
    /* Left column: ~45% width, centered vertically, scrollable if needed */
    flex: 0 0 45%;
    max-width: 560px;
    min-width: 340px;
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    padding: clamp(32px, 4vw, 56px) clamp(28px, 3.6vw, 52px);
    border-right: 1px solid var(--line);
    box-shadow: 2px 0 18px rgba(15,23,42,.06);
    border-radius: 0;
  }
  .auth-hero-photo {
    /* Right column: fill all remaining space, edge-to-edge, full height */
    display: block;
    flex: 1 1 55%;
    min-height: 100%;
    width: auto;
    border-radius: 0;
    align-self: stretch;
  }
  .auth-heading h1 {
    font-size: clamp(34px, 3.4vw, 46px);
  }
  .auth-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- iPad portrait / narrow desktop: same split but tighter ---- */
@media (min-width: 900px) and (max-width: 1100px) {
  .auth-panel {
    flex: 0 0 48%;
    padding: 28px 26px;
  }
  .auth-role-grid {
    grid-template-columns: 1fr;
  }
  .auth-hero-copy strong {
    font-size: 26px;
  }
}

/* ---- mobile (<900px): stack — photo top banner, sign-in full width below ---- */
@media (max-width: 899px) {
  .app[data-route="auth"] .screen {
    padding: 0;
    flex-direction: column;
  }
  .auth-shell {
    flex-direction: column;
    width: 100%;
  }
  .auth-mobile-hero {
    display: block;
    height: clamp(320px, 86vw, 380px);
    width: 100%;
  }
  .auth-panel {
    flex: 1 1 auto;
    padding: 22px 18px 28px;
    border-right: 0;
    box-shadow: none;
    overflow-y: auto;
  }
  .auth-heading h1 {
    font-size: 28px;
  }
  .auth-hero-photo {
    display: none;
  }
}
.alice-face {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f7d7c8 0%, #fff7ed 68%, #f5f3ff 100%);
  border: 1px solid #f0c8b6;
  box-shadow: 0 10px 24px rgba(124,58,237,.12);
  overflow: hidden;
}
.alice-face.hero {
  width: 116px;
  height: 116px;
  margin: 0 0 16px;
  box-shadow: 0 22px 54px rgba(124,58,237,.18);
}
.alice-face-hair {
  position: absolute;
  top: -9%;
  width: 58%;
  height: 48%;
  background: #111827;
  border-radius: 50% 50% 42% 42%;
}
.alice-face-hair.left { left: -10%; transform: rotate(-20deg); }
.alice-face-hair.right { right: -12%; transform: rotate(24deg); }
.alice-face-eye {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  background: #111827;
  border-radius: 50%;
}
.alice-face.hero .alice-face-eye { width: 10px; height: 10px; }
.alice-face-eye.left { left: 34%; }
.alice-face-eye.right { right: 34%; }
.alice-face-mouth {
  position: absolute;
  left: 38%;
  right: 38%;
  bottom: 27%;
  height: 8px;
  border-bottom: 2px solid #111827;
  border-radius: 0 0 999px 999px;
}
.alice-face-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--alice);
  transform: rotate(45deg);
}
.alice-face-spark.one { right: 18%; top: 21%; }
.alice-face-spark.two { left: 18%; bottom: 18%; width: 5px; height: 5px; background: var(--brand); }

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
}
.topbar-row { display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* #brand-fit: the text column must be able to shrink below its content width, so a long brand name is bounded
   by the available space (then fitBrandName() in app.js scales it down to fit instead of the sidebar clipping it). */
.brand > div { min-width: 0; }
.brand-dot {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.brand-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: 12px; color: var(--muted); }
.spacer { flex: 1; }
.page-title { display: none; font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-top: 6px; }

.alice-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px; border-radius: 999px;
  background: var(--alice-tint); color: var(--alice-strong);
  border: 1px solid #e9d5ff;
  font-weight: 600; font-size: 13px; min-height: 38px;
}
.alice-pill .av { width: 22px; height: 22px; border-radius: 999px; background: var(--alice); color: #fff; display: grid; place-items: center; }
.alice-pill .count { background: var(--alice); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; font-size: 12px; }

/* calendar controls row */
.cal-controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.date-nav { display: flex; align-items: center; gap: 4px; }
.iconbtn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2); display: grid; place-items: center;
}
.iconbtn:hover { background: var(--bg-2); }
.btn-today { height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; }
.cal-title { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.cal-title small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.talk-alice-btn { flex: none; white-space: nowrap; }
.calendar-sticky-stack {
  position: sticky; top: 0; z-index: 24;
  margin: 0 0 0;
  background: var(--bg);
  padding-top: 2px;
}
.calendar-sticky-stack--solo { margin-bottom: 10px; }
.calendar-range-rail {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 7px 0 8px;
  background: var(--bg);
}
.calendar-range-rail .date-nav { flex: none; }
.calendar-range-rail .cal-title { min-width: 0; }
.calendar-range-rail .cal-title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-swipe-surface { min-height: 100%; position: relative; touch-action: pan-y; }
.calendar-swipe-surface.is-range-swiping { cursor: grabbing; }
.calendar-swipe-surface.is-swipe-previewing > :not(.calendar-range-stage) { visibility: hidden; }
.calendar-range-stage {
  position: absolute; inset: 0; z-index: 10; overflow: hidden;
  background: var(--bg); pointer-events: none;
}
.calendar-range-track {
  display: flex; align-items: flex-start; width: 100%;
  transform: translate3d(calc(-100% + var(--swipe-x, 0px)), 0, 0);
  will-change: transform;
}
.calendar-swipe-surface.is-swipe-committing .calendar-range-track {
  transition: transform .56s var(--ease-premium);
}
.calendar-range-panel {
  flex: 0 0 100%; min-width: 0; max-width: 100%;
  opacity: .92; transform: scale(.992);
  transition: opacity .18s var(--ease-premium), transform .18s var(--ease-premium);
}
.calendar-range-panel.is-current { opacity: 1; transform: none; }

.cal-alice-queue {
  display: flex; align-items: stretch; gap: 10px;
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid #eadcff;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(124, 58, 237, .09), rgba(255, 255, 255, .94) 48%, rgba(13, 148, 136, .08));
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.cal-alice-summary {
  flex: 0 0 214px;
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
  color: var(--alice-strong);
}
.cal-alice-summary .av {
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--alice); color: #fff;
  display: grid; place-items: center; flex: none;
}
.cal-alice-summary strong { display: block; font-size: 14px; color: var(--ink); line-height: 1.15; }
.cal-alice-summary span { display: block; font-size: 12px; color: var(--alice-strong); margin-top: 2px; }
.cal-alice-summary em {
  margin-left: auto;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--alice); color: #fff;
  font-style: normal; font-size: 12px; font-weight: 800;
}
.cal-alice-items {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: stretch; gap: 8px;
}
.cal-alice-queue.is-expanded {
  align-items: flex-start;
}
.cal-alice-queue.is-expanded .cal-alice-items {
  flex-wrap: wrap;
}
.cal-alice-item {
  flex: 1 1 260px; min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
}
.cal-alice-item.update { flex-basis: 300px; min-width: 280px; }
.cal-alice-item.followup {
  border-color: color-mix(in srgb, var(--warn) 18%, var(--line));
  background: color-mix(in srgb, var(--warn-tint) 72%, #fff);
}
.cal-alice-item.newlead {
  border-color: color-mix(in srgb, var(--alice) 20%, var(--line));
  background: color-mix(in srgb, var(--alice-tint) 78%, #fff);
}
.cal-alice-item .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 76px;
  padding-inline: 10px;
}
.cal-alice-item.update .btn {
  min-width: 58px;
  padding-inline: 9px;
}
.cal-alice-main {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; color: inherit;
  padding: 0; display: flex; align-items: center; gap: 9px;
  text-align: left;
}
.cal-alice-copy { min-width: 0; display: block; }
.cal-alice-copy strong { display: block; font-size: 13px; line-height: 1.1; color: var(--ink); }
.cal-alice-copy span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-alice-more,
.cal-alice-toggle {
  flex: 0 0 auto;
  display: grid; place-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(124, 58, 237, .1);
  color: var(--alice-strong);
  font-size: 12px; font-weight: 800;
  cursor: pointer;
}
.cal-alice-toggle {
  min-height: 30px;
  margin-left: 4px;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .14);
}
.cal-alice-queue.is-highlighted { animation: aliceQueueFocus .78s var(--ease-premium) both; }
@keyframes aliceQueueFocus {
  0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .22), var(--shadow-1); transform: translateY(0); }
  45% { box-shadow: 0 0 0 8px rgba(124, 58, 237, .08), var(--shadow-2); transform: translateY(-1px); }
  100% { box-shadow: var(--shadow-1); transform: translateY(0); }
}

.segmented { display: inline-flex; background: var(--bg-2); border-radius: 10px; padding: 3px; gap: 2px; }
.segmented button { border: 0; background: transparent; border-radius: 8px; padding: 7px 11px; font-size: 13px; font-weight: 600; color: var(--muted); min-height: 34px; }
.segmented button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }

/* ------------------------------------------------------------------ bottom nav */
.bottomnav {
  position: fixed; left: 0; right: auto; top: calc(100dvh - 60px - env(safe-area-inset-bottom)); bottom: auto; z-index: 120;
  width: 100dvw;
  max-width: 100dvw;
  display: flex; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: calc(60px + env(safe-area-inset-bottom));
  isolation: isolate;
}
.bottomnav button {
  flex: 1; border: 0; background: transparent; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 8px; font-size: 11px; font-weight: 600; min-height: var(--tap);
  position: relative;
}
.bottomnav button[aria-current="page"] { color: var(--brand); }
.bottomnav .nav-badge {
  position: absolute; top: 6px; right: 50%; transform: translateX(16px);
  background: var(--alice); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center;
}
/* 2026-05-31 (Inbox): bottom-nav grew 5 → 6 items. Buttons are flex:1 so they redistribute;
   on the narrowest phones tighten the label + horizontal padding so 6 still fit at 375px
   without truncation. Calendar-view styles untouched. */
@media (max-width: 400px) {
  .bottomnav button { padding-left: 2px; padding-right: 2px; font-size: 10px; letter-spacing: -.01em; }
  .bottomnav button span:not(.nav-badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--tap); padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 650; font-size: 15px; background: var(--bg-2); color: var(--ink);
  text-decoration: none; transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-alice { background: var(--alice); color: #fff; }
.btn-alice:hover { background: var(--alice-strong); }
.btn-ghost { background: #fff; border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-danger { background: #fff; border-color: #fecaca; color: #b91c1c; }
.btn-block { width: 100%; }
.btn-sm { height: 38px; padding: 0 13px; font-size: 14px; border-radius: 10px; }
.btn.disabled { opacity: .58; pointer-events: none; }

/* ------------------------------------------------------------------ chips / badges */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--bg-2); color: var(--ink-2); border: 1px solid transparent; }
.chip-alice { background: var(--alice-tint); color: var(--alice-strong); }
.chip-warn { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-line); }
.chip-ok { background: var(--ok-tint); color: var(--ok); }
.chip-brand { background: var(--brand-tint); color: var(--brand-ink); }
.chip.selectable { cursor: pointer; }
.chip.selectable[aria-pressed="true"] { background: var(--brand); color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); flex: none; }
.dot-alice { background: var(--alice); } .dot-brand { background: var(--brand); } .dot-warn { background: var(--warn); }

/* ------------------------------------------------------------------ sections / cards */
.section-h { display: flex; align-items: center; gap: 8px; margin: 22px 2px 10px; }
.section-h:first-child { margin-top: 6px; }
.section-h h2 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.section-h .count-tag { font-size: 12px; color: var(--faint); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.stack > * + * { margin-top: 10px; }

.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty .icon { margin: 0 auto 10px; width: 30px; height: 30px; color: var(--faint); }
.empty p { font-size: 14px; }

/* ------------------------------------------------------------------ agenda (mobile day list) */
.agenda { display: flex; flex-direction: column; gap: 8px; }
.slot { display: flex; gap: 12px; }
.slot-time { width: 58px; flex: none; text-align: right; padding-top: 14px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.slot-body { flex: 1; min-width: 0; }

.appt {
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--r); background: #fff; padding: 12px 14px; box-shadow: var(--shadow-1);
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 60px;
}
.appt:hover { box-shadow: var(--shadow-2); }
.appt .who { font-weight: 650; }
.appt .meta { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.appt .meta .icon-sm { width: 14px; height: 14px; color: var(--faint); }
.appt-lead { border-left-color: var(--alice); background: linear-gradient(0deg, #fff, #fff), var(--alice-tint); }
.appt-lead .src { color: var(--alice-strong); font-weight: 700; }
.booking-card { cursor: default; }
.booking-main {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0; margin: 0;
  display: flex; align-items: center; gap: 12px; text-align: left; color: inherit;
}
.booking-main:focus-visible, .staff-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 12px; }
.booking-right {
  margin-left: auto; flex: 0 0 auto; min-width: 260px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}

.staff-tray {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px 70px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.staff-tray-label { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.staff-tray-hint { margin-left: auto; font-size: 12px; color: var(--faint); font-weight: 600; }
.staff-chip {
  appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  min-height: 32px; max-width: 138px; padding: 3px 9px 3px 3px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px;
  box-shadow: var(--shadow-1); cursor: grab; user-select: none;
  transition: background .14s var(--ease-premium), border-color .14s var(--ease-premium), box-shadow .14s var(--ease-premium), opacity .12s var(--ease-premium), transform .12s var(--ease-premium);
  touch-action: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.staff-chip.assigned { border-color: #dbeafe; background: #f8fbff; }
body.is-pointer-dragging,
body.is-pointer-dragging * { cursor: grabbing !important; user-select: none; }
body.is-staffday-panning,
body.is-staffday-panning * {
  cursor: grabbing !important;
  -webkit-user-select: none;
  user-select: none;
}
[data-drag-type] {
  /* NATIVE VERTICAL SCROLL (Jase 2026-06-10): pan-y (was `none`) so the BROWSER scrolls the page natively on the
     compositor thread when a finger pans VERTICALLY over a booking/lead card — buttery, never janks. (HORIZONTAL
     column-scroll in All-Staff view is driven by the staffday column-pan in app.js — native nested horizontal scroll
     is unreliable on these absolutely-positioned cards, so pan-y here keeps horizontal off the native path and lets
     the JS column-pan own it cleanly with no double-scroll.) The long-press DRAG still works via the non-passive
     touchmove guard in app.js (preventDefaults ONLY once a drag has started). */
  touch-action: pan-y;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.staff-chip.dragging, [data-drag-type].dragging {
  opacity: .44; transform: scale(.985); transform-origin: center;
  transition: opacity .12s var(--ease-premium), transform .12s var(--ease-premium), filter .12s var(--ease-premium);
  filter: saturate(.88);
}
.drag-ghost {
  border-radius: 10px !important; opacity: .92 !important; overflow: hidden !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.22) !important;
}
.pointer-drag-ghost {
  opacity: .97 !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 22px 54px rgba(15,23,42,.24), 0 2px 10px rgba(15,23,42,.12) !important;
  transition: opacity .16s var(--ease-premium), box-shadow .16s var(--ease-premium), filter .16s var(--ease-premium) !important;
  will-change: transform, opacity;
  contain: layout style paint;
  backface-visibility: hidden;
  transform-origin: 0 0;
}
.pointer-drag-ghost.snap-ready {
  opacity: 1 !important;
  filter: saturate(1.06);
  box-shadow: 0 26px 60px rgba(15,23,42,.24), 0 0 0 5px rgba(13,148,136,.13) !important;
}
.pointer-drag-ghost.staff-drag-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pointer-drag-ghost.snap-blocked {
  opacity: .88 !important;
  filter: saturate(.9);
  box-shadow: 0 18px 44px rgba(15,23,42,.2), 0 0 0 5px rgba(185,28,28,.12) !important;
}
.staff-chip:active { cursor: grabbing; }
.staff-face {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  display: grid; place-items: center; color: #fff; background: var(--staff, var(--brand));
  font-size: 11px; font-weight: 800;
}
.staff-face img,
.settings-staff-face img {
  width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}
.staff-name { min-width: 0; max-width: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-dropzone {
  min-width: 142px; min-height: 38px; padding: 3px;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap;
  border: 1.5px dashed transparent; border-radius: 999px;
  transition: background .14s var(--ease-premium), border-color .14s var(--ease-premium), box-shadow .14s var(--ease-premium);
}
.staff-dropzone,
[data-dropzone="staff"] { position: relative; }
.staff-dropzone.drag-over { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px rgba(13,148,136,.12); }
[data-dropzone="staff"].drag-over {
  outline: 2px solid rgba(13,148,136,.28);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(13,148,136,.08), var(--shadow-1);
}
[data-dropzone="staff"].drag-over::after {
  content: attr(data-staff-drop-label);
  position: absolute;
  left: 8px; right: 8px; top: 8px; z-index: 6;
  display: block; padding: 4px 8px; border-radius: 999px;
  background: rgba(15,23,42,.88); color: #fff;
  font-size: 11px; font-weight: 850; line-height: 1.1;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.staff-empty { color: var(--faint); font-size: 12px; font-weight: 700; padding: 0 6px; }
.crew-count {
  height: 28px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center;
  background: var(--ok-tint); color: var(--ok); border: 1px solid #bbf7d0;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.crew-count.short { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-line); }
.now-slot { align-items: center; }
.now-time { color: #dc2626; font-weight: 800; padding-top: 0; }
.now-line {
  position: relative; height: 18px; display: flex; align-items: center; color: #dc2626; font-size: 12px; font-weight: 800;
}
.now-line::before {
  content: ""; height: 2px; flex: 1; background: #dc2626; border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
.now-line span {
  order: -1; margin-right: 8px; padding: 2px 7px; border-radius: 999px; background: #dc2626; color: #fff;
}

.free {
  width: 100%; border: 1.5px dashed var(--line); color: var(--muted);
  background: #fff; border-radius: var(--r); padding: 11px 14px; min-height: 52px;
  display: flex; align-items: center; gap: 10px; font-size: 14px; text-align: left;
  position: relative; overflow: hidden;
}
.free:hover { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-tint); }
.free.drag-over, .wg-cell.drag-over {
  border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 2px rgba(13,148,136,.14);
}
.wg-cell.drag-invalid,
.sd-cell.drag-invalid {
  border-color: #fecaca;
  background: #fef2f2;
  box-shadow: inset 0 0 0 2px rgba(185,28,28,.16);
}
.wg-cell.drag-reassign,
.sd-cell.drag-reassign {
  border-color: #bfdbfe;
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px rgba(37,99,235,.14);
}
.wg-cell,
.sd-cell { position: relative; }
[data-dropzone="time"].drag-over,
[data-dropzone="time"].drop-landed {
  z-index: 12;
}
[data-dropzone="time"].drag-over::after,
[data-dropzone="time"].drop-landed::after {
  content: attr(data-snap-label);
  position: absolute;
  left: 8px; right: 8px; top: 50%;
  min-height: 24px; padding: 3px 8px;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%) scale(.98);
  border-radius: 999px;
  background: rgba(15,23,42,.88);
  color: #fff;
  box-shadow: 0 8px 22px rgba(15,23,42,.18);
  font-size: 11px; font-weight: 850; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  animation: snapLabelIn .18s var(--ease-premium) forwards;
}
[data-dropzone="time"].drag-invalid::after {
  background: rgba(185,28,28,.94);
  box-shadow: 0 8px 22px rgba(185,28,28,.18);
}
[data-dropzone="time"].drag-reassign::after {
  background: rgba(29,78,216,.92);
  box-shadow: 0 8px 22px rgba(29,78,216,.16);
}
[data-dropzone="time"].drop-landed {
  background: #f8fafc;
  box-shadow: inset 0 0 0 2px rgba(124,58,237,.16), 0 0 0 4px rgba(124,58,237,.06);
  animation: snapLanding .28s var(--ease-premium);
}
[data-dropzone="time"].drop-landed::after {
  background: rgba(88,28,135,.88);
}
.free .plus { margin-left: auto; opacity: .65; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }

.blocked {
  width: 100%; border-radius: var(--r); padding: 10px 14px; min-height: 46px;
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted);
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 9px, #eaeff5 9px, #eaeff5 18px);
  border: 1px solid var(--line);
}

/* ------------------------------------------------------------------ staff day grid */
.day-subnav {
  display: flex; justify-content: flex-end; margin: 0 0 12px;
}
.staff-focusbar {
  display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 14px; padding: 2px 0 4px;
}
.staff-focusbar::-webkit-scrollbar { display: none; }
.staff-focus-chip {
  flex: none; min-height: 36px; border: 1px solid #cbd5e1; background: #fff; color: #0f172a;
  border-radius: 999px; padding: 3px 11px 3px 4px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800; box-shadow: var(--shadow-1);
}
.staff-focus-chip:first-child {
  padding: 0 14px; border-color: #0f172a; background: #0f172a; color: #fff;
  box-shadow: 0 8px 22px rgba(15,23,42,.16);
}
.staff-focus-chip:first-child[aria-pressed="false"] {
  background: #fff; color: #0f172a; border-color: #0f172a;
}
.staff-focus-chip:first-child[aria-pressed="true"] {
  background: #0f172a; color: #fff; border-color: #0f172a;
}
.staff-focus-chip[aria-pressed="true"] { border-color: #0f172a; background: #0f172a; color: #fff; }
/* Bounded scroll viewport → the time column (sticky left) and staff header row
   (sticky top) freeze while the grid scrolls inside. Without a max-height the grid
   ran full-height off the screen (couldn't reach later times; header scrolled away). */
.staffday-head-wrap,
.staffday-wrap {
  -webkit-overflow-scrolling: touch;
  background: #fff;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.staffday-head-wrap {
  overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  scrollbar-width: none;
}
.staffday-head-wrap.is-all-staff {
  position: relative;
  overflow-x: hidden;
  --staffday-x: 0;
}
.staffday-head-wrap.is-all-staff::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 90;
  width: 58px;
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}
.staffday-head-wrap::-webkit-scrollbar { display: none; }
.staffday-wrap {
  position: relative;
  z-index: 1;
  overflow-x: auto; overflow-y: visible;
  max-height: none; min-height: 0;
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-1);
}
.staffday {
  position: relative; display: grid;
  grid-template-columns: 58px repeat(var(--staffcols, 1), minmax(170px, 1fr));
  min-width: calc(58px + (var(--staffcols, 1) * 170px));
}
.staffday-head,
.staffday-body { width: max-content; min-width: 100%; }
.staffday-head-wrap.is-all-staff .staffday,
.staffday-wrap.is-all-staff .staffday {
  grid-template-columns: 58px repeat(var(--staffcols, 1), 170px);
  padding-right: 96px;
}
.staffday-head-wrap.is-single-staff .staffday,
.staffday-wrap.is-single-staff .staffday {
  grid-template-columns: 58px minmax(0, 1fr);
  width: 100%; min-width: 0;
}
.sd-corner { position: sticky; top: 0; left: 0; z-index: 36; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sd-head {
  position: sticky; top: 0; z-index: 4; min-height: 88px; border: 0; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96); display: grid; place-items: center; align-content: center; gap: 4px;
  text-align: center; padding: 10px 8px;
}
.sd-head:hover { background: var(--brand-tint); }
.sd-head .staff-face { width: 42px; height: 42px; font-size: 13px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--staff, var(--brand)) 20%, transparent); }
.sd-head strong { font-size: 13px; line-height: 1.1; }
.sd-head .staff-role {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sd-head > span:last-child:not(.staff-role) { font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-head.alice .staff-face { background: var(--alice); }
.staffday-head .sd-head { position: relative; top: auto; }
.staffday-head-wrap.is-all-staff .staffday-head .sd-head {
  transform: translate3d(calc(var(--staffday-x, 0) * -1px), 0, 0);
  will-change: transform;
}
.staffday-head .sd-corner { top: auto; min-height: 88px; }
.staffday-head-wrap.is-all-staff .sd-corner {
  z-index: 91;
  background: #fff;
}
.sd-timecol { position: sticky; left: 0; z-index: 34; background: #fff; border-right: 1px solid var(--line); box-shadow: 8px 0 12px -14px rgba(15,23,42,.28); }
.sd-timecell { height: 24px; border-bottom: 1px solid var(--line-2); text-align: right; padding: 0 6px 0 0; color: var(--faint); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; line-height: 24px; }
.sd-timecell.onhour { color: var(--ink-2); font-weight: 600; }
.sd-timecell.half { color: #b6c2d1; }
.sd-timecell.half { color: #b6c2d1; font-size: 10px; }
.sd-col { position: relative; min-height: var(--dayheight); border-right: 1px solid var(--line-2); }
.sd-col:last-child { border-right: 0; }
.sd-cell { height: 24px; border-bottom: 1px solid var(--line-2); }
.sd-cell.half { border-bottom-color: #f5f7fa; }
.sd-cell.drag-over { background: var(--brand-tint); box-shadow: inset 0 0 0 2px rgba(13,148,136,.14); }
.sd-cell.muted { background: #fafafa; }
/* Mobile all-staff day: keep columns readable and let owners pan sideways. */
@media (max-width: 700px) {
  .staffday {
    grid-template-columns: 40px repeat(var(--staffcols, 1), minmax(104px, 1fr));
    min-width: calc(40px + (var(--staffcols, 1) * 104px));
  }
  .staffday-head-wrap.is-all-staff .staffday,
  .staffday-wrap.is-all-staff .staffday {
    grid-template-columns: 40px repeat(var(--staffcols, 1), 104px);
    padding-right: 86px;
  }
  .staffday-head-wrap.is-single-staff .staffday,
  .staffday-wrap.is-single-staff .staffday {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .sd-corner, .sd-timecol { width: 40px; }
  .staffday-head-wrap.is-all-staff::before { width: 40px; }
  .sd-timecell { font-size: 9.5px; padding-right: 3px; }
  .sd-head { min-height: 60px; padding: 5px 2px; }
  .staffday-head .sd-corner { min-height: 60px; }
  .sd-head .staff-face { width: 26px; height: 26px; font-size: 10px; }
  .sd-head strong { font-size: 10.5px; }
  .sd-head .staff-role { font-size: 9.5px; line-height: 1.12; }
  .sd-head > span:last-child:not(.staff-role) { font-size: 8.5px; }
  .sd-event { font-size: 10px; padding: 2px 4px; }
}
.drag-slot-preview {
  position: absolute; left: 6px; right: 6px; top: 0; z-index: 17;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 6px 8px; border-radius: 9px;
  border: 1.5px solid rgba(13,148,136,.44);
  background: linear-gradient(180deg, rgba(240,253,250,.96), rgba(204,251,241,.68));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 12px 28px rgba(13,148,136,.14);
  color: var(--brand-ink); pointer-events: none;
  transform: translate3d(0, var(--preview-y, 0px), 0);
  will-change: transform, height;
  animation: placementPreviewIn .14s var(--ease-premium);
}
.wg-col .drag-slot-preview { left: 4px; right: 4px; }
.drag-slot-preview.lead {
  border-color: rgba(124,58,237,.44);
  background: linear-gradient(180deg, rgba(245,243,255,.98), rgba(221,214,254,.74));
  color: var(--alice-strong);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74), 0 12px 28px rgba(124,58,237,.13);
}
.drag-slot-preview.blocked {
  border-color: rgba(185,28,28,.44);
  background: linear-gradient(180deg, rgba(254,242,242,.98), rgba(254,226,226,.76));
  color: #991b1b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74), 0 12px 28px rgba(185,28,28,.12);
}
.drag-slot-preview.reassign {
  border-color: rgba(37,99,235,.42);
  background: linear-gradient(180deg, rgba(239,246,255,.98), rgba(219,234,254,.76));
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74), 0 12px 28px rgba(37,99,235,.12);
}
.drag-slot-preview span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.78);
  font-size: 11px; font-weight: 850; line-height: 1.25;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.sd-event {
  position: absolute; left: 6px; right: 6px; border: 0; border-radius: 8px; background: var(--brand); color: #fff;
  display: block; text-align: left; padding: 8px 9px 17px; box-shadow: var(--shadow-1); overflow: hidden;
  transition: height .08s ease-out, box-shadow .12s ease, transform .12s ease;
}
.sd-event:hover { box-shadow: var(--shadow-2); }
.sd-event strong { display: block; font-size: 14px; font-weight: 750; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-event .sd-service { display: block; font-size: 12px; line-height: 1.25; opacity: .94; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-event .sd-time { display: block; font-size: 10.5px; font-weight: 600; opacity: .8; margin-top: 2px; }
.sd-event .resize-grip { display: block; opacity: .85; }
/* SR-01 #4 (Jase 2026-06-08): "Go to Calendar" lands on the booking + this glow makes the target slot pop. box-shadow only (no transform) so calendar drag math is unaffected. */
.sd-event.is-highlight, .wg-event.is-highlight { z-index: 6; animation: calBookingGlow 2s ease-in-out infinite; }
@keyframes calBookingGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(124,58,237,.55), 0 0 6px 2px rgba(124,58,237,.30); }
  50% { box-shadow: 0 0 0 3px rgba(124,58,237,.95), 0 0 16px 6px rgba(124,58,237,.55); }
}
.sd-event.lead { background: var(--alice-tint); color: var(--alice-strong); border: 1.5px dashed var(--alice); }
.sd-block {
  position: absolute; left: 6px; right: 6px; border-radius: 8px; padding: 4px 8px; font-size: 11.5px; color: #b91c1c; font-weight: 600;
  background: repeating-linear-gradient(45deg, #fef2f2, #fef2f2 8px, #fbdcdc 8px, #fbdcdc 16px);
  border: 1px solid #f4baba; overflow: hidden;
  display: flex; align-items: center; align-content: center; gap: 4px 6px; flex-wrap: wrap; line-height: 1.08;
}
.sd-lunch { color: #b45309; background: repeating-linear-gradient(45deg, #fff7ed, #fff7ed 9px, #fdebd3 9px, #fdebd3 18px); border-color: #f7d9a8; cursor: pointer; z-index: 2; }
.sd-lunch .icon { width: 13px; height: 13px; flex: none; }
/* SPEC-05: staff-made block = orange (admin/team stay red). SPEC-02: full-column "On leave" band. */
.sd-block--staff { color: #dc2626; background: repeating-linear-gradient(45deg, #fff7f7, #fff7f7 7px, #fde7e7 7px, #fde7e7 14px); border-color: #f7cccc; }
.sd-leave-band { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; pointer-events: none; color: #9a3412; font-weight: 700; font-size: 12px; letter-spacing: .02em; background: repeating-linear-gradient(45deg, rgba(255,237,213,.7), rgba(255,237,213,.7) 11px, rgba(254,215,170,.7) 11px, rgba(254,215,170,.7) 22px); }
.sd-leave-band .icon { width: 18px; height: 18px; opacity: .85; }
.slot-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-time { flex: none; white-space: nowrap; font-size: 10px; font-weight: 800; opacity: .82; }
/* empty slots + blocks: no text callout/selection so a 4s long-press is clean on mobile */
.sd-cell, .wg-cell, .sd-block { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body.is-block-gesturing,
body.is-block-gesturing .staffday-wrap,
body.is-block-gesturing .weekgrid-wrap {
  overscroll-behavior: none;
}
body.is-block-gesturing .staffday-wrap,
body.is-block-gesturing .weekgrid-wrap {
  overflow: hidden;
  touch-action: none;
}
body.is-block-gesturing .sd-cell,
body.is-block-gesturing .wg-cell {
  touch-action: none;
}
/* long-press arming feedback (fills over ~4s) */
@keyframes lpArm { from { box-shadow: inset 0 0 0 0 rgba(124,58,237,.18); } to { box-shadow: inset 0 0 0 40px rgba(124,58,237,.18); } }
.lp-arming { outline: 2px solid var(--alice, #a78bfa); outline-offset: -2px; border-radius: 6px; box-shadow: 0 0 0 3px rgba(124,58,237,.14); }
.bg-prov { z-index: 7; opacity: .9; border-style: dashed !important; pointer-events: none; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .sd-cell:hover,
  .wg-cell:hover {
    background: var(--brand-tint);
    cursor: pointer;
  }
}
.cal-tip { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 7px 11px; border-radius: 10px; background: var(--alice-tint, #f3effe); color: var(--alice-strong, #6d28d9); font-size: 12.5px; }
.cal-tip .icon { width: 15px; height: 15px; flex: none; }
.cal-tip strong { font-weight: 700; }
.cal-tip--gesture { margin: 10px 0 0; }
.staffday-now {
  /* 2026-05-29 (Jase bug report v2): z-index was 8 but draft/lead events use z-index 12
     (see .sd-event.state-draft + .sd-event.lead rules below). Bump to 20 to ALWAYS
     keep the red live-time line above every event. */
  position: absolute; left: 58px; right: 0; z-index: 38; height: 2px; background: #dc2626; border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(220,38,38,.08);
  pointer-events: none;
}
.staffday-now span {
  position: sticky; left: 62px; display: inline-block; transform: translateY(-10px);
  padding: 1px 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800;
}
@media (max-width: 700px) {
  .staffday-now { left: 40px; }
  .staffday-now span { left: 44px; }
}

/* ------------------------------------------------------------------ week grid (desktop) */
.weekgrid-head-wrap,
.weekgrid-wrap {
  overflow-x: auto; overflow-y: visible;
  position: relative;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.weekgrid-head-wrap {
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  scrollbar-width: none;
}
.weekgrid-head-wrap::-webkit-scrollbar { display: none; }
.weekgrid-wrap {
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.weekgrid-wrap.edge-left,
.weekgrid-wrap.edge-right { box-shadow: none; }
.weekgrid {
  display: grid; grid-template-columns: 56px repeat(var(--cols, 7), minmax(120px, 1fr));
  border: 0; border-radius: 0; overflow: visible; background: #fff;
  min-width: 680px;
  transition: box-shadow .42s cubic-bezier(.16, 1, .3, 1), filter .42s cubic-bezier(.16, 1, .3, 1);
}
.weekgrid-wrap.edge-left .weekgrid {
  box-shadow: inset 24px 0 34px -26px rgba(124,58,237,.36);
}
.weekgrid-wrap.edge-right .weekgrid {
  box-shadow: inset -24px 0 34px -26px rgba(124,58,237,.36);
}
.weekgrid.is-three { grid-template-columns: 56px repeat(var(--cols, 3), minmax(230px, 1fr)); min-width: 760px; }
.wg-head {
  position: sticky; top: 0; background: #fff; z-index: 2; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 8px; text-align: center; display: grid; place-items: center; gap: 2px;
}
.weekgrid-head .wg-head { position: relative; top: auto; }
.wg-head:hover { background: var(--bg); }
.wg-head:focus-visible { outline: 3px solid rgba(249,115,22,.28); outline-offset: -3px; }
.wg-head .dow { font-size: 12px; color: var(--muted); font-weight: 600; }
.wg-head .dnum { font-weight: 700; font-size: 16px; margin-top: 2px; }
.wg-head.today .dow { color: #ea580c; }
.wg-head.today .dnum {
  color: #fff; background: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,.16);
  width: 32px; height: 32px; border-radius: 999px; display: inline-grid; place-items: center;
}
.wg-corner { position: sticky; left: 0; z-index: 4; background: #fff; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.wg-timecol { position: sticky; left: 0; z-index: 3; background: #fff; border-right: 1px solid var(--line); }
.wg-time { height: 24px; font-size: 10.5px; color: var(--faint); text-align: right; padding: 0 6px 0 0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; line-height: 24px; }
.wg-time.onhour { color: var(--ink-2); font-weight: 600; }
.wg-time.half { color: #b6c2d1; }
.wg-time.half { color: #b6c2d1; font-size: 10px; }
.wg-col { position: relative; border-right: 1px solid var(--line-2); }
.wg-col:last-child { border-right: 0; }
.wg-cell { height: 24px; border-bottom: 1px solid var(--line-2); }
.wg-lunch { display: flex; align-items: center; align-content: center; justify-content: center; gap: 1px 4px; flex-wrap: wrap; left: 3px; right: 3px; padding: 2px 3px; color: #b45309; background: repeating-linear-gradient(45deg, #fff7ed, #fff7ed 7px, #fdebd3 7px, #fdebd3 14px); border: 1px solid #f7d9a8; border-radius: 6px; pointer-events: auto; cursor: pointer; z-index: 1; line-height: 1.05; }
.wg-lunch .icon { width: 12px; height: 12px; }
.wg-event.block { display: flex; align-items: center; align-content: center; gap: 1px 4px; flex-wrap: wrap; line-height: 1.05; }
.wg-event.block .slot-time,
.wg-lunch .slot-time { font-size: 8.5px; }
.wg-cell.half { border-bottom-color: #f5f7fa; }
.wg-col.closed { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 9px, #f1f5f9 9px, #f1f5f9 18px); }
.wg-event {
  position: absolute; left: 4px; right: 4px; border-radius: 9px; padding: 5px 8px; overflow: hidden;
  min-height: 46px;
  font-size: 12px; line-height: 1.25; box-shadow: var(--shadow-1); border: 1px solid transparent; text-align: left;
}
.wg-event .wg-name { display: block; font-weight: 750; }
.wg-event .wg-service { display: block; opacity: .92; }
.wg-event .t { display: block; font-weight: 600; font-size: 9.5px; opacity: .8; margin-top: 1px; }
.wg-service { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.wg-event.booking {
  background: var(--brand); color: #fff; padding-right: 72px; padding-bottom: 14px; cursor: grab;
  transition: height .08s ease-out, box-shadow .12s ease, transform .12s ease;
}
.wg-event.booking.density-compact {
  padding: 4px 5px 13px; font-size: 11px; line-height: 1.12;
}
.wg-event.booking.density-compact .booking-status {
  width: 9px; height: 9px; padding: 0; top: 5px; right: 5px;
  color: transparent; background: rgba(255,255,255,.82);
}
.wg-event.booking.density-compact .wg-service {
  display: block; max-height: 13px; font-size: 10px; opacity: .95;
}
.wg-event.booking.density-compact .week-staff { right: 5px; bottom: 4px; gap: 2px; }
.wg-event.booking.density-compact .week-staff-face { width: 14px; height: 14px; font-size: 6px; border-width: 1px; }
.wg-event.booking.density-micro {
  padding: 0; min-height: 30px; border-radius: 7px; box-shadow: none;
  color: transparent;
}
.wg-event.booking.density-micro .t,
.wg-event.booking.density-micro .wg-name,
.wg-event.booking.density-micro .wg-service,
.wg-event.booking.density-micro .booking-status,
.wg-event.booking.density-micro .week-staff {
  display: none;
}
.wg-event.booking.density-micro .resize-grip { left: 3px; right: 3px; height: 100%; bottom: 0; opacity: 0; }
/* Alice draft: transparent fill + always on top of bookings/blocks (Jase, 2026-05-28).
   Keeps the dashed Alice outline + label, but the time grid + bookings beneath stay readable. */
.wg-event.booking.state-draft, .sd-event.state-draft {
  background: transparent;
  color: var(--alice-strong, #5b21b6);
  border: 1.5px dashed color-mix(in srgb, var(--alice) 60%, #fff);
  z-index: 12;            /* above blocks (1) and standard bookings (2) */
}
.wg-event.booking.state-draft .booking-status,
.sd-event.state-draft .booking-status {
  background: rgba(124, 58, 237, .12);
  color: var(--alice-strong, #5b21b6);
}
.wg-event.booking.state-draft {
  outline: 1.5px dashed color-mix(in srgb, var(--alice) 55%, #fff);
  outline-offset: 2px;
}
.wg-event.booking.state-booked, .sd-event.state-booked { background: var(--brand); }
.wg-event.booking.state-quoted, .sd-event.state-quoted { background: #d97706; }
.wg-event.booking.state-paid, .sd-event.state-paid { background: #2563eb; }
.wg-event.booking.state-review-ready, .sd-event.state-review-ready { background: #7c3aed; }
.wg-event.booking.state-reviewed, .sd-event.state-reviewed { background: #047857; }
.wg-event.booking.state-workapp, .sd-event.state-workapp { background: #334155; }
.wg-event.booking.state-cancelled, .sd-event.state-cancelled {
  background: #94a3b8; color: #f8fafc; text-decoration: line-through; opacity: .82;
}
.wg-event.booking.group { padding-right: 8px; padding-bottom: 26px; }
.wg-event.booking.drag-over {
  outline: 2px solid rgba(13,148,136,.45); outline-offset: 2px;
  box-shadow: var(--shadow-2), inset 0 0 0 999px rgba(240,253,250,.14);
}
.wg-event.lead { background: var(--alice-tint); color: var(--alice-strong); border: 1.5px dashed var(--alice); }
.wg-event.block { background: repeating-linear-gradient(45deg, #fef2f2, #fef2f2 7px, #fbdcdc 7px, #fbdcdc 14px); color: #b91c1c; border: 1px solid #f4baba; font-weight: 600; }
.wg-event.block.block--staff { background: repeating-linear-gradient(45deg, #fff7f7, #fff7f7 7px, #fde7e7 7px, #fde7e7 14px); color: #dc2626; border-color: #f7cccc; }
/* SPEC-06 Auto-Book: a CONFIRMED-but-unallocated job (Alice auto-booked, no team member yet). It IS a real
   booking (solid fill) but gets a dashed violet outline + an amber "Allocate" chip so the owner spots it
   and assigns who does it. Cleared automatically once a staff member is allocated (badge keys off source). */
.sd-event--unalloc, .wg-event--unalloc { outline: 2px dashed var(--alice, #7c3aed); outline-offset: -2px; }
.needs-alloc {
  display: inline-flex; align-items: center; width: fit-content; margin-top: 3px;
  border-radius: 999px; padding: 1px 6px; background: #fef3c7; color: #92400e;
  font-size: 9px; font-style: normal; font-weight: 800; text-decoration: none;
}
.wg-event .needs-alloc {
  position: absolute; left: 6px; bottom: 5px; margin: 0; max-width: 64px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.booking-status {
  display: inline-flex; align-items: center; width: fit-content; margin-top: 3px;
  border-radius: 999px; padding: 1px 5px; background: rgba(255,255,255,.16);
  color: inherit; font-size: 9px; font-style: normal; font-weight: 800; text-decoration: none;
}
.wg-event .booking-status {
  position: absolute; top: 5px; right: 6px; margin: 0; max-width: 58px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resize-grip {
  position: absolute; left: 10px; right: 10px; bottom: 0; height: 14px;
  cursor: ns-resize; border-radius: 999px; opacity: .78; touch-action: none;
}
.resize-grip::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 34px; height: 4px;
  transform: translateX(-50%); border-radius: 999px; background: rgba(255,255,255,.72);
}
.resize-grip:hover::after, .resize-grip.dragging::after { background: #fff; width: 44px; }
.is-resizing-booking, .is-resizing-booking * { cursor: ns-resize !important; user-select: none; }
.wg-event.booking.resizing, .sd-event.resizing {
  z-index: 20; box-shadow: var(--shadow-3); transform: translateZ(0);
  outline: 2px solid rgba(255,255,255,.68); outline-offset: 1px;
}
.wg-event.booking.resizing::after, .sd-event.resizing::after {
  content: attr(data-resize-range) " · " attr(data-resize-mins);
  position: absolute; left: 8px; right: 8px; bottom: 15px; z-index: 2;
  display: block; padding: 4px 7px; border-radius: 8px;
  background: rgba(15,23,42,.76); color: #fff; font-size: 11px; font-weight: 850;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wg-event.booking.resize-invalid::after, .sd-event.resize-invalid::after {
  background: rgba(185,28,28,.9);
}
@keyframes snapLabelIn {
  from { opacity: 0; transform: translateY(-50%) scale(.94); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes snapLanding {
  0% { filter: saturate(1); }
  35% { filter: saturate(1.08); }
  100% { filter: saturate(1); }
}
@keyframes placementPreviewIn {
  from { opacity: 0; transform: translate3d(0, 2px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.week-legend {
  display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: -4px 0 12px 70px; padding-bottom: 2px;
}
.week-legend::-webkit-scrollbar { display: none; }
.legend-pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 26px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 2px 9px;
  font-size: 11px; font-weight: 800; color: var(--ink-2);
}
.legend-pill i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; background: var(--brand); }
.legend-pill.state-quoted i { background: #d97706; }
.legend-pill.state-paid i { background: #2563eb; }
.legend-pill.state-review-ready i { background: #7c3aed; }
.legend-pill.state-reviewed i { background: #047857; }
.legend-pill.state-workapp i { background: #334155; }
.legend-pill.state-cancelled i { background: #94a3b8; }
/* GUARDRAIL (2026-06-02, Jase): the red "now" time-line MUST sit ABOVE every calendar event —
   including Alice's dashed suggestion/draft (.wg-event.lead = z-index 12) and group events — in
   EVERY view. It regressed to z-index 4 (hidden beneath a suggestion). Day view's .sd-now-line is
   z-index 38; keep this >= that and strictly > all .wg-event/.week-event z-indexes.
   Enforced by qa/calendar-nowline-zindex-smoke.cjs — DO NOT lower below 39. */
.week-now-line {
  position: absolute; left: 2px; right: 2px; z-index: 39; height: 2px; background: #dc2626; border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
.week-now-line span {
  position: absolute; right: 4px; top: -10px; padding: 1px 6px; border-radius: 999px;
  background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; white-space: nowrap;
}
.week-staff {
  position: absolute; right: 6px; bottom: 6px; max-width: calc(100% - 12px);
  display: flex; gap: 3px; flex-wrap: wrap; align-items: center; justify-content: flex-end;
}
.wg-event.group .week-staff { left: 8px; right: 8px; justify-content: flex-start; }
.week-staff-face {
  width: 18px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--staff, #fff) 70%, transparent); color: #fff;
  border: 1.5px solid color-mix(in srgb, var(--staff, #fff) 70%, #fff);
  backdrop-filter: blur(2px);
  font-size: 8px; font-weight: 800; cursor: grab; box-shadow: 0 1px 2px rgba(15,23,42,.12);
}
.week-staff-face:active { cursor: grabbing; }
.week-staff-face.dragging { opacity: .45; }

/* ------------------------------------------------------------------ month + year */
.month { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.month-dow { display: grid; grid-template-columns: repeat(7,1fr); border-bottom: 1px solid var(--line); }
.month-dow span { padding: 8px 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.month-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.mcell { min-height: clamp(96px, calc((100dvh - 280px) / 6), 138px); border: 0; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 10px; text-align: left; background: #fff; }
.mcell:nth-child(7n) { border-right: 0; }
.mcell.out { background: var(--bg); color: var(--faint); }
.mcell.today .mnum { background: var(--brand); color: #fff; }
.mnum { font-size: 13px; font-weight: 600; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; }
.mdots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 6px; }
.mcount { margin-top: 4px; font-size: 11px; color: var(--muted); }

.year { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 14px; }
.ymini { background:#fff; border:1px solid var(--line); border-radius: var(--r); padding: 10px; text-align: left; }
.ymini h4 { font-size: 13px; margin-bottom: 6px; }
.ymini .yg { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.ymini .yd { font-size: 9px; text-align: center; color: var(--faint); aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; }
.ymini .yd.has { background: var(--brand-tint); color: var(--brand-ink); font-weight: 700; }
.ymini .yd.today { background: var(--brand); color: #fff; }

/* ------------------------------------------------------------------ list items (clients / activity) */
.searchbar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; height: 46px; box-shadow: var(--shadow-1); }
.searchbar input { border: 0; outline: none; flex: 1; background: transparent; height: 100%; font-size: 15px; }
.searchbar .icon { color: var(--faint); }

.row {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-1); min-height: 64px;
}
.row:hover { box-shadow: var(--shadow-2); }
.avatar { width: 42px; height: 42px; border-radius: 999px; flex: none; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--brand); overflow: hidden; }
/* #4 (Jase 2026-06-08): imported contact photos clip to the avatar circle */
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.avatar.alice { background: var(--alice); }
.avatar.followup { background: var(--warn); }
.avatar.needs-time { background: var(--alice-strong); }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .subtitle { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .trail { color: var(--faint); display: flex; align-items: center; gap: 8px; flex: none; font-size: 13px; }

.feed-card { padding: 14px; }
.feed-card .head { display: flex; align-items: center; gap: 10px; }
.feed-card .summary { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.feed-card .draftbox { margin-top: 10px; background: var(--bg); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink-2); }
.feed-card .actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.feed-card .actions .btn { flex: 1; min-width: 120px; }

/* ------------------------------------------------------------------ profile */
.profile-head { display: flex; align-items: center; gap: 14px; padding: 18px; }
.profile-head .avatar { width: 56px; height: 56px; font-size: 20px; }
.profile-head h1 { font-size: 20px; }
.contact-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 18px 18px; }
.profile-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.profile-field {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px;
  min-width: 0; box-shadow: var(--shadow-1);
}
.profile-field .icon-sm { color: var(--faint); }
.profile-field span { grid-column: 2; color: var(--muted); font-size: 12px; font-weight: 700; }
.profile-field input, .profile-field textarea {
  grid-column: 2; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent;
  font-weight: 650; padding: 1px 0 0;
}
.profile-field input:focus, .profile-field textarea:focus { box-shadow: inset 0 -2px 0 var(--brand); }
.profile-field textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
.profile-field-full { grid-column: 1 / -1; align-items: start; }
.kv { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.kv .item { background: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.kv .item .icon { color: var(--faint); }
.kv .item .lbl { font-size: 12px; color: var(--muted); }
.kv .item .val { font-weight: 600; }

/* 2026-06-08 (#15) Booking Details — prominent "when" (date + time) header */
.bd-when { display: flex; align-items: center; gap: 13px; padding: 14px 16px; margin: 2px 0 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, #fbfaff, #f6f5fd); }
.bd-when .bd-when-ic { width: 24px; height: 24px; flex: none; color: var(--alice); }
.bd-when-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bd-when-date { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; }
.bd-when-time { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--muted); }
.bd-when-time .icon { width: 15px; height: 15px; flex: none; color: var(--faint); }
.bd-when-notime { color: var(--warn); }
/* SR-02 (#6): intro customer/local name matches the date-header size */
.bd-intro-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
/* SR-02 (#1): business-address field full width so a real Australian address fits */
.set-row.addr-row { flex-wrap: wrap; align-items: flex-start; }
.set-row.addr-row .addr-input { flex: 1 1 100%; width: 100%; max-width: none; margin-top: 8px; }
/* SR-02 P1 (#2): New-Booking "Local" type-ahead suggestions dropdown */
.local-field { position: relative; }
.local-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(30,16,60,.18); max-height: 260px; overflow-y: auto; padding: 4px; }
.local-suggest[hidden] { display: none; }
.local-suggest-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 10px 10px; cursor: pointer; font: inherit; color: var(--ink); }
.local-suggest-row:hover { background: var(--line-2); }
.local-suggest-row .ls-name { font-weight: 650; }
.local-suggest-row .ls-sub { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.local-suggest-new { color: var(--brand); font-weight: 650; }
.field-opt { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 6px; }
.bd-contact { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 14px; }
.bd-contact-info { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--ink-2); min-width: 0; }
.bd-contact-info .icon { width: 15px; height: 15px; color: var(--faint); flex: none; }
/* push opt-in banner must not cover an open sheet (any .scrim modal) */
body:has(#modal-root .scrim) #alice-push-banner { display: none !important; }

.timeline { position: relative; padding-left: 22px; }
.timeline::before { content:""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 8px 0; }
.tl-item::before { content:""; position: absolute; left: -19px; top: 14px; width: 10px; height: 10px; border-radius: 999px; background: var(--brand); border: 2px solid #fff; }
.tl-item.req::before { background: var(--alice); }
.tl-item .when { font-size: 12px; color: var(--muted); }
.tl-item .what { font-weight: 600; font-size: 14px; }
.booking-link {
  display: block; width: 100%; border: 0; background: transparent; color: inherit;
  text-align: left; border-radius: 10px; padding: 9px 8px;
}
.booking-link:hover { background: var(--brand-tint); }
.booking-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 30%, transparent); outline-offset: 2px; }

/* ------------------------------------------------------------------ onboarding */
.onboarding-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  width: min(420px, calc(100% - 28px));
  margin: 0 auto;
}
.onboarding-intro,
.onboarding-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.onboarding-intro {
  position: static;
  padding: 22px;
}
.onboarding-alice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--alice-strong);
  font-weight: 850;
  margin-bottom: 14px;
}
.onboarding-alice .av {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--alice);
  color: #fff;
}
.onboarding-intro h1 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.05;
  max-width: 720px;
}
.onboarding-intro p {
  color: var(--muted);
  line-height: 1.5;
  margin-top: 12px;
  max-width: 640px;
}
.setup-voice-card {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #eadcff;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(255,255,255,.96));
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.setup-voice-orb.alice-voice-button.alice-mic-button {
  width: 88px;
  height: 88px;
  justify-self: center;
}
.setup-voice-orb .alice-voice-core {
  width: 60px;
  height: 60px;
}
.setup-voice-orb .voice-orbit { inset: 13px; }
.setup-voice-orb .voice-orbit.outer { inset: 2px; }
.setup-voice-orb .voice-bars {
  height: 36px;
  gap: 4px;
}
.setup-voice-orb .voice-bars i { width: 5px; }
.setup-voice-orb .voice-bars i:nth-child(1) { height: 14px; }
.setup-voice-orb .voice-bars i:nth-child(2) { height: 24px; }
.setup-voice-orb .voice-bars i:nth-child(3) { height: 32px; }
.setup-voice-orb .voice-bars i:nth-child(4) { height: 22px; }
.setup-voice-orb .voice-bars i:nth-child(5) { height: 16px; }
.setup-voice-orb .voice-dot { transform: scale(.78); }
.setup-voice-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.setup-voice-copy strong {
  color: var(--ink);
  font-size: 15px;
}
.setup-voice-copy span,
.setup-voice-copy em {
  color: var(--alice-strong);
  line-height: 1.4;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.setup-voice-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.setup-voice-actions .btn { flex: 1 1 150px; }
.setup-current-question {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
}
.setup-current-question span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.setup-current-question strong {
  display: block;
  color: var(--ink-2);
  line-height: 1.35;
  font-size: 14px;
}
.setup-transcript {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--alice) 5%, #fff);
}
.setup-transcript-row {
  display: grid;
  gap: 4px;
  max-width: 92%;
}
.setup-transcript-row span:first-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.setup-transcript-row p {
  margin: 0;
  padding: 9px 11px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid var(--line-2);
  box-shadow: 0 7px 16px rgba(15, 23, 42, .05);
}
.setup-transcript-row.owner {
  justify-self: end;
}
.setup-transcript-row.owner p {
  background: var(--brand-tint);
  border-color: color-mix(in srgb, var(--brand) 16%, var(--line-2));
}
.setup-transcript [data-setup-preview].is-empty {
  color: var(--muted);
  font-style: italic;
  font-weight: 600;
}
.setup-status-grid {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.setup-status-grid div {
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
}
.setup-status-grid strong,
.setup-status-grid span {
  display: block;
}
.setup-status-grid strong {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.setup-status-grid span {
  color: var(--ink-2);
  font-weight: 650;
  overflow-wrap: anywhere;
}
.onboarding-panel {
  padding: 18px;
}
.setup-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.setup-section-head h2 {
  font-size: 20px;
}
.setup-section-head p {
  color: var(--muted);
  font-size: 14px;
  max-width: 420px;
  line-height: 1.45;
}
.setup-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.setup-field {
  display: grid;
  gap: 7px;
}
.setup-field-wide {
  grid-column: 1 / -1;
}
.setup-field span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.setup-field input,
.setup-field select,
.setup-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  padding: 11px 12px;
  outline: 0;
}
.setup-field input::placeholder,
.setup-field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 74%, #fff);
  font-weight: 550;
}
.setup-field textarea {
  resize: vertical;
  line-height: 1.45;
  font-weight: 600;
}
.setup-field input:focus,
.setup-field select:focus,
.setup-field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.setup-field small {
  color: var(--muted);
  line-height: 1.4;
}
.setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ------------------------------------------------------------------ settings */
.set-group { margin-top: 18px; }
.set-group > .gh { display:flex; align-items:center; gap:10px; padding: 0 4px 8px; }
.set-group > .gh .icon { color: var(--brand); }
.set-group > .gh h3 { font-size: 15px; }
.set-list { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.set-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line-2); min-height: 56px; }
.set-row:last-child { border-bottom: 0; }
.set-row .grow { flex: 1; min-width: 0; }
.set-row .lbl { font-weight: 600; }
.set-row .hint { font-size: 13px; color: var(--muted); margin-top: 2px; }
.set-row .val { color: var(--muted); font-weight: 600; }
.set-row input[type="text"], .set-row input[type="url"], .set-row input[type="time"], .set-row input[type="number"], .set-row select { border:1px solid var(--line); border-radius: 9px; padding: 8px 10px; min-height: 38px; max-width: 160px; }
.set-row .lbl { display: flex; align-items: center; gap: 8px; }
.set-row textarea.alice-instruction-field {
  flex: 0 1 520px;
  width: min(520px, 100%);
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
  line-height: 1.45;
  background: #fff;
  resize: vertical;
}
.set-row textarea.alice-instruction-field:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
.connect-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.calendar-import-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: min(720px, 100%);
}
.calendar-import-controls input[type="url"] {
  width: 100%;
  max-width: none;
}
.connect-state {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--alice-tint);
  color: var(--alice-strong);
  border: 1px solid #e9d5ff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.connect-state[data-connected="true"] {
  background: var(--ok-tint);
  color: var(--ok);
  border-color: #bbf7d0;
}
.connect-state[data-status="setup_requested"] {
  background: var(--warn-tint);
  color: var(--warn);
  border-color: var(--warn-line);
}
.brand-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
/* #5 (Jase 2026-06-08): the colour picker IS a filled circle with a paint icon — tap to change. Logo is separate. */
.brand-tool { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brand-tool-cap { font-size: 11px; font-weight: 600; color: var(--muted); }
.brand-colour-picker { position: relative; width: 44px; height: 44px; flex: none; cursor: pointer; border-radius: 999px; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); overflow: hidden; }
.brand-colour-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.brand-colour-ic { color: #fff; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.brand-logo-upload { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.brand-logo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* #6 (Jase 2026-06-08): Brand DNA colours = the actual swatches Alice extracted; tap to change, x to remove, + to add. */
.bdc-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }
.bdc-swatch { position: relative; width: 34px; height: 34px; flex: none; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); cursor: pointer; }
.bdc-swatch input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.bdc-x { position: absolute; top: -7px; right: -7px; z-index: 2; width: 18px; height: 18px; border-radius: 999px; border: 0; background: #1e293b; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: var(--shadow-1); }
.bdc-x svg { width: 11px; height: 11px; }
.bdc-add { width: 34px; height: 34px; flex: none; border-radius: 999px; border: 1.5px dashed var(--line); background: #fff; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.bdc-add:hover { border-color: var(--brand); color: var(--brand); }
.brand-logo-preview {
  width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--brand);
}
.brand-logo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.settings-staff-face {
  width: 28px; height: 28px; border-radius: 999px; display: inline-grid; place-items: center;
  color: #fff; background: var(--staff, var(--brand)); font-size: 11px; font-weight: 800;
}
.photo-upload { position: relative; overflow: hidden; }
.photo-upload input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.inline-fields { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.inline-fields input[type="text"] { width: 120px; }

.staff-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.staff-check {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 10px 4px 5px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; color: var(--ink-2);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.staff-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.staff-check::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.staff-check:has(input:checked)::before {
  content: "\2713";
  border-color: var(--brand);
  background: var(--brand);
}
.staff-check:has(input:checked) { border-color: #99f6e4; background: var(--brand-tint); color: var(--brand-ink); }
.field-hint { margin-top: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.field-hint.warn { color: var(--warn); }

.toggle { width: 46px; height: 28px; border-radius: 999px; background: var(--bg-2); border: 0; position: relative; flex: none; transition: background .15s; }
.toggle::after { content:""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1); transition: left .15s; }
.toggle[aria-pressed="true"] { background: var(--brand); }
.toggle[aria-pressed="true"]::after { left: 21px; }

.days { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.day-pill { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--muted); }
.day-pill[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }

.advanced-toggle { margin: 16px 4px 0; }
details.advanced { margin-top: 8px; }
details.advanced > summary { list-style: none; cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600; padding: 10px 4px; display: flex; align-items: center; gap: 8px; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced[open] > summary .chev { transform: rotate(90deg); }

/* ------------------------------------------------------------------ modal / sheet */
.scrim { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 130; opacity: 0; animation: fade .18s forwards; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 131;
  background: #fff; border-radius: 22px 22px 0 0; box-shadow: var(--shadow-3);
  max-height: 92dvh; display: flex; flex-direction: column;
  transform: translateY(100%); animation: slideup .26s cubic-bezier(.22,1,.36,1) forwards;
  padding-bottom: env(safe-area-inset-bottom);
  will-change: transform;
}
.sheet.sheet-dragging { animation: none; transition: none; }
.sheet-grab {
  width: 56px; height: 5px; border-radius: 999px; background: #cbd5e1;
  margin: 10px auto 4px; cursor: grab; touch-action: none;
}
.sheet-grab:active { cursor: grabbing; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: 18px; flex: 1; }
.sheet-head[data-sheet-drag] { touch-action: none; }
.sheet-close {
  width: 42px; height: 42px; border-radius: 12px;
  background: #f8fafc; color: var(--ink); border-color: #cbd5e1;
}
.sheet-close:hover { background: #eef2f6; }
.sheet-close .icon { stroke-width: 2.4; }
.sheet-body { padding: 16px; overflow-y: auto; }
.sheet-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.sheet-foot .btn { flex: 1; }

.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; align-items: flex-start; }
.notice .icon { flex: none; margin-top: 1px; }
.notice-alice { background: var(--alice-tint); color: var(--alice-strong); }
.notice-warn { background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn-line); }

.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; min-height: var(--tap); background: #fff;
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.address-control { display: grid; gap: 8px; }
.address-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 650; }
.address-tools span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.address-tools .maps-link { flex: none; min-width: 118px; }
.address-confirm { margin: 12px 0; font-weight: 700; color: var(--ink); }
.alice-voice-panel {
  display: grid; justify-items: center; gap: 14px;
  padding: 18px 14px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--alice) 12%, transparent), transparent 56%), var(--alice-tint);
  border: 1px solid #e9d5ff;
}
.alice-question { display: grid; justify-items: center; gap: 5px; text-align: center; color: var(--alice-strong); }
.alice-question .av {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 999px; color: #fff; background: var(--alice);
  box-shadow: 0 6px 16px rgba(124,58,237,.22);
}
.alice-question strong { color: var(--ink); font-size: 18px; }
.alice-question span:last-child { font-size: 13px; font-weight: 700; color: var(--alice-strong); }
.alice-mic-button {
  position: relative;
  width: 104px; height: 104px; border: 0; border-radius: 999px;
  display: grid; place-items: center; color: #fff;
  background: transparent; isolation: isolate;
}
.alice-mic-button .mic-rings,
.alice-mic-button .mic-rings::before,
.alice-mic-button .mic-rings::after {
  content: ""; position: absolute; inset: 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--alice) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--alice) 24%, transparent);
  z-index: -2;
}
.alice-mic-button .mic-rings::before { inset: -8px; opacity: .72; }
.alice-mic-button .mic-rings::after { inset: -22px; opacity: .38; }
.alice-mic-button .mic-core {
  width: 72px; height: 72px; display: grid; place-items: center;
  border-radius: 999px; background: linear-gradient(135deg, var(--alice), var(--brand));
  box-shadow: 0 18px 36px rgba(124,58,237,.28), inset 0 1px 0 rgba(255,255,255,.28);
}
.alice-mic-button.listening .mic-rings { animation: aliceRing 1.9s var(--ease-premium) infinite; }
.alice-mic-button.listening .mic-rings::before { animation: aliceRing 1.9s var(--ease-premium) .22s infinite; }
.alice-mic-button.listening .mic-rings::after { animation: aliceRing 1.9s var(--ease-premium) .44s infinite; }
.alice-mic-button.listening .mic-core { animation: aliceMicPulse 1.05s var(--ease-premium) infinite alternate; }
.alice-wave { position: absolute; bottom: 4px; display: flex; align-items: end; gap: 3px; height: 20px; opacity: 0; }
.alice-wave i { width: 4px; height: 8px; border-radius: 999px; background: var(--alice); transform-origin: bottom; }
.alice-mic-button.listening .alice-wave { opacity: 1; }
.alice-mic-button.listening .alice-wave i:nth-child(1) { animation: aliceBar .82s ease-in-out infinite alternate; }
.alice-mic-button.listening .alice-wave i:nth-child(2) { animation: aliceBar .95s ease-in-out .1s infinite alternate; }
.alice-mic-button.listening .alice-wave i:nth-child(3) { animation: aliceBar .88s ease-in-out .18s infinite alternate; }
.alice-mic-button.listening .alice-wave i:nth-child(4) { animation: aliceBar .98s ease-in-out .06s infinite alternate; }
.alice-listening-copy { min-height: 20px; color: var(--alice-strong); font-size: 13px; font-weight: 750; text-align: center; }
.alice-examples { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
.alice-raw-request { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.alice-raw-request .icon-sm { color: var(--alice-strong); flex: none; }
.alice-draft-note { margin-top: 14px; }
.sheet.sheet-alice-voice {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.sheet-alice-voice .sheet-body,
.sheet-alice-voice .sheet-foot {
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.sheet-alice-voice .sheet-body { padding-top: 18px; }
.sheet-alice-voice .sheet-foot { border-top: 0; }
.sheet-alice-voice .alice-voice-panel {
  min-height: 320px;
  padding: 26px 18px;
  gap: 16px;
  overflow: hidden;
}
.alice-voice-button.alice-mic-button {
  width: 138px;
  height: 138px;
  cursor: pointer;
}
.alice-voice-button .voice-orbit {
  position: absolute;
  inset: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--alice) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--alice) 18%, transparent);
  z-index: -2;
}
.alice-voice-button .voice-orbit.outer {
  inset: 4px;
  opacity: .55;
}
.alice-voice-core {
  position: relative;
  width: 94px;
  height: 94px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #5b6472;
  box-shadow: 0 22px 44px rgba(124,58,237,.22), 0 0 0 9px color-mix(in srgb, var(--alice) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.92);
}
.voice-bars {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.voice-bars i {
  width: 7px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 50%;
  /* Always-on gentle idle equalizer — bars are never frozen. Escalates under
     .speaking / .listening (rules below override with bigger, faster motion). */
  animation: aliceVoiceIdle 1.6s ease-in-out infinite alternate;
}
.voice-bars i:nth-child(1) { height: 22px; animation-delay: 0s; }
.voice-bars i:nth-child(2) { height: 36px; animation-delay: .18s; }
.voice-bars i:nth-child(3) { height: 50px; animation-delay: .36s; }
.voice-bars i:nth-child(4) { height: 34px; animation-delay: .12s; }
.voice-bars i:nth-child(5) { height: 24px; animation-delay: .28s; }
.voice-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}
.voice-dot.d1 { left: 16px; top: 28px; }
.voice-dot.d2 { right: 17px; top: 22px; width: 6px; height: 6px; }
.voice-dot.d3 { left: 18px; bottom: 25px; width: 6px; height: 6px; }
.voice-dot.d4 { right: 12px; bottom: 17px; width: 14px; height: 14px; }
.alice-voice-button.speaking .voice-orbit,
.alice-voice-button.listening .voice-orbit {
  animation: aliceVoiceRing 1.9s var(--ease-premium) infinite;
}
.alice-voice-button.speaking .voice-orbit.outer,
.alice-voice-button.listening .voice-orbit.outer {
  animation-delay: .22s;
}
.alice-voice-button.speaking .voice-bars i {
  animation: aliceVoiceSpeak 1.1s ease-in-out infinite alternate;
}
.alice-voice-button.listening .voice-bars i {
  animation: aliceVoiceListen .88s ease-in-out infinite alternate;
}
.alice-voice-button.processing .alice-voice-core {
  animation: aliceVoiceProcess 1s var(--ease-premium) infinite alternate;
}
.alice-voice-button .voice-bars i:nth-child(2) { animation-delay: .08s; }
.alice-voice-button .voice-bars i:nth-child(3) { animation-delay: .16s; }
.alice-voice-button .voice-bars i:nth-child(4) { animation-delay: .04s; }
.alice-voice-button .voice-bars i:nth-child(5) { animation-delay: .12s; }
.alice-type-link {
  min-height: 34px;
  padding-inline: 14px;
  color: var(--alice-strong);
}
.alice-type-panel {
  display: none;
  margin-top: 14px;
}
.alice-type-panel.is-open {
  display: block;
}
.alice-draft-preview {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #ddd6fe;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-1);
}
.alice-draft-preview.is-error {
  border-color: var(--warn-line);
  background: var(--warn-tint);
  color: var(--warn);
}
.alice-draft-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--alice-strong);
  font-weight: 800;
}
.alice-draft-preview.is-error .alice-draft-title { color: var(--warn); }
.alice-draft-grid {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  gap: 9px 14px;
  margin-top: 12px;
  font-size: 14px;
}
.alice-draft-grid span {
  color: var(--muted);
  font-weight: 700;
}
.alice-draft-grid strong {
  color: var(--ink);
  min-width: 0;
}
.alice-draft-preview p {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}
.alice-context-note {
  align-items: flex-start;
  margin-top: 12px;
}
.alice-context-note strong,
.alice-context-note span,
.alice-context-note em {
  display: block;
}
.alice-context-note span,
.alice-context-note em {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
}
.alice-context-note em {
  color: var(--ink-2);
  font-style: normal;
}
.alice-draft-preview.is-error p { color: var(--warn); }
.sheet-alice-voice .sheet-foot { flex-wrap: wrap; }
.sheet-alice-voice .sheet-foot .btn-primary { flex-basis: 220px; }
@keyframes aliceRing {
  from { transform: scale(.86); opacity: .88; }
  to { transform: scale(1.16); opacity: .14; }
}
@keyframes aliceMicPulse {
  from { transform: scale(.985); filter: saturate(1); }
  to { transform: scale(1.04); filter: saturate(1.12); }
}
@keyframes aliceBar {
  from { transform: scaleY(.45); }
  to { transform: scaleY(1.7); }
}
@keyframes aliceVoiceRing {
  from { transform: scale(.9); opacity: .82; }
  to { transform: scale(1.16); opacity: .16; }
}
@keyframes aliceVoiceIdle {
  from { transform: scaleY(.42); opacity: .55; }
  to { transform: scaleY(.82); opacity: .9; }
}
@keyframes aliceVoiceSpeak {
  from { transform: scaleY(.72); opacity: .78; }
  to { transform: scaleY(1.08); opacity: 1; }
}
@keyframes aliceVoiceListen {
  from { transform: scaleY(.48); opacity: .72; }
  to { transform: scaleY(1.28); opacity: 1; }
}
@keyframes aliceVoiceProcess {
  from { transform: scale(.985); filter: saturate(1); }
  to { transform: scale(1.035); filter: saturate(1.16); }
}
.time-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-toggle { display: inline-flex; background: var(--bg-2); border-radius: 10px; padding: 3px; }
.seg-toggle button { border: 0; background: transparent; border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg-toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }

.quick-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.quick-actions .btn { flex: 1 1 145px; }
.quick-actions .btn-review-action {
  min-height: 42px;
  height: auto;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.12;
  white-space: normal;
}
.quick-actions .btn-review-action .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* "After the job" — owner-facing convenience links on a booking (review + socials).
   No API/auto-send; each <a> just opens the owner's own link in a new tab.
   Teal accent = tenant-facing (brand), not Alice violet. */
.after-job { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.after-job-title { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: var(--brand-ink, #134e4a); margin-bottom: 10px; }
.after-job-title .icon { width: 16px; height: 16px; flex: none; color: var(--brand, #0d9488); }
.after-job-links { display: flex; flex-direction: column; gap: 8px; }
.after-job-link { justify-content: flex-start; text-decoration: none; }
.after-job-hint { color: var(--muted); font-size: 13px; line-height: 1.5; }
.status-preview,
.mini-status {
  display: inline-flex; align-items: center; width: fit-content;
  border-radius: 999px; padding: 3px 8px; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1.1;
}
.status-preview { margin-top: 8px; }
.mini-status { margin-left: 6px; vertical-align: 1px; }
.status-preview.state-draft, .mini-status.state-draft { background: var(--alice); }
.status-preview.state-booked, .mini-status.state-booked { background: var(--brand); }
.status-preview.state-quoted, .mini-status.state-quoted { background: #d97706; }
.status-preview.state-paid, .mini-status.state-paid { background: #2563eb; }
.status-preview.state-review-ready, .mini-status.state-review-ready { background: #7c3aed; }
.status-preview.state-reviewed, .mini-status.state-reviewed { background: #047857; }
.status-preview.state-workapp, .mini-status.state-workapp { background: #334155; }
.status-preview.state-cancelled, .mini-status.state-cancelled { background: #94a3b8; text-decoration: line-through; }

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; z-index: 60;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-3); display: flex; align-items: center; gap: 8px;
  animation: pop .2s ease;
}
.toast .icon { color: #5eead4; }
.toast[hidden] { display: none; }

@keyframes fade { to { opacity: 1; } }
@keyframes slideup { to { transform: translateY(0); } }
@keyframes pop { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%,0); opacity: 1; } }

/* ------------------------------------------------------------------ new onboarding wizard */
/* Responsive: mobile=full-bleed single column; tablet+=centred card with max-width */
.ob-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 22% 6%, rgba(167,139,250,.42), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(124,58,237,.38), transparent 40%),
    linear-gradient(180deg, #7c3aed 0%, #5b21b6 48%, #4c1d95 100%);
}
.ob-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 2026-05-29 (Jase): photo background RESTORED (he wants the warm smiling person, not
     a flat gradient — I wrongly stripped it). The real bug was the crop: background-
     position-y was ~12%, which on wide desktop showed the empty area ABOVE the person's
     head (just hair at the bottom edge). These are PORTRAIT people-shots with the face
     at ~45-50% of the image height, so a near-centre Y reliably frames the face/upper
     body on both desktop (vertical band) and mobile (full height shows the whole person).
     Per-step Y overrides below are tuned from this baseline. */
  background-image: var(--ob-bg);
  background-size: cover;
  background-position: 50% 48%;
  background-repeat: no-repeat;
  opacity: .95;
  filter: saturate(1.05);
  transform: none;
}
.ob-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Richer PURPLE gradient wash — deeper violet down the edges + corners so any remaining
     plain photo area reads as an intentional brand-purple glow (not blank grey), and the
     whole screen takes on the on-brand purple hue. The centred glass card stays readable. */
  background:
    radial-gradient(circle at 22% 6%, rgba(167,139,250,.34), transparent 40%),
    radial-gradient(circle at 82% 16%, rgba(124,58,237,.3), transparent 46%),
    radial-gradient(circle at 50% 112%, rgba(109,40,217,.4), transparent 52%),
    linear-gradient(90deg, rgba(76,29,149,.34), rgba(76,29,149,.05) 26%, rgba(76,29,149,.05) 74%, rgba(76,29,149,.34)),
    linear-gradient(180deg, rgba(31,16,60,.2), rgba(31,16,60,.06) 34%, rgba(31,16,60,.3));
}
/* 2026-05-29 (Jase) — FOCAL-POINT technique. Each value is the (X%, Y%) where the
   person's FACE actually sits in that image (measured by viewing each photo). With
   background-size:cover, anchoring the position to the focal point keeps the face
   visible and uncropped on EVERY aspect ratio (wide desktop band AND tall mobile),
   because cover always keeps the positioned point in view. Same value works for both
   breakpoints, so the mobile media-query overrides below are aligned to match.
   Old values were guesses biased to the top → showed the empty space above heads. */
.ob-shell--step-0::before { background-position: 50% 47%; } /* hero woman — face centre, ~47% down a tall portrait */
.ob-shell--step-1::before { background-position: 55% 38%; } /* hair stylist — face centre-right, upper third */
.ob-shell--step-2::before { background-position: 45% 38%; } /* cafe woman — face centre-left, upper third */
.ob-shell--step-3::before { background-position: 58% 38%; } /* spa woman — face right-of-centre, upper third */
.ob-shell--step-4::before { background-position: 34% 30%; } /* carpenter — face left-of-centre, high in frame */
.ob-shell--step-5::before { background-position: 36% 34%; } /* cafe owner — face left-of-centre, upper third */
.ob-shell--step-6::before { background-position: 68% 32%; } /* landscaper — face right-of-centre, upper third */
.ob-shell--step-7::before { background-position: 38% 31%; } /* barber — face left-of-centre, upper third */
.ob-skip-row { text-align: center; margin-top: 12px; }
.ob-skip-link {
  background: none; border: 0; cursor: pointer;
  font: 600 13px/1.4 system-ui; color: #6d28d9;
  text-decoration: underline; text-underline-offset: 2px; padding: 6px;
}
.ob-skip-link:hover { color: #5b21b6; }
.ob-shell > * {
  position: relative;
  z-index: 2;
}
.ob-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 10px;
  position: relative; /* anchor the centred orb */
}
.ob-progress {
  flex: 1;
  display: flex;
  gap: 5px;
}
.ob-pip {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transition: background .35s;
}
.ob-pip--on { background: linear-gradient(90deg, var(--alice), var(--brand)); }
.ob-mute-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: border-color .15s;
}
.ob-mute-btn:hover { border-color: var(--alice); color: var(--alice); }

.ob-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 0 28px;
}
.ob-step {
  position: relative;
  width: min(480px, calc(100% - 28px));
  margin: 0 auto;
  padding: 30px 26px 32px;
  display: flex;
  flex-direction: column;
  /* Liquid glass, PURPLE-tinted: translucent purple-white fill so the photo shows through
     with a brand-purple hue, while dark text stays fully legible. */
  background:
    linear-gradient(150deg, rgba(245,240,255,.66), rgba(233,228,254,.5));
  border: 1px solid rgba(216,180,254,.5);
  border-radius: 26px;
  /* layered soft purple shadow + glossy specular inset highlight (top light) */
  box-shadow:
    0 28px 72px rgba(76,29,149,.32),
    0 10px 26px rgba(76,29,149,.2),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
  backdrop-filter: blur(22px) saturate(1.45);
}
/* Glossy specular highlight sweeping the top of the glass card */
.ob-step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  border-radius: 26px 26px 60% 60% / 26px 26px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 0;
}
.ob-step > * { position: relative; z-index: 1; }
.ob-step--hero,
.ob-step--golive {
  align-items: center;
  text-align: center;
}

/* Alice face ring */
.ob-face-hero {
  display: flex;
  justify-content: center;
  margin: 10px 0 6px;
}
.ob-face-ring {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 210deg, var(--alice), var(--brand), #a78bfa, var(--alice));
  box-shadow: 0 14px 34px rgba(124,58,237,.28);
}
.ob-face-ring--hero {
  width: 118px;
  height: 118px;
}
.ob-face-ring--xl {
  width: 128px;
  height: 128px;
}
.ob-face-ring--pulse { animation: ob-face-glow 2.8s ease-in-out infinite; }
@keyframes ob-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
/* Voice/listening glow — the ring breathes and emits an on-brand purple halo */
@keyframes ob-face-glow {
  0%, 100% { transform: scale(1); box-shadow: 0 14px 34px rgba(124,58,237,.28), 0 0 0 0 rgba(124,58,237,.34); }
  50%      { transform: scale(1.045); box-shadow: 0 18px 44px rgba(124,58,237,.4), 0 0 0 14px rgba(124,58,237,0); }
}
.ob-face-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid #fff;
}
.ob-face-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 36px;
  height: 36px;
  border-radius: 26%;
  /* Render the real Alice SVG (purple tile + white sparkle) directly. The old inverted
     ::after flattened the already-purple-tile SVG into a solid white square — removed. */
  background: url('assets/brand/alice-app-logo.svg') center / contain no-repeat;
  box-shadow: 0 4px 12px rgba(124,58,237,.36);
}
/* Pulsing glow on the sparkle badge attached to Alice's face */
.ob-logo-pulse { animation: ob-badge-glow 2.4s ease-in-out infinite; }
@keyframes ob-badge-glow {
  0%, 100% { box-shadow: 0 4px 12px rgba(124,58,237,.36), 0 0 0 0 rgba(124,58,237,.4); }
  50%      { box-shadow: 0 6px 16px rgba(124,58,237,.46), 0 0 0 7px rgba(124,58,237,0); }
}

/* Logo mark — the real Alice sparkle (purple tile + white 4-point spark).
   Renders the brand SVG so it never shows as a blank purple square. */
.ob-logo {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 26%;
  background:
    url('assets/brand/alice-app-logo.svg') center / contain no-repeat,
    linear-gradient(135deg, var(--alice), #6d28d9);
  box-shadow: 0 4px 12px rgba(124,58,237,.32);
  flex: none;
}
.ob-logo--md { width: 36px; height: 36px; }
/* Audio/voice pulse — gentle on-brand purple glow that breathes */
.ob-logo--pulse { animation: ob-logo-pulse 2.4s ease-in-out infinite; }
@keyframes ob-logo-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(124,58,237,.32), 0 0 0 0 rgba(124,58,237,.34); }
  50%      { transform: scale(1.06); box-shadow: 0 6px 18px rgba(124,58,237,.4), 0 0 0 9px rgba(124,58,237,0); }
}

/* ---- Persistent Alice audio visualizer (on every onboarding step + login) ----
   Always gently moving so Alice never looks "frozen". When an Emma narration clip
   plays, JS adds .is-speaking → bars grow taller/faster. On-brand purple. No mic. */
.ob-audioviz {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  flex: none;
}
.ob-audioviz i {
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--alice), #6d28d9);
  transform-origin: 50% 50%;
  animation: obVizIdle 1.5s ease-in-out infinite alternate;
}
.ob-audioviz i:nth-child(1) { animation-delay: 0s; }
.ob-audioviz i:nth-child(2) { animation-delay: .16s; }
.ob-audioviz i:nth-child(3) { animation-delay: .32s; }
.ob-audioviz i:nth-child(4) { animation-delay: .1s; }
.ob-audioviz i:nth-child(5) { animation-delay: .24s; }
.ob-audioviz.is-speaking i { animation: obVizSpeak .5s ease-in-out infinite alternate; }
.ob-audioviz.is-speaking i:nth-child(2) { animation-delay: .06s; }
.ob-audioviz.is-speaking i:nth-child(3) { animation-delay: .12s; }
.ob-audioviz.is-speaking i:nth-child(4) { animation-delay: .03s; }
.ob-audioviz.is-speaking i:nth-child(5) { animation-delay: .09s; }
.ob-audioviz--sm { height: 18px; }
.ob-audioviz--sm i { width: 2.5px; }
.auth-audioviz { margin-left: auto; }
@keyframes obVizIdle {
  from { transform: scaleY(.7); opacity: .55; }
  to { transform: scaleY(2.0); opacity: .9; }
}
@keyframes obVizSpeak {
  from { transform: scaleY(1.1); opacity: .8; }
  to { transform: scaleY(3.6); opacity: 1; }
}

.ob-alice-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--alice-strong);
  font-weight: 850;
  margin-bottom: 10px;
}
.ob-alice-id strong { display: block; font-size: 14px; }
.ob-alice-id span { display: block; font-size: 11px; color: var(--muted); }

.ob-h1 {
  font-size: clamp(22px, 5vw, 32px);
  line-height: 1.08;
  /* Inter Light for large display headings — premium, airy. Never used on small text. */
  font-weight: 300;
  letter-spacing: -0.018em;
  margin: 6px 0 8px;
}
.ob-h1-alice { color: var(--alice); font-weight: 700; }
.ob-em { font-style: normal; color: var(--alice); font-weight: 700; }
.ob-sub {
  color: var(--ink-2);
  /* Inter Medium for body copy — legible against the glass tile */
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* Hero demo cards */
.ob-demo-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 4px 0 14px;
  width: 100%;
}
.ob-demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 10px;
  border: 1px solid rgba(216,180,254,.55);
  border-radius: var(--r);
  /* purple liquid-glass sub-card — consistent with the .ob-step tile, dark text stays legible */
  background: linear-gradient(150deg, rgba(245,240,255,.62), rgba(233,228,254,.46));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 6px 18px rgba(76,29,149,.16), inset 0 1px 0 rgba(255,255,255,.7);
  font-size: 13px;
  text-align: center;
}
.ob-demo-card strong { display: block; font-size: 13px; }
.ob-demo-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.ob-demo-icon { font-size: 22px; }

/* Inline mute link */
.ob-inline-mute {
  border: 0;
  background: transparent;
  color: var(--alice-strong);
  font-weight: 700;
  cursor: pointer;
  padding: 0 3px;
  text-decoration: underline;
}

/* Label+input */
.ob-label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 12px;
}
.ob-input {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .18s;
}
.ob-input:focus { border-color: var(--alice); }
select.ob-input { cursor: pointer; }

/* No-website block */
.ob-nowebsite-block {
  margin-top: 16px;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}
.ob-nowebsite-q {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 9px;
}
.ob-opt {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1.5px solid rgba(216,180,254,.55);
  border-radius: 13px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(150deg, rgba(245,240,255,.62), rgba(233,228,254,.46));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 4px 14px rgba(76,29,149,.12), inset 0 1px 0 rgba(255,255,255,.7);
  margin-bottom: 8px;
  text-align: left;
  transition: border-color .15s;
}
.ob-opt:hover { border-color: var(--alice); }
.ob-opt--shield {
  border-color: #bbf7e6;
  background: #f0fdfa;
  color: #0f766e;
}

/* Trade tiles — 2-col compact chips on mobile, more columns on desktop so the whole
   trade list fits with no vertical scroll on 1024/1440 (task 6). */
.ob-trade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 8px 0 12px;
}
.ob-tile {
  border: 1.5px solid rgba(216,180,254,.55);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  background: linear-gradient(150deg, rgba(245,240,255,.6), rgba(233,228,254,.44));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 3px 12px rgba(76,29,149,.1), inset 0 1px 0 rgba(255,255,255,.65);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .15s, transform .12s, background .15s;
}
.ob-tile:hover { border-color: var(--alice); transform: translateY(-1px); background: linear-gradient(150deg, rgba(245,240,255,.78), rgba(233,228,254,.6)); }
.ob-tile--sel {
  border-color: var(--alice);
  background: var(--alice-tint);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.ob-tile--other {
  border-style: dashed;
  color: var(--alice-strong);
}
.ob-tile-e { font-size: 17px; flex: none; }
/* Desktop: 3 compact columns so all trades fit with NO vertical scroll at 1024 & 1440.
   The work-mode pills on step 3 keep their inline single-column override. */
@media (min-width: 768px) {
  .ob-trade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* Info row (read-only key-value) */
.ob-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(216,180,254,.5);
  border-radius: var(--r);
  background: linear-gradient(150deg, rgba(245,240,255,.58), rgba(233,228,254,.42));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 3px 12px rgba(76,29,149,.1), inset 0 1px 0 rgba(255,255,255,.6);
  margin-top: 12px;
}
.ob-info-label { font-size: 13px; color: var(--muted); font-weight: 700; }
.ob-info-val { font-size: 13px; font-weight: 650; }

/* Service chips */
.ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 8px 0 12px;
}
.ob-svc-chip {
  border: 1.5px solid var(--alice);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--alice-strong);
  background: var(--alice-tint);
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.ob-svc-chip--off {
  border-color: var(--line);
  background: #fff;
  color: var(--muted);
}

/* Call-card mock */
.ob-callcard {
  background: linear-gradient(160deg, #1e1b3a, #312e5e);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 16px;
  margin-top: 4px;
  box-shadow: var(--shadow-3);
}
.ob-callcard-top {
  font-size: 12px;
  color: #c4b5fd;
  font-weight: 600;
  margin-bottom: 10px;
}
.ob-bubble {
  border-radius: 13px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 8px;
}
.ob-bubble--alice { background: rgba(255,255,255,.12); }
.ob-bubble--cust { background: rgba(255,255,255,.07); color: #e2e0f0; }
.ob-bubble strong { color: #fde68a; font-weight: 700; }

/* Draft preview */
.ob-draft-preview {
  margin-top: 12px;
  background: linear-gradient(150deg, rgba(245,240,255,.62), rgba(233,228,254,.46));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(216,180,254,.55);
  border-radius: var(--r);
  padding: 13px;
  box-shadow: 0 6px 18px rgba(76,29,149,.16), inset 0 1px 0 rgba(255,255,255,.7);
}
.ob-draft-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--alice-strong);
  margin-bottom: 8px;
}
.ob-draft-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-2);
}
.ob-draft-row:last-child { border-bottom: 0; }
.ob-draft-row span:first-child { color: var(--muted); }
.ob-draft-status { color: var(--brand-strong); }

/* Reassure box */
.ob-reassure {
  margin-top: 12px;
  background: #ecfdf7;
  border: 1px solid #c7f0e4;
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #0f766e;
}

/* Module rows */
.ob-modrow {
  border: 1.5px solid rgba(216,180,254,.55);
  border-radius: var(--r);
  padding: 13px 14px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(150deg, rgba(245,240,255,.58), rgba(233,228,254,.42));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 3px 12px rgba(76,29,149,.1), inset 0 1px 0 rgba(255,255,255,.6);
}
.ob-modrow--on { border-color: var(--brand); background: linear-gradient(150deg, rgba(236,253,245,.82), rgba(233,228,254,.5)); }
.ob-mod-info { flex: 1; }
.ob-mod-info strong { display: block; font-size: 14px; }
.ob-mod-info span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ob-price { font-size: 15px; font-weight: 800; text-align: right; white-space: nowrap; }
.ob-price small { display: block; font-size: 11px; color: var(--muted); }
.ob-tag {
  font-size: 11px;
  font-weight: 700;
  color: #0f766e;
  background: #d1fae5;
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}
.ob-tag--muted { background: var(--bg-2); color: var(--muted); }

/* Go-live checks */
.ob-golive-checks {
  display: grid;
  gap: 9px;
  margin: 14px 0 18px;
  width: 100%;
}
.ob-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 13px;
  border: 1px solid #c7f0e4;
  border-radius: var(--r);
  background: #ecfdf7;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f766e;
  text-align: left;
}
.ob-check span:first-child { font-size: 16px; flex: none; }

.ob-golive-btn {
  width: min(340px, 100%);
  min-height: 54px;
  font-size: 17px;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(124,58,237,.28);
}
.ob-powered {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
}

/* Note */
.ob-note {
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.5;
  margin: 8px 0 4px;
}
.ob-muted { color: var(--muted); font-size: 14px; }

/* Footer nav */
.ob-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.ob-btn-next {
  min-height: 48px;
  border-radius: 14px;
  font-size: 15px;
  flex: 1;
}
.ob-btn-back {
  min-height: 44px;
  border-radius: 12px;
  font-size: 14px;
  flex: none;
}

/* ---- "Setting you up" full-screen branded waiting overlay (>=30s) ---- */
.ob-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  text-align: center;
  color: #f5f3ff;
  /* deep premium purple glow field */
  background:
    radial-gradient(circle at 50% 38%, rgba(124,58,237,.42), transparent 58%),
    radial-gradient(circle at 18% 12%, rgba(167,139,250,.28), transparent 46%),
    radial-gradient(circle at 84% 86%, rgba(109,40,217,.4), transparent 50%),
    linear-gradient(180deg, #1b1038, #2a1a5e 55%, #1b1038);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: ob-setup-fade .5s ease both;
}
@keyframes ob-setup-fade { from { opacity: 0; } to { opacity: 1; } }
.ob-setup-stage {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
/* The Alice glow logo grows bigger/smaller */
.ob-setup-logo {
  width: 96px;
  height: 96px;
  border-radius: 26%;
  box-shadow: 0 0 0 0 rgba(167,139,250,.5), 0 18px 50px rgba(124,58,237,.6);
  animation: ob-setup-pulse 2.6s ease-in-out infinite;
}
@keyframes ob-setup-pulse {
  0%, 100% { transform: scale(.86); box-shadow: 0 0 44px 6px rgba(167,139,250,.45), 0 18px 50px rgba(124,58,237,.5); }
  50%      { transform: scale(1.12); box-shadow: 0 0 78px 16px rgba(167,139,250,.7), 0 22px 60px rgba(124,58,237,.65); }
}
/* Smaller glow dots orbiting the logo */
.ob-setup-orbit {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  animation: ob-setup-spin linear infinite;
}
.ob-setup-orbit--1 { animation-duration: 4.2s; }
.ob-setup-orbit--2 { animation-duration: 6.4s; animation-direction: reverse; }
.ob-setup-orbit--3 { animation-duration: 8.8s; }
.ob-setup-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c4b5fd 60%, #7c3aed);
  box-shadow: 0 0 16px 3px rgba(196,181,253,.85);
}
.ob-setup-orbit--2 .ob-setup-dot { width: 9px; height: 9px; margin-left: -4.5px; top: 14px; }
.ob-setup-orbit--3 .ob-setup-dot { width: 7px; height: 7px; margin-left: -3.5px; top: 2px; opacity: .85; }
@keyframes ob-setup-spin { to { transform: rotate(360deg); } }
.ob-setup-copy {
  font-size: clamp(19px, 3.4vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.ob-setup-sub {
  font-size: 14px;
  font-weight: 500;
  color: rgba(237,233,254,.78);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ob-setup-logo { animation: none; transform: scale(1); }
  .ob-setup-orbit { animation: none; }
}

/* ---- Lottie ORB — header indicator (Task 1 + 2) ---- */
/* Orb in the onboarding header: centred, 44px, sits between progress bar and mute btn */
.ob-orb {
  display: inline-block;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}
.ob-orb--header {
  /* Centred top-middle of every onboarding step (Alice presence) — 2x size.
     Centre via margins (NOT transform) so the .is-speaking scale() can't shift it off-centre. */
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  margin-top: -42px;
  z-index: 3;
  width: 84px;
  height: 84px;
}
/* Speaking state: gentle scale + violet glow (human-paced) */
.ob-orb.is-speaking {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(124,58,237,.18), 0 0 16px 4px rgba(124,58,237,.28);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* Listening state: teal ring (tenant accent) */
.ob-orb.is-listening {
  box-shadow: 0 0 0 4px rgba(13,148,136,.28), 0 0 16px 4px rgba(13,148,136,.18);
  transition: box-shadow 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ob-orb.is-speaking { transform: none; }
}

/* ---- Lottie ORB — setup overlay centerpiece (Task 3) ---- */
/* Replaces the old orbiting-dots stage inside .ob-setup-overlay */
.ob-setup-orb {
  width: 220px;
  height: 220px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 14px;
  /* Soft violet glow matching old setup animation feel */
  box-shadow: 0 0 60px 12px rgba(167,139,250,.5), 0 0 120px 30px rgba(124,58,237,.3);
  animation: ob-setup-orb-breathe 3s ease-in-out infinite;
}
@keyframes ob-setup-orb-breathe {
  0%, 100% { box-shadow: 0 0 60px 12px rgba(167,139,250,.5), 0 0 120px 30px rgba(124,58,237,.3); transform: scale(0.96); }
  50%      { box-shadow: 0 0 90px 20px rgba(167,139,250,.7), 0 0 160px 40px rgba(124,58,237,.45); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .ob-setup-orb { animation: none; transform: none; }
}

/* ---- Welcome splash (Task 4) ---- */
.welcome-splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(124,58,237,.38), transparent 58%),
    radial-gradient(circle at 20% 12%, rgba(167,139,250,.28), transparent 46%),
    radial-gradient(circle at 82% 84%, rgba(109,40,217,.38), transparent 50%),
    linear-gradient(180deg, #1b1038, #2a1a5e 55%, #1b1038);
  animation: welcome-fade-in 0.6s ease both;
}
@keyframes welcome-fade-in { from { opacity: 0; } to { opacity: 1; } }
.welcome-lottie {
  width: min(340px, 86vw);
  height: min(220px, 54vw);
}
.welcome-skip {
  border: 1px solid rgba(237,233,254,.4);
  background: rgba(237,233,254,.1);
  color: rgba(237,233,254,.72);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.welcome-skip:hover { background: rgba(237,233,254,.2); }
@media (prefers-reduced-motion: reduce) {
  .welcome-splash-overlay { animation: none; }
}

/* ---- Voice 2-way demo panel (Task 7) ---- */
.v2w-panel {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.v2w-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15,10,30,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ob-setup-fade .3s ease both;
}
.v2w-sheet {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: 90dvh;
  background: linear-gradient(180deg, #1b1038, #2a1a5e 55%, #1b1038);
  border-radius: 26px 26px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: v2w-slide-up 0.35s cubic-bezier(0.22,1,0.36,1) both;
  box-shadow: 0 -8px 40px rgba(76,29,149,.4);
}
@keyframes v2w-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.v2w-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(237,233,254,.14);
}
.v2w-title {
  font-size: 16px;
  font-weight: 700;
  color: #ede9fe;
}
.v2w-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(237,233,254,.22);
  background: rgba(237,233,254,.1);
  color: #ede9fe;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
}
.v2w-orb-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}
.v2w-orb {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 40px 8px rgba(167,139,250,.4);
}
.v2w-note {
  font-size: 12.5px;
  color: rgba(237,233,254,.68);
  text-align: center;
  padding: 0 20px 8px;
  margin: 0;
  line-height: 1.45;
}
.v2w-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.v2w-bubble {
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 88%;
}
.v2w-bubble--alice {
  background: rgba(255,255,255,.10);
  color: #f5f3ff;
  align-self: flex-start;
}
.v2w-bubble--user {
  background: rgba(255,255,255,.06);
  color: #e2e0f0;
  align-self: flex-end;
  text-align: right;
}
.v2w-bubble strong { color: #fde68a; }
.v2w-input {
  display: flex;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(237,233,254,.14);
  background: rgba(0,0,0,.2);
}
.v2w-input .ob-input {
  flex: 1;
  background: rgba(255,255,255,.08);
  color: #f5f3ff;
  border-color: rgba(237,233,254,.28);
}
.v2w-input .ob-input::placeholder { color: rgba(237,233,254,.44); }
.v2w-powered {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(237,233,254,.32);
  padding: 6px 0 10px;
}
/* Draft card shown at end of voice brain */
.v2w-draft-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(237,233,254,.22);
  border-radius: var(--r);
  padding: 14px;
  margin-top: 4px;
}
.v2w-draft-head {
  font-size: 12px;
  font-weight: 700;
  color: #fde68a;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.v2w-draft-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #ede9fe;
  padding: 5px 0;
  border-bottom: 1px solid rgba(237,233,254,.1);
}
.v2w-draft-row:last-child { border-bottom: 0; }
.v2w-draft-row span:first-child { color: rgba(237,233,254,.58); }
.v2w-draft-status { color: #86efac; }
/* Talk-to-Alice entry button */
.ob-talk-btn {
  border-color: rgba(124,58,237,.38);
  color: var(--alice-strong);
  font-weight: 700;
}

/* ---- TASK 5: Photo position — face never covered or cropped ---- */
/* Mobile: show top band with face, content below. Shift bg so the person
   sits in the TOP-LEFT or TOP-RIGHT quadrant, away from the centred glass card.
   A vertical scrim ensures the glass card text zone never sits over a face. */
/* Per-step adjustments: person pushed to LEFT side on desktop,
   keeping face visible in the top-left/right band not under the card.
   Conservative values — visual QA pass still expected. */
@media (min-width: 768px) {
  /* 2026-05-29 (Jase) — focal-point values, identical to the base rules. Each anchors
     on the person's actual face so cover-cropping never shows the empty space above
     their head. Measured by viewing every image, not guessed. */
  .ob-shell--step-0::before { background-position: 50% 47%; }
  .ob-shell--step-1::before { background-position: 55% 38%; }
  .ob-shell--step-2::before { background-position: 45% 38%; }
  .ob-shell--step-3::before { background-position: 58% 38%; }
  .ob-shell--step-4::before { background-position: 34% 30%; }
  .ob-shell--step-5::before { background-position: 36% 34%; }
  .ob-shell--step-6::before { background-position: 68% 32%; }
  .ob-shell--step-7::before { background-position: 38% 31%; }
}
/* On mobile keep the face in the visible top band — the glass card scrolls below.
   We already have the overall ::after gradient that darkens edges, so no extra needed. */

/* Auth hero photo — object-position keeps the woman's face RIGHT-of-centre
   so the left copy overlay never covers her. */
.auth-hero-photo {
  /* Photo pushes subject to right — face not obscured by left copy overlay */
  background-position: 72% center, 72% center;
}
.auth-mobile-hero {
  /* Taller mobile crop: face and upper body, not just the top of her head. */
  background-position: center 52%, center 52%, center 42%;
}

/* ---- TASK 6: Text legibility — raise contrast on all glass tiles ---- */
/* Onboarding body text: boost weight from 300/400 → 400/500 minimum */
.ob-h1 {
  /* Keep display-weight 300 for large headings (premium feel) but add text-shadow
     so it stays legible over photo/glass. */
  text-shadow: 0 1px 8px rgba(30,10,60,.28);
}
.ob-sub {
  /* Already font-weight:500 — add subtle shadow for photo contrast */
  color: var(--ink);
  text-shadow: 0 1px 4px rgba(30,10,60,.18);
}
/* Raise glass tile opacity — was 0.66/0.5 alpha; bump to 0.82/0.68 so text sits on
   a more opaque background. Applies to the main .ob-step card. */
.ob-step {
  background:
    linear-gradient(150deg, rgba(245,240,255,.86), rgba(233,228,254,.72));
}
/* Sub-cards (demo cards, tiles, info rows, module rows): raise opacity similarly */
.ob-demo-card {
  background: linear-gradient(150deg, rgba(245,240,255,.80), rgba(233,228,254,.64));
}
.ob-tile {
  background: linear-gradient(150deg, rgba(245,240,255,.80), rgba(233,228,254,.62));
  /* Raise font-weight for tile labels for legibility */
  font-weight: 700;
  color: var(--ink);
}
.ob-info-row {
  background: linear-gradient(150deg, rgba(245,240,255,.78), rgba(233,228,254,.60));
}
.ob-modrow {
  background: linear-gradient(150deg, rgba(245,240,255,.78), rgba(233,228,254,.60));
}
.ob-opt {
  background: linear-gradient(150deg, rgba(245,240,255,.80), rgba(233,228,254,.64));
}
.ob-draft-preview {
  background: linear-gradient(150deg, rgba(245,240,255,.80), rgba(233,228,254,.64));
}
/* Body text minimum weight */
.ob-step p,
.ob-step span,
.ob-step label,
.ob-step small {
  font-weight: 400;
}
/* Key labels — 500–600 */
.ob-info-label,
.ob-draft-head,
.ob-draft-row span:first-child,
.ob-note {
  font-weight: 600;
  color: var(--ink-2);
}
/* Auth panel: ensure form labels/text readable at 400+. The auth panel
   sits on a white/paper background so contrast is fine — just raise any 300-weight. */
.auth-heading h1 { font-weight: 700; }
.auth-heading p { font-weight: 500; color: var(--ink-2); }
.auth-form label span { font-weight: 600; }
/* Scrim behind the onboarding glass card text: a subtle dark gradient on the
   bottom half of the ob-shell to ensure footer/button text is readable */
.ob-shell::after {
  /* Keep existing gradient but deepen the bottom fade for better legibility */
  background:
    radial-gradient(circle at 22% 6%, rgba(167,139,250,.34), transparent 40%),
    radial-gradient(circle at 82% 16%, rgba(124,58,237,.3), transparent 46%),
    radial-gradient(circle at 50% 112%, rgba(109,40,217,.4), transparent 52%),
    linear-gradient(90deg, rgba(76,29,149,.40), rgba(76,29,149,.06) 26%, rgba(76,29,149,.06) 74%, rgba(76,29,149,.40)),
    linear-gradient(180deg, rgba(31,16,60,.22), rgba(31,16,60,.06) 34%, rgba(31,16,60,.38));
}

/* ---- RESPONSIVE: tablet/desktop card layout ---- */
@media (min-width: 768px) {
  .ob-body {
    padding: 28px 20px 44px;
    align-items: flex-start;
  }
  .ob-step {
    padding: 38px 34px 34px;
    width: min(520px, calc(100% - 40px));
  }
  .ob-h1 {
    font-size: clamp(26px, 3.5vw, 36px);
  }
}

@media (min-width: 1024px) {
  .ob-body {
    /* Keep bottom padding modest so the whole step (incl. footer) fits a 1024x768
       desktop viewport with no vertical scroll. flex-start avoids top-clipping when a
       step is taller than the viewport (e.g. mobile heights). */
    padding: 28px 32px 28px;
    align-items: flex-start;
  }
  .ob-step {
    width: min(560px, calc(100% - 64px));
    padding: 40px 40px 34px;
  }
  .ob-header {
    padding: 20px 36px 12px;
  }
}

@media (max-width: 767px) {
  .ob-shell {
    min-height: 100dvh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 20% 0%, rgba(216,180,254,.44), transparent 34%),
      radial-gradient(circle at 78% 8%, rgba(124,58,237,.36), transparent 42%),
      linear-gradient(180deg, #7c3aed 0%, #6d28d9 38%, #4c1d95 100%);
  }
  .ob-shell::before {
    inset: 0;
    height: auto;
    opacity: .98;
    filter: saturate(1.05);
  }
  .ob-shell::after {
    inset: 0;
    background:
      linear-gradient(180deg, rgba(76,29,149,.08) 0%, rgba(76,29,149,.1) 23%, rgba(76,29,149,.72) 60%, rgba(76,29,149,.86) 100%),
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.28), transparent 30%),
      linear-gradient(90deg, rgba(76,29,149,.42), rgba(76,29,149,.08) 26%, rgba(76,29,149,.08) 74%, rgba(76,29,149,.42));
  }
  .ob-header {
    min-height: 58px;
    padding: 14px 20px 10px;
  }
  .ob-body {
    padding: clamp(22px, 5dvh, 52px) 0 calc(28px + env(safe-area-inset-bottom));
  }
}

/* SR-02 onboarding fill (Jase 2026-06-09): the full-bleed photo must reach the bottom edge.
   Under desktop html{zoom:0.75}, min-height:100dvh only fills 75% of the real screen → purple band.
   Fix = use --vp-fill (= 100dvh/0.75) on the onboarding full-height boxes. HEIGHT ONLY — the photo
   stays full-bleed `inset:0` (NO side cropping; do not touch .ob-shell::before width). */
@media (min-width: 1024px) {
  .app[data-route="onboarding"] .main,
  .app[data-route="onboarding"] .screen,
  .ob-shell { min-height: var(--vp-fill); }
}

/* ------------------------------------------------------------------ desktop */
@media (min-width: 1024px) {
  /* #desktop-scale (Jase 2026-06-08): the desktop UI read TOO BIG at 100% browser zoom; 75% looked perfect.
     Bake that in as the desktop default — mimics Ctrl+- to 75%. Mobile (<1024px) is untouched. `zoom` (not
     transform:scale) keeps pointer coords + getBoundingClientRect in the SAME scaled space, so the calendar
     drag math stays correct. CAVEAT: zoom shrinks every 100dvh box to 75% of the screen, so full-height
     layout elements must use --vp-fill (= 100dvh/0.75) to still reach the real viewport bottom. */
  html { zoom: 0.75; }
  :root { --vp-fill: calc(100dvh / 0.75); }
  .app { flex-direction: row; min-height: var(--vp-fill); }
  .bottomnav { display: none; }
  .sidebar {
    display: flex; flex-direction: column; width: 248px; flex: none;
    background: #fff; border-right: 1px solid var(--line); padding: 18px 14px;
    position: sticky; top: 0; height: var(--vp-fill);   /* fill viewport under the 0.75 zoom */
  }
  .sidebar .brand { padding: 6px 8px 18px; }
  .sidebar .brand-dot { width: 36px; height: 36px; }
  .sidebar nav { display: flex; flex-direction: column; gap: 4px; }
  .side-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; border: 0; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 15px; width: 100%; text-align: left; position: relative; }
  .side-link:hover { background: var(--bg-2); }
  .side-link[aria-current="page"] { background: var(--brand-tint); color: var(--brand-strong); }
  .side-link .nav-badge { margin-left: auto; background: var(--alice); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; position: static; transform: none; }
  .sidebar .side-foot { margin-top: auto; display: grid; gap: 10px; }
  .account-card {
    display: grid; gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-1);
  }
  .account-meta { min-width: 0; }
  .account-meta strong { display: block; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .account-meta span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .account-card .btn { width: 100%; }
  .alice-card { background: var(--alice-tint); border-radius: 14px; padding: 12px; }
  .alice-card .top { display: flex; align-items: center; gap: 9px; color: var(--alice-strong); font-weight: 700; }
  .alice-card .av { width: 26px; height: 26px; border-radius: 999px; background: var(--alice); color:#fff; display:grid; place-items:center; }
  .alice-card p { font-size: 12.5px; color: var(--alice-strong); margin-top: 8px; opacity: .9; }

  .main { min-height: var(--vp-fill); }
  .screen { max-width: 1080px; padding: 22px 28px 40px; }
  .app[data-route="calendar"] .screen { max-width: none; padding: 22px 44px 40px; }
  /* SR-02 (Jase 2026-06-09): a contact/customer profile uses the SAME wide desktop layout no matter how it's
     opened (Locals OR a calendar booking's "Customer" button) — Jase's preferred Image 3. Kills the look of
     "2 different Customer screens". (Pairs with app[data-profile] set in app.js render.) */
  .app[data-profile="1"] .screen { max-width: none; padding: 22px 44px 40px; }
  .topbar { padding: 16px 28px; }
  .topbar .alice-pill { display: none; }      /* Alice lives in sidebar on desktop */
  .topbar .topbar-row { display: none; }      /* brand lives in sidebar on desktop */
  .page-title { display: block; }
  .cal-controls { margin-top: 14px; }
  .calendar-sticky-stack { top: 72px; }
  .free { min-height: 44px; }

  /* two-column screens on desktop */
  .cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
  .agenda { display: none; }                   /* mobile day list hidden; week grid is primary */
  .app[data-calview="day"] .agenda { display: flex; }
  .app[data-calview="day"] .weekgrid-wrap { display: none; }
  .app[data-route="calendar"][data-calview="day"] .screen { max-width: none; }
  .weekgrid { width: 100%; min-width: 980px; grid-template-columns: 58px repeat(var(--cols, 7), minmax(150px, 1fr)); }
  .weekgrid.is-three { min-width: 0; grid-template-columns: 58px repeat(var(--cols, 3), minmax(260px, 1fr)); }
}
@media (max-width: 1023px) {
  .onboarding-shell { grid-template-columns: 1fr; }
  .onboarding-intro { position: static; }
  .setup-voice-card { grid-template-columns: 1fr; justify-items: center; }
  .setup-voice-copy { text-align: center; }
  .setup-voice-actions { width: 100%; }
  .setup-section-head { display: block; }
  .setup-section-head p { margin-top: 4px; }
  .setup-form-grid { grid-template-columns: 1fr; }
  .setup-actions { justify-content: stretch; }
  .setup-actions .btn { flex: 1 1 180px; }
  .weekgrid-wrap.week-desktop-only { }          /* week grid still available on mobile via scroll */
  .cols { display: block; }
  .cols > * + * { margin-top: 16px; }
  .cal-controls {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  }
  .cal-controls .spacer { display: none; }
  .cal-controls .segmented {
    grid-column: 1 / -1; width: 100%; justify-content: stretch;
  }
  .cal-controls .segmented button { flex: 1; }
  .staff-tray {
    margin-left: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
  }
  .staff-tray::-webkit-scrollbar { display: none; }
  .staff-tray-hint { display: none; }
  .booking-card { align-items: flex-start; flex-wrap: wrap; }
  .booking-main { flex-basis: 100%; }
  .booking-right {
    width: calc(100% - 54px); min-width: 0; margin-left: 54px;
    justify-content: flex-start;
  }
  .staff-dropzone { min-width: 0; max-width: 100%; justify-content: flex-start; border-radius: 14px; }
  .staff-name { max-width: 64px; }
  .profile-form { grid-template-columns: 1fr; }
  .contact-actions .btn { flex: 1 1 96px; }
  .inline-fields { justify-content: flex-start; width: 100%; margin-top: 10px; }
  .inline-fields input[type="text"] { width: 100%; max-width: none; }
  .staff-picker { gap: 6px; }

  /* settings rows that carry a wide control stack on mobile so the
     label + hint keep full width instead of crushing to one word per line */
  .set-row:has(.seg-toggle),
  .set-row:has(.inline-fields),
  .set-row:has(.brand-tools),
  .set-row:has(.connect-controls),
  .set-row:has(.calendar-import-controls),
  .set-row:has(.days),
  .set-row:has(.vcfg-blocked),
  .set-row:has(.vcfg-blocked-empty),
  .set-row:has(textarea),
  .set-row:has(select),
  .set-row:has(input[type="text"]),
  .set-row:has(input[type="url"]),
  .set-row:has(input[type="color"]),
  .set-row:has(input[type="time"]),
  .set-row:has(input[type="number"]) { flex-wrap: wrap; align-items: flex-start; }
  .set-row:has(.seg-toggle) .grow,
  .set-row:has(.inline-fields) .grow,
  .set-row:has(.brand-tools) .grow,
  .set-row:has(.connect-controls) .grow,
  .set-row:has(.calendar-import-controls) .grow,
  .set-row:has(.days) .grow,
  .set-row:has(.vcfg-blocked) .grow,
  .set-row:has(.vcfg-blocked-empty) .grow,
  .set-row:has(textarea) .grow,
  .set-row:has(select) .grow,
  .set-row:has(input[type="text"]) .grow,
  .set-row:has(input[type="url"]) .grow,
  .set-row:has(input[type="color"]) .grow,
  .set-row:has(input[type="time"]) .grow,
  .set-row:has(input[type="number"]) .grow { flex: 1 1 100%; }
  .set-row .seg-toggle { flex: 1 1 100%; margin-top: 10px; }
  .set-row .seg-toggle button { flex: 1; }
  .set-row .brand-tools,
  .set-row .connect-controls,
  .set-row .calendar-import-controls,
  .set-row .days { flex: 1 1 100%; justify-content: flex-start; margin-top: 10px; }
  /* #4 (Jase 2026-06-08): Blocked-numbers control (details / empty-state) was NOT in the stack list →
     the row stayed a tight flex-row on mobile, crushing "Blocked numbers" to one word per line and
     overlapping the hint. Stack it full-width like the other wide controls. */
  .set-row .vcfg-blocked,
  .set-row .vcfg-blocked-empty { flex: 1 1 100%; margin-top: 8px; }
  .set-row > select,
  .set-row > textarea,
  .set-row > input[type="text"],
  .set-row > input[type="url"],
  .set-row > input[type="time"],
  .set-row > input[type="number"] { flex: 1 1 100%; max-width: none; margin-top: 10px; }
  .calendar-import-controls { grid-template-columns: 1fr; }

  /* comfier thumb targets on the calendar control toggles */
  .segmented button, .seg-toggle button { min-height: 40px; }
  .cal-controls .talk-alice-btn {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
    margin-top: 2px;
  }
  .cal-alice-queue {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .cal-alice-summary {
    flex: none;
    width: 100%;
  }
  .cal-alice-items {
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .cal-alice-queue.is-expanded .cal-alice-items {
    overflow-x: visible;
  }
  .cal-alice-items::-webkit-scrollbar { display: none; }
  .cal-alice-item {
    flex: 0 0 min(82vw, 326px);
    min-width: 0;
  }
  .cal-alice-item.update { flex-basis: min(88vw, 346px); }
  .cal-alice-item .btn {
    flex: 0 0 auto;
    padding-inline: 10px;
    font-size: 12px;
  }
}

/* iPad / tablet fit mode: keep 3-day, week, month, and year visible
   without forcing the owner into horizontal scrolling. Day view can still
   grow with staff count. */
@media (min-width: 1024px) and (max-width: 1366px) {
  .sidebar {
    width: 210px;
    padding: 16px 10px;
  }
  .sidebar .brand { padding: 6px 8px 14px; }
  .sidebar .brand-name { font-size: 15px; }
  .side-link { font-size: 14px; padding: 10px 11px; }
  .app[data-route="calendar"] .screen { padding: 18px 24px 30px; }
  .topbar { padding: 14px 24px; }
  .cal-controls { gap: 7px; margin-top: 10px; }
  .cal-title { font-size: 15px; }
  .cal-title small { font-size: 11px; }
  .iconbtn, .btn-today, .talk-alice-btn { height: 36px; }
  .iconbtn { width: 36px; }
  .btn-today, .talk-alice-btn { padding-inline: 11px; font-size: 13px; }
  .segmented button { min-height: 32px; padding: 6px 8px; font-size: 12px; }
  .staff-tray { margin-bottom: 10px; padding: 8px 10px; gap: 6px; }
  .staff-chip { max-width: 112px; font-size: 12px; }
  .staff-name { max-width: 56px; }
  .week-legend { margin-bottom: 8px; gap: 6px; }
  .legend-pill { font-size: 10px; min-height: 24px; padding-inline: 7px; }
  .weekgrid-head-wrap,
  .weekgrid-wrap { overflow-x: hidden; }
  .weekgrid,
  .weekgrid.is-three {
    min-width: 0;
    width: 100%;
    grid-template-columns: 48px repeat(var(--cols, 7), minmax(0, 1fr));
  }
  .weekgrid.is-three { grid-template-columns: 48px repeat(var(--cols, 3), minmax(0, 1fr)); }
  .wg-head { padding: 8px 4px; }
  .wg-head .dow { font-size: 10px; }
  .wg-head .dnum { font-size: 14px; }
  .wg-head.today .dnum { width: 28px; height: 28px; }
  .wg-time, .wg-cell { height: 24px; }
  .wg-time { font-size: 10px; padding-right: 4px; }
  .wg-event { min-height: 38px; font-size: 10.5px; border-radius: 8px; }
  .wg-event.booking { padding: 4px 5px 12px; padding-right: 34px; line-height: 1.14; }
  .wg-event.booking .booking-status { top: 3px; right: 3px; max-width: 28px; padding: 0 3px; font-size: 8px; }
  .wg-event .week-staff { right: 3px; bottom: 3px; gap: 2px; }
  .wg-event .week-staff-face { width: 12px; height: 12px; font-size: 6px; border-width: 1px; }
  .month .mcell {
    min-height: clamp(58px, calc((100dvh - 288px) / 6), 104px);
    padding: 7px;
  }
  .mnum { width: 22px; height: 22px; font-size: 12px; }
  .mcount { display: none; }
  .year {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
  }
  .ymini { padding: 8px; }
  .ymini h4 { margin-bottom: 4px; font-size: 12px; }
  .ymini .yg { gap: 1px; }
  .ymini .yd { font-size: 8px; }
}

@media (min-width: 1200px) and (max-width: 1366px) {
  .year { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* tablet week grid scroll affordance kept; large desktop wider columns */
@media (min-width: 1280px) {
  .weekgrid { min-width: 0; }
}

/* ============================================================
   Claude motion spike — premium micro-interactions
   Motion/transform/opacity only. No logic, data, or layout changes.
   Layered on top of Codex V2 to compare premium feel.
   ============================================================ */

/* Smooth, quiet transitions on every interactive surface that
   previously snapped state instantly. */
.btn, .iconbtn, .btn-today, .segmented button, .seg-toggle button,
.chip.selectable, .side-link, .bottomnav button, .row, .appt, .card,
.wg-head, .sd-head, .staff-chip, .staff-focus-chip, .day-pill,
.sheet-close, .booking-link, .legend-pill, .alice-pill, .avatar,
.brand-dot {
  transition:
    transform .14s var(--ease-premium),
    box-shadow .2s var(--ease-premium),
    background-color .2s var(--ease-premium),
    border-color .2s var(--ease-premium),
    color .2s var(--ease-premium);
}

/* calendar cells / free slots: smooth hover wash instead of a hard flip */
.wg-cell, .sd-cell, .free, .mcell, .wg-head, .sd-head {
  transition:
    background-color .16s var(--ease-premium),
    border-color .16s var(--ease-premium),
    color .16s var(--ease-premium),
    box-shadow .16s var(--ease-premium);
}

/* Press feedback — transform-only, interruptible */
.btn:active, .iconbtn:active, .btn-today:active, .segmented button:active,
.seg-toggle button:active, .chip.selectable:active, .side-link:active,
.staff-focus-chip:active, .day-pill:active, .sheet-close:active,
.legend-pill:active, .alice-pill:active {
  transform: scale(.97);
}
.bottomnav button:active { transform: scale(.93); }
.row:active, .appt:active, .booking-link:active { transform: scale(.992); }

/* Hover lift on pointer devices only (no sticky hover on touch) */
@media (hover: hover) {
  .row:hover, .appt:hover, .card:hover { transform: translateY(-1px); }
  .btn-primary:hover, .btn-alice:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
  .iconbtn:hover, .btn-today:hover { transform: translateY(-1px); }
  .brand-dot:hover { transform: scale(1.05); }
}

/* Bottom-nav: active icon lifts and grows slightly */
.bottomnav button .icon { transition: transform .18s var(--ease-premium); }
.bottomnav button[aria-current="page"] .icon { transform: translateY(-2px) scale(1.06); }

/* Sidebar link: animated accent bar slides in on the active item */
.side-link::before {
  content: ""; position: absolute; left: 3px; top: 50%;
  width: 3px; height: 0; border-radius: 999px; background: var(--brand);
  transform: translateY(-50%);
  transition: height .24s var(--ease-premium);
}
.side-link[aria-current="page"]::before { height: 54%; }

/* Search bar focus glow */
.searchbar { transition: box-shadow .2s var(--ease-premium), border-color .2s var(--ease-premium); }
.searchbar:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}

/* Consistent, animated keyboard focus ring (accessibility + polish) */
.btn:focus-visible, .iconbtn:focus-visible, .btn-today:focus-visible,
.segmented button:focus-visible, .seg-toggle button:focus-visible,
.side-link:focus-visible, .bottomnav button:focus-visible,
.chip.selectable:focus-visible, .day-pill:focus-visible,
.staff-focus-chip:focus-visible, .sheet-close:focus-visible,
.toggle:focus-visible, .row:focus-visible, .legend-pill:focus-visible,
.alice-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 38%, transparent);
}

/* Toast uses the premium curve */
.toast { animation: pop .22s var(--ease-premium); }

/* Screen + calendar-range entrance transitions (driven by app.js).
   .main clips the small horizontal overshoot so no scrollbar flashes. */
.main { overflow-x: clip; }
.screen.screen-enter { animation: spikeScreenIn .34s var(--ease-premium) both; }
.screen.cal-enter-fade { animation: spikeScreenIn .30s var(--ease-premium) both; }
.screen.cal-enter-next { animation: spikeCalNext .72s var(--ease-premium) both; }
.screen.cal-enter-prev { animation: spikeCalPrev .72s var(--ease-premium) both; }
@keyframes spikeScreenIn {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
@keyframes spikeCalNext {
  from { opacity: .2; transform: translateX(64px); }
  to   { opacity: 1; transform: none; }
}
@keyframes spikeCalPrev {
  from { opacity: .2; transform: translateX(-64px); }
  to   { opacity: 1; transform: none; }
}

/* Cloudflare unified Alice test */
.phone-sim-wrap { position: fixed; inset: 0; z-index: 80; }
.phone-sim-wrap .scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .48); backdrop-filter: blur(2px); }
.phone-sim {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(680px, calc(100vw - 28px));
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .22);
  padding: 22px;
  animation: slideup .26s var(--ease-premium);
}
.phone-sim-head { display: flex; gap: 12px; align-items: center; padding-right: 44px; }
.phone-sim-head h2 { margin: 0; font-size: 24px; letter-spacing: 0; }
.phone-sim-head p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.phone-sim-call {
  margin: 18px 0;
  border: 1px solid color-mix(in srgb, var(--brand, #0d9488) 22%, #e2e8f0);
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand, #0d9488) 8%, #fff), #f8fafc);
  min-height: 178px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  padding: 18px;
}
.phone-sim-call strong { color: var(--ink); font-size: 17px; }
.phone-sim-call span { color: var(--muted); font-size: 13px; max-width: 360px; }
.voice-mark {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #8b5cf6, var(--brand, #0d9488));
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand, #0d9488) 12%, transparent);
}
.voice-mark span {
  display: block;
  width: 6px;
  height: 22px;
  border-radius: 999px;
  background: currentColor;
  animation: voiceBar 1.1s ease-in-out infinite;
}
.voice-mark span:nth-child(2) { height: 38px; animation-delay: -.12s; }
.voice-mark span:nth-child(3) { height: 52px; animation-delay: -.24s; }
.voice-mark span:nth-child(4) { height: 34px; animation-delay: -.36s; }
.voice-mark span:nth-child(5) { height: 18px; animation-delay: -.48s; }
@keyframes voiceBar {
  0%, 100% { transform: scaleY(.62); opacity: .72; }
  50% { transform: scaleY(1); opacity: 1; }
}
.phone-sim textarea { resize: vertical; min-height: 110px; }
.phone-sim .sheet-foot { position: static; margin: 18px -22px -22px; border-radius: 0 0 26px 26px; }

@media (max-width: 700px) {
  .phone-sim {
    width: 100%;
    left: 0;
    bottom: 0;
    transform: none;
    border-radius: 26px 26px 0 0;
    padding: 20px 16px;
  }
  .phone-sim .sheet-foot { margin: 18px -16px -20px; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  /* Entrances and lifts collapse to their resting state, no movement. */
  .screen.screen-enter, .screen.cal-enter-fade,
  .screen.cal-enter-next, .screen.cal-enter-prev { animation: none !important; }
  .cal-alice-queue.is-highlighted { animation: none !important; }
  .bottomnav button[aria-current="page"] .icon { transform: none !important; }
  .alice-mic-button .mic-rings,
  .alice-mic-button .mic-rings::before,
  .alice-mic-button .mic-rings::after,
  .alice-mic-button .mic-core,
  .alice-wave i,
  .alice-voice-button .voice-orbit,
  .alice-voice-button .voice-orbit.outer,
  .alice-voice-button .voice-bars i,
  .alice-voice-button .alice-voice-core {
    animation: none !important;
  }
}

/* ============================================================
   Mobile + touch hardening (2026-05-23 mobile QA)
   No logic/data/nav change.
   ============================================================ */

/* Mobile drags are deliberate long-press gestures; quick VERTICAL movement scrolls the calendar NATIVELY. */
/* ⛔ Jase 2026-06-10: booking/lead cards = touch-action:pan-y so a FULL calendar scrolls up/down under a finger
   natively (compositor thread = buttery). HORIZONTAL (left/right across staff columns in All-Staff view) is driven by
   the staffday column-pan in app.js (native nested horizontal scroll is unreliable on these absolutely-positioned
   cards — the browser claims the gesture but scrolls the window, which has no horizontal overflow). This rule sits
   LATER than [data-drag-type] with EQUAL specificity, so it must ALSO be pan-y or it overrides it (the v290 bug).
   Staff drag handles keep `none` (top-tray/header). */
.sd-event, .wg-event.booking {
  touch-action: pan-y;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}
.staff-chip, .week-staff-face {
  touch-action: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Sheet footer stays pinned above the home indicator; body won't rubber-band the page */
.sheet-foot { flex: none; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.sheet-body { overscroll-behavior: contain; }

@media (max-width: 1023px) {
  /* keep the calendar title from being clipped by the nav row */
  .cal-title { min-width: 0; }
  .cal-title small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* fade the right edge of the staff focus bar so it reads as scrollable
     (borderless element, safe to mask; the bordered .staff-tray is left alone) */
  .staff-focusbar {
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
            mask: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  .staff-focus-chip { scroll-snap-align: start; }

  /* bigger finger target on the resize grip */
  .resize-grip { height: 20px; }

  /* in-sheet action buttons wrap cleanly on the narrowest phones */
  .quick-actions .btn { flex: 1 1 120px; }
}

/* ============================================================
   Mobile chrome auto-hide on scroll + full-week fit (2026-05-23)
   ============================================================ */

/* Top chrome slides away on scroll-down so the calendar gets full height.
   JS toggles #app.chrome-collapsed (calendar route only). */
@media (max-width: 1023px) {
  .topbar { transition: transform .32s var(--ease-premium); will-change: transform; }
  #app.chrome-collapsed .topbar { transform: translateY(-100%); }
}

/* Fit the whole week (all 7 days) in the viewport on EVERY phone size, so
   Saturday and Sunday are never clipped or stuck behind a finicky horizontal
   scroll. Columns share the width; cards go compact so they still read. */
@media (max-width: 1023px) {
  .weekgrid, .weekgrid.is-three { min-width: 0; width: 100%; }
  .weekgrid { grid-template-columns: 48px repeat(var(--cols, 7), minmax(0, 1fr)); }
  .weekgrid.is-three { grid-template-columns: 48px repeat(var(--cols, 3), minmax(0, 1fr)); }
  .wg-time { font-size: 10px; padding-right: 4px; }
  .wg-head .dow { font-size: 11px; }
  .wg-head .dnum { font-size: 14px; }
  /* compact booking cards for the narrower week columns */
  .weekgrid .wg-event.booking { padding: 3px 4px 12px; font-size: 10px; line-height: 1.15; }
  .weekgrid .wg-event.booking .booking-status { top: 3px; right: 3px; max-width: 26px; font-size: 8px; padding: 0 3px; }
  .weekgrid .wg-event .week-staff { right: 2px; bottom: 2px; gap: 2px; }
  .weekgrid .wg-event .week-staff-face { width: 12px; height: 12px; font-size: 6px; border-width: 1px; }
}

/* ============================================================
   PRODUCT SHELL — Plan & modules (Settings) + Connect Hub tab.
   Brand rule: tenant = teal, Alice product = violet. Legibility first.
   (Reduced-motion handled globally above.)
   ============================================================ */

/* ---- module cards (Settings → Plan & modules) ---- */
.mod-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.mod-card + .mod-card { margin-top: 10px; }
.mod-card[data-ent="soon"] { opacity: .82; }
.mod-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--alice-tint); color: var(--alice-strong);
}
.mod-ic .icon { width: 22px; height: 22px; }
.mod-body { flex: 1 1 auto; min-width: 0; }
.mod-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mod-name { font-weight: 700; color: var(--ink); font-size: 16px; }
.mod-price { font-weight: 700; color: var(--alice-strong); font-size: 14px; }
.mod-blurb { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.mod-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mod-on { font-weight: 700; color: var(--ok); font-size: 14px; }
.mod-pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.mod-pill--included { background: var(--brand-tint); color: var(--brand-ink); }
.mod-pill--active { background: var(--ok-tint); color: var(--ok); }
.mod-pill--available { background: var(--alice-tint); color: var(--alice-strong); }
.mod-pill--soon { background: var(--bg-2); color: var(--muted); }
.mod-toggle-hint { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.mod-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mod-foot .hint { color: var(--ink-2); font-size: 13px; }

/* ---- accessible toggle switch (human-paced, never instant) ---- */
.switch {
  position: relative; width: 50px; height: 30px; flex: none;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); padding: 0;
  transition: background .24s var(--ease-premium), border-color .24s var(--ease-premium);
}
.switch .switch-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 999px; background: #fff; box-shadow: var(--shadow-1);
  transition: transform .24s var(--ease-premium);
}
.switch[aria-checked="true"] { background: var(--alice); border-color: var(--alice); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--alice); outline-offset: 2px; }

/* ---- usage meter (Voice minutes) ---- */
.meter { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin-top: 10px; }
.meter-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--alice), #a78bfa); transition: width .5s var(--ease-premium); }
.meter-label { color: var(--ink-2); font-size: 12.5px; font-weight: 600; margin-top: 5px; }
/* Voice minutes top-up ($75/50min) — 2026-06-04 (Jase) */
.meter-fill--stop { background: linear-gradient(90deg, #ef4444, #f87171); }
.topup { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(124,58,237,.14); display: flex; flex-direction: column; gap: 10px; }
.topup-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.topup-copy { flex: 1; min-width: 0; }
.topup-title { font-weight: 700; font-size: 13.5px; color: var(--ink-2, #1e293b); }
.topup-copy .mod-toggle-hint { margin-top: 4px; }
.topup-actions { display: flex; }
.topup-stop { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #b91c1c; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22); border-radius: 10px; padding: 8px 10px; }
.topup-nocard { color: var(--muted, #64748b); font-size: 12px; font-style: italic; }
/* On-leave staff marking in booking pickers — 2026-06-04 (Jase, Super Refinement) */
.staff-check--leave { opacity: .6; }
.staff-check--leave .staff-face { filter: grayscale(1); }
.staff-leave-tag { font-style: normal; font-size: 11px; color: #b45309; font-weight: 600; margin-left: 2px; }
/* On-leave visibility in Week + Month views — 2026-06-04 (Jase, Super Refinement) */
.wg-away { display: inline-block; margin-top: 2px; font-size: 10px; font-weight: 700; color: #b45309; background: rgba(245,158,11,.15); border-radius: 6px; padding: 1px 5px; line-height: 1.4; }
.wg-head--away .dnum { color: #b45309; }
.wg-col--away { background: repeating-linear-gradient(45deg, rgba(245,158,11,.06), rgba(245,158,11,.06) 8px, transparent 8px, transparent 16px); }
.dot.dot-leave { background: #f59e0b; }
/* Pristine-workspace calendar setup prompt — 2026-06-04 (Jase, Super Refinement #5) */
.cal-setup-actions { margin-top: 14px; display: flex; justify-content: center; }
/* On-leave polish — focus-bar away marker, year tint, past-entry tags — 2026-06-04 (Jase) */
.staff-focus-chip--away { opacity: .62; }
.focus-away-tag, .leave-past-tag { font-style: normal; font-size: 10px; font-weight: 700; color: #b45309; margin-left: 3px; }
.leave-past { opacity: .55; }
.yd--leave { box-shadow: inset 0 0 0 1.5px #f59e0b; }
/* Per-category Settings Save bar — 2026-06-04 (Jase) */
.set-catsave { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(124,58,237,.12); }
.set-catsave-note { font-size: 12.5px; color: var(--muted, #64748b); }
.set-catsave--ok .set-catsave-note { color: #15803d; }
.set-catsave--err .set-catsave-note { color: #b91c1c; }

/* ---- Connect Hub screen ---- */
.connecthub { padding: 2px 0 8px; }
.connecthub-head { margin-bottom: 16px; }
.connecthub-head h2 { font-size: 22px; font-weight: 800; color: var(--ink); }
.connecthub-head p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.connecthub-sec {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r);
  background: var(--alice-tint); color: var(--alice-strong); font-size: 13px; font-weight: 600;
}
.connecthub-sec .icon { width: 16px; height: 16px; flex: none; }
.connect-manager-box { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); margin-bottom: 18px; }
.connect-manager-q { font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.manager-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.manager-pill {
  height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 600;
  transition: background .2s var(--ease-premium), color .2s var(--ease-premium), border-color .2s var(--ease-premium);
}
.manager-pill[aria-pressed="true"] { background: var(--alice); color: #fff; border-color: var(--alice); }
.connect-manager-next { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--alice-strong); font-size: 14px; font-weight: 600; }
.connect-manager-next .icon { width: 16px; height: 16px; flex: none; }
.connect-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .connect-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .connect-grid { grid-template-columns: 1fr 1fr 1fr; } }
.connect-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.connect-card-head { display: flex; align-items: center; justify-content: space-between; }
.connect-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--alice-tint); color: var(--alice-strong); }
.connect-ic .icon { width: 21px; height: 21px; }
.connect-name { font-weight: 700; color: var(--ink); font-size: 16px; }
.connect-hint { color: var(--ink-2); font-size: 13.5px; flex: 1 1 auto; }
.connect-access { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.connect-access .icon { width: 14px; height: 14px; flex: none; }
.connect-cta { margin-top: 4px; align-self: flex-start; }
.connect-pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.connect-pill--ok { background: var(--ok-tint); color: var(--ok); }
.connect-pill--pending { background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn-line); }
.connect-pill--blocked { background: #fef2f2; color: #b91c1c; }
.connect-pill--locked { background: var(--alice-tint, #f3effe); color: var(--alice-strong, #6d28d9); }
.connect-pill--idle { background: var(--bg-2); color: var(--muted); }
/* Neutral/grey — deliberately distinct from the violet "Plan needed" pill.
   Used on the informational roadmap tiles (no plan-gate, no connect flow). */
.connect-pill--soon { background: var(--bg-2); color: var(--muted); border: 1px solid var(--line); }

/* narrow phones: module control row sits under the card body */
@media (max-width: 520px) {
  .mod-card { flex-wrap: wrap; }
  .mod-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ---- Connect sheets + Foundation upsell ---- */
.connect-sheet-p { color: var(--ink-2); font-size: 15px; margin-bottom: 12px; }
.connect-access--sheet { margin: 12px 0; padding: 10px 12px; background: var(--bg-2); border-radius: var(--r); color: var(--ink-2); }
.connect-pending-note { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: var(--r); background: var(--warn-tint); border: 1px solid var(--warn-line); color: var(--warn); font-size: 14px; margin: 12px 0; }
.connect-pending-note .icon { flex: none; margin-top: 2px; }
.connect-steps { margin: 4px 0 14px; padding-left: 22px; color: var(--ink-2); font-size: 14.5px; }
.connect-steps li { margin: 7px 0; }
.connect-field { display: block; margin: 12px 0 4px; }
.connect-field span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.connect-field input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); font-size: 15px; background: #fff; }
.connect-field input:focus-visible { outline: 2px solid var(--alice); outline-offset: 1px; }
.connect-sheet .sheet-foot { display: flex; flex-direction: column; gap: 8px; }

.foundation-price { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 16px 0; padding: 18px; border-radius: var(--r-lg); background: var(--alice-tint); }
.foundation-price strong { color: var(--alice-strong); font-size: 15px; font-weight: 700; }
.foundation-amt { font-size: 40px; font-weight: 800; color: var(--ink); line-height: 1.05; }
.foundation-sub { color: var(--muted); font-size: 13px; }
.foundation-list { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.foundation-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 14.5px; }
.foundation-list .icon { flex: none; color: var(--ok); margin-top: 2px; }
.foundation-sheet .sheet-foot { display: flex; gap: 10px; }
.foundation-sheet .sheet-foot .btn { flex: 1; justify-content: center; }

/* ---- Connect: connected / blocked / agency draft + link ---- */
.connect-done { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r); background: var(--ok-tint); margin-bottom: 12px; }
.connect-done > .icon { flex: none; color: var(--ok); width: 22px; height: 22px; margin-top: 1px; }
.connect-done strong { display: block; color: var(--ink); font-size: 15px; }
.connect-done span { color: var(--ink-2); font-size: 14px; }
.connect-blocked-box { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: var(--r); background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; font-size: 14px; margin: 12px 0; }
.connect-blocked-box .icon { flex: none; margin-top: 2px; color: #b91c1c; }
.connect-blockednote { display: flex; align-items: center; gap: 6px; color: #b91c1c; font-size: 12.5px; font-weight: 600; }
.connect-blockednote .icon { width: 14px; height: 14px; flex: none; }
.connect-card--blocked { border-style: dashed; }
.connect-card--locked { border-style: dashed; border-color: var(--alice, #a78bfa); background: linear-gradient(180deg, var(--alice-tint, #f6f2ff) 0%, #fff 60%); }
.connect-card--locked .connect-name, .connect-card--locked .connect-hint { opacity: .85; }

/* ============================ Content Studio ============================ */
/* Grow-screen entry card (Alice violet — it's a feature gate). */
.content-studio-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; margin-bottom: 16px; border: 1px solid var(--alice, #a78bfa); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--alice-tint, #f6f2ff) 0%, var(--surface, #fff) 70%); box-shadow: var(--shadow-1); }
.content-studio-card-head { display: flex; align-items: center; justify-content: space-between; }
.content-studio-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--alice, #a78bfa); color: #fff; }
.content-studio-ic .icon { width: 22px; height: 22px; }
.content-studio-title { font-weight: 800; color: var(--ink); font-size: 18px; }
.content-studio-sub { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.content-studio-cta { margin-top: 6px; align-self: flex-start; }
.content-studio-card--locked { opacity: .96; }

/* ===================== Grow roadmap (Coming soon, informational) ===================== */
/* FB/IG + Google Business Profile tiles. Read-only — no plan-gate, no connect flow.
   Muted/neutral look so they clearly read as "later", not as actionable connectors. */
.roadmap-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.roadmap-sec-head { margin-bottom: 14px; }
.roadmap-sec-head h3 { font-size: 17px; font-weight: 800; color: var(--ink); }
.roadmap-sec-head p { color: var(--ink-2); font-size: 14px; margin-top: 5px; line-height: 1.5; }
.roadmap-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .roadmap-grid { grid-template-columns: 1fr 1fr; } }
.roadmap-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--bg-2); }
.roadmap-card-head { display: flex; align-items: center; justify-content: space-between; }
.roadmap-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface, #fff); color: var(--muted); border: 1px solid var(--line); }
.roadmap-ic .icon { width: 21px; height: 21px; }
.roadmap-title { font-weight: 700; color: var(--ink); font-size: 16px; }
.roadmap-copy { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; flex: 1 1 auto; }
.roadmap-cta { margin-top: 4px; align-self: flex-start; color: var(--muted); }

/* Studio screen */
.content-studio .cs-card { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 16px; margin-bottom: 16px; }
.cs-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 16px; margin-bottom: 12px; }
.cs-card-title .icon { width: 18px; height: 18px; color: var(--alice-strong); flex: none; }
.cs-built-from { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--bg-2); padding: 3px 9px; border-radius: 999px; }
.cs-label { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); margin: 4px 0 6px; }

/* Upload zone + thumbnails */
.cs-uploads { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.cs-thumb { position: relative; width: 92px; height: 92px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-thumb-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 999px; border: none; background: rgba(15,23,42,0.72); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.cs-thumb-x .icon { width: 14px; height: 14px; }
.cs-thumb-x:hover { background: rgba(15,23,42,0.9); }
.cs-add { width: 92px; height: 92px; border-radius: var(--r); border: 2px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--alice-strong); background: var(--alice-tint, #f6f2ff); font-size: 12px; font-weight: 600; text-align: center; }
.cs-add .icon { width: 20px; height: 20px; }
.cs-add:hover { border-color: var(--alice, #a78bfa); }
.cs-add--empty { width: 100%; height: 110px; flex-direction: row; gap: 8px; }

/* 2026-05-31 Photo -> Booking Details: thumbnail strip in the booking/lead sheet + lightbox. */
.bk-photos { margin: 4px 0 16px; }
.bk-photos-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.bk-photos-head .icon { width: 14px; height: 14px; color: var(--alice-strong, #7c5cd6); }
.bk-photos-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bg-2); color: var(--muted); font-size: 11px; }
.bk-photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-photo-thumb { position: relative; width: 76px; height: 76px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); padding: 0; cursor: pointer; transition: transform .14s var(--ease-premium), box-shadow .14s var(--ease-premium), border-color .14s var(--ease-premium); }
.bk-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-photo-thumb:hover { transform: translateY(-1px); border-color: var(--alice, #a78bfa); box-shadow: 0 6px 16px rgba(15,23,42,0.14); }
.bk-photo-thumb:focus-visible { outline: 2px solid var(--alice, #a78bfa); outline-offset: 2px; }

.bk-lightbox { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; }
.bk-lightbox-scrim { position: absolute; inset: 0; background: rgba(15,23,42,0.82); animation: bkLightboxFade .16s var(--ease-premium); }
.bk-lightbox-stage { position: relative; max-width: 92vw; max-height: 88vh; display: grid; place-items: center; animation: bkLightboxPop .2s var(--ease-premium); }
.bk-lightbox-stage img { max-width: 92vw; max-height: 88vh; border-radius: var(--r); box-shadow: 0 24px 60px rgba(0,0,0,0.5); display: block; }
.bk-lightbox-x { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 999px; border: none; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
.bk-lightbox-x .icon { width: 18px; height: 18px; }
.bk-lightbox-x:hover { background: var(--bg-2); }
@keyframes bkLightboxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bkLightboxPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* 2026-05-31 Diary ↻ resync button (calendar header). Glyph spins while loading. */
.diary-resync-btn { gap: 5px; }
.diary-resync-glyph { display: inline-block; font-size: 15px; line-height: 1; }
.diary-resync-btn.is-loading { opacity: .8; }
.diary-resync-btn.is-loading .diary-resync-glyph { animation: diaryResyncSpin .8s linear infinite; }
@keyframes diaryResyncSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .diary-resync-btn.is-loading .diary-resync-glyph { animation: none; } }

/* ------------------------------------------------------------------ INBOX (conversations) 2026-05-31 */
.cv-stack { gap: 8px; }
/* List card — built on .row; an unread card gets a soft Alice tint + accent rail. */
.cv-row { align-items: flex-start; }
.cv-row .grow { display: flex; flex-direction: column; gap: 2px; }
.cv-row-top { display: flex; align-items: center; gap: 8px; }
.cv-row-top .title { flex: 1; min-width: 0; }
.cv-avatar { background: var(--alice); }
.cv-avatar .icon { color: #fff; }
.cv-avatar--lg { width: 46px; height: 46px; }
/* SR-01 B4 (#9): UNREAD = a soft glow in the conversation's OWN type colour (red=urgent, blue=booking request,
   green=booking, amber=missed, grey=visitor…). Read tiles stay flat. --glow is set by .cv-row--{type} below. */
.cv-row--unread {
  background: #fff;
  border-color: color-mix(in srgb, var(--glow, var(--alice)) 45%, var(--line));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--glow, var(--alice)) 38%, transparent),
              0 0 18px 2px color-mix(in srgb, var(--glow, var(--alice)) 42%, transparent);
  animation: cv-glow-pulse 3.2s var(--ease-premium, ease-in-out) infinite;
}
.cv-row--unread .title { font-weight: 800; }
@keyframes cv-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--glow, var(--alice)) 34%, transparent),
                          0 0 14px 1px color-mix(in srgb, var(--glow, var(--alice)) 34%, transparent); }
  50%      { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--glow, var(--alice)) 46%, transparent),
                          0 0 22px 3px color-mix(in srgb, var(--glow, var(--alice)) 56%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .cv-row--unread { animation: none; } }
.cv-dot { flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--glow, var(--alice)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow, var(--alice)) 22%, transparent); }
.cv-summary {
  font-size: 13px; color: var(--ink-2); margin-top: 2px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.cv-row--unread .cv-summary { color: var(--ink); }

/* SR-01 B4 (#6): colour-code Inbox tiles by intent — left-border stripe + a labelled chip (colour-blind safe). */
/* Each type also sets --glow so the #9 unread glow (above) automatically matches the type colour. */
.cv-row { border-left: 5px solid transparent; }
.cv-row--booking { border-left-color: #16a34a; --glow: #16a34a; }
.cv-row--request { border-left-color: #3b82f6; --glow: #3b82f6; }
.cv-row--missed  { border-left-color: #f59e0b; --glow: #f59e0b; }
.cv-row--urgent  { border-left-color: #dc2626; --glow: #dc2626; }
.cv-row--private { border-left-color: #7c3aed; --glow: #7c3aed; }
.cv-row--visitor { border-left-color: #94a3b8; --glow: #94a3b8; }
.cv-row--transfer{ border-left-color: #4f46e5; --glow: #4f46e5; }
.cv-row--test    { border-left-color: #cbd5e1; --glow: #94a3b8; }
.cv-type { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; flex: none; }
.cv-type--booking { background: #dcfce7; color: #15803d; }
.cv-type--request { background: #dbeafe; color: #1d4ed8; }
.cv-type--missed  { background: #fef3c7; color: #b45309; }
.cv-type--urgent  { background: #fee2e2; color: #b91c1c; }
.cv-type--private { background: #ede9fe; color: #6d28d9; }
.cv-type--visitor { background: #f1f5f9; color: #475569; }
.cv-type--transfer{ background: #e0e7ff; color: #4338ca; }
.cv-type--test    { background: #f1f5f9; color: #64748b; }
/* SR-01 (Jase 2026-06-08): extended type taxonomy — stripe + --glow + chip for the new intents. */
.cv-row--reschedule { border-left-color: #0d9488; --glow: #0d9488; }
.cv-row--cancel     { border-left-color: #e11d48; --glow: #e11d48; }
.cv-row--quote      { border-left-color: #0891b2; --glow: #0891b2; }
.cv-row--callback   { border-left-color: #f97316; --glow: #f97316; }
.cv-row--general    { border-left-color: #64748b; --glow: #64748b; }
.cv-type--reschedule { background: #ccfbf1; color: #0f766e; }
.cv-type--cancel     { background: #ffe4e6; color: #be123c; }
.cv-type--quote      { background: #cffafe; color: #0e7490; }
.cv-type--callback   { background: #ffedd5; color: #c2410c; }
.cv-type--general    { background: #f1f5f9; color: #475569; }

/* SR-01 B4 (#8): Inbox filter bar — search + Type chips + From (channel) chips. Horizontal-scroll on mobile. */
.cv-filters { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 12px; }
/* Jase 2026-06-08: wrap so ALL pills stay visible (no right-edge clipping of Message/Transfer/…). */
.cv-chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 2px; align-items: center; }
.cv-chip-row .chip { flex: none; }
.cv-chip-lead { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; align-self: flex-start; line-height: 30px; flex: none; padding-right: 2px; }
.cv-chip-count { opacity: .55; font-weight: 800; margin-left: 4px; }

/* SR-01 (Jase 2026-06-08): Inbox Type pills — all 13 shown always, each bordered in its type colour
   (mirrors the tile stripe), GLOWING when that type has unread items. Empty types fade back but stay
   listed. The Voice/Chat "From" pills are intentionally left plain (no glow). */
.cv-chip--booking    { border-color: #16a34a; --chip-glow: #16a34a; }
.cv-chip--request    { border-color: #3b82f6; --chip-glow: #3b82f6; }
.cv-chip--reschedule { border-color: #0d9488; --chip-glow: #0d9488; }
.cv-chip--cancel     { border-color: #e11d48; --chip-glow: #e11d48; }
.cv-chip--quote      { border-color: #0891b2; --chip-glow: #0891b2; }
.cv-chip--urgent     { border-color: #dc2626; --chip-glow: #dc2626; }
.cv-chip--callback   { border-color: #f97316; --chip-glow: #f97316; }
.cv-chip--missed     { border-color: #f59e0b; --chip-glow: #f59e0b; }
.cv-chip--general    { border-color: #64748b; --chip-glow: #64748b; }
.cv-chip--transfer   { border-color: #4f46e5; --chip-glow: #4f46e5; }
.cv-chip--private    { border-color: #7c3aed; --chip-glow: #7c3aed; }
.cv-chip--visitor    { border-color: #94a3b8; --chip-glow: #94a3b8; }
.cv-chip--test       { border-color: #cbd5e1; --chip-glow: #94a3b8; }
/* zero-count types: keep their colour but recede so populated/unread ones pop */
.cv-chip--empty { opacity: .5; }
/* unread in this type → the pill glows in its own colour (pulsing) */
.cv-chip--glow {
  border-color: var(--chip-glow, var(--brand));
  animation: cv-chip-pulse 2.1s ease-in-out infinite;
}
/* the unread number is the point now — keep it crisp (not the faint .55 used for channel totals) */
.cv-chip--glow .cv-chip-count { opacity: 1; }
@keyframes cv-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--chip-glow, var(--brand)) 34%, transparent),
                         0 0 9px 1px color-mix(in srgb, var(--chip-glow, var(--brand)) 32%, transparent); }
  50%      { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--chip-glow, var(--brand)) 50%, transparent),
                         0 0 16px 2px color-mix(in srgb, var(--chip-glow, var(--brand)) 58%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .cv-chip--glow { animation: none; } }

/* Unread-glow preview (only shown when there are no real unread items). Clearly a sample. */
.cv-preview-h { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.cv-preview-h::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.cv-sample { cursor: default; }
.cv-sample-badge { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #fffbeb; color: #b45309; border: 1px solid #fde68a; flex: none; }
/* even gap between the sample group and the first real card (real cards use .stack > *+* = 10px) */
.cv-sample-stack { margin-bottom: 10px; }
/* SR-01 B4 (#8): blocked-number state on the Call/SMS/Block action row. */
.contact-actions .is-blocked { background: var(--warn-tint); color: var(--warn); }
/* SR-01 #18: collapsible blocked-numbers manage list (Name + number; scrolls so 100 entries never explode). */
.vcfg-blocked { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.vcfg-blocked > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; font-size: 14px; list-style: none; display: flex; align-items: center; gap: 6px; }
.vcfg-blocked > summary::-webkit-details-marker { display: none; }
.vcfg-blocked > summary::before { content: '▸'; color: var(--faint); transition: transform .15s ease; }
.vcfg-blocked[open] > summary::before { transform: rotate(90deg); }
.vcfg-blocked-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 10px; max-height: 300px; overflow-y: auto; }
.vcfg-blocked-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--bg-2); }
.vcfg-blocked-row .grow { display: flex; flex-direction: column; min-width: 0; }
.vcfg-blocked-name { font-weight: 600; font-size: 14px; }
.vcfg-blocked-num { font-size: 12px; color: var(--muted); }
.vcfg-blocked-empty { font-size: 13px; color: var(--muted); padding: 2px 0; }
/* SR-01 #8: conversation manage row (Archive / Delete) in the detail sheet. */
.cv-manage { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cv-delete-btn { color: #dc2626; }
.cv-delete-btn:hover { background: #fee2e2; }

/* Detail sheet header */
.cv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cv-head .grow { min-width: 0; }
.cv-head-name { font-weight: 700; font-size: 17px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-head-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cv-recording { margin: 0 0 14px; }

/* Transcript bubbles — light-mode (the chat-widget look, on a white sheet). */
.cv-thread { display: flex; flex-direction: column; gap: 8px; }
.cv-bubble { max-width: 86%; display: flex; flex-direction: column; gap: 3px; }
.cv-bubble-who { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.cv-bubble-body { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.cv-bubble--alice { align-self: flex-start; align-items: flex-start; }
.cv-bubble--alice .cv-bubble-body { background: var(--alice-tint); color: var(--alice-strong); border-bottom-left-radius: 5px; }
.cv-bubble--cust { align-self: flex-end; align-items: flex-end; }
.cv-bubble--cust .cv-bubble-body { background: var(--brand-tint); color: var(--ink); border-bottom-right-radius: 5px; }
.cv-bubble--sys { align-self: center; align-items: center; }
.cv-bubble--sys .cv-bubble-body { background: var(--bg-2); color: var(--muted); font-size: 12.5px; }
.cv-voice-text { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }

/* Lazy-load spinner (mirrors .cs-spin but tinted for the light sheet) */
.cv-loading { display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--muted); font-size: 14px; }
.cv-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--alice); border-radius: 999px; animation: cs-spin .7s linear infinite; flex: none; }

.cs-notes { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); font-size: 14.5px; line-height: 1.5; background: #fff; color: var(--ink); font-family: inherit; resize: vertical; }
.cs-notes:focus-visible { outline: 2px solid var(--alice); outline-offset: 1px; }
.cs-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); font-size: 15px; background: #fff; color: var(--ink); }
.cs-input:focus-visible { outline: 2px solid var(--alice); outline-offset: 1px; }

.cs-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.cs-generate { min-width: 180px; justify-content: center; }

/* Spinner for the generating state (human-paced) */
.cs-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 999px; animation: cs-spin 0.7s linear infinite; vertical-align: -3px; margin-right: 6px; }
@keyframes cs-spin { to { transform: rotate(360deg); } }

/* Results */
.cs-results { margin-top: 4px; }
.cs-field { margin-bottom: 14px; }
.cs-field:last-child { margin-bottom: 0; }
.cs-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cs-field-head .cs-label { margin: 0; }
.cs-copy { flex: none; }
.cs-stubnote { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: var(--alice-tint, #f6f2ff); color: var(--alice-strong, #6d28d9); font-size: 13px; margin-bottom: 14px; }
.cs-stubnote .icon { flex: none; margin-top: 1px; width: 16px; height: 16px; }

/* Carousel preview */
.cs-carousel { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.cs-slide { position: relative; flex: 0 0 auto; width: 168px; scroll-snap-align: start; }
.cs-slide-canvas { width: 168px; height: 210px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-2); display: block; box-shadow: var(--shadow-1); }
.cs-slide-num { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(15,23,42,0.6); padding: 2px 8px; border-radius: 999px; }

/* Footer actions */
.cs-foot { display: flex; gap: 10px; margin-top: 4px; }
.cs-foot .btn { flex: 1; justify-content: center; }
.cs-warn { margin-top: 14px; }

@media (max-width: 520px) {
  .cs-foot { flex-direction: column; }
  .cs-slide, .cs-slide-canvas { width: 150px; }
  .cs-slide-canvas { height: 188px; }
}
.connect-draft { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); font-size: 13.5px; line-height: 1.5; background: var(--bg-2); color: var(--ink-2); font-family: inherit; resize: vertical; }
.connect-link-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--r); background: #fff; }
.connect-link { flex: 1 1 auto; font-size: 12.5px; color: var(--alice-strong); word-break: break-all; }
.connect-sheet-fine { font-size: 13px; color: var(--muted); }

/* ---- Agency secure-access landing (?grant=) ---- */
.grant-wrap { min-height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px 48px; }
.grant-card { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 26px 24px; }
.grant-logo { display: block; border-radius: 12px; }
.grant-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.grant-from { font-size: 12.5px; font-weight: 700; color: var(--alice-strong); text-transform: uppercase; letter-spacing: .04em; }
.grant-head h1 { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.2; margin-top: 2px; }
.grant-lede { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; margin-bottom: 14px; }
.grant-reassure { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: var(--r); background: var(--alice-tint); color: var(--alice-strong); font-size: 14px; margin-bottom: 18px; }
.grant-reassure .icon { flex: none; margin-top: 2px; }
.grant-opts-label { font-weight: 700; color: var(--ink); font-size: 14.5px; margin-bottom: 10px; }
.grant-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.grant-opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; transition: border-color .2s var(--ease-premium), background .2s var(--ease-premium); }
.grant-opt:hover { border-color: var(--alice); }
.grant-opt--sel { border-color: var(--alice); background: var(--alice-tint); }
.grant-opt-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--alice-tint); color: var(--alice-strong); }
.grant-opt--sel .grant-opt-ic { background: #fff; }
.grant-opt-ic .icon { width: 20px; height: 20px; }
.grant-opt-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.grant-opt-body strong { color: var(--ink); font-size: 15px; }
.grant-opt-body span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.grant-opt-tick { width: 20px; flex: none; color: var(--alice); margin-top: 2px; }
.grant-go { margin-top: 2px; }
.grant-sec { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--muted); font-size: 12.5px; }
.grant-sec .icon { flex: none; width: 14px; height: 14px; }
.grant-card--done { text-align: center; }
.grant-card--done .grant-logo { margin: 0 auto 6px; }
.grant-badge { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-tint); color: var(--ok); display: grid; place-items: center; margin: 6px auto 12px; }
.grant-badge .icon { width: 36px; height: 36px; }
.grant-card--done h1 { font-size: 24px; font-weight: 800; color: var(--ink); }
.grant-card--done p { color: var(--ink-2); font-size: 15.5px; margin: 8px 0 4px; line-height: 1.55; }
.grant-card--done .grant-sec { justify-content: center; margin-top: 16px; }

/* audit error → Foundation upsell */
.audit-error-help { margin-top: 10px; }
.audit-foot--stack { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* ---- Publishing-access picker + builder tutorials (Website/Blog tiles + grant page) ---- */
.connect-tabs { margin-bottom: 14px; }
.publish-label { font-weight: 700; color: var(--ink); font-size: 14.5px; margin: 14px 0 8px; }
.publish-steps-head { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--alice-strong); font-size: 14px; margin: 14px 0 4px; }
.publish-steps-head .icon { width: 16px; height: 16px; flex: none; }
.publish-howlink { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 2px; font-size: 14px; }
.builder-head { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.builder-head strong { color: var(--ink); }
.builder-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.builder-chip { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s var(--ease-premium), color .2s var(--ease-premium), border-color .2s var(--ease-premium); }
.builder-chip:hover { border-color: var(--alice); }
.builder-chip--sel { background: var(--alice); color: #fff; border-color: var(--alice); }
.connect-sheet .grant-opt { margin-bottom: 8px; }

/* 3 mandatory publishing parts */
.publish-part { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 10px 0; background: #fff; }
.publish-part--done { border-color: var(--ok, #16a34a); background: var(--ok-tint, #f0fdf4); }
.publish-part-head { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.publish-part-no { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--alice-tint, #f3effe); color: var(--alice-strong, #6d28d9); font-size: 12.5px; font-weight: 700; }
.publish-part--done .publish-part-no { background: transparent; color: var(--ok, #16a34a); min-width: 0; }
.publish-part--done .publish-part-no .icon { width: 20px; height: 20px; }
.publish-part-head strong { font-weight: 700; color: var(--ink); }
.publish-part-foot { margin-top: 8px; }
.agency-mail-meta { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--ink-2); background: var(--bg-2, #f6f7f9); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.agency-mail-meta .icon { flex: none; margin-top: 1px; }

/* grant page reuses the picker */
.grant-picker { margin: 4px 0 6px; }
.grant-foot { margin-top: 6px; }
.grant-picker .grant-opt { width: 100%; margin-bottom: 8px; }
.grant-picker .builder-chips { margin-top: 6px; }

/* ---- Settings: staff (team login) view-only + standalone logout ---- */
.settings--staff { opacity: .55; pointer-events: none; filter: grayscale(0.3); }
.settings-logout { margin-top: 18px; }
.settings-logout .btn { pointer-events: auto; }

/* ---- Settings: collapsible groups + editable controls ---- */
.set-group > .gh { width: 100%; background: none; border: 0; cursor: pointer; }
.set-group > .gh .gh-chev { margin-left: auto; color: var(--faint); transition: transform .24s var(--ease-premium); }
.set-group[data-open="true"] > .gh .gh-chev { transform: rotate(90deg); }
.set-group[data-open="false"] > .set-list { display: none; }
.set-group > .gh:focus-visible { outline: 2px solid var(--alice); outline-offset: 2px; border-radius: 8px; }

.time-range { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.time-range > span { color: var(--muted); font-size: 13px; }
.time-range input[type="time"] { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 15px; }
.num-field { display: inline-flex; align-items: center; gap: 6px; }
.num-field input[type="number"] { width: 78px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 15px; text-align: right; }
.num-field > span { color: var(--muted); font-size: 13px; }
.svc-name { width: 100%; min-width: 120px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 15px; font-weight: 600; }
.svc-controls { display: inline-flex; align-items: center; gap: 8px; }
.iconbtn-sm { padding: 0 10px; }
.closed-add { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.closed-add input[type="date"] { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 15px; }
.time-range input:focus-visible, .num-field input:focus-visible, .svc-name:focus-visible, .closed-add input:focus-visible { outline: 2px solid var(--alice); outline-offset: 1px; }

/* onboarding step-1: who looks after your website? */
.ob-manager { margin: 16px 0 6px; text-align: left; }
.ob-manager-q { font-weight: 700; color: var(--ink); margin-bottom: 8px; font-size: 15px; }
.ob-manager .manager-pills { gap: 8px; }
.ob-manager-hint { color: var(--muted); font-size: 13px; margin-top: 8px; }

/* ---- Website audit panel (Connect Hub) ---- */
.audit-panel { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); margin-bottom: 18px; }
.audit-head h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--ink); }
.audit-head h3 .icon { color: var(--alice-strong); }
.audit-head p { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.audit-input { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.audit-input input { flex: 1 1 200px; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); font-size: 15px; background: #fff; }
.audit-input input:focus-visible { outline: 2px solid var(--alice); outline-offset: 1px; }
.audit-loading { margin-top: 14px; color: var(--alice-strong); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.audit-error { margin-top: 14px; color: var(--warn); background: var(--warn-tint); border: 1px solid var(--warn-line); border-radius: var(--r); padding: 12px; display: flex; align-items: center; gap: 8px; }
.audit-report { margin-top: 16px; }
.audit-overall { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.audit-overall-score { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; font-weight: 800; color: #fff; flex: none; }
.audit-overall-label strong { display: block; color: var(--ink); font-size: 16px; }
.audit-overall-label span { color: var(--muted); font-size: 13px; word-break: break-all; }
.audit-score { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px; font-weight: 800; font-size: 13px; color: #fff; }
.audit-score--ok { background: var(--ok); }
.audit-score--warn { background: var(--warn); }
.audit-score--low { background: #b91c1c; }
.audit-note { color: var(--ink-2); font-size: 13.5px; display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 14px; }
.audit-cats { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .audit-cats { grid-template-columns: 1fr 1fr; } }
.audit-cat { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--bg); }
.audit-cat-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.audit-fixes { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.audit-fixes li { margin: 4px 0; }
.audit-pass { color: var(--ok); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.audit-schema { margin-top: 14px; }
.audit-schema-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.audit-schema-head strong { color: var(--ink); }
.audit-schema-code { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); color: var(--ink-2); resize: vertical; }
.audit-faqs { margin-top: 14px; color: var(--ink-2); font-size: 14px; }
.audit-faqs ul { margin: 6px 0 0; padding-left: 18px; }
.audit-faqs li { margin: 4px 0; }
.audit-cta p { color: var(--ink-2); font-size: 13px; margin: 0; }

/* ---- Audit v2: grade, believable progress, plain-English issue cards ---- */
.audit-progress { margin-top: 16px; }
.audit-progress-top { display: flex; align-items: center; gap: 8px; color: var(--alice-strong); font-weight: 700; font-size: 15px; }
.audit-bar { margin-top: 10px; height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.audit-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--alice), #a78bfa); transition: width .6s var(--ease-premium); }
.audit-progress-sub { margin-top: 8px; color: var(--muted); font-size: 13px; }
.audit-grade { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 32px; font-weight: 800; color: #fff; flex: none; }
.audit-grade--A { background: var(--ok); }
.audit-grade--B { background: #16a34a; }
.audit-grade--C { background: var(--warn); }
.audit-grade--D { background: #ea580c; }
.audit-grade--F { background: #b91c1c; }
.audit-summary { color: var(--ink); font-size: 15px; font-weight: 600; margin: 4px 0 12px; }
.audit-fixbanner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--alice-tint); color: var(--alice-strong); font-size: 14px; margin-bottom: 14px; }
.audit-fixbanner .icon { flex: none; }
.audit-fixbanner strong { color: var(--alice-strong); }
.audit-cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--bg); }
.audit-cat-name { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.audit-issues { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.audit-issue { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r); padding: 12px 14px; background: var(--surface); }
.audit-issue--high { border-left-color: #b91c1c; }
.audit-issue--medium { border-left-color: var(--warn); }
.audit-issue--low { border-left-color: var(--line-2); }
.audit-issue-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.audit-sev { font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.audit-sev--high { background: #fef2f2; color: #b91c1c; }
.audit-sev--medium { background: var(--warn-tint); color: var(--warn); }
.audit-sev--low { background: var(--bg-2); color: var(--muted); }
.audit-alicefix { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--alice-strong); background: var(--alice-tint); padding: 3px 8px; border-radius: 999px; }
.audit-alicefix .icon { width: 13px; height: 13px; }
.audit-ownerfix { font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--bg-2); padding: 3px 8px; border-radius: 999px; }
.audit-issue-text { color: var(--ink-2); font-size: 14px; margin: 0; line-height: 1.5; }
.audit-cta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: block; }
.audit-cta .hint { color: var(--muted); font-size: 12.5px; margin-top: 8px; text-align: center; }
.audit-tech { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); padding: 2px 12px; }
.audit-tech summary { cursor: pointer; font-weight: 600; color: var(--ink-2); padding: 10px 0; display: flex; align-items: center; gap: 8px; }
.audit-tech .audit-schema-head { margin-top: 8px; }
.audit-foot { margin-top: 12px; text-align: center; }

/* ---- Audit popup modal: gauges, radar, live screenshot, evaluating bar ---- */
.audit-sheet { max-width: 720px; }
.audit-eval { padding: 16px 4px 30px; }
.audit-eval-bar { height: 14px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.audit-eval-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--alice), #a78bfa); transition: width .7s var(--ease-premium); }
.audit-eval-pct { margin-top: 10px; font-weight: 800; color: var(--ink); font-size: 15px; }
.audit-eval-msg { margin-top: 14px; display: flex; align-items: center; gap: 8px; color: var(--alice-strong); font-weight: 600; }
.audit-eval-sub { margin-top: 6px; color: var(--muted); font-size: 13px; }
.audit-hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.audit-hero-grade { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.audit-hero-rec { font-size: 12px; font-weight: 700; color: var(--warn); background: var(--warn-tint); padding: 4px 10px; border-radius: 999px; }
.audit-shot { flex: 1 1 230px; min-width: 190px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow-1); }
.audit-shot-bar { display: flex; gap: 5px; padding: 7px 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
.audit-shot-bar i { width: 9px; height: 9px; border-radius: 999px; background: var(--line); }
.audit-shot img { display: block; width: 100%; height: auto; }
.audit-shot--off { display: none; }
.audit-ring { display: flex; flex-direction: column; align-items: center; }
.audit-ring-svg { display: block; }
.audit-ring-track { fill: none; stroke: var(--bg-2); }
.audit-ring-arc { fill: none; animation: audit-ring-fill .9s var(--ease-premium) both; }
@keyframes audit-ring-fill { from { stroke-dashoffset: var(--circ); } }
.audit-ring { position: relative; }
.audit-ring-center { position: absolute; top: 0; left: 0; right: 0; height: 92px; display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.audit-ring--big .audit-ring-center { height: 132px; font-size: 46px; }
.audit-ring-label { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-top: 3px; }
.audit-ring--big .audit-ring-label { font-size: 13px; color: var(--muted); }
.audit-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; margin: 16px 0; justify-items: center; }
@media (max-width: 460px) { .audit-gauges { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.audit-radar-wrap { display: grid; place-items: center; margin: 6px 0 16px; }
.audit-radar { width: 200px; height: 200px; }
.audit-radar-grid { fill: none; stroke: var(--line); }
.audit-radar-axis { stroke: var(--line); }
.audit-radar-data { fill: color-mix(in srgb, var(--alice) 22%, transparent); stroke: var(--alice); stroke-width: 2; }
.audit-radar-label { font-size: 11px; font-weight: 700; fill: var(--ink-2); }
.audit-shot-cap { font-size: 11px; color: var(--muted); text-align: center; padding: 6px 8px; background: var(--bg); border-top: 1px solid var(--line); }
.audit-shot-cap .icon { width: 12px; height: 12px; vertical-align: -2px; }
/* AI visibility bars + honest disclaimer */
.audit-ai { margin: 8px 0 16px; }
.audit-ai-head { margin-bottom: 10px; }
.audit-ai-head strong { display: block; color: var(--ink); font-size: 15px; }
.audit-ai-head span { color: var(--muted); font-size: 12.5px; }
.ai-row { display: grid; grid-template-columns: 132px 1fr 60px; align-items: center; gap: 10px; margin: 7px 0; }
.ai-name { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ai-bar { position: relative; height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.ai-bar-fill, .ai-bar-pot { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; }
.ai-bar-pot { background: color-mix(in srgb, var(--alice) 32%, transparent); }
.ai-bar-fill { transition: width .8s var(--ease-premium); }
.ai-bar-fill--ok { background: var(--ok); }
.ai-bar-fill--warn { background: var(--warn); }
.ai-bar-fill--low { background: #dc2626; }
.ai-status { font-size: 11px; font-weight: 800; text-transform: uppercase; text-align: right; }
.ai-status--ok { color: var(--ok); }
.ai-status--warn { color: var(--warn); }
.ai-status--low { color: #b91c1c; }
.ai-status--pot { color: var(--alice-strong); }
.audit-disclaimer { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 14px; padding: 10px 12px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.audit-disclaimer .icon { flex: none; margin-top: 2px; }
@media (max-width: 460px) { .ai-row { grid-template-columns: 92px 1fr 50px; gap: 6px; } .ai-name { font-size: 12px; } }
/* centre the audit popup as a real modal on desktop (base .sheet is a bottom sheet).
   Use auto-margins (not transform) so the per-render inline transform:translateY(0) can't break centring. */
@media (min-width: 700px) {
  .sheet.audit-sheet {
    left: 0; right: 0; bottom: auto; top: 6vh;
    width: min(720px, calc(100vw - 48px)); margin-inline: auto;
    max-height: 88dvh; border-radius: var(--r-xl);
  }
}

/* embed snippet box — full width, readable, button below */
.embed-snippet-wrap { padding: 0 14px 14px; }
.embed-snippet-field { width: 100%; display: block; box-sizing: border-box; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); color: var(--ink-2); }


/* Carousel theme picker (Jase 2026-05-28 — added with the new Clean/Bold/Magazine slide themes). */
.cs-theme-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 14px; flex-wrap: wrap; }
.cs-theme-label { font: 600 12px/1.3 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-right: 4px; }
.cs-theme-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; font: 500 13px/1.2 Inter, system-ui, sans-serif; color: #475569; cursor: pointer; transition: all .15s ease; }
.cs-theme-chip:hover { border-color: #94a3b8; color: #1e293b; }
.cs-theme-chip--on { background: #0f9f8f; color: #fff; border-color: #0f9f8f; }

/* Ad brief result block (Zeely-style). */
.cs-ad-result { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e2e8f0; display: flex; flex-direction: column; gap: 10px; }
.cs-ad-hero { width: 100%; border-radius: 14px; overflow: hidden; background: #f1f5f9; }
.cs-ad-img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.cs-ad-intent { font: 400 13px/1.4 Inter, system-ui, sans-serif; color: #475569; }
.cs-ad-title { margin: 0; font: 800 22px/1.25 Inter, system-ui, sans-serif; color: #0f172a; }
.cs-ad-caption { margin: 0; font: 400 15px/1.5 Inter, system-ui, sans-serif; color: #1e293b; white-space: pre-wrap; }
.cs-ad-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-ad-tags > span { font: 500 12px/1.2 Inter, system-ui, sans-serif; padding: 4px 10px; background: #f1f5f9; color: #334155; border-radius: 999px; }


/* Self-serve Alice Voice number UI (Jase 2026-05-28). */
.voice-number-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, #f5f3ff 0%, #ecfeff 100%); border: 1px solid #ddd6fe; margin: 6px 0 12px; }
.voice-number-label { font: 600 11px/1.3 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: #6d28d9; }
.voice-number-big { font: 700 28px/1.2 Inter, system-ui, sans-serif; color: #0f172a; letter-spacing: 0.5px; }
.voice-copy-btn { margin-top: 4px; }
.voice-meta { font: 400 13px/1.55 Inter, system-ui, sans-serif; color: #475569; margin: 0 0 14px; }
.voice-meta strong { color: #0f172a; font-weight: 600; }
.voice-mode-row { margin: 14px 0 16px; }
.voice-mode-label { font: 600 12px/1.3 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 8px; }
.voice-mode-chip { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 10px 14px; margin-bottom: 6px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; transition: all .15s ease; text-align: left; }
.voice-mode-chip strong { font: 600 14px/1.3 Inter, system-ui, sans-serif; color: #0f172a; }
.voice-mode-chip span { font: 400 12px/1.4 Inter, system-ui, sans-serif; color: #64748b; margin-top: 2px; }
.voice-mode-chip:hover { border-color: #94a3b8; }
.voice-mode-chip--on { border-color: #7c3aed; background: #faf5ff; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12); }
.voice-mode-chip--on strong { color: #6d28d9; }
/* SPEC-04: approval-time staff allocation chooser */
.alloc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.alloc-opt { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; transition: all .15s ease; text-align: left; }
.alloc-opt:hover { border-color: #7c3aed; background: #faf5ff; }
.alloc-opt .alloc-name { font: 600 14px/1.3 Inter, system-ui, sans-serif; color: #0f172a; }
.alloc-opt .alloc-sub { font: 400 12px/1.4 Inter, system-ui, sans-serif; color: #64748b; margin-top: 2px; }
.alloc-opt--busy { opacity: .5; cursor: not-allowed; }
.alloc-opt--busy:hover { border-color: #e2e8f0; background: #fff; }
.alloc-opt--any { border-style: dashed; border-color: #c4b5fd; }
.alloc-opt--any .alloc-name { color: #6d28d9; }
/* Merge Deploy B: Alice's skilled+free pick highlighted; skilled badge; unskilled muted */
.alloc-opt--pick { border-color: #7c3aed; background: #faf5ff; box-shadow: inset 0 0 0 1px #7c3aed; }
.alloc-opt--pick .alloc-sub { color: #6d28d9; font-weight: 600; }
.alloc-opt--unskilled .alloc-name { color: #475569; }
.alloc-skill { display: inline-flex; vertical-align: middle; color: #16a34a; margin-left: 4px; }
.alloc-skill svg { width: 14px; height: 14px; }
/* Merged Services & pricing cards (name · time · price · scope · skilled staff) */
.svc-card { border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.svc-card-top { display: flex; align-items: center; gap: 10px; }
.svc-card-top .svc-name { flex: 1; min-width: 0; font: 600 14px/1.3 Inter, system-ui, sans-serif; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; }
.svc-card-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.svc-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px; }
.svc-field > span { font: 600 11px/1.2 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.svc-field input { border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; font: 400 14px/1.3 Inter, system-ui, sans-serif; width: 100%; }
.svc-field--price { max-width: 340px; }
.svc-price-wrap { display: flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 9px; padding-left: 10px; }
.svc-price-wrap .svc-price-prefix { color: #64748b; font-weight: 600; }
.svc-price-wrap input { border: none; padding: 8px; width: 62px; }
.svc-price-wrap .svc-price-to { color: #64748b; font-weight: 600; padding: 0 2px 0 8px; white-space: nowrap; }
.svc-price-hint { display: block; margin-top: 5px; font-size: 11.5px; color: #94a3b8; line-height: 1.35; }
.svc-card-staff { flex-direction: column; align-items: flex-start; gap: 6px; }
.svc-staff-label { font: 600 11px/1.2 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.svc-staff-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-staff-chip { border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 999px; padding: 5px 12px; font: 500 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: all .12s ease; }
.svc-staff-chip:hover { border-color: #94a3b8; }
.svc-staff-chip--on { background: #faf5ff; border-color: #7c3aed; color: #6d28d9; }
.svc-add-row { margin-top: 4px; }
/* Reliable Save bar — sticky to the bottom of Settings (the explicit, awaited save) */
.settings-savebar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px -4px 4px; padding: 12px 16px; border-radius: 14px; border: 1px solid #e2e8f0; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); box-shadow: 0 -2px 16px rgba(15,23,42,.06); }
.settings-savebar-note { font: 500 13px/1.35 Inter, system-ui, sans-serif; color: #64748b; }
.settings-savebar-btn { flex: 0 0 auto; }
.settings-savebar--dirty { border-color: #fcd34d; background: rgba(255,251,235,.97); }
.settings-savebar--dirty .settings-savebar-note { color: #92400e; }
.settings-savebar--ok { border-color: #86efac; background: rgba(240,253,244,.97); }
.settings-savebar--ok .settings-savebar-note { color: #166534; }
.settings-savebar--err { border-color: #fca5a5; background: rgba(254,242,242,.97); }
.settings-savebar--err .settings-savebar-note { color: #b91c1c; }
.voice-forward-block { margin: 16px 0 8px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
.voice-forward-label { font: 600 13px/1.3 Inter, system-ui, sans-serif; color: #0f172a; margin-bottom: 6px; }
.voice-forward-hint { font: 400 12px/1.55 Inter, system-ui, sans-serif; color: #64748b; margin: 0 0 10px; }
.voice-forward-hint code { font: 600 12px Menlo, monospace; background: #f1f5f9; padding: 1px 6px; border-radius: 4px; color: #0f172a; }
.voice-fwd-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.voice-fwd-chip { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; transition: all .15s ease; text-align: left; }
.voice-fwd-chip strong { font: 600 12px/1.3 Inter, system-ui, sans-serif; color: #0f172a; }
.voice-fwd-chip span { font: 600 13px Menlo, monospace; color: #475569; margin-top: 2px; letter-spacing: 0.3px; }
.voice-fwd-chip:hover { border-color: #7c3aed; background: #faf5ff; }
.connect-bullets { list-style: none; padding: 0; margin: 10px 0 6px; }
.connect-bullets li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font: 400 13px/1.4 Inter, system-ui, sans-serif; color: #1e293b; }
.connect-bullets li svg { color: #7c3aed; flex-shrink: 0; }

/* Front Desk chip-list + Client memory rows (Settings) */
.vcfg-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; }
.vcfg-chips input[type="text"] { flex: 1 1 160px; min-width: 140px; border: 1px solid #e2e8f0; border-radius: 999px; padding: 6px 12px; font: 400 13px/1.3 Inter, system-ui, sans-serif; background: #fff; }
.vcfg-chips input[type="text"]:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.vcfg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; background: rgba(124, 58, 237, .08); color: #5b21b6; border: 1px solid rgba(124, 58, 237, .25); border-radius: 999px; font: 500 12px/1.2 Inter, system-ui, sans-serif; }
.vcfg-chip-x { background: transparent; border: 0; padding: 2px; color: inherit; cursor: pointer; display: inline-flex; align-items: center; }
.vcfg-chip-x:hover { color: #1e293b; }

.cli-stack { display: flex; flex-direction: column; gap: 10px; padding: 8px 4px 4px; }
.cli-row { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.cli-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cli-line input[type="text"] { flex: 1 1 140px; min-width: 120px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 10px; font: 400 13px/1.3 Inter, system-ui, sans-serif; background: #fafafa; }
.cli-line input[type="text"]:focus { outline: none; border-color: #7c3aed; background: #fff; box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.cli-line--top { gap: 10px; }
.cli-line--top input[type="text"] { background: #fff; font-weight: 500; }
.cli-vip { background: transparent; border: 1px solid #e2e8f0; width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; cursor: pointer; }
.cli-vip[aria-pressed="true"] { background: #fef3c7; color: #b45309; border-color: #fbbf24; }
.cli-vip:hover { color: #1e293b; }

/* "Added by Alice" chip — contacts Alice auto-saved from a call/chat (2026-05-30). */
.cli-added-chip { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; height: 26px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--alice-tint, #f3e8ff); color: var(--alice-strong, #6d28d9); border: 1px solid rgba(124, 58, 237, .22); }
.cli-added-chip svg { width: 13px; height: 13px; }

/* Client memory: actions row (Import + Add) */
.cli-actions { display: flex; gap: 8px; align-items: center; align-self: flex-start; flex-wrap: wrap; margin-top: 8px; }
.cli-import-btn { position: relative; cursor: pointer; }
.cli-import-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Import help: per-OS dropdowns (iPhone / Android / Other apps) — native <details> (#1+#2, 2026-06-08) */
.cli-os { border: 1px solid var(--line, #e2e8f0); border-radius: 10px; margin-top: 6px; overflow: hidden; background: var(--surface, #fff); }
.cli-os > summary { list-style: none; cursor: pointer; padding: 9px 12px; font-weight: 600; color: var(--ink, #0f172a); display: flex; align-items: center; gap: 8px; -webkit-user-select: none; user-select: none; }
.cli-os > summary::-webkit-details-marker { display: none; }
.cli-os > summary::before { content: "\25B8"; color: var(--muted, #64748b); font-size: 12px; transition: transform .15s ease; }
.cli-os[open] > summary::before { transform: rotate(90deg); }
.cli-os > summary:hover { background: var(--bg, #f6f8fa); }
.cli-os ul { margin: 0; padding: 2px 14px 11px 32px; line-height: 1.6; }
.cli-os li { margin: 2px 0; }

/* ============== Locals — compact iPhone-style list + A–Z index + sort (#2/#3, 2026-06-08) ============== */
.loc-controls { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; }
.loc-sort { display: inline-flex; background: var(--bg-2, #eef2f6); border-radius: 999px; padding: 3px; gap: 2px; }
.loc-sort-k { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted, #64748b); cursor: pointer; white-space: nowrap; }
.loc-sort-k.is-on { background: var(--surface, #fff); color: var(--ink, #0f172a); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.loc-controls .btn { margin-left: auto; }

/* IMPORTANT: no overflow:hidden on .loc-list/.loc-wrap or the sticky letter headers break (sticky needs the
   scroll container — #screen — as its nearest scrolling ancestor, with no clipping ancestor in between). */
/* Flex rail layout: the list + a sticky A–Z column side by side. position:fixed was captured by a
   transformed ancestor (became 2580px tall / off-screen), so the index is STICKY to the scroll container. */
.loc-wrap { position: relative; display: flex; align-items: flex-start; }
.loc-list { flex: 1 1 auto; min-width: 0; }
.loc-sec-h { position: sticky; top: 0; z-index: 2; background: var(--bg-2, #eef2f6); color: var(--muted, #64748b); font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 4px 12px; }
.loc-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface, #fff); border: 0; border-bottom: 1px solid var(--line-2, #eef2f6); padding: 8px 12px; cursor: pointer; }
.loc-row:hover, .loc-row:active { background: var(--bg, #f6f8fa); }
.loc-av { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, #a5b4fc, #818cf8); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; overflow: hidden; }
.loc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-name { font-size: 15px; font-weight: 500; color: var(--ink, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* #0b (Jase 2026-06-09): per-contact blocked marker in the Locals list (at-a-glance). */
.loc-blocked { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; color: #b91c1c; opacity: .85; }
.loc-blocked svg { width: 15px; height: 15px; }
.loc-row.is-blocked .loc-av { filter: grayscale(.45); opacity: .7; }
.loc-row.is-blocked .loc-name { color: var(--muted, #64748b); }
/* Jase 2026-06-09: small grey "Added X ago" pushed to the right of the row (built from createdAt). */
.loc-when { flex: 0 0 auto; margin-left: auto; padding-left: 10px; font-size: 11px; color: var(--muted, #64748b); white-space: nowrap; }
.loc-row.is-blocked .loc-when { margin-left: auto; }
.loc-when + .loc-blocked { margin-left: 8px; }

.loc-az { position: sticky; top: 54px; align-self: flex-start; flex: 0 0 auto; height: calc(100dvh - 120px); display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 6px 2px; z-index: 5; touch-action: none; -webkit-user-select: none; user-select: none; }
.loc-az-k { border: 0; background: transparent; color: var(--alice-strong, #6d28d9); font-size: 11.5px; line-height: 1; font-weight: 700; padding: 2px 6px; cursor: pointer; }
.loc-az-k.is-empty { color: var(--line, #cbd5e1); }

/* ============== Locate Team + suburb chips + reminders + team config ============== */

/* Suburb chip on Day View staff column heads */
.staff-suburb-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  background: rgba(124, 58, 237, .10); color: #6d28d9;
  font: 600 11px/1 system-ui; white-space: nowrap;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.staff-suburb-chip .icon { width: 12px; height: 12px; }

/* Locate Team button (next to Talk to Alice) */
.locate-team-btn { gap: 6px; }
.locate-team-btn .icon { width: 14px; height: 14px; }

/* Map sheet */
/* Locate Team staff-face map markers (Codex pivot Round 5) */
.tl-pin-divicon { background: transparent; border: 0; }
.tl-pin-shell { position: relative; width: 44px; height: 58px; }
.tl-pin-face {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--staff, #7c3aed);
  color: #fff;
  font: 700 14px/1 system-ui;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .25);
  position: absolute; top: 2px; left: 2px;
  overflow: hidden;
}
.tl-pin-face img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.tl-pin-tail {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid var(--staff, #7c3aed);
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .25));
}

.tl-sheet { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; }
@media (min-width: 700px) { .tl-sheet { align-items: center; justify-content: center; } }
.tl-scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.tl-card {
  position: relative; z-index: 1;
  background: #fff; border-radius: 18px 18px 0 0; width: 100%; max-width: 760px;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, .25);
  display: flex; flex-direction: column; max-height: 92vh; overflow: hidden;
}
@media (min-width: 700px) { .tl-card { border-radius: 18px; } }
.tl-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid #e2e8f0; background: #f8fafc;
}
.tl-head strong { font: 700 15px system-ui; color: #1e293b; display: inline-flex; align-items: center; gap: 6px; }
.tl-close-btn { background: none; border: 0; cursor: pointer; color: #475569; padding: 4px; }
.tl-body { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 760px) { .tl-body { grid-template-columns: 1.4fr 1fr; } }
.tl-map { background: #e2e8f0; height: 320px; }
.tl-side { padding: 14px 16px; overflow-y: auto; max-height: 60vh; border-top: 1px solid #e2e8f0; }
@media (min-width: 760px) { .tl-side { border-top: 0; border-left: 1px solid #e2e8f0; } }
.tl-find { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tl-find .lbl { font: 600 13px system-ui; color: #1e293b; }
.tl-find-input { padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 9px; font: 400 14px system-ui; }
.tl-list-head { font: 600 12px system-ui; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.tl-staff-card {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 11px; background: #f8fafc; margin-bottom: 6px;
}
.tl-staff-card strong { font: 700 14px system-ui; color: #1e293b; }
.tl-staff-card span { font: 500 13px system-ui; color: #475569; }
.tl-staff-card .hint { font: 400 12px system-ui; color: #64748b; }
.tl-loading, .tl-error { padding: 26px; text-align: center; color: #475569; }
.tl-spinner {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid #e2e8f0; border-top-color: #7c3aed;
  margin: 0 auto 8px; animation: tl-spin 1s linear infinite;
}
@keyframes tl-spin { to { transform: rotate(360deg); } }

/* Customer reminders preview card */
.set-reminders-preview {
  margin: 6px 4px 4px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, #f5f3ff 0%, #eff6ff 100%);
  border: 1px solid #e9d5ff;
}
.set-reminders-preview .lbl { font: 600 12px system-ui; color: #6d28d9; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.set-reminders-preview .prev-body { font: 400 14px/1.45 system-ui; color: #1e293b; margin-bottom: 6px; }
.set-reminders-preview .hint { font: 400 12px system-ui; color: #64748b; }

/* Team & locations rows */
.team-stack { display: flex; flex-direction: column; gap: 6px; }
.team-row {
  display: grid; grid-template-columns: 36px 1fr auto auto; gap: 10px; align-items: center;
  padding: 9px 10px; border-radius: 12px; background: #f8fafc;
}
.team-row .staff-face { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: inline-block; }
.team-row .staff-face img { width: 100%; height: 100%; object-fit: cover; }
.team-row-main strong { font: 700 14px system-ui; color: #1e293b; }
.team-row-main .hint { font: 400 12px system-ui; color: #64748b; }
.team-status {
  font: 600 11px system-ui; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.team-status--live { background: rgba(13, 148, 136, .15); color: #0f766e; }
.team-status--idle { background: rgba(100, 116, 139, .15); color: #475569; }
.team-status--off  { background: rgba(15, 23, 42, .08); color: #334155; }

/* Tri-state cs-tog (Default / On / Off) — extends existing .cs-tog */
.cs-tog--tri { min-width: 70px; }

/* Settings dropdown (matches input field aesthetic) */
.set-select {
  padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 9px;
  font: 400 14px system-ui; background: #fff; color: #1e293b; min-width: 180px;
}

/* Calendar z-index stack (2026-05-28 Jase pass):
   - Block slots (sd-block, wg-event.block) -> bottom (z-index 1)
   - Lunch bands -> just above blocks
   - Standard bookings -> middle
   - Alice drafts / leads -> always on top
   Time grid + cells sit at z-index 0 implicitly. */
.sd-col, .wg-col { position: relative; }
.sd-block:not(.sd-lunch) { z-index: 1; }
.wg-event.block { z-index: 1; }
.sd-lunch, .wg-lunch { z-index: 2; }
.sd-event:not(.state-draft):not(.lead),
.wg-event.booking:not(.state-draft) { z-index: 3; }
.sd-event.state-draft, .sd-event.lead,
.wg-event.booking.state-draft, .wg-event.lead { z-index: 12; }

/* 3-day / Week warning tip (Heads up team-wide changes) */
.cal-tip--warn {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  color: #92400e;
}
.cal-tip--warn .icon { color: #b45309; }
.cal-tip--warn strong { color: #78350f; }

/* Customer reminder card (Activity → Reminders to send) — Alice drafts, you send */
.reminder-card { background: #eff6ff; border-color: #bfdbfe; border-left: 3px solid #3b82f6; }
.reminder-card .head .avatar.alice { background: linear-gradient(135deg, var(--alice, #7c3aed), var(--brand, #0d9488)); }
/* Activity colour-coding (start 2026-06-07): reminders = blue (whole card). Other activity types to follow. */
.section-h--reminders h2 { font-size: 16px; color: #1d4ed8; }
.section-h--reminders .count-tag { font-size: 14px; font-weight: 700; color: #fff; background: #3b82f6; border-radius: 999px; padding: 1px 9px; min-width: 18px; text-align: center; }

/* Agency call-heads-up helper (Connect → Agency, after email prepared) */
.agency-call-helper {
  margin: 10px 0 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
}
.agency-call-head { display: flex; gap: 10px; align-items: flex-start; }
.agency-call-icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: #f59e0b; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.agency-call-icon .icon { width: 16px; height: 16px; }
.agency-call-helper strong { color: #78350f; font: 700 14px system-ui; display: block; margin-bottom: 2px; }
.agency-call-helper .hint { color: #92400e; font: 400 13px/1.4 system-ui; }
.agency-call-script summary {
  margin-top: 8px; cursor: pointer; color: #78350f; font: 600 13px system-ui;
  display: inline-flex; align-items: center; gap: 4px;
}
.agency-call-script-body {
  margin: 8px 0 6px; padding: 10px 12px;
  background: rgba(255, 255, 255, .7);
  border-radius: 8px;
  font: 400 13px/1.5 system-ui;
  color: #1e293b;
}
.cs-blog-soon { color: #6d28d9; }

/* ===== Send-to-App (2026-05-29 Codex pivot — Round 2 plain-English cards) ===== */
.set-input {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 12px;
  font: 400 14px system-ui;
  background: #fff;
  color: #0f172a;
  width: 100%;
  max-width: 100%;
}
.set-input:focus { outline: 2px solid #7c3aed; outline-offset: 0; border-color: #7c3aed; }

.s2a-intro {
  font: 400 14px/1.5 system-ui;
  color: #475569;
  background: #f8fafc;
  border-left: 4px solid #7c3aed;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 6px 0 16px;
}
.s2a-intro strong { color: #0f172a; }

/* Cards — clean full-width layout, no row() squashing */
.s2a-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s2a-card--primary {
  background: linear-gradient(180deg, #faf5ff 0%, #fff 60%);
  border-color: #ddd6fe;
  box-shadow: 0 1px 0 rgba(124, 58, 237, .06);
}
.s2a-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.s2a-card-head .grow { flex: 1; min-width: 0; }
.s2a-ic {
  width: 36px; height: 36px; flex: 0 0 36px;
  background: #f5f3ff;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #6d28d9;
}
.s2a-card--primary .s2a-ic { background: #ede9fe; }
.s2a-title { font: 700 15px/1.3 system-ui; color: #0f172a; }
.s2a-sub   { font: 400 13px/1.5 system-ui; color: #64748b; margin-top: 4px; }
.s2a-pill {
  font: 700 11px/1 system-ui;
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.s2a-pill--on  { background: #ecfdf5; color: #047857; }
.s2a-pill--off { background: #f1f5f9; color: #64748b; }
.s2a-card-body { display: flex; flex-direction: column; gap: 8px; }
.s2a-label {
  font: 600 12px/1 system-ui;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.s2a-input {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 11px 14px;
  font: 400 15px system-ui;
  background: #fff;
  color: #0f172a;
  width: 100%;
  max-width: 100%;
}
.s2a-input:focus { outline: 2px solid #7c3aed; outline-offset: 0; border-color: #7c3aed; }
.s2a-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  flex-wrap: wrap;
}
.s2a-help {
  font: 600 13px/1 system-ui;
  color: #6d28d9;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.s2a-help:hover { text-decoration: underline; }

/* Auto-send toggle row */
.s2a-auto {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.s2a-auto-title { font: 700 14px/1.3 system-ui; color: #0f172a; }
.s2a-auto .grow { flex: 1; min-width: 0; }

/* Larger toggle for cards */
.cs-tog--lg { font: 700 13px system-ui; padding: 8px 16px; }

/* Test button — distinct from toggle */
.s2a-test-btn { background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe; }
.s2a-test-btn:hover:not(:disabled) { background: #ede9fe; }
.s2a-test-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Zapier button row */
.s2a-zap-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.s2a-zap-btn { background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe; }
.s2a-zap-btn:hover { background: #ede9fe; }

/* Advanced section — collapsible */
.s2a-advanced {
  margin-top: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fafbfc;
  overflow: hidden;
}
.s2a-advanced-head {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 700 14px system-ui;
  color: #0f172a;
  user-select: none;
}
.s2a-advanced-head::-webkit-details-marker { display: none; }
.s2a-advanced-head .hint { font: 400 12px system-ui; color: #64748b; flex: 1; text-align: right; }
.s2a-advanced-head::after {
  content: "▼";
  font-size: 10px;
  color: #94a3b8;
  margin-left: 8px;
  transition: transform .2s ease;
}
.s2a-advanced[open] .s2a-advanced-head::after { transform: rotate(180deg); }
.s2a-advanced-body { padding: 4px 14px 14px; }
.s2a-advanced-body .s2a-card { margin-top: 12px; }
.s2a-advanced-body .s2a-card:first-child { margin-top: 4px; }

@media (max-width: 600px) {
  .s2a-advanced-head .hint { display: none; }
  .s2a-card-actions { flex-direction: column; align-items: stretch; }
  .s2a-card-actions .cs-tog,
  .s2a-card-actions .s2a-test-btn { width: 100%; text-align: center; justify-content: center; }
}

/* ===== Import existing bookings wizard (2026-05-29 Codex pivot Round 2) ===== */
.ic-intro {
  font: 400 14px/1.55 system-ui;
  color: #475569;
  background: #f8fafc;
  border-left: 4px solid #7c3aed;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ic-intro strong { color: #0f172a; }
.ic-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font: 600 12px/1.4 system-ui;
  color: #b45309;
  background: #fffbeb;
  border-radius: 6px;
  padding: 6px 10px;
}
.ic-pick { display: flex; flex-direction: column; gap: 10px; }
.ic-source-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  font: inherit;
  color: #0f172a;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.ic-source-btn:hover { background: #faf5ff; border-color: #ddd6fe; }
.ic-source-btn:active { transform: scale(.99); }

/* Primary CTA variant — Sign in with Google (Round 6, Jase) */
.ic-source-btn--primary {
  background: linear-gradient(180deg, #faf5ff 0%, #fff 60%);
  border-color: #c4b5fd;
  box-shadow: 0 1px 0 rgba(124, 58, 237, .08);
}
.ic-source-btn--primary:hover { background: #ede9fe; border-color: #a78bfa; }
.ic-source-btn--primary .ic-source-ic {
  background: #7c3aed;
  color: #fff;
}
.ic-source-btn--primary strong { color: #5b21b6; }
.ic-source-btn strong { display: block; font: 700 15px system-ui; color: #0f172a; }
.ic-source-btn span { display: block; font: 400 13px/1.4 system-ui; color: #64748b; margin-top: 3px; }
.ic-source-ic {
  width: 44px; height: 44px; flex: 0 0 44px;
  background: #ede9fe;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #6d28d9;
}

.ic-howto-head { margin-bottom: 12px; }
.ic-howto-head strong { font: 700 16px/1.3 system-ui; color: #0f172a; }
.ic-howto-head .hint { margin-top: 6px; font: 400 13px/1.5 system-ui; color: #64748b; }
.ic-steps {
  list-style: decimal;
  padding-left: 22px;
  margin: 0 0 14px 0;
  font: 400 14px/1.6 system-ui;
  color: #1e293b;
}
.ic-steps li { margin: 6px 0; }
.ic-steps strong { color: #0f172a; }
.ic-doclink {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px system-ui;
  color: #6d28d9;
  text-decoration: none;
  margin-top: 6px;
}
.ic-doclink:hover { text-decoration: underline; }

.ic-paste { display: flex; flex-direction: column; gap: 10px; }
.ic-label {
  font: 600 12px/1 system-ui;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}
.ic-url-input {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 14px;
  font: 400 15px system-ui;
  background: #fff;
  color: #0f172a;
}
.ic-url-input:focus { outline: 2px solid #7c3aed; outline-offset: 0; border-color: #7c3aed; }
.ic-pasted-note { font: 400 12px/1.5 system-ui; color: #64748b; }
.ic-rule {
  margin-top: 8px;
  font: 400 13px/1.55 system-ui;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #0d9488;
  border-radius: 8px;
  padding: 12px 14px;
}
.ic-rule strong { color: #0f172a; }
.ic-rule em { color: #0d9488; font-style: normal; font-weight: 700; }

/* Calendar import FAQ — Pattern A industry-standard (Codex pivot Round 3) */
.ic-faq {
  margin-top: 10px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-left: 4px solid #7c3aed;
  border-radius: 8px;
  overflow: hidden;
}
.ic-faq > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font: 600 14px/1.3 system-ui;
  color: #5b21b6;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.ic-faq > summary::-webkit-details-marker { display: none; }
.ic-faq > summary::after {
  content: "▼";
  font-size: 10px;
  color: #a78bfa;
  margin-left: auto;
  transition: transform .2s ease;
}
.ic-faq[open] > summary::after { transform: rotate(180deg); }
.ic-faq p {
  margin: 0 14px 10px;
  font: 400 13px/1.55 system-ui;
  color: #4c1d95;
}
.ic-faq p:first-of-type { margin-top: 4px; }
.ic-faq p strong { color: #5b21b6; }
.ic-faq-source {
  font: 600 12px/1.4 system-ui !important;
  color: #7c3aed !important;
  padding-top: 6px;
  border-top: 1px solid #e9d5ff;
  margin-top: 8px !important;
}

/* Helpful "use another path" notes on Import Calendar pick step (Round 5) */
.ic-other-note {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #0d9488;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  font: 400 13px/1.55 system-ui;
  color: #334155;
}
.ic-other-note strong { color: #0f172a; }
.ic-other-note + .ic-other-note { margin-top: 8px; }

/* External calendar busy slots (Round 5 — Google Calendar import). Distinct from
   owner-set Blocks (red) and Lunch (amber). Gray-blue, with a calendar icon. */
.sd-block--external {
  background: repeating-linear-gradient(45deg, #eef2f6, #eef2f6 8px, #dbe3ec 8px, #dbe3ec 16px) !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
.sd-block--external .icon { color: #64748b; }
/* Same gray external style for 3-day/Week view (Jase 2026-06-03: GCal busy should be grey there too). */
.wg-event.block--external {
  background: repeating-linear-gradient(45deg, #eef2f6, #eef2f6 8px, #dbe3ec 8px, #dbe3ec 16px) !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
.wg-event.block--external .slot-label, .wg-event.block--external .slot-time { color: #475569; }
.wg-event.block--external .icon { color: #64748b; }

/* Recurring weekly blocks (2026-06-04): READ-ONLY on the calendar (managed in Settings → When you're open).
   Violet repeating stripe + default cursor so it reads as "scheduled / not draggable". */
.sd-block--recurring, .wg-event.block.block--recurring {
  background: repeating-linear-gradient(45deg, #f5f3ff, #f5f3ff 8px, #ede9fe 8px, #ede9fe 16px) !important;
  border-color: #ddd6fe !important;
  color: #6d28d9 !important;
  cursor: default !important;
}
.sd-block--recurring .slot-label, .wg-event.block--recurring .slot-label,
.sd-block--recurring .slot-time, .wg-event.block--recurring .slot-time { color: #6d28d9; }
.set-recur-list { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 10px; }
.set-recur-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f8f7ff; border: 1px solid #ece9fb; border-radius: 10px; font-size: 14px; }
.set-recur-row .srr-when { font-weight: 700; color: #4c1d95; min-width: 128px; }
.set-recur-row .srr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-recur-row .srr-who { font-size: 12px; color: #6b7280; }
.set-recur-row .srr-del { margin-left: auto; border: none; background: none; color: #9ca3af; cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 16px; line-height: 1; }
.set-recur-row .srr-del:hover { color: #dc2626; background: #fef2f2; }
.set-recur-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.set-recur-add select, .set-recur-add input[type="time"], .set-recur-add input.srr-reason { padding: 7px 8px; border: 1px solid #d8dde5; border-radius: 8px; font-size: 14px; }
.set-recur-add input.srr-reason { flex: 1; min-width: 120px; }

.ic-done {
  display: flex; align-items: center; gap: 14px;
  background: #ecfdf5;
  border-radius: 12px;
  padding: 18px;
  color: #064e3b;
}
.ic-done svg { color: #047857; }
.ic-done strong { display: block; font: 700 16px system-ui; }
.ic-done span { display: block; font: 400 13px/1.5 system-ui; color: #065f46; margin-top: 4px; }

/* Calendar topbar — import button */
.import-cal-btn { background: #f0fdf4; color: #065f46; border: 1px solid #bbf7d0; }
.import-cal-btn:hover { background: #dcfce7; }

/* Pattern A tip on Day view */
.cal-tip--pattern {
  background: #faf5ff;
  border-left: 3px solid #7c3aed;
  color: #4c1d95;
}
.cal-tip--pattern strong { color: #5b21b6; }

/* Call recording & transcript — bring-your-own-storage (Codex pivot Round 2) */
.call-record {
  background: #fafbfc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-top: 14px;
  overflow: hidden;
}
.call-record-head {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 14px system-ui;
  color: #0f172a;
  user-select: none;
}
.call-record-head::-webkit-details-marker { display: none; }
.call-record-head .hint {
  font: 400 12px system-ui;
  color: #64748b;
  margin-left: auto;
}
.call-record-head::after {
  content: "▼";
  font-size: 10px;
  color: #94a3b8;
  margin-left: 4px;
  transition: transform .2s ease;
}
.call-record[open] .call-record-head::after { transform: rotate(180deg); }
.call-record-body { padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.call-transcript {
  background: #f5f3ff;
  border-left: 3px solid #7c3aed;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
}
.call-transcript-head {
  font: 600 12px system-ui;
  color: #5b21b6;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.call-transcript-head .hint { font-weight: 400; color: #7c3aed; }
.call-transcript-body {
  font: 400 13px/1.55 system-ui;
  color: #1e293b;
  white-space: pre-wrap;
}
.ob-modrow--soon {
  background: #fffbeb;
  border-color: #fde68a;
}
.ob-modrow--soon strong { color: #92400e; }

/* ===== Calendar mega-group (Codex pivot Round 3) ===== */
.cal-mega-intro {
  font: 400 14px/1.5 system-ui;
  color: #475569;
  background: #f8fafc;
  border-left: 4px solid #7c3aed;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 4px 0 14px;
}
.cal-mega-intro strong { color: #0f172a; }
.cal-sub-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 10px;
}
.cal-sub-card--primary {
  background: linear-gradient(180deg, #faf5ff 0%, #fff 60%);
  border-color: #ddd6fe;
}
.cal-sub-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.cal-sub-head .grow { flex: 1; min-width: 0; }
.cal-sub-body { display: flex; flex-direction: column; gap: 8px; }

.cal-sub {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.cal-sub-head-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}
.cal-sub-head-summary::-webkit-details-marker { display: none; }
.cal-sub-head-summary .grow { flex: 1; min-width: 0; }
.cal-sub-head-summary::after {
  content: "▼";
  font-size: 10px;
  color: #94a3b8;
  margin-left: 8px;
  transition: transform .2s ease;
}
.cal-sub[open] .cal-sub-head-summary::after { transform: rotate(180deg); }
.cal-sub--soon { background: #fffbeb; border-color: #fde68a; }
.cal-sub--soon .s2a-title { color: #92400e; }
.cal-sub-body { padding: 0 16px 16px; }

.cal-sub-intro {
  display: flex; align-items: center; gap: 8px;
  font: 400 13px/1.4 system-ui;
  color: #64748b;
  margin-bottom: 12px;
}
.cal-sub-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #f1f5f9;
}
.cal-sub-row:first-child { border-top: 0; }
.cal-sub-row .grow { flex: 1; min-width: 0; }
.cal-sub-row strong { font: 700 14px system-ui; color: #0f172a; }
.cal-sub-row .lbl { font: 600 12px system-ui; color: #475569; }
.cal-sub-row .hint { font: 400 12px/1.4 system-ui; color: #64748b; margin-top: 2px; }

.call-record-note {
  display: flex; align-items: center; gap: 6px;
  font: 400 12px/1.4 system-ui;
  color: #64748b;
  background: #f8fafc;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 4px;
}

/* Quote rules */
.quote-rules-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 12px;
}
.quote-rule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.quote-rule-row strong { font: 700 14px system-ui; color: #0f172a; }
.quote-rule-row .hint { font: 400 12px system-ui; color: #64748b; margin-top: 2px; }
.quote-rule-row .grow { flex: 1; min-width: 0; }
.quote-rule-price {
  font: 700 15px system-ui;
  color: #047857;
  background: #ecfdf5;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.quote-rule-add {
  display: grid;
  grid-template-columns: 1fr 1fr 120px auto;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.quote-rule-input-price { text-align: right; }
@media (max-width: 600px) {
  .quote-rule-add { grid-template-columns: 1fr; }
  .quote-rule-add .quote-rule-input-price { text-align: left; }
}

/* SR-01 (2026-06-08): auto-update banner — shown when a newer deploy is live in an open tab. */
#aa-update-bar {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 24px);
  padding: 11px 12px 11px 18px;
  border-radius: 999px;
  background: #1e1b3a;
  color: #fff;
  box-shadow: 0 10px 34px rgba(20, 12, 60, 0.34);
  font-size: 14px;
  font-weight: 500;
  animation: aa-update-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#aa-update-bar .aa-update-msg { white-space: nowrap; }
#aa-update-bar .aa-update-refresh {
  border: 0;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  color: #1e1b3a;
  background: #c4b5fd;
  transition: background 0.18s ease, transform 0.18s ease;
}
#aa-update-bar .aa-update-refresh:hover { background: #ddd6fe; }
#aa-update-bar .aa-update-refresh:active { transform: scale(0.96); }
@keyframes aa-update-rise {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #aa-update-bar { animation: none; }
}

/* ===== SR-02 #9/#10/#11 + PAYMENTS (2026-06-10) — all NEW class names, additive only. ===== */
/* Job-state chips (Booking Details) — the chips ARE the status. Colours match the calendar legend. */
.state-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.state-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--line, #e2e8f0); background: #fff; border-radius: 999px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted, #475569);
  cursor: pointer; min-height: 38px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.state-chip i { width: 10px; height: 10px; border-radius: 999px; background: #cbd5e1; display: inline-block; flex: none; }
.state-chip.is-on { color: #fff; border-color: transparent; }
.state-chip.is-on i { background: rgba(255, 255, 255, 0.85); }
.state-chip.chip-quoted.is-on { background: #d97706; }
.state-chip.chip-quoted i { background: #d97706; }
.state-chip.chip-quoted.is-on i { background: rgba(255, 255, 255, 0.85); }
.state-chip.chip-paid.is-on { background: #2563eb; }
.state-chip.chip-paid i { background: #2563eb; }
.state-chip.chip-paid.is-on i { background: rgba(255, 255, 255, 0.85); }
.state-chip.chip-sent.is-on { background: #334155; }
.state-chip.chip-sent i { background: #334155; }
.state-chip.chip-sent.is-on i { background: rgba(255, 255, 255, 0.85); }
.state-chip.chip-review.is-on { background: #7c3aed; }
.state-chip.chip-review i { background: #7c3aed; }
.state-chip.chip-review.is-on i { background: rgba(255, 255, 255, 0.85); }
.state-chip.chip-cancelled.is-on { background: #94a3b8; text-decoration: line-through; }
.state-chip.chip-cancelled i { background: #94a3b8; }
.state-chip.chip-cancelled.is-on i { background: rgba(255, 255, 255, 0.85); }
.state-chip.state-chip--arm { border-color: #dc2626; color: #dc2626; }
.state-chip.state-chip--arm i { background: #dc2626; }
/* Slot corner badges (Sent 📤 / Review-asked ⭐) — pure visuals; pointer-events:none so they can
   NEVER interfere with the protected drag / native-scroll gestures (rule 6). */
.slot-badges { position: absolute; top: 2px; right: 16px; display: flex; gap: 2px; font-size: 10px; line-height: 1; z-index: 2; pointer-events: none; }
.slot-badges .slot-badge { font-style: normal; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.wg-event .slot-badges { right: 14px; top: 2px; }
.legend-pill--badge i.legend-emoji { background: none; width: auto; height: auto; font-size: 11px; line-height: 1; font-style: normal; }
/* Payment sheet */
.pay-methods { margin-top: 2px; }
.pay-qr-wrap { margin: 10px 0 4px; }
.pay-qr { display: flex; justify-content: center; padding: 10px; background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 14px; }
.pay-qr svg { width: 188px; height: 188px; display: block; }
.pay-qr-hint { text-align: center; font-size: 12.5px; color: var(--muted, #64748b); margin-top: 6px; }
.payid-box { background: var(--surface-2, #f8fafc); border: 1.5px dashed #cbd5e1; border-radius: 12px; padding: 12px 14px; margin: 8px 0; font-size: 14px; line-height: 1.5; }
.pay-record { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line, #eef2f7); font-size: 13.5px; }
.pay-record-side { display: flex; align-items: center; gap: 8px; flex: none; }
.pay-status { font-weight: 700; white-space: nowrap; }
.pay-status--paid { color: #16a34a; }
.pay-status--waiting { color: #d97706; }
.pay-status--failed { color: #dc2626; }
.btn-danger-arm { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.pay-set-actions { display: flex; align-items: center; gap: 10px; }