/* ==========================================================================
   aicademi.ai — mobile app-shell styles (Round 3, 2026-04-13)
   Active only at <=820px. Zero desktop diff above that breakpoint.
   All classes prefixed m-/app-tab/chats-mobile/build-swiper/cm-/sheet-/
   settings-sheet/lp-tooltip. Drop-in layer on top of styles.css.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --tab-bar-height: 64px;
  --touch-target-min: 44px;
  --bottom-sheet-radius: 20px;
  --mobile-font-base: 16px;
  --gesture-threshold: 40px;
  --m-tabbar-h: 56px;
  --m-safe-top: env(safe-area-inset-top, 0px);
  --m-safe-bot: env(safe-area-inset-bottom, 0px);
  --m-swipe-threshold: 60px;
  --m-longpress-ms: 450;
  --m-sheet-radius: 16px;
  /* R5 — compact topbar + chat drawer tokens */
  --mtopbar-h: 48px;
  --drawer-collapsed-h: 60px;
  --drawer-half-h: 50dvh;
  --drawer-full-h: 90dvh;
  --drawer-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* R6 — social-app feel tokens */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --feed-card-h: 88px;
  --feed-thumb-size: 56px;
  --fab-size: 56px;
  --center-tab-size: 52px;
  --center-tab-lift: -8px;
  --longpress-ms: 400;
  --ptr-trigger: 48px;
  --ptr-commit: 72px;
  --ptr-max: 96px;
}
@media (max-width: 820px) {
  html, body {
    height: 100vh; height: 100dvh;
    /* R5 viewport discipline — nothing horizontal should scroll on phone. */
    overflow-x: hidden;
    max-width: 100vw;
  }
  input, textarea, select { font-size: var(--mobile-font-base); }
  * { -webkit-tap-highlight-color: transparent; }
}

/* ---------- Block 1 — Bottom tab bar (R6: 3 tabs Chats / + / Me) ---------- */
.app-tabbar { display: none; }
@media (max-width: 820px) {
  .app-tabbar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 50;
    height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
  }
  .app-tab {
    -webkit-tap-highlight-color: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: var(--touch-target-min);
    color: var(--text-muted); text-decoration: none;
    background: none; border: 0; padding: 6px 4px;
    font: 600 0.68rem/1 'Inter', sans-serif; cursor: pointer;
    position: relative; transition: color 150ms var(--ease-ios), transform 150ms var(--ease-ios);
  }
  .app-tab:active { transform: scale(0.94); }
  .app-tab[aria-selected="true"] { color: var(--purple); }
  .app-tab[aria-selected="true"]:not(.app-tab-new)::before {
    content: ""; position: absolute; top: 0; left: 22%; right: 22%;
    height: 3px; border-radius: 0 0 3px 3px; background: var(--gradient);
  }
  .app-tab-icon { stroke: currentColor; }
  .app-tab-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--purple-light); color: var(--purple);
    display: grid; place-items: center;
    font: 700 0.72rem 'Space Grotesk', sans-serif;
  }
  .app-tab:focus-visible {
    outline: 2px solid var(--purple); outline-offset: -4px; border-radius: 10px;
  }
  body.has-app-tabbar {
    padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
  }

  /* Center "+" bubble — elevated, gradient, floats above the bar. */
  .app-tab-new {
    justify-self: center;
    align-self: center;
    width: var(--center-tab-size); height: var(--center-tab-size);
    border-radius: 50%;
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 4px 12px rgba(192, 132, 252, 0.45);
    transform: translateY(var(--center-tab-lift));
    display: inline-grid; place-items: center;
    transition: transform 220ms var(--ease-ios), box-shadow 220ms var(--ease-ios);
    padding: 0;
    gap: 0;
  }
  .app-tab-new:active {
    transform: translateY(var(--center-tab-lift)) scale(0.94);
  }
  .app-tab-new[aria-selected="true"] { color: #fff; }
  .app-tab-new .app-tab-label { display: none; }
  .app-tab-new .app-tab-icon { stroke: #fff; width: 26px; height: 26px; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .app-tab { transition: none; }
  .app-tab:active { transform: none; }
  .app-tab-new { transition: none; }
  .app-tab-new:active { transform: translateY(var(--center-tab-lift)); }
}

/* ---------- Block 2 — Chats tab (mobile session list) ---------- */
@media (max-width: 820px) {
  .chats-mobile { padding: 12px 12px 20px; }
  .chats-mobile .chat-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; background: #fff;
    border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: 8px; min-height: var(--touch-target-min);
    position: relative; overflow: hidden; touch-action: pan-y;
    -webkit-touch-callout: none; user-select: none;
  }
  .chats-mobile .chat-row-title {
    flex: 1; font-weight: 600; color: var(--text); font-size: 0.95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    user-select: text;
  }
  .chats-mobile .chat-row-meta { font-size: 0.75rem; color: var(--text-muted); }
  .chats-mobile .chat-row-delete {
    position: absolute; top: 0; right: 0; bottom: 0; width: 80px;
    background: #ef4444; color: white; display: flex; align-items: center;
    justify-content: center; font-size: 0.85rem; font-weight: 600;
    transform: translateX(100%); transition: transform 200ms ease;
    border: 0;
  }
  .chats-mobile .chat-row.swiped { transform: translateX(-80px); transition: transform 200ms ease; }
  .chats-mobile .chat-row.swiped .chat-row-delete { transform: translateX(0); }
  .chats-mobile .folder-chips {
    display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .chats-mobile .folder-chips::-webkit-scrollbar { display: none; }
  .chats-mobile .folder-chip {
    flex-shrink: 0; padding: 6px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--border);
    font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
    cursor: pointer;
  }
  .chats-mobile .folder-chip[aria-pressed="true"] {
    background: var(--purple-light); color: var(--purple); border-color: var(--purple);
  }
  .chats-mobile .chats-search {
    width: 100%; padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--border); background: #fff;
    font: 500 0.9rem 'Inter', sans-serif; margin-bottom: 10px;
  }
}

