/* chat.css — Woody widget styles for Jimbo Slice Pizza (see chat.js /
   chat-brain.js). The widget markup and behaviour are SHARED across the
   three brand websites since Oct 25, 2026. Since the Direction A
   redesign (Nov 5, 2026) this skin follows the site's tokens from
   /css/site.css: --char #231F20, --cream #F5EBD2, --red #ED1C24,
   in Inter (headings Archivo where noted).
   Toolbar button (Nov 6, 2026) — Jim: "Get rid of Woody in the main
   page and just put him on the button up top." chat.js mounts
   .scb-root inside .header-inner and adds .scb-root--intoolbar
   (rules below), so the launcher is a button in the toolbar row
   itself; the greeting card and the chat panel drop down from it.
   The Nov 5 hang seat (.scb-root--toolbar, header's bottom edge)
   remains as the fallback for a page with .site-header but no
   .header-inner. The bottom-right seat in the base .scb-root rule is
   the fallback for any page without the site header; there the
   bubble/panel sit above the bottom-right corner (raised offset kept
   from the old order-fab days, harmless now that the FAB is
   retired). */

.scb-root {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px);
  z-index: 45;
  font-size: 15px;
  line-height: 1.45;
  color: var(--char, #231F20);
}

/* Toolbar anchor — with .scb-root--toolbar the root sits inside the
   sticky .site-header, so top: 100% is the header's own bottom edge:
   the launcher hangs 10px under the toolbar (the Direction A header is
   a fixed-height bar — 72px desktop / 62px mobile — but hanging from
   the header keeps the seat exact even if the bar changes) and stays
   glued to it when the sticky header rides the scroll. Greeting card
   and panel open BELOW the launcher; the panel's height budget is
   measured down from the top of the screen, reserving 200px for the
   header + launcher + gaps so it can never run off a phone viewport. */
