/* ============================================================
   LangCart design14 — app.css
   Components & layout. All values come from tokens.css.
   Master–detail orders screen: the page never scrolls; the
   list, the transcript and the order panel scroll themselves.
   ============================================================ */

/* ---------------------------------------------------------- base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html.ui-modal-open,
html.ui-modal-open body {
  overflow: hidden;
}
::selection {
  background: var(--mark);
  color: var(--ink);
}
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.hidden {
  display: none !important;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* the mock used <button> everywhere; the Blazor app also navigates with <a> (NavLink) —
   give anchors the same quiet default so nav tabs/links don't render as underlined links */
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
:focus-visible {
  outline: 2px solid var(--market);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
  border: 3px solid var(--field);
}
*::-webkit-scrollbar-track {
  background: transparent;
}

.ic {
  width: 16px;
  height: 16px;
  flex: none;
  display: inline-block;
  vertical-align: -3px;
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}
.spin,
.working .ic {
  animation: ui-spin 0.9s linear infinite;
}
/* non-sync icons (print, pos) breathe instead of spinning while working */
@keyframes ic-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.6);
  }
}
.btn.pulse-work.working .ic {
  animation: ic-pulse 1700ms ease-in-out infinite;
}

/* ---------------------------------------------------------- inputs */
.ui-input,
.ui-textarea {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--ink-3);
}
.ui-input:focus,
.ui-textarea:focus {
  outline: none;
  border-color: var(--market);
  box-shadow: 0 0 0 3px var(--market-wash);
}
.ui-input:read-only {
  background: var(--card-dim);
  color: var(--ink-2);
}
.ui-input:disabled,
.ui-textarea:disabled {
  opacity: 0.6;
}
.ui-textarea {
  resize: vertical;
  line-height: 1.5;
}
.ta-r {
  text-align: right;
}
.ta-c {
  text-align: center;
}

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: var(--fs-13);
  line-height: 1.25;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn .ic {
  width: 15px;
  height: 15px;
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn.primary {
  background: var(--market);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn.primary:hover:not(:disabled) {
  background: var(--market-deep);
}
.btn.ghost {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn.ghost:hover:not(:disabled) {
  background: var(--field-deep);
}
.btn.ghost.strong {
  border-color: var(--market);
  color: var(--market);
}
.btn.ghost.strong:hover:not(:disabled) {
  background: var(--market-wash);
}
.btn.plain {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.btn.plain:hover:not(:disabled) {
  background: var(--field-deep);
  color: var(--ink);
}
.btn.danger {
  background: var(--red);
  color: #fff;
}
.btn.danger:hover:not(:disabled) {
  background: #96201a;
}
.btn.danger-ghost:hover:not(:disabled) {
  background: var(--red-wash);
  border-color: var(--red);
  color: var(--red);
}
.btn.icon {
  padding: 7px;
}
.btn.sm {
  padding: 4px 9px;
  font-size: var(--fs-12);
}
.btn.icon.sm {
  padding: 5px;
}
.btn:disabled {
  opacity: 0.5;
}
/* fixed label ("Read" / "Processed") with a ballot marker: box.svg when false,
   box-check.svg when true — a thin light box with the tick drawn larger, overlapping
   it. Width never changes and it reads without colour. */
.btn.toggle {
  background: var(--card);
  border-color: var(--line-strong); /* same frame as the other action-bar buttons */
  color: var(--ink-3);
  font-weight: 500;
}
/* layered marker: the box is always there, the big check scales in over it on toggle */
.btn.toggle .tgl-ic {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
}
.btn.toggle .tgl-ic .ic {
  position: absolute;
  inset: 0;
  width: 15px;
  height: 15px;
  vertical-align: 0;
}
.btn.toggle .tgl-box {
  transition: opacity var(--t-fast);
}
.btn.toggle .tgl-check {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 40% 60%; /* grows from the check's elbow */
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.btn.toggle.on .tgl-box {
  opacity: 0.75; /* 0.4 baked into the svg × 0.75 ≈ the 0.3 the checked box had */
}
.btn.toggle.on .tgl-check {
  opacity: 1;
  transform: scale(1);
}
.btn.toggle.on {
  background: var(--market-wash);
  border-color: var(--market);
  color: var(--market-deep);
  font-weight: 600;
}
.autolink-count {
  font-size: var(--fs-11);
  background: var(--market-wash);
  color: var(--market-deep);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}

/* ---------------------------------------------------------- chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2.5px 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--field-deep);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip .ic {
  width: 12px;
  height: 12px;
}
/* type pills (voice/text) are metadata — they stay on the neutral gray base
   so status pills (approved, processed…) own the color */
.chip.change {
  background: var(--amber-wash);
  color: var(--amber);
}
.chip.approved {
  background: var(--market-wash);
  color: var(--market-deep);
}
.chip.convo {
  background: var(--red-wash);
  color: var(--red);
}
.chip.done {
  background: var(--ok-wash);
  color: var(--ok);
}
.chip.locked {
  background: var(--amber-wash);
  color: var(--amber);
}
.chip.rcpt {
  background: var(--field-deep);
  color: var(--ink);
  font-family: var(--font-mono);
}

/* ============================================================
   Layers: menus, calendar, tooltips, popovers
   ============================================================ */
/* Full-viewport transparent backdrop rendered under every floating panel.
   Catches outside clicks (close) and blocks interaction with the page behind,
   so panels never need to reposition on scroll. Panel renders after it in the
   DOM, so equal z-index paints the panel on top. */
.ui-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-layer);
  background: transparent;
}
.ui-layer {
  position: fixed;
  z-index: var(--z-layer);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  overflow: auto;
  animation: layer-in 140ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
@keyframes layer-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.ui-menu {
  min-width: 170px;
  padding: 5px;
}
.ui-menu-list {
  display: flex;
  flex-direction: column;
}
.ui-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  color: var(--ink);
}
.ui-opt:hover:not(.disabled),
.ui-opt:focus-visible {
  background: var(--field-deep);
}
.ui-opt.sel {
  color: var(--market-deep);
  font-weight: 600;
}
.ui-opt.disabled {
  color: var(--ink-3);
}
.ui-opt-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-opt-check {
  color: var(--market);
  width: 14px;
  height: 14px;
}
.ui-opt-ic {
  color: var(--ink-2);
  width: 14px;
  height: 14px;
}
.ui-opt-chev {
  width: 12px;
  height: 12px;
  color: var(--ink-3);
}
/* in-menu section header (playback speed) */
.ui-menu-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px 4px;
  margin-top: 3px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ui-menu-head .ic {
  width: 12px;
  height: 12px;
}

/* tooltip — data-tip attributes are shown by site.js in ONE body-level .ui-tip
   element at fixed viewport coordinates (a CSS ::after bubble would be clipped
   inside overflow containers like the items table's ellipsis cells) */
.ui-tip {
  position: fixed;
  z-index: var(--z-layer);
  background: var(--ink);
  color: var(--card);
  font-size: var(--fs-12);
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
  overflow-wrap: break-word;
  white-space: pre-line; /* multi-line tips (e.g. product name + discontinued note) */
}
.ui-tip.on {
  opacity: 1;
}

/* ---------------------------------------------------------- select */
.ui-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: var(--fs-13);
  min-width: 120px;
  text-align: left;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ui-select:hover:not(:disabled) {
  border-color: var(--ink-3);
}
.ui-select.open {
  border-color: var(--market);
  box-shadow: 0 0 0 3px var(--market-wash);
}
.ui-select:disabled {
  opacity: 0.6;
}
.ui-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-label.placeholder {
  color: var(--ink-3);
}
/* Bootstrap (still loaded for the Internal pages) styles .placeholder as a skeleton
   bar (background: currentcolor) which hides the label text — neutralize it on our
   controls. Remove together with Bootstrap. */
.ui-select-label.placeholder,
.ui-dp-label.placeholder {
  background-color: transparent;
  opacity: 1;
  min-height: 0;
  cursor: inherit;
  vertical-align: baseline;
}
.ui-select-chev {
  width: 13px;
  height: 13px;
  color: var(--ink-3);
  transition: transform var(--t-fast);
}
.ui-select.open .ui-select-chev {
  transform: rotate(180deg);
}
.ui-select.mini {
  min-width: 0;
  padding: 4px 8px;
  font-size: var(--fs-12);
}

/* ---------------------------------------------------------- checkbox / radio */
.ui-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-13);
  user-select: none;
  /* anchor for the hidden .ui-native — unanchored, focusing it scroll-jumps the page */
  position: relative;
}
.ui-native {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ui-check-box {
  width: 17px;
  height: 17px;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ui-check-box .ic {
  width: 11px;
  height: 11px;
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.ui-native:checked + .ui-check-box {
  background: var(--market);
  border-color: var(--market);
}
.ui-native:checked + .ui-check-box .ic {
  opacity: 1;
  transform: scale(1);
}
.ui-native:focus-visible + .ui-check-box {
  outline: 2px solid var(--market);
  outline-offset: 2px;
}
.ui-native:disabled ~ * {
  opacity: 0.55;
  cursor: default;
}
/* ---------------------------------------------------------- datepicker */
.ui-dp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: var(--fs-13);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ui-dp:hover:not(:disabled) {
  border-color: var(--ink-3);
}
.ui-dp.open {
  border-color: var(--market);
  box-shadow: 0 0 0 3px var(--market-wash);
}
.ui-dp-ic {
  width: 14px;
  height: 14px;
  color: var(--ink-2);
}
.ui-dp-label.placeholder {
  color: var(--ink-3);
}
.ui-dp-clear {
  display: none;
  width: 16px;
  height: 16px;
  margin-left: auto; /* pin the clear to the field's right edge */
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}
.ui-dp-clear .ic {
  width: 10px;
  height: 10px;
}
.ui-dp-clear:hover {
  background: var(--field-deep);
  color: var(--ink);
}
.ui-dp-clear.show {
  display: inline-flex;
}
.ui-cal {
  padding: 10px;
  overflow: visible;
}
.ui-cal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ui-cal-selects {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.ui-cal-nav {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.ui-cal-nav:hover {
  background: var(--field-deep);
}
.ui-cal-nav .ic {
  width: 13px;
  height: 13px;
}
.ui-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 2px;
  justify-items: stretch;
}
.ui-cal-dow {
  text-align: center;
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--ink-3);
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ui-cal-day {
  height: 30px;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  font-family: var(--font-mono);
  color: var(--ink);
}
.ui-cal-day:hover {
  background: var(--field-deep);
}
.ui-cal-day.today {
  box-shadow: inset 0 0 0 1.5px var(--market);
}
.ui-cal-day.sel {
  background: var(--market);
  color: #fff;
  font-weight: 600;
}
.ui-cal-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------- modal */
.ui-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  opacity: 0;
  transition: opacity var(--t-med);
}
/* Blazor renders the overlay already-.on, so entry runs as a keyframe animation
   (fires on insert); exit still works by swapping .on for .closing (transition). */
@keyframes ui-overlay-in {
  from { opacity: 0; }
}
@keyframes ui-modal-in {
  from { transform: translateY(10px) scale(0.985); }
}
.ui-overlay.on {
  opacity: 1;
  animation: ui-overlay-in var(--t-med);
}
/* close: same motion in reverse, quicker — dismissal should feel immediate */
.ui-overlay.closing {
  transition: opacity 130ms ease;
  pointer-events: none;
}
.ui-overlay.closing .ui-modal {
  transition: transform 130ms ease;
}
.ui-modal {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  width: 520px;
  max-width: 100%;
  margin: auto; /* true center — and tall modals still scroll from the top */
  transform: translateY(10px) scale(0.985);
  transition: transform var(--t-med);
}
.ui-overlay.on .ui-modal {
  transform: none;
  animation: ui-modal-in var(--t-med);
}
/* per-modal widths — the default above is 520px */
.ui-popup {
  width: 420px;
}
.acc-modal {
  width: 620px;
}
.bulk-modal {
  width: 560px;
}
.no-modal {
  width: 620px;
}
.orig-modal {
  width: 640px;
}
.pdf-modal {
  width: 900px;
}
.ui-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}
.ui-modal-title {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 700;
}
.ui-modal-x {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.ui-modal-x:hover {
  background: var(--field-deep);
}
.ui-modal-x .ic {
  width: 13px;
  height: 13px;
}
.ui-modal-body {
  padding: 14px 20px 18px;
}
.ui-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px 18px;
}
/* compact footer buttons — same ~29px height as the app's other controls */
.ui-modal-foot .btn {
  padding: 5px 12px;
}
.modal-sub {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: var(--fs-13);
}
.ui-popup .ui-popup-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ui-popup-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--amber-wash);
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ui-popup.danger .ui-popup-ic {
  background: var(--red-wash);
  color: var(--red);
}
.ui-popup-msg {
  font-size: var(--fs-14);
  line-height: 1.55;
  padding-top: 5px;
}

/* ============================================================
   Audio player
   ============================================================ */
.ui-audio {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 10px 5px 5px;
  margin-top: 10px;
}
/* idle players stay quiet — the button fills only while playing */
.ua-play {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--market);
  color: var(--market);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.ua-play:hover:not(:disabled) {
  background: var(--market-wash);
}
.playing .ua-play {
  background: var(--market);
  color: #fff;
}
.playing .ua-play:hover:not(:disabled) {
  background: var(--market-deep);
}
.ua-play .ic {
  width: 12px;
  height: 12px;
}
.ua-ic-pause {
  display: none;
}
.playing .ua-ic-pause {
  display: block;
}
.playing .ua-ic-play {
  display: none;
}
.ua-time {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--ink);
  min-width: 32px;
  text-align: center;
}
.ua-time.dim {
  color: var(--ink-3);
}
.ua-bar {
  flex: 1;
  min-width: 40px;
  padding: 8px 0;
  cursor: pointer;
}
.ua-track {
  position: relative;
  height: 4px;
  border-radius: 99px;
  background: var(--field-deep);
}
.ua-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 99px;
  background: var(--market);
}
.ua-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--market-deep);
  border: 2px solid var(--card);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-1);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.ui-audio:hover .ua-handle,