/* ---------- Block 3 — Build tab 3-panel swiper ---------- */
@media (max-width: 820px) {
  .build-swiper {
    position: relative; overflow: hidden; width: 100%;
    touch-action: pan-y;
  }
  .build-track {
    display: flex; width: 300%;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
  }
  .build-track.no-anim { transition: none; }
  .build-slide {
    flex: 0 0 33.3333%; min-height: calc(100dvh - var(--tab-bar-height) - 56px);
    overflow-y: auto;
  }
  .build-swiper[data-active="guide"]   .build-track { transform: translateX(0%); }
  .build-swiper[data-active="chat"]    .build-track { transform: translateX(-33.3333%); }
  .build-swiper[data-active="preview"] .build-track { transform: translateX(-66.6666%); }
  .preview-actionbar {
    display: flex; gap: 8px; padding: 8px 10px;
    background: #fff; border-top: 1px solid var(--border);
    position: sticky; bottom: 0;
  }
  .preview-actionbar button {
    flex: 1; min-height: var(--touch-target-min);
    border: 1px solid var(--border); background: #fff;
    border-radius: 10px; font-size: 0.78rem; font-weight: 600;
    color: var(--text-muted); display: flex; align-items: center;
    justify-content: center; gap: 4px; cursor: pointer;
    -webkit-touch-callout: none; user-select: none;
  }
  .preview-actionbar button:active { background: var(--purple-light); color: var(--purple); }
}

