/* =============================================================
   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 touch targets ----------
   Keep icons and type at their existing optical size while the interactive
   border boxes meet Evermail's 44 × 44px product floor. */
@media (max-width: 768px) {
  .icon-btn,
  .icon-btn--sm,
  .nav__theme,
  .nav__mobile-toggle,
  .search-bar__clear,
  .search-bar__cta,
  .pager {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* The input grows inside the existing pill instead of making the whole
     search surface taller: its previous vertical padding becomes hit area. */
  form.search-bar {
    min-height: 46px;
    padding-block: 0 !important;
  }

  .search-bar input,
  .perpage__btn,
  .rescue-stage > .mud-button-root,
  .rescue-actions .mud-button-root,
  .rescue-back.mud-button-root,
  .upload-export-guide__toggle.mud-button-root,
  .upload-export-guide__tab.mud-button-root,
  .provider-connect-card__action .mud-button-root,
  .provider-connect-alt .mud-button-root {
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* ---------- 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;
  }

  .mobile-tab:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: -4px;
    border-radius: 12px;
  }

  .mobile-tab--logout {
    min-width: 44px;
    min-height: 44px;
    color: var(--color-danger);
    font: inherit;
  }

  .mobile-tab--logout:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
  }

  /* ----- 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;
  }

  /* Archive detail has its own variable-height identity block. The earlier
     Airy override loaded before app.css, so app.css's .home-wrapper padding
     and gap silently won the cascade and long filename + status combinations
     could push the primary action under the fixed tab bar. Keep this rule in
     the last-loaded mobile sheet and compact spacing, never content. */
  .home-wrapper.mailbox-detail-wrapper {
    padding-top: .25rem;
    gap: .75rem;
  }
  .mailbox-detail-wrapper > .btn-ghost {
    margin-bottom: 0 !important;
  }
  .mailbox-detail-wrapper .ad-hero {
    gap: 1.25rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
  }
  .mailbox-detail-wrapper .ad-command-strip {
    gap: .75rem;
    padding: .5rem 0 1rem;
  }
  .mailbox-detail-wrapper .ad-command-strip__actions {
    flex-wrap: nowrap;
    gap: .4rem;
  }
  .mailbox-detail-wrapper .ad-command-strip__actions .btn-primary {
    min-height: 44px;
    padding-inline: .875rem;
    white-space: nowrap;
  }

  /* EVE-5239: the identity block's height must be bounded by the layout, not by
     the data. On production an archive whose display name wrapped to four lines,
     whose source filename wrapped to two, and whose .mbox chip and status pill
     each claimed their own row landed the Search emails CTA 30.84px under the
     fixed tab bar at 360x800. Cap both text rows so any name length wraps the
     same way; the full name stays available via the title tooltip and the
     rename dialog. */
  .mailbox-detail-wrapper .ad-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .mailbox-detail-wrapper .ad-source-filename {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* EVE-5239: on phone-width screens the three hero facts move out of the initial
   viewport entirely — Messages/Processed and Uploaded are restated with more
   detail in the Statistics and Timeline stream directly below the primary
   action, and a ~130px facts stack is exactly the kind of unbounded content
   that pushed the CTA under the tab bar on sub-800px-tall devices. */
@media (max-width: 480px) {
  .mailbox-detail-wrapper .ad-hero__facts {
    display: none;
  }
}

/* ============================================================
   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;
  }
  /* The nested flex item owns truncation. Keeping the remove glyph and filter
     icon inflexible prevents either control from disappearing for long values. */
  .filter-chips .chip.active.chip--archive::before,
  .filter-chips .chip.active.chip--archive > i {
    flex: 0 0 auto;
  }
  .filter-chips .chip.active.chip--archive > .filter-chip__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .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 {
    /* Keep the results document's height so its captured scroll offset remains
       restorable after the fixed detail overlay closes. */
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:has(.email-viewer.is-mobile-open) .mobile-tabbar {
    visibility: hidden !important;
    pointer-events: 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; }

  /* Settings integrations: keep the empty-state story and action readable
     when the phone viewport cannot accommodate the desktop row. */
  .settings-integrations-wrapper {
    animation: none !important;
    transform: none !important;
  }
  .settings-connections-empty {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1rem;
  }
  .settings-connections-empty__icon { align-self: flex-start; }
  .settings-connections-empty > div {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
  }
  .settings-connections-empty p {
    max-width: 65ch;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .settings-connections-empty > .mud-button-root {
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    isolation: isolate;
  }
  .settings-connections-empty > .mud-button-root .mud-button-label {
    position: relative;
    z-index: 1;
  }
  :root[data-theme='dark'] .settings-connections-empty > .mud-button-root {
    background: var(--color-brand-primary) !important;
    color: var(--color-on-primary) !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;
  }
}

/* Upload hero metrics: once the copy can no longer stay on one line, switch
   from desktop capsules to compact, centred blocks with an explicit
   value-over-label hierarchy. */
@media (max-width: 420px) {
  .upload-hero--airy .upload-hero__meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    flex-wrap: nowrap !important;
    gap: .65rem !important;
  }

  .upload-hero--airy .upload-hero__meta .airy-metric {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .25rem;
    width: 100% !important;
    padding: .75rem 1rem !important;
    border-radius: 18px !important;
    text-align: center !important;
  }

  .upload-hero--airy .upload-hero__meta .airy-metric__value {
    display: block !important;
    line-height: 1.4;
    text-wrap: balance;
  }

  .upload-hero--airy .upload-hero__meta .airy-metric--wide .airy-metric__value {
    font-size: .82rem !important;
  }

  .upload-hero--airy .upload-hero__meta .airy-metric__label {
    display: block !important;
    line-height: 1.2;
  }
}

/* ============================================================
   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) {
  /* Search rows are intentionally variable-height. Keeping the completed page
     entrance transform on their document scroller can strand painted layers
     after a wheel scroll, so release that compositor layer on mobile. */
  .home-wrapper.emails-wrapper {
    animation: none !important;
  }

  /* 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: var(--color-on-primary);
    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;
  }
  .data-export-row__actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .data-export-row__download {
    min-height: 44px;
  }
  .data-export-history__message {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .data-export-history__message .mud-button-root {
    min-height: 44px;
  }
  .data-export-pager {
    justify-content: space-between;
  }
  .data-export-pager .mud-button-root {
    min-height: 44px;
  }
  .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; }
}
/* EVE-5631: MudTable's Xs layout keeps every plan value and action inside the
   clipped settings shell. Actions become full-width 44px tap targets. */
@media (max-width: 599.98px) {
  .settings-wrapper .billing-plans {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .settings-wrapper .billing-plans .mud-table-container {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .settings-wrapper .billing-plans.mud-xs-table .mud-table-row {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .settings-wrapper .billing-plans.mud-xs-table .mud-table-cell {
    width: 100%;
    min-width: 0;
    padding: .375rem 0;
    border: 0;
    font-size: .9rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* The anywhere wrap above is what let "€1490/yr" break after "€149" and
     momentarily read as €149 (EVE-5839). Glue the amount and its period; the
     /mo or incl-seats detail line below it still wraps freely. */
  .settings-wrapper .billing-plans.mud-xs-table .billing-plans__price > span {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Gluing the amount alone was not enough (EVE-5816). MudBlazor's phone layout
     turns the cell into a single flex row, so the helper line sat beside the
     amount and squeezed "€1490/yr" until it painted over "incl 5 users...".
     The desktop cell stacks them because .billing-plans__detail is a block;
     give it its own flex line here so both widths read the same way. */
  .settings-wrapper .billing-plans.mud-xs-table .billing-plans__price {
    flex-wrap: wrap;
  }

  .settings-wrapper .billing-plans.mud-xs-table .billing-plans__price .billing-plans__detail {
    flex: 1 0 100%;
  }

  .settings-wrapper .billing-plans.mud-xs-table .mud-table-cell::before {
    flex: 0 0 40%;
    min-width: 0;
    padding-right: 1rem;
    color: var(--color-text-secondary);
    text-align: left;
  }

  .settings-wrapper .billing-plans.mud-xs-table .mud-table-cell > :not(.mud-button-root) {
    min-width: 0;
    text-align: right;
  }

  .settings-wrapper .billing-plans.mud-xs-table .billing-plans__name {
    display: block;
    padding-bottom: .75rem;
    font-size: 1rem;
    text-align: left !important;
  }

  .settings-wrapper .billing-plans.mud-xs-table .billing-plans__name::before,
  .settings-wrapper .billing-plans.mud-xs-table .billing-plans__action::before {
    display: none;
  }

  .settings-wrapper .billing-plans.mud-xs-table .billing-plans__action {
    display: flex;
    align-items: stretch;
    padding-top: .75rem;
    text-align: left;
  }

  .settings-wrapper .billing-plans.mud-xs-table .billing-plans__action:empty {
    display: none !important;
    padding: 0;
  }

  .settings-wrapper .billing-plan-action.mud-button-root,
  .settings-wrapper .billing-current-plan,
  .settings-wrapper .billing-enterprise-action.mud-button-root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    white-space: normal;
  }

  .settings-wrapper .billing-plans__storage-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 44px;
    min-height: 44px;
  }

  .settings-wrapper .billing-action.mud-button-root,
  .settings-wrapper .billing-icon-action.mud-icon-button,
  .settings-wrapper .billing-toggle .mud-toggle-item {
    min-width: 44px;
    min-height: 44px;
  }

  .settings-wrapper .billing-promo-row {
    align-items: center;
  }

  .settings-wrapper .billing-empty {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 0;
  }
}