/* =========================================================
   human-theme.css — Warm palette token layer for Hey Human app
   Shepard, Front-End Designer. 2026-07-14. Task 2031.

   Mirrors the approved marketing-landing palette across the WHOLE
   app UI. Loaded AFTER style.css + human-sidebar.css so these rules
   win. LIGHT + WARM-DARK both defined.

   RELATIONSHIP (from the landing): a CREAM page holds a WHITE card.
   In the app we mirror it:
     - MAIN CONTENT / conversation area = WHITE  (#FFFFFF) so the
       coloured bubbles pop. (Correction #1: was cream, now white.)
     - SIDEBAR + secondary chrome        = CREAM  (#FBF7F0 / #F5EEE3)
       so the white content reads as a distinct card.
     - PRIMARY actions (send, primary buttons, active nav, links)
       = green (#2F6F5B / hover #234E42).
     - Accents = amber / clay, sparingly.

   Global grey tokens from style.css (:root / body.dark) are
   repointed here to the warm palette, so the recolour cascades
   everywhere: sidebar, header, buttons, links, active/hover,
   auth/guest pages, empty states. Settings uses its own inline
   :root (layouts/settings.blade.php) which is repointed there.
   ========================================================= */

/* ---------- Warm palette tokens (light) — from landing :root ---------- */
:root {
  --cream:      #FBF7F0;   /* page / sidebar chrome */
  --cream-2:    #F5EEE3;   /* secondary surface + USER bubble */
  --warm-white: #FFFFFF;   /* MAIN CONTENT, cards, composer field */
  --ink:        #201F1A;   /* primary text */
  --ink-soft:   #4B4A43;
  --warm-muted: #7A776D;
  --hairline:   #EAE2D4;   /* borders / dividers */

  --green:      #2F6F5B;   /* PRIMARY: send button, links, active */
  --green-deep: #234E42;   /* AI bubble text, hover */
  --green-tint: #E7EFE9;   /* AI / assistant bubble background */
  --green-soft: #DCE9DE;

  --amber:      #E39A5B;
  --amber-tint: #F7E9D7;
  --peach:      #F6EADB;
  --clay:       #C9744A;
  --sky-tint:   #E7EEF0;

  --warm-shadow-sm: 0 2px 8px rgba(35, 30, 20, 0.05);
  --warm-shadow:    0 14px 40px rgba(35, 30, 20, 0.08);

  --r-sm:   14px;
  --r-base: 22px;
  --r-lg:   32px;
  --r-pill: 999px;

  /* bubble tail radius (matches landing .bubble tail = 6px) */
  --r-bubble: 20px;
  --r-tail:   6px;
}

/* ---------- GLOBAL grey-token repoint (light) — cascades app-wide ------
   Repoints style.css :root greys onto the warm palette. Named tokens keep
   their old MEANING: --bg = main content (now WHITE), --sideBar-bg = chrome
   (now CREAM), --black = strong foreground TEXT (now INK; primary SURFACES
   are handled by explicit green overrides below, not by this token). ------ */
:root {
  --bg:         var(--warm-white);   /* main content / conversation = WHITE */
  --text:       var(--ink);
  --offWhite:   var(--cream-2);
  --sideBar-bg: var(--cream);         /* sidebar / chrome = CREAM */
  --border:     var(--hairline);
  --black:      var(--ink);           /* foreground TEXT stays ink */
  --placeholder:var(--warm-muted);
  --hover:      #EDE4D3;              /* warm hover step (on white + cream) */
  --light-grey: var(--cream-2);
  --light-text: var(--warm-muted);
  --violet:     var(--green);         /* accent / links -> green */
}

/* ---------- Warm-DARK equivalents (deepened greens / creams) ---------- */
body.dark {
  --cream:      #1E1A12;   /* chrome, warm dark (lifted above content) */
  --cream-2:    #241E15;   /* USER bubble surface, dark */
  --warm-white: #17140E;   /* MAIN CONTENT, deep warm near-black */
  --ink:        #F3ECDD;   /* primary text on dark */
  --ink-soft:   #C9C0AE;
  --warm-muted: #ADA48F;
  --hairline:   #3A3327;

  --green:      #4CAE8E;   /* brighter primary for dark links */
  --green-deep: #BEE9D6;   /* AI bubble TEXT on dark */
  --green-tint: #1E3A32;   /* AI bubble BACKGROUND on dark */
  --green-soft: #24473C;

  --amber-tint: #3A2C1C;
  --peach:      #2A2216;
  --sky-tint:   #1B2A2E;

  --warm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --warm-shadow:    0 14px 40px rgba(0, 0, 0, 0.45);
}

/* ---------- GLOBAL grey-token repoint (dark) ---------- */
body.dark {
  --bg:         #15120C;              /* main content = deepest warm */
  --text:       var(--ink);
  --offWhite:   #211C15;
  --sideBar-bg: #1E1A12;              /* chrome, lifted */
  --border:     var(--hairline);
  --black:      var(--ink);           /* foreground text */
  --white:      #211C15;              /* dark cards / pills (light-mode #fff) */
  --placeholder:var(--warm-muted);
  --hover:      #262019;
  --light-grey: #211C15;
  --light-text: var(--warm-muted);
  --violet:     var(--green);
}