/* ---------- Block 4 — Mobile chat composer ---------- */
@media (max-width: 820px) {
  .composer-mobile {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; background: #fff;
    border-top: 1px solid var(--border);
  }
  .composer-mobile textarea {
    flex: 1; min-height: var(--touch-target-min); max-height: 140px;
    resize: none; border: 1px solid var(--border); border-radius: 18px;
    padding: 10px 14px; font: 500 16px 'Inter', sans-serif;
  }
  .cm-chip {
    flex-shrink: 0; min-width: var(--touch-target-min); min-height: var(--touch-target-min);
    padding: 0 10px; border: 1px solid var(--border);
    border-radius: 999px; background: #fff;
    font: 600 0.72rem 'Inter', sans-serif; color: var(--text-muted);
    cursor: pointer;
    -webkit-touch-callout: none; user-select: none;
  }
  .cm-chip[aria-pressed="true"] {
    background: var(--purple-light); color: var(--purple); border-color: var(--purple);
  }
  .cm-send {
    flex-shrink: 0; min-width: var(--touch-target-min); min-height: var(--touch-target-min);
    border: 0; border-radius: 50%; background: var(--gradient); color: #fff;
    display: grid; place-items: center; cursor: pointer;
  }
  .cm-send:disabled { opacity: 0.4; cursor: not-allowed; }
}

/* ---------- Block 5 — @-mention picker sheet ---------- */
@media (max-width: 820px) {
  .sheet-mention,
  .m-mention-picker {
    position: fixed; left: 0; right: 0; bottom: 0;
    max-height: 60dvh; background: #fff;
    border-top-left-radius: var(--m-sheet-radius);
    border-top-right-radius: var(--m-sheet-radius);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
    z-index: 60; overflow-y: auto;
    padding: 12px; transform: translateY(100%);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .sheet-mention.is-open,
  .m-mention-picker.is-open { transform: translateY(0); }
  .mention-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    cursor: pointer; min-height: var(--touch-target-min);
    -webkit-touch-callout: none; user-select: none;
  }
  .mention-row:hover, .mention-row:focus, .mention-row[aria-selected="true"] {
    background: var(--purple-light);
  }
  .mention-row-title { flex: 1; font-weight: 600; color: var(--text); font-size: 0.95rem; }
  .mention-row-meta { font-size: 0.75rem; color: var(--text-muted); }
}

/* ---------- Block 6 — Share sheet ---------- */
@media (max-width: 820px) {
  .sheet-share {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top-left-radius: var(--m-sheet-radius);
    border-top-right-radius: var(--m-sheet-radius);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
    z-index: 60; padding: 16px;
    transform: translateY(100%);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .sheet-share.is-open { transform: translateY(0); }
  .sheet-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; }
  .share-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 6px; border-radius: 12px;
    border: 1px solid var(--border); background: #fff;
    font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
    cursor: pointer; min-height: var(--touch-target-min);
    -webkit-touch-callout: none; user-select: none;
  }
  .share-btn:active { background: var(--purple-light); color: var(--purple); }
  .share-link-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 999px;
    background: var(--purple-light); color: var(--purple);
    font-family: monospace; font-size: 0.82rem;
    -webkit-touch-callout: none; user-select: text;
  }
}

/* ---------- Block 7 — Settings sheet ---------- */
@media (max-width: 820px) {
  .m-sheet {
    position: fixed !important; inset: auto 0 0 0 !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: var(--m-sheet-radius) var(--m-sheet-radius) 0 0 !important;
    max-height: 90dvh !important; overflow-y: auto;
    transform: translateY(0); touch-action: pan-y;
  }
  .m-sheet::before {
    content: ""; display: block;
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--border); margin: 8px auto 10px;
  }
  .settings-sheet details {
    border-top: 1px solid var(--border); padding: 10px 0;
  }
  .settings-sheet details > summary {
    font-weight: 600; font-size: 0.95rem; cursor: pointer;
    list-style: none; padding: 8px 0; min-height: var(--touch-target-min);
    display: flex; align-items: center; justify-content: space-between;
  }
  .settings-sheet details > summary::-webkit-details-marker { display: none; }
  .settings-sheet details > summary::after {
    content: "▾"; color: var(--text-muted); transition: transform 150ms ease;
  }
  .settings-sheet details[open] > summary::after { transform: rotate(180deg); }
}

