/* =====================================================================
   TaxiHub design system — Bootstrap 5.3 + tokens. Light/dark via [data-bs-theme].
   ===================================================================== */
:root {
  --th-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --th-brand: #f5a700;          /* taxi amber */
  --th-brand-600: #d98f00;
  --th-brand-50: #fff7e0;
  --th-brand-ink: #1a1200;
  --th-ink: #0f172a;
  --th-ink-2: #334155;
  --th-muted: #64748b;
  --th-line: #e6e8ee;
  --th-bg: #ffffff;          /* page/app background: pure white (cards separate via border + shadow) */
  --th-surface: #ffffff;
  --th-surface-2: #ffffff;   /* secondary panels, table heads, inputs: white too */
  --th-sidebar: #0b1220;
  --th-sidebar-ink: #a8b3c7;
  --th-sidebar-active: #ffffff;
  --th-success: #16a34a; --th-success-bg: #e8f7ee;
  --th-danger: #dc2626;  --th-danger-bg: #fdecec;
  --th-warning: #b45309; --th-warning-bg: #fff4e0;
  --th-info: #2563eb;    --th-info-bg: #e8f0fe;
  --th-neutral-bg: #eef1f6;
  --th-radius: 14px;
  --th-radius-sm: 10px;
  --th-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06);
  --th-shadow-lg: 0 12px 40px rgba(15, 23, 42, .12);

  --bs-body-font-family: var(--th-font);
  --bs-body-bg: var(--th-bg);
  --bs-body-color: var(--th-ink);
  --bs-border-color: var(--th-line);
  --bs-primary: var(--th-brand);
  --bs-primary-rgb: 245, 167, 0;
  --bs-link-color: #b07800;
  --bs-link-hover-color: #8a5e00;
  --bs-border-radius: var(--th-radius-sm);
  --bs-border-radius-lg: var(--th-radius);
  /* Bootstrap's own light/tertiary backgrounds (bg-light, bg-body-tertiary…) → white, like the rest of the app */
  --bs-light-rgb: 255, 255, 255;
  --bs-tertiary-bg: #ffffff; --bs-tertiary-bg-rgb: 255, 255, 255;
}
[data-bs-theme="dark"] {
  --th-ink: #e7ebf3;
  --th-ink-2: #c3cad8;
  --th-muted: #8d98ad;
  --th-line: #232c3d;
  --th-bg: #0a0f1a;
  --th-surface: #111827;
  --th-surface-2: #0f1624;
  --th-sidebar: #070b13;
  --th-brand-50: rgba(245, 167, 0, .12);
  --th-success-bg: rgba(22, 163, 74, .15);
  --th-danger-bg: rgba(220, 38, 38, .15);
  --th-warning-bg: rgba(245, 158, 11, .15);
  --th-info-bg: rgba(37, 99, 235, .18);
  --th-neutral-bg: #1b2333;
  --th-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --bs-body-bg: var(--th-bg);
  --bs-body-color: var(--th-ink);
  --bs-border-color: var(--th-line);
  --bs-link-color: #ffc53d;
  --bs-link-hover-color: #ffd773;
  --bs-secondary-bg: var(--th-surface-2);
  --bs-tertiary-bg: var(--th-surface-2);
  --bs-tertiary-bg-rgb: 15, 22, 36;   /* = --th-surface-2; keeps dark mode dark despite the light-theme white override */
  --bs-light-rgb: 248, 249, 250;
}

html { scrollbar-gutter: stable; }
html, body { min-height: 100%; }
body { font-family: var(--th-font); background: var(--th-bg); color: var(--th-ink); -webkit-font-smoothing: antialiased; font-size: .935rem; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; color: var(--th-ink); }
.text-muted, .text-secondary { color: var(--th-muted) !important; }
a { text-decoration: none; }
code { color: var(--th-ink-2); background: var(--th-neutral-bg); padding: .1rem .35rem; border-radius: 6px; }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.small-caps { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--th-muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--th-radius-sm); padding: .55rem 1rem; display: inline-flex; align-items: center; gap: .45rem; justify-content: center; }
.btn-sm { padding: .35rem .7rem; font-size: .82rem; }
.btn-lg { padding: .8rem 1.4rem; font-size: 1rem; }
.btn-primary { --bs-btn-bg: var(--th-brand); --bs-btn-border-color: var(--th-brand); --bs-btn-color: var(--th-brand-ink);
  --bs-btn-hover-bg: var(--th-brand-600); --bs-btn-hover-border-color: var(--th-brand-600); --bs-btn-hover-color: var(--th-brand-ink);
  --bs-btn-active-bg: var(--th-brand-600); --bs-btn-active-border-color: var(--th-brand-600); --bs-btn-active-color: var(--th-brand-ink);
  --bs-btn-disabled-bg: var(--th-brand); --bs-btn-disabled-border-color: var(--th-brand); --bs-btn-disabled-color: var(--th-brand-ink);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--th-brand) 25%, transparent); }
.btn-dark { --bs-btn-bg: var(--th-ink); --bs-btn-border-color: var(--th-ink); }
[data-bs-theme="dark"] .btn-dark { --bs-btn-bg: #e7ebf3; --bs-btn-color: #0a0f1a; --bs-btn-border-color: #e7ebf3; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #000; }
.btn-light { --bs-btn-bg: var(--th-surface); --bs-btn-border-color: var(--th-line); --bs-btn-color: var(--th-ink); --bs-btn-hover-bg: var(--th-neutral-bg); --bs-btn-hover-border-color: var(--th-line); --bs-btn-hover-color: var(--th-ink); }
.btn-soft-danger { background: var(--th-danger-bg); color: var(--th-danger); border: 0; }
.btn-soft-danger:hover { background: var(--th-danger); color: #fff; }
.btn-soft-success { background: var(--th-success-bg); color: var(--th-success); border: 0; }
.btn-soft-success:hover { background: var(--th-success); color: #fff; }
.btn-icon { width: 36px; height: 36px; padding: 0; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: var(--th-radius-sm); border-color: var(--th-line); background-color: var(--th-surface); color: var(--th-ink); padding: .6rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--th-brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--th-brand) 18%, transparent); }
.form-label { font-weight: 600; font-size: .82rem; color: var(--th-ink-2); margin-bottom: .35rem; }
.form-text { color: var(--th-muted); }
.input-group-text { background: var(--th-surface-2); border-color: var(--th-line); color: var(--th-muted); }
.form-check-input:checked { background-color: var(--th-brand); border-color: var(--th-brand); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }

/* ---------- Cards ---------- */
.card { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius); box-shadow: var(--th-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--th-line); padding: 1rem 1.25rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.card-body { padding: 1.25rem; }
.card-footer { background: transparent; border-top: 1px solid var(--th-line); }
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--th-shadow-lg); }

.stat { display: flex; gap: 1rem; align-items: center; }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex: none; }
.stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.stat-label { font-size: .78rem; color: var(--th-muted); font-weight: 600; }
.ic-amber { background: var(--th-brand-50); color: var(--th-brand-600); }
.ic-green { background: var(--th-success-bg); color: var(--th-success); }
.ic-red { background: var(--th-danger-bg); color: var(--th-danger); }
.ic-blue { background: var(--th-info-bg); color: var(--th-info); }
.ic-slate { background: var(--th-neutral-bg); color: var(--th-ink-2); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--th-ink); margin: 0; }
.table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--th-muted); font-weight: 700; border-bottom-width: 1px; padding: .75rem 1rem; white-space: nowrap; background: var(--th-surface-2); }
.table > tbody td { padding: .8rem 1rem; vertical-align: middle; border-color: var(--th-line); }
.table-card { overflow: visible; }
.table-responsive { border-radius: 0 0 var(--th-radius) var(--th-radius); }
@media (min-width: 992px) {
  .table-card .table-responsive { overflow: visible; }
}
.table td .dropdown-menu { z-index: 1060; }

/* ---------- Badges / status ---------- */
.badge-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; padding: .3rem .6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-success { background: var(--th-success-bg); color: var(--th-success); }
.st-danger { background: var(--th-danger-bg); color: var(--th-danger); }
.st-warning { background: var(--th-warning-bg); color: var(--th-warning); }
.st-info { background: var(--th-info-bg); color: var(--th-info); }
.st-neutral { background: var(--th-neutral-bg); color: var(--th-ink-2); }
.st-brand { background: var(--th-brand-50); color: var(--th-brand-600); }

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 260px; background: var(--th-sidebar); color: var(--th-sidebar-ink); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 1040; transition: transform .2s ease; }
.sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1.25rem 1.25rem 1rem; color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--th-brand) 65%, #fff), var(--th-brand)); display: grid; place-items: center; color: var(--th-brand-ink); font-size: 1.05rem; box-shadow: 0 6px 18px color-mix(in srgb, var(--th-brand) 35%, transparent); }
.sidebar nav { flex: 1; overflow-y: auto; padding: .5rem .75rem 1rem; }
.nav-section { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: #5b6880; padding: 1rem .75rem .4rem; }
.side-link { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 10px; color: var(--th-sidebar-ink); font-weight: 500; font-size: .9rem; margin-bottom: 2px; }
.side-link i { font-size: 1.05rem; width: 20px; text-align: center; opacity: .9; }
.side-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.side-link.active { background: color-mix(in srgb, var(--th-brand) 14%, transparent); color: color-mix(in srgb, var(--th-brand) 70%, #fff); }
.side-link .count { margin-left: auto; background: var(--th-brand); color: var(--th-brand-ink); font-size: .7rem; font-weight: 800; border-radius: 999px; padding: .05rem .45rem; }
.sidebar-foot { padding: 1rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, .06); font-size: .8rem; }
.main { flex: 1; margin-left: 260px; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 64px; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; background: color-mix(in srgb, var(--th-bg) 85%, transparent); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 1030; border-bottom: 1px solid var(--th-line); }
.content { padding: 1.5rem; flex: 1; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.45rem; margin: 0; }
.page-head .sub { color: var(--th-muted); margin-top: .2rem; font-size: .88rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--th-brand-50); color: var(--th-brand-600); display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; }
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; }
  .sidebar.open + .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1035; }
  .main { margin-left: 0; }
  .content { padding: 1rem; }
  .topbar { padding: 0 1rem; }
}

/* ---------- Tabs / pills ---------- */
.nav-pills-th { display: flex; flex-wrap: wrap; gap: .35rem; background: var(--th-surface); border: 1px solid var(--th-line); padding: .3rem; border-radius: 12px; width: fit-content; max-width: 100%; overflow-x: auto; }
.nav-pills-th a { padding: .4rem .85rem; border-radius: 9px; color: var(--th-muted); font-weight: 600; font-size: .84rem; white-space: nowrap; }
.nav-pills-th a.active { background: var(--th-ink); color: var(--th-surface); }
[data-bs-theme="dark"] .nav-pills-th a.active { background: var(--th-brand); color: var(--th-brand-ink); }

