/*
 * nextShift onboarding styles. Loaded via the :app manifest (see the layout).
 * Designed mobile-first for the Hotwire Native wrappers; the screens are RTL
 * Hebrew.
 */

:root {
  /* Opt every element (form controls, scrollbars, native pickers) into both
     colour schemes so the browser/WebView renders its own chrome to match the
     device theme. */
  color-scheme: light dark;

  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-bg: #ffffff;
  --surface: #ffffff;
  --color-border: #e2e8f0;

  --green-accent: #16a34a;
  --green-bg: #f0fdf4;
  --green-border: #bbf7d0;

  --blue-accent: #2563eb;
  --blue-bg: #eef2ff;
  --blue-border: #c7d2fe;

  --purple-accent: #7c3aed;
  --purple-bg: #f5f3ff;
  --purple-border: #ddd6fe;

  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --color-danger: #dc2626;

  --radius: 18px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-card: 0 10px 30px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.05);

  --page-bg: #eef1f6;
  --field-bg: #f7faf8;
  --field-border: #e3e8ee;
  --brand-gradient: linear-gradient(90deg, #1fae6b 0%, #2f86d8 100%);

  --toggle-checked-bg: #14152b;
  --tabbar-bg: rgba(255, 255, 255, 0.92);
  --overlay-weak: rgba(16, 24, 40, 0.04);
}

/* ---- Dark theme ----
   Automatically follows the device / OS appearance (prefers-color-scheme);
   there is no in-app switch. Only the design tokens above are re-declared —
   every component reads them, so the whole RTL UI flips in one place. Accents
   stay saturated (kept legible with white text on their fills); the light
   colour tints become translucent so they read as subtle overlays on the dark
   surfaces. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e6e8eb;
    --color-muted: #9aa3af;
    --color-bg: #0f1115;
    --surface: #191c23;
    --color-border: #2e3440;

    --green-accent: #16a34a;
    --green-bg: rgba(34, 197, 94, 0.15);
    --green-border: rgba(34, 197, 94, 0.32);

    --blue-accent: #4285f4;
    --blue-bg: rgba(66, 133, 244, 0.16);
    --blue-border: rgba(66, 133, 244, 0.34);

    --purple-accent: #9061f9;
    --purple-bg: rgba(144, 97, 249, 0.16);
    --purple-border: rgba(144, 97, 249, 0.34);

    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.15);
    --danger-border: rgba(248, 113, 113, 0.4);
    --color-danger: #f87171;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);

    --page-bg: #0f1115;
    --field-bg: #21252f;
    --field-border: #2e3440;

    --toggle-checked-bg: #4285f4;
    --tabbar-bg: rgba(22, 25, 32, 0.92);
    --overlay-weak: rgba(255, 255, 255, 0.07);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Heebo", "Assistant", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Brand logo ---- */
.logo {
  display: block;
  width: auto;
  max-width: 100%;
}
/* The wordmark is a raster PNG with dark lettering, so it disappears on the dark
   theme. Give it a white backing plate (content-box so the mark keeps its full
   height and the padding frames it) only when the dark theme is active. */
@media (prefers-color-scheme: dark) {
  .logo {
    box-sizing: content-box;
    background: #fff;
    padding: 6px 12px;
    border-radius: 12px;
  }
}

/* ---- Splash ---- */
.splash {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ---- Welcome / user-type selection ---- */
.welcome {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: max(28px, env(safe-area-inset-top)) 22px max(20px, env(safe-area-inset-bottom));
}

.welcome__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.welcome__greeting {
  margin: 8px 0 14px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}
.welcome__title {
  margin: 26px 0 6px;
  font-size: 1.3rem;
  font-weight: 800;
}
.welcome__subtitle {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.98rem;
}

.user-types {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 28px 0;
}

.user-types form { margin: 0; }

.user-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.user-card:active { transform: scale(0.985); }

.user-card--worker       { background: var(--green-bg);  border-color: var(--green-border); }
.user-card--business     { background: var(--blue-bg);   border-color: var(--blue-border); }
.user-card--professional { background: var(--purple-bg); border-color: var(--purple-border); }

.user-card__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-card__icon svg { width: 44px; height: 44px; }

.user-card__body { flex: 1; }
.user-card__title {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
}
.user-card__desc {
  margin: 0 0 6px;
  color: var(--color-muted);
  font-size: 0.95rem;
}
.user-card__tag {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
}
.user-card__tag--green  { color: var(--green-accent); }
.user-card__tag--blue   { color: var(--blue-accent); }
.user-card__tag--purple { color: var(--purple-accent); }

.welcome__footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
}
.welcome__footer form { margin: 0; }
.welcome__logout {
  border: 0;
  background: none;
  padding: 8px 12px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-muted);
  cursor: pointer;
}

/* ---- Auth / login ---- */
.auth {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--page-bg);
  padding: max(28px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
}

.auth__card {
  background: var(--surface);
  border-radius: 26px;
  box-shadow: var(--shadow-card);
  padding: 26px 22px;
}

