/* ============================================================================
   Alice Booking Diary — "Neural Expressive" visual spike (Claude)
   Loaded AFTER styles.css. This file is the entire visual layer for the spike,
   kept separate so it reads as one clean diff against the base app.

   Scene driving every choice: a solo Australian tradie / salon owner,
   mid-morning between jobs, phone in hand, glancing at the day's bookings,
   wanting warm reassurance Alice has the admin handled. Warm daylight, not a
   cold dashboard. Expressive login, restrained operational calendar.

   Colour in OKLCH. Neutrals tinted toward the brand violet. No pure #000/#fff.
   Motion eases out, slow and human paced. Honours prefers-reduced-motion.
   ========================================================================== */

:root {
  /* Brand violet (the Alice sparkle) */
  --ne-violet-700: oklch(0.48 0.22 294);
  --ne-violet-600: oklch(0.55 0.23 295);
  --ne-violet-500: oklch(0.63 0.20 295);
  --ne-violet-400: oklch(0.72 0.15 296);
  --ne-lavender-300: oklch(0.82 0.09 296);
  --ne-lavender-200: oklch(0.90 0.05 298);
  --ne-lavender-100: oklch(0.965 0.022 300);

  /* Friendly daylight accents */
  --ne-teal-400: oklch(0.80 0.10 196);
  --ne-teal-200: oklch(0.92 0.05 198);
  --ne-coral-400: oklch(0.79 0.12 32);
  --ne-coral-200: oklch(0.92 0.06 38);
  --ne-amber-200: oklch(0.92 0.07 85);

  /* Ink + paper, all faintly violet so nothing reads as flat grey */
  --ne-ink: oklch(0.28 0.035 290);
  --ne-ink-soft: oklch(0.47 0.025 290);
  --ne-ink-faint: oklch(0.62 0.02 292);
  --ne-paper: oklch(0.995 0.004 300);
  --ne-paper-2: oklch(0.985 0.009 300);
  --ne-paper-3: oklch(0.97 0.014 300);
  --ne-line: oklch(0.90 0.012 300);
  --ne-line-strong: oklch(0.84 0.018 298);

  /* Operational signal colours (calendar) */
  --ne-now: oklch(0.62 0.20 25);          /* red current-time line */
  --ne-today: var(--ne-violet-500);

  /* Elevation — soft, layered, daylight (no glass-by-default) */
  --ne-shadow-1: 0 1px 2px oklch(0.45 0.05 295 / 0.06), 0 2px 6px oklch(0.45 0.05 295 / 0.06);
  --ne-shadow-2: 0 2px 6px oklch(0.45 0.05 295 / 0.07), 0 10px 24px oklch(0.45 0.06 295 / 0.10);
  --ne-shadow-3: 0 4px 12px oklch(0.45 0.06 295 / 0.10), 0 24px 60px oklch(0.45 0.08 295 / 0.16);
  --ne-ring: 0 0 0 1px oklch(0.62 0.20 295 / 0.20);

  /* Radii */
  --ne-r-sm: 12px;
  --ne-r-md: 18px;
  --ne-r-lg: 26px;
  --ne-r-pill: 999px;

  /* Motion — slow, human paced, ease-out only */
  --ne-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ne-ease-soft: cubic-bezier(0.16, 1, 0.30, 1);
  --ne-dur-1: 240ms;
  --ne-dur-2: 420ms;
  --ne-dur-3: 720ms;
  --ne-breath: 4800ms;
}

/* ----------------------------------------------------------------------------
   Daylight background — a painterly morning sky, not a flat SaaS mesh.
   Few soft radials: lavender top-left, teal sky, coral warmth low-right,
   amber sun glow, over a warm near-white base. Calm, premium, friendly.
   Attached to the auth/login wrapper and the setup canvas.
   -------------------------------------------------------------------------- */
