/* ==========================================================================
   SCS widgets — self-contained styles for the chat, tracking and manifest
   mount points. Deliberately does NOT depend on Tailwind or on the theme,
   so the same file works in the HTML prototype and inside Elementor.
   Every selector is prefixed .scs- to avoid collisions with any theme.
   ========================================================================== */

.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);
}
.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-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;
}

/* -------------------------------------------------------------------- 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);
}
.scs-msg { max-width: 82%; 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; padding: 0 1rem .75rem; background: var(--scs-bg-soft); }
.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 { right: 8px; bottom: 80px; height: calc(100vh - 100px); }
}
@media (prefers-reduced-motion: reduce) {
  .scs-chat-launcher, .scs-btn, .scs-chat__typing span { transition: none; animation: none; }
}