.playing .ua-handle {
  opacity: 1;
}
.ua-btn {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.ua-btn:hover:not(:disabled) {
  background: var(--field-deep);
  color: var(--ink);
}
.ua-btn .ic {
  width: 14px;
  height: 14px;
}
.ua-ic-mute {
  display: none;
}
.muted .ua-ic-mute {
  display: block;
}
.muted .ua-ic-vol {
  display: none;
}

/* Boot (loading) styles live in css/app.css — they must be available before Blazor loads. */

/* ============================================================
   Login
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(1100px 500px at 50% -10%, var(--market-wash), transparent 60%), radial-gradient(900px 520px at 110% 110%, var(--field-deep), transparent 60%), var(--field);
}
.login-card {
  width: 384px;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 34px 42px 42px;
  position: relative;
  animation: pane-in 240ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 24px;
  transform: translateX(-6px); /* optical center — the eye reads the word, the icon pushes it right */
}
.login-logo {
  width: 26px;
  height: 26px;
  color: var(--ink);
}
.login-word {
  font-family: var(--font-display);
  font-size: var(--fs-26);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-lbl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.login-input {
  font-size: var(--fs-14);
  height: 32px;
  padding: 0 11px;
}
.login-btn {
  margin-top: 6px;
  justify-content: center;
  height: 32px;
  padding: 0;
  font-size: var(--fs-14);
}
.login-version {
  color: var(--ink-3);
  font-size: var(--fs-11);
}

/* ============================================================
   Shell
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  height: var(--topbar-h);
  padding: 0 18px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.brand-logo {
  width: 20px;
  height: 20px;
  color: var(--ink);
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-17);
  letter-spacing: -0.01em;
}
/* the store name is context, not a control — plain text behind a divider */
.store-chip {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav-tabs {
  display: flex;
  gap: 2px;
  background: var(--field-deep);
  border-radius: var(--r-pill);
  padding: 3px;
}
.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.nav-tab .ic {
  width: 14px;
  height: 14px;
}
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: #fff;
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: 1;
}
.nav-badge.zero {
  display: none;
}
.nav-tab:hover {
  color: var(--ink);
}
.nav-tab.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.status-line {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--market-deep);
  background: var(--market-wash);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--t-med), transform var(--t-med);
  white-space: nowrap;
}
.status-line.on {
  opacity: 1;
  transform: none;
}
.version-tag {
  color: var(--ink-3);
  font-size: var(--fs-11);
}
/* right-side icon actions (settings) */
.top-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.top-icon:hover {
  background: var(--field-deep);
  color: var(--ink);
}
.top-icon.active {
  background: var(--market-wash);
  color: var(--market-deep);
}
.top-icon .ic {
  width: 16px;
  height: 16px;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  transition: background var(--t-fast);
  min-width: 0;
}
.user-chip:hover {
  background: var(--field-deep);
}
.user-chip .ic {
  width: 12px;
  height: 12px;
  color: var(--ink-3);
}
.user-name {
  font-size: var(--fs-13);
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-info {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.user-menu-name {
  font-weight: 600;
  font-size: var(--fs-13);
}
.user-menu-type {
  color: var(--ink-3);
  font-size: var(--fs-11);
}
.main {
  padding: 18px 18px 60px;
  max-width: 1720px;
  margin: 0 auto;
}
/* the orders workstation is viewport-fixed — the page itself never scrolls */
.main-fixed {
  height: calc(100vh - var(--topbar-h));
  width: 100%;
  max-width: var(--shell-max);
  padding: 12px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Empty state (Messages)
   ============================================================ */
.empty-state {
  max-width: 430px;
  margin: 12vh auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.empty-ic {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--mark-soft), var(--mark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transform: rotate(-4deg);
  box-shadow: var(--shadow-1);
}
.empty-ic .ic {
  width: 30px;
  height: 30px;
}
.empty-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 700;
  margin-top: 6px;
}
.empty-copy {
  color: var(--ink-2);
  font-size: var(--fs-13);
  line-height: 1.6;
}
.empty-hint {
  color: var(--ink-3);
  font-size: var(--fs-12);
}

/* ============================================================
   Settings
   ============================================================ */
.settings-page {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 26px;
  max-width: 980px;
  margin: 10px auto 0;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: calc(var(--topbar-h) + 18px);
  align-self: start;
}
.settings-nav-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 700;
  margin-bottom: 10px;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
}
.settings-nav-item .ic {
  width: 15px;
  height: 15px;
}
.settings-nav-item.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.settings-nav-soon {
  margin-top: 10px;
  padding: 0 11px;
  color: var(--ink-3);
  font-size: var(--fs-11);
}
.settings-h {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 700;
  margin: 4px 0 10px;
}
.settings-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 18px;
}
.settings-lbl {
  font-weight: 700;
  font-size: var(--fs-14);
}
.settings-hint {
  color: var(--ink-2);
  font-size: var(--fs-12);
  margin: 3px 0 12px;
}
.settings-ta {
  font-size: var(--fs-13);
  line-height: 1.6;
}
.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* ============================================================
   Orders — master–detail split
   ============================================================ */
.page-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
}
/* the lane between panes — hover/drag to resize */
.split-handle {
  cursor: col-resize;
  position: relative;
  min-height: 0;
  touch-action: none;
}
.split-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: transparent;
  transition: background var(--t-fast);
}
.split-handle:hover::after,
.split-handle.dragging::after {
  background: var(--line-strong);
}
body.resizing {
  cursor: col-resize;
  user-select: none;
}
.list-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 325px;
  overflow: hidden; /* clip content while the collapse animates */
  transition: width 280ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
