/* Oracle OS — mobile KAIVERSE fullscreen + touch controls
   MOBILE PASS 2026-07-09 (backup: oracle-kv-mobile.css.bak-mobilepass-20260709):
   - FULLSCREEN FIX: #kv-fs-enter/#kv-fs-exit sit inside #kv-touch-ctrl which is
     pointer-events:none — they NEVER set pointer-events:auto, so the fullscreen
     buttons were untappable. That was "fullscreen is bugged".
   - 100vh → 100dvh (controls no longer hide under the browser URL bar).
   - Landscape phones: every mobile block now also matches (max-height:520px) —
     a sideways phone is >900px wide, so width-only tests dropped the controls.
   - LEFT move stick + JUMP + HUD eye-toggle styles; body.kv-hud-hidden hides the
     HUD (default on phone) so the KAIVERSE itself is visible. */
@media(max-width:900px){
  .topbar{display:none !important}
  .m-appbar .m-ab-btn{min-width:40px;min-height:40px}
  .m-tabbar{padding-bottom:env(safe-area-inset-bottom,0px)}
}
/* View Mode: forcing "Mobile" mirrors the width-gated chrome above regardless of
   actual viewport width (paired with the viewport-meta swap in oracle.html). "Auto"
   adds no class, so default responsive behavior is unchanged. (2026-07-10) */
body.force-mobile .topbar{display:none !important}
body.force-mobile .m-appbar .m-ab-btn{min-width:40px;min-height:40px}
body.force-mobile .m-tabbar{padding-bottom:env(safe-area-inset-bottom,0px)}
body.kv-fullscreen .topbar,
body.kv-fullscreen .m-appbar,
body.kv-fullscreen .rail,
body.kv-fullscreen .tab-strip,
body.kv-fullscreen .col-left,
body.kv-fullscreen .col-right,
body.kv-fullscreen .m-tabbar{display:none !important}
body.kv-fullscreen .shell{padding:0 !important;margin:0 !important}
body.kv-fullscreen .col-center{padding:0 !important;margin:0 !important;flex:1;min-height:0}
body.kv-fullscreen #ns-wrap{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:1000}
/* HUD hide list — used by BOTH fullscreen mode and the eye-toggle (kv-hud-hidden) */
body.kv-fullscreen .kv-hud,
body.kv-fullscreen .ns-errbox,
body.kv-fullscreen .ns-legend,
body.kv-fullscreen .kv-throttle,
body.kv-fullscreen .kv-compass,
body.kv-fullscreen .kv-coremark,
body.kv-fullscreen .kv-radar,
body.kv-fullscreen .ns-events-toggle,
body.kv-fullscreen .ns-edge-panel,
body.kv-fullscreen .ns-status,
body.kv-touch-live.kv-hud-hidden .kv-hud,
body.kv-touch-live.kv-hud-hidden .ns-legend,
body.kv-touch-live.kv-hud-hidden .kv-throttle,
body.kv-touch-live.kv-hud-hidden .kv-compass,
body.kv-touch-live.kv-hud-hidden .kv-coremark,
body.kv-touch-live.kv-hud-hidden .kv-radar,
body.kv-touch-live.kv-hud-hidden .ns-events-toggle,
body.kv-touch-live.kv-hud-hidden .ns-edge-panel,
body.kv-touch-live.kv-hud-hidden .ns-status{display:none !important}
@media(max-width:900px),(max-height:520px){
  body.kv-view-active:not(.kv-fullscreen) #kv-fs-enter{
    display:flex;position:fixed;top:8px;right:8px;z-index:1010;pointer-events:auto;
    padding:6px 10px;border-radius:8px;border:1px solid var(--border);
    background:rgba(9,14,24,0.85);color:var(--accent);cursor:pointer;align-items:center;gap:4px;
  }
  body.kv-view-active .m-tabbar{display:none !important}
  body.kv-view-active .m-appbar{display:none !important}
  body.kv-view-active .topbar{display:none !important}
  body.kv-view-active .shell{padding-top:0 !important}
  body.kv-view-active .col-center{padding:0 !important}
  body.kv-view-active #ns-wrap{min-height:calc(100dvh - env(safe-area-inset-bottom,0px))}
  body.kv-view-active #kv-move-zone{width:26%;height:30%;bottom:3px;left:3px}
  body.kv-view-active #kv-joy-zone{width:26%;height:30%;bottom:3px;right:3px}
}
body.kv-fullscreen #kv-fs-exit{
  display:flex;position:fixed;bottom:8px;right:8px;z-index:1010;pointer-events:auto;
  padding:5px 10px;border-radius:8px;border:1px solid var(--border);
  background:rgba(9,14,24,0.9);color:var(--text);cursor:pointer;align-items:center;gap:4px;
}
body.kv-fullscreen #kv-fs-exit{padding:3px 7px;font-size:10px;min-height:26px;bottom:4px;right:4px}
/* ── the touch layer ────────────────────────────────────────────────────────── */
#kv-touch-ctrl{position:absolute;inset:0;z-index:10;pointer-events:none;touch-action:none;display:none}
#kv-move-zone{
  position:absolute;left:0;bottom:0;width:26%;height:28%;pointer-events:auto;touch-action:none;
  display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 10px 10px;z-index:12;
}
#kv-joy-zone{
  position:absolute;right:0;bottom:0;width:26%;height:28%;pointer-events:auto;touch-action:none;
  display:flex;align-items:flex-end;justify-content:flex-end;padding:0 10px 10px 0;z-index:12;
}
.kv-zone-hint{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  font-size:8px;letter-spacing:2px;color:rgba(159,232,255,0.4);pointer-events:none;
}
#kv-move-ring,#kv-joy-ring{
  width:56px;height:56px;border-radius:50%;border:2px solid rgba(34,217,230,0.45);
  background:rgba(34,217,230,0.06);display:flex;align-items:center;justify-content:center;
  position:relative;pointer-events:none;opacity:0.45;transition:opacity 0.12s;
}
#kv-move-zone.jactive #kv-move-ring,#kv-joy-zone.jactive #kv-joy-ring{opacity:1}
#kv-move-knob,#kv-joy-knob{
  width:26px;height:26px;border-radius:50%;background:rgba(34,217,230,0.3);
  border:2px solid rgba(34,217,230,0.55);position:absolute;pointer-events:none;
}
#kv-jump-btn{
  position:absolute;right:12px;bottom:32%;pointer-events:auto;touch-action:none;z-index:12;
  padding:12px 16px;border-radius:50%;border:1.5px solid rgba(34,217,230,0.5);
  background:rgba(9,14,24,0.55);color:rgba(159,232,255,0.85);
  font-size:9px;letter-spacing:1.5px;user-select:none;-webkit-user-select:none;
}
#kv-jump-btn.pressed{background:rgba(34,217,230,0.28)}
#kv-ui-toggle{
  position:absolute;top:8px;left:8px;pointer-events:auto;z-index:14;
  padding:7px;border-radius:8px;border:1px solid var(--border);
  background:rgba(9,14,24,0.75);color:var(--accent);display:flex;align-items:center;
}
body.kv-hud-hidden #kv-ui-toggle{opacity:0.55}
/* ESCAPE HATCHES: exit-the-Kaiverse + reload, always tappable (2026-07-10) */
#kv-exit-view{
  position:absolute;top:8px;left:52px;pointer-events:auto;z-index:14;cursor:pointer;
  padding:8px 12px;border-radius:8px;border:1px solid var(--border);
  background:rgba(9,14,24,0.82);color:var(--text);display:flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:1px;user-select:none;-webkit-user-select:none;
}
#kv-reload{
  position:absolute;top:8px;left:132px;pointer-events:auto;z-index:14;cursor:pointer;
  padding:8px;border-radius:8px;border:1px solid var(--border);
  background:rgba(9,14,24,0.82);color:var(--muted);display:flex;align-items:center;
}
@media(max-height:520px){
  #kv-move-ring,#kv-joy-ring{width:46px;height:46px}
  #kv-move-knob,#kv-joy-knob{width:20px;height:20px}
  #kv-jump-btn{bottom:36%;padding:10px 13px}
}
@media(max-width:560px){
  #kv-move-ring,#kv-joy-ring{width:48px;height:48px}
}
#kv-fs-enter,#kv-fs-exit{display:none}
/* Immersive-vr touch entry — always tappable on phone KAIVERSE */
#kv-vr-touch{
  position:absolute;top:8px;right:8px;pointer-events:auto;z-index:14;cursor:pointer;
  padding:8px 12px;border-radius:8px;border:1px solid rgba(34,217,230,.45);
  background:rgba(9,14,24,0.85);color:#7ee8f5;display:flex;align-items:center;
  font-size:11px;font-weight:800;letter-spacing:1px;user-select:none;-webkit-user-select:none;
}
#kv-vr-touch.on{background:rgba(34,217,230,0.28);color:#fff}
/* kaiverse.js legacy center pill — hide when mobile module owns corner zones */
body.kv-view-active #kv-thrust,
body.kv-fullscreen #kv-thrust{display:none !important;pointer-events:none !important}
@media(max-width:900px){
  .m-tabbar .m-tab[data-view="config"]{display:none !important}
}
/* "Open channel menu" button in the transcripts empty state — phone-only
   fallback so the channel list is ALWAYS one obvious tap away (2026-07-10). */