/* ---------- Timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 1.1rem 1.75rem; }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: var(--th-line); }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--th-surface); border: 3px solid var(--th-brand); }
.timeline .t-title { font-weight: 600; font-size: .88rem; }
.timeline .t-meta { font-size: .76rem; color: var(--th-muted); }

/* ---------- Stepper (booking flow) ---------- */
.stepper { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .25rem; }
.stepper .step { flex: 1; min-width: 92px; text-align: center; font-size: .7rem; font-weight: 600; color: var(--th-muted); }
.stepper .bar { height: 6px; border-radius: 6px; background: var(--th-line); margin-bottom: .4rem; }
.stepper .step.done .bar { background: var(--th-brand); }
.stepper .step.done { color: var(--th-ink); }
.stepper .step.current .bar { background: linear-gradient(90deg, var(--th-brand), color-mix(in srgb, var(--th-brand) 70%, #fff)); }

/* ---------- Misc ---------- */
.empty { text-align: center; padding: 3rem 1rem; color: var(--th-muted); }
.empty i { font-size: 2.4rem; display: block; margin-bottom: .6rem; color: var(--th-line); }
.kv { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: .5rem 1rem; font-size: .88rem; }
.kv dt { color: var(--th-muted); font-weight: 500; }
.kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.route { display: flex; gap: .75rem; }
.route .pins { display: flex; flex-direction: column; align-items: center; padding-top: .3rem; }
.route .pin-a { width: 10px; height: 10px; border-radius: 50%; background: var(--th-success); }
.route .pin-b { width: 10px; height: 10px; border-radius: 3px; background: var(--th-danger); }
.route .line { width: 2px; flex: 1; min-height: 18px; background: repeating-linear-gradient(var(--th-line) 0 4px, transparent 4px 8px); margin: 3px 0; }
.route .addr { font-weight: 600; font-size: .9rem; }
.route .city { font-size: .78rem; color: var(--th-muted); }
.pin-box { font-family: ui-monospace, monospace; font-size: 1.6rem; font-weight: 800; letter-spacing: .35em; background: var(--th-brand-50); color: var(--th-brand-600); border-radius: 12px; padding: .5rem .9rem; display: inline-block; }
.amount { font-weight: 800; letter-spacing: -.02em; }
.map { height: 380px; border-radius: var(--th-radius); overflow: hidden; border: 1px solid var(--th-line); z-index: 0; }
.alert { border-radius: var(--th-radius-sm); border: 0; }
.alert-success { background: var(--th-success-bg); color: var(--th-success); }
.alert-danger { background: var(--th-danger-bg); color: var(--th-danger); }
.alert-warning { background: var(--th-warning-bg); color: var(--th-warning); }
.alert-info { background: var(--th-info-bg); color: var(--th-info); }
.toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; }
.toast-th { background: var(--th-ink); color: var(--th-surface); padding: .75rem 1rem; border-radius: 12px; box-shadow: var(--th-shadow-lg); font-weight: 500; font-size: .88rem; max-width: 360px; animation: th-in .2s ease; }
@keyframes th-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pagination { --bs-pagination-color: var(--th-ink-2); --bs-pagination-bg: var(--th-surface); --bs-pagination-border-color: var(--th-line); --bs-pagination-active-bg: var(--th-ink); --bs-pagination-active-border-color: var(--th-ink); --bs-pagination-hover-bg: var(--th-surface-2); margin: 0; }
.modal-content { border-radius: var(--th-radius); border: 1px solid var(--th-line); background: var(--th-surface); }
.dropdown-menu { border-radius: 12px; border: 1px solid var(--th-line); box-shadow: var(--th-shadow-lg); background: var(--th-surface); padding: .4rem; }
.dropdown-item { border-radius: 8px; padding: .45rem .7rem; font-size: .88rem; }
.list-clean { list-style: none; padding: 0; margin: 0; }
.divider { height: 1px; background: var(--th-line); margin: 1rem 0; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.filter-bar .form-control, .filter-bar .form-select { width: auto; min-width: 150px; padding-top: .45rem; padding-bottom: .45rem; }
.doc-tile { border: 1px dashed var(--th-line); border-radius: 12px; padding: .9rem; display: flex; gap: .75rem; align-items: center; background: var(--th-surface-2); }
.doc-tile i { font-size: 1.5rem; color: var(--th-muted); }
.progress { height: 8px; border-radius: 8px; background: var(--th-neutral-bg); }
.progress-bar { background: var(--th-brand); }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-side { background: radial-gradient(1200px 600px at -10% -10%, #2a3550 0%, var(--th-sidebar) 55%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-side::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--th-brand) 45%, transparent), transparent 65%); }
.auth-side h2 { color: #fff; font-size: 2.2rem; line-height: 1.15; }
.auth-form { display: grid; place-items: center; padding: 2rem; background: var(--th-surface); }
.auth-card { width: 100%; max-width: 400px; }
.otp-input { letter-spacing: .6em; text-align: center; font-size: 1.5rem; font-weight: 800; font-family: ui-monospace, monospace; }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ---------- Public site ---------- */
.site-nav { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--th-surface) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--th-line); }
.site-nav .nav-link { font-weight: 600; color: var(--th-ink-2); }
.site-nav .nav-link:hover { color: var(--th-ink); }
.hero { position: relative; padding: 6rem 0 5rem; overflow: hidden; background: radial-gradient(900px 500px at 85% 0%, var(--th-brand-50), transparent 60%), radial-gradient(700px 400px at 0% 100%, var(--th-info-bg), transparent 60%); }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.hero .lead { font-size: 1.15rem; color: var(--th-ink-2); max-width: 560px; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 999px; padding: .3rem .8rem .3rem .35rem; font-size: .8rem; font-weight: 600; box-shadow: var(--th-shadow); }
.eyebrow .tag { background: var(--th-brand); color: var(--th-brand-ink); border-radius: 999px; padding: .1rem .5rem; font-size: .7rem; font-weight: 800; }
.hero-card { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 20px; box-shadow: var(--th-shadow-lg); padding: 1.25rem; }
.section { padding: 5rem 0; }
.section-alt { background: var(--th-surface); border-top: 1px solid var(--th-line); border-bottom: 1px solid var(--th-line); }
.section-title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
.feature { padding: 1.5rem; height: 100%; }
.feature .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 1rem; }
.step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--th-ink); color: var(--th-surface); display: grid; place-items: center; font-weight: 800; }
.price-card { padding: 2rem; height: 100%; display: flex; flex-direction: column; }
.price-card.featured { border: 2px solid var(--th-brand); position: relative; }
.price-card .price { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.price-card ul li { padding: .35rem 0; display: flex; gap: .5rem; }
.price-card ul li i { color: var(--th-success); }
.accordion { --bs-accordion-bg: var(--th-surface); --bs-accordion-border-color: var(--th-line); --bs-accordion-active-bg: var(--th-surface-2); --bs-accordion-active-color: var(--th-ink); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-border-radius: var(--th-radius); }
.accordion-button { font-weight: 600; }
.cta-band { background: var(--th-sidebar); color: #fff; border-radius: 24px; padding: 3rem; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--th-brand) 50%, transparent), transparent 65%); }
.site-footer { background: var(--th-sidebar); color: var(--th-sidebar-ink); padding: 3.5rem 0 2rem; }
.site-footer a { color: var(--th-sidebar-ink); }
.site-footer a:hover { color: #fff; }
.prose { max-width: 780px; line-height: 1.75; }
.prose h2, .prose h3 { margin-top: 2rem; }

/* =====================================================================
   Chat
   ===================================================================== */
.content:has(.chat-app) { padding: 0; }
.chat-app { --chat-h: calc(100vh - 64px); display: grid; grid-template-columns: 360px 1fr; height: var(--chat-h); height: calc(100dvh - 64px); background: var(--th-surface); }
.chat-list { border-right: 1px solid var(--th-line); display: flex; flex-direction: column; min-height: 0; }
.chat-list-head { padding: 1rem 1rem .5rem; border-bottom: 1px solid var(--th-line); }
.chat-search { position: relative; }
.chat-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--th-muted); }
.chat-search .form-control { padding-left: 2.2rem; background: var(--th-surface-2); }
.chat-filters { display: flex; gap: .35rem; overflow-x: auto; padding: .65rem 0 .25rem; scrollbar-width: none; }
.chat-filters::-webkit-scrollbar { display: none; }
.chat-filters button { border: 1px solid var(--th-line); background: var(--th-surface); color: var(--th-ink-2); border-radius: 999px; padding: .25rem .75rem; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chat-filters button.active { background: var(--th-ink); color: var(--th-surface); border-color: var(--th-ink); }
[data-bs-theme="dark"] .chat-filters button.active { background: var(--th-brand); color: var(--th-brand-ink); border-color: var(--th-brand); }
.chat-items { flex: 1; overflow-y: auto; padding: .35rem; }
.chat-item { width: 100%; text-align: left; display: flex; gap: .75rem; padding: .7rem .7rem; border: 0; background: transparent; border-radius: 12px; color: inherit; align-items: flex-start; }
.chat-item:hover { background: var(--th-surface-2); }
.chat-item.active { background: var(--th-brand-50); }
.chat-item .avatar { width: 44px; height: 44px; font-size: .9rem; }
.avatar-support { background: var(--th-sidebar) !important; color: var(--th-brand) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.chat-item-title { font-weight: 600; font-size: .92rem; }
.chat-item.unread .chat-item-title, .chat-item.unread .chat-item-last { font-weight: 700; color: var(--th-ink); }
.chat-item-time { font-size: .72rem; color: var(--th-muted); white-space: nowrap; }
.chat-item.unread .chat-item-time { color: var(--th-brand-600); font-weight: 700; }
.chat-item-ctx { font-size: .74rem; color: var(--th-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: .1rem 0; }
.chat-item-last { font-size: .83rem; color: var(--th-muted); }
.chat-badge { background: var(--th-brand); color: var(--th-brand-ink); font-size: .68rem; font-weight: 800; min-width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 .35rem; }
.chat-item.skeleton .avatar { background: var(--th-neutral-bg); }
.sk { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--th-neutral-bg), var(--th-surface-2), var(--th-neutral-bg)); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

.chat-thread { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--th-bg) radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--th-ink) 6%, transparent) 1px, transparent 0) 0 0 / 22px 22px; }
.chat-thread.dropping::after { content: "Drop photo or PDF to share"; position: absolute; inset: .75rem; border: 2px dashed var(--th-brand); border-radius: 16px; background: color-mix(in srgb, var(--th-surface) 85%, transparent);
  display: grid; place-items: center; font-weight: 700; color: var(--th-brand-600); z-index: 5; }