/* collapsed: the list folds to a slim rail with an expand control */
.page-split {
  position: relative;
}
.page-split.list-collapsed .list-pane {
  width: 44px;
}
/* hover-peek: the full list floats over the open order until the mouse
   leaves or an order is picked */
.page-split.list-collapsed.list-peek {
  grid-template-columns: 44px minmax(0, 1fr); /* the pane leaves the flow — hold its lane so the detail doesn't shift */
}
.page-split.list-collapsed.list-peek .list-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 357px; /* frame padding included — inner content keeps its full width */
  z-index: var(--z-sticky);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: 6px 10px 10px;
}
.page-split.list-collapsed.list-peek .list-head,
.page-split.list-collapsed.list-peek .list-filters,
.page-split.list-collapsed.list-peek .ocard-list {
  opacity: 1;
  visibility: visible;
}
.page-split.list-collapsed.list-peek .list-rail {
  display: none;
}
/* peek close: fade out in place before the rail snaps back */
.page-split.list-collapsed.list-peek.peek-closing .list-pane {
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease;
}
.list-rail {
  display: none;
}
.page-split.list-collapsed .list-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2px 0 0 2px; /* expand lands exactly where collapse sits */
}
.list-head,
.list-filters,
.ocard-list {
  transition: opacity var(--t-fast), visibility var(--t-fast);
}
.page-split.list-collapsed .list-head,
.page-split.list-collapsed .list-filters,
.page-split.list-collapsed .ocard-list {
  opacity: 0;
  visibility: hidden;
}
.detail-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  grid-column: 2; /* stays put even when the peeking list leaves the grid flow */
}
/* the tray: the open order's bar + cards share one deeper-ground surface,
   so "this order" reads as a unit apart from the list */
.detail-pane.open {
  background: var(--field-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 10px;
}
/* opening/switching/closing an order fades the pane's new content in */
.detail-pane.pane-fade > * {
  animation: pane-in 320ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
@keyframes pane-in {
  from {
    opacity: 0;
  }
}
.list-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 2px 8px;
  min-width: 0;
}
.list-head .page-title,
.list-head .btn {
  flex: none;
}
.list-spring {
  flex: 1;
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.queue-count {
  color: var(--ink-3);
  font-size: var(--fs-13);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis; /* the count gives way before buttons ever clip */
}
.list-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.list-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.list-filter-row .ui-select {
  flex: none;
  width: 78px; /* "Voice" must not truncate — the search box flexes to compensate */
  min-width: 0;
}
/* every control in the filter rows sits at the same compact height */
.list-filters .ui-input,
.list-filters .ui-select,
.list-filters .ui-dp {
  height: 29px;
  padding-top: 0;
  padding-bottom: 0;
}
/* the processed toggle gets the same box as its field neighbours */
.list-filter-row .ui-check {
  flex: none;
  height: 29px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  background: var(--card);
  border-radius: var(--r-sm);
  padding: 0 10px;
}
.list-filter-row .ui-check .ui-check-box {
  width: 15px;
  height: 15px;
}
.list-filter-row .ui-check .ui-check-box .ic {
  width: 10px;
  height: 10px;
}
.search-box {
  position: relative;
  flex: 1;
  min-width: 0;
}
.search-ic {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ink-3);
  pointer-events: none;
}
.search-input {
  padding-left: 32px;
}
/* the magnifier steps aside while typing — its space goes to the text */
.search-box:has(.search-input:focus) .search-ic,
.search-box:has(.search-input:not(:placeholder-shown)) .search-ic {
  display: none;
}
.search-box:has(.search-input:focus) .search-input,
.search-box:has(.search-input:not(:placeholder-shown)) .search-input {
  padding-left: 11px;
}
.filters-dates {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1.6;
  min-width: 0;
}
.filters-dates .ui-dp {
  flex: 1;
  min-width: 0;
}
.filters-dash {
  color: var(--ink-3);
}
.ocard-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* vertical scrollers must never grow a horizontal bar */
  position: relative; /* contain absolute descendants so they can't extend the page */
  display: flex;
  flex-direction: column;
  /* card spacing is margin-bottom on .ocard, NOT flex gap — Blazor's <Virtualize>
     inserts spacer divs that would each add a gap and skew its fixed-ItemSize math */
  padding: 0 0 8px;
  transition: opacity var(--t-med);
}
.ocard-list .ocard {
  margin-bottom: 8px;
}
.ocard-list.loading {
  opacity: 0.45;
  pointer-events: none;
}
.ocard {
  --ocard-line: var(--line);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--ocard-line);
  border-radius: var(--r-md);
  padding: 7px 10px 8px;
  cursor: pointer;
  min-width: 0;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
/* hover/selection live on the background — light wash on hover, deeper wash selected */
.ocard:focus-visible {
  outline-offset: -2px; /* ring sits inside the card — the flush list edge can't clip it */
}
.ocard:hover {
  background: color-mix(in srgb, var(--market-wash) 45%, var(--card));
}
.ocard.active {
  background: color-mix(in srgb, var(--market) 10%, var(--market-wash));
}
/* unread — bold text on the plain hairline card; color edges belong to read/processed */
.ocard.unread .ocard-num,
.ocard.unread .ocard-name,
.ocard.unread .ocard-time,
.ocard.unread .ocard-phone {
  font-weight: 700;
}
/* state color: thin border all around + a stronger left edge; beige = read, green = done
   (hover and .active still win the border because they set border-color directly) */
.ocard:not(.unread):not(.processed) {
  --ocard-line: var(--seen);
  box-shadow: inset 3px 0 0 var(--seen);
}
/* pending wash — read-but-not-done at a glance (editing dim still wins) */
.ocard:not(.unread):not(.processed):not(.active):not(.editing) {
  background: var(--seen-wash);
}
.ocard:not(.unread):not(.processed):not(.active):not(.editing):hover {
  background: color-mix(in srgb, var(--seen) 8%, var(--seen-wash));
}
.ocard.processed {
  --ocard-line: var(--ok);
  box-shadow: inset 3px 0 0 var(--ok);
}
/* green wash — done reads at a glance */
.ocard.processed:not(.active) {
  background: var(--ok-wash);
}
.ocard.processed:not(.active):hover {
  background: color-mix(in srgb, var(--ok) 7%, var(--ok-wash));
}
/* the customer is editing — the row reads as disabled (assigned-to-other does not) */
.ocard.editing {
  background: var(--card-dim);
  opacity: 0.6;
  filter: saturate(0.65);
}
.ocard-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.ocard-spring {
  flex: 1;
}
.ocard-num {
  font-size: var(--fs-13);
}
.ocard-time {
  font-size: var(--fs-13);
  color: var(--ink-2);
  white-space: nowrap;
}
.ocard-mid {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ocard-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-14);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ocard-phone {
  font-size: var(--fs-13);
  color: var(--ink-2);
  white-space: nowrap;
}
.ocard-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-12);
  color: var(--ink-2);
  flex-wrap: wrap;
  min-width: 0;
}
.ocard-kind {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ocard-kind .ic {
  width: 11px;
  height: 11px;
}
/* flags — no pill, icon + text like the voice/text indicator, colored by meaning */
.ocard-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.ocard-flag .ic {
  width: 11px;
  height: 11px;
}
/* separator between row-3 entries */
.ocard-sep {
  color: var(--ink-3);
}
/* the bare '!' glyph sits centered in a wide icon box — pull its text back in */
.ocard-flag.convo .ic {
  margin-right: -2px;
}
/* optical nudge — the '!' and the text glyph draw a touch low in their boxes */
.ocard-flag.convo .ic,
.ocard-kind .ic.up1 {
  transform: translateY(-1px);
}
.ocard-flag.change {
  color: var(--amber);
}
.ocard-flag.approved {
  color: var(--market);
}
.ocard-flag.convo {
  color: var(--convo);
}
.ocard-me {
  background: var(--market);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: 1.5;
  padding: 0 8px;
  transform: translateY(1px);
}
.ocard-who {
  display: inline-flex;
  color: var(--ink-2);
}
.ocard-who .ic {
  width: 13px;
  height: 13px;
}
.queue-empty {
  text-align: center;
  color: var(--ink-3);
  padding: 40px 10px;
  font-size: var(--fs-13);
}

/* ============================================================
   Order detail
   ============================================================ */
/* the order number leads the action bar — no title row */
.detail-num {
  color: var(--market-deep);
  font-size: var(--fs-15);
  font-weight: 700;
}
.detail-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  margin-left: 6px; /* breathing room after the order number */
}
/* assign lives in the bar — same height as the sm buttons */
.assign-sel {
  min-width: 130px;
  height: 25px;
  padding: 2px 9px;
  font-size: var(--fs-12);
}