.m-open-chan{display:none}
@media(max-width:900px),(max-height:520px){
  .m-open-chan{display:inline-flex;align-items:center;justify-content:center;
    align-self:center;flex:0 0 auto;width:auto;max-width:230px;height:auto}
}
/* ── right-side channel/DM switcher: floating # button + slide-in panel ──── */
.m-chan-fab{
  position:fixed;right:10px;bottom:96px;z-index:95;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border);background:rgba(9,14,24,0.92);color:var(--accent);
  display:none;align-items:center;justify-content:center;font-size:20px;font-weight:700;
  box-shadow:0 4px 18px rgba(0,0,0,0.5);cursor:pointer;
}
@media(min-width:901px) and (min-height:521px){ .m-chan-fab{display:none !important} }
.m-chan-switch{
  position:fixed;top:0;right:0;bottom:0;width:min(80vw,320px);z-index:130;
  background:var(--panel-2,#0a0e1a);border-left:1px solid var(--border);
  transform:translateX(100%);transition:transform 0.24s ease;
  display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);
  box-shadow:-18px 0 44px rgba(0,0,0,0.55);
}
.m-chan-switch.open{transform:translateX(0)}
.mcs-hdr{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;flex-shrink:0;
  border-bottom:1px solid var(--border);font-family:var(--ui);font-weight:700;font-size:11px;
  letter-spacing:1.5px;color:var(--muted);
}
.mcs-x{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:9px;color:var(--muted);cursor:pointer;
}
.mcs-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
/* drawer chats section collapse (Transcript Hub caret) */
#chan-rail.m-collapsed{display:none !important}
.m-nav-caret{margin-left:auto;color:var(--muted-2);font-size:11px}
/* VOICE ROOM (2026-07-10, polished): Discord-style tiles for voice channels */
.vr-room{display:flex;flex-direction:column;align-items:center;gap:20px;padding:28px 14px;height:100%;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, rgba(34,217,230,0.04), transparent 60%)}
.vr-chname{font-family:var(--ui);font-weight:800;font-size:15px;letter-spacing:0.5px;color:var(--text);opacity:0.85}
/* v9.10.239: responsive grid of SQUARE tiles (Discord-style) that fill the room */
.vr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;width:100%;max-width:680px;align-content:center}
.vr-tile{
  width:auto;aspect-ratio:1/1;border-radius:18px;border:1.5px solid var(--border);
  background:linear-gradient(160deg, color-mix(in srgb, var(--tc,#22d9e6) 9%, transparent), rgba(255,255,255,0.015) 55%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 10px 34px rgba(0,0,0,0.45);
  transition:border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.vr-tile.speaking{border-color:#3ee07f;box-shadow:0 0 0 2.5px rgba(62,224,127,0.5),0 10px 34px rgba(0,0,0,0.45);animation:vrpulse 1.2s ease-in-out infinite}
@keyframes vrpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
.vr-av{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-weight:800;font-size:30px;color:#04070d}
.vr-nm{font-family:var(--ui);font-weight:700;font-size:14px;color:var(--text)}
.vr-status{font-family:var(--mono);font-size:11px;color:var(--muted);padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:rgba(9,14,24,0.6)}
.vr-status.live{color:#3ee07f;border-color:rgba(62,224,127,0.4)}
.vr-status.muted{color:#ffb454;border-color:rgba(255,180,84,0.4)}
.vr-ctl{display:flex;gap:14px;align-items:center}
.vr-btn{
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;
  font-family:var(--ui);font-weight:800;font-size:12.5px;letter-spacing:0.5px;
  transition:transform 0.12s, filter 0.12s;
}
.vr-btn:active{transform:scale(0.94)}
.vr-joinbtn{
  padding:13px 26px;border-radius:26px;color:#04140a;
  background:linear-gradient(135deg,#3ee07f,#1fae5e);box-shadow:0 6px 22px rgba(62,224,127,0.35);
}
.vr-joinbtn:hover{filter:brightness(1.08)}
.vr-mutebtn{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.08);color:var(--text);border:1px solid var(--border)}
.vr-mutebtn.on{background:rgba(255,180,84,0.18);color:#ffb454;border-color:rgba(255,180,84,0.5)}
.vr-leave{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#f2545b,#c22f36);color:#fff;box-shadow:0 6px 18px rgba(242,84,91,0.35);transform:rotate(135deg)}
.vr-leave svg{transform:rotate(-135deg)}
.vr-note{font-size:10.5px;color:var(--muted-2);text-align:center;max-width:440px}
/* center DM view: flex column so me/them bubbles align left/right like the side
   card (the channel transcript pane isn't a flex column by default) — 2026-07-10 */
#transcript.dm-mode{display:flex;flex-direction:column;gap:10px;align-items:stretch}
#transcript.dm-mode .dm{max-width:72%}
#transcript.dm-mode .dm.me{align-self:flex-end}
#transcript.dm-mode .dm.them{align-self:flex-start}
/* reload feedback: the ⟳ spins on press so the reload is always visible even when
   the restored screen looks identical (2026-07-10). */
#m-ab-reload{position:relative;z-index:200}
.kv-spin svg{animation:kvspin 0.7s linear infinite}
@keyframes kvspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* desktop: RIGHT side panel show/hide (⟩/⟨ at the right edge) — more screen when
   you want it (2026-07-10 owner ask). */
@media(min-width:901px) and (min-height:521px){
  #rc-toggle{
    display:flex;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;
    width:20px;height:56px;align-items:center;justify-content:center;
    border:1px solid var(--border);border-right:none;border-radius:9px 0 0 9px;
    background:rgba(9,14,24,0.9);color:var(--muted);font-size:13px;cursor:pointer;
    user-select:none;
  }
  body.rc-hidden .col-right{display:none !important}
}
/* bot card: the profile block scrolls instead of pushing the tabs/panes out of
   view ("can't see the stuff under it") — 2026-07-10 owner ask. */
.bot-view .bv-config{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;flex:0 1 auto;max-height:52vh}
/* DM-MAX: on the DM tab the profile block collapses so the conversation fills
   the window (desktop card + mobile full-screen alike). 2026-07-10 owner ask. */
.bot-view.bv-dm-max .bv-config{display:none !important}
.bot-view.bv-dm-max .bv-thread,.bot-view.bv-dm-max #bv-thread{flex:1;min-height:0}
/* ── mobile composer + chat scale (2026-07-10, owner device screenshots) ────
   - composer = ONE row: [input][icon-send]; SEND is a small square icon button
     (font-size:0 hides the label, the svg is sized back up)
   - ⌄/⌃ handle collapses the composer for more reading room
   - chat text bumped so it reads at phone size */
/* composer collapse handle RETIRED 2026-07-10 (owner: the caret belongs to the
   TAB BAR, not the composer) — handle stays hidden everywhere. */
.cmd-collapse{display:none !important}
/* mobile: bottom TAB BAR show/hide caret */
#m-tab-collapse{display:none}
#rc-toggle{display:none}
@media(max-width:900px),(max-height:520px){
  #m-tab-collapse{
    /* owner 2026-07-10: caret lives on the LEFT in its own little spot */
    display:flex;position:fixed;left:6px;bottom:calc(58px + env(safe-area-inset-bottom,0px));
    z-index:96;width:30px;height:22px;align-items:center;justify-content:center;
    border:1px solid var(--border);border-radius:7px;background:rgba(9,14,24,0.85);
    color:var(--muted);font-size:12px;cursor:pointer;user-select:none;-webkit-user-select:none;
  }
  /* gray placeholder must never spill — ellipsize whatever doesn't fit */
  #cmd-input::placeholder,#bv-input::placeholder{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.m-tabbar-hidden .m-tabbar{display:none !important}
  body.m-tabbar-hidden #m-tab-collapse{bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  /* !important: the inline oracle.html stylesheet loads AFTER this file and was
     re-stacking the row + stretching the send button full-width (owner screenshot). */
  .cmd-row{display:flex !important;flex-direction:row !important;align-items:flex-end !important;gap:8px !important}
  .cmd-input-wrap{flex:1 1 auto !important;min-width:0 !important;width:auto !important}
  #cmd-input{height:44px !important;font-size:14px}
  .cmd-btns{flex:0 0 auto !important;width:auto !important;min-width:0 !important}
  #btn-exec{
    font-size:0 !important;width:46px !important;height:46px !important;
    min-width:46px !important;max-width:46px !important;padding:0 !important;
    border-radius:12px !important;flex:0 0 46px !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
  }
  #btn-exec svg{width:20px !important;height:20px !important}
  /* chat readability at phone scale */
  .transcript{font-size:13.5px}
  .dm .dm-bub{font-size:14px;line-height:1.55}
  .dm .dm-who{font-size:10px}
  /* DM view lives IN the content area (2026-07-10, owner): below the app bar,
     above the bottom tabs — no more overlaying the whole screen. */
  .bot-view{top:52px !important;bottom:calc(57px + env(safe-area-inset-bottom,0px)) !important;
    width:100vw !important;z-index:80 !important;padding-top:0 !important}
}
/* ── DISCORD-STYLE TYPING INDICATOR (2026-07-10, Discord-parity) ────────────
   Three floating dots inside a bot's DM bubble while the /api/bot-chat
   round-trip runs (center DM composer + bot-profile DM card). The bubble is
   inserted/removed by oracle.html (ids dm-typing / bv-typing). */
.dm-bub.typing-dots{display:inline-flex;align-items:center;gap:4px;min-height:16px}
.dm-bub.typing-dots .td{
  width:7px;height:7px;border-radius:50%;background:var(--muted,#8b93a7);
  animation:kvTypingBounce 1.2s infinite ease-in-out;
}
.dm-bub.typing-dots .td:nth-child(2){animation-delay:0.15s}
.dm-bub.typing-dots .td:nth-child(3){animation-delay:0.3s}
@keyframes kvTypingBounce{
  0%,60%,100%{transform:translateY(0);opacity:0.45}
  30%{transform:translateY(-5px);opacity:1}
}
/* ── MOBILE PARITY (v9.10.264): Antigravity + Web Browser views are now reachable
   from the bottom tab bar (Anti / Web tabs). The Web view is a desktop-oriented
   two-column row (reader | embedded iframe); on a phone column that squeezes the
   browser to nothing, so stack it vertically — reader on top, browser fills the
   rest — and let it scroll. Desktop layout is untouched (width/height-gated). The
   inline styles use !important because this stylesheet loads before the inline one
   and the row layout is set inline. ── */
@media(max-width:900px),(max-height:520px){
  #view-webview > div:last-child{flex-direction:column !important}
  /* BROWSER-FIRST (v9.10.280): the "Web Oracle Reader" splash (globe + title +
     the "…embedded browser is on the right" copy) ate the top half on a phone,
     cramping the actual browser. Hide the splash empty-state and collapse the
     reader pane to ZERO height while it has no answer, so the iframe fills the
     view. Tapping Ask / Go runs webAsk() (oracle.html:8195) which REPLACES the
     splash with an answer card (background card, NOT text-align:center) → the pane
     then grows to show it (capped + scrollable) and collapses again once cleared.
     The reader stays fully reachable via the URL bar's Ask / Go button. */
  #view-webview #wv-ask{
    max-width:none !important;flex:0 0 auto !important;max-height:45vh;
    border-right:none !important;border-bottom:none !important;
    box-shadow:none !important;padding:0 !important;
  }
  /* the desktop splash is the only child styled text-align:center — hide just that,
     never the injected answer card (which has no text-align:center) */
  #view-webview #wv-ask > div[style*="text-align:center"]{display:none !important}
  #view-webview #wv-ask + div{flex:1 1 auto !important;min-height:200px !important}
  /* Antigravity header controls wrap onto multiple rows instead of overflowing */
  #view-antigravity > div:first-child{padding:10px 14px !important}

  /* ── WEBVIEW MOBILE FIT (v9.10.265, updated v9.10.281) ────────────────────
     URL-bar row: the search input + "Ask / Go" button overflowed off the right
     edge (input had inline min-width:200px). Let the input shrink to 0 and keep
     the button on-screen (smaller, non-shrinking) so nothing is clipped. */
  #view-webview > div:first-child{padding:10px 12px !important;gap:8px !important}
  #view-webview #wv-url{min-width:0 !important;font-size:13px !important;padding:7px 6px !important}
  #view-webview > div:first-child > button{
    flex:0 0 auto !important;white-space:nowrap !important;
    padding:9px 14px !important;font-size:13px !important;box-shadow:none !important;
  }
  /* v9.10.281: the proxy now serves the site's MOBILE layout on mobile (Android
     Chrome UA + device-width viewport, ?mobile=1). So the old transform-scale
     shrink-a-desktop-page hack (width:260%; scale(0.3846)) is REMOVED — a real
     mobile page renders at native device width: width/height 100%, transform:none,
     no horizontal scroll, filling the browser-first area. */
  #view-webview #wv-ask + div{overflow:hidden !important;position:relative !important}
  #view-webview #wv-frame{
    position:absolute !important;top:0 !important;left:0 !important;
    width:100% !important;height:100% !important;
    transform:none !important;transform-origin:0 0 !important;border:none !important;
  }
}

/* ── WEBVIEW force-mobile mirror (v9.10.359) ──────────────────────────────────
   BUG: the block above is the ONLY mobile reflow in this stylesheet with no
   body.force-mobile twin (Antigravity has one at ~404, the guest home at ~441,
   the shell at ~497). With View Mode = Mobile on a desktop-width viewport the
   @media never matched, so the Web tab kept its DESKTOP row layout — the reader
   pane pinned at a fixed 340px on the left with the splash visible, the browser
   squeezed into whatever was left, and #wv-frame still statically positioned
   instead of filling its wrapper. That is the "not positioned correctly" report.
   This mirrors the @media rules exactly, one selector at a time.
   NOTE: deliberately NO overflow declaration anywhere in this block — setting one
   axis flips the other to auto and manufactures a stray scroll container. Margin
   and padding are longhands only. Every selector below is namespaced to the web
   view's own ids, so no feed / guest-home rule is reachable from this block. */
body.force-mobile #view-webview > div:last-child{flex-direction:column !important}
body.force-mobile #view-webview #wv-ask{
  max-width:none !important;flex:0 0 auto !important;max-height:45vh;
  border-right:none !important;border-bottom:none !important;
  box-shadow:none !important;
  padding-top:0 !important;padding-right:0 !important;
  padding-bottom:0 !important;padding-left:0 !important;
}
body.force-mobile #view-webview #wv-ask > div[style*="text-align:center"]{display:none !important}
body.force-mobile #view-webview #wv-ask + div{flex:1 1 auto !important;min-height:200px !important;position:relative !important}
body.force-mobile #view-webview > div:first-child{
  padding-top:10px !important;padding-right:12px !important;
  padding-bottom:10px !important;padding-left:12px !important;gap:8px !important;
}
body.force-mobile #view-webview #wv-url{min-width:0 !important;font-size:13px !important;padding-top:7px !important;padding-right:6px !important;padding-bottom:7px !important;padding-left:6px !important}
body.force-mobile #view-webview > div:first-child > button{
  flex:0 0 auto !important;white-space:nowrap !important;
  padding-top:9px !important;padding-right:14px !important;
  padding-bottom:9px !important;padding-left:14px !important;
  font-size:13px !important;box-shadow:none !important;
}
body.force-mobile #view-webview #wv-frame{
  position:absolute !important;top:0 !important;left:0 !important;
  width:100% !important;height:100% !important;
  transform:none !important;transform-origin:0 0 !important;border:none !important;
}

/* ══ ANTIGRAVITY (ANTI tab) — mobile chat-first reflow (2026-07-15, v9.10.275) ──
   The desktop 3-column layout (Files 250px | Viewer flex | Chat 400px) crammed
   the phone and shoved the chat/task column off the right edge — unusable.
   On phone: the CHAT/TASK pane becomes the full-width primary view; the Workspace
   Files list + Workspace Viewer collapse into a slide-in drawer (default hidden),
   toggled by the mobile-only "Files" button in the chat header. No side-by-side
   panes, no horizontal overflow. All rules gated to phone width/height + the
   force-mobile toggle, so DESKTOP is untouched. ── */
@media(max-width:900px),(max-height:520px){
  #view-antigravity{ flex-direction:column !important; position:relative !important; overflow:hidden !important; }

  /* Chat/task pane = the whole view */
  #view-antigravity #ag-chat-panel{
    width:100% !important; max-width:100% !important; flex:1 1 auto !important;
    border-left:none !important; min-height:0 !important; min-width:0 !important;
  }
  #view-antigravity #ag-chat-panel *{ min-width:0 !important; }
  #view-antigravity #ag-console{ font-size:14px !important; }
  #view-antigravity #ag-console .ag-answer{ font-size:15px !important; }

  /* Files list + Viewer become an off-canvas drawer, hidden by default */
  #view-antigravity #ag-files-panel,
  #view-antigravity #ag-file-viewer{
    position:absolute !important; left:0 !important; right:0 !important;
    width:100% !important; max-width:100% !important; z-index:60 !important;
    transform:translateX(-100%); transition:transform .25s ease;
    background:var(--panel-solid,#0f172a) !important;
    box-shadow:0 12px 40px rgba(0,0,0,.55) !important; border-right:none !important;
  }
  /* Files on top ~42% of the drawer, Viewer below it */
  #view-antigravity #ag-files-panel{ top:0 !important; height:42% !important; border-bottom:1px solid rgba(148,163,184,.2) !important; }
  #view-antigravity #ag-file-viewer{ top:42% !important; bottom:0 !important; border-left:none !important; }

  /* Slide both in when the drawer is open */
  #view-antigravity.ag-drawer-open #ag-files-panel,
  #view-antigravity.ag-drawer-open #ag-file-viewer{ transform:translateX(0); }

  /* mobile-only controls become visible on phone */
  #view-antigravity .ag-mobile-only{ display:inline-flex !important; align-items:center; }
}
/* Desktop: the mobile-only Files/close controls stay hidden (layout unchanged) */
#view-antigravity .ag-mobile-only{ display:none; }
body.force-mobile #view-antigravity{ flex-direction:column !important; position:relative !important; overflow:hidden !important; }
body.force-mobile #view-antigravity #ag-chat-panel{ width:100% !important; max-width:100% !important; flex:1 1 auto !important; border-left:none !important; min-height:0 !important; min-width:0 !important; }
body.force-mobile #view-antigravity #ag-chat-panel *{ min-width:0 !important; }
body.force-mobile #view-antigravity #ag-files-panel,
body.force-mobile #view-antigravity #ag-file-viewer{ position:absolute !important; left:0 !important; right:0 !important; width:100% !important; max-width:100% !important; z-index:60 !important; transform:translateX(-100%); transition:transform .25s ease; background:var(--panel-solid,#0f172a) !important; box-shadow:0 12px 40px rgba(0,0,0,.55) !important; border-right:none !important; }
body.force-mobile #view-antigravity #ag-files-panel{ top:0 !important; height:42% !important; border-bottom:1px solid rgba(148,163,184,.2) !important; }
body.force-mobile #view-antigravity #ag-file-viewer{ top:42% !important; bottom:0 !important; border-left:none !important; }
body.force-mobile #view-antigravity.ag-drawer-open #ag-files-panel,
body.force-mobile #view-antigravity.ag-drawer-open #ag-file-viewer{ transform:translateX(0); }
body.force-mobile #view-antigravity .ag-mobile-only{ display:inline-flex !important; align-items:center; }

