/* ==========================================================================
   Kandy's Treats — Live chat + Careers dialogs
   Built on the existing tokens, so light/dark comes from the shared theme
   system rather than a second implementation.
   ========================================================================== */

/* ---- Shared overlay ----------------------------------------------------- */

.chat,
.careers {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.chat__scrim,
.careers__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 16, 23, 0.52);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}
.chat.is-open .chat__scrim,
.careers.is-open .careers__scrim { opacity: 1; }

/* ---- Chat panel --------------------------------------------------------- */

.chat__panel {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: min(390px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-mid) linear;
}
.chat.is-open .chat__panel { transform: none; opacity: 1; }

.chat__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: var(--kt-plum);
  color: #fff;
  flex: none;
}
.chat__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--kt-pink);
  color: #fff;
}
.chat__title { flex: 1; display: grid; line-height: 1.3; min-width: 0; }
.chat__title strong { font-size: 0.94rem; }
.chat__title span { font-size: 0.74rem; color: rgba(255, 255, 255, 0.72); }
.chat__head .icon-btn { color: rgba(255, 255, 255, 0.75); }
.chat__head .icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

.chat__thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat__day {
  align-self: center;
  margin: 6px 0;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  /* --ink-3 on --surface-3 lands at 4.44 — just under AA for text this
     small. */
  color: var(--ink-2);
  font-size: 0.7rem;
  font-weight: 700;
}
.chat__row { display: flex; }
.chat__row.is-mine { justify-content: flex-end; }
.chat__bubble {
  max-width: 82%;
  padding: 8px 12px 6px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 2px;
  word-break: break-word;      /* a long unbroken string must not widen the panel */
}
.chat__row.is-mine .chat__bubble {
  background: var(--kt-pink);
  border-color: var(--kt-pink);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.chat__row.is-them .chat__bubble { border-bottom-left-radius: 5px; }
.chat__who {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kt-pink);
}
.chat__body { font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; }
.chat__time {
  justify-self: end;
  font-size: 0.64rem;
  color: var(--ink-4);
}
.chat__row.is-mine .chat__time { color: rgba(255, 255, 255, 0.78); }
/*
   The sender label sits on a PINK bubble in the admin inbox and on a white
   one in the storefront, because "is-mine" means different people in the two
   apps: the customer's own messages on the storefront, the staff reply in the
   admin. --kt-pink on --kt-pink measured 1.0 — the role was rendering
   invisibly on every staff bubble in Support.
*/
.chat__row.is-mine .chat__who { color: rgba(255, 255, 255, 0.92); }
/* On the dark theme the them-bubble ground is #1a1217, where --kt-pink
   measured 4.07 — under AA, and this is 10.9px text. The brighter pink is
   already a token and clears it at 7.16. Light keeps --kt-pink, which sits on
   a white bubble and passes there. */
:root[data-theme="dark"] .chat__row.is-them .chat__who { color: var(--kt-pink-bright); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chat__row.is-them .chat__who {
    color: var(--kt-pink-bright);
  }
}
/* --ink-4 on a white bubble measured 2.61. The timestamp is small text and
   still has to be readable. */
.chat__row.is-them .chat__time { color: var(--ink-3); }

.chat__state {
  margin: auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
  color: var(--ink-3);
  font-size: 0.88rem;
}
.chat__stateicon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--kt-pink-50);
  color: var(--kt-pink);
}

.chat__compose {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.chat__input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}
.chat__input:focus-visible {
  outline: 3px solid var(--kt-pink-bright);
  outline-offset: 1px;
}
.chat__send {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* Unread badge on any trigger that wants one */
.chat__badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--kt-pink);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
}

/* ---- Careers dialog ----------------------------------------------------- */

.careers__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%) scale(0.98);
  width: min(560px, calc(100vw - 28px));
  max-height: min(88dvh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  opacity: 0;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-mid) linear;
}
.careers.is-open .careers__panel {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.careers__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.careers__head h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 3px; }
.careers__head p { margin: 0; color: var(--ink-3); font-size: 0.88rem; }
.careers__head .icon-btn { margin-left: auto; flex: none; }
.careers__body { padding: 20px 22px 24px; overflow-y: auto; }