/* In the Blazor port .lockable is a DIV; the disabling <fieldset> wraps only the
   order-panel side so audio in the transcript stays playable on locked orders. */
.lockable {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  flex: 1;
  min-height: 0;
}
fieldset.order-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
fieldset.order-fieldset > .order-panel {
  height: 100%;
}
/* a fieldset can't reliably be a flex container — the inner div carries the column */
.lockable-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.action-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 7px 10px;
  margin-bottom: 10px;
}
.action-bar .btn.icon {
  padding: 4px; /* icon buttons match the 25px text buttons */
}
/* link + trash draw large in their boxes — take them down a notch
   (padding grows so the button stays 25px like its neighbours) */
.action-bar .btn.icon.ic-sm {
  padding: 5px;
}
.btn.ic-sm .ic {
  width: 13px;
  height: 13px;
}
/* one color scheme for every idle button in the bar (states still show:
   toggles-on go marine, POS stays primary) */
.action-bar .btn.toggle:not(.on) {
  color: var(--ink);
}
.act-sep {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 3px;
}
.act-spring {
  flex: 1;
}
.lockable.locked .action-bar,
.lockable.locked .detail-grid {
  opacity: 0.62;
  filter: saturate(0.65);
}
.lockable.locked .seg.mk {
  pointer-events: none;
}
.lockable.locked .cust-card,
.lockable.locked .link-cell {
  pointer-events: none;
}

.detail-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  /* the resizer lane matches the action bar's 10px bottom gap */
  grid-template-columns: var(--tx-w, minmax(285px, 330px)) 10px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.order-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line); /* same hairline as the open-order tray */
  border-radius: var(--r-lg);
  color: var(--ink-3);
  text-align: center;
  padding: 24px;
}
.detail-empty-ic {
  width: 34px;
  height: 34px;
  color: var(--ink-3);
}
.detail-empty-title {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 500;
  color: var(--ink-3);
}
.detail-empty-copy {
  font-size: var(--fs-13);
  max-width: 340px;
}
.panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--line);
}
.panel-title {
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.panel-sub {
  color: var(--ink-3);
  font-size: var(--fs-12);
}

/* ---------------------------------------------------------- transcript */
.transcript-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.transcript-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* vertical scrollers must never grow a horizontal bar */
  position: relative; /* contain absolute descendants (hidden inputs) so they can't extend the page */
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.transcript-body > * {
  flex: none;
}
.transcript-none {
  color: var(--ink-3);
  font-size: var(--fs-13);
  text-align: center;
  padding: 18px 0;
}
.conv-banner {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--convo-wash);
  border-left: 4px solid var(--convo);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: var(--fs-13);
  line-height: 1.35;
}
.conv-banner .ic {
  color: var(--convo);
  flex: none;
  width: 14px;
  height: 14px;
}

/* messages sit flat on the card — a hairline between them, no boxes */
.msg {
  padding: 0;
}
.msg + .msg::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--line-strong); /* one step darker than the player border — the divider wins */
  margin: 0 -14px 16px; /* run the separator to both card edges */
}
/* the last message also ends with a rule — the Add control sits below it */
.transcript-body > .msg:not(:has(~ .msg))::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--line-strong);
  margin: 16px -14px 0;
}
.add-msg-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
/* inline composer — boxless, reads as one more message in the stream */
.composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity var(--t-fast);
}
.composer::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--line-strong);
  margin: 6px -14px 0; /* 10px flex gap + 6px = the 16px message-rule rhythm */
}
.composer-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.composer-title {
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
.composer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* dim menu option — flags the less-accurate Yiddish pipeline */
.ui-opt.dim .ui-opt-label {
  color: var(--ink-3);
}
.composer.processing {
  opacity: 0.55;
  pointer-events: none;
}
/* inside the shopping-list box the bleed matches its own padding */
.sl-msgs .msg + .msg::before {
  margin-left: -12px;
  margin-right: -12px;
}
/* and the first message also separates from the item lines above it */
.sl-msgs > .msg:first-child::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--line-strong);
  margin: 0 -12px 16px;
}
.msg .ui-audio {
  margin-top: 6px;
  margin-bottom: 11px;
}
.msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.msg-type {
  width: 13px;
  height: 13px;
  color: var(--ink-3);
}
.msg-time {
  font-size: var(--fs-11);
  color: var(--ink-3);
}
.msg-spring {
  flex: 1;
}
.msg-admin {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--case);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}
.msg-admin:hover {
  background: var(--case-wash);
}
.trim-toggle {
  font-size: var(--fs-11);
  color: var(--ink-3);
}
.trim-toggle .ui-check-box {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.trim-toggle .ui-check-box .ic {
  width: 9px;
  height: 9px;
}
.msg-text {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.msg-text.rtl {
  direction: rtl;
  text-align: right;
  font-size: var(--fs-15);
}

/* realtime turns */
.turn {
  display: block;
  margin: 0 0 8px;
}
.turn:last-child {
  margin-bottom: 0;
}
.turn-who {
  display: block;
  font-size: var(--fs-10, 0.625rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1px;
}
.turn.caller .turn-who {
  color: var(--market-deep);
}
.turn.assistant .turn-who {
  color: var(--ink-3);
}
.turn.assistant .seg {
  color: var(--ink-3);
  font-size: var(--fs-12);
  line-height: 1.55;
}
.turn.caller .seg {
  line-height: 1.7;
}

/* ---- the marker (§6) ---- */
.seg.mk {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 1px 2px;
  transition: background-color var(--t-fast);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.seg.mk:hover,
.seg.mk.mk-hover {
  background-color: var(--mark-soft);
}
.seg.mk.mk-sel {
  background-color: var(--mark);
  background-image: none;
  box-shadow: -3px 0 0 var(--mark), 3px 0 0 var(--mark);
}
.seg.mk-speak {
  background-color: var(--mark-speak);
  background-image: none;
  box-shadow: -3px 0 0 var(--mark-speak), 3px 0 0 var(--mark-speak);
}

/* target side of the marker: rows and fields */
.itr.mk-hover td {
  background: var(--mark-soft) !important;
}
.itr.mk-sel td {
  background: var(--mark) !important;
}
.itr.mk-speak td {
  background: var(--mark-speak) !important;
}
.fld.mk-hover {
  background: var(--mark-soft);
}
.fld.mk-sel {
  background: var(--mark);
}
.fld.mk-speak {
  background: var(--mark-speak);
}
.fld {
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}

/* shopping list */
.sl-block {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--card);
}
.sl-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-13);
  font-weight: 600;
}
.sl-head .ic {
  width: 13px;
  height: 13px;
  color: var(--ink-3);
}
.sl-spring {
  flex: 1;
}
.sl-items {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sl-item {
  display: flex;
  gap: 8px;
  font-size: var(--fs-13);
}
.sl-qty {
  color: var(--ink-3);
  min-width: 24px;
  text-align: right;
}
.sl-msgs {
  display: none;
  margin-top: 10px;
  flex-direction: column;
  gap: 10px;
}
.sl-msgs.open {
  display: flex;
}

/* ---------------------------------------------------------- fields card */
/* fields + items share one card; the card scrolls inside its own border,
   the same way the messages panel does */
.order-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  min-width: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* vertical scrollers must never grow a horizontal bar */
  position: relative; /* contain absolute descendants (hidden inputs) so they can't extend the page */
}
.fields-card,
.items-card {
  min-width: 0;
}
.items-card {
  border-top: 1px solid var(--line);
}
/* variant A — account rail left, order fields right (classic layout) */
.fields-card {
  container-type: inline-size;
}
/* Column bottoms align by construction: comments is fixed at 74px and the
   account box holds a constant min-height even with short content. */
.fields-a {
  display: grid;
  grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
  gap: 8px 14px;
  padding: 10px 12px 12px;
  align-items: start;
}
/* not enough room for the rail — stack the two columns */
@container (max-width: 620px) {
  .fields-a {
    grid-template-columns: 1fr;
  }
}
.fields-a-left,
.fields-a-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* variant B — three-up rows with inline labels; last column widest so
   Name and Payment get the room, account/phone/address stay tighter */
.fields-b {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 8px 12px;
  padding: 10px 12px 12px;
}
.fields-dyn {
  display: contents;
}
.fld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  margin: -4px;
}
/* inline field — label sits left of its control */
.fld.inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.fld.inline > .fld-lbl {
  flex: none;
}
/* variant A only: ADDRESS and PAYMENT labels clamp equal so their rows align;
   variant B labels hug their own field */
.fields-a .fld.inline > .fld-lbl {
  min-width: 66px;
}
/* variant B: labels stacked in the same column clamp equal so inputs align —
   col 1 = Account/Address, col 3 = Name/Payment (order: acct, phone, name, addr, pay) */
.fields-b > .fld:nth-child(1) > .fld-lbl,
.fields-b > .fld:nth-child(4) > .fld-lbl {
  min-width: 58px;
}
.fields-b > .fld:nth-child(3) > .fld-lbl,
.fields-b > .fld:nth-child(5) > .fld-lbl {
  min-width: 54px;
}
.fld.inline > :not(.fld-lbl) {
  flex: 1;
  min-width: 0;
}
/* label row with a control on the right (Account label + sync) */
.fld-lbl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fld.wide {
  grid-column: 1 / -1;
}
.fld.wide2 {
  grid-column: span 2;
}
/* order fields sit at the same compact height as the list filters,
   at the transcription's 14px */
