/* Web/PWA responsive pass (plan §9.1) — loaded ONLY in web-dist/index.html, never on
   desktop. Under 768px: the sidebar becomes a "More"-drawer, a bottom nav (built by
   web-boot.js) carries the 4 mobile-first views (Image / Video / Queue / Gallery), and
   multi-column grids collapse to one column. This same stylesheet is what the Capacitor
   native app (B5) will ship — the PWA pass IS the native UI. */

/* .mi = icon Material Symbols của lớp mobile (bottom nav / drawer — web-boot mobileUi).
   ROOT CAUSE bug "chữ thô khổng lồ" 2026-07-11: span .mi chưa từng được khai font icon
   (chỉ có font-size) → ligature image/movie/menu… vẽ bằng Be Vietnam Pro thành text. */
.mi {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased;
}

/* Icon-font guard (web-boot iconFontGuard): ẩn ligature Material Symbols cho tới khi font
   THẬT SỰ load xong (body.fs-icons-ready). Mạng/tunnel chập chờn làm riêng request font chết
   → không guard thì tên ligature (image/movie/menu…) vẽ thành CHỮ THÔ khổng lồ. Ẩn icon
   thì nav vẫn còn label chữ; guard load/retry xong sẽ bật lại. */
.material-symbols-outlined, .mi { visibility: hidden; }
body.fs-icons-ready .material-symbols-outlined,
body.fs-icons-ready .mi { visibility: visible; }

#fs-bottom-nav { display: none; }

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }

  /* Sidebar: hidden by default; "More" opens it as a drawer over the content. */
  .sidebar { display: none; }
  body.fs-drawer-open .sidebar {
    display: flex;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1200;
    width: min(300px, 85vw);
    box-shadow: 0 0 40px rgba(0, 0, 0, .6);
    /* layout v2 biến sidebar thành off-canvas riêng (styles.css [data-layout="v2"] .sidebar
       { transform: translateX(-100%) }) → không reset thì drawer mở nhưng nằm NGOÀI màn
       hình (bug Menu 2026-07-11, chỉ dính layout v2). !important vì rule v2 thắng cascade
       trong thực tế (verified Chromium) dù specificity trên giấy thấp hơn — drawer đang mở
       PHẢI đè mọi cơ chế ẩn/hiện sidebar của bất kỳ layout nào. */
    transform: none !important;
  }
  body.fs-drawer-open::after { /* scrim — web-boot closes the drawer on tap */
    content: ''; position: fixed; inset: 0; z-index: 1199; background: rgba(0, 0, 0, .45);
  }
  .sidebar-resizer { display: none; }

  /* Bottom navigation (5 slots, safe-area aware). */
  #fs-bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    background: var(--bg-header, #12121c);
    border-top: 1px solid var(--border-soft, #26263a);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #fs-bottom-nav button {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 2px 6px; border: 0; background: none; cursor: pointer;
    color: var(--text-secondary, #9a97b0); font: 500 10px/1.2 inherit;
  }
  #fs-bottom-nav button .mi { font-size: 22px; }
  #fs-bottom-nav button.active { color: var(--accent, #7c5cff); }

  /* Content clears the bottom nav. */
  .content { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* Collapse multi-column layouts (tailwind grids in the React views + shell card rows). */
  .grid-cols-2, .grid-cols-3, .grid-cols-4,
  .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4,
  .lg\:grid-cols-2, .lg\:grid-cols-3, .lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Complex-view notice (web-boot shows it on Capcap / PanelFlow workspace). */
  #fs-mobile-notice {
    position: fixed; top: 10px; left: 10px; right: 10px; z-index: 1300;
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-header, #12121c); color: var(--text-primary, #eee);
    border: 1px solid var(--border-soft, #26263a); border-radius: 10px;
    padding: 10px 12px; font-size: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
  }
  #fs-mobile-notice button {
    margin-left: auto; border: 0; background: none; color: inherit;
    font-size: 16px; cursor: pointer; padding: 2px 6px;
  }
}