/* ===== Actyve responsive: phone <=700px, tablet 701-1100px ===== */
.tabbar, .nav-quick { display: none; }
.tab-badge { position: absolute; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E53E3E; color: #fff; font-size: 10px; font-weight: 700; align-items: center; justify-content: center; }

/* ---------- TABLET (701-1100): keep the top nav, tighten it ---------- */
@media (min-width: 701px) and (max-width: 1100px) {
  .nav { padding: 0 28px; height: 68px; gap: 20px; }
  .nav-logo { font-size: 21px; }
  .nav-links { display: flex !important; gap: 22px; font-size: 15px; }
  .nav-actions { display: flex !important; }
  .nav-actions .btn { height: 42px !important; padding: 0 20px; font-size: 15px !important; }
  .nav-hamburger, .mobile-nav { display: none !important; }
  .auth-card { max-width: 440px; padding: 40px; }
  .auth-heading h1 { font-size: 36px; letter-spacing: -1.5px; }
}

/* ---------- TABLET portrait (701-860) ---------- */
@media (min-width: 701px) and (max-width: 860px) {
  .feed-wrap { padding: 0 28px 28px !important; gap: 0 !important; }
  .feed-sidebar { flex-direction: row !important; flex-wrap: wrap !important; overflow: visible !important; margin: 0 !important; padding: 16px 0 !important; gap: 8px !important; }
  .feed-sidebar #cat-pills { display: contents !important; }
  .feed-sidebar-label { display: none !important; }
  .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  .activity-card { aspect-ratio: 4 / 4.6; }
  .activity-card-title { font-size: 24px; letter-spacing: -.9px; }
  #activities-grid[style] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* chat: list on the left, conversation on the right */
  .matches-wrap { flex-direction: row !important; height: calc(100dvh - 68px) !important; position: static !important; }
  .matches-list { display: flex !important; width: 280px !important; flex: none; max-height: none !important; border-right: 1px solid var(--border) !important; border-bottom: 0 !important; }
  .matches-list-header { padding: 24px 20px 12px; font-size: 26px; letter-spacing: -1px; }
  .chat-wrap { display: flex !important; position: static !important; flex: 1; min-height: 0 !important; }
  .chat-back { display: none !important; }
  .chat-header { padding: 0 22px !important; }
  .chat-body { padding: 22px; }
  .chat-bubble { max-width: 82%; }
  .plan-card-map { height: 110px; }
}

/* ---------- PHONE (<=700) ---------- */
@media (max-width: 700px) {
  /* top bar */
  .nav { height: calc(64px + env(safe-area-inset-top)) !important; padding: env(safe-area-inset-top) 16px 0 !important; gap: 10px !important; }
  .nav-links, .nav-hamburger, .mobile-nav { display: none !important; }
  .nav-logo { flex: 1; font-size: 20px; }
  .nav-quick { display: flex; gap: 6px; }
  .nav-quick a { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text); }
  .nav-quick .tab-badge { top: -2px; right: -2px; }
  .nav-actions { display: flex !important; }
  .nav-actions .btn { height: 40px !important; padding: 0 16px !important; font-size: 0 !important; }
  .nav-actions .btn::after { content: "+ Post"; font-size: 14px; font-weight: 700; }

  /* bottom tab bar */
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: flex; gap: 4px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); height: calc(72px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border); }
  .tabbar a { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 16px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
  .tabbar a .ti { font-size: 18px; line-height: 1; }
  .tabbar a.active { background: var(--violet-light); color: var(--violet); font-weight: 700; }
  .tabbar .tab-badge { top: 6px; left: calc(50% + 6px); }
  body:has(.tabbar) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  [style*="padding:40px 48px"] { padding-bottom: 24px !important; }

  /* feed: one column, one scrolling pill row */
  .feed-wrap { padding: 0 0 24px !important; gap: 0 !important; }
  .feed-sidebar { position: static !important; width: 100% !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; margin: 0 !important; padding: 12px 16px !important; gap: 8px !important; scrollbar-width: none; }
  .feed-sidebar::-webkit-scrollbar { display: none; }
  .feed-sidebar > *, .feed-sidebar #cat-pills > * { flex: none !important; white-space: nowrap; }
  .feed-sidebar #cat-pills { display: contents !important; }
  .feed-sidebar-label { display: none !important; }
  #feed-skeleton, #feed-content { padding: 0 16px; }
  #feed-content > div:has(> h1) { display: none !important; }
  .feed-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .activity-card { aspect-ratio: 4 / 3.4 !important; }
  .activity-card:hover { transform: none; }
  .activity-card-title { font-size: 22px; letter-spacing: -.8px; }
  .activity-card-meta { font-size: 13px; }
  .activity-card-emoji, .activity-card-bookmark { width: 40px; height: 40px; top: 12px; }
  .activity-card-emoji { left: 12px; }
  .activity-card-bookmark { right: 12px; }
  .activity-card-badge { left: 60px; top: 20px; }

  /* login */
  .auth-wrap, .verify-wrap { background: linear-gradient(to bottom, #EEE6FA 0%, #fff 45%); padding: 20px; }
  .auth-card { padding: 28px 22px; border-radius: 28px; gap: 20px; }
  .auth-logo { font-size: 20px; }
  .auth-heading h1 { font-size: 32px; letter-spacing: -1.3px; }
  .auth-heading p { font-size: 15px; }

  /* profile: same order as the design */
  .profile-wrap { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 16px 16px 24px !important; }
  .profile-sidebar, .profile-main { display: contents !important; }
  #profile-card { order: 1; }
  #passport-section { order: 2; }
  .profile-main > div:nth-child(1) { order: 3; }
  #kudos-section { order: 4; }
  #partners-section { order: 5; }
  #trust-section { order: 6; }
  .profile-main > div:nth-child(2) { order: 7; }
  .profile-main h2 { font-size: 20px !important; letter-spacing: -.7px !important; }
  .menu-item { height: 54px; }

  /* matches: list, then a full-screen chat */
  .matches-wrap { position: relative; flex-direction: column; height: calc(100dvh - 64px - env(safe-area-inset-top) - 72px - env(safe-area-inset-bottom)) !important; }
  .matches-wrap.chat-open { position: fixed !important; inset: 0; height: 100dvh !important; z-index: 120; background: #fff; }
  body:has(.matches-wrap.chat-open) .nav, body:has(.matches-wrap.chat-open) .tabbar { display: none !important; }
  .matches-list-header { padding: 16px 16px 6px; font-size: 30px; letter-spacing: -1.2px; border-bottom: 0; }
  .chat-header { height: auto !important; min-height: 68px; padding: 10px 14px !important; flex-wrap: wrap !important; gap: 8px 12px !important; }
  .chat-back { order: 1; }
  .chat-header > .match-avatar { order: 2; }
  .chat-header > div[style*="flex:1"] { order: 3; }
  .chat-header::after { content: ""; flex-basis: 100%; height: 0; order: 4; }
  .chat-header > .btn, .chat-header > .match-expiry { order: 5; flex: none; }
  .chat-header button[onclick*="proposePlan"] { display: none !important; }
  .chat-bubble { max-width: 80%; }
  .plan-card-map { height: 96px; }
  .chat-footer { padding: 10px 14px calc(14px + env(safe-area-inset-bottom)) !important; gap: 8px; }
  .chat-input, .chat-send { height: 46px; }
  .chat-send { width: 46px; }
  .chat-footer .btn { height: 46px !important; padding: 0 14px !important; font-size: 13px !important; }

  /* map and group chat sit between the bars */
  [style*="height:calc(100vh - 72px)"] { height: calc(100dvh - 64px - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
  body.no-tabs .nav, body.no-tabs .tabbar { display: none !important; }
  body.no-tabs [style*="height:calc(100vh - 100px)"] { height: 100dvh !important; }

  /* support button: small round icon above the tab bar */
  .support-fab { width: 48px !important; height: 48px !important; padding: 0 !important; font-size: 0 !important; display: flex !important; align-items: center; justify-content: center; right: 14px !important; bottom: calc(72px + 14px + env(safe-area-inset-bottom)) !important; }
  .support-fab::before { content: "💬"; font-size: 22px; }
  body:has(.matches-wrap.chat-open) .support-fab, body.no-tabs .support-fab { display: none !important; }
}