/**
 * Magna AI — Responsive App Shell (mobile)
 *
 * ★ PORTED from ConfidenceTalk `public/css/responsive.css` (2026-10-01).
 *
 * ★★ THIS FILE WAS REDUCED, AND THE REDUCTION IS THE POINT. CT's sheet carries
 *   24 class families; a measured 10 of them are ORPHANED in AISG because their
 *   producer — `ct-responsive-nav.js` — is an R5-dependent deferred asset:
 *
 *     DROPPED (no producer in AISG yet):
 *       .aisg-bottom-tabs · .aisg-bottom-tabs-more · .aisg-drawer-open
 *       .aisg-drawer-sheet · .aisg-drawer-sheet-menu · .aisg-drawer-backdrop
 *       .aisg-drawer-visible · .aisg-safety-table · .aisg-table-wrapper
 *       .aisg-guest-trial-banner
 *
 *   Styling them now would be CSS for elements nothing creates — visible only to
 *   a human looking at the page. Re-add them WITH `aisg-responsive-nav.js`.
 *
 * ★ WHAT REMAINS IS WHAT AISG RENDERS — verified against `class-public.php`,
 *   `templates/aisg-page-wrapper.php` and the R7-corrected class vocabulary:
 *   `aisg-dashboard-active`, `aisg-admin-panel-active`, `toplevel_page_ai-site-guide`,
 *   `aisg-sidebar`, `aisg-main-layout`, `aisg-nav-item`, `aisg-nav-icon`,
 *   `aisg-content`, `aisg-site-content`, `aisg-site-header`, `aisg-site-footer`,
 *   `aisg-gold-series`, `aisg-chat-immersive`, `aisg-chat-header`, `aisg-chat-back`.
 *
 * ★ SURFACES: `body.aisg-dashboard-active` (frontend dashboard) ·
 *   `body.aisg-admin-panel-active` (frontend admin panel) ·
 *   `body.toplevel_page_ai-site-guide` (wp-admin Gold Series panel).
 *
 * ★ THE BACKGROUND VAR CARRIES ITS OWN FALLBACK. `--color-secondary-gradient` is
 *   defined ONLY in `assets/css/aisg-gold-series.css`, which is NOT loaded on the
 *   front end — so a bare reference would resolve to nothing. The literal is kept.
 *
 * @package AISG
 */

/* ============================================================
   MOBILE APP SHELL — DASHBOARD + ADMIN PANELS
   ============================================================ */
@media screen and (max-width: 768px) {

  /* Layout: stack (the drawer is fixed, so the content flows normally) */
  body.aisg-dashboard-active .aisg-main-layout,
  body.aisg-admin-panel-active .aisg-main-layout,
  body.toplevel_page_ai-site-guide .aisg-main-layout {
    display: block;
  }

  /* Drawer: fixed slide-in panel replacing the stacked sidebar.
     ★ THE `.aisg-drawer-open` RULE IS OMITTED — that state class is added by
     `aisg-responsive-nav.js`, an R5-dependent deferred asset. Without the JS the
     class never appears, so the slide-in would never trigger. Add it WITH the JS.
     The base drawer positioning below stays: it is harmless while closed
     (`translateX(-105%)`) and correct once the JS lands. */
  body.aisg-dashboard-active .aisg-sidebar,
  body.aisg-admin-panel-active .aisg-sidebar,
  body.toplevel_page_ai-site-guide .aisg-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 85vw);
    min-width: 0;
    z-index: 1002;
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-secondary-gradient, #2C5F6E);
    border-radius: 0 16px 16px 0;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 0 16px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }

  /* The side content area */
  body.aisg-dashboard-active .aisg-content,
  body.aisg-admin-panel-active .aisg-content,
  body.toplevel_page_ai-site-guide .aisg-content {
    margin-left: 0;
  }

  body.aisg-dashboard-active .aisg-site-content,
  body.aisg-admin-panel-active .aisg-site-content {
    padding-left: 0;
    padding-right: 0;
  }
}

/* MOBILE TOUCH TARGET — vertical/drawer nav items (was 38px) */
@media (max-width: 768px) {
  .aisg-nav-item,
  .nav-item {
    min-height: 44px;
  }
}

/* ============================================================
   CHAT BACK BUTTON — hidden by default, shown only in the
   immersive mobile chat (body.aisg-chat-immersive).
   ============================================================ */
.aisg-chat-back {
  display: none;
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
}

.aisg-chat-back:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ============================================================
   IMMERSIVE FULL-SCREEN CHAT (mobile) — when a conversation is
   open on a phone the chat owns the viewport. Hide the marketing
   header / footer, and let #aisg-chat-container fill the screen
   with the back button in the header. Loaded after frontend.css
   so it wins.
   ============================================================ */
@media screen and (max-width: 768px) {
  body.aisg-dashboard-active.aisg-chat-immersive .aisg-site-header,
  body.aisg-dashboard-active.aisg-chat-immersive .aisg-site-footer {
    display: none !important;
  }

  body.aisg-dashboard-active.aisg-chat-immersive .aisg-content {
    padding: 0 !important;
    min-height: 0 !important;
  }

  body.aisg-dashboard-active.aisg-chat-immersive .aisg-gold-series {
    margin: 0 !important;
    max-width: none !important;
  }

  body.aisg-dashboard-active.aisg-chat-immersive #aisg-subtab-content {
    margin: 0 !important;
  }

  body.aisg-dashboard-active.aisg-chat-immersive .aisg-chat-header {
    position: relative;
    padding-left: 52px;
  }

  body.aisg-dashboard-active.aisg-chat-immersive .aisg-chat-back {
    display: flex;
  }

  body.aisg-dashboard-active.aisg-chat-immersive #aisg-chat-container {
    height: 100vh;          /* fallback */
    height: 100dvh;         /* dynamic viewport (URL bar / keyboard aware) */
    min-height: 0;
    border-radius: 0;
    margin: 0;
    border: none;
    box-shadow: none;
  }
}