.auth__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.auth__flash {
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.92rem;
  font-weight: 600;
}
.auth__flash--alert  { background: var(--danger-bg); color: var(--danger); }
.auth__flash--notice { background: var(--green-bg); color: var(--green-accent); }

.auth__intro {
  text-align: center;
  margin-bottom: 22px;
}
.auth__eyebrow {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-muted);
}
.auth__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
}
.auth__subtitle {
  margin: 6px 0 0;
  font-size: 0.98rem;
  color: var(--color-muted);
}
.auth__intro--green  .auth__title { color: var(--green-accent); }
.auth__intro--blue   .auth__title { color: var(--blue-accent); }
.auth__intro--purple .auth__title { color: var(--purple-accent); }

.auth__form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.field__required { color: var(--danger); font-weight: 700; }
.field__control { position: relative; }
.field__hint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-muted, #6b7280);
}
.field__input {
  width: 100%;
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  border-radius: 16px;
  padding: 16px 48px 16px 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field__input--password { padding-left: 48px; }
.field__input--ltr { direction: ltr; text-align: left; }
/* Native date inputs keep a large intrinsic min-width and centre their value on
   iOS, which ignores the field padding and looks nothing like the other inputs.
   Reset the WebKit appearance and pin the value to the start so the date lines
   up with the rest of the form. Kept LTR so iOS doesn't reverse the segments. */
.field__input--date {
  -webkit-appearance: none;
  appearance: none;
  direction: ltr;
  text-align: left;
  min-width: 0;
}
.field__input--date::-webkit-date-and-time-value { text-align: left; }
.field__input::placeholder { color: #9aa3af; }
.field__input:focus {
  outline: none;
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 4px rgba(47, 134, 216, 0.12);
}

.field__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
}
.field__icon svg { width: 22px; height: 22px; }
.field__icon--leading { right: 14px; }
.field__icon--trailing {
  left: 14px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text);
}

/* Address autocomplete dropdown (address_autocomplete_controller.js) */
.address-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-bg);
  border: 1.5px solid var(--field-border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  max-height: 260px;
  overflow-y: auto;
}
.address-suggestions__item {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
}
.address-suggestions__item:hover,
.address-suggestions__item[aria-selected="true"] {
  background: var(--blue-bg);
}
.address-suggestions__empty {
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.auth__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 600;
}
/* Kept the size of .toggle__box and overlapping it (not 0×0) so the browser's
   native "required" validation bubble has a visible element to anchor to. */
.toggle__input {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  pointer-events: none;
}
.toggle__box {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--field-border);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.toggle__box svg { width: 16px; height: 16px; opacity: 0; }
.toggle__input:checked + .toggle__box {
  background: var(--toggle-checked-bg);
  border-color: var(--toggle-checked-bg);
}
.toggle__input:checked + .toggle__box svg { opacity: 1; }
.toggle__input:focus-visible + .toggle__box {
  box-shadow: 0 0 0 4px rgba(47, 134, 216, 0.18);
}
/* After a failed submit attempt, mark the unchecked required box in red. */
.toggle__input:user-invalid + .toggle__box {
  border-color: var(--color-danger, #d64545);
  box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.15);
}

.auth__forgot {
  color: var(--green-accent);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
}

.toggle--terms {
  align-items: flex-start;
  font-weight: 600;
  font-size: 0.95rem;
}
.toggle--terms .toggle__label { color: var(--color-text); line-height: 1.5; }
.auth__terms-link {
  color: var(--blue-accent);
  font-weight: 700;
  text-decoration: none;
}

