/* ============================================================
   KYN — Shared Design System
   style.css · Mobile-first · Calm at 3am
   v1.1 — updated to brand document spec
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ── Design Tokens ── */
:root {
  /* Colours — brand document v1.0 */
  --color-forest:       #2D5A3D;   /* primary — brand, headings, key UI */
  --color-forest-mid:   #3D6E4E;   /* hover states */
  --color-sage:         #7A9E87;   /* secondary — labels, dividers, supporting */
  --color-sage-light:   #A8C4B0;   /* light sage — subtle accents */
  --color-cream:        #F8F4EE;   /* background tint */
  --color-cream-dark:   #EEE8DF;   /* cards, input backgrounds */
  --color-terracotta:   #C4714A;   /* accent — CTAs, highlights, warmth */
  --color-terracotta-light: #D4845E; /* terracotta hover */
  --color-charcoal:     #2C2C2A;   /* body text — primary reading colour */
  --color-text-soft:    #4A4A48;   /* secondary text */
  --color-text-muted:   #888884;   /* timestamps, disclaimers */
  --color-text-inverse: #F8F4EE;   /* text on dark backgrounds */

  /* Dedicated to text sitting on a dark-green header/hero (chat header,
     login/pricing/legal top banners) — these backgrounds stay dark green
     in BOTH light and dark mode, so this color must too. Previously this
     text used --color-text-inverse, which is redefined to a near-black
     color in dark mode for a DIFFERENT purpose (text on light elements
     within the dark theme) — colliding with these always-dark headers
     and making the text nearly invisible (WCAG contrast 1.21:1 on
     chat.html's header, a near-total failure). Deliberately NOT
     redefined anywhere in the dark-mode block below. */
  --color-on-header: #F8F4EE;
  --color-border:       #DDD7CC;   /* subtle dividers */

  /* Chat bubbles */
  --color-willow-bubble: #2D5A3D;  /* Willow — forest */
  --color-user-bubble:   #FFFFFF;  /* User — white */

  /* Progress dots */
  --color-dot-active:   #2D5A3D;
  --color-dot-inactive: #C8C2B8;

  /* Typography */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Sizing */
  --radius-bubble:  18px;
  --radius-card:    16px;
  --radius-button:  12px;
  --radius-input:   24px;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* Shadows */
  --shadow-card:   0 2px 16px rgba(45, 90, 61, 0.08);
  --shadow-bubble: 0 1px 4px rgba(0,0,0,0.06);

  /* Transitions */
  --transition-base: 200ms ease;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  background-color: var(--color-cream);
  color: var(--color-charcoal);
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ── App Shell ── */
.app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-cream);
  position: relative;
  overflow: hidden;
}

/* ── Typography ── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }

p {
  font-size: 1rem;
  line-height: 1.65;
}

small, .text-sm {
  font-size: 0.8125rem;
}

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

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px var(--space-lg);
  border-radius: var(--radius-button);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background-color: var(--color-forest);
  color: var(--color-text-inverse);
  width: 100%;
}

.btn-primary:hover {
  background-color: var(--color-forest-mid);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-forest);
  border: 1.5px solid var(--color-forest);
  width: 100%;
}

.btn-secondary:hover {
  background-color: var(--color-cream-dark);
}

/* ── Input Bar ── */
.input-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-cream-dark);
  border-radius: var(--radius-input);
  padding: 10px var(--space-md);
  border: 1.5px solid var(--color-border);
  transition: border-color var(--transition-base);
}

.input-bar:focus-within {
  border-color: var(--color-sage);
}

.input-bar input,
.input-bar textarea {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-charcoal);
  line-height: 1.5;
  resize: none;
}

.input-bar input::placeholder,
.input-bar textarea::placeholder {
  color: var(--color-text-muted);
}

/* Icon buttons inside input bar */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-base), transform var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

.icon-btn:active {
  transform: scale(0.93);
}

.icon-btn-mic {
  background-color: var(--color-terracotta);
  color: #fff;
}

.icon-btn-mic:hover {
  background-color: var(--color-terracotta-light);
}

.icon-btn-send {
  background-color: var(--color-forest);
  color: #fff;
}

.icon-btn-send:hover {
  background-color: var(--color-forest-mid);
}

/* ── Account icon (login/logout) — shared appearance ──
   Rendered dynamically by app.js (Kyn.initAuthIcon) into any element
   with id="auth-icon-slot" — automatically shows a login or logout icon
   based on current auth state. Position is defined per-page (layouts
   differ too much to centralize sensibly), but the VISUAL TREATMENT and
   click behavior are centralized here and in app.js, so this control
   can't drift out of sync across pages the way duplicated per-page
   markup has elsewhere in this app (chip prompts, safety signal lists,
   header CSS all learned this lesson the hard way). Change how it looks
   or behaves ONCE, here and in app.js, and every page picks it up. */
