:root {
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --border: #e3e0da;
  --bg: #fff9f0;
  --accent: #16342b;
  --accent-soft: #e8f0ec;
  --white: #fff9f0;
  --danger: #b3261e;
  --radius: 10px;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
}

a { color: inherit; }

/* Base look for every button in the app -- a soft pill outlined in the accent green,
   cream fill, bold accent-colored label (see the sample in the design reference: a
   rounded "Update" button with a dark green border/text on a cream background). This
   used to just reset iOS Safari's system-blue button text (see the note below) and
   otherwise fall through to the browser's native gray button chrome for any <button>
   that didn't opt into button.primary/button.secondary/etc -- those plain buttons are
   what this rule is actually for now. Every other button class in this file
   (button.primary, .tabs button, .cart-bar button, .card-actions button, and so on) is
   a more specific selector, so it still wins over this one and is completely
   unaffected -- this only changes buttons that were previously unstyled. */
button {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  background: var(--white);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
button:hover { background: var(--accent-soft); }

h1, h2, h3 { font-family: var(--font-serif); }

/* ---------- App shell: header + sidebar + main panel ---------- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-header .brand {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.app-header .brand img,
.auth-header .brand img {
  display: block;
  height: 60px;
  width: auto;
}
.app-header .header-right { display: flex; align-items: center; gap: 22px; }
.app-header .who { font-size: 13px; color: var(--muted); }
.logout-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-sans);
}
.logout-link:hover { opacity: 0.7; }

.page-shell {
  width: 75%;
  max-width: 1600px;
  margin: 0 auto;
}

.app-body {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 66px);
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  padding: 32px 24px;
  position: sticky;
  top: 66px;
  border-left: 1px solid var(--border);
}
.sidebar .nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 0;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-sans);
}
.sidebar .nav-item.active { color: var(--ink); font-weight: 700; }
.sidebar .nav-item:hover { color: var(--ink); }
.sidebar .nav-item.disabled { cursor: default; opacity: 0.5; }
.sidebar .nav-item.disabled:hover { color: var(--muted); }

/* Expandable sub-item tree under a top-level sidebar item (see .nav-group in
   seller.html) -- lets a page with its own in-page pill tabs (Orders, Reports/
   Balance, Account) also be navigated straight to a specific sub-tab from the
   sidebar, in sync with those same pill tabs. Only shown while that item's own
   page is the active one, so the tree stays uncluttered otherwise. */
.nav-subitems { margin: 2px 0 4px 12px; display: none; }
.nav-subitems.expanded { display: block; }
.nav-subitem {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  padding: 6px 0 6px 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-sans);
}
.nav-subitem.active { color: var(--ink); font-weight: 700; border-left-color: var(--accent); }
.nav-subitem:hover { color: var(--ink); }

.main-content {
  flex: 1;
  /* min-width:0 overrides the flex-item default of min-width:auto -- without it, a
     wide child (a data table, the messaging two-pane layout) refuses to shrink below
     its own content width and forces the whole page wider than the viewport on
     mobile, instead of letting that child's own overflow-x:auto handle scrolling. */
  min-width: 0;
  padding: 32px 0 60px 36px;
}

.page-title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--ink);
}
.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
}
.page-title-row .page-title { margin: 0; }
.page-title-actions { display: flex; align-items: center; gap: 10px; }

.main-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px 28px;
}

/* ---------- Auth pages (no shell) ---------- */

.auth-header {
  padding: 48px 32px 0;
  text-align: center;
}
.auth-header .brand {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  display: inline-block;
}

.auth-shell {
  max-width: 420px;
  margin: 20px auto 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.auth-shell h1 {
  font-size: 22px;
  margin: 0 0 4px;
}
.auth-shell .sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }

/* Explanatory paragraph on contact.html, above the .sub line -- distinct from .sub
   (which is a short muted instruction like "Enter your email...") since this is actual
   marketing copy about the platform and reads better at full text color with roomier
   line-height rather than the muted, compact treatment. */
.auth-shell .platform-blurb {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* Same platform-explainer copy, reused below the login box -- deliberately much
   quieter here than the contact.html version above: no card/border, small muted
   text, centered, so it reads as a footnote rather than competing with the login
   form for attention. */
.auth-footer-blurb {
  max-width: 420px;
  margin: 0 auto 40px;
  padding: 0 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--white);
  font-family: inherit;
}

.role-picker {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.role-picker label {
  flex: 1;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
}
.role-picker input { display: none; }
.role-picker label.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

button.primary {
  width: 100%;
  margin-top: 22px;
  padding: 12px;
  background: var(--accent);
  color: var(--white);
  border: none;
  /* Fully rounded, matching the filled "All categories" pill look everywhere else in
     the app now uses for its active/primary control state -- was 8px (a much squarer
     rounded-rect) before. */
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
button.primary:hover { opacity: 0.92; }

#checkoutApprovalBtn {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
}
#checkoutApprovalBtn:hover { background: var(--accent-soft); }

.small-link { font-size: 13px; text-align: center; margin-top: 16px; color: var(--muted); }

.field-error {
  border-color: var(--danger) !important;
  background: #fbeceb !important;
}
.error-box {
  background: #fbeceb;
  color: var(--danger);
  border: 1px solid #f0c9c6;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 14px;
  display: none;
}

/* Pill-tab style, matching the "All categories"/brand-filter pills on the marketplace
   (see .brand-filter below) -- every .tabs group in the app (Orders sub-tabs, Account
   tabs, Messages/Balance sub-tabs, etc.) uses this same rounded, outlined-until-active
   look now instead of the old underline-tab treatment, so tab controls read consistently
   wherever they show up. */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: none; }
