/* ==========================================================================
   SCS widgets — self-contained styles for the chat, tracking and manifest
   mount points. Deliberately does NOT depend on Tailwind, so it stays
   portable regardless of what else styles the page.
   Every selector is prefixed .scs- to avoid collisions.
   ========================================================================== */

.scs-root {
  --scs-navy: #0b1e3d;
  --scs-navy-2: #0e2450;
  --scs-red: #d81f2a;
  --scs-red-dark: #b3151f;
  --scs-blue: #1d5bbf;
  --scs-line: #e5e7eb;
  --scs-muted: #6b7280;
  --scs-bg-soft: #f9fafb;
  --scs-radius: 10px;

  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--scs-navy);
  box-sizing: border-box;
}
.scs-root *, .scs-root *::before, .scs-root *::after { box-sizing: inherit; }

.scs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .875rem; line-height: 1;
  padding: .75rem 1.25rem; border-radius: var(--scs-radius);
  border: 0; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, opacity .15s ease;
}
.scs-btn--red { background: var(--scs-red); color: #fff; }
.scs-btn--red:hover { background: var(--scs-red-dark); }
.scs-btn--navy { background: var(--scs-navy); color: #fff; }
.scs-btn--navy:hover { background: var(--scs-navy-2); }
.scs-btn[disabled] { opacity: .55; cursor: not-allowed; }

.scs-input {
  width: 100%; font: inherit; font-size: .9375rem;
  padding: .75rem .875rem; border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius); background: #fff; color: var(--scs-navy);
  box-sizing: border-box;
  /* A long unbroken paste (a URL, a run-together reference number) must break
     rather than push past the field's edge — matters most for the quote
     form's textarea, which is multi-line and shows everything typed. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.scs-input:focus { outline: 2px solid var(--scs-blue); outline-offset: 1px; border-color: transparent; }

.scs-error {
  font-size: .8125rem; font-weight: 600; color: var(--scs-red);
  margin-top: .625rem;
}
.scs-success {
  font-size: .8125rem; font-weight: 600; color: #166534;
  background: #dcfce7; border: 1px solid #bbf7d0;
  border-radius: var(--scs-radius); padding: .625rem .875rem; margin-top: .625rem;
}
.scs-empty { font-size: .875rem; color: var(--scs-muted); padding: 1.5rem 0; }

/* Status pills, shared by tracking + manifests -------------------------- */
.scs-pill {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; padding: .3125rem .625rem; border-radius: 999px;
  white-space: nowrap;
}
.scs-pill--delivered  { background: #dcfce7; color: #14532d; }
.scs-pill--transit    { background: #dbeafe; color: #1e3a8a; }
.scs-pill--pending    { background: #f3f4f6; color: #374151; }
.scs-pill--exception  { background: #fee2e2; color: #7f1d1d; }

/* ---------------------------------------------------------------- TRACKING */
.scs-track { max-width: 640px; }
.scs-track__form { display: flex; gap: .75rem; flex-wrap: wrap; }
.scs-track__form .scs-input { flex: 1 1 260px; }

.scs-track__result {
  margin-top: 1.25rem; border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius); overflow: hidden;
}
.scs-track__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.125rem; background: var(--scs-bg-soft);
  border-bottom: 1px solid var(--scs-line);
}
.scs-track__ref { font-weight: 800; font-size: 1rem; letter-spacing: .01em; }
.scs-track__meta { font-size: .8125rem; color: var(--scs-muted); margin-top: .1875rem; }

.scs-timeline { list-style: none; margin: 0; padding: 1.125rem; }
.scs-timeline li {
  position: relative; padding: 0 0 1.25rem 1.75rem;
  border-left: 2px solid var(--scs-line); margin-left: .375rem;
}
.scs-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.scs-timeline li::before {
  content: ''; position: absolute; left: -7px; top: .25rem;
  width: 12px; height: 12px; border-radius: 999px;
  background: #fff; border: 2px solid var(--scs-line);
}
.scs-timeline li.is-current::before { background: var(--scs-red); border-color: var(--scs-red); }
.scs-timeline__label { font-weight: 700; font-size: .875rem; }
.scs-timeline__time { font-size: .75rem; color: var(--scs-muted); margin-top: .125rem; }

/* --------------------------------------------------------------- MANIFESTS */
.scs-manifests__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.scs-manifests__title { font-size: 1.125rem; font-weight: 800; margin: 0; }
.scs-manifests__filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.scs-manifests__filters .scs-input { width: auto; padding: .5rem .75rem; font-size: .8125rem; }

.scs-table-wrap { border: 1px solid var(--scs-line); border-radius: var(--scs-radius); overflow-x: auto; }
.scs-table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 620px; }
.scs-table th {
  text-align: left; font-size: .6875rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--scs-muted);
  padding: .75rem 1rem; background: var(--scs-bg-soft);
  border-bottom: 1px solid var(--scs-line); white-space: nowrap;
}
.scs-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--scs-line); vertical-align: middle; }
.scs-table tr:last-child td { border-bottom: 0; }
.scs-table tbody tr:hover { background: var(--scs-bg-soft); }
.scs-table__num { font-weight: 700; }
.scs-table__actions { display: flex; gap: .5rem; white-space: nowrap; }
.scs-link {
  font-size: .8125rem; font-weight: 700; color: var(--scs-blue);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.scs-link:hover { border-bottom-color: currentColor; }

.scs-summary {
  margin-top: 1rem; padding: .875rem 1rem;
  background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: var(--scs-radius); font-size: .875rem; line-height: 1.5;
}
.scs-summary__label {
  display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #9a3412; margin-bottom: .25rem;
}

/* -------------------------------------------------------------------- QUOTE */
.scs-quote { max-width: 640px; margin: 0 auto; }
.scs-quote__form {
  display: flex; flex-direction: column; gap: 1rem;
  background: #fff; border: 1px solid var(--scs-line);
  border-radius: 14px; padding: 1.5rem;
}
.scs-quote__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) {
  .scs-quote__row { grid-template-columns: 1fr 1fr; }
}
.scs-field { display: flex; flex-direction: column; gap: .375rem; }
.scs-field__label { font-size: .8125rem; font-weight: 700; color: var(--scs-navy); }
.scs-field__hint { font-size: .75rem; color: var(--scs-muted); margin: -.5rem 0 0; }
.scs-quote textarea.scs-input { resize: vertical; min-height: 96px; font-family: inherit; }
.scs-quote .scs-btn { align-self: flex-start; }

