@tailwind base;
@tailwind components;
@tailwind utilities;

/* Handover design tokens - single source of truth for brand colours and type.
   Matches the Tailwind theme (ink/paper/live/hairline) for non-Tailwind CSS. */
:root {
  --color-ink: #37322F;       /* text, primary UI, primary ring */
  --color-paper: #F7F5F3;     /* app background */
  --color-live: #22C55E;      /* accent only - status dots, rings, tagline */
  --color-secondary: #828387; /* secondary text */
  --color-hairline: #E0DEDB;  /* borders/dividers */
  --font-display: 'Newsreader', ui-serif, Georgia, serif;
  --font-ui: 'Inter', system-ui, sans-serif;
}

/* Global background color for all pages */
@layer base {
  html {
    background-color: var(--color-paper);
  }
  body {
    background-color: var(--color-paper);
    font-family: var(--font-ui);
  }

  /* Brand green accents: keyboard focus and text selection pick up the
     live green so the accent is felt app-wide without recolouring fills */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--color-live);
    outline-offset: 2px;
  }
  ::selection {
    background-color: rgba(34, 197, 94, 0.2);
  }

  /* Nothing may scroll the page sideways on phones: any element that leaks
     past the viewport makes the content shift against the fixed navbar,
     which reads as misaligned widths. clip (not hidden) so no scroll
     container is created and position: sticky keeps working */
  body {
    overflow-x: clip;
  }

  /* Keep browser autofill from painting inputs blue - fill with white and
     brand ink text so autofilled forms still look like ours */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--color-ink);
    caret-color: var(--color-ink);
    transition: background-color 5000s ease-in-out 0s;
  }
}