.chat-placeholder { margin: auto; text-align: center; max-width: 360px; padding: 2rem; }
.chat-placeholder-icon { width: 76px; height: 76px; border-radius: 24px; background: var(--th-brand-50); color: var(--th-brand-600); display: grid; place-items: center; font-size: 2rem; margin: 0 auto 1rem; }
.chat-head { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; background: var(--th-surface); border-bottom: 1px solid var(--th-line); }
.chat-sub { font-size: .78rem; color: var(--th-muted); }
.chat-body { flex: 1; overflow-y: auto; padding: 1rem clamp(.75rem, 3vw, 2rem); overscroll-behavior: contain; }
.chat-older { text-align: center; padding: .5rem; color: var(--th-muted); }
.chat-day { text-align: center; margin: 1rem 0 .6rem; }
.chat-day span { background: var(--th-surface); border: 1px solid var(--th-line); color: var(--th-muted); font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .2rem .7rem; }
.chat-row { display: flex; flex-direction: column; align-items: flex-start; margin-top: 2px; }
.chat-row.first { margin-top: .6rem; }
.chat-row.mine { align-items: flex-end; }
.chat-sender { font-size: .72rem; font-weight: 700; color: var(--th-brand-600); margin: 0 .5rem .15rem; }
.chat-sender span { color: var(--th-muted); font-weight: 500; }
.chat-bubble { position: relative; max-width: min(560px, 78%); background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 16px; padding: .5rem .75rem .35rem; box-shadow: 0 1px 1px rgba(15, 23, 42, .04); }
.chat-row.mine .chat-bubble { background: #fff3cf; border-color: #f7df9b; }
[data-bs-theme="dark"] .chat-row.mine .chat-bubble { background: #3a2f12; border-color: #574515; }
.chat-row.first.theirs .chat-bubble { border-top-left-radius: 6px; }
.chat-row.first.mine .chat-bubble { border-top-right-radius: 6px; }
.chat-bubble.media { padding: 4px; }
.chat-bubble.media .chat-text { padding: .35rem .5rem 0; }
.chat-bubble.failed { border-color: var(--th-danger); cursor: pointer; }
.chat-text { font-size: .92rem; line-height: 1.45; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; }
.chat-text a { text-decoration: underline; }
.chat-meta { display: block; text-align: right; font-size: .66rem; color: var(--th-muted); margin-top: .1rem; white-space: nowrap; }
.chat-bubble.media .chat-meta { padding: 0 .4rem .2rem; }
.chat-meta .read { color: #0ea5e9; }
.chat-del { position: absolute; top: 4px; right: -34px; border: 0; background: transparent; color: var(--th-muted); opacity: 0; transition: opacity .15s; padding: .2rem .4rem; }
.chat-row.mine .chat-del { right: auto; left: -34px; }
.chat-bubble:hover .chat-del { opacity: 1; }
.chat-del:hover { color: var(--th-danger); }
.chat-photo { display: block; border: 0; padding: 0; width: min(320px, 62vw); aspect-ratio: 1 / var(--r, .75); border-radius: 12px; overflow: hidden; background: var(--th-neutral-bg); position: relative; cursor: zoom-in; }
.chat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-photo.uploading img { filter: blur(2px) brightness(.8); }
.chat-photo.uploading .spinner-border { position: absolute; inset: 0; margin: auto; color: #fff; }
.chat-file { display: flex; align-items: center; gap: .65rem; min-width: 230px; padding: .55rem .6rem; border-radius: 12px; background: var(--th-surface-2); color: var(--th-ink); }
.chat-file > i:first-child { font-size: 1.8rem; color: var(--th-danger); }
.chat-loc { display: block; width: 240px; border-radius: 12px; overflow: hidden; color: var(--th-ink); background: var(--th-surface-2); }
.chat-loc-map { display: grid; place-items: center; height: 110px; font-size: 2rem; color: var(--th-danger);
  background: linear-gradient(135deg, #dbeafe 0%, #e0f2e9 100%); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 18px), linear-gradient(135deg, #dbeafe, #dcfce7); }
[data-bs-theme="dark"] .chat-loc-map { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px), linear-gradient(135deg, #1e3a5f, #14532d); }
.chat-tripcard { display: block; min-width: 230px; padding: .5rem .25rem; color: var(--th-ink); }
.chat-system { text-align: center; margin: .75rem auto; max-width: 420px; font-size: .78rem; color: var(--th-ink-2); background: var(--th-brand-50); border-radius: 10px; padding: .4rem .75rem; }
.chat-deleted { font-style: italic; color: var(--th-muted); font-size: .85rem; }
.chat-hello { text-align: center; color: var(--th-muted); padding: 3rem 1rem; }
.chat-hello i { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--th-brand); }
.chat-typing { display: inline-flex; gap: 4px; background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 14px; padding: .55rem .75rem; margin-top: .5rem; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--th-muted); animation: typing 1s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; } .chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-jump { position: absolute; right: 1.25rem; bottom: 88px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--th-line); background: var(--th-surface); box-shadow: var(--th-shadow-lg); color: var(--th-ink); }
.chat-jump b { position: absolute; top: -6px; right: -6px; background: var(--th-brand); color: var(--th-brand-ink); font-size: .65rem; border-radius: 999px; padding: 0 .35rem; }
.chat-jump b:empty { display: none; }
.chat-composer { padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background: var(--th-surface); border-top: 1px solid var(--th-line); }
.chat-input { resize: none; max-height: 140px; border-radius: 20px; padding: .55rem 1rem; background: var(--th-surface-2); }
.chat-send { border-radius: 50%; width: 42px; height: 42px; flex: none; }
.chat-composer .btn-icon { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.chat-preview { display: flex; align-items: center; gap: .75rem; padding: .5rem; margin-bottom: .5rem; border: 1px solid var(--th-line); border-radius: 12px; background: var(--th-surface-2); }
.chat-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.chat-locked { padding: .9rem; text-align: center; color: var(--th-muted); background: var(--th-surface); border-top: 1px solid var(--th-line); font-size: .88rem; }
.chat-lightbox { position: fixed; inset: 0; z-index: 2100; background: rgba(5, 8, 15, .92); display: grid; place-items: center; padding: 3rem 1rem; cursor: zoom-out; }
.chat-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.chat-lightbox .btn { position: absolute; top: 1rem; color: #fff; background: rgba(255, 255, 255, .12); border-radius: 50%; }
.chat-lightbox-close { right: 1rem; } .chat-lightbox-dl { right: 4rem; }
@media (max-width: 991.98px) {
  .chat-app { grid-template-columns: 1fr; }
  .chat-app .chat-thread { display: none; }
  .chat-app.has-thread .chat-list { display: none; }
  .chat-app.has-thread .chat-thread { display: flex; }
  .chat-bubble { max-width: 86%; }
  .chat-del { opacity: .7; }
}
.min-w-0 { min-width: 0; }

/* ---------- Micro-interactions & perf polish ---------- */
.topbar .badge.chat-dot { font-size: .6rem; }
.side-link .count.count-chat { background: #22c55e; color: #fff; }
.btn:active:not(:disabled) { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* contact preference picker (post trip) */
.contact-opt { display: block; cursor: pointer; margin: 0; position: relative; }
.contact-opt input { position: absolute; opacity: 0; }
.contact-opt span { display: block; border: 1.5px solid var(--th-line); border-radius: 12px; padding: .65rem .8rem; background: var(--th-surface); transition: border-color .15s, background .15s; }
.contact-opt span i { color: var(--th-brand-600); margin-right: .3rem; }
.contact-opt span b { font-size: .9rem; }
.contact-opt span small { display: block; color: var(--th-muted); font-size: .76rem; margin-top: .15rem; }
.contact-opt input:checked + span { border-color: var(--th-brand); background: var(--th-brand-50); }
.contact-opt input:focus-visible + span { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--th-brand) 25%, transparent); }

/* ---------- Chat: WhatsApp-style actions, reactions, replies, emoji ---------- */
.chat-actions { position: absolute; top: 4px; right: calc(100% + 6px); display: none; gap: 2px; background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 999px; padding: 2px 4px; box-shadow: var(--th-shadow); z-index: 2; }
.chat-row.theirs .chat-actions { right: auto; left: calc(100% + 6px); }
.chat-bubble:hover .chat-actions { display: flex; }
.chat-actions button { border: 0; background: transparent; color: var(--th-muted); width: 28px; height: 26px; border-radius: 999px; font-size: .9rem; }
.chat-actions button:hover { background: var(--th-surface-2); color: var(--th-ink); }
@media (hover: none) { .chat-actions { display: none !important; } }
.chat-bubble.has-reacts { margin-bottom: 14px; }
.chat-reacts { position: absolute; bottom: -14px; right: 10px; display: flex; gap: 3px; }
.chat-row.theirs .chat-reacts { right: auto; left: 10px; }
.chat-reacts button { border: 1px solid var(--th-line); background: var(--th-surface); border-radius: 999px; font-size: .78rem; padding: 0 .4rem; line-height: 1.5; box-shadow: var(--th-shadow); }
.chat-reacts button.mine { border-color: var(--th-brand); background: var(--th-brand-50); }
.chat-react-pick { position: absolute; z-index: 2200; display: flex; gap: 2px; background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 999px; padding: 4px 6px; box-shadow: var(--th-shadow-lg); animation: th-in .15s ease; }
.chat-react-pick button { border: 0; background: transparent; font-size: 1.45rem; width: 40px; height: 40px; border-radius: 50%; transition: transform .12s; }
.chat-react-pick button:hover { transform: scale(1.25); background: var(--th-surface-2); }
.chat-quote { display: block; width: 100%; text-align: left; border: 0; border-left: 4px solid var(--th-brand); background: color-mix(in srgb, var(--th-ink) 6%, transparent); border-radius: 8px; padding: .3rem .55rem; margin-bottom: .3rem; color: inherit; font-size: .8rem; }
.chat-quote b { display: block; color: var(--th-brand-600); font-size: .76rem; }
.chat-quote span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--th-muted); }
.chat-row.flash .chat-bubble { animation: flash 1.2s ease; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--th-brand) 55%, transparent); } 100% { box-shadow: none; } }
.chat-replybar { display: flex; align-items: center; gap: .5rem; border-left: 4px solid var(--th-brand); background: var(--th-surface-2); border-radius: 10px; padding: .4rem .6rem; margin-bottom: .5rem; }
.chat-replybar b { color: var(--th-brand-600); font-size: .8rem; }
.chat-emoji { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; max-height: 210px; overflow-y: auto; margin-top: .5rem; padding: .4rem; border: 1px solid var(--th-line); border-radius: 12px; background: var(--th-surface-2); }
.chat-emoji button { border: 0; background: transparent; font-size: 1.35rem; height: 38px; border-radius: 8px; }
.chat-emoji button:hover { background: var(--th-surface); }

/* ---------- App mode (installed PWA / ?app=1): app bar + curved bottom nav ---------- */
body.app-mode .sidebar, body.app-mode .sidebar-backdrop, body.app-mode .topbar { display: none !important; }
body.app-mode .main { margin-left: 0; }
body.app-mode .content { padding: calc(64px + env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom)); }
body.app-mode .page-head h1 { font-size: 1.25rem; }
.appbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1035; height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0;
  display: flex; align-items: center; gap: 4px; background: var(--th-sidebar); color: #fff; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; box-shadow: 0 6px 20px rgba(11, 18, 32, .25); }