.scb-root--toolbar {
  position: absolute;
  top: calc(100% + 10px);
  bottom: auto;
}
.scb-root--toolbar .scb-greet,
.scb-root--toolbar .scb-panel {
  top: calc(100% + 12px);
  bottom: auto;
}
.scb-root--toolbar .scb-panel {
  max-height: min(560px, calc(100vh - 200px));
  max-height: min(560px, calc(100dvh - 200px));
}
.scb-root--toolbar .scb-greet { animation-name: scb-greet-in-top; }
@keyframes scb-greet-in-top {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Toolbar BUTTON (Nov 6, 2026) — same seat change as the main site:
   with .scb-root--intoolbar the root is an in-flow flex item at the
   end of .header-inner's row (chat.js appends it last, after
   .header-cta), so the bubble renders as a normal toolbar button —
   Woody's face on the button, in the top bar — and NOTHING of Woody
   floats over or hangs into the page body. margin-left:auto keeps
   him at the row's right end. The greeting card and the chat panel
   open as a dropdown below the button: top: 100% is the ROOT's own
   bottom edge (the button's bottom). The panel keeps this skin's
   200px top reserve (the Direction A header is a slim 72px desktop /
   62px mobile bar, and the button sits inside it: measured panel
   tops land at 107px on desktop and 165px on phones, where the
   button wraps to its own toolbar row — the panel ends well inside
   the viewport at both sizes; verified by headless geometry). */
.scb-root--intoolbar {
  position: relative;
  right: auto;
  bottom: auto;
  flex: none;
  margin-left: auto;
}
/* Fit (Direction A bar): the desktop bar was already at capacity —
   brand 210 + nav 515 + phone/CTA 387 + gaps ≈ the full 1160px
   content box at 1280px (the redesign's own build report flags it:
   "no slack"). A labelled bubble (+158px) cannot join that row
   without pushing the bar off-screen, so in this skin the toolbar
   button is the face-only round button (the same treatment the base
   styles already give small screens). The tightened row geometry
   this seat needs (header gap 10, nav gap 12, nav's left margin 6)
   used to be applied from here via :has() overrides once chat.js
   mounted the button — which made the whole header re-space after
   load and differ with JS off. Since the Nov 6, 2026 nav-consistency
   pass those values are the base rules in site.css, so the header is
   identical in every state and this file carries no header geometry. */
.scb-root--intoolbar .scb-bubble { padding: 6px; }
.scb-root--intoolbar .scb-bubble-label { display: none; }
@media (max-width: 1199px) {
  /* Stacked header (site.css, ≤1199px): the rows are brand / nav /
     phone + order CTAs, and the button takes the right end of the
     BRAND row (order 2; margin-left:auto above), so it still lives in
     the toolbar and the dropdown falls from that row. The taller
     header's measured height sets the homepage category nav's sticky
     offset below — the one place that hard-codes the bar height.
     (The menu/shop --stick-top offsets are computed from the real
     header height in JS and follow on their own.) */
  .scb-root--intoolbar { order: 2; }
  .catnav { top: 185px; }
}
@media (max-width: 760px) {
  /* Compressed phone header (site.css, Nov 8 2026): the sticky bar
     measures 137px on phones, so the homepage category nav sticks
     directly under it at the same offset. */
  .catnav { top: 137px; }
}
.scb-root--intoolbar .scb-greet,
.scb-root--intoolbar .scb-panel {
  top: calc(100% + 10px);
  bottom: auto;
}
.scb-root--intoolbar .scb-panel {
  max-height: min(560px, calc(100vh - 200px));
  max-height: min(560px, calc(100dvh - 200px));
}
.scb-root--intoolbar .scb-greet { animation-name: scb-greet-in-top; }

.scb-bubble {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--char, #231F20);
  color: var(--cream, #F5EBD2);
  border: 2px solid var(--red, #ED1C24);
  border-radius: 999px;
  padding: 7px 18px 7px 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.scb-bubble:hover,
.scb-bubble:focus-visible {
  background: var(--red, #ED1C24);
  outline: none;
}
.scb-bubble-face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream, #F5EBD2);
  flex: none;
}
.scb-bubble-label { white-space: nowrap; }
@media (max-width: 520px) {
  /* Very small screens: keep the Woody face, drop the label text. */
  .scb-bubble-label { display: none; }
  .scb-bubble { padding: 7px; }
}

/* Greeting card — Woody introduces himself once per session beside
   the launcher (the shop's greeting-strip pattern). */
.scb-greet {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(300px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--cream, #F5EBD2);
  border: 2px solid var(--char, #231F20);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  padding: 10px 8px 10px 10px;
  animation: scb-greet-in 0.35s ease-out;
}
.scb-greet[hidden] { display: none; }
@keyframes scb-greet-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scb-greet { animation: none; }
}
.scb-greet-face {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(35, 31, 32, 0.25);
  flex: none;
}
.scb-greet-text {
  flex: 1;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  color: var(--char, #231F20);
  cursor: pointer;
  padding: 2px 0;
}
.scb-greet-close {
  background: transparent;
  border: 0;
  color: rgba(35, 31, 32, 0.6);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  flex: none;
}

.scb-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(360px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 190px));
  display: flex;
  flex-direction: column;
  background: var(--cream, #F5EBD2);
  border: 2px solid var(--char, #231F20);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.scb-panel[hidden] { display: none; }

.scb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--char, #231F20);
  color: var(--cream, #F5EBD2);
  padding: 10px 12px;
}
.scb-head-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream, #F5EBD2);
  flex: none;
}
.scb-head-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.scb-head-text strong {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.scb-head-text span { font-size: 0.78rem; opacity: 0.85; }

.scb-call {
  background: var(--red, #ED1C24);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.scb-call:hover,
.scb-call:focus-visible { filter: brightness(1.12); }

.scb-close {
  background: transparent;
  border: 0;
  color: var(--cream, #F5EBD2);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

.scb-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scb-msg { display: flex; align-items: flex-end; }
.scb-msg-user { justify-content: flex-end; }
.scb-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream, #F5EBD2);
  border: 1px solid rgba(35, 31, 32, 0.25);
  flex: none;
  margin-right: 6px;
}
.scb-msg-body {
  max-width: 85%;
  padding: 9px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(35, 31, 32, 0.18);
  overflow-wrap: anywhere;
}
.scb-msg-user .scb-msg-body {
  background: var(--red, #ED1C24);
  border-color: var(--red, #ED1C24);
  color: #fff;
}
.scb-msg-body a { color: var(--red, #ED1C24); font-weight: 600; }
.scb-msg-user .scb-msg-body a { color: #fff; }
.scb-typing .scb-msg-body { color: rgba(35, 31, 32, 0.55); letter-spacing: 0.2em; }

/* Link buttons under a bot answer (shop links, directions, status). */
.scb-msg-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.scb-msg-links a {
  background: var(--char, #231F20);
  color: var(--cream, #F5EBD2) !important;
  text-decoration: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
}
.scb-msg-links a:hover,
.scb-msg-links a:focus-visible { background: var(--red, #ED1C24); }

.scb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
}
.scb-chip {
  background: #fff;
  border: 1.5px solid var(--char, #231F20);
  color: var(--char, #231F20);
  border-radius: 999px;
  padding: 6px 11px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.scb-chip:hover,
.scb-chip:focus-visible { background: var(--char, #231F20); color: var(--cream, #F5EBD2); }
.scb-chip-action {
  background: var(--red, #ED1C24);
  border-color: var(--red, #ED1C24);
  color: #fff;
}
.scb-chip-action:hover,
.scb-chip-action:focus-visible { background: var(--char, #231F20); border-color: var(--char, #231F20); color: var(--cream, #F5EBD2); }

/* Intake (follow-up) mini-form, rendered inside the message stream. */
.scb-intake {
  background: #fff;
  border: 1px solid rgba(35, 31, 32, 0.18);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scb-intake-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; font-weight: 600; }
.scb-intake-field input,
.scb-intake-field textarea {
  font: inherit;
  font-weight: 400;
  padding: 8px 10px;
  border: 1.5px solid rgba(35, 31, 32, 0.35);
  border-radius: 10px;
  background: var(--cream, #F5EBD2);
  color: var(--char, #231F20);
  resize: vertical;
}
.scb-intake-field input:focus,
.scb-intake-field textarea:focus { outline: 2px solid var(--red, #ED1C24); outline-offset: 0; }
.scb-intake-btns { display: flex; gap: 8px; align-items: center; }

.scb-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(35, 31, 32, 0.18);
  background: #fff;
}
.scb-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 9px 12px;
  border: 1.5px solid rgba(35, 31, 32, 0.35);
  border-radius: 999px;
  background: var(--cream, #F5EBD2);
  color: var(--char, #231F20);
}
.scb-input:focus { outline: 2px solid var(--red, #ED1C24); outline-offset: 0; }
.scb-send {
  background: var(--red, #ED1C24);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.scb-send:hover,
.scb-send:focus-visible { filter: brightness(1.1); }
.scb-send:disabled { opacity: 0.6; cursor: default; }

.scb-note {
  margin: 0;
  padding: 8px 12px 10px;
  font-size: 0.76rem;
  background: #fff;
  color: rgba(35, 31, 32, 0.75);
  border-top: 1px dashed rgba(35, 31, 32, 0.15);
}
.scb-note a { color: var(--red, #ED1C24); font-weight: 600; }

@media (max-width: 560px) {
  .scb-panel { max-height: calc(100vh - 210px); }
}