/* Static legal pages (terms of use). */
.legal__intro {
  margin: 0 0 18px;
  color: var(--color-muted);
  line-height: 1.6;
}
.legal__sections {
  margin: 0;
  padding-inline-start: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.legal__heading {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--color-text);
}
.legal__body {
  margin: 0;
  line-height: 1.6;
  color: var(--color-text);
}
.legal__contact {
  margin: 22px 0 0;
  font-weight: 600;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 17px 20px;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.btn__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.btn--primary {
  color: #fff;
  background: var(--brand-gradient);
  box-shadow: 0 8px 18px rgba(47, 134, 216, 0.28);
}
.btn--primary:active { transform: scale(0.99); }

/* Toggled-on state for a reversible action (e.g. a favorited job): a filled
   outline rather than the solid brand gradient of the primary call to action. */
.btn--outline {
  background: var(--field-bg);
  border: 1.5px solid var(--brand-blue, #2f86d8);
  color: var(--brand-blue, #2f86d8);
}
.btn--outline:active { transform: scale(0.99); }

.auth__card--social {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
}
.auth__divider {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.btn--google {
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  color: var(--color-text);
  font-size: 1rem;
}
.btn--google:active { transform: scale(0.99); }
/* "Sign in with Apple" follows Apple's button guidelines: black fill, white logo
   and label. Only ever rendered inside the iPhone app. */
.btn--apple {
  background: #000;
  border: 1.5px solid #000;
  color: #fff;
  font-size: 1rem;
  margin-top: 0.75rem;
}
.btn--apple:active { transform: scale(0.99); }
/* button_to wraps the Google button in a <form>; keep it a layout passthrough so
   the button still fills the social card the way the old bare <button> did. */
.auth__social-form { margin: 0; display: contents; }
.btn__icon { width: 22px; height: 22px; display: inline-flex; }
.btn__icon svg { width: 22px; height: 22px; }

/* ---- Language switch (profile + auth footers) ---- */
.language-switch-form { display: flex; justify-content: center; }
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--blue-border);
  background: var(--blue-bg);
  color: var(--blue-accent);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.language-switch:hover { background: var(--blue-border); }
.language-switch:active { transform: scale(0.97); }
.language-switch__icon { width: 20px; height: 20px; flex: none; }
.language-switch__label { line-height: 1; }

/* ---- Notification settings (profile → notifications) ---- */
.settings-group {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.settings-group__title { margin: 0; font-size: 1.05rem; }
.settings-group__hint { margin: 4px 0 6px; color: var(--color-muted); font-size: 0.9rem; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}
.settings-row + .settings-row { border-top: 1px solid var(--color-border); }
.settings-row__label { font-weight: 600; }
.switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch {
  flex: none;
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--field-border);
  transition: background 0.15s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
  transition: inset-inline-start 0.15s ease;
}
.switch__input:checked + .switch { background: var(--toggle-checked-bg); }
.switch__input:checked + .switch::after { inset-inline-start: 21px; }
.switch__input:focus-visible + .switch {
  box-shadow: 0 0 0 4px rgba(47, 134, 216, 0.18);
}

.auth__footer {
  margin-top: auto;
  text-align: center;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 600;
}
.auth__signup {
  color: var(--green-accent);
  font-weight: 800;
  text-decoration: none;
}
.auth__footer-sep { margin: 0 8px; color: var(--field-border); }
.auth__alt {
  color: var(--color-muted);
  font-weight: 700;
  text-decoration: none;
}

/* ---- Placeholder screens ---- */
.placeholder {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.placeholder h1 { margin: 0; font-size: 1.4rem; }
.placeholder p { margin: 0; color: var(--color-muted); }
.placeholder__back {
  margin-top: 8px;
  color: var(--blue-accent);
  font-weight: 700;
  text-decoration: none;
}
.placeholder__logout {
  margin-top: 12px;
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  border-radius: 999px;
  padding: 12px 28px;
  font: inherit;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
}
.placeholder__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}
.placeholder__actions .btn { max-width: 320px; }

/* ---- Worker "free today" availability toggle ---- */
.availability {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  margin-top: 12px;
}
.availability__set { width: 100%; }
.availability__status {
  margin: 0;
  font-weight: 800;
  color: var(--green-accent);
}
.availability__clear {
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  border-radius: 999px;
  padding: 12px 28px;
  font: inherit;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
}

/* ---- Job posting form ---- */
.job-form,
.jobs {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--page-bg);
  padding: max(20px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
}

.job-form__header,
.jobs__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.job-form__back {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  text-decoration: none;
}
.job-form__back svg { width: 24px; height: 24px; }
.job-form__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}

/* Inside a Hotwire Native wrapper (body.is-native, set from
   hotwire_native_app?) the app draws its own top nav bar with the screen
   title and a back button. Hide the web header so they aren't shown twice.
   The onboarding header (logo only, not duplicated chrome) is kept. */
.is-native .jobs__header,
.is-native .job-form__header:not(.onboarding__header) {
  display: none;
}

.job-form__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Plain inputs (no leading/trailing icon) shouldn't reserve icon padding. */
.field__input--plain { padding: 16px; }
.field__input--icon { padding: 16px 48px 16px 16px; }
.field__textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.field__char-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-muted);
  direction: ltr;
}
.field--char-near .field__char-count {
  color: var(--blue-accent);
}
.field--char-full .field__char-count {
  color: var(--danger);
}
.job-form__schedule {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Native date/time inputs need their WebKit appearance reset, otherwise on
   iOS they keep a large intrinsic min-width that ignores width:100% and makes
   the page scroll horizontally. They must also stay LTR — in an RTL page iOS
   reverses the segments (e.g. "Jun 2026 17" instead of "17 Jun 2026"). */
.job-form__date,
.job-form__time {
  -webkit-appearance: none;
  appearance: none;
  direction: ltr;
  text-align: center;
}
.job-form__date { width: 100%; min-width: 0; }
/* Start → duration → end strip, mirroring the job card's schedule. Laid out as
   two rows — labels above, inputs below — so each start/end label sits over its
   own time picker and the dashed connector (middle column) crosses the inputs
   at their vertical centre, regardless of the picker's height. The pill shows
   the live shift length, filled in by the shift-duration Stimulus controller. */
.job-form__shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
  justify-items: center;
  padding: 12px 14px;
  background: var(--blue-bg);
  border-radius: 14px;
}
.job-form__shift-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-muted);
}
.job-form__shift-sep {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
}
.job-form__shift-sep::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-top: 2px dashed var(--blue-border);
}
.job-form__shift-duration {
  position: relative;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--blue-border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-accent);
  white-space: nowrap;
}
.job-form__shift-duration[hidden] { display: none; }
.job-form__time { width: 100%; min-width: 0; }
.job-form__date::-webkit-date-and-time-value,
.job-form__time::-webkit-date-and-time-value { text-align: center; }