.careers__done {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 16px 0 6px;
}
.careers__doneicon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--mint-50);
  color: var(--mint);
}
.careers__done h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.careers__done p { margin: 0; color: var(--ink-3); max-width: 44ch; }

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 640px) {
  .chat__panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  .careers__panel {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  .careers__panel .authrow { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__panel, .careers__panel, .chat__scrim, .careers__scrim { transition: none; }
}

/* ==========================================================================
   Mobile chat — a dedicated messaging view, not a shrunken popover
   --------------------------------------------------------------------------
   THE BUG THIS FIXES
   ------------------
   .chat sits at z-index 60 and .tabbar at 70, so the storefront's bottom
   navigation rendered ON TOP of the conversation. The composer lived at
   779-844px inside a 390x844 viewport and the tab bar covered 778-844 — the
   input was completely invisible and there was no way to reply. The panel
   also kept its desktop shape (a 390px card pinned bottom-right with a
   560px cap), so on a phone it was a popover pretending to be an app.

   THE SHAPE
   ---------
   Below 720px the panel becomes the whole viewport and is laid out as three
   rows: header / message list / composer. Only the middle row scrolls, so the
   composer cannot be pushed off-screen by a long conversation and the header
   cannot be scrolled away.

   HEIGHT
   ------
   100dvh, not 100vh. On mobile Safari and Chrome the URL bar collapses on
   scroll; vh is frozen to the LARGEST viewport, so a vh-sized panel is taller
   than the screen and its last row sits below the fold — which is the same
   class of bug as the tab bar, arrived at differently. dvh tracks the browser
   chrome as it moves. --kt-kb is the keyboard inset, set from visualViewport
   by js/components/chat.js; it is 0px on desktop and whenever no keyboard is
   showing.
   ========================================================================== */

@media (max-width: 719px) {
  .chat.is-open {
    /* Above the tab bar (70) rather than below it. Belt and braces: the
       storefront also hides the tab bar while the chat is open — see
       html.kt-chat-open below — but a stacking order that only works because
       something else is hidden is not a stacking order. */
    z-index: 120;
  }
  .chat__scrim { display: none; }   /* nothing behind to dim: the panel is full-bleed */

  .chat__panel {
    position: fixed;
    inset: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    /* The keyboard eats from the bottom. Shrinking the PANEL (rather than
       scrolling the page) keeps the composer glued to the top of the
       keyboard and leaves the message list scrollable above it. */
    height: calc(100dvh - var(--kt-kb, 0px));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: translateY(12px);
    display: grid;
    /* header / list / composer — the list is the only flexible row. */
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .chat.is-open .chat__panel { transform: none; }

  .chat__head {
    /* Never under the notch or the status bar. */
    padding-top: calc(13px + env(safe-area-inset-top, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
  }

  .chat__thread {
    min-height: 0;              /* required, or the grid row refuses to shrink */
    padding: 14px 14px 18px;
    overscroll-behavior: contain;   /* no scroll chaining to the page behind */
    -webkit-overflow-scrolling: touch;
  }

  .chat__compose {
    /* Home-indicator clearance. Only applied when the keyboard is DOWN: with
       it up the inset is already consumed by the keyboard, and adding it
       again leaves a visible gap under the input. */
    padding-bottom: calc(10px + var(--kt-safe-bottom, 0px));
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
  }

  .chat__bubble {
    max-width: 84%;
    /* break-word alone still lets an unbroken 80-character URL widen the
       row on some engines. anywhere is the one that always wraps. */
    overflow-wrap: anywhere;
  }
  .chat__input { font-size: 16px; }  /* < 16px makes iOS Safari zoom on focus */
}

/*
   While the mobile chat is open the storefront's own furniture steps aside.
   Hidden rather than merely covered: a tab bar peeking through a
   full-screen conversation is the thing being fixed, and leaving it tappable
   under the panel invites a mis-tap that navigates away mid-message.
   Restored the moment the chat closes.
*/
@media (max-width: 719px) {
  html.kt-chat-open .tabbar,
  html.kt-chat-open .stickycart { display: none; }

  /* The page behind must not scroll while a full-screen panel is over it.
     KT.lockScroll() already does this from script; this is the CSS half, and
     it is scoped to mobile because that is where the panel is full-bleed —
     the desktop popover leaves the page visible and untouched. */
  html.kt-chat-open,
  html.kt-chat-open body { overflow: hidden; }
}

/* ---- "New message" pill ------------------------------------------------ */

/*
   Shown only when a message arrives while the reader is scrolled up. Jumping
   someone to the bottom mid-sentence is how you make them lose their place,
   so the choice is handed back to them.
*/
.chat__jump {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  bottom: 78px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 0;
  background: var(--kt-plum);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: var(--sh-2);
  opacity: 0;
  pointer-events: none;
  /* visibility, not opacity alone: an opacity-0 button is still in the
     accessibility tree, so a screen reader would offer "Jump to the newest
     message" at every moment including the ones where there is no newer
     message to jump to. visibility takes it out of the tree and still
     transitions, because it is animatable between its two keywords. */
  visibility: hidden;
  transition: opacity var(--t-fast) linear,
              transform var(--t-fast) var(--ease-out),
              visibility 0s linear var(--t-fast);
}
.chat__jump.is-shown {
  opacity: 1;
  transform: translateX(-50%);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}
.chat__jump:focus-visible { outline: 3px solid var(--kt-pink-bright); outline-offset: 2px; }