.account-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text-muted);
  transition: background-color var(--transition-base), color var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

.account-icon-btn:hover {
  color: var(--color-forest);
  background-color: var(--color-cream-dark);
}

/* Applied when the slot's data-variant="dark" attribute is set — for
   placement on a dark green header/hero background (chat header,
   pricing/terms/privacy top banners) rather than a light/cream one. */
.account-icon-btn--on-dark {
  color: rgba(248, 244, 238, 0.6);
}

.account-icon-btn--on-dark:hover {
  color: rgba(248, 244, 238, 0.95);
  background-color: rgba(255, 255, 255, 0.12);
}

/* ── Chat Bubbles ── */
.bubble-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.bubble-sender {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  padding-left: 2px;
  margin-bottom: 2px;
}

.bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: var(--radius-bubble);
  font-size: 0.9375rem;
  line-height: 1.55;
  box-shadow: var(--shadow-bubble);
}

.bubble-willow {
  align-self: flex-start;
  background-color: var(--color-willow-bubble);
  color: var(--color-text-inverse);
  border-bottom-left-radius: 4px;
}

.bubble-user {
  align-self: flex-end;
  background-color: var(--color-user-bubble);
  color: var(--color-charcoal);
  border-bottom-right-radius: 4px;
  border: 1.5px solid var(--color-border);
}

/* Typing indicator */
.bubble-typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 14px 18px;
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(248, 244, 238, 0.5);
  animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* ── Progress Dots (Onboarding) ── */
.progress-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: var(--space-md) 0;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-dot-inactive);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.dot.active {
  background-color: var(--color-dot-active);
  transform: scale(1.2);
}

/* ── Chat Header ── */
.chat-header {
  background-color: var(--color-forest);
  color: var(--color-on-header);
  padding: 14px var(--space-md);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Willow's presence mark — typographic, no avatar illustration */
.willow-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(122, 158, 135, 0.3); /* sage at low opacity */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-on-header);
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.chat-header-info {
  display: flex;
  flex-direction: column;
}

.chat-header-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.chat-header-status {
  font-size: 0.75rem;
  color: rgba(248, 244, 238, 0.65);
}

/* ── Card ── */
.card {
  background-color: #fff;
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}

/* ── Pill / Badge ── */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
}

.badge-terracotta {
  background-color: rgba(196, 113, 74, 0.12);
  color: var(--color-terracotta);
}

/* ── Feature List (Pricing) ── */
.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--color-text-soft);
}

.feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-forest);
  flex-shrink: 0;
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 0.4s ease forwards;
}

.fade-up-delay-1 { animation-delay: 0.1s;  opacity: 0; }
.fade-up-delay-2 { animation-delay: 0.22s; opacity: 0; }
.fade-up-delay-3 { animation-delay: 0.34s; opacity: 0; }
.fade-up-delay-4 { animation-delay: 0.46s; opacity: 0; }

/* ── Utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-center { text-align: center; }
.w-full      { width: 100%; }

/* ── Scrollbar ── */
.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.scroll-area::-webkit-scrollbar       { width: 4px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }
.scroll-area::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: 4px; }

/* ── Desktop ── */
@media (min-width: 500px) {
  body {
    background-color: var(--color-cream-dark);
    align-items: center;
    min-height: 100dvh;
  }

  .app-shell {
    margin: var(--space-lg) 0;
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(45, 90, 61, 0.14);
    min-height: auto;
    height: 812px;
  }
}


/* ============================================================
   RESPONSIVE DESKTOP LAYOUT
   Breakpoint: 640px and above
   ============================================================ */

/* On desktop, centre the app shell with a max-width and subtle
   shadow so it feels like a focused app window, not a stretched
   mobile layout. The cream side margins frame it naturally. */

@media (min-width: 640px) {
  body {
    align-items: flex-start;
    padding: 0;
    /* Subtle warm side gradient to frame the app on wide screens */
    background-color: var(--color-cream-dark);
  }

  .app-shell {
    max-width: 480px;
    min-height: 100dvh;
    box-shadow: 0 0 48px rgba(45, 90, 61, 0.10);
    margin: 0 auto;
  }
}