/* ---- Job list / detail ---- */
.jobs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.jobs__empty {
  text-align: center;
  color: var(--color-muted);
  margin: 24px 0;
}
.jobs__cta { margin-top: auto; }

/* ---- "Load more" under paginated lists ---- */
.load-more {
  display: flex;
  justify-content: center;
  margin: 14px 0 4px;
}
.load-more:empty { display: none; }
.load-more__link {
  display: inline-flex;
  align-items: center;
  padding: 10px 26px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--field-border);
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.load-more__link:hover { border-color: var(--blue-border); }

/* ---- Date filter ---- */
.jobs__filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jobs__filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jobs__filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--field-border);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.jobs__filter-pill:hover { border-color: var(--blue-border); }
.jobs__filter-pill--active {
  background: var(--blue-accent);
  border-color: var(--blue-accent);
  color: #fff;
}
/* The "pick a date" control is a visible pill with a transparent native date
   input laid directly on top of it. Tapping the pill therefore taps the real
   date control, so iOS opens the OS picker natively — the selected date is then
   shown on the pill's label. */
.jobs__filter-datewrap {
  position: relative;
  display: inline-flex;
}
.jobs__filter-date {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

/* ---- Distance sorting bar ---- */
.jobs__location {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jobs__location-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.jobs__location-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-accent);
}
.jobs__location-note--muted { color: var(--color-muted); font-weight: 600; }
.jobs__location-pin { width: 18px; height: 18px; flex: none; }
.jobs__location-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--blue-accent);
  border: 1.5px solid var(--blue-accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.jobs__location-btn:disabled { opacity: 0.6; cursor: default; }
.jobs__location-link {
  background: none;
  border: none;
  padding: 4px;
  color: var(--blue-accent);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.jobs__location-link:disabled { opacity: 0.6; cursor: default; }
.jobs__location-status:empty { display: none; }
.jobs__location-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.jobs__location-cityform { display: none; }

.job-card {
  display: block;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid var(--field-border);
  box-shadow: var(--shadow);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
a.job-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--blue-border);
}
a.job-card:active { transform: translateY(0); }
.job-card--detail { box-shadow: var(--shadow-card); }
.job-card__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}
.job-card__meta {
  margin: 0 0 4px;
  color: var(--color-muted);
  font-size: 0.95rem;
}
/* Live "starts in…" pill on the worker's upcoming jobs. */
.job-card__countdown {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-bg);
  color: var(--blue-accent);
  font-size: 0.9rem;
  font-weight: 700;
}
.job-card__countdown:empty {
  display: none;
}

/* ---- Business "storefront" card (businesses index) ----
   A premium card: full-width cover banner with a gradient scrim for depth,
   then a clean white body with a strong name and a soft, pinned address.
   RTL-friendly — flex `gap` and logical text-align follow the page direction. */
.business-card {
  display: block;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--field-border);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.business-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--blue-border);
}
a.business-card:active { transform: translateY(-1px); }

.business-card__banner {
  position: relative;
  width: 100%;
  height: 144px;
  background: linear-gradient(135deg, var(--blue-bg), var(--blue-border));
}
.business-card__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.business-card__cover--default {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-accent);
  opacity: 0.8;
}
.business-card__cover--default svg { width: 56px; height: 56px; }
/* Gradient overlay: deepens the lower edge of the image for a premium feel. */
.business-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.28) 100%);
  pointer-events: none;
}

.business-card__body { padding: 16px 18px 18px; }
.business-card__name {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-text);
}
.business-card__address {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-muted);
}
.business-card__address--warn { color: #d97706; font-weight: 600; }
.business-card__pin {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--blue-accent);
}

@media (prefers-reduced-motion: reduce) {
  .business-card { transition: none; }
  a.business-card:hover { transform: none; }
}

/* ---- Worker's "my jobs" card (app-card) ---- */
.app-card {
  padding: 0;
  overflow: hidden;
}
/* Favorite heart overlaid on the job detail card. Positioning context for the
   absolutely-placed toggle below; sits in the corner opposite the logo (RTL). */
.job-detail__card { position: relative; }
.favorite-heart {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--color-muted);
  box-shadow: 0 2px 8px rgba(20, 40, 80, 0.16);
  cursor: pointer;
  transition: transform 0.1s ease, color 0.1s ease;
}
.favorite-heart svg { width: 22px; height: 22px; }
.favorite-heart:active { transform: scale(0.9); }
/* Filled + red once the job is bookmarked. */
.favorite-heart--on { color: #e0245e; }
/* Header band: a prominent business logo beside the business name + job title. */
.app-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--blue-bg), var(--surface));
  border-bottom: 1px solid var(--field-border);
}
.app-card__logo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--field-border);
  box-shadow: 0 2px 8px rgba(20, 40, 80, 0.08);
}
.app-card__logo--default {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--blue-accent);
  border-color: var(--blue-border);
}
.app-card__logo--default svg { width: 34px; height: 34px; }
.app-card__heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* On the detail page the favorite heart is overlaid on the card's inline-end
   top corner, so keep the heading text clear of it. */
