/* ============================================================
   UnilogIQ — Mobile responsive layer (R-109)
   ------------------------------------------------------------
   A SINGLE phone breakpoint that restyles the EXISTING live
   classes (.li-* login, .chat-* / .cowork-* chat) to match the
   mobile design handoff (project/UnilogIQ Mobile.html). Loaded
   LAST in UniHub.html so it overrides; everything lives inside
   the media query, so desktop (> MOBILE) is byte-for-byte
   unchanged. No new palette — reuses the live rd-* and base tokens.

   Breakpoint: 640px (phones + small portrait tablets). The
   login already stacks at 1080px (login.css); this tightens the
   <=640 case and converts the chat into a stack-nav surface.

   Scope (agreed): chat + login, LIGHT theme. The login keeps its
   standalone dark gradient. App-wide dark mode is out of scope.
   ============================================================ */

/* NOTE: the CHAT mobile layout (stack-nav, FAB, back button) is NOT here — the
   chat's base .chat-* styles are injected at runtime by app/ai-shared.jsx, which
   loads AFTER this static <link>, so rules here would lose the cascade. The chat
   mobile rules live in ai-shared.jsx's injected block (R-109). This file owns the
   LOGIN (styles/login.css is a static link, so these override cleanly). */

@media (max-width: 640px) {

  /* iOS rubber-band + tap flash hygiene for the whole app on phones */
  * { -webkit-tap-highlight-color: transparent; }

  /* ==========================================================
     LOGIN  (Landing.jsx → .li-*)  — single column, button docked
     The split-screen chat preview and the connected-logos grid
     are desktop eye-candy; the mobile design shows brand +
     headline + lede at the top and the sign-in docked low.
     ========================================================== */
  .li-nav { padding: 18px 22px calc(18px + env(safe-area-inset-top)); }
  .li-managed { display: none; }              /* free up the cramped top row */

  .li-main {
    display: flex; flex-direction: column;
    gap: 0; align-items: stretch;
    padding: 4px 26px calc(28px + env(safe-area-inset-bottom));
  }
  .li-left {
    max-width: none; flex: 1;
    display: flex; flex-direction: column;
  }
  .li-right { display: none; }                /* hide the rotating preview */
  .li-connected { display: none; }            /* hide the logo grid */

  .li-eyebrow { margin-top: 6px; }
  .li-h1 { font-size: clamp(30px, 9vw, 38px); line-height: 1.08; letter-spacing: -0.025em; }
  .li-lede { font-size: 14.5px; line-height: 1.6; margin-top: 14px; }

  /* sign-in + trust sink to the bottom as one group (margin-top:auto on the
     first of the trailing block); eyebrow/h1/lede stay pinned to the top */
  .li-signin { margin-top: auto; width: 100%; padding: 16px; font-size: 15px; border-radius: 15px; }
  .li-gemini { margin-top: 16px; justify-content: center; }
  .li-trust  { margin-top: 14px; justify-content: center; text-align: center; flex-wrap: wrap; }

  /* footer: keep it quiet on a phone */
  .li-foot { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); font-size: 11px; }

  /* ==========================================================
     SHARED HEADER (Home.jsx HeaderBar → app.css/home.css .hub-*)
     Used by BOTH the home screen and the chat. app.css already hides the
     search + user name/role at <=720, but the "Open UNIIQ" and "Apps" button
     LABELS still overflow a phone row and push the avatar off-screen. Collapse
     those two to icon-only and tighten the row so everything fits. (app.css/
     home.css are static links loaded before mobile.css, so these override.) */
  .hub-header-inner { padding: 0 12px; gap: 8px; }
  .hub-right { gap: 8px; }
  /* icon-only: font-size:0 drops the bare text label; the sparkle SVG (sized via
     attribute) and the 3x3 grid (fixed 3px cells) keep their dimensions. */
  .home-aibtn { font-size: 0; gap: 0; padding: 9px 11px; }
  /* R-111: phone is LITERALLY chat-only — no app-launcher surface. Hide the Apps
     button so the chat header is just brand · notifications · account. */
  .home-appsbtn { display: none; }
  .user-chip { padding: 4px; gap: 0; }
  .user-chip > svg { display: none; }   /* drop the dropdown caret — avatar only */

  /* ==========================================================
     SUPPORT HOME (mobile prototype) — the CS day-loop (bands / queue /
     day-loop in HomeShell) is allowed on phones for the support role
     (see app/main.jsx mobileChatOnly). The .home-grid already stacks to
     one column <=960px (home.css); this only tightens the page gutters +
     stack gaps so the bands read cleanly on a phone. Desktop is untouched
     (everything is inside this 640px query).
     ========================================================== */
  .home-page { padding: 14px 12px calc(26px + env(safe-area-inset-bottom)); }
  .home-brief-top { gap: 10px; }
  .home-grid { gap: 14px; }
  .home-col, .hs-bands { gap: 14px; }

}