@layer components {
  /* Knowledge base explorer: folder buttons in the category sidebar.
     The active class is toggled by kb_explorer_controller.js */
  .kb-folder {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    text-align: left;
    color: rgba(55, 50, 47, 0.7);
    transition: background-color 150ms ease, color 150ms ease;
    cursor: pointer;
  }
  .kb-folder:hover {
    background-color: #F7F5F3;
  }
  .kb-folder-active {
    background-color: #F7F5F3;
    color: #37322F;
    font-weight: 500;
  }


  /* Landing hero: blurred colour fields that wander behind the headline.
     Each blob follows its own multi-waypoint path so something is always
     in motion. Pure CSS - no script; hidden from motion-sensitive users */
  .hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(70px);
    opacity: 0.65;
    will-change: transform;
  }
  .hero-blob-green {
    width: 480px;
    height: 480px;
    top: -120px;
    left: 4%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.24), transparent 70%);
    animation: hero-wander-a 22s ease-in-out infinite;
  }
  .hero-blob-ink {
    width: 560px;
    height: 560px;
    top: -80px;
    right: 0%;
    background: radial-gradient(circle, rgba(55, 50, 47, 0.14), transparent 70%);
    animation: hero-wander-b 28s ease-in-out infinite;
  }
  .hero-blob-green-low {
    width: 460px;
    height: 460px;
    top: 220px;
    left: 38%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.15), transparent 70%);
    animation: hero-wander-c 26s ease-in-out infinite;
  }
  .hero-blob-mint {
    width: 380px;
    height: 380px;
    top: 60px;
    left: 26%;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.18), transparent 70%);
    animation: hero-wander-b 19s ease-in-out infinite reverse;
  }
  .hero-blob-green-right {
    width: 420px;
    height: 420px;
    top: 320px;
    right: 10%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.14), transparent 70%);
    animation: hero-wander-a 32s ease-in-out infinite reverse;
  }

  /* Three looping paths with different shapes so the motion never syncs up */
  @keyframes hero-wander-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    25%  { transform: translate3d(160px, 60px, 0) scale(1.12); }
    50%  { transform: translate3d(80px, 160px, 0) scale(0.94); }
    75%  { transform: translate3d(-90px, 70px, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes hero-wander-b {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    30%  { transform: translate3d(-140px, 110px, 0) scale(1.15); }
    60%  { transform: translate3d(60px, 190px, 0) scale(0.9); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes hero-wander-c {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    20%  { transform: translate3d(110px, -80px, 0) scale(1.1); }
    55%  { transform: translate3d(-130px, -40px, 0) scale(1.18); }
    80%  { transform: translate3d(-40px, 90px, 0) scale(0.92); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }
  /* Quieter, smaller wandering blobs for the warm content sections further
     down the landing page - same paths as the hero, softer presence */
  .section-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    opacity: 0.5;
    will-change: transform;
  }
  .section-blob-green {
    width: 360px;
    height: 360px;
    top: -60px;
    right: 8%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.16), transparent 70%);
    animation: hero-wander-a 26s ease-in-out infinite;
  }
  .section-blob-mint {
    width: 320px;
    height: 320px;
    bottom: -80px;
    left: 6%;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.13), transparent 70%);
    animation: hero-wander-c 30s ease-in-out infinite reverse;
  }
  /* Mirrored placement so consecutive sections don't repeat */
  .section-blob-flip.section-blob-green {
    right: auto;
    left: 8%;
  }
  .section-blob-flip.section-blob-mint {
    left: auto;
    right: 6%;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-blob,
    .section-blob { animation: none; }
  }

  /* Landing capabilities carousel: the scroller pans horizontally with snap
     points, so the native scrollbar is visual noise - progress is shown by
     the bar beneath it instead */
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Handover ring mark (shared/_handover_mark partial).
     On load each ring draws itself in; on hover the rings swap places -
     the handover gesture. 79.2 is the ring circumference (2 * pi * 12.6);
     16.3 is the horizontal distance between the two ring centres. */
  .handover-mark .mark-ring {
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .handover-mark:hover .mark-ring-ink,
  .group:hover .handover-mark .mark-ring-ink {
    transform: translateX(16.3px);
  }
  .handover-mark:hover .mark-ring-green,
  .group:hover .handover-mark .mark-ring-green {
    transform: translateX(-16.3px);
  }
  /* Page-load intro: half a handover - the rings start on swapped sides,
     hold a beat, then glide home. Same travel and easing as the hover swap */
  .mark-intro .mark-ring-ink {
    animation: mark-intro-ink 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.35s both;
  }
  .mark-intro .mark-ring-green {
    animation: mark-intro-green 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.35s both;
  }
  @keyframes mark-intro-ink {
    from { transform: translateX(16.3px); }
    to { transform: translateX(0); }
  }
  @keyframes mark-intro-green {
    from { transform: translateX(-16.3px); }
    to { transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mark-intro .mark-ring-ink,
    .mark-intro .mark-ring-green { animation: none; }
    .handover-mark .mark-ring { transition: none; }
  }

  /* Quick-reply buttons under AI chat messages: only the newest message's
     options are actionable - older ones vanish as the conversation moves on */
  #messages > :not(:last-child) .quick-replies {
    display: none;
  }

  /* Sign-up wizard step indicators - state is set by wizard_controller.js */
  .wizard-step-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1px solid rgba(55, 50, 47, 0.15);
    background: #fff;
    color: rgba(55, 50, 47, 0.5);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.2s ease;
  }
  [data-wizard-state="active"] .wizard-step-dot {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
  }
  [data-wizard-state="done"] .wizard-step-dot {
    background: var(--color-live);
    border-color: var(--color-live);
    color: #fff;
  }
  [data-wizard-state="active"] .wizard-step-label {
    color: var(--color-ink);
    font-weight: 500;
  }
}

/* Mobile chat app shell
   ------------------------------------------------------------------
   On phones the conversation page behaves like a native messaging app:
   it owns the whole viewport, the document never scrolls and only the
   message list moves. Two things make that survive the on-screen keyboard:

   1. interactive-widget=resizes-content in the viewport meta tag, which
      shrinks the layout viewport when the keyboard opens, so 100dvh already
      means "the space left above the keyboard" (iOS 18.4+, Chrome Android).
   2. --keyboard-inset, published by chat_controller.js from the
      VisualViewport API, for browsers that ignore interactive-widget and
      overlay the keyboard instead (iOS Safari before 18.4). Where the meta
      tag is honoured the measured inset is 0, so the two never double up. */
@media (max-width: 767px) {
  .chat-shell {
    height: calc(100dvh - var(--keyboard-inset, 0px));
    overflow: hidden;
  }
}

/* The same viewport maths for the chat inside the embedded widget iframe,
   which has no site chrome around it at any width */
.chat-fill {
  height: calc(100dvh - var(--keyboard-inset, 0px));
}

/* iOS zooms the page whenever a focused control has text under 16px, and
   never zooms back out. Deliberately unlayered: rules inside @layer base
   lose to plain utility classes, so a text-sm on a field would win. */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}