.job-card--detail .app-card__heading {
  padding-inline-end: 44px;
}
.app-card__business {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* On the detail page the logo + business name link through to the business
   profile, so hint that they're tappable. */
.app-card__logo-link {
  flex: 0 0 auto;
  display: inline-flex;
  border-radius: 16px;
}
.app-card__business--link {
  display: inline-block;
  max-width: 100%;
  color: var(--blue-accent);
  text-decoration: none;
}
.app-card__business--link:hover { text-decoration: underline; }
.app-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
}
.app-card__heading .job-card__badge,
.app-card__heading .job-card__countdown {
  align-self: flex-start;
  margin: 4px 0 0;
}
/* Status pill the poster sees on their own cards (hidden / archived / ended).
   Tinted from the design tokens so dark mode follows automatically. */
.job-card__badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  background: var(--overlay-weak);
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}
.job-card__badge--hidden {
  background: var(--blue-bg);
  border-color: var(--blue-border);
  color: var(--blue-accent);
}
.job-card__badge--ended {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}
/* Job description, shown only on the detail page. */
.app-card__body {
  padding: 14px 18px 0;
  color: var(--color-text);
  line-height: 1.5;
}
.app-card__body-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-muted, #6b7280);
}
.app-card__body p { margin: 0 0 8px; }
.app-card__body p:last-child { margin-bottom: 0; }
.app-card__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
}
.app-card__meta .job-card__meta {
  margin: 0;
}
/* Shift schedule: start and end times anchored to the edges with the shift
   length floating on a dashed connector between them — a flight-board look
   that makes "from … to …" read at a glance and fills the card's width. */
.job-card__schedule {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px;
  background: var(--blue-bg);
  border-radius: 14px;
}
.job-card__time {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.job-card__time-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-muted);
}
.job-card__time-value {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.job-card__time-sep {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.job-card__time-sep::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-top: 2px dashed var(--blue-border);
}
.job-card__time-duration {
  position: relative;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--blue-border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-accent);
  white-space: nowrap;
}
/* Location line: the address sits at the start, with the viewer's distance to
   the business pinned as a pill at the far end. */
.job-card__where {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.job-card__where-location {
  min-width: 0;
}
.job-card__map-link {
  color: inherit;
  text-decoration: none;
}
.job-card__map-link:hover {
  text-decoration: underline;
}
.job-card__distance {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-bg);
  color: var(--blue-accent);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.app-card__footer {
  padding: 14px 18px;
  border-top: 1px solid var(--field-border);
}
.job-card__rate {
  margin: 0;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--blue-accent);
}
.job-card__rate-unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-muted);
}

/* ---- Today's workers (home screen, hiring accounts) ---- */
/* ---- Home dashboard ---- */
.home {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: max(20px, env(safe-area-inset-top)) 20px 28px;
  background: var(--page-bg);
}

.home__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home__greeting { text-align: start; }
.home__hello {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
  font-weight: 600;
}
.home__name {
  margin: 2px 0 8px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.home__role {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--blue-bg);
  border: 1px solid var(--blue-border);
  color: var(--blue-accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.home__hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 22px;
  border-radius: 24px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #1fae6b 0%, #2f86d8 100%);
  box-shadow: 0 18px 34px rgba(47, 134, 216, 0.28);
}
.home__hero::after {
  content: "";
  position: absolute;
  inset-block-start: -60px;
  inset-inline-end: -50px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.home__hero--on {
  background: linear-gradient(135deg, #15a34a 0%, #1fae6b 100%);
  box-shadow: 0 18px 34px rgba(22, 163, 74, 0.28);
}
.home__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
}
.home__hero-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home__hero-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
}
.home__hero-sub {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}
.home__hero-cta {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 6px;
  color: #1b6fb8;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.16);
}
.home__hero-cta:active { transform: scale(0.99); }
.home__hero-link {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  text-decoration: none;
}
.home__hero-link--button {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
}

.home__action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.home__action:active { transform: scale(0.99); }
.home__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  background: var(--blue-bg);
  color: var(--blue-accent);
}
.home__action-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home__action-label {
  flex: 1;
  font-weight: 700;
  font-size: 1.05rem;
}
.home__action-chevron { color: var(--color-muted); display: inline-flex; }
[dir="ltr"] .home__action-chevron svg { transform: scaleX(-1); }
.home__action-chevron svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home__section { text-align: start; }
.home__section-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 800;
}
.home__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 20px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px dashed var(--field-border);
  text-align: center;
}
.home__empty-icon { font-size: 1.8rem; }
.home__empty p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}
.worker-card {
  background: var(--surface);
  border-radius: 14px;
  border: 1.5px solid var(--field-border);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.worker-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.worker-card__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.worker-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.worker-card__avatar,
.worker-card__picture {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.worker-card__picture {
  object-fit: cover;
  display: block;
}
.worker-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  background: var(--green-accent);
  direction: ltr;
}
.worker-card__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.worker-card__name { font-weight: 700; font-size: 1.05rem; }
.worker-card__age {
  color: var(--color-muted);
  font-size: 0.9rem;
}
.worker-card__profession {
  color: var(--color-muted);
  font-size: 0.9rem;
}
.worker-card__job {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--color-text);
  font-size: 0.9rem;
}
.worker-card__job-title { font-weight: 600; }
.worker-card__time,
.worker-card__location { color: var(--color-muted); }
.worker-card__phone {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--green-bg);
  color: var(--green-accent);
  font-weight: 700;
  text-decoration: none;
  direction: ltr;
}
.worker-card__distance {
  margin-inline-start: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent, var(--green-accent));
}
.worker-card__rate {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green-bg);
  color: var(--green-accent);
  font-size: 0.85rem;
  font-weight: 700;
  direction: ltr;
}

