/* =============================================================
   mobile.css — Evermail WebApp responsive overrides
   Breakpoint: ≤768px = mobile. Tablet (769–1024) keeps desktop layout.
   Load this LAST so its @media rules win by cascade order.

   Tokens this file depends on (defined in colors_and_type.css):
     --backdrop-color, --backdrop-color-strong
     --sheet-radius, --sheet-shadow, --sheet-handle-color
     --ease-spring, --ease-soft-out
     --duration-sheet, --duration-tab-indicator

   Reusable primitives used here live in ui_kits/airy.css:
     .bottom-sheet, .pill-subnav, .viewer-mobilebar, .tab-indicator
   New mobile UIs should prefer those primitives over bespoke rules.
   ============================================================= */

/* ---------- Mobile tab bar ---------- */
.mobile-tabbar { display: none; }
/* Back button hidden on desktop; shown on mobile via @media below */
.email-viewer__back,
.email-viewer__mobilebar { display: none; }
@media (max-width: 768px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -1px 0 rgba(15,23,42,0.04);
    overflow: visible;
  }
  [data-theme="dark"] .mobile-tabbar {
    background: rgba(15,23,42,0.88);
    border-top-color: rgba(255,255,255,0.08);
  }

  /* ----- Sliding indicator strip (D) ----- */
  .mobile-tabbar__indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: var(--ind-w, 0px);
    transform: translateX(var(--ind-x, 0px));
    background: var(--color-brand-primary);
    border-radius: 0 0 3px 3px;
    pointer-events: none;
    opacity: inherit;
    transition: none;
  }
  .mobile-tabbar.is-ready .mobile-tabbar__indicator {
    transition:
      transform var(--duration-tab-indicator) var(--ease-spring),
      width var(--duration-tab-indicator) var(--ease-spring);
  }

  .mobile-tabbar__glow {
    display: none;
  }

  .mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 6px 2px 4px;
    min-width: 0;
    position: relative;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    touch-action: manipulation;
  }

  /* ----- Icon swap: stacked outline + fill ----- */
  .mobile-tab__iconwrap {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s cubic-bezier(.34, 1.56, .42, 1);
  }
  .mobile-tab__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    transition:
      opacity .28s ease,
      transform .35s cubic-bezier(.34, 1.56, .42, 1);
  }
  .mobile-tab__icon--line { opacity: 1; transform: scale(1); }
  .mobile-tab__icon--fill { opacity: 0; transform: scale(.7); color: var(--color-brand-primary); }

  .mobile-tab.is-active .mobile-tab__icon--line { opacity: 0; transform: scale(1.25); }
  .mobile-tab.is-active .mobile-tab__icon--fill { opacity: 1; transform: scale(1); }
  .mobile-tab.is-active .mobile-tab__iconwrap { transform: translateY(-2px); }

  .mobile-tab__label {
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: color .25s ease, transform .3s cubic-bezier(.34, 1.56, .42, 1);
  }
  .mobile-tab.is-active { color: var(--color-brand-primary); }
  .mobile-tab.is-active .mobile-tab__label { transform: translateY(-1px); }

  .mobile-tab:active .mobile-tab__iconwrap { transform: translateY(1px) scale(.92); }
  .mobile-tab.is-active:active .mobile-tab__iconwrap { transform: translateY(-1px) scale(.92); }

  @media (prefers-reduced-motion: reduce) {
    .mobile-tabbar.is-ready .mobile-tabbar__indicator,
    .mobile-tabbar.is-ready .mobile-tabbar__glow,
    .mobile-tab__icon,
    .mobile-tab__iconwrap,
    .mobile-tab__label {
      transition: none !important;
    }
  }
}

/* ---------- Hide desktop sidebar on mobile ---------- */
@media (max-width: 768px) {
  .sidebar { display: none; }
  /* When the drawer is explicitly opened (.sidebar-host--visible), show the rail again
     (MainLayout scoped CSS sets pointer-events on the host). */
  .sidebar-host--visible .sidebar {
    display: flex !important;
  }
  body { display: block; }
  .main {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
  }
}

