/* Fasty colis — classic delivery-app look: light background, white cards,
   one blue accent, bottom tab bar. */
:root {
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --text: #0F1B33;
  --muted: #5A667B;
  --border: #E3E8F0;
  --primary: #1E5BD7;
  --primary-dark: #1747A8;
  --primary-soft: #E9F0FE;
  --danger: #C62828;
  --danger-soft: #FDECEC;
  --warn: #B26A00;
  --warn-soft: #FFF5DD;
  --success: #17805A;
  --success-soft: #E3F4EC;
  --signal: #F28C00;
  --radius: 18px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
h1, h2, p { margin: 0; }
svg { fill: currentColor; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* ---------- layout ---------- */
.view { min-height: 100dvh; padding: 0 16px 24px; max-width: 640px; margin: 0 auto; }
.view.has-tabs { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 24px); }
.page-head { padding: 22px 0 16px; }
.page-head h1 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-head-bar {
  display: flex; align-items: center; gap: 8px;
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  margin: 0 -16px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.page-head-bar h1 { font-size: 1.15rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 10px; }
.section-head h2 { font-size: 1.05rem; font-weight: 600; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 14px;
  font: 700 1rem/1 var(--font); text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:active { background: var(--primary-dark); }
.btn-primary:disabled { opacity: .6; cursor: progress; }
.btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--border); }
.btn-small { width: auto; min-height: 40px; padding: 0 14px; font-size: .9rem; }
.btn-icon { width: 20px; height: 20px; }
.link { background: none; border: 0; padding: 6px 0; color: var(--primary); font: 600 .95rem var(--font); cursor: pointer; }
.link-danger { color: var(--danger); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--text);
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn svg { width: 26px; height: 26px; transform: rotate(45deg); } /* plus rotated = close */

/* ---------- alerts ---------- */
.alert { border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: .95rem; display: flex; flex-direction: column; gap: 10px; }
.alert-warn { background: var(--warn-soft); border: 1px solid #F3D48A; }
.alert-info { background: var(--primary-soft); border: 1px solid #C9D8F8; }
.alert .btn-small { align-self: flex-start; }

/* ---------- home actions ---------- */
.actions { display: flex; flex-direction: column; gap: 12px; }
.action {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; color: inherit;
}
.action:active { background: #F7F9FC; }
.action-icon {
  flex: none; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; background: var(--primary-soft); color: var(--primary);
}
.action-icon svg { width: 26px; height: 26px; }
.action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.action-text strong { font-size: 1.05rem; font-weight: 600; }
.action-text small { color: var(--muted); font-size: .9rem; }
.action-primary { background: var(--primary); border-color: var(--primary); color: #fff; padding: 20px 16px; }
.action-primary .action-icon { background: rgba(255,255,255,.18); color: #fff; width: 56px; height: 56px; }
.action-primary .action-text small { color: rgba(255,255,255,.85); }
.action-primary:active { background: var(--primary-dark); }
.action-primary.is-recording { background: var(--danger); border-color: var(--danger); }
.action-primary.is-recording .action-icon { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
.rec-timer { margin-left: auto; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.list:empty { display: none; }
.list li + li { border-top: 1px solid var(--border); }
.list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 18px; color: inherit; text-decoration: none; }
.list a:active { background: #F7F9FC; }
.l-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.l-price { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.l-meta { color: var(--muted); font-size: .875rem; align-self: center; }
.badge {
  justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge[data-kind=delivered] { background: var(--success-soft); color: var(--success); }
.badge[data-kind=cancelled], .badge[data-kind=return] { background: var(--danger-soft); color: var(--danger); }
/* The colis just created: it arrives at the top of the list, highlighted once. */
.list li.is-new { animation: arrive 3.2s ease-out both; box-shadow: inset 4px 0 0 var(--primary); }
@keyframes arrive {
  0% { background: var(--primary-soft); transform: translateY(-10px); opacity: 0; }
  10% { transform: none; opacity: 1; }
  70% { background: var(--primary-soft); }
  100% { background: transparent; }
}
.empty { color: var(--muted); text-align: center; padding: 24px 8px; }
.empty:empty { display: none; }

/* ---------- forms ---------- */
.form-card { padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 14px; }
.card-title { font-size: 1rem; font-weight: 600; }
.card-hint { margin-top: -8px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-size: .875rem; font-weight: 500; color: #344054; }
.opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid #C9D0DB; border-radius: 10px; background: #fff;
  font: 400 1rem var(--font); color: var(--text);
}
.field textarea { resize: vertical; min-height: 64px; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.6'/%3E%3C/svg%3E") right 12px center / 12px no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); outline: 3px solid var(--primary-soft); outline-offset: 0; }
.field input::placeholder, .field textarea::placeholder { color: #98A2B3; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 44px; font-weight: 600; }
.input-suffix span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.input-action { display: flex; gap: 10px; align-items: center; }
.input-action input { flex: 1; }
.field-error { color: var(--danger); font-size: .85rem; font-weight: 500; }
.field-error:empty { display: none; }
.field-error.field-warn { color: var(--warn); }
.field-hint { color: var(--muted); font-size: .85rem; }
.field-hint:empty { display: none; }
.field-hint.ok { color: var(--success); }

/* missing / to check */
.field .is-missing { border-color: var(--danger); background: var(--danger-soft); }
.field .is-uncertain { border-color: #E0A100; background: var(--warn-soft); }
.field-flag { font-size: .8rem; font-weight: 600; }
.field-flag.missing { color: var(--danger); }
.field-flag.uncertain { color: var(--warn); }

.picks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: -4px; }
.picks::before { content: "Suggestions :"; color: var(--muted); font-size: .875rem; }
.picks button {
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--primary); background: var(--primary-soft); color: var(--primary);
  font: 600 .9rem var(--font);
}

.switches { display: flex; flex-direction: column; gap: 12px; }
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: .97rem; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #C9D0DB; transition: background .15s; }
.track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Review form: everything on one phone screen (one card, two fields per row even on small phones). */
.compact-form .form-card { gap: 10px; padding: 12px; margin-bottom: 10px; }
.compact-form .field { gap: 3px; }
.compact-form .field label { font-size: .8rem; }
.compact-form .field-row { grid-template-columns: 1fr 1fr; gap: 10px; }
.compact-form .field input, .compact-form .field select, .compact-form .field textarea { min-height: 44px; padding: 8px 10px; }
.compact-form .field select { padding-right: 30px; background-position: right 10px center; }
.compact-form .field textarea { min-height: 44px; resize: none; field-sizing: content; max-height: 96px; }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.exchange { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; user-select: none; }
.exchange input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.exchange-btn {
  width: 92px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: #EEF0F4; color: #9AA3B2; border: 2px solid #D5DAE2; transition: background .15s, color .15s, border-color .15s;
}
.exchange-btn svg { width: 44px; height: 44px; }
.exchange-text { font-size: .8rem; font-weight: 600; color: #9AA3B2; order: -1; }
.exchange input:checked + .exchange-btn { background: #F28C00; border-color: #D97A00; color: #fff; }
.exchange input:checked ~ .exchange-text { color: #C46F00; }
.exchange input:focus-visible + .exchange-btn { outline: 3px solid var(--primary); outline-offset: 2px; }
#view-review .page-head-bar { padding: 8px 16px; }
#view-review .bottom-bar { padding-top: 10px; }

.transcript { padding: 14px 16px; margin-bottom: 14px; }
.transcript summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.transcript p { margin-top: 10px; line-height: 1.8; white-space: pre-wrap; }

.bottom-bar {
  position: sticky; bottom: 0; margin: 0 -16px; padding: 12px 16px calc(12px + var(--safe-b));
  background: rgba(243,245,249,.96); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}

/* ---------- busy ---------- */
.busy { min-height: 80dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.busy #busy-text { font-size: 1.1rem; font-weight: 600; margin-top: 12px; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--primary-soft); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- done ---------- */
/* ---------- login ---------- */
#view-login { display: flex; align-items: center; }
.login { width: 100%; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.login-logo { border-radius: 14px; }
.login h1 { font-size: 1.4rem; }

/* ---------- settings ---------- */
.check { border-radius: 10px; padding: 10px 12px; background: var(--bg); font-size: .92rem; }
.check p { font-weight: 500; }
.check .ok { color: var(--success); }
.check .ko { color: var(--danger); }
.advanced { padding: 14px 16px; margin-bottom: 14px; }
.advanced summary { cursor: pointer; font-weight: 600; }
.advanced .field { margin-top: 12px; }
.settings-note { text-align: center; margin: 4px 0 12px; }
.settings-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr 112px 1fr; /* Colis | microphone | Clients */
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  padding-inline: max(0px, calc((100vw - 640px) / 2));
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.tabbar button {
  position: relative; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted); font: 600 .78rem var(--font);
}
.tabbar svg { width: 24px; height: 24px; }
.tabbar button[aria-current=page] { color: var(--primary); font-weight: 800; }
/* The open tab shows a soft pill behind its icon. */
.tabbar button[data-tab] svg { box-sizing: border-box; width: 56px; height: 32px; padding: 4px 16px; border-radius: 999px; transition: background .15s; }
body.simple .tabbar button[data-tab] svg { width: 56px; height: 32px; }
.tabbar button[aria-current=page] svg { background: var(--primary-soft); }
/* Big blue round microphone, raised above the middle of the bar; red and pulsing while recording. */
.tabbar .mic-fab {
  align-self: start; justify-self: center; margin-top: -30px;
  width: 84px; height: 84px; border-radius: 50%; padding: 0;
  background: var(--primary); color: #fff; border: 5px solid #fff;
  box-shadow: 0 6px 18px rgba(30,91,215,.45); transition: transform .12s, background .15s;
}
.tabbar .mic-fab svg, body.simple .tabbar .mic-fab svg { width: 40px; height: 40px; }
.tabbar .mic-fab:active { transform: scale(.94); background: var(--primary-dark); }
.tabbar .mic-fab.is-recording { background: var(--danger); box-shadow: 0 6px 18px rgba(198,40,40,.5); animation: micpulse 1.4s ease-in-out infinite; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(198,40,40,.5); } 50% { box-shadow: 0 0 0 14px rgba(198,40,40,0); } }

/* Settings gear, top right of the pages that have the bottom bar. */
.settings-fab {
  position: fixed; z-index: 11; top: calc(12px + env(safe-area-inset-top, 0px));
  right: max(12px, calc((100vw - 640px) / 2 + 12px));
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.settings-fab svg { width: 26px; height: 26px; }
.settings-fab:active { background: var(--primary-soft); }
.has-tabs .page-head { padding-right: 56px; }
.settings-fab .dot { top: 5px; left: auto; right: 5px; }
.dot { position: absolute; top: 10px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); z-index: 20;
  max-width: 600px; margin: 0 auto;
  padding: 12px 16px; border-radius: 12px; background: #1C2434; color: #fff; font-weight: 500;
}

/* ---------- opened without the server ---------- */
.no-server { max-width: 520px; margin: 15vh auto 0; padding: 24px; }
.no-server h1 { font-size: 1.3rem; margin-bottom: 8px; }
.no-server code { background: var(--primary-soft); padding: 2px 6px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .spinner, .action-primary.is-recording .action-icon, .rec-dot, .list li.is-new, .tabbar .mic-fab.is-recording { animation: none; }
}

/* ---------- clients ---------- */
.alert-danger { background: var(--danger-soft); border: 1px solid #F1B6B6; color: #8E1C1C; font-weight: 600; }
.client-card { margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); border: 1px solid #C9D8F8; }
.client-card.is-returned { background: var(--danger-soft); border-color: #F1B6B6; }
.client-line { white-space: pre-line; margin: 0 0 6px; font-size: .95rem; font-weight: 600; }
.client-card.is-returned .client-line { color: var(--danger); }
.chips { display: flex; flex-direction: column; gap: 6px; }
.chips:empty { display: none; }
.chips button {
  text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--text, #1B2433);
  border-radius: 10px; padding: 8px 10px; font: 500 .9rem var(--font); cursor: pointer;
}
.chips button[aria-pressed=true] { border-color: var(--primary); background: #fff; box-shadow: inset 0 0 0 1px var(--primary); }
.chips small { display: block; color: var(--muted); font-weight: 400; }
input.is-returned { border-color: var(--danger); background: var(--danger-soft); color: #8E1C1C; font-weight: 600; }
.hint { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plain-list li { font-size: .95rem; }
.plain-list small { display: block; color: var(--muted); }
.actions-col { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.btn-danger-text { color: var(--danger); }
.l-name.is-returned { color: var(--danger); }
.list a.client-row { cursor: pointer; }

/* ---------- client list circles ---------- */
.count {
  display: inline-grid; place-items: center; box-sizing: border-box;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
  font: 700 .85rem/1 var(--font); font-style: normal; color: #fff; vertical-align: middle;
}
.count-red { background: var(--danger); }
.count-green { background: #2E7D32; }
.count.is-zero { opacity: .3; }
.l-counts { display: flex; gap: 6px; align-items: center; justify-self: end; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 2px 12px; color: var(--muted); font-size: .85rem; }
.legend .count { min-width: 20px; height: 20px; font-size: .7rem; padding: 0 4px; margin-right: 4px; }
.c-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; font-weight: 600; font-size: .95rem; }
.c-counts span:not(:first-child) { font-weight: 500; color: var(--muted); margin-right: 8px; }
.client-line .count { margin: 0 2px; }

/* ---------- simple mode: big buttons, few words ---------- */
.confirm-card { overflow: hidden; margin-bottom: 12px; }
.c-row { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; padding: 14px 16px; }
.c-row + .c-row { border-top: 1px solid var(--border); }
.c-ico { font-size: 1.8rem; line-height: 1; text-align: center; }
.c-label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.c-val { font-size: 1.35rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.c-row.is-missing { background: var(--danger-soft); }
.c-row.is-missing .c-val, .c-row.is-missing .c-label { color: var(--danger); }
.c-row.is-uncertain { background: #FFF6E0; }
.c-row.is-uncertain .c-label { color: #8A5A00; }
.confirm-hint { color: var(--danger); font-weight: 600; margin: 0 0 12px; text-align: center; }
.confirm-hint:empty { display: none; }
.big-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.btn-big {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 72px;
  border-radius: 18px; border: 2px solid var(--border); background: var(--surface); color: var(--primary);
  font: 700 1.25rem var(--font); cursor: pointer;
}
.btn-big:active { transform: scale(.99); }
.btn-big:disabled { opacity: .45; cursor: not-allowed; }
.btn-big span[aria-hidden] { font-size: 1.6rem; }
.btn-green { background: #2E7D32; border-color: #2E7D32; color: #fff; }
/* Recording strip: shown at the top of whatever page is open while the microphone is red. */
.rec-banner {
  position: fixed; z-index: 30; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: var(--danger); color: #fff; font-weight: 700;
  box-shadow: 0 8px 24px -10px rgba(198, 40, 40, .6);
}
.rec-banner small { font-weight: 500; font-size: .85rem; opacity: .92; }
.rec-banner b { font-variant-numeric: tabular-nums; margin-left: 6px; }
.rec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #fff; margin-right: 8px; animation: micpulse 1.4s ease-in-out infinite; }
.banner-top { margin-top: 16px; }

body.simple .tabbar button { font-size: .95rem; }
body.simple .tabbar svg { width: 30px; height: 30px; }
body.simple { font-size: 112%; }
/* ---------- batches: filter, checkboxes, validate bar ---------- */
.seg { display: flex; gap: 6px; margin: 0 0 12px; background: #E7EBF2; padding: 4px; border-radius: 12px; }
.seg button {
  flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 9px 6px; cursor: pointer;
  font: 600 .9rem var(--font); color: var(--muted);
}
.seg button[aria-pressed=true] { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(20, 30, 60, .12); }
.seg b { font-weight: 700; }
.list li.sel { display: grid; grid-template-columns: 52px 1fr; align-items: stretch; }
.list li.sel .sel-box { align-self: center; justify-self: center; width: 26px; height: 26px; accent-color: var(--primary); cursor: pointer; }
/* Floats above the microphone that rises out of the bottom bar. */
.hist-bar {
  position: fixed; z-index: 9;
  left: max(12px, calc((100vw - 640px) / 2 + 12px)); right: max(12px, calc((100vw - 640px) / 2 + 12px));
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 42px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 12px 28px -12px rgba(15, 27, 51, .3);
}
.hist-bar .btn { min-width: 160px; }
.hist-bar .link { white-space: nowrap; }
.view.has-tabs:has(#hist-bar:not([hidden])) { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 150px); }
body.simple .hist-bar .btn { min-height: 60px; font-size: 1.15rem; border-radius: 16px; }
body.simple .list li.sel { grid-template-columns: 64px 1fr; }
body.simple .list li.sel .sel-box { width: 32px; height: 32px; }

/* ---------- Validés: lots, picked colis, sending ---------- */
.chip { border: 0; border-radius: 999px; padding: 5px 12px; font: 700 .8rem var(--font); cursor: pointer; white-space: nowrap; }
span.chip { cursor: default; }
.chip-todo { background: #FFF1D6; color: #8A5A00; }
.chip-ok { background: var(--success-soft); color: var(--success); }
.lots { display: flex; flex-direction: column; gap: 18px; }
.lot-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; }
.lot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lot-title { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.lot-meta { color: var(--muted); font-size: .85rem; }
.lot.is-new-lot .lot-title::after { content: "Nouveau"; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; vertical-align: middle; }
.lot.is-new-lot { animation: arrive 3.2s ease-out both; }
.lots .list li.sel { grid-template-columns: 52px 1fr; }
.vrow { display: flex; flex-direction: column; min-width: 0; }
.vrow a { padding-bottom: 6px; }
.vrow-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px 14px 18px; }
.vrow-actions .link { font-size: .9rem; }
.send-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 12px 12px 16px; }
.send-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: .95rem; }
.send-actions { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
body.simple .send-actions .btn { min-width: 0; min-height: 54px; font-size: 1rem; border-radius: 14px; }
.view.has-tabs:has(#send-bar:not([hidden])) { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 190px); }