.ne-daylight {
  position: relative;
  background-color: var(--ne-lavender-100);
  background-image:
    radial-gradient(115% 90% at 8% 6%, oklch(0.93 0.06 298 / 0.95) 0%, transparent 46%),
    radial-gradient(95% 80% at 92% 14%, var(--ne-teal-200) 0%, transparent 50%),
    radial-gradient(120% 100% at 88% 100%, oklch(0.93 0.07 34 / 0.85) 0%, transparent 52%),
    radial-gradient(60% 55% at 26% 88%, var(--ne-amber-200) 0%, transparent 60%),
    linear-gradient(180deg, oklch(0.985 0.012 300) 0%, oklch(0.965 0.02 300) 100%);
  background-attachment: fixed;
}
/* faint grain + top vignette gives depth without glass */
.ne-daylight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(140% 120% at 50% -10%, transparent 60%, oklch(0.55 0.06 295 / 0.07) 100%);
  mix-blend-mode: multiply;
}

/* ----------------------------------------------------------------------------
   Alice — the human face, calmly alive. Circular frame, soft violet halo.
   States: idle breathes; listening shows a calm expanding ring; speaking
   shows a slower steady halo. No bounce, no jitter.
   -------------------------------------------------------------------------- */
.ne-alice {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  isolation: isolate;
}
.ne-alice > img,
.ne-alice .ne-alice-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: var(--ne-shadow-2), 0 0 0 4px var(--ne-paper), 0 0 0 6px var(--ne-lavender-200);
  will-change: transform;
}
.ne-alice--idle > img,
.ne-alice--idle .ne-alice-photo {
  animation: ne-breathe var(--ne-breath) var(--ne-ease-soft) infinite;
}
/* listening / speaking halos render behind the photo */
.ne-alice::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transform: scale(0.9);
}
.ne-alice--listening::after {
  opacity: 1;
  border: 2px solid oklch(0.72 0.15 296 / 0.55);
  animation: ne-listen 2600ms var(--ne-ease-soft) infinite;
}
.ne-alice--speaking::after {
  opacity: 1;
  background: radial-gradient(closest-side, oklch(0.72 0.15 296 / 0.30), transparent 72%);
  animation: ne-speak 3000ms ease-in-out infinite;
}

