/* ==== Order-status chat widget ==============================================
   Markup: properties/readytheme_contentsection/__KJ_chat_widget.mvt (called by the global
   footer on every page; the header's Order Status buttons open it). JS: chat-widget.js.
   Moved from the content section's inline <style> (backlog PERF-2). Scoped under #osw-root.
   =========================================================================== */

#osw-root {
  /* Brand palette (from spec) */
  --osw-ink: #000;
  --osw-blue: #0066CC;       /* primary / interactive */
  --osw-blue-dark: #2a527a;  /* accents / hover */
  --osw-bg: #ffffff;
  --osw-surface: #f5f7fa;
  --osw-line: #e2e6ea;
  --osw-muted: #5a6672;
  --osw-danger: #b3261e;
  --osw-ok: #1a7f43;          /* status accent: shipped / delivered / refunded */
  --osw-ok-text: #157347;     /* AA-dark green for small header text on white */
  --osw-warn: #c47f00;        /* status accent: pending / awaiting / in-progress */
  --osw-warn-text: #8a5300;   /* AA-dark amber for small header text on white */
  --osw-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --osw-radius: 14px;
  --osw-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  --osw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000; /* above typical storefront chrome */
  font-family: var(--osw-font);
  color: var(--osw-ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%; /* no iOS landscape text inflation */
  text-size-adjust: 100%;
}
#osw-root *, #osw-root *::before, #osw-root *::after { box-sizing: border-box; }

/* ---- Launcher (circle) ---- */
.osw-launcher {
  width: 60px; height: 60px;
  border: none; border-radius: 50%;
  background: var(--osw-blue);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--osw-shadow);
  transition: transform .15s ease, background .15s ease;
  padding: 0;
}
.osw-launcher:hover { background: var(--osw-blue-dark); transform: translateY(-1px); }
.osw-launcher:focus-visible { outline: 3px solid var(--osw-blue-dark); outline-offset: 2px; }
.osw-launcher svg { width: 28px; height: 28px; }

/* ---- Panel ---- */
.osw-panel {
  display: none;
  flex-direction: column;
  width: 380px;
  height: 560px;
  /* vh is the toolbar-retracted height, so it overshoots on mobile; dvh tracks the
     toolbars but not the keyboard (that's "Mobile viewport" in the script). */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  background: var(--osw-bg);
  border-radius: var(--osw-radius);
  box-shadow: var(--osw-shadow);
  overflow: hidden;
}
#osw-root[data-osw-state="open"] .osw-panel { display: flex; }
#osw-root[data-osw-state="open"] .osw-launcher { display: none; }

.osw-header {
  background: var(--osw-blue-dark);
  color: #fff;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
}
.osw-header .osw-title { font-weight: 600; font-size: 15px; margin: 0; }
.osw-header .osw-sub { font-size: 12px; opacity: .85; margin: 1px 0 0; }
.osw-header-text { flex: 1; min-width: 0; }
.osw-min {
  background: transparent; border: none; color: #fff; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; font-family: inherit; font-size: 13px; font-weight: 600;
  line-height: 1; white-space: nowrap;
}
.osw-min:hover { background: rgba(255,255,255,.15); }
.osw-min:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.osw-body {
  flex: 1; overflow-y: auto; padding: 16px;
  overscroll-behavior: contain; /* don't chain scroll into the storefront page */
  background: var(--osw-surface);
  display: flex; flex-direction: column; gap: 12px;
}