/* ---------- Top bar on mobile ---------- */
@media (max-width: 768px) {
  /* Main / content padding — default is 2rem which eats 64px on a 375px
     screen. Tighten so content breathes. */
  .main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .topbar {
    padding: 10px 4px;
    border-radius: 0;
  }
  .topbar__crumb { font-size: .88rem; }
  .main > .screen,
  .main > section,
  .main > div > section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================
   Contacts — mobile
   ============================================================ */
@media (max-width: 768px) {

  /* Hero: page-hero media rule above handles core. Tune contacts-specific */
  .contacts-hero__sub { font-size: .9rem !important; }
  .contacts-mode-toggle { align-self: flex-start; }

  /* Segments rail — already scrolls horizontally */
  .contacts-segments {
    margin: 0 -16px !important;
    padding: 0 16px !important;
  }
  .contacts-segments__list { gap: 6px !important; }
  .contacts-segment {
    font-size: .78rem !important;
    padding: 6px 10px !important;
  }
  .contacts-segments__add { font-size: .78rem !important; }
  .contacts-segments__dialog {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: 80px !important;
    width: auto !important;
  }

  /* Filter bar — stack */
  .contacts-filterbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .contacts-filterbar__search { flex: 1 !important; max-width: none !important; }
  .contacts-filterbar__right {
    justify-content: space-between !important;
    width: 100% !important;
  }
  .contacts-filterbar__count { margin-left: 0 !important; }

  /* ===== Card list (replaces the table) ===== */
  .contact-table__head,
  .contact-table__cell--last {
    display: none !important;
  }
  .contact-table {
    display: block !important;
    border: 0 !important;
  }
  .contact-table__row {
    display: grid !important;
    grid-template-columns: 24px 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "check name    emails"
      "check company score" !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    align-items: center;
  }
  .contact-table__row .contact-table__cell--select {
    grid-area: check;
    align-self: center;
  }
  .contact-table__row .contact-table__cell--name {
    grid-area: name;
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .contact-table__row .contact-table__cell--name .contact-table__avatar {
    width: 36px !important; height: 36px !important;
    font-size: .74rem !important;
    flex: 0 0 36px !important;
  }
  .contact-table__row .contact-table__cell--name .contact-table__name-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .contact-table__row .contact-table__cell--name .contact-table__name { font-size: .9rem !important; }
  .contact-table__row .contact-table__cell--name .contact-table__email {
    font-size: .72rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Company: move under name spanning both columns (starting from column 2) */
  .contact-table__row .contact-table__cell--company {
    grid-area: company;
    display: block !important;
    padding-left: 46px; /* align with name text, past the avatar */
    font-size: .76rem !important;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .contact-table__row .contact-table__cell--emails {
    grid-area: emails;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 3px;
    padding: 3px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-size: .72rem !important;
    font-weight: 600;
    white-space: nowrap;
  }
  .contact-table__row .contact-table__cell--emails::after {
    content: " emails";
    font-weight: 500;
  }
  .contact-table__row .contact-table__cell--company .contact-table__company,
  .contact-table__row .contact-table__cell--company .contact-table__role {
    display: inline;
    font-size: .76rem !important;
    color: var(--color-text-secondary) !important;
  }
  .contact-table__row .contact-table__cell--company .contact-table__role::before {
    content: " · ";
  }

  /* Score: collapse meter, keep the % label */
  .contact-table__row .contact-table__cell--score {
    grid-area: score;
    justify-self: end;
    display: flex !important;
    align-items: center;
    min-width: 0;
  }
  .contact-table__row .contact-table__cell--score .contact-table__meter { display: none !important; }
  .contact-table__row .contact-table__cell--score .contact-table__score-label {
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: var(--color-text-primary);
  }

  .contact-table__row .contact-table__cell--last {
    grid-area: recency;
    justify-self: end;
    font-size: .72rem !important;
    color: var(--color-text-secondary);
  }

  /* Pagination — allow wrap */
  .pagination {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .pagination__left, .pagination__controls {
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* ===== Bulk action bar — full width ===== */
  .bulk-bar {
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px) !important;
    width: auto !important;
    min-width: 0 !important;
    padding: .6rem .7rem !important;
    flex-wrap: wrap !important;
    gap: .5rem .5rem !important;
  }
  .bulk-bar__count { font-size: .8rem !important; }
  .bulk-bar__actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
  }
  .bulk-bar__btn {
    font-size: .76rem !important;
    padding: .4rem .55rem !important;
  }
  .bulk-bar__btn-label {
    display: none !important;
  }
  .bulk-bar__btn i { margin-right: 0 !important; }

  .bulk-bar__menu, .bulk-bar__menu--tags {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    min-width: 0 !important;
  }

  /* ===== Contact detail — full-screen mode =====
     The drawer is rendered inside a .modal-backdrop. On mobile, let the
     drawer take the entire viewport and collapse the backdrop. */
  .modal-backdrop:has(.contact-drawer) {
    background: var(--color-surface) !important;
    padding: 0 !important;
  }
  .contact-drawer-backdrop {
    z-index: 1100 !important;
    backdrop-filter: none !important;
  }
  .contact-drawer {
    width: 100vw !important;
    left: 0 !important; right: 0 !important;
    top: 0 !important; bottom: 0 !important;
    padding: 14px 16px calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    animation: cd-slide-up .22s ease-out !important;
    z-index: 1101 !important;
  }
  @keyframes cd-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  /* Dedicated back/close bar for mobile — taller hit target */
  .contact-drawer__close {
    top: 10px !important; right: 10px !important;
    width: 40px !important; height: 40px !important;
  }
  .contact-drawer__head { padding-top: 8px !important; }
  .contact-drawer__avatar { width: 52px !important; height: 52px !important; font-size: 1rem !important; }
  .contact-drawer__head h2 { font-size: 1.15rem !important; }
  .contact-drawer__stats { gap: 12px !important; }
  .contact-drawer__stats > div { font-size: 1rem !important; }
  .contact-drawer__stat-label { font-size: .68rem !important; }

  /* Tag menu — widen to match drawer */
  .contact-drawer__tag-menu {
    left: auto !important;
    right: 0 !important;
    min-width: 260px !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* ============================================================
   Contacts Graph — mobile
   ============================================================ */
@media (max-width: 768px) {
  .contacts-graph {
    margin: 0 -16px !important;
    padding: 0 !important;
  }
  .contacts-graph-wrap {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .contacts-graph-wrap canvas {
    touch-action: none;  /* let our custom pan/zoom take over */
  }
  .contacts-graph-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .contacts-graph-toolbar__seg {
    font-size: .72rem !important;
  }
  .contacts-graph-toolbar__seg button {
    padding: 4px 8px !important;
  }
  .contacts-graph-toolbar__toggle {
    font-size: .72rem !important;
  }
  .contacts-graph-legend {
    font-size: .7rem !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .contacts-graph-hint { display: none !important; } /* hover hint irrelevant on touch */

  /* Current ContactGraphView uses cg-* classes. Keep the graph usable instead of
     hiding the mode switch on mobile. */
  .contacts-filterbar--graph {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .contacts-filterbar--graph .contacts-filterbar__search {
    max-width: none !important;
    width: 100% !important;
  }
  .contacts-filterbar--graph .cg-control,
  .contacts-filterbar--graph .cg-toggle,
  .contacts-filterbar--graph .contacts-filterbar__filters,
  .contacts-filterbar--graph .cg-panel__fit {
    width: 100% !important;
    justify-content: center !important;
  }
  .cg-legend-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: .72rem !important;
  }
  .cg-legend-bar__hint {
    display: none !important;
  }
  .cg-canvas-wrap {
    height: 58vh !important;
    min-height: 420px !important;
    margin: .75rem -12px 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }
  .cg-canvas {
    touch-action: none;
  }
}

/* ============================================================
   Search — mobile: stack list + full-screen viewer
   ============================================================ */
@media (max-width: 768px) {
  .search-screen { padding: 12px 0 !important; }

  /* KEEP the search bar horizontal — just make it more compact.
     Stacking vertically (earlier attempt) caused the input, ×, esc,
     and Search button to fight for space awkwardly. */
  .search-bar {
    padding: .55rem .7rem !important;
    gap: .4rem !important;
    flex-wrap: nowrap !important;
  }
  .search-bar input { font-size: 16px !important; min-width: 0 !important; } /* prevent iOS zoom + allow shrink */
  .search-bar__kbd { display: none !important; }
  .search-bar__clear { flex: 0 0 auto; }
  /* CTA becomes icon-only on narrow screens */
  .search-bar__cta {
    padding: .45rem .7rem !important;
    font-size: .82rem !important;
  }
  .search-bar__cta .cta-label { display: none; }

  /* Filter chips row: tighten + allow overflow to scroll horizontally
     rather than wrapping to 3-4 tall rows */
  .filter-chips {
    margin-top: .7rem !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .filter-chips .chip {
    font-size: .74rem !important;
    padding: 4px 8px !important;
    max-width: 100%;
  }
  /* Shorten/truncate long chip contents (date ranges) */
  .filter-chips .chip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .saved-searches__inline,
  .search-saved {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Split becomes stacked — list visible, viewer hidden by default */
  .split {
    display: block !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .email-list {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-border);
  }
  .email-viewer {
    display: none !important;
  }
  .email-viewer.is-mobile-open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: none !important;
    box-sizing: border-box !important;
    z-index: 1200;
    background: #ffffff !important;
    overflow-y: auto;
    border-left: 0 !important;
    padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    animation: sv-slide .22s ease-out;
  }
  [data-theme="dark"] .email-viewer.is-mobile-open {
    background: #0f172a !important;
  }

  /* Tighter email viewer content on mobile */
  .email-viewer.is-mobile-open .email-viewer__head { padding: 0 !important; }
  .email-viewer.is-mobile-open .email-viewer__subject {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    padding-top: 8px;
  }
  .email-viewer.is-mobile-open .email-viewer__meta {
    font-size: .78rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .email-viewer.is-mobile-open .email-viewer__toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .email-viewer.is-mobile-open .email-viewer__body {
    font-size: .92rem !important;
    padding: 12px 0 !important;
  }
  .email-viewer.is-mobile-open .email-figure img,
  .email-viewer.is-mobile-open .email-figure {
    max-width: 100% !important;
    height: auto !important;
  }
  /* When viewer is full-screen, hide siblings so nothing can bleed through */
  .search-screen:has(.email-viewer.is-mobile-open) .search-bar,
  .search-screen:has(.email-viewer.is-mobile-open) .filter-chips,
  .search-screen:has(.email-viewer.is-mobile-open) .search-saved,
  .search-screen:has(.email-viewer.is-mobile-open) .saved-searches,
  .search-screen:has(.email-viewer.is-mobile-open) .email-list,
  .search-screen:has(.email-viewer.is-mobile-open) .pagination,
  body:has(.email-viewer.is-mobile-open) .topbar {
    /* Hidden while the viewer is active, to prevent scroll-through */
    display: none !important;
  }
  body:has(.email-viewer.is-mobile-open) .mobile-tabbar {
    display: none !important;
  }
  @keyframes sv-slide { from { transform: translateX(20px); opacity:0; } to { transform: translateX(0); opacity: 1; } }

  .email-viewer__mobilebar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -12px 4px;
    padding: 8px 10px calc(8px + env(safe-area-inset-top, 0px));
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }
  [data-theme="dark"] .email-viewer__mobilebar {
    border-bottom-color: rgba(255,255,255,0.08);
  }

  .email-viewer__back {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 8px 12px 8px 8px;
    background: color-mix(in oklch, var(--color-brand-primary) 10%, transparent);
    border: 0;
    border-radius: 999px;
    color: var(--color-brand-primary);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 36px;
    transition: background .15s ease, transform .1s ease;
  }
  .email-viewer__back i {
    font-size: 1.05rem;
    line-height: 1;
  }
  .email-viewer__back:hover { background: color-mix(in oklch, var(--color-brand-primary) 16%, transparent); }
  .email-viewer__back:active { transform: scale(.96); }

  .email-viewer__counter {
    font-size: .78rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .email-viewer__counter span {
    color: var(--color-text-muted);
    font-weight: 400;
    margin: 0 2px;
  }

  .email-viewer__nav {
    display: inline-flex;
    background: var(--color-surface-muted);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
  }
  .email-viewer__navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .1s ease;
  }
  .email-viewer__navbtn:hover:not(:disabled) {
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(15,23,42,0.08);
  }
  .email-viewer__navbtn:active:not(:disabled) { transform: scale(.9); }
  .email-viewer__navbtn:disabled {
    color: var(--color-text-muted);
    opacity: .4;
    cursor: not-allowed;
  }
  .email-viewer__navbtn i { font-size: 1.05rem; line-height: 1; }

  /* Fallback for environments without color-mix */
  @supports not (background: color-mix(in oklch, red, blue)) {
    .email-viewer__back { background: rgba(37,99,235,0.1); }
    .email-viewer__back:hover { background: rgba(37,99,235,0.16); }
    .email-viewer__mobilebar { border-bottom-color: rgba(15,23,42,0.08); }
  }

  .email-card { padding: 12px !important; }
  .email-card .row1 { flex-wrap: wrap !important; }

  /* Pager */
  .search-pager {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ============================================================
   Archives — mobile: compact card rows
   ============================================================ */
@media (max-width: 768px) {
  .archive-row {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    grid-template-areas:
      "ico   body"
      "ico   meta"
      "acts  acts" !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    padding: 12px 0 !important;
  }
  .archive-row__ico { grid-area: ico; width: 40px !important; height: 40px !important; }
  .archive-row__body { grid-area: body; min-width: 0; }
  .archive-row__top { flex-wrap: wrap !important; gap: 4px 8px !important; }
  .archive-row__name { font-size: .92rem !important; }
  .archive-row__snippet {
    font-size: .74rem !important;
    flex-wrap: wrap !important;
    gap: 3px 6px !important;
  }
  .archive-row__right {
    grid-area: meta !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    align-items: center !important;
    padding-left: 0 !important;
  }
  .archive-row__when { font-size: .72rem !important; }
  .archive-row__actions {
    grid-area: acts !important;
    /* EVE-3761: the group is a grid now; justify-content: flex-end packs the
       fixed slots to the right edge of the "acts" area, same as before. */
    justify-content: flex-end !important;
  }
}

/* ============================================================
   Page hero — all screens use `.page-hero` as base
   ============================================================ */
@media (max-width: 768px) {
  .page-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }
  .page-hero h1 { font-size: 1.55rem !important; line-height: 1.22 !important; }
  .page-hero p { font-size: .9rem !important; }
}

/* ============================================================
   Home — mobile
   Strategy: strip to essentials. Drop the filter-chip row (redundant
   with Recent Searches below it) and the storage meter (Settings now).
   Tighten the per-item filter chips since they nest awkwardly.
   ============================================================ */
@media (max-width: 768px) {
  .home-hero__sub { font-size: .88rem !important; }

  /* Keep the storage summary visible at every viewport while removing the
     redundant search shortcuts. The full Search screen owns those chips. */
  .home-search .filter-chips > .chip {
    display: none !important;
  }
  .home-search .filter-chips {
    display: flex !important;
    width: 100%;
  }
  .home-quota {
    display: inline-flex !important;
    width: 100%;
    margin-left: 0;
  }
  .home-quota__bar {
    flex: 1;
    min-width: 48px;
  }

  .home-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    margin-top: 16px !important;
    min-width: 0;
    width: 100%;
  }
  .home-panel {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    padding: 16px !important;
    border: 0 !important;
    background: transparent !important;
  }
  .home-panel__head {
    flex-wrap: wrap;
    gap: 4px;
    align-items: baseline !important;
    margin-bottom: 10px !important;
  }
  /* The eyebrow becomes redundant next to the h3 title on mobile */
  .home-panel__head .eyebrow { display: none !important; }
  .home-panel__head h3,
  .home-panel__head h2 { font-size: 1rem !important; }

  /* Recent searches rows: hide nested filter chips, keep query + meta */
  .recent-search .chip,
  .recent-search__filters,
  .recent-search__chips { display: none !important; }
  .recent-search,
  .home-panel > .recent-search,
  .home-panel > *:has(> .recent-search) .recent-search {
    padding: 10px 0 !important;
    gap: 8px !important;
  }
  .recent-search__query,
  .recent-search__q { font-size: .92rem !important; }
  .recent-search__meta,
  .recent-search__stats { font-size: .74rem !important; }

  /* Archive list on Home — one-column mobile cards. The section shell is flat,
     so a quiet surface shift separates each archive without nested card chrome. */
  .home-archives {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .home-archive {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-areas:
      "ico body"
      ". actions";
    align-items: start !important;
    gap: 8px 12px !important;
    width: 100%;
    min-width: 0;
    padding: 14px !important;
    border-radius: 16px !important;
    background: var(--color-surface-muted);
  }
  .home-archive__ico {
    grid-area: ico;
    width: 40px !important; height: 40px !important;
    flex: 0 0 40px !important;
    font-size: 1rem !important;
  }
  .home-archive__body {
    grid-area: body;
    min-width: 0;
    width: 100%;
  }
  .home-archive__name,
  .home-archive__name--link {
    display: block;
    width: 100%;
    font-size: .88rem !important;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .home-archive__meta {
    margin-top: 4px !important;
    font-size: .74rem !important;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .home-archive__meta--error {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .home-archive__status { font-size: .72rem !important; }

  .home-archive__actions {
    grid-area: actions;
    min-width: 0;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: space-between;
    gap: 8px !important;
  }
  .home-archive__retry {
    min-width: 44px;
    min-height: 44px;
    margin: -8px -10px -8px 0 !important;
    padding: 0 10px !important;
  }
}

/* ============================================================
   Upload — mobile
   ============================================================ */
@media (max-width: 768px) {
  .upload-wrapper {
    gap: 1.25rem !important;
    padding-top: 1rem !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: 100% !important;
    overflow-x: clip;
  }
  .upload-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
    padding: .25rem 0 0 !important;
    margin-bottom: 0 !important;
  }
  .upload-hero h1 {
    font-size: clamp(1.9rem, 10vw, 2.5rem) !important;
    line-height: 1.08 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .upload-hero .text-muted {
    font-size: .92rem;
    line-height: 1.5;
    max-width: 100%;
  }
  .upload-hero__meta,
  .upload-hero-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .45rem !important;
    margin-top: .9rem;
  }
  .upload-hero__meta .airy-metric,
  .upload-hero-stats div {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding: .42rem .65rem !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    text-align: left !important;
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
  }
  .upload-hero__meta .airy-metric--wide {
    max-width: 100%;
  }
  .upload-hero__meta .airy-metric__value,
  .upload-hero-stats span {
    display: inline !important;
    font-size: .82rem;
    white-space: normal;
  }
  .upload-hero__meta .airy-metric__label,
  .upload-hero-stats small {
    font-size: .72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .upload-hero__meta {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .airy-metric__value { font-size: 1rem !important; }
  .upload-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .upload-main,
  .upload-aside {
    min-width: 0;
  }
  .airy-dropzone {
    min-height: 280px !important;
    padding: 32px 16px !important;
  }
  .airy-dropzone__title {
    font-size: .94rem !important;
    max-width: 30ch;
  }
  .upload-faq .export-guide__tabs {
    flex-wrap: wrap;
  }
  .upload-faq .export-guide__tab {
    min-height: 44px;
  }
  .sec-opt {
    align-items: flex-start !important;
    min-height: 44px;
  }
  .sec-opt__sub {
    display: block;
    margin-top: 2px;
  }
  .btn-upload {
    min-height: 52px;
  }
}

/* ============================================================
   Settings — mobile
   ============================================================ */
@media (max-width: 768px) {
  .settings-shell {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .settings-nav {
    width: 100% !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding: 4px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto !important;
  }
  .settings-nav__item, .settings-nav a, .settings-nav button {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .settings-body, .settings-main { padding: 0 !important; flex: 1 1 auto !important; }
}

/* ============================================================
   Bottom sheet — shared utility for filter + tag pickers
   ============================================================ */
@media (max-width: 768px) {
  /* Page enter animations leave a transform on .home-wrapper (animation-fill:
     forwards), which makes fixed-position sheets/viewers anchor to the page
     instead of the viewport. Disable that containing block while mobile
     overlays are open. */
  .home-wrapper:has(.filter-menu--open),
  .home-wrapper:has(.email-viewer.is-mobile-open),
  .home-wrapper:has(.contact-drawer--open) {
    animation: none !important;
    transform: none !important;
  }

  .filter-menu--open {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    margin: 0 !important;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    box-shadow: var(--sheet-shadow);
    z-index: 1190;
    animation: sheet-up var(--duration-sheet) var(--ease-soft-out);
  }
  .filter-menu--picker,
  .filter-menu--picker:has(.picker--cal) {
    min-width: 0 !important;
  }
  .filter-menu--picker .picker__foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }
  .picker--cal .picker__body--row {
    flex-direction: column !important;
    gap: .75rem !important;
    padding: .75rem !important;
  }
  .picker--cal .picker__presets {
    flex-direction: row !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-border);
    padding: 0 0 .65rem !important;
  }
  .picker--cal .picker__preset {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .picker--cal .picker__cal-wrap {
    min-width: 0 !important;
  }
  .picker--cal .cal__nav {
    gap: .35rem !important;
  }
  .picker--cal .cal__summary {
    min-width: 0;
    font-size: .74rem !important;
    gap: .35rem !important;
  }
  .picker--cal .cal__months {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .picker--cal .cal__cell {
    min-height: 34px;
  }
  /* @keyframes sheet-up lives in airy.css */
}

/* ============================================================
   Settings tab rail (SettingsShell).
   Desktop: underline tabs on a hairline rule (airy.css).
   Mobile:  scrollable pill rail with fade-edge masks.
   ============================================================ */
@media (max-width: 768px) {
  .settings-tabs {
    position: relative;
    z-index: 10;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    border-bottom: 0;
    margin-top: -1.5rem;
    padding: 4px 12px 10px;
    margin-left: -12px;
    margin-right: -12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .settings-tabs::-webkit-scrollbar { display: none; }

  .settings-tabs__tab {
    flex: 0 0 auto;
    padding: 10px 14px;
    height: 44px;
    margin-bottom: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: .82rem;
    scroll-snap-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .settings-tabs__tab i { font-size: .9rem; }
  .settings-tabs__tab.is-active {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: #fff;
    font-weight: 500;
  }
  .settings-tabs__tab:not(.is-active):hover {
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
  }
  .settings-tabs__tab:active { transform: scale(.96); }

  /* Tighten the hero on mobile since the tab rail sits right below */
  .settings-hero {
    margin-bottom: 4px !important;
  }
  .settings-hero h1 {
    font-size: 1.4rem !important;
  }

  [data-theme="dark"] .settings-tabs__tab:not(.is-active) {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
  }

  /* Settings content — stack all grids to single column */
  .settings-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  .security-overview { grid-template-columns: 1fr 1fr; }
  .settings-wrapper .airy-section { padding-top: 1.25rem; }
  .settings-wrapper .airy-section__title { font-size: 1.15rem; margin-bottom: 1rem; }
  .settings-wrapper .settings-card__actions { flex-wrap: wrap; }
  .settings-wrapper .data-table { font-size: .8rem; }
  .settings-wrapper .data-table th,
  .settings-wrapper .data-table td { padding: .5rem .4rem; }
  .settings-wrapper .detail-dl { font-size: .9rem; }

  /* Preferences two-column → stack */
  .settings-wrapper [style*="grid-template-columns:1fr 1fr"],
  .settings-wrapper [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* 2FA setup grid → stack */
  .settings-wrapper [style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Key config / recovery forms — full width */
  .settings-wrapper [style*="max-width:480px"],
  .settings-wrapper [style*="max-width:540px"],
  .settings-wrapper [style*="max-width:560px"],
  .settings-wrapper [style*="max-width:640px"] {
    max-width: 100% !important;
  }

  /* Account settings command panel */
  .settings-control-panel {
    padding-top: 1.25rem !important;
    gap: 1rem !important;
  }
  .settings-control-panel__head {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }
  .settings-control-panel__meta {
    white-space: normal;
    font-size: .76rem;
  }
  .settings-control-grid,
  .settings-preference-grid {
    grid-template-columns: 1fr !important;
    gap: 1.1rem !important;
  }
  .settings-control-module + .settings-control-module {
    border-left: 0 !important;
    border-top: 1px solid var(--color-border);
    padding-left: 0 !important;
    padding-top: 1.25rem;
  }
  .settings-control-module__head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: .65rem;
  }
  .settings-control-module__head .settings-flat-row__icon {
    display: none;
  }
  .settings-provider-toggle .btn,
  .settings-segmented__option,
  .settings-card__actions .btn,
  .settings-confirm-panel__actions .btn {
    min-height: 44px;
  }
  .settings-provider-toggle,
  .settings-segmented,
  .settings-card__actions,
  .settings-confirm-panel__actions {
    gap: .5rem;
  }
  .settings-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .settings-segmented__option {
    justify-content: center;
    text-align: center;
  }
  .settings-field,
  .settings-preference-fields,
  .settings-toggle-list {
    width: 100%;
    min-width: 0;
  }
  .settings-toggle-list .mud-switch {
    min-height: 44px;
    max-width: 100%;
  }

  /* Billing toggle compact — stack below heading on mobile */
  .billing-toggle--compact { flex-wrap: nowrap; }
  .home-panel__head:has(.billing-toggle) { flex-wrap: wrap; gap: .75rem; }

  .security-command,
  .security-mode-panel,
  .security-activity-panel,
  .security-data-panel {
    gap: 1rem !important;
  }
  .security-next-step {
    grid-template-columns: 1fr;
  }
  .security-next-step .settings-flat-row__icon {
    display: none;
  }
  .security-activity-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .security-activity-module + .security-activity-module {
    border-left: 0 !important;
    border-top: 1px solid var(--color-border);
    padding-left: 0 !important;
    padding-top: 1rem;
  }
  .settings-confirm-overlay {
    align-items: end;
    padding: 0;
  }
  .settings-confirm-sheet {
    width: 100%;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .settings-confirm-sheet__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .settings-confirm-sheet__actions .btn {
    min-height: 44px;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  [data-theme="dark"] .contact-table__row { border-bottom-color: rgba(255,255,255,0.06); }
  [data-theme="dark"] .archives-table__row { border-bottom-color: rgba(255,255,255,0.06); }
  [data-theme="dark"] .search-split__viewer.is-mobile-open { background: var(--color-surface); }
}

/* ============================================================
   Top-bar menus on mobile: Notifications & Help
   Instead of small dropdowns glued under tiny icons, both open as
   full-width bottom sheets with a backdrop. Tap outside → close
   (uses existing outside-click handlers).
   ============================================================ */
@media (max-width: 768px) {
  /* Ensure the wrap button stays in place — only the panel goes fixed */
  .notif-wrap, .help-wrap { position: static !important; }

  /* ---------- Notification panel as bottom sheet ---------- */
  .notif-panel {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 82vh !important;
    margin: 0 !important;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-shadow: var(--sheet-shadow) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    z-index: 1050 !important;
    animation: sheet-up var(--duration-sheet) var(--ease-soft-out);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Drag handle (visual only) */
  .notif-panel::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--sheet-handle-color);
    margin: 8px auto 0;
    flex: 0 0 auto;
  }
  /* Backdrop: the .bottom-sheet primitive in airy.css already provides
     body::before rules for .notif-panel and .help-menu with token-driven
     --backdrop-color (auto-switches for dark theme). Nothing to duplicate. */
  .notif-panel__list {
    max-height: none !important;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .notif-panel__head {
    padding: .75rem 1rem .6rem !important;
  }
  .notif-item {
    padding: .75rem 1rem !important;
  }

  /* ---------- Help menu as bottom sheet ---------- */
  .help-menu {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 82vh !important;
    margin: 0 !important;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-shadow: var(--sheet-shadow) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    z-index: 1050 !important;
    animation: sheet-up var(--duration-sheet) var(--ease-soft-out);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .help-menu::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--sheet-handle-color);
    margin: 8px auto 0;
    flex: 0 0 auto;
  }
  .help-menu__list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .5rem !important;
  }
  .help-menu__item {
    padding: .7rem .65rem !important;
    gap: .8rem !important;
  }
  .help-menu__head { padding: .65rem 1rem .5rem !important; }
  .help-menu__foot { padding: .75rem 1rem !important; }

  /* @keyframes sheet-up + sheet-fade-in live in airy.css */
  .notif-panel, .help-menu { animation-fill-mode: both; }
}

/* ============================================================
   Dark mode mobile corrections
   ============================================================ */
@media (max-width: 768px) {
  [data-theme="dark"] .contact-table__row { border-bottom-color: rgba(255,255,255,0.06); }
  [data-theme="dark"] .archives-table__row { border-bottom-color: rgba(255,255,255,0.06); }
  [data-theme="dark"] .search-split__viewer.is-mobile-open { background: var(--color-surface); }
}

/* ============================================================
   /analytics — mobile card-stack (EVE-3461)

   The ranked contact list is a 4-column grid on desktop. At 360px
   those columns cannot all fit legibly, so each row re-lays out into
   a card: rank + name on the first line, the bar and the count on the
   second. Same data, no horizontal scroll, no 9px type.

   !important throughout because mobile.css loads last by design and
   has to beat analytics.css's desktop grid.
   ============================================================ */
@media (max-width: 768px) {
  .contact-rank__row {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto !important;
    grid-template-areas:
      "pos who   count"
      "bar bar   bar" !important;
    gap: .5rem .75rem !important;
    padding: .8rem .1rem !important;
  }
  .contact-rank__pos { grid-area: pos; }
  .contact-rank__who { grid-area: who; }
  .contact-rank__count { grid-area: count; font-size: .84rem !important; }
  .contact-rank__bar { grid-area: bar; height: .4rem !important; }
  .contact-rank__name { font-size: .88rem !important; }
  .contact-rank__email { font-size: .72rem !important; }

  /* Upgrade CTA: stack so the button gets a full-width 44px tap target. */
  .analytics-upsell {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1.1rem !important;
  }
  .analytics-upsell .btn { width: 100% !important; }

  .analytics-section__head { flex-direction: column !important; gap: .5rem !important; }
  .analytics-longest { gap: .9rem !important; }
  .analytics-longest__avatar { width: 2.75rem !important; height: 2.75rem !important; font-size: 1.15rem !important; }
}