/* ══ HOME FEED mobile right-size (v9.10.322) ─────────────────────────────────
   Owner: the Feed/Shorts tabs, the "What's on your mind" composer, the
   Photo/Feeling/Post buttons and the feed cards were oversized/clunky on a
   phone. Compact them to sensible mobile sizes. Gated to phone width/height +
   the force-mobile toggle so DESKTOP is untouched. This stylesheet loads BEFORE
   the inline oracle.html <style>, so !important is required to win over the
   inline base rules + per-element inline styles. ── */
@media(max-width:900px),(max-height:520px){
  /* pager tab bar + profile button */
  body.scope-guest .ghome-topbar{padding:5px 8px !important;gap:8px !important}
  body.scope-guest .ghome-tab{min-width:62px !important;padding:6px 8px !important;font-size:11px !important;min-height:0 !important}
  body.scope-guest .ghome-plan{font-size:10px !important}
  body.scope-guest .ghome-profile-btn img{width:26px !important;height:26px !important}
  /* composer: tighter box + shorter input */
  body.scope-guest .gpost-composer{padding:9px 10px !important;border-radius:12px !important;margin-bottom:10px !important}
  body.scope-guest #guest-post-text{min-height:40px !important;padding:8px 11px !important;font-size:14px !important;border-radius:12px !important}
  /* composer action row: Photo / Feeling / Post */
  body.scope-guest .gcomposer-opt{padding:6px 10px !important;font-size:12px !important;min-height:0 !important}
  body.scope-guest .gpost-composer .gc-btn[onclick*="createGuestPost"]{padding:7px 16px !important;font-size:12px !important;min-height:0 !important}
  /* feed cards + wrapper cards */
  body.scope-guest .gpost{padding:11px 12px !important;border-radius:12px !important;margin-bottom:10px !important}
  body.scope-guest .gpost-text{font-size:14px !important;line-height:1.5 !important}
  body.scope-guest .guest-card{padding:11px 12px !important;margin-bottom:10px !important}
  body.scope-guest .guest-card .gc-h{margin-bottom:8px !important}
}
/* force-mobile mirror (simulated phone on desktop) */
body.force-mobile.scope-guest .ghome-topbar{padding:5px 8px !important;gap:8px !important}
body.force-mobile.scope-guest .ghome-tab{min-width:62px !important;padding:6px 8px !important;font-size:11px !important;min-height:0 !important}
body.force-mobile.scope-guest .ghome-plan{font-size:10px !important}
body.force-mobile.scope-guest .ghome-profile-btn img{width:26px !important;height:26px !important}
body.force-mobile.scope-guest .gpost-composer{padding:9px 10px !important;border-radius:12px !important;margin-bottom:10px !important}
body.force-mobile.scope-guest #guest-post-text{min-height:40px !important;padding:8px 11px !important;font-size:14px !important;border-radius:12px !important}
body.force-mobile.scope-guest .gcomposer-opt{padding:6px 10px !important;font-size:12px !important;min-height:0 !important}
body.force-mobile.scope-guest .gpost-composer .gc-btn[onclick*="createGuestPost"]{padding:7px 16px !important;font-size:12px !important;min-height:0 !important}
body.force-mobile.scope-guest .gpost{padding:11px 12px !important;border-radius:12px !important;margin-bottom:10px !important}
body.force-mobile.scope-guest .gpost-text{font-size:14px !important;line-height:1.5 !important}
body.force-mobile.scope-guest .guest-card{padding:11px 12px !important;margin-bottom:10px !important}
body.force-mobile.scope-guest .guest-card .gc-h{margin-bottom:8px !important}