.fields-card .ui-input,
.fields-card .ui-select {
  height: 29px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--fs-14);
  font-weight: 500; /* matches the transcription's weight */
}
/* comments defaults into the fixed column math; user may resize taller
   (alignment intentionally not maintained after a manual resize) */
.fields-card .ui-textarea {
  height: 74px;
  resize: vertical;
}
.fld-lbl {
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.cust-card {
  flex: 1;
  min-width: 0;
  min-height: 78px; /* steady height with a 2-line address */
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  position: relative;
  background: var(--card-dim);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 9px 28px 9px 12px; /* right side leaves room for the chevron */
  min-height: 78px; /* 3-line height (name + acct + address) held constant */
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cust-chev {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 13px;
  height: 13px;
  color: var(--ink-3);
}
.cust-card:hover:not(:disabled) {
  border-color: var(--market);
  box-shadow: 0 0 0 3px var(--market-wash);
}
.cust-name {
  font-weight: 700;
  font-size: var(--fs-13);
}
/* secondary phone + address */
.cust-meta {
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--ink);
}
/* the account number matches the name: fs-13 bold */
.cust-acct {
  font-weight: 700;
  font-size: var(--fs-13);
  color: var(--ink);
}
/* short light divider between account and secondary phone */
.cust-sep {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--line-strong);
  margin: 0 6px;
  vertical-align: -1px;
}
.cust-none {
  color: var(--ink-3);
  font-size: var(--fs-13);
}
/* address + payment rows split on the same fixed grid so their columns align */
.addr-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  min-width: 0;
}
.addr-wrap.show-free {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.addr-wrap .ui-select {
  width: 100%;
  min-width: 0;
}
.addr-free {
  display: none;
  min-width: 0;
}
.addr-wrap.show-free .addr-free {
  display: block;
}
.pay-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
}
.pay-wrap:has(.pay-dep:empty) {
  grid-template-columns: minmax(0, 1fr);
}
.pay-wrap > .ui-select {
  width: 100%;
  min-width: 0;
}
.pay-dep {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.pay-dep:empty {
  display: none;
}
.pay-dep .ui-select {
  flex: 1;
  min-width: 0;
}
.pay-dep .newcard-view {
  flex: 1;
  min-width: 0;
}
.pay-pin {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pay-pin .fld-lbl {
  flex: none;
}
.pin-input {
  width: 120px;
  letter-spacing: 0.2em;
}
.newcard-view {
  background: var(--card-dim);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-sm);
  height: 29px;
  line-height: 26px;
  padding: 0 12px;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-row {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.acct-row.has-rm .ui-input {
  padding-right: 30px;
}
/* remove-customer × lives inside the input, borderless */
.acct-rm {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  justify-content: center;
  color: var(--ink-3);
}
.acct-rm:hover:not(:disabled) {
  color: var(--ink);
}

/* customer search popover */
.cust-pop {
  min-width: 340px;
  padding: 0;
}
.cust-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.cust-pop-head .ic {
  width: 14px;
  height: 14px;
  color: var(--ink-3);
  flex: none;
}
.cust-pop-head .ui-input {
  border: 0;
  padding: 2px 0;
  background: transparent;
  box-shadow: none;
}
.cust-results {
  max-height: 300px;
  overflow-y: auto;
  padding: 5px;
}
.cust-hint {
  color: var(--ink-3);
  font-size: var(--fs-12);
  text-align: center;
  padding: 14px 0;
}
.cust-result {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--r-sm);
}
.cust-result:hover,
.cust-result:focus-visible {
  background: var(--field-deep);
}
.cust-pop-foot {
  border-top: 1px solid var(--line);
  padding: 8px 10px;
  display: flex;
  justify-content: flex-end;
}

/* ---------------------------------------------------------- items */
.items-head {
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 10px 6px;
}
.items-stats {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.stat {
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.stat strong {
  color: var(--ink);
  font-weight: 700;
}
.stat.warn,
.stat.warn strong {
  color: var(--amber);
}
.stat-rows {
  font-size: var(--fs-11);
  background: var(--amber-wash);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}
.items-spring {
  flex: 1;
}
.items-scroll {
  overflow-x: hidden; /* the table fits on desktop; phones re-enable the sideways pan below */
  border-radius: 0 0 var(--r-md) var(--r-md);
  /* keep the last row's bottom line clear of the rounded-corner clip,
     which was nibbling its ends when the table reached the card bottom */
  padding-bottom: var(--r-md);
}
@media (max-width: 700px) {
  .items-scroll {
    overflow-x: auto;
  }
}
.items-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
/* desktop has no min-width — the fixed-layout %-columns compress (ellipsis handles
   long text) so the table never grows a horizontal scrollbar. Phones keep the
   sideways pan instead of unusably narrow columns. */
@media (max-width: 700px) {
  .items-table {
    min-width: 860px;
  }
  .items-table.with-code {
    min-width: 1020px;
  }
}
.items-table th {
  text-align: left;
  vertical-align: middle;
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding: 5px 6px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--card);
}
.items-table th.c-num,
.items-table td.c-num {
  width: 30px; /* snug — 3-digit row numbers still fit */
  text-align: right;
}
.items-table th.c-qty,
.items-table td.c-qty {
  width: 42px; /* snug, but fractional quantities like 0.25 still fit */
}
.items-table th.c-unit,
.items-table td.c-unit {
  width: 48px;
}
/* #, qty, unit, aisle and delete stay fixed; the text columns carry
   percentages, which fixed table layout scales proportionally to fill
   whatever the px columns leave over — gained width stretches matched
   product, item, brand and note alike. (The header row alone sets the
   widths; calc() with % is treated as auto here, so plain % only.) */
.items-table th.c-item {
  width: 50%;
}
.items-table th.c-brand {
  width: 20%;
}
.items-table th.c-note {
  width: 30%;
}
.items-table.with-code th.c-code {
  width: 40%;
}
.items-table.with-code th.c-item {
  width: 32%;
}
.items-table.with-code th.c-brand {
  width: 12%;
}
.items-table.with-code th.c-note {
  width: 16%;
}
.items-table th.c-aisle,
.items-table td.c-aisle {
  width: 44px;
}
.items-table th.c-del,
.items-table td.c-del {
  width: 28px;
  text-align: center;
}
/* vertical column separators — softer than the row lines so they don't compete */
.items-table th:not(:last-child),
.items-table td:not(:last-child) {
  border-right: 1px solid var(--line);
}
/* outer side edges close the grid's corners (row lines already close top/bottom) */
.items-table {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.items-table td {
  padding: 0;
  border-bottom: 1px solid var(--line-strong);
  vertical-align: middle;
  transition: background var(--t-fast);
}
.itr:nth-child(even) td {
  background: var(--card-dim);
}
.c-num {
  padding: 0 4px !important;
}
.row-no {
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.rev-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  margin-left: 4px;
  vertical-align: 1px;
}
.items-table .ui-input {
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  padding: 4px 6px;
  font-size: var(--fs-14);
  font-weight: 500; /* matches the transcription's weight */
  height: 100%;
}
.items-table .ui-input:hover:not(:read-only):not(:disabled) {
  border-color: var(--line-strong);
}
.items-table .ui-input:focus {
  background: var(--card);
  border-color: var(--market);
  box-shadow: none;
}
.items-table .ui-input:read-only {
  color: var(--ink);
  background: transparent;
}
/* AI-touched values — the text itself goes orange */
.items-table .ui-input.review {
  color: var(--amber);
}
.items-table .ui-input.attn {
  color: var(--amber);
  font-weight: 700;
}
td.c-code.review .link-text {
  color: var(--amber);
}
/* case rows — no tint, the row's text simply goes bold */
.case-row .ui-input,
.case-row .link-text,
.case-row .row-no {
  font-weight: 700;
}
.row-del {
  opacity: 0;
  color: var(--ink-3);
  border: 0;
  background: transparent;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  vertical-align: middle;
}
.itr:hover .row-del,
.itr:focus-within .row-del,
.row-del:focus-visible {
  opacity: 1;
}
.row-del:hover:not(:disabled) {
  color: var(--red);
  background: var(--red-wash);
}

/* link cell */
.link-cell {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px 0 6px;
  min-width: 0;
}
.link-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-14);
  font-weight: 500; /* matches the transcription's weight */
  color: var(--ink);
}
/* matched-product text carries the confidence: orange = AI, gray = other store */
.link-text.ai {
  color: var(--amber);
}
.link-text.fos {
  color: var(--ink-3);
}
/* discontinued product — reddish text (old-design treatment), no badge */
.link-text.inactive {
  color: var(--red);
}
/* inline peek — the full name over the row, dressed like the row */
.cell-peek {
  position: fixed;
  z-index: var(--z-layer);
  display: none;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-2);
  padding: 4px 8px;
  font-size: var(--fs-14);
  color: var(--ink);
  /* long values wrap (site.js caps the width around the Brand column and
     aligns the peek's top — or bottom, near the screen edge — to the row);
     pre-line keeps the inactive-product note on its own line */
  white-space: pre-line;
  overflow-wrap: break-word;
  pointer-events: none;
}
.cell-peek.on {
  display: block;
}
.cell-peek.ai {
  color: var(--amber);
}
.cell-peek.fos {
  color: var(--ink-3);
}
.cell-peek.inactive {
  color: var(--red);
}
.conf-slot {
  flex: none;
  width: var(--conf-slot);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end; /* indicator sits at the cell's right end, beside the unlink button */
}
/* while its results panel is open, the full-viewport backdrop would cover the
   input and block mouse text-selection — lift ONLY the active input above it
   (a blanket lift made other rows' inputs paint over the results panel) */
.link-search.search-open {
  position: relative;
  z-index: calc(var(--z-layer) + 1);
}
/* green dot — the product came from a saved ("Save for next time") link */
.link-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  opacity: 0.7;       /* a touch lighter than the full done-green */
  margin-right: 8px; /* optically centered under where the % sits */
}
.conf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 17px;
}
.conf .ic {
  width: 12px;
  height: 12px;
}
/* plain amber text — same orange as the AI product name */
.conf.ai {
  color: var(--amber);
  font-size: var(--fs-11);
  line-height: 1;
}
.unlink {
  flex: none;
  width: 12px; /* hover-only — a slim footprint leaves more characters for the name */
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.itr:hover .unlink,
.itr:focus-within .unlink,
.unlink:focus-visible {
  opacity: 1;
}
.unlink:hover:not(:disabled) {
  background: var(--red-wash);
  color: var(--red);
}
.unlink .ic {
  width: 10px;
  height: 10px;
}
.link-search {
  border: 1px solid transparent;
  background: transparent;
  font-size: var(--fs-12);
  padding: 8px;
  width: 100%;
}
.link-search::placeholder {
  color: var(--ink-3);
  font-style: italic;
}

/* item search dropdown */
.item-pop {
  padding: 0;
  min-width: 460px;
  max-width: 620px; /* long result lines wrap instead of widening the popup */
}
.item-pop-body {
  max-height: 250px;
  overflow-y: auto;
  padding: 4px;
}
.item-result {
  display: flex;
  align-items: center;
  min-height: 26px;
  width: 100%;
  text-align: left;
  /* top-heavy on purpose: the font reserves descender space below the baseline,
     so geometric center reads as high — 1px down = optically centered */
  padding: 5px 10px 3px;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink);
}
/* wrapped results can span rows — a light rule keeps entries separable.
   Drawn as an inset line (not border-top) so it stays straight and stops
   before the row background's rounded corners begin. */