@keyframes ne-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}
@keyframes ne-listen {
  0%   { transform: scale(0.92); opacity: 0.55; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}
@keyframes ne-speak {
  0%, 100% { transform: scale(0.96); opacity: 0.35; }
  50%      { transform: scale(1.06); opacity: 0.65; }
}

/* ----------------------------------------------------------------------------
   Entrances — content rises in, calm and slightly staggered. Transform/opacity
   only (never layout properties).
   -------------------------------------------------------------------------- */
.ne-rise { animation: ne-rise var(--ne-dur-2) var(--ne-ease) both; }
.ne-rise-2 { animation: ne-rise var(--ne-dur-2) var(--ne-ease) 80ms both; }
.ne-rise-3 { animation: ne-rise var(--ne-dur-2) var(--ne-ease) 160ms both; }
@keyframes ne-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* The Alice sparkle brand mark (inline logo lockup) */
.ne-brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ne-ink);
}
.ne-brandmark img { width: 1.9em; height: 1.9em; border-radius: 28%; box-shadow: var(--ne-shadow-1); }
.ne-poweredby {
  font-size: 0.72rem;
  color: var(--ne-ink-faint);
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------------------
   SURFACE OVERRIDES — filled in once the code-map agent returns exact
   selectors for: auth/login, Alice setup interview, calendar chrome.
   (kept below the foundation so they win on cascade order)
   -------------------------------------------------------------------------- */
/* Shared: the real photo replaces the old CSS cartoon face cleanly.
   Base .alice-face had a peach gradient, border and overflow:hidden that would
   clip the listening halo. Neutralise those; the <img> carries its own frame. */
.ne-alice.alice-face {
  background: none;
  border: 0;
  overflow: visible;
  box-shadow: none;
}
.ne-alice .ne-alice-photo { user-select: none; -webkit-user-drag: none; }

/* ---------- [[NE:auth]] friendly daylight login ------------------------- */
.app[data-route="auth"] {
  background-color: var(--ne-lavender-100);
  background-image:
    radial-gradient(115% 90% at 8% 4%, oklch(0.93 0.06 298 / 0.95) 0%, transparent 46%),
    radial-gradient(95% 80% at 94% 12%, var(--ne-teal-200) 0%, transparent 50%),
    radial-gradient(120% 100% at 90% 100%, oklch(0.93 0.07 34 / 0.85) 0%, transparent 52%),
    radial-gradient(60% 55% at 22% 92%, var(--ne-amber-200) 0%, transparent 60%),
    linear-gradient(180deg, oklch(0.99 0.01 300) 0%, oklch(0.965 0.02 300) 100%);
  background-attachment: fixed;
}
.app[data-route="auth"] .screen { padding-block: clamp(20px, 6vh, 56px); }

.auth-shell { gap: 22px; animation: ne-rise var(--ne-dur-3) var(--ne-ease) both; }
.auth-panel,
.auth-side {
  background: var(--ne-paper);
  border: 1px solid oklch(0.92 0.012 300 / 0.9);
  border-radius: var(--ne-r-lg);
  box-shadow: var(--ne-shadow-3);
}
.auth-panel { padding: clamp(22px, 3vw, 32px); }

.auth-brand { gap: 12px; margin-bottom: 26px; align-items: center; }
.auth-brand .ne-logo { width: 42px; height: 42px; border-radius: 13px; box-shadow: var(--ne-shadow-1); }
.auth-brand strong { font-size: 15px; color: var(--ne-ink); letter-spacing: -0.01em; }
.auth-brand span { color: var(--ne-ink-faint); font-weight: 650; }

.auth-heading h1 { font-size: clamp(28px, 4vw, 38px); color: var(--ne-ink); letter-spacing: -0.02em; font-weight: 760; }
.auth-heading p { color: var(--ne-ink-soft); }

.auth-form input {
  border: 1px solid var(--ne-line);
  border-radius: 12px;
  background: var(--ne-paper);
  transition: border-color var(--ne-dur-1) var(--ne-ease), box-shadow var(--ne-dur-1) var(--ne-ease);
}
.auth-form input:focus { border-color: var(--ne-violet-500); box-shadow: 0 0 0 4px oklch(0.62 0.20 295 / 0.16); }
.auth-form label span { color: var(--ne-ink-soft); }

/* primary action carries Alice violet on brand surfaces (tenant teal stays in app) */
.auth-panel .btn-primary,
.onboarding-shell .btn-primary {
  background: linear-gradient(180deg, var(--ne-violet-500), var(--ne-violet-600));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.25) inset, 0 8px 20px oklch(0.55 0.18 295 / 0.28);
}
.auth-panel .btn-primary:hover,
.onboarding-shell .btn-primary:hover { background: linear-gradient(180deg, var(--ne-violet-500), var(--ne-violet-700)); }

.auth-google { border-radius: 12px; }
.auth-demo {
  border-radius: 12px;
  background: oklch(0.97 0.02 300);
  border: 1px solid var(--ne-lavender-200);
  color: var(--ne-violet-700);
  font-weight: 700;
}
.auth-demo:hover { background: oklch(0.95 0.03 300); }

.auth-side {
  background: radial-gradient(120% 80% at 80% 0%, oklch(0.95 0.04 296) 0%, transparent 60%), var(--ne-paper);
  gap: 14px;
}
.auth-side .alice-face.hero { width: clamp(96px, 13vw, 128px); height: clamp(96px, 13vw, 128px); align-self: center; margin: 4px 0 14px; }
.auth-side-top { color: var(--ne-violet-700); }
.auth-side-top .av { background: var(--ne-violet-500); }
.auth-side p { color: var(--ne-ink-soft); }
.auth-status { border: 1px solid var(--ne-line); border-radius: 12px; background: oklch(0.985 0.008 300); }
.auth-status strong { color: var(--ne-ink); }
.ne-poweredby { margin-top: 8px; text-align: center; }