/* ══ MOBILE DM / CHAT FULL-WIDTH FIX (v9.10.334, 2026-07-17) ─────────────────
   SYMPTOM (owner, phone): the Messages → DM conversation ("DIRECT MESSAGE ::
   @KAI" header + bubbles + composer) was pinned to the RIGHT half with an empty
   dark strip on the LEFT; bubbles wrapped into skinny 1-word vertical columns.
   CAUSE: the desktop 3-column shell collapses the LEFT rail (.col-left, 288px,
   oracle.html:150) to an off-canvas drawer and gives .col-center the full width
   ONLY inside @media(max-width:900px) (oracle.html:2069/2110/2145) — a WIDTH-ONLY
   gate. A LANDSCAPE phone is >900px WIDE (this file's own note, top: "a sideways
   phone is >900px wide"), so that block never fires: .col-left + .col-right stay
   IN-FLOW, squeezing the conversation into the right sliver. The JS drawer logic
   already treats (max-height:520px) as mobile (oracle.html:3859) — the CSS just
   never matched it. FIX: mirror the column-collapse + conversation full-width for
   the SAME gates the rest of the mobile pass uses — width<=900 OR height<=520 (so
   landscape phones collapse too) PLUS a body.force-mobile mirror (the viewport
   <meta> swap is ignored by desktop browsers simulating a phone). Bubbles capped
   at ~82% so they read normally; no horizontal overflow. The channel/DM LIST is
   the existing left off-canvas drawer (opened by the bottom "Chats" tab →
   openChatsMenu / the app-bar hamburger / the # FAB) — it no longer reserves any
   horizontal space. Desktop (>900px wide AND >520px tall, no force-mobile) is
   completely untouched. Reversible: delete this block. */