.item-result + .item-result {
  position: relative;
}
.item-result + .item-result::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--r-sm); /* the line spans exactly the straight edge, ending where the bg radius begins */
  right: var(--r-sm);
  height: 1px;
  background: var(--line);
}
.item-result:hover,
.item-result:focus-visible {
  background: var(--field-deep);
}
.ir-main b {
  background: var(--mark-soft);
  font-weight: 700;
  border-radius: 2px;
}
.ir-code {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  margin-left: 6px;
}
.ir-code b {
  background: var(--mark-soft);
  border-radius: 2px;
}
.ir-wic {
  color: var(--case);
  font-weight: 700;
  margin-left: 6px;
}
.item-pop-foot {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 6px 8px 6px 12px;
  background: var(--card-dim);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* ============================================================
   Modals: accuracy, new order, bulk POS
   ============================================================ */
.acc-sec-lbl {
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 14px 0 8px;
}
.acc-sec-lbl:first-child {
  margin-top: 0;
}
.acc-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
/* checked = marked wrong — the label goes red */
.acc-body .ui-check:has(.ui-native:checked) .ui-check-label {
  color: var(--red);
}
.acc-item-search {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 8px;
}
.acc-items {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acc-items .ui-check-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: var(--fs-12);
  color: var(--ink-3);
}

.type-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 12px;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.type-card .ic {
  color: var(--ink-2);
  width: 18px;
  height: 18px;
}
.type-card:hover {
  border-color: var(--ink-3);
}
.type-card.sel {
  border-color: var(--market);
  background: var(--market-wash);
  box-shadow: 0 0 0 3px var(--market-wash);
}
.type-card.sel .ic {
  color: var(--market-deep);
}
.type-lbl {
  font-weight: 700;
  font-size: var(--fs-13);
}
.type-sub {
  font-size: var(--fs-11);
  color: var(--ink-2);
}
.no-step2 {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.no-step2.show {
  display: flex;
}
.no-fld {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field-error {
  color: var(--red);
  font-size: var(--fs-12);
  font-weight: 600;
  min-height: 16px;
}
.up-zone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 14px;
  color: var(--ink-2);
  transition: border-color var(--t-fast), background var(--t-fast);
  overflow: hidden;
}
.up-zone:hover:not(:disabled) {
  border-color: var(--market);
  background: var(--market-wash);
}
.up-zone.done {
  border-style: solid;
  border-color: var(--market);
  color: var(--market-deep);
  background: var(--market-wash);
}
.up-lbl {
  font-size: var(--fs-13);
  font-weight: 600;
}
.up-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}
.up-fill {
  height: 100%;
  width: 0;
  background: var(--market);
}
.no-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 0 18px;
  text-align: center;
}
.no-processing .ic.big {
  width: 30px;
  height: 30px;
  color: var(--market);
}
.no-proc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-17);
}
.no-proc-sub {
  color: var(--ink-2);
  font-size: var(--fs-13);
  max-width: 360px;
}

.bulk-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-13);
  flex-wrap: wrap;
}
.bulk-elig {
  color: var(--ink-2);
}
.bulk-controls {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  margin: 14px 0 6px;
}
.bulk-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 8px;
}
.bulk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--card-dim);
  font-size: var(--fs-13);
}
.bulk-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-state {
  font-size: var(--fs-11);
  font-weight: 600;
  font-family: var(--font-mono);
}
.bulk-state.pending {
  color: var(--ink-3);
}
.bulk-state.sending {
  color: var(--amber);
}
.bulk-state.done {
  color: var(--market-deep);
}
.bulk-done {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--market-deep);
  font-weight: 700;
  font-size: var(--fs-13);
  padding: 8px 2px 0;
}
.bulk-done .ic {
  width: 14px;
  height: 14px;
}

.orig-dump {
  background: var(--field-deep);
  border-radius: var(--r-sm);
  padding: 12px;
  font-size: var(--fs-12);
  line-height: 1.55;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  margin: 0;
}

/* ============================================================
   Internal pages (desktop-only): TrainAudio, TrainTextData,
   AccuracyReports — theme idioms, no pixel spec
   ============================================================ */
/* viewport-locked like the orders workstation: inner areas scroll, the page never does
   (a page scroller also gave checkbox focus-jumps somewhere to land) */
.internal-page {
  padding-top: 16px;
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.internal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.internal-head .page-title {
  margin: 0;
}
.internal-search {
  width: 280px;
}
.internal-spring {
  flex: 1;
}
.internal-count {
  color: var(--ink-3);
  font-size: var(--fs-12);
}
.internal-scroll {
  flex: 1;
  min-height: 0; /* sized by the locked page, not a viewport guess */
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
}
.internal-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 10px;
}
label.btn,
label.up-zone {
  cursor: pointer;
}
.btn.disabled {
  pointer-events: none;
  opacity: 0.5;
}
/* train audio rows */
.audio-row-top {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.audio-row-id {
  color: var(--ink-3);
  font-size: var(--fs-12);
  padding-top: 9px;
  min-width: 34px;
  text-align: right;
}
.audio-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.audio-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 8px;
  background: var(--card-dim);
}
.audio-chip audio {
  height: 32px;
}
.audio-note {
  color: var(--ink-3);
  font-size: var(--fs-11);
  text-align: center;
}
/* not-approved wash (system admin view) + drag-drop target — class names are contracts
   with site.js (dragover) and the approval helpers */
.internal-card.not-approved,
.ui-textarea.not-approved,
.audio-chip.not-approved {
  border-color: var(--amber);
  background: var(--amber-wash);
}
.audio-sample-row.dragover {
  outline: 2px dashed var(--market);
  outline-offset: 2px;
}
/* two-pane internal layout (TrainTextData) */
.internal-split {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(320px, 5fr) 7fr;
  grid-template-rows: minmax(0, 1fr); /* children get a bounded height to scroll within */
  gap: 16px;
  min-height: 0;
}
.internal-list {
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
}
.internal-list-item {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-size: var(--fs-13);
}
.internal-list-item:hover {
  border-color: var(--ink-3);
}
.internal-list-item.active {
  border-color: var(--market);
  box-shadow: 0 0 0 2px var(--market-wash);
}
.internal-list-item .pending-id {
  color: var(--amber);
  font-weight: 700;
}
.internal-detail {
  min-width: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 10px;
}
.internal-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
}
.internal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
/* simple data table (internal editors) — same visual family as .items-table */
.internal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}
.internal-table th {
  text-align: left;
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  background: var(--field-deep);
  padding: 6px 8px;
  position: sticky;
  top: 0;
}
.internal-table td {
  border-bottom: 1px solid var(--line);
  padding: 4px 8px;
  vertical-align: top;
}
.internal-table tbody tr:nth-child(even) {
  background: var(--card-dim);
}
.internal-table .ui-input {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 4px 2px;
  width: 100%;
}
.internal-table .ui-input:focus {
  box-shadow: inset 0 -2px 0 var(--market);
}
.internal-items {
  max-height: 340px;
  overflow: auto;
  margin-top: 10px;
}
.internal-field-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.internal-detail-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
/* accuracy reports */
.reports-split {
  grid-template-columns: 250px minmax(0, 1fr);
}
.reports-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 12px;
  height: 100%; /* bounded by the locked split row */
  min-height: 0;
}
.internal-pane {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  min-height: 0;
}
.internal-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  margin-bottom: 10px;
  font-size: var(--fs-13);
}
.err {
  color: var(--red);
}
.muted {
  color: var(--ink-3);
}
.warn-box {
  background: var(--amber-wash);
  border: 1px solid var(--amber);
  border-radius: var(--r-sm);
  color: var(--amber);
  padding: 8px 10px;
  font-size: var(--fs-12);
  margin-bottom: 10px;
}
.ta-modal {
  width: 720px;
}
.ta-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ta-row-head audio {
  flex: 1;
  height: 35px;
}
.ta-row-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.saved-note {
  color: var(--ok);
  font-size: var(--fs-12);
}