/* ---------- [[NE:setup]] Alice interviews the owner (conversational) ---- */
.onboarding-shell {
  background-color: var(--ne-lavender-100);
  background-image:
    radial-gradient(100% 70% at 0% 0%, oklch(0.95 0.04 298 / 0.9) 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 6%, var(--ne-teal-200) 0%, transparent 55%),
    linear-gradient(180deg, oklch(0.99 0.008 300), oklch(0.97 0.016 300));
}
.onboarding-intro { animation: ne-rise var(--ne-dur-3) var(--ne-ease) both; }
.onboarding-alice { display: flex; align-items: center; gap: 12px; }
.onboarding-alice .ne-alice.ne-alice--setup { width: 64px; height: 64px; flex: none; }
.onboarding-alice-id { display: grid; }
.onboarding-alice-id strong { font-size: 17px; color: var(--ne-ink); letter-spacing: -0.01em; }
.onboarding-alice-id span { font-size: 12.5px; color: var(--ne-ink-faint); font-weight: 650; }
.onboarding-intro h1 { color: var(--ne-ink); letter-spacing: -0.02em; line-height: 1.12; }

.setup-current-question {
  background: linear-gradient(180deg, oklch(0.975 0.02 298), var(--ne-paper));
  border: 1px solid var(--ne-lavender-200);
  border-radius: var(--ne-r-md);
  box-shadow: var(--ne-shadow-1);
}
.setup-current-question span { color: var(--ne-violet-700); }
.setup-current-question strong { color: var(--ne-ink); }

.setup-transcript { display: grid; gap: 10px; }
.setup-transcript-row { animation: ne-rise var(--ne-dur-2) var(--ne-ease) both; max-width: 92%; }
.setup-transcript-row p { border-radius: 16px; padding: 10px 13px; box-shadow: var(--ne-shadow-1); line-height: 1.45; }
.setup-transcript-row span { color: var(--ne-ink-faint); font-size: 12px; }
.setup-transcript-row.alice { justify-self: start; }
.setup-transcript-row.alice p { background: oklch(0.965 0.025 298); border: 1px solid var(--ne-lavender-200); color: var(--ne-ink); border-bottom-left-radius: 6px; }
.setup-transcript-row.owner { justify-self: end; text-align: right; }
.setup-transcript-row.owner p { background: var(--ne-paper); border: 1px solid var(--ne-line); color: var(--ne-ink); border-bottom-right-radius: 6px; }

.setup-voice-card { background: var(--ne-paper); border: 1px solid var(--ne-line); border-radius: var(--ne-r-md); box-shadow: var(--ne-shadow-2); }
.setup-voice-copy strong { color: var(--ne-ink); }
.setup-voice-copy span { color: var(--ne-ink-soft); }

.onboarding-panel { background: var(--ne-paper); border: 1px solid var(--ne-line); border-radius: var(--ne-r-lg); box-shadow: var(--ne-shadow-2); }
.setup-field input, .setup-field textarea, .setup-field select {
  border-radius: 11px; border: 1px solid var(--ne-line);
  transition: border-color var(--ne-dur-1) var(--ne-ease), box-shadow var(--ne-dur-1) var(--ne-ease);
}
.setup-field input:focus, .setup-field textarea:focus, .setup-field select:focus {
  border-color: var(--ne-violet-500); box-shadow: 0 0 0 4px oklch(0.62 0.20 295 / 0.14); outline: none;
}
.setup-section-head h2 { color: var(--ne-ink); letter-spacing: -0.01em; }
.setup-section-head p { color: var(--ne-ink-soft); }

/* ---------- [[NE:calendar]] keep it operational, light premium polish --- */
/* tenant business colour stays teal, Alice accents stay violet. */
.now-line::before { box-shadow: 0 0 0 2px oklch(0.62 0.20 25 / 0.18); }
.now-line span { border-radius: var(--ne-r-pill); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.brand-dot { box-shadow: var(--ne-shadow-1); }

/* ----------------------------------------------------------------------------
   Reduced motion — disable every decorative animation, keep static states.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ne-alice--idle > img,
  .ne-alice--idle .ne-alice-photo,
  .ne-alice--listening::after,
  .ne-alice--speaking::after,
  .ne-rise, .ne-rise-2, .ne-rise-3 {
    animation: none !important;
  }
  .ne-alice--listening::after { opacity: 0.5; }
  .ne-rise, .ne-rise-2, .ne-rise-3 { opacity: 1; transform: none; }
  .ne-daylight { background-attachment: scroll; }
}