/* =====================================================================
   mobile-app.css — Native-app re-skin for phones (<= 767.98px).

   Loaded LAST in _Document.cshtml so it wins the cascade by source order
   (no per-file specificity fights). EVERYTHING is inside the phone media
   query, so desktop (>= 768px) is completely untouched.

   Goal: replace the "desktop website shrunk down" look (navy/white rounded
   shadowed cards floating on a grey page) with a flat, white, divider-based
   app structure — inspired by AUTOBOOM, but in CARBAR's navy + orange brand.
   ===================================================================== */

@media (max-width: 767.98px) {

  /* ───────────────────── App design tokens ───────────────────── */
  :root {
    --app-divider: rgba(17, 24, 39, 0.08);
    --app-tile: #f1f3f7;     /* rounded-square icon tiles */
    --app-tint: #eef2ff;     /* navy-soft feature cards */

    /* Flatten every feature's card/hero shadows in one shot — these vars
       feed box-shadow across all feature stylesheets. */
    --mkt-shadow-sm: none; --mkt-shadow-md: none;
    --v-shadow-sm: none;   --v-shadow-md: none;
    --c-shadow-sm: none;   --c-shadow-md: none;
    --m-shadow-sm: none;   --m-shadow-md: none;
    --d-shadow-sm: none;   --d-shadow-md: none;
  }

  /* ───────── White app surface (kills the grey "page" contrast) ───────── */
  body.bg-background { background: #ffffff; }

  /* Flatten Tailwind elevation utilities used by home/profile. */
  .shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none; }

  /* Normalize page wrappers to a single 16px content inset so the
     full-bleed bleeds below land exactly on the screen edges. */
  .mkt2, .mech, .mech-details, .dir, .c-shell, .pub {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ════════════════════════════ HEROES ════════════════════════════
     Flat, full-bleed header bands instead of floating rounded banners. */
  .mkt2__hero, .mech__hero, .dir__hero, .c-hero {
    margin-inline: -16px;     /* bleed past the wrapper inset to the edges */
    border-radius: 0;
    box-shadow: none;
  }
  .mech__hero, .dir__hero, .c-hero { padding: 20px 16px; margin-bottom: 14px; }
  .mkt2__hero { padding: 16px; margin-bottom: 12px; }

  /* ═══════════════════════ LIST COLLECTIONS ═══════════════════════
     Edge-to-edge rows separated by hairline dividers (each card keeps its
     own inner padding, so text stays ~16px from the screen edge). */
  .mkt2-list, .c-list, .dir__grid, .mech__grid {
    gap: 0;
    margin-inline: -16px;
  }
  .mkt2-card, .c-card, .dir__card, .mech__card {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--app-divider);
    box-shadow: none;
    background: #fff;
  }
  /* text rows that may not carry their own side padding */
  .dir__card, .mech__card { padding-inline: 16px; }

  /* Market filter bar / smart search: flat */
  .mkt2-bar { box-shadow: none; }

  /* ═══════════════════ STANDALONE CONTENT CARDS ═══════════════════
     Vehicle report & similar: keep a hairline border for definition on
     white, but flat (no shadow) and a tighter radius. */
  .v-card, .v-section { box-shadow: none; }
  .v-card { border-radius: 12px; }

  /* Soften the biggest Tailwind rounding so home/profile read flatter. */
  .rounded-3xl { border-radius: 16px; }

  /* ═══════════════ COMMUNITY — denser, more per screen ═══════════════ */
  /* Compact hero: drop the marketing paragraph, shrink the title/padding. */
  .c-hero { padding: 16px; }
  .c-hero__badge { margin-bottom: 8px; }
  .c-hero__title { font-size: 1.3rem; margin-bottom: 4px; line-height: 1.25; }
  .c-hero__lead { display: none; }
  .c-hero__cta { margin-top: 12px; padding: 11px 16px; }
  .c-hero__stats { gap: 8px; }
  .c-hero__stat { padding: 8px 12px; }

  .c-toolbar { padding: 10px; gap: 8px; }

  /* Question rows: tighter padding + clamp the body to 2 lines = more rows visible. */
  .c-card { padding: 12px 16px; }
  .c-card__top { margin-bottom: 4px; }
  .c-card__title { font-size: 0.98rem; }
  .c-card__body {
    font-size: 0.86rem;
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Topics: one compact, swipeable chip row instead of a tall vertical list. */
  .c-side__card {
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--app-divider);
    padding: 12px 16px;
  }
  .c-side__title { margin: 0 0 8px; }
  .c-tagcloud {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .c-tagcloud::-webkit-scrollbar { display: none; }
  .c-tagcloud__item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 12px;
    border: 1px solid var(--app-divider);
    border-radius: 999px;
  }
  .c-cta-card { border-radius: 14px; }

  /* ═══════════════ AI CHAT — denser, fill the empty space ═══════════════ */
  .chat-shell .chat-header { padding: 10px 14px; }
  .chat-shell .chat-header h1 { font-size: 0.95rem; }
  .chat-shell .chat-header p { font-size: 0.72rem; margin-top: 1px; }
  .chat-shell .chat-stream { padding: 14px; }
  /* Quick-prompt chips stay on ONE horizontal swipe row (no wrapping) so the
     composer sits as low as possible instead of being pushed up by a tall
     wrapped chip block. The strip scrolls sideways for the overflow chips. */
  .chat-suggest {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 14px 0;
  }

  /* Stick the composer to the bottom, just above the fixed nav bar.
     The app shell gives <main> 6rem of bottom padding but the nav is only
     4rem tall — that 2rem surplus left a dead gap under the composer. Trim
     <main>'s bottom padding to the nav height and grow the chat area to match
     so the input rests directly above the tab bar (safe-area aware). */
  body:has(.chat-shell) main {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }
  .chat-shell .chat-main {
    height: calc(100vh - 9rem - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 9rem - env(safe-area-inset-bottom, 0px));
  }

  /* ═══════════════ PROFILE — flat, app-style account screen ═══════════════
     Replace the floating navy/white rounded shadowed cards with the same flat,
     white, divider-based structure used across the app. Everything is scoped
     under .profile-shell and stays inside the phone query, so desktop is
     untouched. The page wrapper keeps the standard 16px content inset; cards
     and lists bleed past it (-16px) so dividers land on the screen edges. */
  .profile-shell { padding-top: 0; padding-bottom: 8px; }

  /* Hero → flat full-bleed band, no floating rounded card / shadow. */
  .profile-shell .profile-hero {
    margin-inline: -16px;
    margin-bottom: 12px;
    border-radius: 0;
    box-shadow: none;
  }
  .profile-shell .profile-hero .pulse-gradient { height: 84px; }
  /* the white slab under the gradient merges into the page (no radius/border) */
  .profile-shell .profile-hero > div:last-child {
    border-radius: 0;
    border: 0;
  }

  /* Quick-stat tiles → flat, hairline border only (kills the elevation). */
  .profile-shell .profile-stat {
    border-radius: 14px;
    border-color: var(--app-divider);
    box-shadow: none;
  }
  .profile-shell .profile-stat:hover { box-shadow: none; }

  /* Sticky tab rail → flat white, hairline underline (no translucent blur card). */
  .profile-shell .profile-nav {
    background: #fff;
    backdrop-filter: none;
    border-bottom: 1px solid var(--app-divider);
  }

  /* Cards → full-bleed flat sections separated by hairlines, no rounded floaters.
     16px inner padding keeps content off the screen edge. */
  .profile-shell .profile-card {
    margin-inline: -16px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--app-divider);
    box-shadow: none;
    padding: 16px;
    background: #fff;
  }
  /* Stacked cards in the account panel: drop the Tailwind space-y gaps so the
     sections read as one continuous divided settings list. The doubled class
     matches Tailwind's `.space-y-4 > :not([hidden]) ~ :not([hidden])`
     specificity (0,3,0) and wins on source order (this file loads last). */
  .profile-shell .profile-panel.profile-panel > * + * { margin-top: 0; }
  .profile-shell .profile-card--danger { border-bottom-color: var(--app-divider); }

  /* List collections → edge-to-edge rows divided by hairlines (cancel the card's
     16px inset with -16px, each row re-pads 16px). No tile borders/radius. */
  .profile-shell .profile-list {
    gap: 0;
    margin-inline: -16px;
    grid-template-columns: 1fr;   /* favorites grid collapses to a single column */
  }
  .profile-shell .profile-row {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--app-divider);
    background: #fff;
    padding: 12px 16px;
  }
  .profile-shell .profile-list > .profile-row:last-child { border-bottom: 0; }

  /* Account action rows → iOS-settings style edge-to-edge rows with a chevron. */
  .profile-shell .profile-action {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--app-divider);
    background: #fff;
    padding: 14px 16px;
  }
  .profile-shell .profile-list > .profile-action:last-child { border-bottom: 0; }
}