/* fixed input widths for internal editors — placed after .ui-input so they win its width:100% */
.iw-50 { width: 50px; }
.iw-100 { width: 100px; }
.iw-125 { width: 125px; }
.iw-150 { width: 150px; }
.iw-200 { width: 200px; }
.iw-250 { width: 250px; }
.iw-400 { width: 400px; }

/* ============================================================
   Print plumbing
   ============================================================ */
.print-frame {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  border: 0;
}
.pdf-viewer {
  width: 100%;
  height: 72vh;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--field-deep);
}
/* print-preview fallback <dialog> (opened by site.js openPrintOrder) */
dialog.pdf-dialog {
  position: fixed;
  top: 5vh;
  left: 5vw;
  width: 90vw;
  height: 90vh;
  z-index: var(--z-modal);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: 12px;
  background: var(--card);
}
.pdf-dialog-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
dialog.pdf-dialog .pdf-viewer {
  height: calc(100% - 48px);
}

/* ============================================================
   Responsive & motion
   ============================================================ */
@media (max-width: 1480px) {
  .detail-grid {
    grid-template-columns: var(--tx-w, minmax(260px, 285px)) 10px minmax(0, 1fr);
  }
}
/* below tablet width the fixed viewport lifts: the page scrolls again and the
   split collapses to the classic two-step flow (tablets in landscape stay in the
   desktop split with the list auto-folded to its rail — see Orders.razor) */
@media (max-width: 850px) {
  .main-fixed {
    height: auto;
    overflow: visible;
  }
  .page-split {
    display: block;
  }
  .split-handle {
    display: none;
  }
  /* the collapse control is a desktop affordance — ignore it here */
  .list-pane,
  .page-split.list-collapsed .list-pane {
    width: auto;
  }
  .page-split.list-collapsed .list-head,
  .page-split.list-collapsed .list-filters,
  .page-split.list-collapsed .ocard-list {
    opacity: 1;
    visibility: visible;
  }
  .page-split.list-collapsed .list-rail {
    display: none;
  }
  .page-split.has-sel .list-pane {
    display: none;
  }
  .page-split:not(.has-sel) .detail-pane {
    display: none;
  }
  .ocard-list {
    overflow: visible;
    padding-bottom: 0;
  }
  .detail-grid {
    display: flex;
    flex-direction: column;
    gap: 10px; /* same breathing room between stacked panels as above the card */
  }
  .transcript-panel {
    order: 2; /* stacked view: the order comes first, the transcript sits under it */
    max-height: 420px;
  }
  .order-card {
    overflow: visible;
  }
  .fields-a {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .nav-tabs {
    order: 3;
  }
  .topbar {
    height: auto;
    padding: 8px 14px;
  }
  .topbar-inner {
    flex-wrap: wrap;
    height: auto;
  }
  .settings-page {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    position: static;
    flex-direction: row;
    align-items: center;
  }
}

/* ============================================================
   phone (≤700px) — occasional-access layout. Nothing is removed:
   bars wrap onto more rows, the items table keeps its desktop
   columns and pans sideways, floating layers cap to the screen.
   ============================================================ */
@media (max-width: 700px) {
  .topbar {
    padding: 6px 10px;
  }
  .topbar-inner {
    gap: 10px;
  }
  .version-tag {
    display: none; /* meta, not worth phone width */
  }
  .user-name {
    max-width: 120px;
  }
  .main-fixed {
    padding: 10px;
  }
  .detail-pane.open {
    padding: 8px;
  }
  .action-bar {
    padding: 6px 8px; /* wraps to as many rows as it needs — every control stays */
  }
  /* (the items table already pans sideways via its .items-scroll wrapper) */
  /* filters wrap: search gets its own row, the rest follow */
  .list-filter-row {
    flex-wrap: wrap;
  }
  .list-filter-row .search-box {
    flex-basis: 100%;
  }
  /* search popovers: matchWidth sets an inline min-width from the anchor,
     so the phone cap needs !important to beat it */
  .item-pop,
  .cust-pop {
    min-width: 0 !important;
    max-width: calc(100vw - 16px);
  }
  .ui-overlay {
    padding: 12px;
  }
  .ui-modal {
    width: 100%; /* every modal spans the screen minus the overlay padding */
  }
  /* payment: method and its dependent (card + PIN) stack instead of
     sharing one row — the card select was crushed to a sliver */
  .pay-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .pin-input {
    width: 90px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Post-review fixes
   ============================================================ */
/* comments: the integrated variant is 91px so its bottom aligns with the Callback
   input in the account column; the plain variant keeps the 74px column math */
.fields-a .fld.wide .ui-textarea {
  height: 91px;
}
/* masks the customer PIN visually without being a password field,
   so the browser never offers to save it */
.text-masked {
  -webkit-text-security: disc;
}
/* raw caller/sender number in the action bar — the callback fallback
   when extraction left the phone fields blank */
.detail-from {
  color: var(--ink-3);
  font-size: var(--fs-12);
  white-space: nowrap;
}

/* ============================================================
   Messages — conversations inbox + chat thread
   List reuses the page split (.list-pane/.ocard); everything
   chat-side is new. The thread scroller owns its own scroll
   restore, so native anchoring stays out of the way.
   ============================================================ */

/* conversation card extras — 2 rows: phone/time, then preview + assignee */
/* the conv card's "name" is a phone number — never truncate it; the time wraps under instead */
.ccard .ocard-name {
  flex: none;
  overflow: visible;
}
.ccard-mid {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
}
.ccard-preview {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-13);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* fixed slot: previews end at the same edge whether or not an assignee chip is there */
.ccard-who-slot {
  flex: none;
  width: 30px;
  display: inline-flex;
  justify-content: flex-end;
}
/* direction arrow before the preview: ↙ received · ↗ sent */
.ccard-preview .pv-dir {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
  margin-right: 4px;
  color: var(--ink-3);
}
.ocard.unread .ccard-preview {
  color: var(--ink);
  font-weight: 600;
}
.ccard-preview.none {
  color: var(--ink-3);
  font-style: italic;
}
.ccard-preview .pv-ic {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--ink-3);
}
.ocard.unread .ccard-preview .pv-ic {
  color: var(--ink-2);
}
.ccard-more {
  color: var(--ink-3);
  font-size: var(--fs-12);
  text-align: center;
  padding: 10px 0 14px;
}

/* detail pane: action bar + one chat panel filling the rest */
.conv-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1; /* fill the tray's content box — height:100% would overflow its padding */
  min-height: 0;
}
.conv-view .action-bar {
  flex: none;
  margin-bottom: 0; /* the view's gap provides the 10px, same rhythm as the orders grid */
}
.chat-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.chat-panel .detail-empty {
  margin: auto;
  border: 0; /* the card is the surface — no inner hairline box */
}
.chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none; /* manual prepend-restore owns the scroll position */
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-scroll > * {
  flex: none;
}
.chat-older {
  color: var(--ink-3);
  font-size: var(--fs-11);
  text-align: center;
  padding: 2px 0 4px;
}

/* bubbles */
.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: min(78%, 620px); /* cap the line length on wide panes */
}
.chat-msg.in {
  align-self: flex-start;
  align-items: flex-start;
}
.chat-msg.out {
  align-self: flex-end;
  align-items: flex-end;
}
/* consecutive bubbles from the same sender sit closer than the stream gap */
.chat-msg.cont {
  margin-top: -7px;
}
.chat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.chat-bubble {
  padding: 7px 12px 8px;
  border-radius: var(--r-lg);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-wrap; /* SMS bodies keep their line breaks */
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-1);
}
/* three surfaces, all outlined: customer blue-gray · staff quiet gray · system quiet+muted.
   Amber is reserved for INTERNAL things only (comments + the comment composer). */
.chat-msg.in .chat-bubble {
  background: var(--field-deep);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-bottom-left-radius: var(--r-sm); /* anchor corner points at the sender */
}
.chat-msg.out .chat-bubble {
  background: var(--card-dim);
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-right-radius: var(--r-sm);
}
.chat-msg.out.sys .chat-bubble {
  background: var(--card-dim);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-weight: 400; /* machine text sits quieter than human messages */
  box-shadow: none; /* flat — no raised-surface presence */
}

/* hover action on incoming bubbles — mark unread from here */
.chat-act {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, background 120ms;
}
.chat-act .ic {
  width: 13px;
  height: 13px;
}
.chat-msg:hover .chat-act,
.chat-act:focus-visible {
  opacity: 1;
}
.chat-act:hover {
  background: var(--card-dim);
  color: var(--ink-2);
}

