/* ============================================================================
   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 — FULL-BLEED SPLIT ---- */
/* Auth background only shows on mobile (left panel bg on desktop = white) */
.app[data-route="auth"] {
  background-color: #fff;
  background-image: none;
}
/* Full-bleed: zero padding on screen, no gap on shell */
.app[data-route="auth"] .screen { padding: 0; padding-block: 0; }
.auth-shell { gap: 0; animation: ne-rise var(--ne-dur-3) var(--ne-ease) both; }

/* Panel: left side, no border-radius (flush edges), subtle shadow only on desktop */
.auth-panel {
  background: var(--ne-paper);
  border: 0;
  border-right: 1px solid oklch(0.92 0.012 300 / 0.9);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(32px, 4vw, 52px) clamp(28px, 3.6vw, 48px);
}
.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);
}

/* Mobile: panel gets NE paper bg and some radius */
@media (max-width: 899px) {
  .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%),
      linear-gradient(180deg, oklch(0.99 0.01 300) 0%, oklch(0.965 0.02 300) 100%);
    background-attachment: fixed;
  }
  .auth-panel {
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 22px 18px 28px;
  }
}

.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; }

/* Inter Light for the large login display heading; Medium for the supporting copy */
.auth-heading h1 { font-size: clamp(28px, 4vw, 38px); color: var(--ne-ink); letter-spacing: -0.022em; font-weight: 300; }
.auth-heading p { color: var(--ne-ink-soft); font-weight: 500; }

.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); }

/* TASK 5 — Auth hero photo: push subject to RIGHT so left copy overlay
   never obscures a face. object-position 72% keeps the person visible
   while the text panel sits on the left column. Mobile banner: 72% 22%
   keeps the face in the top-right visible band. */
.auth-hero-photo {
  background-position: 72% center, 72% center;
}
/* If the hero is rendered as an <img> (future), apply object-position too */
.auth-hero-photo img {
  object-fit: cover;
  object-position: 72% center;
}
.auth-mobile-hero {
  background-position: center 52%, center 52%, center 42%;
}

.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; }
}