/* ─────────────────────────────────────────────────────────────────────────────
   Uyali design polish — loaded last. One brand colour for primary actions,
   calm sentence-case labels, nothing covering navigation or the composer, and
   consistent controls on phone, tablet and desktop. Uses existing tokens only.
   ───────────────────────────────────────────────────────────────────────────── */
:root { --uyali-on-brand: #ffffff; --uyali-toast-gap: 12px; }
:root[data-theme="dark"] { --uyali-on-brand: #04140d; }

/* ── 1. One primary colour ─────────────────────────────────────────────────
   Primary actions were black on runner screens and green on buyer screens. */
.uyali-order-progress-action,
.upload-btn,
.receipt-approve-btn:not(:disabled) {
  background: var(--uyali-brand);
  color: var(--uyali-on-brand);
  border: 0;
}
.uyali-order-progress-action:hover:not(:disabled),
.upload-btn:hover,
.receipt-approve-btn:hover:not(:disabled) { filter: brightness(.94); transform: none; }
/* Hover darkens slightly instead of switching to a brighter, different green. */
.checkout-btn::before { background: rgba(0, 0, 0, .08); }
.checkout-btn:not(.disabled):hover { transform: none; box-shadow: none; }

/* Status banner: brand accent instead of the leftover purple (both themes). */
:root .uyali-order-progress:not([data-uyali-stage="disputed"]) { border-inline-start-color: var(--uyali-brand); }
:root .uyali-order-progress:not([data-uyali-stage="disputed"]) .uyali-order-progress-label,
:root[data-theme="dark"] .uyali-order-progress:not([data-uyali-stage="disputed"]) .uyali-order-progress-label { color: var(--uyali-brand-text); }
/* Dark mode: the home call to action matches every other primary button. */
:root[data-theme="dark"] .home-sidebar .checkout-btn:not(.disabled) { background: var(--uyali-brand); color: var(--uyali-on-brand); }

/* ── 2. Calm, sentence-case labels (no shouting all-caps) ───────────────── */
.chat-timestamp,
.escrow-badge,
.receipt-label,
.mission-label,
.uyali-order-progress-label {
  text-transform: none;
  letter-spacing: 0;
}
.chat-timestamp { font-weight: 600; }
.receipt-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.uyali-order-progress-label { font-size: 12px; font-weight: 600; }

/* ── 3. Spending limit as a plain summary, not an imitation bank card ───── */
.virtual-card {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: none;
  aspect-ratio: auto;
  min-height: 0;
  padding: 18px 20px;
  display: grid;
  gap: 4px;
  text-align: start;
}
.virtual-card::before, .virtual-card::after, .vcard-chip { display: none; }
.vcard-logo { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); opacity: 1; }
.vcard-number { font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text-muted); margin: 0; text-align: start; }
.vcard-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; }
.vcard-label { color: var(--text-muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.vcard-amount { color: var(--text-primary); font-size: 22px; font-weight: 800; letter-spacing: -.2px; }
.vcard-exp { color: var(--text-primary); font-size: 14px; font-weight: 600; }

/* ── 4. Form controls look the same everywhere ─────────────────────────── */
/* Native number spinners look unfinished on money and quantity fields. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* The substitution select was a pill while every other field is a rounded rectangle. */
.sub-pref-select { border-radius: 10px; }

/* ── 5. Nothing covers navigation, the composer or content ─────────────── */
/* Notifications: bottom-right on desktop (not over the header controls),
   bottom-centre above the tab bar on phones. At most two are visible. */
#toast-container {
  top: auto;
  bottom: 0;
  right: 0;
  left: auto;
  padding: 24px 96px 24px 24px; /* clear of the round help button */
  flex-direction: column-reverse;
  gap: var(--uyali-toast-gap);
}
#toast-container .toast:nth-last-child(n+3) { display: none; }
.toast { box-shadow: var(--shadow-medium); }

/* The help button sat on top of the chat Send button on desktop. */
body:has(#screen-chat.active) .support-fab { bottom: 120px; }
body:has(#screen-chat.active) #toast-container { bottom: 104px; }

@media (max-width: 768px) {
  #toast-container {
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    padding: 8px 12px;
  }
  /* One notification at a time on phones; the newest replaces older ones. */
  #toast-container .toast:nth-last-child(n+2) { display: none; }
  /* The message composer was half hidden behind the bottom tab bar: keep it
     docked directly above the tab bar and leave room so no message hides behind it. */
  #screen-chat.active .chat-input-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    margin: 0;
    padding: 10px 14px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
  }
  #screen-chat.active { padding-bottom: 84px; }
  /* Notifications sit above the docked composer on the order screen. */
  body:has(#screen-chat.active) #toast-container { bottom: calc(72px + 76px + env(safe-area-inset-bottom, 0px)); }
  /* An available app update must not intercept the Send button either. */
  body:has(#screen-chat.active) .uyali-update { bottom: calc(72px + 76px + env(safe-area-inset-bottom, 0px)); }
}

/* ── 6. Errand summary while waiting for offers ───────────────────────── */
.uyali-summary-card { margin: 16px 16px 0; padding: 18px 20px; border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--bg-card); color: var(--text-primary); }
.uyali-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.uyali-summary-head h3 { font-size: 16px; font-weight: 700; margin: 0; }
.uyali-summary-shop { color: var(--text-secondary); font-size: 14px; font-weight: 500; text-align: end; }
.uyali-summary-items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.uyali-summary-items li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-input); font-size: 15px; font-weight: 500; }
.uyali-summary-qty { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uyali-summary-totals { margin: 0; display: grid; gap: 8px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.uyali-summary-totals div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.uyali-summary-totals dt { color: var(--text-secondary); }
.uyali-summary-totals dd { margin: 0; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
/* Product codes, shop names and addresses can contain long unbroken text. */
.uyali-summary-head > *,
.uyali-summary-items li > :first-child,
.uyali-summary-totals dt,
.uyali-summary-totals dd { min-width: 0; overflow-wrap: anywhere; }
.uyali-summary-qty { flex-shrink: 0; }
.uyali-summary-totals dd { max-width: 65%; }
@media (min-width: 769px) { .uyali-summary-card { max-width: 560px; } }
@media (max-width: 768px) { .uyali-summary-card { margin: 12px 12px 0; } }

/* ── 7. Motion respects the user's setting ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}