/* Mobile Calm Mode: simplify visual density while keeping key actions obvious */
@media (max-width: 640px) {
  body {
    background: #f8fafc;
    line-height: 1.4;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .max-w-7xl,
  .max-w-6xl,
  .max-w-4xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .bg-white.border,
  .bg-white.rounded-lg.border,
  .bg-white.rounded-xl.border,
  .bg-white.rounded-2xl.border {
    box-shadow: none !important;
    border-color: #e5e7eb !important;
  }

  .rounded-lg,
  .rounded-xl,
  .rounded-2xl {
    border-radius: 12px !important;
  }

  h1 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
  }

  h2 {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 0.98rem !important;
  }

  main,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-4xl {
    margin-top: 0 !important;
  }

  .space-y-6 > * + * {
    margin-top: 0.875rem !important;
  }

  .mb-8 {
    margin-bottom: 1rem !important;
  }

  .mb-6 {
    margin-bottom: 0.875rem !important;
  }

  .p-6 {
    padding: 0.9rem !important;
  }

  .p-4 {
    padding: 0.75rem !important;
  }

  .mobile-secondary,
  .mobile-detail {
    display: none !important;
  }

  .notification-tab {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    font-size: 0.8rem !important;
  }

  #notifications-container .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: #eef2f7 !important;
  }

  .mobile-unread-soft {
    background: #f8fafc !important;
  }

  .notification-item-icon > div {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }

  .notification-item-icon svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
  }

  .mobile-bottom-nav .bottom-nav-link {
    font-size: 0.72rem;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .mobile-bottom-nav {
    bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
  }

  .mobile-thumb-zone {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-primary-action,
  #mark-all-read,
  #toggle-filters-btn,
  #new-thread-btn,
  .notification-tab,
  .filter-tab,
  #people-clear-filters {
    min-height: 42px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Premium-feel micro interactions on touch */
  a,
  button,
  [role="button"],
  .bottom-nav-link,
  .notification-tab,
  .filter-tab,
  .mobile-primary-action {
    transition: background-color 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 160ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  a:active,
  button:active,
  [role="button"]:active,
  .bottom-nav-link:active,
  .notification-tab:active,
  .filter-tab:active,
  .mobile-primary-action:active {
    transform: scale(0.985);
  }

  .bottom-nav-link {
    letter-spacing: 0.01em;
  }

  .bottom-nav-link:active,
  .notification-tab:active,
  .filter-tab:active {
    background-color: #f3f4f6 !important;
  }

  button:focus-visible,
  a:focus-visible,
  [role="button"]:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}