.appbar .ab-title { flex: 1; min-width: 0; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .ab-btn { width: 42px; height: 42px; border: 0; background: transparent; color: #fff; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; position: relative; }
.appbar .ab-btn:active { background: rgba(255, 255, 255, .1); }
.appbar .ab-btn .dot { position: absolute; top: 6px; right: 6px; min-width: 17px; height: 17px; border-radius: 999px; background: #ef4444; font-size: .62rem; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.appbar .brand-mark { width: 30px; height: 30px; font-size: .95rem; margin: 0 6px; }
.bottomnav { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 1035; height: 66px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  border-radius: 22px; filter: drop-shadow(0 8px 22px rgba(11, 18, 32, .22));
  background: radial-gradient(circle at 50% -6px, transparent 36px, var(--th-surface) 37px); }
.bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--th-muted); font-size: .68rem; font-weight: 700; padding-top: 6px; position: relative; }
.bottomnav a i { font-size: 1.3rem; line-height: 1; transition: transform .15s; }
.bottomnav a.active { color: var(--th-ink); }
.bottomnav a.active i { color: var(--th-brand-600); transform: translateY(-2px); }
.bottomnav a.active::after { content: ""; position: absolute; bottom: -8px; width: 5px; height: 5px; border-radius: 50%; background: var(--th-brand); }
.bottomnav .fab { justify-self: center; margin-top: -46px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--th-brand) 65%, #fff), var(--th-brand)); color: var(--th-brand-ink); display: grid; place-items: center; font-size: 1.7rem;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--th-brand) 45%, transparent); border: 4px solid var(--th-bg); padding: 0; }
.bottomnav .fab span { display: none; }
.bottomnav .nb { position: absolute; top: 0; left: 55%; min-width: 17px; height: 17px; border-radius: 999px; background: #22c55e; color: #fff; font-size: .6rem; display: grid; place-items: center; padding: 0 4px; }
.appsheet .list-group-item { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-color: var(--th-line); background: var(--th-surface); color: var(--th-ink); font-weight: 600; }
.appsheet .list-group-item i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--th-brand-50); color: var(--th-brand-600); }
.offcanvas-bottom.appsheet { height: auto; max-height: 82vh; border-top-left-radius: 22px; border-top-right-radius: 22px; background: var(--th-bg); }
/* chat thread takes the whole screen in the app (WhatsApp-like) */
body.app-mode .chat-app { height: calc(100dvh - 64px - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: -6px -14px 0; border-radius: 0; }
body.app-mode .content:has(.chat-app) { padding-left: 14px; padding-right: 14px; }
body.app-mode .chat-app.has-thread { position: fixed; inset: 0; height: 100dvh; margin: 0; z-index: 1050; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
body.app-mode .card { border-radius: 18px; }
body.app-mode .table-responsive { -webkit-overflow-scrolling: touch; }
.pwa-install { position: fixed; left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 1040; display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 16px; background: var(--th-sidebar); color: #fff; box-shadow: var(--th-shadow-lg); }
body:not(.app-mode) .pwa-install { bottom: 16px; max-width: 420px; left: auto; }

.brand-logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; border-radius: 8px; }
.appbar .brand-logo { height: 30px; margin: 0 6px; }

/* ---------- App feel: splash, transitions, touch polish ---------- */
#app-splash { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 24px; transition: opacity .35s ease; }
#app-splash img { border-radius: 26px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); animation: sp-pop .6s cubic-bezier(.2, 1.4, .4, 1); }
#app-splash .sp-name { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-top: 18px; }
#app-splash .sp-tag { opacity: .7; font-size: .9rem; margin-top: 4px; max-width: 280px; }
#app-splash .sp-bar { width: 120px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); margin-top: 28px; overflow: hidden; }
#app-splash .sp-bar i { display: block; width: 40%; height: 100%; background: var(--th-brand); border-radius: 4px; animation: sp-load 1s ease-in-out infinite; }
#app-splash.hide { opacity: 0; pointer-events: none; }
@keyframes sp-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
body.app-mode { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
body.app-mode .appbar, body.app-mode .bottomnav, body.app-mode .btn, body.app-mode .chat-item { user-select: none; -webkit-user-select: none; }
body.app-mode .btn:active, body.app-mode .card-hover:active, body.app-mode .list-group-item:active { transform: scale(.98); }
/* Navigation transitions: disabled to prevent left-right screen shifting */
@view-transition { navigation: none; }
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  transform: none !important;
}
#nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--th-brand); z-index: 3100; transition: width .4s ease; box-shadow: 0 0 8px var(--th-brand); }
body.app-mode .page-head { margin-bottom: .9rem; }
body.app-mode .page-head h1 { font-size: 1.15rem; }
body.app-mode .page-head .sub { font-size: .8rem; }
body.app-mode .nav-pills-th { width: 100%; flex-wrap: nowrap; }
.btn-check:checked + .btn-light { background: var(--th-brand-50); border-color: var(--th-brand); color: var(--th-ink); box-shadow: 0 0 0 1px var(--th-brand) inset; }
.btn-check:checked + .btn-light i { color: var(--th-brand-600); }

/* ---------- Quick post (fast duty posting) ---------- */
.qp { max-width: 640px; margin: 0 auto; padding-bottom: 90px; }
.qp-head { margin-bottom: 14px; }
.qp-block { margin-bottom: 16px; }
.qp-label { font-weight: 700; font-size: .85rem; margin-bottom: 8px; display: flex; align-items: center; gap: .4rem; }
.qp-label i { color: var(--th-brand-600); }
.qp-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.qp-scroll::-webkit-scrollbar { display: none; }
.qp-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.qp-chip { margin: 0; flex: none; cursor: pointer; }
.qp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.qp-chip span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 92px; padding: 10px 12px; border: 1.5px solid var(--th-line); border-radius: 14px; background: var(--th-surface); font-weight: 600; font-size: .8rem; white-space: nowrap; transition: all .12s; }
.qp-chip span i { font-size: 1.25rem; color: var(--th-muted); }
.qp-chip.sm span { min-width: 84px; padding: 8px 10px; font-size: .76rem; }
.qp-chip.xs span { flex-direction: row; min-width: 0; padding: 6px 12px; border-radius: 999px; }
.qp-chip input:checked + span { border-color: var(--th-brand); background: var(--th-brand-50); color: var(--th-ink); box-shadow: 0 0 0 1px var(--th-brand) inset; }
.qp-chip input:checked + span i { color: var(--th-brand-600); }
.qp-card { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 18px; box-shadow: var(--th-shadow); }
.qp-route { position: relative; display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; padding: 14px 52px 14px 14px; margin-bottom: 16px; }
.qp-pin { width: 12px; height: 12px; border-radius: 50%; margin-top: 26px; justify-self: center; }
.qp-pin.a { background: var(--th-success); box-shadow: 0 0 0 4px var(--th-success-bg); }
.qp-pin.b { background: var(--th-danger); border-radius: 3px; box-shadow: 0 0 0 4px var(--th-danger-bg); }
.qp-line { grid-column: 1 / -1; height: 1px; background: var(--th-line); margin: 10px 0 10px 30px; }
.qp-field label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--th-muted); }
.qp-field input { display: block; width: 100%; border: 0; background: transparent; padding: 2px 0; font-size: 1.1rem; font-weight: 700; color: var(--th-ink); outline: none; }
.qp-field input.qp-sub { font-size: .82rem; font-weight: 500; color: var(--th-ink-2); }
.qp-field input::placeholder { color: var(--th-muted); font-weight: 500; }
.qp-swap { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--th-line); background: var(--th-surface); color: var(--th-ink-2); }
.qp-pill { flex: none; border: 1.5px solid var(--th-line); background: var(--th-surface); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .82rem; color: var(--th-ink-2); }
.qp-pill.on { background: var(--th-ink); color: var(--th-surface); border-color: var(--th-ink); }
[data-bs-theme="dark"] .qp-pill.on { background: var(--th-brand); color: var(--th-brand-ink); border-color: var(--th-brand); }
.qp-step { display: flex; align-items: center; border: 1px solid var(--th-line); border-radius: var(--th-radius-sm); background: var(--th-surface); overflow: hidden; }
.qp-step button { border: 0; background: var(--th-surface-2); width: 40px; height: 42px; font-size: 1.2rem; font-weight: 700; color: var(--th-ink); }
.qp-step input { border: 0; width: 100%; text-align: center; font-weight: 700; background: transparent; color: var(--th-ink); outline: none; -moz-appearance: textfield; }
.qp-step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qp-inc { border: 1.5px dashed var(--th-line); background: var(--th-surface); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 600; color: var(--th-ink-2); }
.qp-inc em { font-style: normal; font-size: .72rem; margin-left: 2px; }
.qp-inc[data-state="included"] { border-style: solid; border-color: var(--th-success); background: var(--th-success-bg); color: var(--th-success); }
.qp-inc[data-state="excluded"] { border-style: solid; border-color: var(--th-danger); background: var(--th-danger-bg); color: var(--th-danger); }
.qp-inc[data-state="actuals"] { border-style: solid; border-color: var(--th-warning); background: var(--th-warning-bg); color: var(--th-warning); }
.qp-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--th-surface-2); border: 1px solid var(--th-line); border-radius: 14px; padding: 4px; }
.qp-seg label { margin: 0; cursor: pointer; }
.qp-seg input { position: absolute; opacity: 0; }
.qp-seg span { display: block; text-align: center; padding: 9px; border-radius: 10px; font-weight: 700; font-size: .85rem; color: var(--th-muted); }
.qp-seg input:checked + span { background: var(--th-brand-50); color: var(--th-ink); box-shadow: 0 0 0 1px var(--th-brand) inset; }
.qp-more { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 16px; padding: 12px 14px; margin-bottom: 16px; }
.qp-more summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
.qp-more summary::-webkit-details-marker { display: none; }
.qp-more summary::after { content: "\F282"; font-family: bootstrap-icons; margin-left: auto; transition: transform .15s; }
.qp-more[open] summary::after { transform: rotate(180deg); }
.qp-submit { 
  position: sticky; 
  bottom: 12px; 
  z-index: 1020; 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: 12px; 
  padding: 8px 12px 8px 14px; 
  margin: 16px 0 8px;
  background: var(--th-surface, #ffffff); 
  border: 1px solid var(--th-line, #e2e8f0); 
  border-radius: 18px; 
  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.app-mode .qp-submit { 
  bottom: calc(84px + env(safe-area-inset-bottom)); 
  margin-bottom: 0;
  background: color-mix(in srgb, var(--th-surface, #ffffff) 96%, transparent);
}
[data-bs-theme="dark"] .qp-submit {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.5);
}
.qp-summary { 
  flex: 1; 
  min-width: 0; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.qp-sum-route {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--th-ink, #0f172a);
  min-width: 0;
  line-height: 1.25;
}
.qp-sum-from, .qp-sum-to {
  display: inline-block;
  max-width: 95px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.qp-sum-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: .78rem;
}
.qp-sum-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--th-muted, #64748b);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.qp-sum-meta .qp-sum-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.qp-sum-meta .qp-sum-sep {
  color: var(--th-line-2, #cbd5e1);
  font-size: .65rem;
  flex-shrink: 0;
}
.qp-sum-budget-pill {
  background: var(--th-success-bg, rgba(34, 197, 94, 0.12));
  color: var(--th-success, #16a34a);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
[data-bs-theme="dark"] .qp-sum-budget-pill {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
@media (min-width: 480px) {
  .qp-sum-from, .qp-sum-to { max-width: 160px; }
}
@media (min-width: 768px) {
  .qp-sum-from, .qp-sum-to { max-width: 260px; }
}
.qp-submit .btn { 
  flex: none; 
  border-radius: 14px; 
  font-weight: 700;
  font-size: .92rem;
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--th-brand) 35%, transparent);
}
.qp-submit .btn:active {
  transform: scale(0.97);
}

/* ---------- Trip posted hero ---------- */
.posted-hero { background: linear-gradient(135deg, var(--th-sidebar), color-mix(in srgb, var(--th-sidebar) 70%, var(--th-brand))); color: #fff; border-radius: 20px; padding: 18px; position: relative; overflow: hidden; }
.posted-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--th-brand) 55%, transparent), transparent 65%); }
.posted-hero .tick { width: 48px; height: 48px; border-radius: 50%; background: var(--th-success); display: grid; place-items: center; font-size: 1.5rem; animation: sp-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.posted-hero .pulse { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: color-mix(in srgb, var(--th-brand) 75%, #fff); }
.posted-hero .pulse::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--th-brand); animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--th-brand) 70%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.posted-steps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; position: relative; z-index: 1; }
.posted-steps li { display: flex; gap: .6rem; font-size: .82rem; opacity: .9; }
.posted-steps b { width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .15); display: grid; place-items: center; font-size: .7rem; flex: none; }
.fw-800 { font-weight: 800; }
.qp-chip, .qp-seg label { position: relative; }
body.app-mode { overflow-x: hidden; }
.qp-recent { flex: none; text-align: left; border: 1px solid var(--th-line); background: var(--th-surface); border-radius: 14px; padding: 8px 12px; box-shadow: var(--th-shadow); }
.qp-recent b { display: block; font-size: .85rem; white-space: nowrap; }
.qp-recent span { display: block; font-size: .72rem; color: var(--th-muted); white-space: nowrap; }
.qp-recent:active { transform: scale(.97); }

/* ---------- Native-style permission sheet (prominent disclosure before browser prompt) */
.perm-sheet { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; justify-content: center; }
.perm-sheet .ps-back { position: absolute; inset: 0; background: rgba(2, 6, 23, .55); opacity: 0; transition: opacity .25s; }
.perm-sheet .ps-card { position: relative; width: 100%; max-width: 440px; background: var(--th-surface, #fff); border-radius: 26px 26px 0 0; padding: 10px 22px calc(18px + env(safe-area-inset-bottom)); text-align: center; transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -10px 40px rgba(0,0,0,.2); }
.perm-sheet.show .ps-back { opacity: 1; } .perm-sheet.show .ps-card { transform: none; }
.perm-sheet .ps-grab { width: 40px; height: 4px; border-radius: 4px; background: var(--th-line, #e2e8f0); margin: 0 auto 16px; }
.perm-sheet .ps-ico { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 28px; background: var(--th-brand-50); color: var(--th-brand-600); }
.perm-sheet h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 6px; } .perm-sheet p { color: var(--th-muted, #64748b); margin: 0 0 10px; }
.perm-sheet ul { list-style: none; padding: 0; margin: 0 0 12px; text-align: left; }
.perm-sheet li { padding: 8px 0 8px 30px; position: relative; border-bottom: 1px dashed var(--th-line, #e2e8f0); font-size: .92rem; }
.perm-sheet li::before { content: "\F26E"; font-family: bootstrap-icons; position: absolute; left: 4px; color: #16a34a; }
.perm-sheet .ps-note { color: var(--th-muted, #64748b); margin-bottom: 12px; }
@media (min-width: 576px) { .perm-sheet { align-items: center; } .perm-sheet .ps-card { border-radius: 26px; } }

/* ---------- Profile → App & permissions rows */
.perm-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--th-line, #e2e8f0); }
.perm-row > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--th-brand-50); color: var(--th-brand-600); font-size: 18px; flex: none; }
.perm-row b { display: block; } .perm-row span:not(.badge-status) { display: block; font-size: .8rem; color: var(--th-muted, #64748b); }
.perm-row .badge-status { margin-top: 4px; display: inline-block; }

/* ---------- Install page */
.install-page { background: var(--th-bg, #f6f7fb); min-height: 100vh; }
.ip-wrap { max-width: 460px; margin: 0 auto; padding-bottom: 32px; }
.ip-hero { color: #fff; text-align: center; padding: calc(40px + env(safe-area-inset-top)) 24px 64px; border-radius: 0 0 36px 36px; }
.ip-hero h1 { font-size: 1.7rem; font-weight: 800; margin: 14px 0 4px; } .ip-hero p { opacity: .8; margin: 0 0 14px; }
.ip-icon { border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.ip-meta { display: flex; justify-content: center; gap: 14px; font-size: .78rem; opacity: .85; flex-wrap: wrap; }
.ip-meta i { color: var(--th-brand); }
.ip-card { background: var(--th-surface, #fff); margin: -40px 16px 0; padding: 20px; border-radius: 22px; box-shadow: var(--th-shadow-lg, 0 10px 30px rgba(0,0,0,.1)); position: relative; }
.ip-steps { padding-left: 0; list-style: none; counter-reset: s; margin: 0; }
.ip-steps li { counter-increment: s; padding: 8px 0 8px 40px; position: relative; }
.ip-steps li::before { content: counter(s); position: absolute; left: 0; top: 6px; width: 28px; height: 28px; border-radius: 50%; background: var(--th-brand); color: var(--th-brand-ink); font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.ip-ok { width: 56px; height: 56px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: 28px; margin: 0 auto 10px; }
.ip-feats { margin: 16px; display: grid; gap: 10px; }
.ip-feat { display: flex; gap: 12px; align-items: center; background: var(--th-surface, #fff); border-radius: 16px; padding: 12px 14px; }
.ip-feat > i { font-size: 20px; color: var(--th-brand-600); width: 40px; height: 40px; border-radius: 12px; background: var(--th-brand-50); display: grid; place-items: center; flex: none; }
.ip-feat b { display: block; font-size: .92rem; } .ip-feat span { font-size: .8rem; color: var(--th-muted, #64748b); }

/* ---------- Agent UI in a normal mobile browser: same app chrome as the installed PWA below 992px (mirrors body.app-mode rules above) ---------- */
@media (max-width: 991.98px) {
  body.agent-ui .sidebar, body.agent-ui .sidebar-backdrop, body.agent-ui .topbar {display: none !important; }
  body.agent-ui .main {margin-left: 0; }
  body.agent-ui .content {padding: calc(64px + env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom)); }
  body.agent-ui .page-head h1 {font-size: 1.25rem; }
  body.agent-ui .chat-app {height: calc(100dvh - 64px - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: -6px -14px 0; border-radius: 0; }
  body.agent-ui .content:has(.chat-app) {padding-left: 14px; padding-right: 14px; }
  body.agent-ui .chat-app.has-thread {position: fixed; inset: 0; height: 100dvh; margin: 0; z-index: 1050; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  body.agent-ui .card {border-radius: 18px; }
  body.agent-ui .table-responsive {-webkit-overflow-scrolling: touch; }
  body.agent-ui {-webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
  body.agent-ui .appbar, body.agent-ui .bottomnav, body.agent-ui .btn, body.agent-ui .chat-item {user-select: none; -webkit-user-select: none; }
  body.agent-ui .btn:active, body.agent-ui .card-hover:active, body.agent-ui .list-group-item:active {transform: scale(.98); }
  body.agent-ui .page-head {margin-bottom: .9rem; }
  body.agent-ui .page-head h1 {font-size: 1.15rem; }
  body.agent-ui .page-head .sub {font-size: .8rem; }
  body.agent-ui .nav-pills-th {width: 100%; flex-wrap: nowrap; }
  body.agent-ui .qp-submit {bottom: calc(84px + env(safe-area-inset-bottom)); margin-bottom: 0; background: color-mix(in srgb, var(--th-surface, #ffffff) 96%, transparent); }
  body.agent-ui {overflow-x: hidden; }
}
@media (min-width: 992px) {
  body.agent-ui:not(.app-mode) .appbar, body.agent-ui:not(.app-mode) .bottomnav { display: none; }
}

/* =====================================================================
   Mobile-first components (agent app + shared). Cards over tables, chips, sheets.
   ===================================================================== */
/* ---------- Filter chips (horizontally scrollable) */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; margin-bottom: 14px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chips a, .chips button { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--th-line); background: var(--th-surface); color: var(--th-ink-2); font-weight: 600; font-size: .84rem; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.chips a i { font-size: .95rem; }
.chips a.active { background: var(--th-ink); border-color: var(--th-ink); color: var(--th-surface); }
[data-bs-theme="dark"] .chips a.active { background: var(--th-brand); border-color: var(--th-brand); color: var(--th-brand-ink); }
.chips .cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--th-brand); color: var(--th-brand-ink); font-size: .7rem; font-weight: 800; display: inline-grid; place-items: center; }

/* ---------- Trip / booking card */
.tcard-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .tcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .tcard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tcard { position: relative; background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 18px; box-shadow: var(--th-shadow); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: box-shadow .15s, transform .15s; }
.tcard:hover { box-shadow: var(--th-shadow-lg); }
.tcard.is-hot { border-color: color-mix(in srgb, var(--th-brand) 55%, var(--th-line)); }
.tcard.is-muted { opacity: .78; }
.tc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tc-ref { font-size: .72rem; font-weight: 700; color: var(--th-muted); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-top > .badge-status { margin-left: auto; flex: none; }
.tc-route { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 10px; }
.tc-route .pa, .tc-route .pb { width: 10px; height: 10px; margin-top: 6px; justify-self: center; border-radius: 50%; background: var(--th-success); box-shadow: 0 0 0 3px var(--th-success-bg); }
.tc-route .pb { border-radius: 3px; background: var(--th-danger); box-shadow: 0 0 0 3px var(--th-danger-bg); }
.tc-route .ln { width: 2px; min-height: 12px; justify-self: center; background: repeating-linear-gradient(var(--th-line) 0 3px, transparent 3px 6px); margin: 3px 0; }
.tc-route .gap { min-height: 12px; }
.tc-city { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; color: var(--th-ink); }
.tc-addr { font-size: .78rem; color: var(--th-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; color: var(--th-ink-2); background: var(--th-surface-2); border: 1px solid var(--th-line); border-radius: 8px; padding: 3px 8px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-meta i { color: var(--th-muted); }
.tc-foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--th-line); margin-top: auto; flex-wrap: wrap; }
.tc-fare { min-width: 0; }
.tc-fare small { display: block; font-size: .68rem; font-weight: 700; color: var(--th-muted); text-transform: uppercase; letter-spacing: .05em; }
.tc-fare b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.tc-offers { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--th-muted); padding: 4px 10px; border-radius: 999px; background: var(--th-neutral-bg); }
.tc-offers.on { color: var(--th-brand-ink); background: var(--th-brand); }
.tc-actions { display: flex; gap: 8px; width: 100%; }
.tc-actions > form { flex: 1 1 0; display: flex; min-width: 0; }
.tc-actions > form .btn { width: 100%; }
.tc-actions .btn { flex: 1 1 0; min-height: 42px; padding-left: .6rem; padding-right: .6rem; font-size: .86rem; white-space: nowrap; }
.tc-party { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--th-muted); min-width: 0; }
.tc-party b { color: var(--th-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .stretched-link::after { border-radius: 18px; }
.tcard .tc-actions, .tcard .tc-actions * { position: relative; z-index: 2; }
.date-tile { flex: none; align-self: flex-start; width: 50px; text-align: center; border-radius: 12px; background: var(--th-brand-50); color: var(--th-brand-600); padding: 5px 0; line-height: 1.1; }
.date-tile .m { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.date-tile .d { font-size: 1.25rem; font-weight: 800; }
.date-tile .t { font-size: .6rem; font-weight: 700; color: var(--th-ink-2); }

/* ---------- Offer rows (received offers on a trip) */
.offer-row { padding: 14px 16px; border-bottom: 1px solid var(--th-line); }
.offer-row:last-child { border-bottom: 0; }
.offer-row.is-best { background: color-mix(in srgb, var(--th-success-bg) 60%, transparent); }
.offer-row .or-head { display: flex; gap: 10px; align-items: center; min-width: 0; }
.offer-row .or-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-row .or-amt { margin-left: auto; text-align: right; flex: none; }
.offer-row .or-amt b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.offer-row .or-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.offer-row .or-actions .btn { min-height: 44px; }
.best-tag { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--th-success); }

/* ---------- Generic list rows (transactions, payments, withdrawals) */
.lrows { list-style: none; margin: 0; padding: 0; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--th-line); min-width: 0; }
.lrow:last-child { border-bottom: 0; }
.lrow .lr-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 1.05rem; }
.lrow .lr-main { flex: 1; min-width: 0; }
.lrow .lr-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .lr-sub { font-size: .75rem; color: var(--th-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .lr-end { text-align: right; flex: none; max-width: 48%; }
.lrow .lr-amt { font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.lrow .lr-end .small { white-space: nowrap; }
.lrow-head { padding: 10px 16px 6px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--th-muted); background: var(--th-surface-2); border-bottom: 1px solid var(--th-line); }

/* ---------- Dashboard */
.hello { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-width: 0; }
.hello h1 { font-size: 1.3rem; margin: 0; overflow-wrap: anywhere; }
.qa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.qa { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 16px; background: var(--th-surface); border: 1px solid var(--th-line); box-shadow: var(--th-shadow); color: var(--th-ink); font-size: .74rem; font-weight: 700; text-align: center; line-height: 1.15; }
.qa i { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; }
.qa.locked { opacity: .55; }
.qa { position: relative; }
/* equal cards on the agent home grid: same height per row (xl: every card the same), long lists scroll inside */
.dash-grid > [class*="col-"] > .card { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.dash-grid .dash-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dash-grid .card > .card-body.vstack { flex: 1 1 auto; }
@media (min-width: 768px) { .dash-grid .dash-scroll { max-height: 360px; } }
@media (min-width: 1200px) { .dash-grid > [class*="col-md-6"] > .card { height: 460px; } .dash-grid .dash-scroll { max-height: none; } }
.qa .qa-badge { position: absolute; top: 6px; right: calc(50% - 30px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--th-danger, #dc3545); color: #fff; font-size: .62rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--th-surface); }
@media (min-width: 992px) { body:not(.app-mode) .qa-grid { display: none; } }
.stat-tile { display: block; height: 100%; padding: 14px; border-radius: 18px; background: var(--th-surface); border: 1px solid var(--th-line); box-shadow: var(--th-shadow); color: var(--th-ink); min-width: 0; }
.stat-tile .stat-icon { width: 38px; height: 38px; font-size: 1.05rem; margin-bottom: 10px; }
.stat-tile .stat-value { font-size: 1.3rem; overflow-wrap: anywhere; }
.stat-tile .stat-label { margin-bottom: 2px; }
.stat-tile .small { font-size: .74rem; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; font-size: .95rem; margin: 4px 2px 10px; }
.section-title a { font-size: .8rem; font-weight: 700; }

/* ---------- Wallet hero */
.wallet-hero { background: linear-gradient(135deg, var(--th-sidebar), color-mix(in srgb, var(--th-sidebar) 72%, var(--th-brand))); color: #fff; border: 0; border-radius: 22px; padding: 20px; position: relative; overflow: hidden; }
.wallet-hero::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--th-brand) 40%, transparent), transparent 70%); pointer-events: none; }
.wallet-hero .wh-label { font-size: .8rem; color: #c3cad8; }
.wallet-hero .wh-amt { font-size: clamp(1.8rem, 9vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.wallet-hero .wh-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; position: relative; z-index: 1; }
.wallet-hero .wh-actions .btn { min-height: 46px; }

/* ---------- Extended FAB (page primary action, sits above bottom nav) */
.fab-ext { display: none; }
@media (max-width: 991.98px) {
  body.agent-ui .fab-ext { display: inline-flex; position: fixed; z-index: 1030; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); min-height: 50px; padding: 0 20px; border-radius: 999px; font-weight: 800; box-shadow: 0 10px 26px color-mix(in srgb, var(--th-brand) 45%, transparent), 0 2px 6px rgba(0, 0, 0, .12); }
  body.agent-ui .content:has(.fab-ext) { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  body.agent-ui .page-head .hide-m { display: none !important; }
}
body:not(.agent-ui) .fab-ext { display: none !important; }

/* ---------- Empty states */
.empty { padding: 2.5rem 1.25rem; }
.empty > i { width: 76px; height: 76px; margin: 0 auto .9rem; border-radius: 24px; display: grid; place-items: center; font-size: 2rem; background: var(--th-brand-50); color: var(--th-brand-600); }
.empty .btn i { font-size: inherit; display: inline; margin: 0; color: inherit; width: auto; height: auto; background: none; }
.empty .fw-600 { font-size: 1.02rem; font-weight: 700 !important; }
.empty .small { max-width: 320px; margin-left: auto; margin-right: auto; }
.empty .btn { min-height: 46px; padding-left: 1.4rem; padding-right: 1.4rem; }

/* ---------- Skeleton (shown while navigating) */
.skel { display: none; }
@keyframes skel { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.skel-b { border-radius: 12px; background: linear-gradient(90deg, var(--th-neutral-bg) 0, color-mix(in srgb, var(--th-neutral-bg) 50%, var(--th-surface)) 60px, var(--th-neutral-bg) 120px) no-repeat var(--th-neutral-bg); background-size: 200px 100%; animation: skel 1.1s linear infinite; }
body.is-leaving .content > :not(.skel) { display: none !important; }
body.is-leaving .skel { display: grid; gap: 12px; }

/* ---------- Toasts above the bottom nav; modals become bottom sheets on phones */
@media (max-width: 991.98px) {
  body.agent-ui .toast-wrap { left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); align-items: center; }
  body.agent-ui .toast-th { width: 100%; max-width: 420px; }
  body.agent-ui:not(.app-mode) .pwa-install { bottom: calc(88px + env(safe-area-inset-bottom)); left: 12px; max-width: none; }
}
@media (max-width: 575.98px) {
  .modal.fade .modal-dialog, .modal .modal-dialog { margin: 0; position: fixed; left: 0; right: 0; bottom: 0; max-width: none; width: 100%; min-height: 0; align-items: flex-end; transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1) !important; }
  .modal.fade.show .modal-dialog { transform: none; }
  .modal .modal-content { border-radius: 24px 24px 0 0; border: 0; max-height: 92dvh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
  .modal .modal-content::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--th-line); margin: 10px auto 0; }
  .modal .modal-footer .btn { flex: 1; min-height: 48px; }
}
.sheet-grab { width: 40px; height: 4px; border-radius: 4px; background: var(--th-line); margin: 10px auto 0; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sheet-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 16px; background: var(--th-surface); border: 1px solid var(--th-line); color: var(--th-ink); font-weight: 700; font-size: .78rem; text-align: center; }
.sheet-tile > i:first-child { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: var(--th-brand-50); color: var(--th-brand-600); }
.sheet-tile.active { border-color: var(--th-brand); }
.sheet-tile.locked { opacity: .55; }
.sheet-tile .lk { position: absolute; top: 8px; right: 10px; font-size: .7rem; color: var(--th-muted); }
.appsheet .list-group-item .chev { background: none !important; width: auto !important; height: auto !important; color: var(--th-muted) !important; font-size: .85rem; }
.appbar .ab-btn .dot-chat { background: #22c55e; color: #fff; }

/* ---------- Mobile polish: touch targets, inputs, headers, filters, pagination */
@media (max-width: 991.98px) {
  body.agent-ui .page-head { flex-wrap: wrap; align-items: center; gap: .6rem; }
  body.agent-ui .page-head > div:first-child { flex: 1 1 100%; min-width: 0; }
  body.agent-ui .page-head h1 { overflow-wrap: anywhere; }
  body.agent-ui .page-head > .btn, body.agent-ui .page-head > form .btn { min-height: 42px; }
  body.agent-ui .btn { min-height: 40px; }
  body.agent-ui .btn-sm { min-height: 36px; }
  body.agent-ui .btn-icon { min-height: 0; }
  body.agent-ui .form-control, body.agent-ui .form-select { min-height: 46px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
  body.agent-ui .form-control-sm, body.agent-ui .input-group-sm .form-control { min-height: 40px; }
  body.agent-ui textarea.form-control { min-height: 0; }
  body.agent-ui .card-header { padding: .85rem 1rem; }
  body.agent-ui .card-body { padding: 1rem; }
  body.agent-ui .kv { grid-template-columns: minmax(96px, 36%) 1fr; font-size: .86rem; }
  body.agent-ui .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.agent-ui .filter-bar > * { width: 100% !important; max-width: none !important; min-width: 0 !important; }
  body.agent-ui .filter-bar > .input-group, body.agent-ui .filter-bar > .btn-dark { grid-column: 1 / -1; }
  body.agent-ui .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
  body.agent-ui nav[role="navigation"] .small.text-muted, body.agent-ui nav .d-sm-flex > div:first-child { text-align: center; }
  body.agent-ui .nav-pills-th { overflow-x: auto; scrollbar-width: none; border-radius: 999px; }
  body.agent-ui .nav-pills-th::-webkit-scrollbar { display: none; }
  body.agent-ui .nav-pills-th a { border-radius: 999px; padding: .5rem .95rem; }
  body.agent-ui .stepper .step { min-width: 70px; }
  body.agent-ui .map { height: 300px; }
  body.agent-ui .modal-dialog .modal-body { padding: 1rem 1.1rem; }
}
@media (max-width: 359.98px) {
  .qa-grid { gap: 6px; } .qa { font-size: .68rem; } .qa i { width: 36px; height: 36px; }
  .tc-actions .btn { font-size: .8rem; }
  .bottomnav a { font-size: .62rem; }
}

/* ---------- Tables → stacked cards on phones (admin + any .table-stack). Labels come from <thead> via app.js */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: 10px 14px; border-bottom: 1px solid var(--th-line); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack > tbody > tr > td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; text-align: right !important; overflow-wrap: anywhere; }
  .table-stack > tbody > tr > td::before { content: attr(data-label); flex: none; max-width: 42%; text-align: left; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--th-muted); padding-top: 2px; }
  .table-stack > tbody > tr > td:not([data-label])::before, .table-stack > tbody > tr > td[data-label=""]::before { display: none; }
  .table-stack > tbody > tr > td:not([data-label]), .table-stack > tbody > tr > td[data-label=""] { justify-content: flex-end; }
  .table-stack > tbody > tr > td:first-child { text-align: left !important; justify-content: flex-start; font-size: .95rem; }
  .table-stack > tbody > tr > td:first-child::before { display: none; }
  .table-stack > tbody > tr > td[colspan] { display: block; text-align: center !important; }
  .table-stack > tbody > tr > td[colspan]::before { display: none; }
  .table-stack td > .text-truncate, .table-stack td .text-nowrap { white-space: normal !important; }
  .table-card .table-responsive:has(.table-stack) { overflow: visible; }
}
@media (max-width: 767.98px) {
  body.admin-ui .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.admin-ui .filter-bar > * { width: 100% !important; max-width: none !important; min-width: 0 !important; }
  body.admin-ui .filter-bar > .input-group { grid-column: 1 / -1; }
}

/* ---------- Breadcrumbs + page header (agent) */
.crumbs ol { list-style: none; margin: 0 0 10px; padding: 0; display: flex; align-items: center; gap: 4px; min-width: 0; font-size: .76rem; font-weight: 600; color: var(--th-muted); }
.crumbs li { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.crumbs li + li::before { content: "\F285"; font-family: bootstrap-icons; font-size: .62rem; opacity: .6; }
.crumbs a { color: var(--th-muted); display: inline-flex; align-items: center; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; }
.crumbs a:hover { color: var(--th-ink); background: var(--th-neutral-bg); }
.crumbs li:first-child a { font-size: .85rem; }
.crumbs li[aria-current] { color: var(--th-ink-2); flex: 1 1 auto; }
.crumbs li[aria-current] span { overflow: hidden; text-overflow: ellipsis; }
.page-head h1 { font-weight: 800; letter-spacing: -.02em; }
/* app-bar buttons: no sticky focus ring after taps, clear ring for keyboard users */
.appbar .ab-btn:focus { outline: none; box-shadow: none; }
.appbar .ab-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--th-brand) 80%, #fff); outline-offset: 1px; }

/* ---------- Marketplace search + filters */
.mk-filter { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 18px; box-shadow: var(--th-shadow); padding: 10px; }
.mk-search { display: flex; gap: 8px; align-items: center; }
.mk-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 13px; background: var(--th-surface-2); border: 1px solid var(--th-line); transition: border-color .15s, box-shadow .15s; }
.mk-input:focus-within { border-color: var(--th-brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--th-brand) 18%, transparent); background: var(--th-surface); }
.mk-input i { color: var(--th-muted); }
.mk-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--th-ink); font-size: 16px; font-weight: 500; }
.mk-input input::placeholder { color: var(--th-muted); }
.mk-toggle { position: relative; flex: none; width: 46px; height: 46px; border-radius: 13px; border: 1px solid var(--th-line); background: var(--th-surface); color: var(--th-ink-2); font-size: 1.15rem; display: grid; place-items: center; }
.mk-toggle.on, .mk-toggle[aria-expanded="true"] { border-color: var(--th-brand); color: var(--th-brand-600); background: var(--th-brand-50); }
.mk-toggle .cnt { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--th-brand); color: var(--th-brand-ink); font-size: .66rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--th-surface); }
.mk-go { flex: none; height: 46px; min-width: 46px; border-radius: 13px; padding: 0 14px; font-size: 1.05rem; }
.mk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; }
.mk-grid label { margin: 0; min-width: 0; }
.mk-grid label > span { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--th-muted); margin: 0 0 4px 2px; }
.mk-grid .form-control, .mk-grid .form-select { height: 44px; min-height: 44px; border-radius: 12px; font-size: .9rem; padding-top: 0; padding-bottom: 0; }
.mk-clear { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .8rem; font-weight: 700; color: var(--th-danger); }
.mk-filter .chips { margin: 10px -10px -2px; padding: 0 10px 2px; }
.chips-sm a { min-height: 32px; padding: 0 12px; font-size: .78rem; }
.chips-sm a i { font-size: .8rem; color: var(--th-brand-600); }
.chips-sm a.active i { color: inherit; }
@media (min-width: 768px) {
  .mk-toggle { display: none; }
  .mk-more.collapse:not(.show) { display: block; }
  .mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   Mobile = app, not website (agent-ui < 992px). The app bar is the only screen title:
   no breadcrumbs, no repeated headings/descriptions. Pages opt in with .keep-head when
   their header carries unique content (route + status, profile). Desktop is untouched.
   ===================================================================== */
.qp-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.qp-types .qp-chip span { min-width: 0; white-space: normal; text-align: center; line-height: 1.15; height: 100%; justify-content: center; }
@media (max-width: 991.98px) {
  body.agent-ui .appbar { height: calc(56px + env(safe-area-inset-top)); border-radius: 0 0 16px 16px; }
  body.agent-ui .content { padding: calc(68px + env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)); }
  body.agent-ui .crumbs, body.agent-ui .qp-head { display: none; }

  /* in-page title block hidden; a header with nothing else left disappears entirely */
  body.agent-ui .page-head:not(.keep-head) > :first-child { display: none; }
  body.agent-ui .page-head:not(.keep-head):not(:has(> :nth-child(2):not(.hide-m))) { display: none; }
  body.agent-ui .page-head:not(.keep-head) { margin-bottom: 12px; }
  body.agent-ui .page-head.keep-head { margin-bottom: 12px; gap: 10px; }
  body.agent-ui .page-head.keep-head h1 { font-size: 1.12rem; line-height: 1.3; gap: 6px !important; }
  body.agent-ui .page-head.keep-head .sub { font-size: .76rem; margin-top: 4px; }
  /* header actions: one compact row of equal buttons instead of stacked full-width bars */
  body.agent-ui .page-head > .d-flex { width: 100%; flex-wrap: nowrap !important; gap: 8px; }
  body.agent-ui .page-head > .d-flex > .btn, body.agent-ui .page-head > .d-flex > form, body.agent-ui .page-head > .d-flex > .dropdown, body.agent-ui .page-head > .d-flex > a { flex: 1 1 0; min-width: 0; display: flex; }
  body.agent-ui .page-head > .d-flex .btn { width: 100%; min-height: 42px; padding: 0 .6rem; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.agent-ui .page-head > form, body.agent-ui .page-head > .btn:not(.hide-m) { width: 100%; }
  body.agent-ui .page-head > form .btn { width: 100%; }
  body.agent-ui .hello { gap: 10px; }
  body.agent-ui .hello .avatar-lg { width: 46px; height: 46px; font-size: 1rem; }

  /* compact rhythm */
  body.agent-ui .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  body.agent-ui .vstack.gap-3 { gap: .75rem !important; }
  body.agent-ui .mb-3 { margin-bottom: .75rem !important; }
  body.agent-ui .card, body.agent-ui .tcard, body.agent-ui .stat-tile, body.agent-ui .qa, body.agent-ui .mk-filter { border-radius: 16px; }
  body.agent-ui .card-header { padding: .75rem .9rem; font-size: .92rem; }
  body.agent-ui .card-body { padding: .9rem; }
  body.agent-ui .tcard { padding: 12px; gap: 10px; }
  body.agent-ui .tcard-grid { gap: 10px; }
  body.agent-ui .chips { margin-bottom: 10px; }
  body.agent-ui .empty { padding: 1.75rem 1rem; }
  body.agent-ui .empty > i { width: 60px; height: 60px; font-size: 1.6rem; border-radius: 18px; }
  body.agent-ui .lrow { padding: 10px 12px; }

  /* ---------- Focus screens (creation flows, e.g. Post trip): no bottom nav, fixed action bar */
  body.agent-ui.focus-screen .bottomnav, body.agent-ui.focus-screen .fab-ext { display: none !important; }
  body.agent-ui.focus-screen .content { padding-bottom: 16px; }
  body.agent-ui.focus-screen .qp { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.agent-ui.focus-screen .qp-submit { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; margin: 0; border-radius: 18px 18px 0 0; border-width: 1px 0 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 14px; background: var(--th-surface); box-shadow: 0 -8px 24px rgba(15, 23, 42, .10); backdrop-filter: none; }
  [data-bs-theme="dark"] body.agent-ui.focus-screen .qp-submit { background: var(--th-surface); box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); }
  body.agent-ui.focus-screen .qp-submit .btn { min-height: 46px; padding: 0 16px; }

  /* ---------- Post trip: compact form */
  body.agent-ui .qp-block { margin-bottom: 12px; }
  body.agent-ui .qp-label { font-size: .8rem; margin-bottom: 6px; }
  body.agent-ui .qp-types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.agent-ui .qp-types .qp-chip span { padding: 8px 4px; gap: 3px; font-size: .74rem; border-radius: 12px; }
  body.agent-ui .qp-types .qp-chip span i { font-size: 1.05rem; }
  body.agent-ui .qp-route { padding: 10px 48px 10px 12px; margin-bottom: 12px; border-radius: 16px; }
  body.agent-ui .qp-pin { margin-top: 22px; }
  body.agent-ui .qp-line { margin: 6px 0 6px 30px; }
  body.agent-ui .qp-field input { font-size: 1rem; }
  body.agent-ui .qp-field input.qp-sub { font-size: 16px; } /* no iOS zoom on focus */
  body.agent-ui .qp-pill { padding: 6px 12px; font-size: .8rem; min-height: 36px; }
  body.agent-ui .qp-chip.sm span { min-width: 76px; padding: 7px 8px; font-size: .74rem; border-radius: 12px; }
  body.agent-ui .qp-recent { padding: 7px 10px; border-radius: 12px; box-shadow: none; }
  body.agent-ui .qp-more { padding: 10px 12px; border-radius: 14px; margin-bottom: 12px; }
  body.agent-ui .qp-seg span { padding: 8px; font-size: .82rem; }
}

/* ---------- Mobile density: shorter controls, greeting card, compact search (agent-ui < 992px) */
@media (max-width: 991.98px) {
  body.agent-ui .btn { min-height: 38px; padding: .4rem .9rem; font-size: .88rem; }
  body.agent-ui .btn-sm { min-height: 32px; padding: .25rem .65rem; font-size: .8rem; }
  body.agent-ui .btn-lg { min-height: 42px; padding: .5rem 1.1rem; font-size: .95rem; border-radius: 12px; }
  body.agent-ui .btn-icon { min-height: 0; padding: 0; }
  body.agent-ui .empty .btn { min-height: 40px; padding: .45rem 1.1rem; }
  body.agent-ui .tc-actions .btn, body.agent-ui .offer-row .or-actions .btn { min-height: 38px; }
  body.agent-ui .wallet-hero .wh-actions .btn, body.agent-ui .page-head > .d-flex .btn { min-height: 40px; }
  body.agent-ui .modal .modal-footer .btn { min-height: 42px; }
  body.agent-ui.focus-screen .qp-submit .btn { min-height: 42px; padding: 0 14px; font-size: .9rem; }
  body.agent-ui .form-control, body.agent-ui .form-select { min-height: 42px; padding-top: .45rem; padding-bottom: .45rem; }
  body.agent-ui .input-group-text { padding-top: .4rem; padding-bottom: .4rem; }
  body.agent-ui .form-label { margin-bottom: .25rem; }
  body.agent-ui .modal-body.vstack.gap-3, body.agent-ui .modal-body .vstack.gap-3 { gap: .75rem !important; }
  body.agent-ui .modal .row.g-3 { --bs-gutter-y: .7rem; }
  body.agent-ui .chips a { min-height: 34px; padding: 0 12px; font-size: .8rem; }

  /* greeting → card */
  body.agent-ui .page-head > .hello { padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, var(--th-surface) 55%, var(--th-brand-50)); border: 1px solid var(--th-line); box-shadow: var(--th-shadow); }
  body.agent-ui .hello h1 { font-size: 1.05rem; }
  body.agent-ui .hello .sub { font-size: .76rem; margin-top: 2px; }
  body.agent-ui .hello .avatar-lg { width: 44px; height: 44px; }

  /* marketplace search row */
  body.agent-ui .mk-filter { padding: 8px; border-radius: 16px; }
  body.agent-ui .mk-search { gap: 6px; }
  body.agent-ui .mk-input { height: 40px; padding: 0 12px; border-radius: 11px; }
  body.agent-ui .mk-toggle, body.agent-ui .mk-go { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 11px; font-size: 1rem; }
  body.agent-ui .mk-grid { gap: 8px; padding-top: 10px; }
  body.agent-ui .mk-grid .form-control, body.agent-ui .mk-grid .form-select { height: 40px; min-height: 40px; }
  body.agent-ui .mk-filter .chips { margin: 8px -8px 0; padding: 0 8px; }
  body.agent-ui .chips-sm a { min-height: 30px; padding: 0 11px; font-size: .76rem; }
}
.is-unread { background: color-mix(in srgb, var(--th-brand-50) 55%, var(--th-surface)); }
/* placeholders stay readable on uppercase / monospace fields (licence, IFSC, GSTIN…) */
.form-control::placeholder { text-transform: none; font-family: var(--th-font); letter-spacing: normal; color: var(--th-muted); opacity: .8; }

/* ---------- Type scale: professional, denser (web + app). Everything is rem-based, so the root sets the scale. */
html { font-size: 15px; }
body { font-size: .9333rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* 14px body copy */
.page-head h1 { font-size: 1.3rem; }
.page-head .sub { font-size: .84rem; }
.topbar .fw-700 { font-size: .95rem; }
.card-header { font-size: .95rem; }
.stat-value { font-size: 1.3rem; }
.amount.fs-2 { font-size: 1.55rem !important; }
.amount.fs-3 { font-size: 1.35rem !important; }
.amount.fs-4 { font-size: 1.15rem !important; }
.amount.fs-5 { font-size: 1.05rem !important; }
.btn-lg { font-size: .95rem; }
.input-group-lg > .form-control, .input-group-lg > .input-group-text { font-size: 1rem; padding-top: .55rem; padding-bottom: .55rem; }
.side-link { font-size: .92rem; }
.sidebar .brand { font-size: 1.1rem; }
.kv { font-size: .9rem; }
.badge-status { font-size: .68rem; }
.modal-title { font-size: 1.1rem; }
@media (max-width: 991.98px) {
  body.agent-ui .appbar .ab-title { font-size: 1rem; font-weight: 700; }
  body.agent-ui .page-head.keep-head h1 { font-size: 1.05rem; }
  body.agent-ui .tc-city { font-size: .98rem; }
  body.agent-ui .tc-fare b { font-size: 1.05rem; }
  body.agent-ui .stat-tile .stat-value { font-size: 1.15rem; }
  body.agent-ui .wallet-hero .wh-amt { font-size: clamp(1.6rem, 8vw, 2rem); }
  body.agent-ui .bottomnav a { font-size: .66rem; }
}

/* ---------- Commission note (shown before accepting) */
.cm-note { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--th-info-bg); color: var(--th-ink-2); font-size: .8rem; line-height: 1.4; }
.cm-note > i { color: var(--th-info); font-size: 1rem; flex: none; }
.cm-note b { color: var(--th-ink); }
.cm-note.is-short { background: var(--th-warning-bg); }
.cm-note.is-short > i { color: var(--th-warning); }
.cm-note .btn { min-height: 32px !important; }
.alert + .cm-note, .cm-note + .alert { margin-top: 10px; }
#offer .cm-note { margin: 0 0 12px; }

/* ---------- Dashboard header card (web + app) */
.dash-head { align-items: center; padding: 16px 20px; border-radius: 18px; background: linear-gradient(120deg, var(--th-surface) 50%, var(--th-brand-50)); border: 1px solid var(--th-line); box-shadow: var(--th-shadow); }
.dash-head .hello { margin: 0; }
.dash-head .hello h1 { font-size: 1.2rem; }
.dash-head .avatar-lg { width: 52px; height: 52px; background: var(--th-brand); color: var(--th-brand-ink); }
@media (max-width: 991.98px) {
  body.agent-ui .page-head.dash-head { padding: 12px 14px; border-radius: 16px; }
  body.agent-ui .page-head.dash-head > .hello { padding: 0; background: none; border: 0; box-shadow: none; }
  body.agent-ui .dash-head .avatar-lg { width: 44px; height: 44px; }
}

/* ---------- Ride PIN share actions */
.pin-share { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--th-line); }
.pin-share .btn { white-space: nowrap; }
@media (max-width: 575.98px) { .pin-share { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pin-share .btn { padding-left: .4rem; padding-right: .4rem; } .pin-share .btn:first-child { grid-column: 1 / -1; } }

/* ---------- Chat: root-cause layout fixes + app-style list on phones */
.chat-search-row { display: flex; gap: 8px; align-items: center; }
.chat-search-row .chat-search { flex: 1; min-width: 0; }
.chat-support-m { display: none; }
.chat-list, .chat-thread { min-width: 0; }          /* grid items may shrink below their content (filter row) */
@media (max-width: 991.98px) {
  .chat-app { grid-template-columns: minmax(0, 1fr); } /* 1fr = minmax(auto,1fr) let the filter row widen the page */
  .chat-support-m { display: block; }
  .chat-title-row { display: none !important; }
  .chat-support-m .btn { width: 42px; height: 42px; border-radius: 12px; font-size: 1.1rem; }
  .chat-list-head { padding: .75rem .75rem .25rem; }
  .chat-filters { gap: 6px; padding: .6rem 0 .35rem; }
  .chat-filters button { padding: .3rem .8rem; font-size: .76rem; }
  .chat-items { padding: 0; }
  .chat-item { border-radius: 0; padding: .75rem; border-bottom: 1px solid var(--th-line); gap: .7rem; }
  .chat-item .avatar { width: 46px; height: 46px; }
  .chat-item-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* edge-to-edge between app bar and bottom nav (page padding is 12px; the chat must not overhang it) */
  body.agent-ui .content:has(.chat-app), body.app-mode .content:has(.chat-app) { padding: calc(56px + env(safe-area-inset-top)) 0 calc(82px + env(safe-area-inset-bottom)); }
  body.agent-ui .chat-app, body.app-mode .chat-app { margin: 0; border-radius: 0; height: calc(100dvh - 56px - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}