@media(max-width:900px),(max-height:520px){
  /* side rails must be off-canvas so neither reserves the left/right half */
  .col-left{position:fixed !important;top:0 !important;left:0 !important;bottom:0 !important;
    width:var(--m-drawer-width, clamp(280px,85vw,360px)) !important;z-index:100 !important;
    transform:translateX(-100%);transition:transform 0.26s ease;flex:0 0 auto !important}
  .col-left.m-open{transform:translateX(0)}
  .col-right{position:fixed !important;top:0 !important;right:0 !important;bottom:0 !important;
    width:var(--m-drawer-right-width, clamp(280px,85vw,380px)) !important;z-index:100 !important;
    transform:translateX(100%);transition:transform 0.26s ease;flex:0 0 auto !important}
  .col-right.m-open{transform:translateX(0)}
  /* conversation column + everything in the Messages view fills the phone width */
  .col-center{flex:1 1 auto !important;width:100% !important;max-width:100% !important;
    min-width:0 !important;margin:0 !important;left:0 !important}
  #view-transcripts,#view-transcripts .center-hdr,#view-transcripts .ch-pane,
  #transcript,#thread-view,.cmdbar,.cmd-row{width:100% !important;max-width:100% !important;
    min-width:0 !important;margin-left:0 !important}
  #transcript{overflow-x:hidden !important}
  /* bubbles read normally (not 1-word strips); wrap long words instead of overflowing */
  #transcript.dm-mode .dm{max-width:82% !important}
  #transcript.dm-mode .dm .dm-bub{overflow-wrap:anywhere;word-break:normal}
}
/* Force-mobile mirror — desktop browsers ignore the viewport <meta> swap, so the
   media query above won't fire when simulating a phone; re-apply the same rules. */
body.force-mobile .rail{display:none !important}
body.force-mobile .col-left{position:fixed !important;top:0 !important;left:0 !important;bottom:0 !important;
  width:var(--m-drawer-width, clamp(280px,85vw,360px)) !important;z-index:100 !important;
  transform:translateX(-100%);transition:transform 0.26s ease;flex:0 0 auto !important;display:flex !important}
body.force-mobile .col-left.m-open{transform:translateX(0) !important}
body.force-mobile .col-right{position:fixed !important;top:0 !important;right:0 !important;bottom:0 !important;
  width:var(--m-drawer-right-width, clamp(280px,85vw,380px)) !important;z-index:100 !important;
  transform:translateX(100%);transition:transform 0.26s ease;flex:0 0 auto !important;display:flex !important}
body.force-mobile .col-right.m-open{transform:translateX(0) !important}
body.force-mobile .col-center{flex:1 1 auto !important;width:100% !important;max-width:100% !important;
  min-width:0 !important;margin:0 !important;left:0 !important}
body.force-mobile #view-transcripts,body.force-mobile #view-transcripts .center-hdr,
body.force-mobile #view-transcripts .ch-pane,body.force-mobile #transcript,
body.force-mobile #thread-view,body.force-mobile .cmdbar,body.force-mobile .cmd-row{
  width:100% !important;max-width:100% !important;min-width:0 !important;margin-left:0 !important}
body.force-mobile #transcript{overflow-x:hidden !important}
body.force-mobile #transcript.dm-mode .dm{max-width:82% !important}
body.force-mobile #transcript.dm-mode .dm .dm-bub{overflow-wrap:anywhere;word-break:normal}

/* ═══ v9.10.338 MOBILE SOCIAL FEED FIXES ═══════════════════════════════════
   - Feed edge-to-edge (no side padding waste)
   - Tighter tabs (Feed/Shorts/Me)
   - Tighter top bar spacing
   - Smooth scrolling
   - Star icon hidden (replaced by profile avatar)
   ════════════════════════════════════════════════════════════════════════ */