/* mms media inside bubbles — rendered by mime category */
.chat-bubble .chat-img {
  display: block;
  max-width: 240px;
  max-height: 280px;
  border-radius: var(--r-sm);
  cursor: zoom-in;
  margin-top: 6px;
}
.chat-audio {
  min-width: 260px;
  margin-top: 6px;
}
.chat-video {
  display: block;
  max-width: 260px;
  max-height: 280px;
  border-radius: var(--r-sm);
}
/* the preview is a still first frame — the play badge is the "this is a video" cue */
.chat-video-wrap {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  cursor: zoom-in;
}
.chat-video-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.chat-video-badge span {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: rgba(16, 25, 40, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-video-badge .ic {
  width: 16px;
  height: 16px;
  margin-left: 2px; /* optical centering for the triangle */
}
.chat-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  border-radius: var(--r-sm);
  padding: 5px 9px;
  font: inherit;
  font-size: var(--fs-12);
  color: var(--ink-2);
  cursor: pointer;
  margin-top: 6px;
}
.chat-file .ic {
  width: 13px;
  height: 13px;
}
.chat-bubble.media-only .chat-img,
.chat-bubble.media-only .chat-audio,
.chat-bubble.media-only .chat-video-wrap,
.chat-bubble.media-only .chat-file {
  margin-top: 0;
}

/* detail overlay — the order/conversation component floated over the current page */
.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay); /* below modals & dropdowns so popups opened from the hosted view stay on top */
  background: rgba(16, 25, 40, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  padding: 26px 36px;
  outline: none;
}
.overlay-pane {
  flex: 1;
  min-width: 0;
  min-height: 0;
  box-shadow: var(--shadow-3);
}
/* the conversation overlay stays chat-narrow — generous backdrop at the sides */
.detail-overlay.conv-overlay {
  justify-content: center;
}
.detail-overlay.conv-overlay .overlay-pane {
  flex: none;
  width: min(1020px, 100%);
}

/* in-page lightbox for image/video attachments */
.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16, 25, 40, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.lb-media {
  max-width: min(92vw, 940px);
  max-height: 88vh;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  background: var(--card);
}
.lb-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: var(--card); /* solid white — readable over any image or overlay */
  color: var(--ink);
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-2);
}
.lb-close:hover {
  background: var(--card-dim);
}
.lb-close .ic {
  width: 15px;
  height: 15px;
}

/* pending attachment chip between textarea and the foot row */
.chat-attach {
  display: none;
  align-items: center;
  gap: 6px;
}
.chat-attach.on {
  display: flex;
}
.chat-attach-ic {
  width: 13px;
  height: 13px;
  color: var(--ink-3);
}
.chat-attach-name {
  font-size: var(--fs-12);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}
.chat-attach-x {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-pill);
}
.chat-attach-x:hover {
  background: var(--card-dim);
  color: var(--ink);
}
.chat-attach-x .ic {
  width: 11px;
  height: 11px;
}

/* sender / time microcopy under the bubble */
.chat-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  padding: 0 4px;
  font-size: var(--fs-11);
  color: var(--ink-3);
}
.chat-meta .chat-who {
  font-weight: 600;
  color: var(--ink-2);
}

/* failed-delivery note under an outgoing bubble (delivered sends show nothing) */
.chat-fail {
  margin-top: 3px;
  padding: 0 4px;
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--red);
}

/* centered log rows — "Resolved by MK · 2:14 PM" */
.chat-log {
  align-self: center;
  max-width: 86%;
  text-align: center;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--ink-2);
}
.chat-log .ic {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  margin-right: 4px;
}
.chat-log b {
  font-weight: 600;
  color: var(--ink);
}
.chat-log-time {
  color: var(--ink-3);
}
/* resolve = the thread's chapter end: a full-width banner (respond.io style), not a whisper line */
.chat-log.resolved {
  align-self: stretch;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center; /* text + time sit mid-screen; the border still spans the thread */
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  font-size: var(--fs-13);
  font-weight: 500; /* the sentence stays quiet; the name (b) carries the weight, like other log rows */
  text-align: left;
}
.chat-resolved-ic {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ok-wash);
  color: var(--ok);
}
.chat-log.resolved .ic {
  width: 12px;
  height: 12px;
  margin: 0;
  vertical-align: 0;
}
.chat-log.resolved .chat-log-time {
  font-weight: 500;
}
/* order-number link inside log rows */
.chat-order-link {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0 4px; /* breathing room on both sides of the number */
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--market);
  text-decoration: underline; /* always underlined — the plain link convention, not a badge */
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.chat-order-link:hover {
  color: var(--market-deep);
  text-decoration-thickness: 1.5px;
}
/* order logs: boxed like a comment, in the marine family — the thread's outcome, not housekeeping */
.chat-log.order {
  background: var(--market-wash);
  border: 1px solid var(--market);
  border-radius: var(--r-lg);
  padding: 5px 12px 6px;
  color: var(--ink);
}
.chat-order-deleted {
  margin-left: 8px;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--red);
}
.chat-order-cust {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 3px;
  font-size: var(--fs-12);
  color: var(--ink);
}
/* comment logs carry free text — the amber "internal" family, same as the comment composer.
   Name + time head on top, the text below on its own line(s) so it wraps cleanly. */
.chat-log.comment {
  background: var(--seen-wash);
  border: 1px solid var(--seen);
  border-radius: var(--r-lg);
  padding: 5px 12px 7px;
  text-align: left;
}
.chat-comment-head {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* hover-revealed delete on comment logs */
.chat-log-del {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, color 120ms;
}
.chat-log-del .ic {
  width: 12px;
  height: 12px;
  margin-right: 0; /* the generic .chat-log .ic gutter doesn't apply to the button glyph */
}
.chat-log.comment:hover .chat-log-del {
  opacity: 1;
}
.chat-log-del:hover {
  color: var(--red);
}
.chat-comment-text {
  margin-top: 1px;
  white-space: pre-wrap; /* comments keep their line breaks, like bubbles */
  overflow-wrap: anywhere;
}

/* date separator */
.chat-day {
  align-self: center;
  width: 340px; /* fixed overall width so every divider ends at the same points, whatever its label */
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--ink-3);
}
.chat-day::before,
.chat-day::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* unread divider */
.chat-unread {
  align-self: center;
  width: 340px; /* same fixed width as .chat-day so the two line up */
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-10, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}
.chat-unread::before,
.chat-unread::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--amber);
  opacity: 0.55;
}

/* composer — Reply | Comment mode tabs above the input */
.chat-composer {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px; /* even frame all around; the tighter 6px gap keeps the tabs attached to the input */
  border-top: 1px solid var(--line);
  background: var(--card);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.chat-composer-foot {
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-modes {
  display: flex;
  gap: 4px;
}
.chat-mode {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.chat-mode:hover {
  color: var(--ink-2);
}
.chat-mode.active {
  background: var(--market-wash);
  color: var(--market-deep);
}
/* comment mode tints the whole input area amber — impossible to mistake for a reply */
.chat-composer.comment-mode .chat-mode.active {
  background: var(--seen-wash);
  color: var(--amber);
}
.chat-composer.comment-mode .chat-input {
  background: var(--seen-wash);
  border-color: var(--seen);
}
.chat-composer.comment-mode .chat-input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--seen-wash);
}
.chat-input {
  flex: none;
  width: 100%;
  resize: none;
  min-height: 55px; /* two rows by default */
  max-height: 132px;
  padding: 7px 11px;
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 500; /* same as .msg-text on the orders page */
  line-height: 1.4;
  color: var(--ink);
  background: var(--field, #fff);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); /* input radius like every other field — the r-lg pill clashed with the panel corners */
  outline: none;
}
.chat-input:focus {
  border-color: var(--market);
  box-shadow: 0 0 0 3px var(--market-wash);
}
.chat-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.chat-send {
  margin-left: auto; /* pinned to the foot row's right */
}
/* while sending, the paper plane flies along its own heading instead of the generic spin */
.btn.chat-send.working .ic {
  animation: chat-send-fly 0.9s ease-in infinite;
}
@keyframes chat-send-fly {
  0% {
    transform: translate(-4px, 4px);
    opacity: 0.35;
  }
  55% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(4px, -4px);
    opacity: 0;
  }
}

/* opted-out (customer texted STOP) — composer is blocked with a plain note */
.chat-optout {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--card);
  border-radius: 0 0 var(--r-md) var(--r-md);
  color: var(--ink-2);
  font-size: var(--fs-12);
}
.chat-optout .ic {
  width: 13px;
  height: 13px;
  color: var(--red);
}

/* mms attachments on an order-view message card (chat-img/audio/video styles are shared) */
.msg-files {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0 2px;
}
.msg-files .chat-img,
.msg-files .chat-audio,
.msg-files .chat-video-wrap,
.msg-files .chat-file {
  margin-top: 0;
}
/* same size caps as thread bubbles — outside .chat-bubble the base rules don't reach */
.msg-files .chat-img {
  display: block;
  max-width: 240px;
  max-height: 280px;
  border-radius: var(--r-sm);
  cursor: zoom-in;
}
.msg-files .chat-file {
  text-decoration: none;
}

/* new-conversation phone entry in the action bar */
.conv-phone {
  width: 170px;
  height: 29px;
  font-size: var(--fs-13);
}