/* ---------- Block 8 — Long-press tooltip ---------- */
@media (max-width: 820px) {
  .lp-tooltip {
    position: fixed; z-index: 80;
    background: #1f2937; color: #fff;
    padding: 8px 12px; border-radius: 10px;
    font: 500 0.85rem 'Inter', sans-serif;
    max-width: 280px; pointer-events: none;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    opacity: 0; transition: opacity 150ms ease;
  }
  .lp-tooltip.visible { opacity: 1; }
  .lp-info-dot {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--purple-light); color: var(--purple);
    font: 700 0.72rem 'Inter', sans-serif;
    -webkit-touch-callout: none; user-select: none;
  }
}

/* ---------- Install banner ---------- */
@media (max-width: 820px) {
  .m-install-banner {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 12px; padding: 10px 14px;
    background: var(--purple-light); color: var(--purple);
    border-radius: 12px; font-size: 0.88rem;
  }
  .m-install-banner button {
    margin-left: auto; min-height: var(--touch-target-min);
    padding: 6px 14px; border-radius: 8px; border: 0;
    background: var(--purple); color: #fff; font-weight: 600; cursor: pointer;
  }
  .m-install-banner .m-install-dismiss {
    background: transparent; color: var(--purple);
    border: 1px solid var(--purple); margin-left: 6px;
  }
}

/* ==========================================================================
   R5 (2026-04-13) — Mobile workspace: compact topbar, overflow sheet,
   preview-first layout. All rules gated on <=820px.
   ========================================================================== */
@media (max-width: 820px) {
  /* Hide the sprawling desktop topbar; JS injects a compact .mobile-topbar. */
  .workspace-topbar { display: none !important; }

  /* Compact topbar: logo | truncated session name | ⋯ overflow */
  .mobile-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    height: calc(var(--mtopbar-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 8px 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--border);
    overflow: hidden;        /* kill any child horizontal overflow */
    max-width: 100vw;
  }
  .mobile-topbar-back,
  .mobile-topbar-more {
    width: 44px; height: 44px;
    display: inline-grid; place-items: center;
    background: transparent; border: 0;
    color: var(--text); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 10px;
  }
  .mobile-topbar-back:active,
  .mobile-topbar-more:active { background: var(--purple-light); }
  .mobile-topbar-title {
    min-width: 0;
    font: 700 1rem/1.1 'Inter', sans-serif;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
  }
  /* Push page content down so it clears the fixed topbar. */
  body.has-mobile-topbar .workspace-panels {
    padding-top: calc(var(--mtopbar-h) + env(safe-area-inset-top, 0px));
  }

  /* Overflow sheet: bottom sheet reached via the ⋯ button. */
  .overflow-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 70;
    background: #fff;
    border-top-left-radius: var(--m-sheet-radius);
    border-top-right-radius: var(--m-sheet-radius);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 220ms var(--drawer-spring);
    max-width: 100vw;
  }
  .overflow-sheet.is-open { transform: translateY(0); }
  .overflow-sheet::before {
    content: ""; display: block;
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--border); margin: 4px auto 8px;
  }
  .overflow-sheet-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 48px;
    padding: 10px 12px;
    background: transparent; border: 0; border-radius: 10px;
    color: var(--text); font: 600 0.95rem 'Inter', sans-serif;
    text-align: left; cursor: pointer;
  }
  .overflow-sheet-row:active { background: var(--purple-light); color: var(--purple); }
  .overflow-sheet-row svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .overflow-sheet-scrim {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,0.35);
    opacity: 0; pointer-events: none;
    transition: opacity 180ms ease;
  }
  .overflow-sheet-scrim.is-open { opacity: 1; pointer-events: auto; }

  /* Preview-first layout: preview fills viewport, chat becomes drag drawer. */
  .workspace-panels {
    display: block !important;    /* stack absolutely, drawer overlays */
    position: relative;
    width: 100vw;
    min-height: calc(100dvh - var(--tab-bar-height) - var(--mtopbar-h));
    max-width: 100vw;
    overflow-x: hidden;
  }
  .panel-guide { display: none !important; }   /* guide comes from overflow sheet */
  .panel-preview {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(100dvh - var(--mtopbar-h) - var(--tab-bar-height)
                 - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    width: 100vw; max-width: 100vw;
    overflow: hidden;
    background: #fff;
  }
  /* When the drawer is at half/full, taps in preview shouldn't fire buttons
     underneath — let the scrim + drawer catch them. */
  body.has-chat-drawer-half .panel-preview,
  body.has-chat-drawer-full .panel-preview { pointer-events: none; }

  /* All flex children with truncation must allow shrink. */
  .mobile-topbar > *,
  .panel-chat > *,
  .panel-preview > * { min-width: 0; }
}