/* -------------------------------------------------------------------- CHAT */
.scs-chat-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  width: 56px; height: 56px; border-radius: 999px; border: 0;
  background: var(--scs-red); color: #fff; cursor: pointer;
  box-shadow: 0 8px 24px rgba(11, 30, 61, .28);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background-color .15s ease;
}
.scs-chat-launcher:hover { background: var(--scs-red-dark); transform: translateY(-2px); }
.scs-chat-launcher svg { width: 24px; height: 24px; }

.scs-chat-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 9999;
  width: 380px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 14px;
  box-shadow: 0 16px 48px rgba(11, 30, 61, .3);
  display: none; flex-direction: column; overflow: hidden;
}
.scs-chat-panel.is-open { display: flex; }

.scs-chat__head {
  background: var(--scs-navy); color: #fff; padding: .875rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.scs-chat__title { font-weight: 800; font-size: .9375rem; }
.scs-chat__sub { font-size: .75rem; color: #9db2d4; margin-top: .125rem; }
.scs-chat__close {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: 1.375rem; line-height: 1; padding: 0 .25rem; opacity: .75;
}
.scs-chat__close:hover { opacity: 1; }

.scs-chat__log {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .75rem;
  background: var(--scs-bg-soft);
  /* Column flex items default to min-height: auto, which stops this from
     shrinking below its messages' natural height — that's what let the
     input row get pushed below the panel's bottom edge (off-screen) when
     the panel itself got shorter, e.g. the mobile keyboard opening and
     shrinking --scs-vvh. min-height: 0 lets it actually shrink and scroll
     instead, so the form stays pinned inside the visible panel. */
  min-height: 0;
}
.scs-msg {
  max-width: 82%;
  /* .scs-chat__log is a flex container, and flex items default to
     min-width: auto — that lets a bubble's content force it wider than
     max-width if the text has no natural break point (a long token with no
     spaces). min-width: 0 lets it actually shrink to respect max-width, and
     overflow-wrap forces a break inside that width instead of overflowing —
     applies equally to the assistant's replies and the customer's own
     messages echoed back into the log. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: .625rem .875rem; border-radius: 12px; font-size: .875rem; line-height: 1.45;
}
.scs-msg--bot  { background: #fff; border: 1px solid var(--scs-line); align-self: flex-start; border-bottom-left-radius: 4px; }
.scs-msg--user { background: var(--scs-navy); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.scs-msg--error { background: #fee2e2; border: 1px solid #fecaca; color: #7f1d1d; align-self: flex-start; }

.scs-chat__typing { display: flex; gap: 4px; align-self: flex-start; padding: .75rem .875rem; }
.scs-chat__typing span {
  width: 7px; height: 7px; border-radius: 999px; background: #9ca3af;
  animation: scs-bounce 1.2s infinite ease-in-out;
}
.scs-chat__typing span:nth-child(2) { animation-delay: .15s; }
.scs-chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes scs-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.scs-chat__chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.scs-chip {
  font-size: .75rem; font-weight: 700; padding: .4375rem .75rem;
  border: 1px solid var(--scs-line); border-radius: 999px;
  background: #fff; color: var(--scs-navy); cursor: pointer;
}
.scs-chip:hover { border-color: var(--scs-navy); }

.scs-chat__form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--scs-line); background: #fff; }
.scs-chat__form .scs-input { padding: .625rem .75rem; font-size: .875rem; }
.scs-chat__send {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--scs-radius);
  border: 0; background: var(--scs-red); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.scs-chat__send:hover { background: var(--scs-red-dark); }
.scs-chat__send svg { width: 18px; height: 18px; }

.scs-chat__disclaimer { font-size: .6875rem; color: var(--scs-muted); text-align: center; padding: 0 .75rem .625rem; background: #fff; }

@media (max-width: 480px) {
  .scs-chat-panel {
    top: 76px; right: 8px; left: 8px; bottom: auto;
    width: auto; max-width: none;
    /* --scs-vvh (set in scs-widgets.js from the VisualViewport API) is the
       actual visible height, which shrinks when the on-screen keyboard
       opens — sizing off it instead of a bottom anchor keeps the panel (and
       the input row) inside the visible area instead of being covered. */
    height: calc(var(--scs-vvh, 100vh) - 76px - 16px);
    max-height: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scs-chat-launcher, .scs-btn, .scs-chat__typing span { transition: none; animation: none; }
}