/* =========================================================
   Velo Global Express - one look for every signed-in page.
   Same deep-teal background as the Home page, compact "mobile app" sizing on phones.
   Only affects pages where a user is logged in (body.vx-app). Login / sign-up / public pages are untouched.
   ========================================================= */

body.vx-app {
  --bg: #071d24;
  --card: #0c2c35;
  --border: #18424d;
  --text: #f4f9fb;
  --text-muted: #9fb8c0;
  --text-faint: #7f9aa3;
  --primary-light: rgba(238, 28, 37, .16);
  --primary-dark: #ff6a70;
  --success: #4fd987;  --success-bg: rgba(47, 191, 99, .15);
  --warning: #f3a33a;  --warning-bg: rgba(243, 163, 58, .14);
  --danger: #ff7076;   --danger-bg: rgba(238, 28, 37, .16);
  --info: #8fb0ff;     --info-bg: rgba(110, 150, 255, .16);
  --shadow: 0 2px 10px rgba(0, 0, 0, .25);
  --cx-soft: rgba(255, 255, 255, .04);
  color-scheme: dark;
  background: radial-gradient(120% 60% at 50% 0%, #0d3540 0%, #071d24 55%, #05151a 100%) fixed;
  background-color: #071d24;
  color: var(--text);
}

/* ---------- top bar of inner pages (phone) ---------- */
body.vx-app .topbar { background: rgba(10, 42, 51, .92); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); }
body.vx-app .brand { color: #fff; }
body.vx-app .icon-btn { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .1); color: #fff; }
body.vx-app .topbar .menu-btn { color: #fff; }
body.vx-app .menu-panel { background: #0a2a33; border-top: 1px solid var(--border); }
body.vx-app .menu-backdrop { background: rgba(0, 0, 0, .55); }
body.vx-app .menu-item, body.vx-app .menu-group summary { color: #fff; }

/* ---------- forms ---------- */
body.vx-app input[type=text], body.vx-app input[type=email], body.vx-app input[type=password], body.vx-app input[type=tel],
body.vx-app input[type=date], body.vx-app input[type=time], body.vx-app input[type=number], body.vx-app input[type=search],
body.vx-app textarea, body.vx-app select {
  background-color: rgba(255, 255, 255, .05); color: #fff; border-color: var(--border);
}
body.vx-app input::placeholder, body.vx-app textarea::placeholder { color: #6f8c95; }
body.vx-app input:focus, body.vx-app textarea:focus, body.vx-app select:focus {
  background-color: rgba(255, 255, 255, .08); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(238, 28, 37, .18);
}
body.vx-app select option { background: #0c2c35; color: #fff; }
body.vx-app .upload-zone { background: rgba(255, 255, 255, .03); border-color: #28606d; }
body.vx-app .tl-dot { background: #0c2c35; }
body.vx-app .info-box { color: #f3c17a; }
body.vx-app .info-box.blue { color: #b9ccff; }
body.vx-app th { background: rgba(255, 255, 255, .04); }
body.vx-app .card, body.vx-app .stat-card, body.vx-app .tracking-card { background: var(--card); border-color: var(--border); }
body.vx-app .btn-outline { color: #fff; border-color: #2a5c68; }
body.vx-app .btn-secondary { background: rgba(255, 255, 255, .08); color: #fff; }
body.vx-app .btn-danger { color: #ff8a8f; }
body.vx-app .chip { background: var(--card); }
body.vx-app .preview-item { border-color: var(--border); }
body.vx-app hr { border-color: var(--border); }

/* ---------- live chat pages ---------- */
body.vx-app .cx-card, body.vx-app .cx-item, body.vx-app .cx-chip, body.vx-app .cx-composer { background: var(--card); border-color: var(--border); }
body.vx-app .cx-bub { background: #12414d; border-color: var(--border); color: #fff; }
body.vx-app .cx-msg.mine .cx-bub { background: #8d1118; }
body.vx-app .cx-f input, body.vx-app .cx-f textarea, body.vx-app .cx-composer textarea, body.vx-app .cx-clip { background: rgba(255, 255, 255, .05); color: #fff; border-color: var(--border); }
body.vx-app .cx-drop { background: rgba(255, 255, 255, .03); border-color: #28606d; }
body.vx-app .cx-chip.on { background: var(--primary); border-color: var(--primary); }
body.vx-app .cx-recent a { background: rgba(255, 255, 255, .05); color: #fff; }
body.vx-app .cx-sep { border-color: var(--border); }
body.vx-app .cx-closed { background: rgba(255, 255, 255, .05); color: var(--text-muted); }
body.vx-app .cx-role { background: rgba(255, 255, 255, .1); color: #cfdde2; }

/* =========================================================
   PHONE: compact, native-app sizing (everything was too big)
   ========================================================= */
@media (max-width: 899px) {
  body.vx-app { font-size: 14px; }
  body.vx-app .page-head { padding: 14px 16px 4px; }
  body.vx-app .page-head h1 { font-size: 19px; }
  body.vx-app .page-head p { font-size: 12.5px; }
  body.vx-app .container { padding: 0 16px; }
  body.vx-app .btn { padding: 11px 16px; font-size: 14px; border-radius: 12px; }
  body.vx-app .btn-sm { padding: 8px 12px; font-size: 12.5px; }
  body.vx-app input[type=text], body.vx-app input[type=email], body.vx-app input[type=password], body.vx-app input[type=tel],
  body.vx-app input[type=date], body.vx-app input[type=time], body.vx-app input[type=number], body.vx-app textarea, body.vx-app select {
    padding: 10px 12px; font-size: 14px; border-radius: 10px;
  }
  body.vx-app input[type=date], body.vx-app input[type=time] { min-height: 42px; }
  body.vx-app .field { margin-bottom: 12px; }
  body.vx-app .field label { font-size: 12.5px; margin-bottom: 5px; }
  body.vx-app fieldset { margin-bottom: 14px; }
  body.vx-app legend { font-size: 14px; margin-bottom: 8px; }
  body.vx-app .tracking-card { margin: 0 16px 10px; padding: 12px; }
  body.vx-app .search-bar { padding: 4px 16px 12px; }
  body.vx-app .filter-chips { padding: 0 16px 12px; }
  body.vx-app .chip { padding: 7px 12px; font-size: 12px; }
  body.vx-app .topbar { padding: 9px 14px; }
  body.vx-app .brand .brand-logo, body.vx-app .topbar .brand-logo { width: 32px !important; height: 32px !important; }
  body.vx-app .icon-btn { width: 32px; height: 32px; font-size: 14px; }
  body.vx-app .flash-stack { padding: 10px 16px 0; }
  body.vx-app .flash { padding: 10px 12px; font-size: 12.5px; }
  body.vx-app main { padding-bottom: 8px; }
  body.vx-app { padding-bottom: 78px; }

  /* bottom navigation: slim like a real app tab bar */
  body.vx-app .bottom-nav {
    margin: 0 10px 8px !important; max-width: 440px; border-radius: 20px !important; padding: 6px 4px 9px !important;
  }
  body.vx-app .bottom-nav a { font-size: 10.5px; gap: 2px; font-weight: 600; }
  body.vx-app .bottom-nav a svg { width: 21px; height: 21px; margin-bottom: 1px; }
  body.vx-app .bottom-nav a.active::after { width: 26px; height: 2.5px; bottom: -6px; }

  /* ----- Home page ----- */
  body.vx-home { padding-bottom: 78px; }
  body.vx-home .vx-head { padding: 12px 14px 10px; gap: 10px; }
  body.vx-home .vx-logo { width: 40px; height: 40px; border-width: 1.5px; }
  body.vx-home .vx-brand h1 { font-size: 16px; }
  body.vx-home .vx-brand p { font-size: 11px; margin-top: 2px; }
  body.vx-home .vx-iconbtn { width: 36px; height: 36px; }
  body.vx-home .vx-iconbtn svg { width: 18px; height: 18px; }
  body.vx-home .vx-iconbtn .dot { top: 7px; right: 8px; width: 8px; height: 8px; }
  body.vx-home .vx-greet { padding: 16px 16px 14px; }
  body.vx-home .vx-greet small { font-size: 14px; }
  body.vx-home .vx-greet h2 { font-size: 26px; margin: 1px 0 6px; }
  body.vx-home .vx-greet p { font-size: 12.5px; }
  body.vx-home .vx-greet .bar { width: 44px; height: 3px; margin-top: 10px; }
  body.vx-home .vx-avatar { width: 58px; height: 58px; font-size: 24px; border-width: 1.5px; }
  body.vx-home .vx-sec { padding: 16px 16px 10px; }
  body.vx-home .vx-sec h3 { font-size: 16px; gap: 8px; }
  body.vx-home .vx-sec h3 svg { width: 20px; height: 20px; }
  body.vx-home .vx-sec a { font-size: 12.5px; }
  body.vx-home .vx-actions { padding: 0 16px; gap: 10px; }
  body.vx-home .vx-act { padding: 11px 10px; gap: 9px; border-radius: 14px; }
  body.vx-home .vx-act .ic { width: 38px; height: 38px; box-shadow: 0 4px 10px rgba(238, 0, 0, .25); }
  body.vx-home .vx-act .ic svg { width: 19px; height: 19px; }
  body.vx-home .vx-act strong { font-size: 13px; }
  body.vx-home .vx-act small { font-size: 11px; margin-top: 2px; }
  body.vx-home .vx-act .chev { font-size: 18px; }
  body.vx-home .vx-list { padding: 0 16px; gap: 10px; }
  body.vx-home .vx-row { padding: 9px; gap: 11px; border-radius: 14px; }
  body.vx-home .vx-thumb { width: 64px; height: 64px; border-radius: 11px; }
  body.vx-home .vx-thumb svg { width: 34px; height: 34px; }
  body.vx-home .vx-info h4 { font-size: 15px; margin-bottom: 2px; }
  body.vx-home .vx-stars svg { width: 13px; height: 13px; }
  body.vx-home .vx-stars { margin-bottom: 3px; gap: 2px; }
  body.vx-home .vx-info p { font-size: 12.5px; margin-bottom: 5px; }
  body.vx-home .vx-pill { font-size: 11.5px; padding: 3px 11px; }
  body.vx-home .vx-row .chev { font-size: 20px; }
  body.vx-home .vx-empty { margin: 0 16px; padding: 18px 14px; font-size: 13px; border-radius: 14px; }
  body.vx-home .vx-empty b { font-size: 15px; }
  body.vx-home .vx-empty a { padding: 8px 18px; font-size: 13px; margin-top: 10px; }
  body.vx-home .vx-banner { margin: 14px 16px 0; padding: 12px; gap: 10px; border-radius: 14px; flex-wrap: nowrap; }
  body.vx-home .vx-banner .pic { width: 52px; height: 48px; }
  body.vx-home .vx-banner h4 { font-size: 16px; }
  body.vx-home .vx-banner p { font-size: 11px; }
  body.vx-home .vx-banner .go { padding: 9px 14px; font-size: 13px; margin-left: 0; }
}

/* very small phones */
@media (max-width: 360px) {
  body.vx-home .vx-act small { display: none; }
  body.vx-home .vx-banner p { display: none; }
}

/* ---------- small fixes ---------- */
body.vx-app .chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
body.vx-app .tracking-card .meta { gap: 2px 14px; }
body.vx-app .tracking-card .meta span { display: inline-block; }

/* =========================================================
   PHONE v2: even more compact, professional app sizing
   ========================================================= */
@media (max-width: 899px) {
  body.vx-app { font-size: 13px; line-height: 1.45; }
  body.vx-app .page-head { padding: 12px 16px 2px; }
  body.vx-app .page-head h1 { font-size: 17px; }
  body.vx-app .page-head p { font-size: 12px; }
  body.vx-app .btn { padding: 10px 14px; font-size: 13px; border-radius: 10px; }
  body.vx-app input[type=text], body.vx-app input[type=email], body.vx-app input[type=password], body.vx-app input[type=tel],
  body.vx-app input[type=date], body.vx-app input[type=time], body.vx-app input[type=number], body.vx-app textarea, body.vx-app select {
    padding: 9px 11px; font-size: 13px; border-radius: 9px;
  }
  body.vx-app textarea { min-height: 64px; }
  body.vx-app input[type=date], body.vx-app input[type=time] { min-height: 38px; }
  body.vx-app select { background-position: right 11px center; background-size: 14px; padding-right: 32px; }
  body.vx-app .field { margin-bottom: 10px; }
  body.vx-app .field label { font-size: 12px; margin-bottom: 4px; }
  body.vx-app .field .hint, body.vx-app .hint { font-size: 11.5px; }
  body.vx-app .field-row { gap: 8px; }
  body.vx-app legend { font-size: 13px; margin-bottom: 7px; }
  body.vx-app fieldset { margin-bottom: 12px; }
  body.vx-app .card { padding: 13px; border-radius: 13px; }
  body.vx-app .kv { font-size: 12.5px; }
  body.vx-app .upload-zone { padding: 14px 10px; }
  body.vx-app .upload-zone strong { font-size: 13px; }
  body.vx-app .upload-zone .ico { font-size: 22px; }
  body.vx-app .topbar { padding: 8px 14px; }
  body.vx-app .flash { font-size: 12px; padding: 8px 11px; }
  body.vx-app { padding-bottom: 70px; }

  body.vx-app .bottom-nav { margin: 0 8px 6px !important; border-radius: 18px !important; padding: 5px 4px 8px !important; max-width: 400px; }
  body.vx-app .bottom-nav a { font-size: 10px; }
  body.vx-app .bottom-nav a svg { width: 19px; height: 19px; }
  body.vx-app .bottom-nav a.active::after { width: 22px; height: 2px; bottom: -5px; }

  body.vx-home { padding-bottom: 70px; }
  body.vx-home .vx-head { padding: 10px 14px 9px; }
  body.vx-home .vx-logo { width: 36px; height: 36px; }
  body.vx-home .vx-brand h1 { font-size: 15px; }
  body.vx-home .vx-brand p { font-size: 10.5px; }
  body.vx-home .vx-iconbtn { width: 33px; height: 33px; }
  body.vx-home .vx-iconbtn svg { width: 16px; height: 16px; }
  body.vx-home .vx-greet { padding: 14px 16px 12px; }
  body.vx-home .vx-greet small { font-size: 12.5px; }
  body.vx-home .vx-greet h2 { font-size: 22px; }
  body.vx-home .vx-greet p { font-size: 12px; }
  body.vx-home .vx-avatar { width: 50px; height: 50px; font-size: 20px; }
  body.vx-home .vx-sec { padding: 14px 16px 8px; }
  body.vx-home .vx-sec h3 { font-size: 14.5px; }
  body.vx-home .vx-sec h3 svg { width: 17px; height: 17px; }
  body.vx-home .vx-act { padding: 10px 9px; }
  body.vx-home .vx-act .ic { width: 34px; height: 34px; }
  body.vx-home .vx-act .ic svg { width: 17px; height: 17px; }
  body.vx-home .vx-act strong { font-size: 12.5px; }
  body.vx-home .vx-act small { font-size: 10.5px; }
  body.vx-home .vx-thumb { width: 56px; height: 56px; }
  body.vx-home .vx-info h4 { font-size: 14px; }
  body.vx-home .vx-stars svg { width: 11px; height: 11px; }
  body.vx-home .vx-info p { font-size: 12px; margin-bottom: 4px; }
  body.vx-home .vx-pill { font-size: 11px; padding: 2px 10px; }
  body.vx-home .vx-banner h4 { font-size: 15px; }
  body.vx-home .vx-banner .go { padding: 8px 12px; font-size: 12.5px; }
}

/* ---------- Settings: contact support card ---------- */
body.vx-app .set-contact { margin-top: 14px; }
body.vx-app .set-h { font-size: 15px; margin: 0 0 4px; color: #fff; }
body.vx-app .set-sub { font-size: 12.5px; margin: 0 0 12px; color: var(--text-muted); }

/* =========================================================
   PHONE: native-app feel (app bar, docked tab bar, touch behaviour)
   Desktop (900px+) keeps the sidebar layout from desktop.css.
   ========================================================= */
@media (max-width: 899px) {
  html { -webkit-text-size-adjust: 100%; }
  body.vx-app { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; touch-action: manipulation; }
  body.vx-app a, body.vx-app button, body.vx-app .bottom-nav, body.vx-app .appbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  body.vx-app input, body.vx-app textarea { -webkit-user-select: text; user-select: text; }
  body.vx-app main { animation: vxIn .22s ease both; }
  @keyframes vxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  body.vx-app .btn:active, body.vx-app .vx-act:active, body.vx-app .vx-row:active, body.vx-app .tracking-card:active { transform: scale(.98); transition: transform .08s; }

  /* app bar (inner pages) */
  body.vx-app .appbar { display: flex; align-items: center; gap: 8px; padding: calc(6px + env(safe-area-inset-top)) 10px 6px; min-height: 50px;
    background: rgba(7, 29, 36, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
  .ab-back, .ab-ico { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.07); color: #fff;
    display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex: none; text-decoration: none; }
  .ab-back svg, .ab-ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ab-back:active, .ab-ico:active { background: rgba(255,255,255,.16); }
  .ab-title { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ab-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--vx-red); border: 2px solid #0b2a33; }
  body.vx-app .appbar .topbar-actions { gap: 6px; }
  /* the app bar already shows the screen name */
  body.vx-titled .page-head h1 { display: none; }
  body.vx-titled .page-head { padding-top: 10px; }
  body.vx-titled .page-head:not(:has(p)) { display: none; }

  /* home header safe area */
  body.vx-home .vx-head { padding-top: calc(10px + env(safe-area-inset-top)); }

  /* docked tab bar like a real app */
  body.vx-app .bottom-nav { left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; max-width: none; width: 100%;
    border-radius: 0 !important; border: 0 !important; border-top: 1px solid var(--border) !important; box-shadow: 0 -6px 20px rgba(0,0,0,.25) !important;
    background: rgba(8, 36, 44, .96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 7px 6px calc(8px + env(safe-area-inset-bottom)) !important; }
  body.vx-app .bottom-nav a.active::after { top: -8px; bottom: auto; width: 28px; height: 3px; border-radius: 0 0 3px 3px; }
  body.vx-app { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.vx-home { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.vx-app .flash-stack { position: sticky; top: 50px; z-index: 30; }

  /* bottom-sheet menu */
  body.vx-app .menu-panel { border-radius: 20px 20px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  body.vx-app .menu-item { font-size: 14px; padding: 13px 16px; }
}

/* ---------- Profile ---------- */
body.vx-app .pf-hero { text-align: center; }
body.vx-app .pf-av { width: 60px; height: 60px; border-radius: 50%; background: var(--gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin: 0 auto 10px; }
body.vx-app .pf-hero h3 { font-size: 16px; margin: 0 0 2px; color: #fff; }
body.vx-app .pf-hero p { margin: 0; font-size: 12.5px; }
body.vx-app .pf-info { margin-top: 12px; }
body.vx-app .pf-info .kv { word-break: break-word; }
@media (min-width: 900px) { body.vx-app .pf-hero h3 { font-size: 20px; } body.vx-app .pf-av { width: 76px; height: 76px; font-size: 28px; } }