/* ---- Messages ---- */
.osw-msg { max-width: 88%; padding: 10px 13px; border-radius: 12px; white-space: normal; word-wrap: break-word; }
.osw-msg.bot { background: #fff; border: 1px solid var(--osw-line); align-self: flex-start; border-bottom-left-radius: 4px; }
.osw-msg.user { background: var(--osw-blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.osw-msg.error { border-color: var(--osw-danger); color: var(--osw-danger); background: #fff; }
.osw-msg p { margin: 0 0 8px; } .osw-msg p:last-child { margin-bottom: 0; }
.osw-msg a { color: var(--osw-blue); }
.osw-msg.user a { color: #fff; text-decoration: underline; }
.osw-return-link { font-weight: 600; white-space: nowrap; }

.osw-typing { display: inline-flex; gap: 4px; align-items: center; }
.osw-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--osw-muted); animation: osw-bounce 1.2s infinite; }
.osw-typing span:nth-child(2) { animation-delay: .15s; }
.osw-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes osw-bounce { 0%,60%,100% { opacity: .3; transform: translateY(0);} 30% { opacity: 1; transform: translateY(-3px);} }

/* ---- Structured order reply ---- */
.osw-msg.osw-rich { max-width: 96%; padding: 13px 15px; }  /* dense replies get more room */
.osw-reply { line-height: 1.55; }
.osw-reply > * + * { margin-top: 18px; }                   /* clear separation between sections */
.osw-reply p { margin: 0; }
.osw-lead { color: var(--osw-muted); font-size: 13px; }
.osw-summary { font-weight: 600; font-size: 14.5px; color: var(--osw-ink); }

.osw-group { border-left: 3px solid var(--osw-line); padding: 2px 0 2px 14px; }
.osw-group.is-ok { border-left-color: var(--osw-ok); }
.osw-group.is-warn { border-left-color: var(--osw-warn); }
.osw-group-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--osw-muted); margin-bottom: 10px; line-height: 1.4;
}
.osw-group.is-ok .osw-group-head { color: var(--osw-ok-text); }
.osw-group.is-warn .osw-group-head { color: var(--osw-warn-text); }
.osw-group-head .osw-sep { color: var(--osw-muted); opacity: .45; margin: 0 6px; font-weight: 400; }

.osw-eta { font-size: 12.5px; color: var(--osw-muted); margin-bottom: 10px; }
.osw-eta strong { color: var(--osw-ink); font-weight: 600; }
.osw-gline { margin-bottom: 8px; }

/* tracking: label on its own line, then one row per number (multiple supported) */
.osw-track { margin-bottom: 12px; }
.osw-track-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--osw-muted); margin-bottom: 6px; }
.osw-track-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px 0; }
.osw-track-no { font-family: var(--osw-mono); font-size: 12.5px; color: var(--osw-ink); word-break: break-all; }
.osw-track-copy {
  font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; line-height: 1.3;
  border: 1px solid var(--osw-line); background: var(--osw-surface); color: var(--osw-blue);
  border-radius: 6px; padding: 3px 9px;
}
.osw-track-copy:hover { background: #fff; border-color: var(--osw-blue); }
.osw-track-copy.copied { color: var(--osw-ok-text); border-color: var(--osw-ok); background: #fff; }
.osw-track-link { font-size: 11px; font-weight: 600; color: var(--osw-blue); text-decoration: none; }
.osw-track-link:hover { text-decoration: underline; }

/* item rows: two lines — [SKU · quantity] then the full product name below */
.osw-items { display: flex; flex-direction: column; }
.osw-item { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; border-top: 1px solid var(--osw-line); }
.osw-item:first-child { border-top: none; padding-top: 2px; }
.osw-item.is-sub { padding-left: 18px; }
.osw-item-top { display: flex; align-items: center; gap: 10px; }
/* product code: bold mono, not a boxed chip; a dark tone (not muted) so it stands out */
.osw-sku {
  flex: 0 1 auto; min-width: 0; font-family: var(--osw-mono); font-size: 13px; font-weight: 700;
  color: #333; overflow-wrap: anywhere;
}
.osw-name { color: var(--osw-ink); overflow-wrap: anywhere; line-height: 1.45; }
.osw-qty {
  flex: 0 0 auto; margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--osw-muted); white-space: nowrap;
}
/* structured-view extras: per-item timing/note line, and a special-order tag */
.osw-subline { font-size: 12px; color: var(--osw-muted); margin-top: 2px; }
.osw-tag {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--osw-warn-text); background: #fff4e5;
  border: 1px solid #f3d9ac; border-radius: 4px; padding: 0 5px; margin-left: 6px;
  vertical-align: middle;
}
/* the expected ship date is the key fact in a pending row: a findable blue ETA flag */
.osw-eta-flag { margin-top: 5px; display: inline-flex; align-items: center; gap: 6px; }
.osw-eta-tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--osw-blue); border-radius: 4px; padding: 1px 6px;
}
.osw-eta-val { font-size: 13.5px; font-weight: 700; color: var(--osw-blue-dark); }
.osw-eta-tbd { font-weight: 600; color: var(--osw-muted); }
/* LLM section note: a small tinted text bubble, shown only when it adds real value */
.osw-note {
  font-size: 13px; font-weight: 500; color: var(--osw-ink); line-height: 1.5;
  background: #eef3f8; border: 1px solid #a9c6e6; border-radius: 12px;
  border-bottom-left-radius: 4px; padding: 9px 12px;  /* chat-bubble tail, like a bot message */
}
.osw-reply > .osw-note + * { margin-top: 10px; }  /* a little gap before the section it introduces */
/* long item lists collapse past 5 rows, with a peek of the 6th and a reveal button */
.osw-items-more[data-collapsed="1"] {
  max-height: 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
  mask-image: linear-gradient(to bottom, #000 35%, transparent);
}
.osw-more-btn {
  display: block; width: 100%; margin-top: 6px; padding: 6px 10px;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--osw-blue);
  background: none; border: 1px solid var(--osw-line); border-radius: 6px; cursor: pointer;
}
.osw-more-btn:hover { background: var(--osw-surface); border-color: var(--osw-blue); }