/* ==========================================================================
   R6 (2026-04-13) — Social-app feel: global topbar, stacked feed,
   FAB, PTR, new-chat bottom sheet. All gated at <=820px.
   ========================================================================== */
@media (max-width: 820px) {
  /* Hide desktop topnav + dashboard-layout grid on mobile — JS paints a
     global .mobile-topbar + mobile-feed stack instead. */
  body.page-dashboard .topnav,
  body.page-admin .topnav { display: none !important; }
  body.page-dashboard .dashboard-layout {
    display: none !important;
  }
  body.page-dashboard .mobile-feed { display: block; }
  body.page-dashboard.has-mobile-topbar { padding-top: 0; }

  /* Topbar pushes ALL pages down uniformly. */
  body.has-mobile-topbar {
    padding-top: calc(var(--mtopbar-h) + env(safe-area-inset-top, 0px));
  }
  /* Avoid double padding on workspace — that rule sits on .workspace-panels. */
  body.has-mobile-topbar.page-workspace { padding-top: 0; }

  /* ---------- Stacked feed (dashboard mobile) ---------- */
  .mobile-feed {
    display: none;
    padding: 10px 12px calc(24px + var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
  }
  .mobile-feed .feed-section { margin-bottom: 16px; }
  .mobile-feed .section-header {
    font: 700 0.78rem/1 'Inter', sans-serif;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted);
    padding: 6px 2px 8px;
  }
  .mobile-feed .search-wrap {
    position: relative; margin: 4px 0 10px;
  }
  .mobile-feed .search-wrap input[type="search"] {
    width: 100%; padding: 12px 40px 12px 14px;
    border: 1px solid var(--border); border-radius: 12px;
    background: #fff;
    font: 500 16px 'Inter', sans-serif;     /* 16px: no iOS zoom */
    outline: none;
  }
  .mobile-feed .search-clear {
    display: none;
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--purple-light); color: var(--purple);
    border: 0; cursor: pointer;
    font-size: 1rem;
  }
  .mobile-feed .search-wrap.has-value .search-clear { display: grid; place-items: center; }

  .mobile-feed .feed-card,
  .mobile-feed .feed-card-chat,
  .mobile-feed .feed-card-guide,
  .mobile-feed .feed-card-folder {
    display: flex; align-items: center; gap: 12px;
    min-height: var(--feed-card-h);
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    text-decoration: none; cursor: pointer;
    transition: background 120ms var(--ease-ios), transform 120ms var(--ease-ios);
    position: relative;
  }
  .mobile-feed .feed-card:not(:last-child) { margin-bottom: 8px; }
  .mobile-feed .feed-card:active {
    transform: scale(0.985);
    background: var(--purple-light);
  }
  .mobile-feed .feed-card-thumb {
    width: var(--feed-thumb-size); height: var(--feed-thumb-size);
    border-radius: 12px;
    background: var(--purple-light);
    display: inline-grid; place-items: center;
    color: var(--purple);
    font: 700 1.4rem 'Space Grotesk', sans-serif;
    flex: 0 0 auto;
  }
  .mobile-feed .feed-card-body {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .mobile-feed .feed-card-title {
    font: 700 0.98rem 'Inter', sans-serif;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mobile-feed .feed-card-meta {
    font: 500 0.82rem 'Inter', sans-serif;
    color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Hairline inset divider between chat rows only */
  .mobile-feed .feed-card-chat + .feed-card-chat {
    border-top-left-radius: 0; border-top-right-radius: 0;
    margin-top: -1px;
  }
  /* Featured guide: 104px stacked vertical — a bit taller than chat rows. */
  .mobile-feed .feed-card-guide {
    min-height: 104px;
    background: #fff;
    border-left: 4px solid var(--purple);
  }
  .mobile-feed .feed-card-guide .feed-card-thumb {
    background: #fef3c7; color: #d97706;
  }
  .mobile-feed .feed-card-folder .feed-card-thumb {
    background: transparent;
  }
  .mobile-feed .feed-card-folder .folder-dot-lg {
    width: 14px; height: 14px; border-radius: 50%;
  }
  .mobile-feed .feed-card.is-active {
    border-color: var(--purple);
    background: var(--purple-light);
  }
  .mobile-feed .feed-card-checkbox {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--border);
    flex: 0 0 auto;
    display: none; place-items: center;
    background: #fff; color: #fff;
  }
  body.mobile-feed-selecting .mobile-feed .feed-card-checkbox {
    display: inline-grid;
  }
  .mobile-feed .feed-card.is-selected .feed-card-checkbox {
    background: var(--purple); border-color: var(--purple);
  }

  /* ---------- Pull-to-refresh (Chats only) ---------- */
  .ptr-spinner {
    position: absolute; left: 0; right: 0; top: 0;
    height: 0; overflow: hidden;
    display: grid; place-items: center;
    color: var(--purple);
    pointer-events: none;
    transition: height 180ms var(--ease-ios);
  }
  .ptr-spinner.is-pulling { transition: none; }
  .ptr-spinner.is-refreshing { height: 56px; }
  .ptr-spinner svg {
    width: 22px; height: 22px;
    animation: ptr-spin 900ms linear infinite;
  }
  @keyframes ptr-spin { to { transform: rotate(360deg); } }
  .mobile-feed.is-ptr-ready .ptr-spinner svg {
    /* ready-to-commit visual: snap rotate */
  }

  /* ---------- Chat FAB (show-chat button when drawer hidden) ---------- */
  .chat-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px) + 16px);
    width: var(--fab-size); height: var(--fab-size);
    z-index: 43;                   /* stays below topbar (z=45) */
    border: 0; border-radius: 50%;
    background: var(--gradient);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.38);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
    transition: opacity 220ms var(--ease-ios), transform 220ms var(--ease-ios);
  }
  .chat-fab svg { width: 24px; height: 24px; stroke: #fff; }
  body.has-chat-drawer-hidden .chat-fab {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  .chat-fab:active {
    animation: chat-fab-bounce 300ms var(--ease-ios);
  }
  @keyframes chat-fab-bounce {
    0%   { transform: scale(1); }
    33%  { transform: scale(0.9); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }

  /* ---------- New-chat bottom sheet (center tab) ---------- */
  .newchat-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 66;
    background: #fff;
    border-top-left-radius: var(--m-sheet-radius);
    border-top-right-radius: var(--m-sheet-radius);
    box-shadow: 0 -14px 40px rgba(0,0,0,0.2);
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 260ms var(--ease-ios);
    max-width: 100vw;
  }
  .newchat-sheet.is-open { transform: translateY(0); }
  .newchat-sheet::before {
    content: "";
    display: block; width: 40px; height: 4px; border-radius: 2px;
    background: var(--border); margin: 4px auto 10px;
  }
  .newchat-sheet h3 {
    font: 700 1rem 'Inter', sans-serif;
    color: var(--text); margin: 4px 4px 10px;
  }
  .newchat-sheet-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 12px 14px; margin-bottom: 8px;
    background: #fff;
    border: 1px solid var(--border); border-radius: 14px;
    color: var(--text);
    font: 600 0.95rem 'Inter', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background 120ms var(--ease-ios), transform 120ms var(--ease-ios);
  }
  .newchat-sheet-row:active {
    transform: scale(0.985);
    background: var(--purple-light);
  }
  .newchat-sheet-row .newchat-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-grid; place-items: center;
    background: var(--purple-light); color: var(--purple);
    font-size: 1.4rem; flex: 0 0 auto;
  }
  .newchat-sheet-row .newchat-meta {
    display: block;
    font: 500 0.82rem/1.3 'Inter', sans-serif;
    color: var(--text-muted);
    margin-top: 2px;
  }

  .newchat-scrim {
    position: fixed; inset: 0; z-index: 64;
    background: rgba(0,0,0,0.35);
    opacity: 0; pointer-events: none;
    transition: opacity 180ms ease;
  }
  .newchat-scrim.is-open { opacity: 1; pointer-events: auto; }

  /* ---------- R6 topbar refinements — close button in overflow, search icon ---------- */
  .mobile-topbar-search {
    width: 44px; height: 44px;
    display: inline-grid; place-items: center;
    background: transparent; border: 0;
    color: var(--text); cursor: pointer;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-topbar-search:active { background: var(--purple-light); }
  /* R6.1: icon swap between magnifier (closed) and ✕ (open) */
  .mobile-topbar-search .m-search-icon-close { display: none; }
  body.is-search-open .mobile-topbar-search .m-search-icon-open { display: none; }
  body.is-search-open .mobile-topbar-search .m-search-icon-close { display: inline; }
  body.is-search-open .mobile-topbar-search { color: var(--purple); }
  .mobile-topbar-grid-right {
    display: inline-flex; align-items: center; gap: 2px;
    justify-content: flex-end;
  }

  /* Long-press toast affordance on chat row */
  .mobile-feed .feed-card.is-longpress-glow {
    box-shadow: 0 0 0 3px rgba(124,58,237,0.25) inset;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .chat-fab { transition: none; animation: none; }
  .chat-fab:active { animation: none; }
  .newchat-sheet { transition: none; }
  .mobile-feed .feed-card { transition: none; }
  .mobile-feed .feed-card:active { transform: none; }
}

/* ---------- Mention chip rendered inside chat bubbles ---------- */
.mention-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px;
  background: var(--purple-light); color: var(--purple);
  font-size: 0.9em; font-weight: 600;
  -webkit-touch-callout: none; user-select: none;
  text-decoration: none;
}
.mention-chip:hover { text-decoration: underline; }