@media (min-width: 900px) {
  body {
    align-items: flex-start;
    padding: 32px 0;
    min-height: 100dvh;
    background-color: var(--color-cream-dark);
  }

  .app-shell {
    max-width: 480px;
    min-height: calc(100dvh - 64px);
    border-radius: 24px;
    box-shadow: 0 8px 48px rgba(45, 90, 61, 0.14);
    overflow: hidden;
    margin: 0 auto;
  }

  /* Round the header top corners to match the shell */
  .chat-header,
  .legal-header,
  .login-top,
  .sent-top,
  .welcome-back-top {
    border-radius: 24px 24px 0 0;
  }
}


/* ============================================================
   DARK MODE — "Candlelight"
   Warm deep tones — soft enough for tired eyes at 3am
   Activated by: body.dark-mode or [data-theme="dark"]
   Remembered in localStorage as 'kyn_dark_mode'
   ============================================================ */

body.dark-mode {
  /* Deep warm backgrounds — not black, charcoal-brown */
  --color-cream:        #1C1917;   /* main background — warm near-black */
  --color-cream-dark:   #242220;   /* card backgrounds */
  --color-border:       #38342F;   /* dividers — barely visible */

  /* Text — softer than white, closer to warm parchment */
  --color-charcoal:     #E8E0D4;   /* primary text */
  --color-text-soft:    #B8AFA3;   /* secondary text */
  --color-text-muted:   #6E6760;   /* muted — timestamps, disclaimers */
  --color-text-inverse: #1C1917;   /* text on light elements */

  /* Forest — slightly lighter so it reads on dark bg */
  --color-forest:       #4A8A5C;
  --color-forest-mid:   #5A9E6C;

  /* Bubbles */
  --color-willow-bubble: #2A4035;  /* dark forest — warm, not stark */
  --color-user-bubble:   #2E2A26;  /* warm dark card */

  /* Dot colours */
  --color-dot-active:   #4A8A5C;
  --color-dot-inactive: #38342F;

  /* Shadows — warmer and subtler on dark */
  --shadow-card:   0 2px 16px rgba(0, 0, 0, 0.3);
  --shadow-bubble: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Bubble text colours in dark mode */
body.dark-mode .bubble-willow {
  color: #D4C9B8;   /* warm parchment on dark forest */
}

body.dark-mode .bubble-user {
  color: #D4C9B8;
  border: 1px solid var(--color-border);
}

/* Input bar in dark mode */
body.dark-mode .input-bar {
  background-color: var(--color-cream-dark);
  border-color: var(--color-border);
}

body.dark-mode .input-bar textarea {
  color: var(--color-charcoal);
  background-color: transparent;
}

/* Header in dark mode — keep forest but slightly adjusted */
body.dark-mode .chat-header {
  background-color: #1A2E22 !important;
  border-bottom: 1px solid var(--color-border);
}

/* Every other dark-green header/hero section (legal pages, pricing,
   login) gets the same fixed dark background in dark mode — NOT the
   general --color-forest lightening used elsewhere. Letting some
   headers lighten and others stay dark produced inconsistent, non-ideal
   contrast depending on which page you were on; a single fixed dark
   background paired with --color-on-header (always light) gives every
   one of these sections the same strong, predictable contrast. */
body.dark-mode .legal-header,
body.dark-mode .pricing-top,
body.dark-mode .login-top,
body.dark-mode .welcome-back-top {
  background-color: #1A2E22;
}

/* Buttons in dark mode */
body.dark-mode .btn-primary {
  background-color: var(--color-forest);
}

body.dark-mode .btn-secondary {
  background-color: var(--color-cream-dark);
  color: var(--color-charcoal);
  border-color: var(--color-border);
}

/* Cards in dark mode */
body.dark-mode .willow-note,
body.dark-mode .login-willow-note,
body.dark-mode .welcome-back-willow {
  background-color: #1A2E22;
}

/* Typing dots in dark mode */
body.dark-mode .typing-dot {
  background-color: rgba(212, 201, 184, 0.5);
}

/* Dark mode toggle button */
.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.dark-mode-toggle:hover {
  color: var(--color-charcoal);
  background-color: var(--color-cream-dark);
}

.dark-mode-toggle .icon-moon { display: block; }
.dark-mode-toggle .icon-sun  { display: none;  }

body.dark-mode .dark-mode-toggle .icon-moon { display: none;  }
body.dark-mode .dark-mode-toggle .icon-sun  { display: block; }

body.dark-mode .dark-mode-toggle {
  color: var(--color-text-muted);
}

body.dark-mode .dark-mode-toggle:hover {
  color: var(--color-charcoal);
  background-color: var(--color-cream-dark);
}