/* ---- Form ---- */
/* Shrinkable + scrollable so a short visible area (keyboard up, landscape) scrolls the
   form instead of clipping it; the message body gives up its space first (basis 0). */
.osw-form {
  background: #fff; border-top: 1px solid var(--osw-line); padding: 14px 16px;
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.osw-form.hidden { display: none; }
.osw-field { margin-bottom: 10px; }
.osw-field label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--osw-muted); margin-bottom: 4px; }
.osw-field input {
  width: 100%; padding: 9px 11px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--osw-line); border-radius: 8px; color: var(--osw-ink); background: #fff;
}
.osw-field input:focus { outline: none; border-color: var(--osw-blue); box-shadow: 0 0 0 3px rgba(0,102,204,.15); }
.osw-field .osw-err { color: var(--osw-danger); font-size: 11px; margin-top: 3px; display: none; }
.osw-field.invalid input { border-color: var(--osw-danger); }
.osw-field.invalid .osw-err { display: block; }
.osw-row { display: flex; gap: 10px; }
.osw-row .osw-field { flex: 1; min-width: 0; }

.osw-submit {
  width: 100%; padding: 11px; margin-top: 2px;
  background: var(--osw-blue); color: #fff; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s ease;
}
.osw-submit:hover:not(:disabled) { background: var(--osw-blue-dark); }
.osw-submit:disabled { opacity: .55; cursor: not-allowed; }
.osw-reset {
  width: 100%; padding: 10px; margin-top: 8px;
  background: #fff; color: var(--osw-blue); border: 1px solid var(--osw-blue); border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; display: none;
}
.osw-reset:hover { background: var(--osw-surface); }

/* ---- Touch: inputs under 16px make iOS zoom the page on focus (and stay zoomed) ---- */
@media (max-width: 900px), (pointer: coarse) {
  .osw-field input { font-size: 16px; }
}

/* ---- Floating panel follows the on-screen keyboard ----
   Mobile keyboards shrink only the visual viewport; fixed elements stay anchored to the
   layout viewport underneath it. On touch devices the script mirrors window.visualViewport
   into --osw-vvh / --osw-vvt and sets data-osw-vv, so the panel's bottom sits 20px above
   the keyboard. Mouse desktops never get data-osw-vv and keep bottom: 20px. */
#osw-root[data-osw-vv][data-osw-state="open"] {
  top: calc(var(--osw-vvt) + var(--osw-vvh) - 20px);
  bottom: auto;
  transform: translateY(-100%);
}
#osw-root[data-osw-vv] .osw-panel { max-height: calc(var(--osw-vvh) - 40px); }