/* ---- Workers (available-today list) ---- */
.workers__origin {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.workers__origin-label {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-muted);
}
.workers__origin-switch {
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-accent);
  text-decoration: none;
}
.workers__wage-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.workers__wage-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
}
.workers__wage-submit {
  flex-shrink: 0;
  width: auto;
  padding: 12px 18px;
}
.workers__wage-clear {
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-muted);
  text-decoration: none;
}
.workers__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-muted);
}
.workers__divider::before,
.workers__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border, rgba(0, 0, 0, 0.12));
}
/* Full-width divider row inside the single jobs <ul>, splitting jobs that meet
   the worker's desired wage from those below it. */
.jobs__wage-divider {
  list-style: none;
}
.workers__choose-intro {
  margin: 0 0 16px;
  font-weight: 600;
}
.job-card__meta--warn { color: var(--color-danger, #c0392b); }
/* "Today"/"Tomorrow" label on a job card — darker and heavier than the
   surrounding muted meta line to draw the eye. */
.job-card__day--relative {
  color: var(--color-text);
  font-weight: 700;
}

/* ---- Profile ---- */
.profile {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--page-bg);
  padding: max(20px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
}

.profile__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid var(--field-border);
  box-shadow: var(--shadow-card);
  padding: 28px 20px;
  text-align: center;
}
.profile__avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  background: var(--brand-gradient);
  direction: ltr;
}
/* Uploaded profile/business photo, sized to match the fallback avatar. */
.profile__picture,
.business__picture {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}
.profile__name {
  margin: 8px 0 0;
  font-size: 1.3rem;
  font-weight: 800;
}
.profile__type {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-muted);
}

/* Accent the avatar to match the account type's colour from the welcome cards. */
.profile--worker       .profile__avatar { background: var(--green-accent); }
.profile--business     .profile__avatar { background: var(--blue-accent); }
.profile--professional .profile__avatar { background: var(--purple-accent); }
.profile--worker       .profile__type { color: var(--green-accent); }
.profile--business     .profile__type { color: var(--blue-accent); }
.profile--professional .profile__type { color: var(--purple-accent); }

.profile__details {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid var(--field-border);
  box-shadow: var(--shadow);
  padding: 6px 18px;
}
.profile__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--field-border);
}
.profile__row:last-child { border-bottom: 0; }
.profile__row-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted);
}
.profile__row-value {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text);
}
.profile__row-value p { margin: 0; }

.profile__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* On the job detail page the action (message the poster / edit) sits right below
   the card rather than pinned to the bottom of the screen like on profiles. */
.jobs .profile__actions { margin-top: 0; }
.profile__actions form { margin: 0; }
.profile__logout {
  width: 100%;
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  border-radius: 999px;
  padding: 14px 28px;
  font: inherit;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
}
.profile__delete-account {
  width: 100%;
  border: 1.5px solid var(--danger);
  background: transparent;
  border-radius: 999px;
  padding: 14px 28px;
  font: inherit;
  font-weight: 700;
  color: var(--danger);
  cursor: pointer;
}