/* ==========================================================================
   R6.2 (2026-04-13) — Desktop safety net.
   Mobile-only classes must NEVER render on desktop. Individual rules inside
   @media (max-width: 820px) provide styling on mobile; this block guarantees
   the classes are hidden above 820px regardless of whether any leaked rule
   forgot its @media wrapper. Belt-and-suspenders against R6 regressions
   where mobile-only markup (HTML + JS-injected) bled into desktop.
   ========================================================================== */
@media (min-width: 821px) {
  .app-tabbar,
  .app-tab-new,
  .mobile-topbar,
  .mobile-topbar-global,
  .chat-fab,
  .mobile-feed,
  .chat-drawer,
  .composer-r4,
  .overflow-sheet,
  .overflow-sheet-scrim,
  .newchat-sheet,
  .newchat-scrim,
  .search-wrap,
  .feed-card,
  .feed-section,
  .feed-section-header,
  .cr4-auto-chip,
  .drawer-auto-chip,
  .ptr-spinner,
  .lp-tooltip {
    display: none !important;
  }
}

/* R8 — mobile help icon in topbar */
.mobile-topbar-help {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background 140ms cubic-bezier(.22, .61, .36, 1), transform 120ms cubic-bezier(.22, .61, .36, 1);
}
.mobile-topbar-help:hover,
.mobile-topbar-help:focus-visible { background: rgba(45,212,191,0.15); color: var(--teal, #2dd4bf); }
.mobile-topbar-help:active { transform: scale(0.96); }