/* ---- Tablet: taller, capped width ---- */
@media (max-width: 900px) and (min-width: 601px) {
  .osw-panel { width: 400px; height: calc(100vh - 40px); height: calc(100dvh - 40px); }
  #osw-root[data-osw-vv] .osw-panel { height: calc(var(--osw-vvh) - 40px); }
}
/* ---- Phone: full screen. Portrait phones, plus landscape phones (short touch screens)
   that would otherwise land in the tablet rule. KEEP IN SYNC with PHONE_MQ in chat-widget.js.
   Selectors are id-qualified so they outrank the floating/tablet rules above. ---- */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
  #osw-root { right: 0; bottom: 0; }
  #osw-root[data-osw-state="open"] {
    top: 0; left: 0; right: 0; bottom: auto;
    height: 100vh;   /* fallback where dvh is unsupported */
    height: 100dvh;  /* visible area with toolbars showing; 100vh overshoots it */
    transform: none;
  }
  /* Sized to the visual viewport, so the keyboard never covers the form. */
  #osw-root[data-osw-vv][data-osw-state="open"] {
    top: 0; bottom: auto;
    height: var(--osw-vvh);
    transform: translateY(var(--osw-vvt));
  }
  #osw-root[data-osw-state="open"] .osw-panel {
    width: 100%; height: 100%; max-height: none; border-radius: 0; border: none;
  }
  #osw-root .osw-launcher {
    position: fixed;
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  /* Safe areas only apply when the storefront uses viewport-fit=cover; else env() is 0. */
  #osw-root .osw-header {
    padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
             10px max(16px, env(safe-area-inset-left, 0px));
  }
  #osw-root .osw-body {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  #osw-root .osw-form {
    padding: 14px max(16px, env(safe-area-inset-right, 0px))
             max(14px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  /* The only way out of a full-screen panel: a full 44px tap target. */
  #osw-root .osw-min { min-height: 44px; margin-right: -8px; }
  /* Typing: the keyboard takes about half the screen, so hand the header's spare height
     to the form. The keyboard also covers the home indicator, so drop that inset. */
  #osw-root .osw-panel:has(.osw-form input:focus) .osw-sub { display: none; }
  #osw-root .osw-panel:has(.osw-form input:focus) .osw-header {
    padding-top: max(2px, env(safe-area-inset-top, 0px)); padding-bottom: 2px;
  }
  #osw-root .osw-panel:has(.osw-form input:focus) .osw-form { padding-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #osw-root .osw-launcher, #osw-root .osw-submit { transition: none; }
  .osw-typing span { animation: none; }
}

/* ---- Line-item view: status badges, kit nesting, muted shipped ---- */
.osw-status {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; border-radius: 4px; padding: 0 5px; vertical-align: middle;
  border: 1px solid transparent; white-space: nowrap;
}
.osw-status.is-ok { color: var(--osw-ok-text); background: #e7f5ec; border-color: #b7e0c6; }
.osw-status.is-warn { color: var(--osw-warn-text); background: #fff4e5; border-color: #f3d9ac; }
.osw-status.is-muted { color: var(--osw-muted); background: var(--osw-surface); border-color: var(--osw-line); }
/* nested components hang off the kit header via a connector glyph. No rail: the
   segment already owns the left rail, so a second one would collide with it. */
.osw-kit-parts { margin-top: 2px; }
.osw-item.osw-part { border-top: none; padding: 4px 0 4px 20px; position: relative; }
.osw-item.osw-part::before {
  content: "\2514"; position: absolute; left: 4px; top: 6px;
  color: var(--osw-muted); font-size: 12px; line-height: 1;
}
.osw-part-btn { margin-left: 20px; width: auto; }
/* compact "+N more tracking numbers" reveal (vs the full-width segment/part buttons) */
.osw-track-btn { width: auto; margin-top: 2px; padding: 3px 8px; font-size: 11px; }
/* shipping line: green check, and a bold/darkened ship date */
.osw-ship-check { color: var(--osw-ok); font-weight: 700; margin-right: 5px; }
.osw-ship-date { color: var(--osw-ink); font-weight: 700; }
.osw-muted-row .osw-name { color: var(--osw-muted); }
.osw-seg-count { color: var(--osw-muted); font-weight: 600; }
/* full-hide collapse variant (vs the .osw-items-more 28px peek) for shipped rows/parts */
.osw-items-more.osw-more-hide[data-collapsed="1"] { max-height: 0; -webkit-mask-image: none; mask-image: none; }
.osw-items-more.osw-more-hide[data-collapsed="0"] { max-height: none; }