/* ---- Profile settings menu (grouped rows: icon chip, label, chevron) ---- */
.profile__menu {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.menu-group__title {
  margin: 0 0 8px;
  padding-inline: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.menu-group__items {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid var(--field-border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.menu-group__items form { margin: 0; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-item:hover,
.menu-item:active { background: var(--field-bg); }
/* Hairline separator between rows; declared after .menu-item so it wins over its border reset. */
.menu-group__items > * + * { border-top: 1px solid var(--field-border); }
.menu-item__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--field-bg);
  display: grid;
  place-items: center;
}
.menu-item__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-item__label { flex: 1; }
.menu-item__chevron {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The chevron points "forward": drawn for RTL, mirrored in LTR layouts. */
[dir="ltr"] .menu-item__chevron { transform: scaleX(-1); }
.menu-item--danger { color: var(--danger); }
.menu-item--danger .menu-item__icon { background: var(--danger-bg); }
.menu-item--danger:hover,
.menu-item--danger:active { background: var(--danger-bg); }

.profile-edit__subtitle {
  margin: -6px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-muted);
}

/* ---- Bottom tab bar ---- */
.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 4px;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  background: var(--tabbar-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--field-border);
  box-shadow: 0 -1px 3px rgba(16, 24, 40, 0.04);
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
  text-decoration: none;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.tabbar__item svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tabbar__item--active { color: var(--blue-accent); }
.tabbar__label { line-height: 1; }
/* Wraps the icon so the unread badge can anchor to its top corner. */
.tabbar__icon {
  position: relative;
  display: inline-flex;
  line-height: 0;
}
/* Unread-activity dot overlaid on a tab's icon (e.g. new chat messages). */
.tabbar__badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -3px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--green-accent);
  border: 1.5px solid var(--tabbar-bg);
}

/* Keep page content clear of the fixed tab bar. */
.has-tabbar main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

/* Inside the native wrappers, add a little breathing room at the very bottom
   of every screen so content doesn't end flush against the screen edge (or
   the native tab bar) when scrolled all the way down. */
.is-native main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.is-native.has-tabbar main { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }

/* ---- Global flash toast (see shared/_flash + flash_controller.js) ---- */
.flash {
  position: fixed;
  inset-inline: 0;
  top: calc(16px + env(safe-area-inset-top));
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  pointer-events: none;
}
.flash__item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(480px, calc(100% - 32px));
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.flash__item--leaving { opacity: 0; transform: translateY(-8px); }
/* Layer the (possibly translucent) tint over an opaque surface so the floating
   toast never lets page content bleed through — matters in dark mode. */
.flash__item--alert  { background: linear-gradient(var(--danger-bg), var(--danger-bg)), var(--surface); color: var(--danger); }
.flash__item--notice { background: linear-gradient(var(--green-bg), var(--green-bg)), var(--surface); color: var(--green-accent); }
.flash__message { flex: 1; }
.flash__close {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.flash__close:hover { opacity: 1; }

/* ---- Offline toast (see network_controller.js) ---- */
.offline-toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 70;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: #1f2937;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.offline-toast[hidden] { display: none; }
/* Lift the toast above the tab bar when one is present. */
.has-tabbar .offline-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* Custom file-upload control (business picture). */
.upload {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed var(--field-border);
  background: var(--field-bg);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.upload:hover { border-color: var(--blue-accent); }
.upload:focus-within {
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 4px rgba(47, 134, 216, 0.12);
}
.upload--filled { border-style: solid; }

.upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.upload__preview {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.upload__image { width: 100%; height: 100%; object-fit: cover; display: block; }

.upload__placeholder {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--blue-accent);
}
.upload__icon { width: 26px; height: 26px; stroke-linecap: round; stroke-linejoin: round; }

.upload__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.upload__title { font-weight: 700; color: var(--color-text); }
.upload__filename {
  font-size: 0.85rem;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload__action {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand-gradient);
  box-shadow: 0 6px 14px rgba(47, 134, 216, 0.24);
}

/* Native select styled to match the plain text inputs (chevron drawn via
   .field__icon--leading, so hide the browser's default arrow). */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Business identity on a job post: picture/default storefront + name. */
.biz-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.biz-badge__picture {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--field-border);
}
.biz-badge__picture--default {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-bg);
  color: var(--blue-accent);
  border-color: var(--blue-border);
}
.biz-badge__picture--default svg { width: 24px; height: 24px; }
.biz-badge__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Onboarding wizard ---- */
.onboarding__header { justify-content: center; }
.onboarding__frame { display: block; }
.onboarding__step-label {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted);
}
.onboarding__progress {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.onboarding__dot {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: var(--blue-border);
}
.onboarding__dot.is-active { background: var(--blue-accent); }
.onboarding__title { margin-bottom: 4px; }
.onboarding__subtitle {
  margin: 0 0 18px;
  font-size: 0.95rem;
  color: var(--color-muted);
}
.onboarding__hint {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.onboarding__doc-status {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
}
.onboarding__privacy-note {
  margin: 20px 0 0;
  font-size: 0.8rem;
  text-align: center;
  color: var(--color-muted);
}
.onboarding__required-note {
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.onboarding__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted);
}
.onboarding__or::before,
.onboarding__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border, #e2e8f0);
}
.onboarding__doc-status--pending_review { color: var(--blue-accent); }
.onboarding__doc-status--approved { color: var(--green-accent); }
.onboarding__doc-status--rejected { color: var(--danger); }