.tabs button {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-sans);
}
.tabs button.active { background: var(--accent); color: var(--white); border-color: var(--accent); }
.tabs button:hover:not(.active) { background: var(--accent-soft); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin: 24px 0 14px;
}
.section-title:first-child { margin-top: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.product-card { display: flex; flex-direction: column; gap: 6px; }
.product-card .seller-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.seller-tag-logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
  vertical-align: -3px;
  margin-right: 5px;
}
.product-card h3 { margin: 0; font-size: 16px; font-weight: 600; }
.product-card .desc { font-size: 13px; color: var(--muted); flex-grow: 1; }
.product-card .price { font-weight: 700; font-size: 15px; font-family: var(--font-sans); }
.retail-price { font-size: 12px; color: var(--muted); margin-top: 1px; }
.product-card .meta { font-size: 12px; color: var(--muted); }
.product-card .add-row { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.product-card .add-row input { width: 70px; }
.product-card .add-row button {
  flex: 1;
  padding: 8px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.badge.direct { background: #e8f0ec; color: var(--accent); }
.badge.rep { background: #fdeecb; color: #8a5a00; }

.cart-bar {
  /* Fixed (not sticky) -- this bar sits as the last element in <body>, outside the
     scrolling page-shell, so there's nothing below it to give sticky positioning room
     to "stick" against on a tall page; fixed pins it to the viewport bottom reliably
     regardless of document flow or scroll position. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-bar .total { font-weight: 700; font-size: 16px; }
.cart-bar button {
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.cart-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
button:disabled, input:disabled { opacity: 0.5; cursor: not-allowed; }
.cart-bar .view-cart-btn {
  background: var(--white);
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* ---- cart modal ---- */
.cart-modal-list { max-height: 55vh; overflow-y: auto; margin: 10px 0; }
.cart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.cart-row:last-child { border-bottom: none; }
.cart-row-tester {
  padding-left: 28px;
  border-left: 2px solid var(--border);
  margin-left: 12px;
}
.cart-row-tester .cart-row-thumb { width: 36px; height: 36px; }
.cart-row-tester .cart-row-name { font-weight: 500; font-size: 13px; color: var(--muted); }
.cart-row-thumb {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: #f0ede7;
  flex-shrink: 0;
}
.cart-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-row-thumb.placeholder {
  background: repeating-linear-gradient(45deg, #f0ede7, #f0ede7 6px, #ece7de 6px, #ece7de 12px);
}
.cart-row-info { flex: 1; min-width: 0; }
.cart-row-name { font-size: 14px; font-weight: 600; }
.cart-row-seller { font-size: 12px; color: var(--muted); }
.cart-row-price { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cart-row-add-tester {
  display: block;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0 0;
  text-align: left;
}
.cart-row-add-tester:hover { text-decoration: underline; }
.cart-row input.cart-row-qty {
  width: 56px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  flex-shrink: 0;
  text-align: center;
}
.cart-row-total { font-size: 14px; font-weight: 700; width: 70px; text-align: right; flex-shrink: 0; }
.cart-row-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
}
.cart-row-remove:hover { color: #a3271f; }
.cart-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cart-modal-total { font-size: 15px; }
.cart-modal-total strong { font-size: 18px; }
.link-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 12px 0 2px;
}
.link-btn:hover { text-decoration: underline; }

/* full Cart page (non-modal embed of the same row markup) */
.cart-page .cart-modal-list { max-height: none; margin: 0 0 14px; }
.cart-page .cart-modal-footer { border-top: 1px solid var(--border); }

.account-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.account-picker button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 13px;
}
.account-picker button.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.account-picker button.new-account-btn {
  border-style: dashed;
  color: var(--accent);
  font-weight: 600;
}
.account-picker button.new-account-btn:hover { background: var(--accent-soft); }
.picker-draft-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #d64545;
  color: #fff;
  font-size: 8px;
  margin-right: 5px;
  vertical-align: middle;
}

.empty-state { color: var(--muted); font-size: 14px; padding: 20px 0; text-align: center; }

.toast {
  position: fixed;
  top: 16px;
  right: 16px;
  background: var(--accent);
  color: white;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  display: none;
  z-index: 50;
}

/* Tiny "Report a bug" / "Contact us" link pair, bottom-left on every page. Kept below
   the cart-bar's z-index (40) on purpose -- when the cart bar is showing on buyer/rep
   pages it's fine for this to sit underneath it rather than competing for the corner. */
.support-footer {
  position: fixed;
  left: 14px;
  bottom: 8px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.support-footer-brand {
  font-weight: 700;
}
.support-footer a {
  color: var(--muted);
  text-decoration: none;
}
.support-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.form-row { display: flex; gap: 12px; }
.form-row > div { flex: 1; }

.thumb-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #f0ede7; }
.product-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Second photo shown on hover, see productImageHtml() in app.js. Gated to devices with a
   real mouse/trackpad -- on touch devices ":hover" can stick after a tap, which would
   otherwise leave the wrong photo showing until the seller/buyer taps elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .product-thumb-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .thumb-wrap:hover .product-thumb-hover { opacity: 1; }
}
.product-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
  background: repeating-linear-gradient(45deg, #f0ede7, #f0ede7 10px, #ece7de 10px, #ece7de 20px);
}

.image-input-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.image-input-row .fields { flex: 1; }
.image-input-row .preview-box {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0ede7;
  flex-shrink: 0;
}
.image-input-row .preview-box img { width: 100%; height: 100%; object-fit: cover; display: none; }
input[type=file] {
  width: 100%;
  font-size: 12px;
  padding: 6px 0;
}
.hint { font-size: 11px; color: var(--muted); margin-top: 4px; }

.edit-form { display: flex; flex-direction: column; gap: 8px; }

.photo-gallery-manager { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 4px; }
.photo-gallery-manager label { margin: 0 0 2px; }
.photo-gallery-manager .gallery-add-btn { margin-top: 6px; }
.gallery-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.gallery-item { width: 76px; }
.gallery-item img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; background: #f0ede7; display: block; }
.gallery-item-actions { display: flex; gap: 3px; margin-top: 4px; }
.gallery-item-actions button {
  flex: 1;
  padding: 2px 0;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 11px;
  line-height: 1.4;
}
.gallery-item-actions button:disabled { opacity: 0.35; cursor: default; }
.gallery-item-actions button.gallery-remove { color: #b3261e; }

.variant-manager { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 4px; }
.variant-manager label { margin: 0 0 2px; }
.variant-manager .variant-label-input { margin-bottom: 10px; }
.variant-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.variant-row { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #faf8f4; border-radius: 6px; }
.variant-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.variant-row-main input[type="text"], .variant-row-main input[type="number"] { width: auto; flex: 1; min-width: 90px; margin: 0; }
.variant-row-main input[type="date"] { width: auto; margin: 0; }
.variant-row .variant-oos-label { display: flex; align-items: center; gap: 5px; font-weight: 400; font-size: 12px; white-space: nowrap; margin: 0; }
.variant-row .variant-oos-label input { width: auto; margin: 0; }
.variant-row .variant-remove {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  color: #b3261e; font-size: 14px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.variant-reorder-btns { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.variant-reorder-btns button {
  width: 20px; height: 16px; border-radius: 3px; border: 1px solid var(--border); background: #fff;
  font-size: 10px; line-height: 1; cursor: pointer; padding: 0;
}
.variant-reorder-btns button:disabled { opacity: 0.3; cursor: default; }
.variant-row-tester { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 30px; }
.variant-row-tester label { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; margin: 0; }
.variant-row-tester select, .variant-row-tester input { width: auto; flex: 1; min-width: 90px; margin: 0; font-size: 12px; }
.variant-manager .variant-add-btn { margin-top: 2px; }

.variant-picker { margin: 6px 0 10px; }
.variant-picker label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.variant-picker select { width: 100%; margin: 0; }
.edit-form .form-row-tight { display: flex; gap: 8px; }
.edit-form .form-row-tight > div { flex: 1; }
.edit-form label { margin: 6px 0 2px; font-size: 12px; }
.card-actions { display: flex; gap: 8px; margin-top: 8px; }
.card-actions button {
  flex: 1;
  padding: 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
}
.card-actions button.save { background: var(--accent); color: white; border-color: var(--accent); }
.card-actions button.cancel { color: var(--muted); }

.account-info { display: flex; flex-direction: column; gap: 2px; }
.account-info .field { padding: 14px 0; border-bottom: 1px solid var(--border); }
.field-line { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.account-info .field:last-child { border-bottom: none; }
.account-info .field .field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 4px; }
.account-info .field .field-value { font-size: 15px; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-box {
  background: var(--white);
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px 26px 26px;
}
.modal-box .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}
.modal-box .modal-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; margin: 0; }
.modal-box .modal-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
}
.modal-box .modal-meta { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.modal-box .modal-meta div { padding: 3px 0; }

.order-row { cursor: pointer; }
.order-row:hover td { background: var(--accent-soft); }

.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.item-row:last-child { border-bottom: none; }
.item-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: #f0ede7;
  flex-shrink: 0;
}
.item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  background: repeating-linear-gradient(45deg, #f0ede7, #f0ede7 6px, #ece7de 6px, #ece7de 12px);
}
.item-row .item-info { flex: 1; }
.item-row .item-name { font-size: 14px; font-weight: 600; }
.item-row .item-qty { font-size: 12px; color: var(--muted); }
.item-row .item-total { font-size: 14px; font-weight: 700; }

.modal-total-row {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
}

/* ---- printable order page ---- */
/* Widened from 900px so the two-column layout below (order content + a real
   Shipping details sidebar) has room to breathe instead of squeezing the sidebar
   into leftover space -- see .print-sheet-body.has-sidebar. */
.print-page { max-width: 1140px; margin: 0 auto; padding: 32px 24px 60px; }
.print-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.print-toolbar a { font-size: 13px; color: var(--muted); text-decoration: underline; }
.print-toolbar .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.print-toolbar button {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--white);
  white-space: nowrap;
}
.print-toolbar button.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  /* Reset the generic button.primary full-width-form-button rule (width:100%,
     margin-top:22px) so primary toolbar actions stay small pills like the rest of
     the toolbar, instead of ballooning into giant standalone bars. */
  width: auto;
  margin-top: 0;
}
.print-toolbar button#payNowBtn.primary { background: #3c7a63; border-color: #3c7a63; }
.print-toolbar button#payNowBtn.primary:hover { background: #346a56; }
.print-toolbar button#fulfillBtn.primary { background: #2ea86e; border-color: #2ea86e; }
.print-toolbar button#fulfillBtn.primary:hover { background: #279260; }
/* Same treatment for the Shipping details sidebar's own copy of this button, next to
   "+ Add package" -- see fulfillBtnSidebar in order-print.html. */
#fulfillBtnSidebar.primary { background: #2ea86e; border-color: #2ea86e; }
#fulfillBtnSidebar.primary:hover { background: #279260; }
/* "More" overflow menu -- holds the less-frequent/destructive order actions (cancel,
   decline, refund) so the toolbar doesn't keep growing a new always-visible pill every
   time an order action gets added. See toolbarMoreBtn/updateMoreMenuVisibility. */
.toolbar-more-wrap { position: relative; }
.toolbar-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  z-index: 20;
}
.toolbar-more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.toolbar-more-menu button:hover { background: var(--accent-soft); }
.toolbar-more-menu button.danger-item { color: var(--danger); }
.toolbar-more-menu button.danger-item:hover { background: #fbeceb; }

/* Small pill button style shared by secondary order-page actions that live outside
   the top toolbar (Edit order / Check pricing on an unpaid draft, Save next to the
   Rep credit picker) -- keeps them visually consistent with the compact toolbar pills
   above instead of falling back to the app's bigger default button size. */
.btn-pill-sm {
  padding: 7px 14px !important;
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 600;
  border: 1px solid var(--border) !important;
  width: auto !important;
  margin-top: 0 !important;
}

/* "Shipping details" box on order-print.html (seller-only, no-print) -- Ship from
   summary, Buy labels (disabled/"Coming soon") vs Enter tracking manually toggle, and
   the multi-package rows underneath. See renderPackageRows/packageRowHtml. */
.shipping-details-box {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfaf7;
}
.ship-from-box {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 12px;
}
.ship-mode-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ship-mode-option {
  flex: 1 1 200px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  position: relative;
  cursor: pointer;
  background: var(--white);
}
.ship-mode-option.selected { border-color: var(--accent); background: var(--accent-soft, #e8f0ec); }
.ship-mode-option.disabled { cursor: not-allowed; opacity: 0.6; }
.ship-mode-option input[type="radio"] { position: absolute; top: 10px; right: 10px; }
.ship-mode-title { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.ship-mode-sub { font-size: 11px; color: var(--muted); }
.coming-soon-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted);
  background: var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
}
.package-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--white);
}
.package-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.package-row-title { font-size: 12px; font-weight: 700; }
.remove-package-btn {
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  width: auto;
  padding: 0;
}
.package-row-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.package-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 130px; }
.package-field label { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.package-field select, .package-field input { width: 100%; }

.print-sheet { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 32px; }
.print-sheet .brand-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.print-sheet .brand-row img { height: 41px; }
.print-sheet .order-num { font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
.print-sheet .order-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* Order content (addresses/items/totals) alongside a sticky Shipping details
   sidebar, seller-only -- buyers/reps never get a sidebar (nothing renders in it for
   them), so .has-sidebar only applies when isSeller, and the plain single-column rule
   below covers everyone else. Collapses to a single stacked column on narrower
   screens (see the 860px breakpoint) and for print (the sidebar's contents are all
   .no-print anyway, but forcing display:block here avoids an empty second grid
   column/gap showing up on the printed page). */
.print-sheet-body { display: block; }
.print-sheet-body.has-sidebar {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
.print-sheet-sidebar { position: sticky; top: 20px; }
@media print {
  .print-sheet-body.has-sidebar { display: block; }
}
@media (max-width: 860px) {
  .print-sheet-body.has-sidebar { display: block; }
  .print-sheet-sidebar { position: static; margin-top: 20px; }
}

.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.addr-grid .addr-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 4px; }
.addr-grid .addr-body { font-size: 13px; line-height: 1.5; }
.print-items table { margin-top: 10px; }
.print-items .thumb-cell { width: 44px; }
.print-items img.print-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
.item-row-tester td:nth-child(2) { padding-left: 26px; color: var(--muted); font-size: 13px; }
.item-row-tester .thumb-cell { opacity: 0; }
.print-total-row td { font-weight: 700; font-size: 15px; padding-top: 12px; }
.print-shipping-row td { color: var(--muted); font-size: 13px; padding-top: 4px; border-bottom: none; }
.print-credit-row td:last-child { color: #3c7a63; font-weight: 600; }
.remove-promo-btn {
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  color: #b3261e; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; vertical-align: middle;
}
.remove-promo-btn:disabled { opacity: 0.4; cursor: default; }
@media print {
  .no-print { display: none !important; }
  body { background: white; }
  .print-sheet { border: none; padding: 0; }
  .print-page { padding: 0; max-width: none; }
}

/* ---- nav badge, category picker ---- */
.sidebar .nav-item.nav-item-row { display: flex; align-items: center; justify-content: space-between; }
.nav-badge {
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.category-row { display: flex; gap: 8px; align-items: flex-end; }
.category-row select { flex: 1; }
.category-row .new-cat { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.category-row .new-cat input { flex: 1; }
.category-row .new-cat button {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.brand-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.brand-filter button {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 13px;
}
.brand-filter button.active { background: var(--accent); color: white; border-color: var(--accent); }
.category-filter { margin-top: 12px; }
.manage-cat-pill {
  background: #ececec;
  border-color: #ececec;
  color: var(--muted);
  font-weight: 600;
}
.manage-cat-pill:hover { background: #e0e0e0; border-color: #e0e0e0; }

/* Facebook-profile-style storefront banner: header image, logo overlapping bottom-left,
   name + description below. Shown atop a brand-filtered catalog and previewed live on
   the seller's own Storefront settings page. */
.storefront-banner {
  margin-bottom: 20px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
}
.storefront-banner-promo {
  background: var(--accent);
  color: var(--white);
  font-size: 13px;
  padding: 9px 20px;
  text-align: center;
}
.storefront-banner-header {
  position: relative;
  width: 100%;
  height: 260px;
  background: var(--border) center/cover no-repeat;
}
.storefront-banner-crop-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: auto;
  padding: 7px 12px;
  border: none;
  border-radius: 7px;
  background: rgba(26, 26, 26, 0.65);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.storefront-banner-crop-btn:hover { background: rgba(26, 26, 26, 0.8); }
.storefront-banner-body { position: relative; padding: 50px 20px 18px; }
.storefront-banner-logo {
  position: absolute;
  left: 20px;
  top: -45px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid var(--white);
  background: var(--white) center/cover no-repeat;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.storefront-banner-logo.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--muted);
  background: var(--accent-soft);
}
.storefront-banner-name { font-family: var(--font-serif); font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.storefront-banner-desc { font-size: 13px; color: var(--muted); white-space: pre-wrap; max-width: 640px; line-height: 1.5; }
.storefront-banner-fulfillment { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }

.storefront-banner-minimize-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  width: auto;
  padding: 6px 12px;
  border: none;
  border-radius: 7px;
  background: rgba(26, 26, 26, 0.65);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.storefront-banner-minimize-btn:hover { background: rgba(26, 26, 26, 0.8); }

.storefront-banner-collapsed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
.storefront-banner-collapsed .storefront-banner-logo.small {
  position: static;
  width: 30px;
  height: 30px;
  border-width: 2px;
  box-shadow: none;
  font-size: 14px;
  flex-shrink: 0;
}
.storefront-banner-collapsed .storefront-banner-name { margin: 0; font-size: 14px; }
.storefront-banner-collapsed-promo {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.storefront-banner-collapsed .storefront-banner-toggle { margin-left: auto; width: auto; }

/* Product detail page (image left, buy box right, description below) */
.product-detail-back { padding: 0; margin-bottom: 16px; }
.product-detail { display: grid; grid-template-columns: minmax(0, 525px) 1fr; gap: 32px; margin-bottom: 24px; }
.product-detail-media .thumb-wrap { border-radius: 14px; }
.product-detail-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.product-detail-thumb-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 8px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: #f0ede7;
}
.product-detail-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-detail-thumb-btn.active { border-color: var(--accent); }
.product-detail-buy { display: flex; flex-direction: column; }
.product-detail-buy .seller-tag { margin-bottom: 6px; }
.product-detail-name { font-family: var(--font-serif); font-size: 26px; font-weight: 600; margin: 2px 0 6px; }
.product-detail-price { font-size: 20px; font-weight: 600; margin-top: 12px; }
.product-detail-price + .retail-price { font-size: 13px; margin-top: 2px; }
.product-detail-buy .meta { margin-bottom: 10px; }
.product-detail-buy .tester-check-row { margin: 6px 0; }
.product-detail-buy .add-row { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; max-width: 320px; }
.product-detail-buy .add-row input { width: 80px; }
.product-detail-buy .add-row button.primary { width: auto; flex: 1; margin-top: 0; padding: 0 16px; font-size: 14px; }
.product-detail-desc-text { white-space: pre-wrap; line-height: 1.6; font-size: 14px; color: var(--ink); max-width: 480px; }
@media (max-width: 700px) {
  .product-detail { grid-template-columns: 1fr; }
  .product-detail-media { max-width: 450px; }
}

.product-thumb-link { cursor: pointer; display: block; }

.report-store-group { margin-bottom: 22px; }
.report-store-group:last-child { margin-bottom: 0; }
.report-store-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.report-order-card { margin-bottom: 10px; padding: 14px 16px; }
.report-order-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.report-order-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.report-order-items { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.report-order-item-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  padding: 3px 0;
}
.report-order-item-row .tester-tag { font-style: italic; }

.manage-category-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.manage-category-row .manage-category-input { flex: 1; margin: 0; }
.manage-category-row button {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.manage-category-row .save-category-btn { color: var(--accent); border-color: var(--accent); }
.manage-category-row .save-category-btn:hover { background: var(--accent-soft); }
.manage-category-row .delete-category-btn { color: #b3261e; border-color: #b3261e; }
.manage-category-row .delete-category-btn:hover { background: #fbe6e6; }
.sku-tag { font-size: 11px; color: var(--muted); font-family: var(--font-mono, monospace); }
.oos-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #a3271f;
  background: #fbe6e4;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
}
.preorder-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #8a5a00;
  background: #fdeecb;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
}
.item-oos-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
}
.item-oos-toggle input { width: auto; margin: 0; }
.tester-check-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 6px;
}
.tester-check-row input { width: auto; margin: 0; }
.tester-standalone-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.tester-standalone-btn:hover { opacity: 0.8; }
.oos-qty-original { text-decoration: line-through; color: var(--muted); margin-right: 6px; }
.oos-qty-zero { font-weight: 700; color: #a3271f; }

/* ---- locations list ---- */
.location-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.location-card .loc-info { font-size: 13px; line-height: 1.5; }
.location-card .loc-label { font-weight: 700; }
.location-card .loc-actions { display: flex; gap: 8px; flex-shrink: 0; }
.location-card .loc-actions button {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
}
.default-badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
}
.account-section { margin-top: 28px; }
.account-section:first-child { margin-top: 0; }

/* ---- messaging ---- */
.msg-layout { display: flex; gap: 20px; min-height: 400px; }
.msg-list { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border); padding-right: 16px; }
.msg-list-item {
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.msg-list-item:hover { background: var(--bg); }
.msg-list-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.msg-pending-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #b3401f;
  flex-shrink: 0;
}
.msg-thread-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.msg-unread-list-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
}
.msg-alert-note {
  font-size: 11px;
  font-weight: 600;
  color: #b3401f;
}
.msg-thread { flex: 1; display: flex; flex-direction: column; min-height: 380px; min-width: 0; }
.msg-bubbles { flex: 1; overflow-y: auto; max-height: 420px; padding-right: 4px; }
.msg-bubble { margin-bottom: 14px; max-width: 80%; }
.msg-bubble.from-me { margin-left: auto; text-align: right; }
.msg-bubble .msg-meta { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.msg-bubble .msg-body {
  display: inline-block;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: left;
}
/* three distinct bubble colors, one per role, regardless of who's viewing */
.msg-bubble.role-buyer .msg-body { background: #e7eef8; color: #2c4a73; }
.msg-bubble.role-seller .msg-body { background: var(--accent-soft); color: var(--accent); }
.msg-bubble.role-rep .msg-body { background: #faf1e0; color: #7a5518; }
.msg-bubble .msg-pending-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8a5a00;
  background: #fdeecb;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
}
.msg-compose { display: flex; gap: 8px; margin-top: 12px; }
.msg-compose textarea { flex: 1; resize: none; }
.msg-compose button {
  padding: 0 18px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
/* rep's pending-review row: the message bubble (colored by sender role, same as
   normal bubbles) plus a small check/x action pair to its right. Check approves
   the message as-is; x rejects it (see .rejected-msg below) and the rep is
   expected to write their own reply via the compose box underneath. */
.msg-bubble-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  max-width: 100%;
}
.msg-bubble.pending-decision {
  margin-bottom: 0;
  max-width: none;
  flex: 1;
  border: 1px dashed #c99a3a;
}
.pending-decision-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}
.msg-decision-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-decision-btn.approve { color: #146c2e; }
.msg-decision-btn.approve:hover { background: #e4f6e9; border-color: #146c2e; }
.msg-decision-btn.reject { color: #a3271f; }
.msg-decision-btn.reject:hover { background: #fbe6e4; border-color: #a3271f; }
.msg-decision-btn.restore { color: #4a4a4a; font-size: 15px; }
.msg-decision-btn.restore:hover { background: #eee; border-color: #4a4a4a; }

/* rep-only view of a message they rejected -- grayed out, never reached the other party */
.msg-bubble.rejected-msg {
  opacity: 0.55;
  margin-bottom: 14px;
}
.msg-bubble.rejected-msg .msg-body { text-decoration: line-through; background: var(--bg); color: var(--muted); }

/* ---- rep sales report ---- */
.report-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.report-controls select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
}
.report-controls .toggle-group { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.report-controls .toggle-group button {
  padding: 8px 14px;
  border: none;
  background: var(--white);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.report-controls .toggle-group button.active { background: var(--accent); color: white; }
.report-cards { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.report-card {
  flex: 1;
  min-width: 220px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.report-card .report-card-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.report-card .report-card-value { font-family: 'Fraunces', serif; font-size: 30px; margin-bottom: 4px; }
.report-card .report-card-sub { font-size: 13px; color: var(--muted); }
.report-change {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 6px;
}
.report-change.up { color: #146c2e; background: #e4f6e9; }
.report-change.down { color: #a3271f; background: #fbe6e4; }
.report-change.flat { color: var(--muted); background: var(--bg); }

/* ---- order status badges ---- */
.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
}
.status-badge.status-submitted { background: #e6f1fb; color: #0c447c; }
.status-badge.status-pending { background: #faeeda; color: #854f0b; }
.status-badge.status-fulfilled { background: #eaf3de; color: #3b6d11; }
.status-badge.status-awaiting_approval { background: #f0e6f6; color: #6b3fa0; }
.status-badge.status-declined { background: #fbeceb; color: #a3271f; }
.status-badge.status-approved { background: #eaf3de; color: #3b6d11; }
.status-badge.status-rejected { background: #fbeceb; color: #a3271f; }
.status-badge.status-suspended { background: #ececec; color: #555; }

/* ---- rep order channel badge: "Rep order" vs "Direct order" (see channelBadgeHtml
   in app.js) -- reuses the same pill shape as .status-badge, distinct muted colors so
   it reads as a secondary tag rather than competing with the status badge. ---- */
.channel-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
}
.channel-badge-rep { background: #eef2fb; color: #35508c; }
.channel-badge-direct { background: #f5f0e6; color: #8a6a2f; }

.order-edit-panel {
  background: #fdf8ee;
  border: 1px solid #f0e0b8;
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 18px;
}
.order-edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.order-edit-row:last-child { border-bottom: none; }
/* min-width:0 lets this flex item actually shrink/wrap its own text instead of being
   forced wide by its siblings -- without it, the row's overall width tries to fit
   everything on one line and the .link-btn overrides below (which used to inherit
   .link-btn's block/width:100% and blow up huge) would starve this of room. */
.order-edit-row span { flex: 1 1 auto; min-width: 0; }
.order-edit-row input { width: 70px; flex: none; }
/* .link-btn (see its base rule above) is normally a full-width, center-aligned block
   link -- fine for a standalone "View full cart" row, but inside this flex row it was
   blowing up to fill most of the remaining space and shoving "Remove"/"Add tester" far
   from the row content with a lot of dead space in between. Scoped back down here to a
   compact, actually-bordered pill button sized to its own text. */
.order-edit-row .link-btn {
  display: inline-block;
  width: auto;
  flex: none;
  background: var(--white);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}
.order-edit-row .link-btn:hover { background: var(--accent-soft); text-decoration: none; }

.order-edit-search-results {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.order-edit-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.order-edit-search-row:last-child { border-bottom: none; }
.order-edit-search-row:hover { background: var(--bg); }
.order-edit-search-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}
.order-edit-search-name { font-size: 13px; font-weight: 600; }
.order-edit-search-meta { font-size: 12px; color: var(--muted); }

.badge-edit-pending {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fdecd2;
  color: #8a5a10;
  margin-left: 6px;
}

.badge-payment-needed {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fbe2df;
  color: #a3271b;
  margin-left: 6px;
}

/* A distinct teal, unused anywhere else in the badge palette (pink/orange/green/purple/
   red are all already spoken for by status-badge and the other badges above) -- keeps a
   "graduated from Scheduled" pre-order visually distinguishable from every other flag an
   order can carry (see preOrderBadgeHtml in app.js). */
.badge-pre-order {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  background: #dceef2;
  color: #145f74;
  margin-left: 6px;
}

.pending-approval-banner {
  background: #faeeda;
  color: #854f0b;
  border: 1px solid #f0d9a8;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.backorders-ready-banner {
  background: #eaf3de;
  color: #3b6d11;
  border: 1px solid #c9e2ac;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.backorders-ready-banner:hover { background: #e0edcd; }
.backorders-ready-banner strong { font-weight: 600; }

/* Light-pink top-of-dashboard alert, same shape/width as the banners above -- used for
   the buyer/rep/seller "needs approval" call-outs (see loadDashboard in buyer.html/
   rep.html and loadSellerDashboard in seller.html). A distinct pink so it doesn't get
   lost among the existing orange (pending-approval-banner) and green
   (backorders-ready-banner) banner colors, and reads as more time-sensitive than
   either. */
.approval-alert-banner {
  background: #fdebf0;
  color: #9c1f49;
  border: 1px solid #f3c2d3;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.approval-alert-banner:hover { background: #fbdce6; }
.approval-alert-banner strong { font-weight: 600; }

/* Same shape as .approval-alert-banner, but red -- for a declined card on an order
   (see cardFailedBadgeHtml in app.js and the dashboard wiring in buyer.html/rep.html).
   Deliberately a different color from the pink "needs your approval" banner: this one
   means something already went wrong and needs fixing, not just a decision pending. */
.card-failed-banner {
  background: #fbe6e4;
  color: #942018;
  border: 1px solid #f0c2bd;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.card-failed-banner:hover { background: #f8d8d4; }
.card-failed-banner strong { font-weight: 600; }

/* ---- rep/rep-group dashboard ---- */
.dash-columns { display: flex; gap: 24px; flex-wrap: wrap; }
.dash-col { flex: 1; min-width: 280px; }
.dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}
.dash-row:hover { background: var(--bg); }
.dash-row-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.dash-row-sub { font-size: 12px; color: var(--muted); }
.dash-row-total { font-size: 14px; font-weight: 700; flex-shrink: 0; }

.wo-picker-avatar-wrap { position: relative; flex-shrink: 0; }
.wo-picker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wo-draft-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d64545;
  color: #fff;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
  border: 2px solid var(--white);
}
.wo-draft-label {
  font-size: 11px;
  font-weight: 600;
  color: #d64545;
  background: #fbe6e6;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.incoming-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.incoming-card-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.incoming-card-sub { font-size: 12px; color: var(--muted); }
.incoming-card-sub a { color: var(--accent); }
.incoming-card-status { text-align: right; flex-shrink: 0; }
.incoming-card-eta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.incoming-stage {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.incoming-stage-label_created { background: #f0ede7; color: var(--muted); }
.incoming-stage-in_transit { background: #e7eef8; color: #2c4a73; }
.incoming-stage-out_for_delivery { background: #eaf3de; color: #3b6d11; }
.incoming-stage-delivered { background: #eaf3de; color: #3b6d11; }
.incoming-stage-exception { background: #fbe8e6; color: var(--danger); }


.invite-card { margin-bottom: 10px; padding: 14px 16px; }
.invite-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invite-link-row { display: flex; gap: 8px; margin-top: 10px; }
.invite-link-row input { flex: 1; font-size: 12px; color: var(--muted); background: var(--bg); }
.invite-link-row button { white-space: nowrap; padding: 8px 14px; font-size: 13px; }

/* ---- saved cards ---- */
button.secondary {
  padding: 9px 16px;
  background: var(--white);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
button.secondary:hover { background: var(--accent-soft); }
.card-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
  cursor: pointer;
}
.card-picker-row:last-child { border-bottom: none; }
.card-picker-row input { width: auto; margin: 0; }
.saved-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.saved-card-row:last-of-type { border-bottom: none; }

/* ---- message unread flag ---- */
.msg-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msg-unread-toggle {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.msg-unread-toggle:hover { border-color: var(--muted); color: var(--ink); }
.msg-unread-toggle.is-unread { background: #b3401f; border-color: #b3401f; color: white; }
.msg-bubble.is-unread .msg-body { box-shadow: inset 3px 0 0 #b3401f; }

/* ---- rep group roster ---- */
.rep-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; }
.rep-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}
.rep-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}
.rep-card-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.rep-card-email { font-size: 12px; color: var(--muted); }
.rep-card-phone { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rep-card-edit-btn {
  margin-top: 10px;
  padding: 6px 14px;
  background: var(--white);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.rep-card-edit-btn:hover { background: var(--accent-soft); }

.commission-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.commission-row .commission-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}
.commission-row label { font-size: 11px; font-weight: 600; color: var(--ink); margin: 0; }
.commission-row .commission-field-sub { font-size: 11px; font-weight: 400; color: var(--muted); }
.commission-row .commission-input,
.commission-row .commission-direct-input {
  width: 90px;
  flex: 0 0 auto;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
}
.commission-row .save-commission-btn {
  align-self: flex-start;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
}
.commission-row .save-commission-btn:hover { background: var(--accent-soft); }
.commission-row .auto-deposit-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 400;
}
.commission-row .auto-deposit-toggle input { width: auto; margin: 0; }
.commission-row .auto-deposit-toggle.disabled { color: var(--muted); }


.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  cursor: pointer;
}
.radio-option:not(:last-of-type) { border-bottom: 1px solid var(--border); }
.radio-option input[type="radio"] { margin-top: 4px; }
.radio-option-title { font-weight: 600; font-size: 13px; }
.radio-option-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.msg-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -4px;
  margin-right: 5px;
}

.product-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  margin: 12px 0 16px;
}

.catalog-actions-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

#addProductPanel {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Shared floating-action-button placement, fixed to the bottom-right corner of the
   content column. Used by the seller's "+ Add a product" shortcut (shown once the
   toolbar's own button scrolls out of view, see wireFloatingAddProductBtn()) and the
   rep's "Writle" shortcut to the marketplace (shown on every rep page except the
   marketplace/order/cart views it would just be pointing at). */
button.primary.fab-add-product,
button.primary.fab-writle {
  position: fixed;
  /* Aligned to the right edge of .page-shell (the centered, max-1600px content column),
     not the browser window -- on a wide monitor the page content doesn't reach the
     window edge, and pinning to the viewport would leave the button floating in empty
     margin space well past the actual page. .page-shell is 75vw capped at 1600px and
     centered, so its right edge sits this far in from the viewport's right edge. The
     @media overrides below match page-shell's own responsive breakpoints, where it
     switches to full-width-plus-padding instead. */
  right: calc((100vw - min(75vw, 1600px)) / 2);
  bottom: 28px;
  width: auto;
  margin: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  z-index: 60;
}
@media (max-width: 1024px) {
  .fab-add-product, .fab-writle { right: 20px; }
}
@media (max-width: 700px) {
  .fab-add-product, .fab-writle { right: 14px; }
}

/* ---------- Responsive: tablet & phone ----------
   Desktop keeps its constrained page-shell width/padding untouched above 1024px.
   Below that, the shell goes full-width (with a small gutter) so phone/tablet screens
   aren't wasting a big chunk of a small viewport on side margins. A second, narrower
   breakpoint (700px, matching the existing product-detail mobile rule above) handles
   phone-specific layout changes: sidebar collapses to a horizontal scroll strip,
   multi-column forms/tables stack, and the two-pane message view stacks vertically. */

@media (max-width: 1024px) {
  .page-shell { width: 100%; padding: 0 20px; }
  .main-content { padding: 20px 0 40px 24px; }
  .main-panel { padding: 18px 20px 22px; }
  .app-header .brand img, .auth-header .brand img { height: 44px; }
}

@media (max-width: 700px) {
  .page-shell { padding: 0 14px; }
  .app-header { flex-wrap: wrap; row-gap: 8px; padding: 14px 0; }
  .app-header .who { display: none; }

  .app-body { flex-direction: column; }
  .sidebar {
    width: 100%;
    position: static;
    border-left: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 4px;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
  }
  /* The nested sub-item tree only makes sense in the vertical desktop sidebar --
     at this width the sidebar itself becomes a horizontal scroll strip, where
     indentation doesn't read at all. The page's own in-page pill tabs (Orders sub-
     tabs, Account tabs, etc.) already cover the same navigation on mobile. */
  .nav-group { display: contents; }
  .nav-subitems { display: none !important; }
  .sidebar .nav-item {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 12px;
  }
  .sidebar .nav-item.nav-item-row { gap: 6px; }

  .main-content { padding: 16px 0 32px; }
  .main-panel { padding: 14px 14px 18px; border-radius: 10px; }
  .page-title { font-size: 22px; }

  .form-row,
  .edit-form .form-row-tight,
  .addr-grid {
    flex-direction: column;
    display: flex;
    gap: 0;
  }
  .form-row > div, .edit-form .form-row-tight > div { margin-bottom: 10px; }
  .addr-grid { display: flex; }

  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  .msg-layout { flex-direction: column; gap: 12px; min-height: 0; }
  .msg-list {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0 0 12px;
    max-height: 160px;
    overflow-y: auto;
  }
  .msg-thread { width: 100%; }

  .modal-overlay { padding: 10px; }
  .modal-box { padding: 18px 16px 20px; }

  .category-row { flex-wrap: wrap; }

  .auth-shell { padding: 22px; margin: 12px auto 24px; }
  .auth-header { padding: 28px 20px 0; }

  .dash-columns { flex-direction: column; }
  .product-detail-buy .add-row { max-width: none; }
}

/* ---- support chat widget (floating bubble + panel, see initSupportChatWidget) ---- */
/* Bottom-LEFT, deliberately, so it never collides with the seller/rep FABs pinned
   bottom-right (see .fab-add-product/.fab-writle above). */
.support-chat-toggle {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  z-index: 9990;
  padding: 0;
}
.support-chat-toggle:hover { background: #123024; }
.support-chat-toggle.active { background: #123024; }

.support-chat-panel {
  position: fixed;
  left: 20px;
  bottom: 84px;
  width: 340px;
  max-width: calc(100vw - 40px);
  height: 460px;
  max-height: calc(100vh - 120px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  z-index: 9990;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.support-chat-panel.open { display: flex; }

.support-chat-header {
  background: var(--accent);
  color: var(--white);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
}
.support-chat-header button {
  background: none;
  border: none;
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  padding: 0;
  width: auto;
  cursor: pointer;
}
.support-chat-header button:hover { opacity: 0.8; background: none; }

.support-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
}
.support-chat-msg {
  max-width: 84%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.support-chat-msg-assistant {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px;
}
.support-chat-msg-user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--white);
  border-bottom-right-radius: 3px;
}
.support-chat-typing { opacity: 0.6; font-style: italic; }

.support-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.support-chat-input-row input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
}
.support-chat-input-row button { flex-shrink: 0; }

@media (max-width: 700px) {
  .support-chat-toggle { left: 14px; bottom: 14px; }
  .support-chat-panel { left: 14px; bottom: 76px; }
}