/* =========================================================
   CONVERSATION SURFACE
   Scoped to the logged-in / conversation pages (body.after-login,
   carried by all 4 chat views). Correction #1: background is WHITE.
   ========================================================= */

/* --- Chat page background = WHITE (light) / deep warm (dark). Solid, so the
       base body texture image is dropped on chat pages. --- */
body.after-login {
  background: var(--bg) !important;
}

/* Composer fade strip on the scrolling chat view (fades to the white surface) */
body.after-login.chat-screen .form-box-wrapper {
  background: linear-gradient(to top, var(--bg) 78%, transparent);
}

/* Chat header blends into the surface */
body.after-login .header-sec,
body.after-login.dark .header-sec {
  background: transparent;
}

/* --- USER message bubble: cream-2 + ink, soft bottom-right --- */
body.after-login .question-box span {
  background: var(--cream-2);
  color: var(--ink);
  border-radius: var(--r-bubble);
  border-bottom-right-radius: var(--r-tail);
  box-shadow: var(--warm-shadow-sm);
}

/* --- AI / assistant bubble: green-tint + green-deep, soft bottom-left --- */
body.after-login .response-box {
  background: var(--green-tint);
  color: var(--green-deep);
  border-radius: var(--r-bubble);
  border-bottom-left-radius: var(--r-tail);
  padding: 16px 22px;
  margin: 18px 0 26px 0;
  max-width: 80%;
  width: fit-content;
  word-wrap: break-word;
  box-shadow: var(--warm-shadow-sm);
}
body.after-login .response-box p,
body.after-login .response-box ul,
body.after-login .response-box ol,
body.after-login .response-box li,
body.after-login .response-box b,
body.after-login .response-box strong {
  color: var(--green-deep);
}
body.after-login .response-box a {
  color: var(--green);
  text-decoration: underline;
}
/* typing / thinking indicator keeps the AI bubble look */
body.after-login .response-box.typing-indicator,
body.after-login .response-box2 .response-box {
  color: var(--green-deep);
}

/* --- Composer / input: white field, hairline border --- */
body.after-login .form-box {
  background-color: var(--warm-white);
  border-color: var(--hairline);
  box-shadow: var(--warm-shadow-sm);
}
body.after-login .form-box .type-input {
  color: var(--ink);
}
body.after-login .form-box .type-box {
  color: var(--warm-muted);
}

/* Composer action pills warmed; SEND = green with white icon */
body.after-login .form-box .search-ext span {
  background-color: var(--cream-2);
}
body.after-login .form-box .search-ext span svg {
  fill: var(--ink);
}
body.after-login .form-box .search-ext span.record-type {
  background-color: #fe0000;   /* stop/record stays red */
}
body.after-login .form-box .search-ext span.record-type svg {
  fill: #fff;
}
body.after-login .form-box .search-ext span.send-type {
  background-color: var(--green);
}
body.after-login .form-box .search-ext span.send-type svg {
  fill: #fff;
}

/* Bottom disclaimer text muted-warm */
body.after-login .bottom-info-text p {
  color: var(--warm-muted);
}

/* Start-screen heading + eye icon pick up ink */
body.after-login .ask-box h1,
body.after-login .ask-box .body-icon svg {
  color: var(--ink);
}

/* =========================================================
   GLOBAL CHROME — primary actions, links, auth/guest pages
   (Phase 2, greenlit). Sidebar active + avatar live in the shared
   human-sidebar.css so both the chat + settings shells match.
   ========================================================= */

/* Primary buttons -> green (both modes; white text reads on this green). */
.btn.primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.btn.primary:hover {
  background: var(--green-deep);
  color: #fff;
  border-color: var(--green-deep);
}
body.dark .btn.primary {
  background: #2F6F5B;          /* keep the deeper green under white text */
  border-color: #2F6F5B;
}
body.dark .btn.primary:hover {
  background: #234E42;
  border-color: #234E42;
}

/* Content links (outside the sidebar/nav) -> green. */
body.after-login .body-content a,
.auth-wrapper a.link,
.link-green {
  color: var(--green);
}

/* Auth / guest pages (app.blade, no .after-login): cream PAGE holding the
   white auth card — mirrors the landing. Solid, drops the body texture. */
body:not(.after-login) {
  background: var(--sideBar-bg) !important;
}
body:not(.after-login).dark {
  background: var(--bg) !important;
}

/* Auth Continue button (guest pages) -> green primary */
.submit-button-box button { background-color:#2F6F5B; border-color:#2F6F5B; color:#fff; }
.submit-button-box button:hover { background-color:#234E42; border-color:#234E42; color:#fff; }
#submitBtn { background:#2F6F5B; border-color:#2F6F5B; color:#fff; }
#submitBtn:hover { background:#234E42; border-color:#234E42; color:#fff; }