/* Edge-to-edge feed — kill side padding on mobile */
@media(max-width:900px),(max-height:520px){
  .guest-dash{padding:4px 0 60px 0 !important}
  .guest-card{border-radius:0 !important;margin-bottom:2px !important;border-left:none !important;border-right:none !important;padding:12px 12px !important}
  .gfeed-wrap{padding:0 !important;margin:0 !important;border:none !important;background:transparent !important;border-radius:0 !important}
  .gfeed-wrap>.gc-h{padding:0 12px !important;font-size:9px !important;margin-bottom:6px !important}
  .guest-dash-grid{gap:2px !important}
  .guest-col-right{display:none !important}

  /* Tighter Feed/Shorts/Me tabs */
  .ghome-tabs{margin-bottom:4px !important;padding:0 !important;gap:0 !important;background:rgba(10,14,22,.95) !important}
  .ghome-tab{padding:8px 12px !important;font-size:12px !important}
  .ghome-pager-dots{margin:2px 0 4px !important}

  /* Tighter top app bar */
  .m-appbar{padding:4px 8px !important;gap:4px !important;min-height:40px !important}
  .m-appbar .m-ab-btn{min-width:34px !important;min-height:34px !important;padding:4px !important}

  /* Smooth scroll everywhere */
  .view-pane,.col-center,#transcript,.guest-dash,.gfeed-wrap,#guest-feed-list,#guest-tab-body{
    -webkit-overflow-scrolling:touch !important;scroll-behavior:smooth !important;overscroll-behavior:contain !important}

  /* Post cards tighter — v9.10.344: was ".gpost-card" (dead selector; the real class
     is ".gpost"), so real-phone posts never went edge-to-edge. Corrected to .gpost. */
  .gpost{margin:0 0 8px !important;border-radius:0 !important;border-left:none !important;border-right:none !important}
  .gpost-body{font-size:14px !important;line-height:1.5 !important}
  .gpost-actions{padding:6px 0 !important}

  /* Composer tighter */
  .gcomposer{padding:10px 12px !important;border-radius:0 !important;margin:0 !important}
  .gcomposer textarea{min-height:44px !important;font-size:14px !important}

  /* Bottom tab bar — solid background (WebView transparency fix) + tighter */
  .m-tabbar{font-size:9px !important;gap:0 !important;background:#080c16 !important;border-top:1px solid rgba(148,163,184,.15) !important;z-index:50 !important;position:relative !important}
  .m-tab{padding:4px 2px 2px !important;font-size:9px !important;min-width:0 !important;color:#64748b !important}
  .m-tab.active{color:#22d9e6 !important}
  .m-tab svg{width:18px !important;height:18px !important}
  .m-tab .m-tab-l{color:inherit !important}

  /* Feed container — fill full width */
  .guest-dash .guest-dash-grid{max-width:100% !important;width:100% !important}
  /* v9.10.505 — MOBILE-FIT ROOT FIX: the feed column had min-width:0 ONLY under
     @media(min-width:1000px) (oracle.css:2437); the mobile twin was never shipped.
     Without it, .guest-col-main is a grid item in a `1fr` track with the default
     min-width:auto, so a post image's intrinsic width forces the track's automatic
     minimum WIDER than the viewport. The whole feed column blows past the screen;
     .gpost-img (width:100%;object-fit:contain;background:#0b0f14) is then centred in
     an over-wide box, so its content sits in the visible RIGHT while the black bg
     fills the visible LEFT ("left half black, image on the right"), and captions run
     off the right edge. SAME CLASS as the v9.10.472 chats bug (an element allowed to
     claim more horizontal track than the viewport) — fixed here at the shared cause:
     min-width:0 down the feed chain. min-width/max-width longhands only; adds no
     scroll-container and no positioning. */
  .guest-dash .guest-col-main{max-width:100% !important;width:100% !important;min-width:0 !important}
  .guest-dash .gfeed-flow{min-width:0 !important;max-width:100% !important}
  .guest-dash .gpost{min-width:0 !important;max-width:100% !important}
  /* Image fills the card width, no letterbox band: cover crops the (rare) over-tall
     image to the box instead of contain-letterboxing it against #0b0f14. Normal
     portraits/landscapes are under max-height and simply fill full width. */
  .guest-dash .gpost-img{min-width:0 !important;max-width:100% !important;object-fit:cover !important}
}
body.force-mobile .guest-dash{padding:4px 0 60px 0 !important}
body.force-mobile .guest-card{border-radius:0 !important;margin-bottom:2px !important;border-left:none !important;border-right:none !important;padding:12px 12px !important}
body.force-mobile .gfeed-wrap{padding:0 !important;margin:0 !important;border:none !important;background:transparent !important}
body.force-mobile .guest-col-right{display:none !important}
body.force-mobile .ghome-tabs{margin-bottom:4px !important}
body.force-mobile .ghome-tab{padding:8px 12px !important;font-size:12px !important}
body.force-mobile .m-appbar{padding:4px 8px !important;min-height:40px !important}

/* ════════════════════════════════════════════════════════════════════════
   v9.10.344 — FORCE-MOBILE PARITY (owner: "feed is boxed, buttons too large").
   VIEW MODE = MOBILE sets body.force-mobile on a DESKTOP-width window, so the
   @media(max-width:900px) compact-phone rules in oracle.html never fire and the
   feed kept desktop padding + full-size text action buttons. Mirror the phone
   layout onto body.force-mobile so the test view matches a real phone: edge-to-
   edge post cards, tighter spacing, ICON-ONLY post actions. CSS-only; does not
   touch desktop-auto, real-phone @media, flight controls, or the voice pacer.
   ════════════════════════════════════════════════════════════════════════ */
body.force-mobile .gpost{padding:13px 12px !important;border-radius:0 !important;border-left:none !important;border-right:none !important;margin-bottom:8px !important}
body.force-mobile .gpost-text{font-size:15px !important;line-height:1.6 !important}
body.force-mobile .gpost-acts{gap:0 !important}
/* icon-only actions (font-size:0 hides the label, matching the phone @media rule) */
body.force-mobile .gpost-acts button{font-size:0 !important;padding:9px 4px !important;gap:0 !important}
body.force-mobile .gpost-acts button svg{width:22px !important;height:22px !important}
body.force-mobile .gpost-stats{font-size:11.5px !important;gap:8px !important}
body.force-mobile .gfeed-wrap>.gc-h{padding:0 12px !important;font-size:9px !important;margin-bottom:6px !important}
body.force-mobile .guest-dash-grid{gap:2px !important}
body.force-mobile .ghome-tabs{padding:0 !important;gap:0 !important;background:rgba(10,14,22,.95) !important}
body.force-mobile .ghome-pager-dots{margin:2px 0 4px !important}
body.force-mobile .m-appbar .m-ab-btn{min-width:34px !important;min-height:34px !important;padding:4px !important}
body.force-mobile .m-tabbar{font-size:9px !important;gap:0 !important;background:#080c16 !important;border-top:1px solid rgba(148,163,184,.15) !important;z-index:50 !important;position:relative !important}
body.force-mobile .m-tab{color:#64748b !important}
body.force-mobile .m-tab.active{color:#22d9e6 !important}
body.force-mobile .guest-dash .guest-dash-grid{max-width:100% !important;width:100% !important}
/* v9.10.505 — force-mobile twin of the feed-column min-width:0 root fix above. */
body.force-mobile .guest-dash .guest-col-main{max-width:100% !important;width:100% !important;min-width:0 !important}
body.force-mobile .guest-dash .gfeed-flow{min-width:0 !important;max-width:100% !important}
body.force-mobile .guest-dash .gpost{min-width:0 !important;max-width:100% !important}
body.force-mobile .guest-dash .gpost-img{min-width:0 !important;max-width:100% !important;object-fit:cover !important}
body.force-mobile .m-tab{padding:4px 2px 2px !important;font-size:9px !important;min-width:0 !important}
body.force-mobile .m-tab svg{width:18px !important;height:18px !important}

/* ════════════════════════════════════════════════════════════════════════
   v9.10.345 — RECLAIM THE TOP STRIP on the guest Home (owner ask). The appbar
   "Home · feed" title is redundant with the Feed/Shorts/Me tabs right below it,
   so hide it on mobile Home and pull the tab bar + content up flush under the
   header (kills the empty band above the tabs). NOTE: intentionally NOT crammed
   into the oracle/bell icon row — on a ~360px phone that row would overflow;
   this frees the band and lifts the tabs so they read as part of the header.
   ════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  body.scope-guest[data-view="home"] .m-ab-title{display:none !important}
  body.scope-guest[data-view="home"] .ghome-tabs{margin-top:0 !important;top:0 !important}
  body.scope-guest[data-view="home"] .guest-dash{padding-top:0 !important}
}
body.force-mobile.scope-guest[data-view="home"] .m-ab-title{display:none !important}
body.force-mobile.scope-guest[data-view="home"] .ghome-tabs{margin-top:0 !important}
body.force-mobile.scope-guest[data-view="home"] .guest-dash{padding-top:0 !important}

/* ════════════════════════════════════════════════════════════════════════
   v9.10.355 — FULL-WIDTH (Facebook-style) MOBILE FEED — clean re-apply.

   This is v9.10.353's PART 2 re-applied WITHOUT the two `overflow-x:hidden`
   "defensive" guards that caused the v9.10.354 scroll outage. Those guards were
   the entire problem: per the CSS Overflow spec, setting one axis to anything
   other than `visible` makes the other axis compute to `auto`, so they turned
   `.gpost` and `.gfeed-wrap` into scroll containers; a touch drag landed on that
   inner scroller (which had nothing to scroll) and never reached the real
   scroller `.home-scroll`. The PADDING work below was never implicated.

   RULES OBEYED IN THIS ENTIRE BLOCK — no exceptions:
     * ZERO overflow properties of any kind (no overflow / -x / -y, shorthand
       or longhand). Horizontal containment is already handled correctly in
       oracle.html by the Part-1 flex fix (`.gpost-cmt-form input{min-width:0}`).
     * Horizontal LONGHANDS only — padding-left/right, margin-left/right.
       Never a `padding`/`margin` shorthand (that would clobber top/bottom and
       the height context).
     * No position, display, flex, height, min-height, max-height or gap.
     * `.ghome-tabs` and `.m-tabbar` are not referenced at all.

   THE GUTTER (diagnosis retained from v9.10.353): the outer inset lives one
   level ABOVE everything v9.10.338/344 touched — the scroll container
   `.home-scroll` (oracle.html:1727, `padding:22px 24px 40px`), zeroed for
   Shorts (oracle.html:1163) but never for the Feed = 24px dead each side.
   Secondary: `body.scope-guest .guest-dash{padding-left:8px;padding-right:8px}`
   (oracle.html:987) applies up to max-width:999px while the mobile-sheet
   zeroing stopped at 900px, so a 901–999px viewport (large phone / landscape)
   kept an 8px gutter — hence the 999px gate here.
   Desktop >=1000px is outside the gate and unchanged.
   ════════════════════════════════════════════════════════════════════════ */
@media(max-width:999px),(max-height:520px){
  /* 1/6 — the primary 24px gutter. padding-left/right ONLY; padding-top (22px),
     padding-bottom (40px), flex, overflow-y and gap are deliberately untouched. */
  body.scope-guest[data-view="home"] .home-scroll{padding-left:0 !important;padding-right:0 !important}

  /* 2/6 — .guest-dash. Base is `padding:16px 24px 32px` (oracle.html:957) with an
     8px override at oracle.html:987. Sides only; padding-top/bottom preserved,
     including the padding-top:0 set for Home at line 614 of this file. */
  body.scope-guest .guest-dash{padding-left:0 !important;padding-right:0 !important}

  /* 3/6 — .gfeed-wrap (the `guest-card gfeed-wrap` at oracle.html:8242; inherits
     .guest-card padding 14px 16px). Sides only, plus side margins. */
  body.scope-guest .gfeed-wrap{padding-left:0 !important;padding-right:0 !important;
    margin-left:0 !important;margin-right:0 !important}

  /* 4/6 + 5/6 — the grid and its main column. Sides only. NOTE: `gap` is NOT set
     here (the existing `.guest-dash-grid{gap:2px}` at line 530 stays as-is), and
     grid-template-columns is untouched — this is purely the horizontal inset. */
  body.scope-guest .guest-dash-grid,
  body.scope-guest .guest-col-main{padding-left:0 !important;padding-right:0 !important;
    margin-left:0 !important;margin-right:0 !important}

  /* 6/6 — the post card. Side margins to 0 so it reaches both screen edges, and
     side padding 12px -> 10px so text sits nearer the edge (Facebook-style).
     padding-top/bottom (13px, line 584) untouched, so card height is unchanged. */
  body.scope-guest .gpost{margin-left:0 !important;margin-right:0 !important;
    padding-left:10px !important;padding-right:10px !important}
}
body.force-mobile.scope-guest[data-view="home"] .home-scroll{padding-left:0 !important;padding-right:0 !important}
body.force-mobile.scope-guest .guest-dash{padding-left:0 !important;padding-right:0 !important}
body.force-mobile.scope-guest .gfeed-wrap{padding-left:0 !important;padding-right:0 !important;
  margin-left:0 !important;margin-right:0 !important}
body.force-mobile.scope-guest .guest-dash-grid,
body.force-mobile.scope-guest .guest-col-main{padding-left:0 !important;padding-right:0 !important;
  margin-left:0 !important;margin-right:0 !important}
body.force-mobile.scope-guest .gpost{margin-left:0 !important;margin-right:0 !important;
  padding-left:10px !important;padding-right:10px !important}

/* ════════════════════════════════════════════════════════════════════════
   v9.10.385 — MOBILE Feed/Shorts/Me TABS: MATCH THE DESKTOP TREATMENT.

   Owner: "for the mobile view can the feed, shorts and me thing be on the top
   like how it is in the desktop version - mobile friendly still of course?"
   They were ALREADY on top; the ask is the desktop LOOK at phone-friendly size.

   The desktop strip lives in `#topbar-tabs-mount` (v9.10.374) and reads:
     .ghome-tab   -> font 600 12px, padding 6px 12px, min-width 78px,
                     icon 16px @ .6 opacity (1 when active), radius 8px 8px 0 0
     .ghome-tabs  -> gap 2px
     active state -> .ghome-tab.on's 3px accent border-bottom
     .ghome-underline -> display:none (it is a 2-tab, 50%-width slider; with
                     three tabs it lands wrong and vanishes entirely on "Me")

   Mobile was running a SEPARATE, smaller scale (11px / 6px 8px / min-width 62px
   / gap 0) AND was still painting the stale .ghome-underline on top of the
   border. This block aligns mobile to the desktop scale and kills the underline,
   then adds the only phone-specific deltas: 13px vertical padding so each tab is
   a >=44px tap target, and flex-grow so the three share the row evenly instead
   of huddling on the left. At 360px the three tabs measure ~251px natural, so
   flex-grow only ever DISTRIBUTES free space - it can never cause a clip.

   The opaque .ghome-tabs background is deliberately KEPT (desktop's is
   transparent): on mobile this strip is position:sticky over the scrolling feed
   and needs an opaque backing. Not changed here - just noting why it differs.

   RULES OBEYED - no exceptions:
     * NO position (the base sticky;top:0 is untouched - and never `fixed`,
       which is exactly what broke v9.10.350).
     * ZERO overflow properties of any kind, shorthand or longhand.
     * Padding LONGHANDS only. No padding/margin shorthands.
     * The container chain (.home-scroll/.guest-dash/.guest-dash-grid/
       .guest-col-main/.gpost/.gfeed-wrap) is NOT referenced - the v9.10.355
       edge-to-edge feed is untouched.
     * .m-tabbar is not referenced.
     * CSS only - no DOM, no handlers: the 3-pane swipe pager and the
       tap-a-tab-moves-the-pager wiring are byte-for-byte unchanged.
     * Gated to @media(max-width:900px) ONLY (no max-height clause) so a short
       DESKTOP window is not caught. Desktop >=901px is completely unaffected.

   NOTE the paired force-mobile mirror below - a prior bug shipped a mobile block
   with NO force-mobile twin, so VIEW MODE = MOBILE did not match a real phone.
   ════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .ghome-tabs,
  body.scope-guest .ghome-tabs{gap:2px !important}

  .ghome-tabs .ghome-tab,
  body.scope-guest .ghome-tabs .ghome-tab{
    flex-grow:1 !important;
    justify-content:center !important;
    min-width:78px !important;
    min-height:44px !important;
    font-size:12px !important;
    font-weight:600 !important;
    padding-top:13px !important;
    padding-bottom:13px !important;
    padding-left:12px !important;
    padding-right:12px !important}

  /* 2-tab, 50%-width slider - wrong for three tabs, and desktop already hides
     it. The active tab's own 3px accent border-bottom is the indicator. */
  .ghome-tabs .ghome-underline,
  body.scope-guest .ghome-tabs .ghome-underline{display:none !important}
}
/* force-mobile mirror (VIEW MODE = MOBILE on a desktop-width window) */
body.force-mobile .ghome-tabs,
body.force-mobile.scope-guest .ghome-tabs{gap:2px !important}
body.force-mobile .ghome-tabs .ghome-tab,
body.force-mobile.scope-guest .ghome-tabs .ghome-tab{
  flex-grow:1 !important;
  justify-content:center !important;
  min-width:78px !important;
  min-height:44px !important;
  font-size:12px !important;
  font-weight:600 !important;
  padding-top:13px !important;
  padding-bottom:13px !important;
  padding-left:12px !important;
  padding-right:12px !important}
body.force-mobile .ghome-tabs .ghome-underline,
body.force-mobile.scope-guest .ghome-tabs .ghome-underline{display:none !important}

/* ════════════════════════════════════════════════════════════════════════
   v9.10.389/390 — MOBILE: Feed/Shorts/Me MOVES ONTO THE HEADER ROW (ICON-ONLY).

   Owner (verbatim): "on mobile the home feed and me options you see should be
   above on the same line the header next to the refresh option so the section
   under has more room to show".

   This is a LAYOUT move, not styling. `mountGuestTabsInTopbar()` now MOVES the
   live `#ghome-tabs` node into `#m-appbar-tabs-mount` inside `.m-appbar` (the
   slot the guest-Home-hidden `.m-ab-title` vacated in v9.10.345), so the strip
   shares the 56px header row with the cube / bell / fullscreen / reload icons
   instead of owning a row of its own. Same node, same handlers, same active
   state - it is appendChild'd, never cloned.

   ── 360px FIT MATH (all figures from the REAL current values, not defaults) ──
   The icon cluster is NOT touched: cube, bell, fullscreen and reload keep their
   original positions, order and 46px size. The strip only consumes the slot the
   guest-Home-hidden `.m-ab-title` already occupied, so nothing is displaced.

     .m-appbar padding-left/right ..... 8px + 8px            =  16   (line 579)
     4 icon buttons @ 46px wide ....... cube/bell/fs/reload  = 184   (width:46px
        from oracle.html:2644 - the mobile `min-width:34px` is only a FLOOR and
        does NOT override `width`, so these really are 46px)
     5 children -> 4 gaps @ 4px ....... (line 579)           =  16
     ------------------------------------------------------------------
     LEFT FOR THE TABS at 360px .......................... 360-216 = 144px

   v9.10.390 budget, ICON-ONLY at 20px (owner: "the words don't need to be there"):
     3 tabs x (20px glyph + 8px padding-left + 8px padding-right) = 108
     2 inter-tab gaps @ 2px .................................... =   4
     ------------------------------------------------------------------
     TOTAL ..................................................... = 112px
     SLACK against the 144px budget ............................ =  32px (29%)

   Dropping the labels removed 79.2px of text, so the strip fell from 119.2px to
   112px of hard minimum even though the icons GREW 16px -> 20px. `flex-grow` then
   spreads the 32px of slack, landing each tab at ~46.7px wide x 44px tall - a tap
   target slightly LARGER than the 46px utility buttons beside it. With no text
   there is no font-metric risk, so v9.10.389's 0.70em stress test is now moot.

   ── TREATMENT CHOSEN: ICON-ONLY, per the owner ──
   v9.10.389 shipped label-only; the owner corrected it to icon-only and named the
   glyphs: Feed = house, Shorts = "the movie active thing" (clapperboard), Me =
   person. Two of the three ALREADY were a filled house and a filled person in
   `.ghome-tab svg`, so those are reused untouched. Only Shorts was wrong - a plain
   rounded square + play triangle, reading as a generic "video box" - and is
   replaced by a CLAPPERBOARD (see the inline note at the button in oracle.html).

   Style note: the new clapper is drawn FILLED, matching the house and person it
   sits between, rather than the line style of the cube/bell/fullscreen/reload. The
   three tabs are one control group and internal consistency reads better than
   matching the utility icons; converting all three to line style would also change
   DESKTOP, which is out of scope here. Easy to switch if line style is preferred.

   Labels are hidden via `.ghome-tab-l` (a span added around each label for exactly
   this purpose) rather than `font-size:0`, and each button carries `aria-label` +
   `title`, so the control keeps an accessible name with no visible text. The SVGs
   are `aria-hidden="true" focusable="false"` so they add nothing to the a11y tree.

   ACTIVE STATE (the text cue is gone, so it is strengthened): accent pill behind a
   full-opacity accent glyph, against .6-opacity muted glyphs.

   ── PAGER DOTS: REMOVED on mobile (owner's decision, this round) ──
   `aria-hidden="true"`, no handlers, pure mirror of tab state, and NOT the
   swipe's only affordance (the swipe binds to `#guest-tab-body`). Their own
   v9.10.327 comment says they existed "because there were no labelled tabs" -
   the tabs are back and now in the header, so they were spending a whole row of
   exactly the space this change is reclaiming. Hidden via CSS on mobile only, so
   the DOM and desktop are untouched.

   RULES OBEYED - no exceptions:
     * NO `position:fixed` anywhere. The strip is set to `position:static` inside
       the appbar (the appbar keeps its own existing `position:relative`, and the
       page header's sticky behaviour is not touched). `fixed` is what broke
       v9.10.350.
     * ZERO `overflow` properties of any kind, shorthand or longhand. The tight
       row is solved with SIZING (icon-only, 20px glyph + 8px padding), never a
       scroller.
     * The container chain (.home-scroll / .guest-dash / .guest-dash-grid /
       .guest-col-main / .gfeed-wrap / .gpost) is NOT referenced - the v9.10.355
       edge-to-edge feed is untouched.
     * `.m-tabbar` is not referenced.
     * Padding/margin LONGHANDS only.
     * `#guest-tab-body` is not referenced, so `attachGuestSwipe()` and the
       3-pane ORDER ['feed','shorts','me'] are unaffected.

   VERTICAL SPACE RECLAIMED: the tab row (44px + 3px active border + 4px margin
   = ~51px) and the dots row (6px+4px padding + 7px dot + 4px margin = ~21px)
   both disappear from the scrolling column -> ~72px given back to the feed.
   ════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* the strip, once inside the appbar, stops being a section header */
  #m-appbar-tabs-mount .ghome-tabs{
    position:static !important;
    align-items:center !important;
    gap:2px !important;
    flex-grow:1 !important;
    min-width:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    border-bottom:none !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    z-index:auto !important}

  /* v9.10.390 — ICON-ONLY (owner: "the words don't need to be there"). The label
     span is hidden; the accessible name comes from the button's aria-label/title,
     which is why the labels were wrapped in .ghome-tab-l in the first place.
     44px tap height is preserved - only the labels went away. */
  #m-appbar-tabs-mount .ghome-tab{
    flex-grow:1 !important;
    justify-content:center !important;
    min-width:0 !important;
    min-height:44px !important;
    gap:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    padding-left:8px !important;
    padding-right:8px !important}
  #m-appbar-tabs-mount .ghome-tab .ghome-tab-l{display:none !important}
  /* 20px to match the cube / bell / fullscreen / reload glyphs in the same bar
     (they are 20px). Desktop keeps the 16px width/height attributes. */
  #m-appbar-tabs-mount .ghome-tab svg{width:20px !important;height:20px !important}
  /* ACTIVE STATE - the text cue is gone, so make it unmistakable: an accent pill
     behind a full-opacity accent glyph, against .6-opacity muted glyphs. The pill
     also matches the rounded boxes the other appbar buttons already use, so the
     strip reads as part of the bar. The 3px bottom border is neutralised because
     a bottom rule under a rounded pill looks like a rendering artefact. */
  #m-appbar-tabs-mount .ghome-tab{
    border-radius:10px !important;
    border-bottom-color:transparent !important}
  #m-appbar-tabs-mount .ghome-tab.on{
    background:rgba(34,217,230,.18) !important;
    color:var(--accent) !important;
    border-bottom-color:transparent !important}
  #m-appbar-tabs-mount .ghome-tab.on svg{opacity:1 !important}
  #m-appbar-tabs-mount .ghome-underline{display:none !important}

  /* vestigial pager dots — see the note above */
  .ghome-pager-dots{display:none !important}
}
/* force-mobile mirror (VIEW MODE = MOBILE on a desktop-width window) */
body.force-mobile #m-appbar-tabs-mount .ghome-tabs{
  position:static !important;
  align-items:center !important;
  gap:2px !important;
  flex-grow:1 !important;
  min-width:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  border-bottom:none !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  z-index:auto !important}
body.force-mobile #m-appbar-tabs-mount .ghome-tab{
  flex-grow:1 !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:44px !important;
  gap:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  padding-left:8px !important;
  padding-right:8px !important;
  border-radius:10px !important;
  border-bottom-color:transparent !important}
body.force-mobile #m-appbar-tabs-mount .ghome-tab .ghome-tab-l{display:none !important}
body.force-mobile #m-appbar-tabs-mount .ghome-tab svg{width:20px !important;height:20px !important}
body.force-mobile #m-appbar-tabs-mount .ghome-tab.on{
  background:rgba(34,217,230,.18) !important;
  color:var(--accent) !important;
  border-bottom-color:transparent !important}
body.force-mobile #m-appbar-tabs-mount .ghome-tab.on svg{opacity:1 !important}
body.force-mobile #m-appbar-tabs-mount .ghome-underline{display:none !important}
body.force-mobile .ghome-pager-dots{display:none !important}