/* Base form field used by the onboarding steps (no shared partial, so styled here). */
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.form-field__input {
  width: 100%;
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  border-radius: 16px;
  padding: 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field__input::placeholder { color: #9aa3af; }
.form-field__input:focus {
  outline: none;
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 4px rgba(47, 134, 216, 0.12);
}

/* Step 1: the 6-digit email-confirmation code. Centred, wide letter spacing so
   the digits read as a code rather than ordinary text. The width is capped and
   centred (rather than relying on the input's default character width, which
   overflowed the viewport on mobile). text-indent offsets the trailing
   letter-spacing so the digits sit optically centred. */
.onboarding__code-input {
  display: block;
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  font-weight: 700;
  direction: ltr;
}
.onboarding__resend {
  margin-top: 12px;
  width: 100%;
}
.onboarding__resend:disabled {
  opacity: 0.55;
  cursor: default;
}

/* "Having trouble? Contact us" on the email-verification step: a quiet
   disclosure under the resend button that opens the inline message form. */
.onboarding__contact {
  margin-top: 20px;
  text-align: center;
}
.onboarding__contact-toggle {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-accent);
  text-decoration: underline;
}
.onboarding__contact-toggle::-webkit-details-marker { display: none; }
.onboarding__contact-form {
  margin-top: 16px;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.onboarding__contact-form textarea.form-field__input { resize: vertical; }

/* ---- Worker card actions (phone + message) ---- */
.worker-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.worker-card__message,
.applicant__message {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--blue-bg, rgba(59, 130, 246, 0.12));
  color: var(--blue-accent);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.applicant__message { margin-top: 8px; }

/* ---- Worker review form (1–5 stars + comment) ---- */
.review-form {
  margin-top: 24px;
  padding: 22px;
  background: var(--color-bg);
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.review-form__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.review-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.review-form__label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-muted);
}
.review-form__comment {
  width: 100%;
  border-radius: 14px;
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  padding: 12px 14px;
  font: inherit;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.review-form__comment:focus {
  outline: none;
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px var(--blue-bg);
}
.review-form__submit {
  margin-top: 12px;
  width: 100%;
}

/* Star rating: the legend sits on its own row, while the stars live in a
   reversed-row flex wrapper so a hovered/checked star lights itself and every
   lower-numbered star after it in the DOM. */
.star-rating {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.star-rating__stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 6px;
  align-self: flex-start;
}
.star-rating__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.star-rating__star {
  font-size: 2.25rem;
  line-height: 1;
  color: var(--field-border);
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
}
.star-rating__star:hover { transform: scale(1.12); }
.star-rating__star:hover,
.star-rating__star:hover ~ .star-rating__star,
.star-rating__input:checked ~ .star-rating__star {
  color: #f5b50a;
}
.star-rating__input:focus-visible + .star-rating__star {
  outline: 2px solid var(--green-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Chat inbox ---- */
.conv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.conv__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--field-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--color-text);
}
.conv__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-bg);
  color: var(--green-accent);
  font-weight: 800;
  font-size: 1.1rem;
}
.conv__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.conv__name { font-weight: 700; }
.conv__preview {
  color: var(--color-muted);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv__time {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: 0.8rem;
}

/* The pinned "NextShift support" row: brand-tinted avatar and an unread dot. */
.conv__avatar--support {
  background: var(--green-accent);
  color: #fff;
}
.conv__avatar--support svg { width: 20px; height: 20px; }
.conv__unread {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--green-accent);
}
/* A thread with messages the user hasn't opened yet: emphasize the row and its
   preview so it stands out from already-read conversations. */
.conv--unread .conv__name { font-weight: 800; }
.conv--unread .conv__preview {
  color: var(--color-text);
  font-weight: 600;
}

/* ---- Chat thread ---- */
.chat {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
/* Cancel the global main padding-bottom; the form handles tabbar clearance. */
.has-tabbar main.chat { padding-bottom: 0; }
.chat__header { flex: 0 0 auto; min-width: 0; }
/* The title is often a long email; keep it on one line and ellipsize it
   instead of letting it overflow the screen edge. */
.chat__header .job-form__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
/* In native wrappers the web header is hidden (the app draws its own nav bar),
   so the message list starts flush at the top of the web view — which extends
   up behind that bar under viewport-fit=cover. Pad the top by the safe-area
   inset (it includes the native nav bar here) so the first message clears it. */
.is-native .chat__messages { padding-top: calc(12px + env(safe-area-inset-top)); }
.chat__empty {
  margin: auto;
  color: var(--color-muted);
}
.msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.msg--mine { align-self: flex-end; align-items: flex-end; }
.msg--theirs { align-self: flex-start; align-items: flex-start; }
.msg__bubble {
  padding: 9px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1.5px solid var(--field-border);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg--mine .msg__bubble {
  background: var(--blue-accent);
  border-color: var(--blue-accent);
  color: #fff;
}
.msg__time {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--color-muted);
}
/* "Seen" marker, only ever added to one of my own bubbles by the chat controller. */
.msg__seen {
  margin-top: 1px;
  font-size: 0.68rem;
  color: var(--blue-accent);
}
/* The other participant's "…typing" bubble; sits just above the composer. */
.chat__typing {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 4px;
  padding: 9px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1.5px solid var(--field-border);
  color: var(--color-muted);
  font-size: 0.85rem;
}
.chat__typing[hidden] { display: none; }
.chat__typing-dots { display: inline-flex; gap: 3px; }
.chat__typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-muted);
  animation: chat-typing 1.2s infinite ease-in-out;
}
.chat__typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat__typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.chat__form {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: var(--color-bg, #fff);
}
/* Lift the composer above the fixed bottom tab bar. */
.has-tabbar .chat__form { padding-bottom: calc(78px + max(10px, env(safe-area-inset-bottom))); }
.chat__input {
  flex: 1 1 auto;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--field-border);
  font-size: 1rem;
  background: var(--surface);
}
.chat__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--blue-accent);
  color: #fff;
}
.chat__send svg { width: 22px; height: 22px; }
/* The send arrow points the way the language reads. */
[dir="rtl"] .chat__send svg { transform: scaleX(-1); }